@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
/*
    Template: swell
    Theme Name: tokairinen-theme
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ヘッダーアクティブの線 */
.c-gnav a::after {
    height: 7px;
}

.font-family-shippori{
      font-family: 'Shippori Mincho','klee','ヒラギノ明朝 ProN',sans-serif;
}

/* TOP */
body.page h2 {
    font-family: serif;
    font-size: 1.7em !important;
    letter-spacing: 2em;
}

.custom-title {
  color: #6c6c6c; /* テキストの色 */
  font-size: 32px; /* 基本のフォントサイズ */
  font-weight: bold; /* 文字の太さ */
  letter-spacing: 1.5px; /* 文字間隔 */
  white-space: nowrap; /* 改行を防ぐ */
  position: relative; /* 子要素の位置指定の基準とする */
  padding-top: 25px; /* 上のラベル用の余白を少し広げる */
  display: inline-block; /* 幅をコンテンツに合わせる */
}

.margin-botttom0{margin-bottom:0;}
.wp-block-group.card-3.has-background {
    height: 655px;
}

.br-sp{display:none;}


@media screen and (max-width: 768px) {
        .br-sp{display:block;}
    div#catching {
    padding: 10px!important;
}
p.custom-title {
    font-size: 20px;
    line-height:26px;
}
span.expert-label{display:none;}
.wp-block-group.card-3.has-background {
    height: auto;
}


}

/* 「寝」の文字の黄色い円 */
.highlight {
  position: relative; /* 疑似要素の位置指定の基準とする */
  /* display: inline-block; */
}

.highlight::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 1.4em;
    height: 1.4em;
    background-color: #fddb00;
    border-radius: 50%;
    top: 45%;
    left: 0%;
    transform: translate(-50%, -50%);
}

/* 「エキスパート」のラベル */
.expert-label {
  position: absolute;
  top: 10px;
  right: 94px; 
  font-size: 16px; 
  font-weight: 500; 
  color: #888; 
}

p.custom-title {
    text-align: center;

    display: block;
}


/* ピンクカード */
.wp-block-group.card-3.has-background {
    padding: 30px 0;
}
.wp-block-group.card-text {
    padding: 0 15px;
}

#B-L-Rcard .wp-block-column.has-white-background-color.has-background {
    padding: 0;
}

#B-L-Rcard a.wp-block-button__link {
    padding: 5px;
}

#B-L-Rcard .wp-block-group.card-text .wp-block-columns {
    --wp-column-gap: 0.5em;
}


.box-shadow {box-shadow: 0px 4px 9px -6px #777777;}

#B-L-Rcard .wp-block-columns {
    justify-content: space-around;
}


.back-wave {
  background-image: url('https://www.tokai-corp.com/rinen/wp-content/uploads/2025/07/アセット-12.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:white;
}

.padding-01 {
    padding: 20px 0 20px 20px;
}

.gap-0 {
    gap: 0!important;
}

#belt-3 p{
    line-height: 20px;
}




.pink-underline{
    border-bottom: 1px solid #e57375;
    line-height: 2.5em;
}

.wp-block-columns.are-vertically-aligned-center.is-not-stacked-on-mobile.contactto-sp {
    gap: 0!important;
}

.line-pink {
    border-bottom: 1px solid #e57375;
    border-top: 1px solid #e57375;

}
@media screen and (max-width: 768px) {
    #inquiry-to-introduction h3 {
    border-bottom: none;
}
div#belt-3 .wp-block-columns.are-vertically-aligned-center.is-not-stacked-on-mobile.back-wave.sp_only {
    gap: 1em!important;
}


}

#blogandnews ul {
    gap: 25px;
    justify-content: center;
}

#blogandnews li{width:30%;}

#blogandnews {
  background-image: repeating-linear-gradient(
    45deg,
    #e4f3ff 0,
    #e4f3ff 5px,
    transparent 5px,
    transparent 10px
  );}

#blogandnews li.p-postList__item {
    background-color: #ffffff;
    padding: 1em!important;
    box-shadow: 0px 4px 9px -6px #777777;
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {

#blogandnews .p-postListWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  scroll-snap-type: x mandatory;
  direction: ltr;
}

#blogandnews .p-postListWrap::-webkit-scrollbar {
  display: none;
}


#blogandnews .p-postListWrap ul {
  /* 横一列に並べる */
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 10px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}

#blogandnews .p-postListWrap li {
  /* 記事一つの幅を画面の75%に設定 */
  flex: 0 0 75vw;
  min-width: 75vw;
  scroll-snap-align: start;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}
}


/* カテゴリータブに色をカスタマイズ */

/* --- カテゴリー「お役立ち」(ID:2) のスタイルまとめ --- */
.c-postThumb__cat[data-cat-id*="2"],
a.c-categoryList__link[data-category-id*="2"],
a.c-categoryList__link[data-cat-id*="2"],
.category-2 span.c-categoryList__link.-current {
    background-color: #bba1cb !important;
    color: #ffffff !important;
}

/* --- カテゴリー「お知らせ」(ID:3) のスタイルまとめ --- */
.c-postThumb__cat[data-cat-id*="3"],
a.c-categoryList__link[data-category-id*="3"],
a.c-categoryList__link[data-cat-id*="3"],
.category-3 span.c-categoryList__link.-current {
    background-color: #add598 !important;
    color: #ffffff !important;
}

/* --- カテゴリー「採用情報」(ID:4) のスタイルまとめ --- */
.c-postThumb__cat[data-cat-id*="4"],
a.c-categoryList__link[data-category-id*="4"],
a.c-categoryList__link[data-cat-id*="4"],
.category-4 span.c-categoryList__link.-current {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/* --- カテゴリー「企業情報」(ID:5) のスタイルまとめ --- */
.c-postThumb__cat[data-cat-id*="5"],
a.c-categoryList__link[data-category-id*="5"],
a.c-categoryList__link[data-cat-id*="5"],
.category-5 span.c-categoryList__link.-current {
    background-color: #b46673 !important;
    color: #ffffff !important;
}




#blogandnews .is-style-btn_solid a {
    color: #7a7979;
}

/* footer */
div#before_footer_widget {
    background-color: #89c3eb;
    text-align: center;
    padding-top: 7em;
    position: relative;
}

footer li {color:white;}

figure#awa {
    position: relative;
}

figure#awa img {
    position: absolute;

    left: 0;
    bottom: -282px;
    z-index: -1;
}

@media screen and (max-width: 768px) {
div#before_footer_widget {
    padding: 2em 0 0;
}
    div#before_footer_widget img {
    width:70%;
    max-width: 200px;
}
.l-container.w-footer.-col3 {
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}
.w-footer__box {
    width: 48%;
}
}

p.has-text-align-center.sun-p {
  position: relative;
  margin-bottom:0.5em;
}


p.has-text-align-center.sun-p::before {
  content: "";
 background-image: url('https://www.tokai-corp.com/rinen/wp-content/uploads/2025/07/太陽.webp');
  background-size: contain;     /* 画像が領域に収まるように調整 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  background-position: center;  /* 領域の中央に配置 */
 position: absolute;
  top: -90%;
  left: 35%;
  width: 60px; 
  height: 60px; 
}

@media screen and (max-width: 768px) {
    p.has-text-align-center.sun-p::before {
   display: none;
}
}


header#header {
    background-image: url('https://www.tokai-corp.com/rinen/wp-content/uploads/2025/07/AdobeStock_1197439346.psd.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: 50% 27%;
}



/* モダールウインドウ */

ul.wp-block-list.marunage {
  display: grid;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

ul.wp-block-list.marunage li {
  position: relative;
  padding-left: 1.3em; /* アイコンの幅に応じて調整 */

}

ul.wp-block-list.marunage li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.em; /* アイコンの縦位置調整 */
  width: 1.2em;
  height: 1.2em;
  background-image: url("https://www.tokai-corp.com/rinen/wp-content/uploads/2025/07/アセット-1-2.webp");
  background-size: contain;
  background-repeat: no-repeat;
}

div#modal h2{letter-spacing:normal;}

div#modal h2 {
    letter-spacing:normal;
    padding: 0;
    margin: 2em auto;
}
.fukidashi::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 50%;
    width: 2px;
    height: 20px;
    background: #898989;
    transform: rotate(-45deg);
    transform-origin: center;
}

.fukidashi::after {
    content: "";
    position: absolute;
    right: 10%;
    top: 50%;
    width: 2px;
    height: 20px;
    background: #898989;
    transform: rotate(45deg);
    transform-origin: center;
}


/* 親要素：z-indexを追加して、ページ全体での重なり順を確保する */
figure#modal-btn {
    position: relative;
    z-index: 10; /* ← 親にz-indexを追加（他の要素より大きい数値に） */
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}



@media screen and (max-width: 768px) {
figure#modal-btn {
    width: 105vw;
    left: 0%;
    transform: translateX(0%);
}
    /* figure#modal-btn img {
   
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 113px;
} */

div#B-L-Rcard .wp-block-image.u-mb-ctrl.u-mb-0 {
    display: grid;
    justify-content: center;
}
div#B-L-Rcard figure.alignleft.size-full.is-resized {
    margin: 0;
}
div#B-L-Rcard h5{text-align:center;}
}


/* ここから、ポップアップ */
       /* モーダルの背景 */
#modal {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 画面に固定 */
  z-index: 1; /* 他の要素より手前に表示 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6); /* 半透明の黒 */
}

/* --- モーダルのスタイル --- */

/* モーダルの背景（オーバーレイ） */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7) !important;
  z-index: 1000; /* ヘッダー(100)より高い値 */
  
  /* 中央揃えのために常にFlexboxにしておく */
  display: flex;
  align-items: center;
  justify-content: center;

  /* ▼ ふわっと表示させるための設定 ▼ */
  /* 1. 初期状態は透明で見えなくする */
  opacity: 0;
  visibility: hidden;
  
  /* 2. opacityとvisibilityの変化を0.3秒かけてアニメーションさせる */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JavaScriptでこのクラスが付与されると表示状態になる */
#modal.is-visible {
  opacity: 1;
  visibility: visible;
}


/* モーダルのコンテンツ部分 */
.modal-content {
  position: relative; /* 閉じるボタンの基準位置にする */
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  /* width: 90%; */
  max-width: 800px;
  max-height: 80vh; /* 高さが画面の80%を超えたら */
  overflow-y: auto;  /* 縦方向にスクロールバーを出す */
  
  /* ▼ 少し拡大しながら表示されるアニメーション ▼ */
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* モーダル表示時に、コンテンツを元のサイズに戻す */
#modal.is-visible .modal-content {
  transform: scale(1);
}

/* 閉じるボタン */
span.close-btn {
    position: absolute;
    top: -1px;
    right: -40px;
    background-color: #ffffff6b;
    color: #1a1a1a;
    border: 1px solid;
    cursor: pointer;
    z-index: 982;
    width: 40px;
    height: 40px;
    display: flex;
    font-size: 40px;
    justify-content: center;
    align-items: center;
}

.close-btn:hover,
.close-btn:focus {
  color: #333;
  text-decoration: none;
}

.c-filterLayer.-texture-dot:after {
    background-color: rgba(0,0,0,.3);
    background-image: none;
}

@media screen and (max-width: 767px) {
    div#modal h2 {

    font-size: 16.5px!important;
   
}
div#modal li {
    font-size: 16px;
}

.fukidashi::before {
    left: 0%;
}

.fukidashi::after {
    right: 0%;
}

span.close-btn {

    top: 0px;
    right: 20px;

}
}

/* アニメーションの定義（PC用） */
@keyframes image-flash-effect {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* 共通：初期状態（PC用） */
figure#modal-btn img {
    position: absolute;
    top: 0px;
    right: 3%;
    width: 150px;
    z-index: 50;
    animation: image-flash-effect 1.5s infinite;
}

/* スマホ用に上書き */
@media screen and (max-width: 960px) {
figure#modal-btn img {
    width: 100px;
    top: -110px;
    right:5%;
}


  /* アニメーションの再定義（スマホ用） */
  /* 中央寄せ(translateX)と拡大(scale)を両方指定する */
  @keyframes image-flash-effect {
    0%, 100% {
      transform: translateX(-50%) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateX(-50%) scale(1.05);
      opacity: 0.8;
    }
  }
}

@media screen and (max-width: 764px) {
figure#modal-btn img {
    right:0%;
}
}



.paddong-top5 {
    padding-top: 8px;
}

.w-footer__box+.w-footer__box {
    margin-top: 0;
}
span.c-postThumb__cat.icon-folder {
    font-size: 12px!important;
}

.wp-block-image.sp_only.u-mb-ctrl.u-mb-20.mb-05 {
  margin-bottom: 1em !important;
}

.gap-10 {gap:10px!important;}


div#custom_html-6 {
    position: relative;
    height: 100px; /* 高さを必ず指定 */
}

div#custom_html-6 img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}


/* ファーストビュー文字 */
/* アニメーションの内容を定義 */
@keyframes color-loop {
  0% {
    color: #009ce5; /* 開始時の色（元の青色） */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); /* 開始時の文字の影 */
  }
  50% {
    color: #ffffff; /* 中間点の色（白色） */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); /* 白になった時に少し影を濃くして視認性を上げる */
  }
  100% {
    color: #009ce5; /* 終了時の色（元の青色に戻る） */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); /* 終了時の文字の影 */
  }
}

/* アニメーションを適用する要素を指定 */
.p-mainVisual__slideTitle {
  /* 元々指定されていた色はアニメーションで上書きされるので不要 */
  
  /* アニメーションを適用 */
  animation-name: color-loop; /* 上で定義したアニメーション名を指定 */
  animation-duration: 12s;       /* 1ループにかかる時間（6秒） */
  animation-timing-function: ease-in-out; /* ゆっくり始まってゆっくり終わる滑らかな変化 */
  animation-iteration-count: infinite; /* 無限に繰り返す */
}

.p-mainVisual__slideTitle {
  /* clamp()が未対応の古いブラウザ向けの記述 */
  font-size: 30px;

  /* メインの記述：フォントサイズを可変にする */
  /* 解説： clamp(最小サイズ, 推奨サイズ, 最大サイズ) */
  font-size: clamp(20px, calc(18px + 2.4vw), 68px);
  font-family: 'Shippori Mincho','klee','ヒラギノ明朝 ProN',sans-serif;
  letter-spacing: 5px;;

}

@media screen and (max-width: 500px) {
    .p-mainVisual__slideTitle {
  letter-spacing: 0px;;
  font-size:26px;
}}


.p-mainVisual__inner {

    position: initial;
}

div#main_visual {
    /* height: calc(100svh - 260px); */
    position: relative;
}

.p-mainVisual__textLayer {
    position:absolute;
  top: 50%; /* 上からの位置を0→50%に上書き */
  -webkit-transform: translate(-50%, -50%); /* transformの値を新しい中央揃え用に上書き */
  transform: translate(-50%, -50%); /* 同上 */
  height: auto; /* 既存の height: 100% を打ち消して自動調整に戻す */
}

/* @media screen and (max-width: 800px) {
div#main_visual {
    height: auto;
}
} */

/* faqページのよくある質問ボタン非表示 */
.id_1573 .faq-linkbtn {
    display: none;
}

@media screen and (max-width: 767px) {
    .list-column-section .under-line p{
    font-size: 16px!important;
}}

/* ヘッダー内のホバー時色修正 */

/* ==============================
   グローバルナビゲーション 下線制御
   ============================== */

/* 共通（初期状態は非表示、hover用は細い下線） */
.c-gnav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* hover用の細さ */
  transform: scaleX(0);
  transition: transform .25s, width .25s, height .25s;
}

/* ホバー時（細い下線、色はメインカラー） */
.c-gnav > li:hover > a::after {
  background:#89c3eb; /* ホバー時の色 */
  transform: scaleX(1);
}

/* 現在ページ（太い下線、常に表示） */
.c-gnav > .-current > a::after {
  background: #3498db; /* current の色 */
  height: 7px; /* 太めの下線 */
  transform: scaleX(1);
}

/* current に hover しても上書きされないように強制 */
.c-gnav > .-current:hover > a::after {
  background: #3498db;
  height: 7px;
  transform: scaleX(1);
}
/* 20251030リネンサプライページ微調整 */
@media screen and (min-width: 780px) {
h5.wp-block-heading.has-text-align-center.is-style-section_ttl.lease-title05.title-width100 {
    width: 100%;
    font-size: 16px!important;
    line-height: 32px;
}
｝