h1.c-pageTitle {
    font-size: 47px;
    text-align: center;
    letter-spacing: 9.4px;
}

.archive h1.c-pageTitle {
    font-size: 30px;
    letter-spacing: normal;
}




div#top_title_area {
    height: 45vh;
}

.c-pageTitle::after {
  display: block;
  font-size: 12px;
  color: #fff;
  text-align: center;
  margin-top: 6px;
    visibility: visible !important;
}

.page-id-2 .c-pageTitle::after {
  content: "リース";
}

.page-id-904 .c-pageTitle::after {
  content: "リネンサプライ";
}

.page-id-840 .c-pageTitle::after {
  content: "レンタル";
}

.page-id-968 .c-pageTitle::after {
  content: "客室リニューアル";
}

.page-id-1067 .c-pageTitle::after {
  content: "メンテナンス";
}

.page-id-1154 .c-pageTitle::after {
  content: "商品紹介・販売";
}

.page-id-1573 .c-pageTitle::after {
  content: "よくある質問";
}

.page-id-1947 .c-pageTitle::after {
  content: "導入事例";
}

.blog .c-pageTitle::after {
  content: "ブログ";
}


p.has-text-align-center.back-bluetext{
    padding: 0px;
}

h5.wp-block-heading.has-text-align-center.is-style-section_ttl.lease-title05 {
    border-bottom: 1px solid #F5B1A2;
    width: 80%;
    margin: 0 auto 1em;
}
.gap-0{gap:0!important;}

.checkbox::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("https://www.tokai-corp.com/rinen/wp-content/uploads/2025/07/アセット-34.webp");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: top;
}

p.highlight {
    display: inline;
}
.riyoukikanya {
    text-align: center;
}

.negativemargin {
    margin-top: calc(-150px);
}

.wp-block-group.japan-map {
    max-width: 600px;
    margin:auto;
}


.custom-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin: 40px auto;
    max-width: 1100px;
    padding: 0 15px;
}
.custom-service-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.custom-service-item .image-container {
    flex-shrink: 0;
    width: 45%;
    position: relative;
}
.custom-service-item .image-container::before {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #fdeeee; /* 淡いピンクの円 */
    border-radius: 50%;
    z-index: -2;
}
/* 円の位置調整 */
.custom-service-item:nth-child(1) .image-container::before, .custom-service-item:nth-child(2) .image-container::before {
    top: -30px;
    left: -36px;
}
.custom-service-item:nth-child(3) .image-container::before,
.custom-service-item:nth-child(4) .image-container::before {
    top: -36px;
    right: -30px;
}
.custom-service-item .image-container img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}
.custom-service-item .text-container {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
/* 3番目と4番目のアイテムの並び順を逆にする */
.custom-service-item:nth-child(3),
.custom-service-item:nth-child(4) {
    flex-direction: row-reverse;
}

/* スマートフォン向けの表示設定 */
@media (max-width: 768px) {

h1.c-pageTitle {
    font-size: 32px;
    text-align: center;
    letter-spacing: 5.5px;
}

    div#top_title_area {
    height: 20vh;
}
    .custom-service-grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 50px;
    }
    .custom-service-item,
    .custom-service-item:nth-child(3),
    .custom-service-item:nth-child(4) {
        flex-direction: column; /* 縦積みにする */
        text-align: center;
    }
    .custom-service-item .image-container {
        width: 80%;
    }
    .custom-service-item .text-container {
        text-align: left;
    }
}


/* .custom-hearing-section {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 1.5em;
    margin: 50px auto 30px auto;
    max-width: 1100px;
    position: relative;
    border-style: solid;
    border-color: #f5b1a2;
    border-width: 1px 0;
    border-radius: 30px;
} */

.custom-hearing-section::before {
    content: '';
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    top: -70px;
    left: 30%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 70px solid #f5b1a2;
}
.custom-hearing-text {
    flex: 1;
    min-width: 65%;
    line-height: 1.8;
}
.custom-hearing-text h2 {
    font-size: 24px;
    color: #d98d8c;
    font-weight: bold;
    margin-bottom: 20px;
}

.custom-hearing-text strong {
    color: #333;
    font-weight: bold;
}
.custom-hearing-image {
    flex-shrink: 0;
    width: 30%;
}
.custom-hearing-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマートフォン向けの表示設定 */
@media (max-width: 768px) {
    .custom-hearing-section {
        flex-direction: column;
        padding: 40px 20px 20px 20px;
        gap: 20px;
    }
    .custom-hearing-text {
        width: 100%;
        order: 2;
    }
    .custom-hearing-image {
        width: 100%;
        order: 1;
    }
    .custom-hearing-text h2 {
        text-align: center;
        font-size: 22px;
    }
    .custom-hearing-section::before {
        left: 50%; /* スマホでは中央に戻す */
    }
}

.custom-hearing-section h3 {
    color: #f29b87;
    font-size: 25px;
    margin-bottom: 1em;
    font-family: serif;
}



@media screen and (max-width: 767px) {
p.products-leased-p {
    width: 80%;
    margin: auto;
    max-width:277px;
}

    .highlight::before {
    top: 50%;
    left: 5%;

}
.custom-service-grid.after-sevice .text-container p{
    width:80%;
   margin:auto;
}
.back-bluetext.sp_only.back-wave {
    padding: 10px 0;
    line-height: 28px;
}
.custom-service-item {
    align-items: center;

}
.custom-service-grid {
    margin: 0 auto;
}
}
/* メンテナンスページ */


.laundry-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  max-width: 1400px;
  margin: 20px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

}

/* --- グリッド内のアイテム配置 --- */
.laundry-layout__item--1 { grid-area: 1 / 1 / 2 / 2; }
.laundry-layout__item--2 { grid-area: 2 / 1 / 3 / 2; }
.laundry-layout__diagram { grid-area: 1 / 2 / 3 / 4; } /* 中央図 */
.laundry-layout__item--3 { grid-area: 1 / 4 / 2 / 5; }
.laundry-layout__item--4 { grid-area: 2 / 4 / 3 / 5; }
.laundry-layout__item--5 { grid-area: 3 / 1 / 4 / 2; }
.laundry-layout__item--6 { grid-area: 3 / 2 / 4 / 3; }
.laundry-layout__item--7 { grid-area: 3 / 3 / 4 / 4; }
.laundry-layout__item--8 { grid-area: 3 / 4 / 4 / 5; }


/* 中央の大きい画像 */
.laundry-layout__diagram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 各情報アイテムの共通スタイル --- */
.laundry-layout__item {
  background-color: #ffffff;
}
.laundry-layout__item .header {
  margin-bottom: 5px;
}
.laundry-layout__item .number-box {
    width: 30px;
    height: 30px;
    background-color: #4677bb;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.laundry-layout__item .title-block h4 {
    font-size: 1em;
    /* margin: 0; */
    line-height: 1.4;
    font-weight: normal;
    color: #005A9C;
}
.laundry-layout__item img {
    width: 100%;
    height: auto;
    /* margin-bottom: 5px; */
    /* border: 1px solid #eee; */
}
.laundry-layout__item p {
    font-size: 1em;
    line-height: initial;
    font-weight: normal;
    margin: 0;
}

/* --- スマートフォン用のレスポンシブ対応 --- */
@media (max-width: 768px) {
  .laundry-layout-grid {
    /* スマホでは2カラムを基本とする */
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px; /* 隙間を少し狭く */
    grid-row-gap: 25px;
  }

  /* 中央の図は2カラム分を使い、最上段に配置 */
  .laundry-layout__diagram {
    grid-area: auto; /* エリア指定をリセット */
    grid-column: 1 / span 2; /* 1列目から2カラム分を占有 */
  }

  /* 他の全アイテムはエリア指定をリセットし、
     親の2カラム設定に従って自動で配置させる */
  .laundry-layout__item--1,
  .laundry-layout__item--2,
  .laundry-layout__item--3,
  .laundry-layout__item--4,
  .laundry-layout__item--5,
  .laundry-layout__item--6,
  .laundry-layout__item--7,
  .laundry-layout__item--8 {
    grid-area: auto; /* エリア指定をリセット */
  }

  figure.Circle-icon95 {
    width: 80px;
}
figure.breathair-icon {
    width: 60px;
}
}




.detergent-list p{
    padding:10px 0;
    margin-bottom:0;
}

.wp-block-columns.img-width100 img{width:100%;}

/* marchandiseページ */
h6.border-topleft-pink {
    border-top: #F29B88 1px solid;
    border-left: #F29B88 1px solid;
    padding: 10px;
}

div#breathair {
    position: relative;
}

figure.wp-block-image.size-full.Circle-icon95 {
    position: absolute;
    top: -20px;
    left: -20px;
}
figure.wp-block-image.size-full.breathair-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.wp-block-column.border-top-blue {
    border-top: 5px solid #89c3eb;
    padding-top: 1em;
}

.wp-block-column.productname-ba p{
    position: absolute;
    bottom:1.8em;
    right:1em;
    font-size:0.8em;
    font-weight:bold;
}

.productname-ba{position:relative;}


  /*
   * リスト全体に関する設定
   */
  .custom-list-module {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* 日本語表示に適したフォントを指定 */
    font-size: 16px;
    line-height: 1.7;
  }

  /*
   * リストのスタイル設定
   */
  .custom-list-module ul {
    list-style: none; /* デフォルトの黒丸を非表示 */
    padding: 0;
    margin: 0;
  }

  /*
   * 各リスト項目の設定
   */
  .custom-list-module li {
    display: flex; /* 要素を横並びに */
    align-items: flex-start; /* 上揃えで配置 */
    margin-bottom: 20px; /* 各項目の下の余白 */
  }

  /*
   * リスト項目の先頭に表示する水色の四角形の設定
   */
.custom-list-module li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background-color: #87CEEB;
    margin-right: 15px;
    margin-top: 0.45em;
}

  /*
   * 補足テキスト（小さい文字）のスタイル
   */
  .custom-list-module .sub-text {
    font-size: 0.8em;
    display: block; /* 改行して表示 */
  }

  .list-item-text {
    font-size: 20px;
}

.wp-block-columns.gap-5 {
    gap: 5px!important;
}
.wp-block-cover.rounded.wp-duotone-midnight {
    border-radius: 10px;
}
.back-beige {
    background-color: #e2d1bb!important;
    background-image: none;
}

/* お問合せから導入までの流れ */

/* ==================================
 全体レイアウト
================================== */
.step-tab-section-custom {
  max-width: 900px;
  margin: 0 auto;
}

/* ==================================
 STEPタブ（ナビゲーション）エリア
================================== */
.steps-tabs-custom {
    display: flex;
    justify-content: space-around;
    position: relative;
    padding-bottom: 60px;
}

.steps-tabs-custom.top-step {

    padding: 2em 0 0;
}
/* 
 * 三角ポインター (★★★ 再修正 ★★★)
 */
.steps-tabs-custom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(var(--pointer-position-px, 0px)) translateX(-15px);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 50px solid #f5b1a2;
    transition: transform 0.4s ease-in-out;
}

.steps-tabs-custom.top-step::after {
    display: none;
}
/* 
 * 各STEPタブのデザイン
 */
.image-step-container {
  position: relative;
  width: 18%;
  max-width: 140px;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.image-step-container:hover {
  transform: scale(1.05); /* ホバー時に少し拡大 */
}
.image-step-container.is-active {
  transform: scale(1.1); /* アクティブなタブをより大きく */
  filter: brightness(1.05);
}

/* 背景の円画像 */
.image-step-bg {
  width: 100%;
  height: auto; /* 画像の縦横比を維持 */
  display: block;
}

/* 中央のテキスト (例: お問い合わせ) */
.image-step-main-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Shippori Mincho', 'klee', 'ヒラギノ明朝 ProN', sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  letter-spacing: 2px;
}

/* 右上のSTEP番号サークル */
.image-step-circle {
    position: absolute;
    top: -20px;
    right: 15px;
    width: 50px;
    height: 50px;
    background-color: white;
    border: 3px solid #f4b4b4;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 0.5;
}

.page-id-9 .image-step-circle {
    line-height: 1;
}

.image-step-label {
  color: #E88080;
  font-size: 10px;
  font-weight: bold;
}

.image-step-number {
  color: #E88080;
  font-size: 20px;
  font-weight: bold;
}

/* ==================================
 コンテンツパネルエリア
================================== */
.steps-content-custom {
    position: relative;
    /* 上下の線の太さ分だけ、透明なボーダー領域を確保します */
    border: 3px solid transparent;
    /* 左右のボーダーは不要なので幅を0にします */
    border-left-width: 0;
    border-right-width: 0;
    /* 全体の形を角丸にします */
    border-radius: 15px;
    padding: 20px 30px;

    /* 背景を2つ重ねて、線と内側の塗りを表現します */
    background:
        /* 1. 上に重ねる白い背景 (paddingの内側にだけ描画) */
        linear-gradient(white, white) padding-box,
        /* 2. 下地になるピンクの背景 (border領域も含めて全体に描画) */
        linear-gradient(to right, #f5b1a2, #f5b1a2) border-box;
}


.step-panel-custom {
  display: none; /* 初期状態では非表示 */
}
.step-panel-custom.is-active {
  display: block; /* アクティブなパネルのみ表示 */
}

.step-panel-custom h3 {
  color: #E88080;
  font-size: 20px;
  margin-top: 0;
}

.step-panel-custom p {
  line-height: 1.8;
  margin-bottom: 0;
}

.steps-content-custom h3{margin-bottom:1em;}
/* お問合せから導入までの流れ ここまで*/

.c-gnav>.menu-item>a .ttl {
    line-height: 18px;
}


  /* Q&Aボックス全体のコンテナ */
.qa-container {
    display: flex;
    border: 2px solid #727171;
    border-radius: 0 10px 10px 0;
    background-color: #fff;
    /* max-width: 600px; */
    position: relative;
    /* margin-left: 20px; */
}
  /* 左側の「Q」アイコン部分 */
.q-icon {
    background-color: #757575;
    color: white;
    padding: 5px 18px;
    font-size: 22px;
    /* border-top-left-radius: 28px; */
    /* border-bottom-left-radius: 28px; */
    display: flex;
    align-items: center;
    justify-content: center;
}
  /* 吹き出しの三角形 (微調整されたバージョン) */
   .q-icon::after {
    content: '';
    position: absolute;
    bottom: -17px; /* 位置の再調整が必要になります */
    left: 20px;   /* 位置の再調整が必要になります */
    width: 0;
    height: 0;
    
    /* まずは左右対称の三角形を作る */
    border-top: 23px solid #757575;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    /* rotateで傾ける。マイナスの値で右に傾く */
    transform: rotate(-35deg); /* ← ここの角度の数値を変えるだけでOK！ */
  }

  /* 右側のテキスト部分 */
  .q-text {
    padding: 5px 20px;
font-weight:bold;
    flex-grow: 1;

    /* ★★★★★ これを追加 ★★★★★ */
    /* テキストが1行の時に垂直中央に配置するための指定 */
    display: flex;
    align-items: center;
  }

 .max-width-600 {
    max-width: 600px;
    margin: auto;
}

.margin-bottom-02{margin-bottom:3em;}


.underline-short {
    width: 80%;
    margin: auto;
}


 .custom-section-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.2em;
    margin: 40px 0;
    font-weight: bold;
    font-size: 20px;
    white-space: nowrap;
}

  /*
   * テキストの両側の線
   */
  .custom-section-title::before,
  .custom-section-title::after {
    content: "";
    height: 1px;         /* 線の太さ */
    background-color: #ccc; /* 線の色 */
  }

  .custom-list-module.font-white {
    color: white;
}
.custom-list-module.font-white li::before {
    background-color: #ffffff;
}


  .saiyou-icon {
    position: relative; /* アイコンや下線を配置する際の基準点となります */
    display: inline-block; /* 要素の幅を文字数に合わせ、中央寄せを可能にします */
    vertical-align: middle; /* 他の要素と並んだ際の縦位置をきれいに揃えます */
    
    /* 「採用」アイコンを置くためのスペースを左側に確保します */
    padding-left: 65px; 

  }
.saiyou-icon::before {
    content: url('https://www.tokai-corp.com/rinen/wp-content/uploads/2025/08/アセット-37@0.5x.webp');
    position: absolute;
    left: 0;
    top: 30%;
}



  /*
   * 全体を包むラッパー
   */
  .flow-wrapper-final {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    
    /* ★★★ 変更点 ★★★ */
    /* 間隔を微調整 */
    gap: 20px 10px; 
    
    /* ★★★ 変更点 ★★★ */
    /* 円の拡大に合わせて、全体の最大幅を広げました */
    max-width: 1300px; 
    margin: 0 auto;
  }

  /*
   * 円のスタイル
   */
  .flow-circle-final {

    width: 180px;
    height: 180px;
    
    background: linear-gradient(226.35deg, rgba(159, 215, 236, 1) 0%, rgba(83, 162, 217, 1) 100%);
    border-radius: 50%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px; /* 内側の余白を少し広げました */
    box-sizing: border-box;
  }

  /*
   * 円の中のタイトル
   */
  .flow-circle-final .title {
   
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid white;
  
    margin-bottom: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap; /* タイトルの改行を禁止 */
  }

  /*
   * 円の中の説明文
   */
  .flow-circle-final .description {

    font-size: 14px; 
    line-height: 1.5;
    margin: 0;
  }
  
  /*
   * SVG矢印のスタイル
   */
  .flow-arrow-final {
    font-size: 28px;
    color: #9FD7EC;
  }

  /* 
   * PCなど画面が広い時のスタイル
   */
  @media (min-width: 1280px) { /* ★★★ 変更点 ★★★ ブレークポイントを調整 */
    .flow-wrapper-final {
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  }

  /* 
   * スマホ（画面幅が480px以下）の時だけ、矢印を非表示にする
   */
  @media (max-width: 480px) {
    .flow-arrow-final {
      display: none;
    }
  }


.line-title-pink.sp_only {
    color: #f29b87;

}

.line-title-pink.sp_only::before,
.line-title-pink.sp_only::after  {
    background-color: #f29b87;
}

@media (max-width: 768px) {
  .wp-block-columns.are-vertically-aligned-center.choose_size > *:first-child {
    order: 2;
  }
  .wp-block-columns.are-vertically-aligned-center.choose_size > *:last-child {
    order: 1;
  }
  
}