@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..900&family=Oswald:wght@500&display=swap');

strong, b { font-weight: bold; }
em, i { font-style: italic; }

:root {
  --key-blue: #0077b1;
  --key-grn: #008f72;
  --key-pink: #ee3b5d;
  --key-blue-text: #00699b;
  --key-navy: #00195f;
  --bg-light: #f6f8fa;
  --bg-light02: #f4f9fd;
  --bg-light-blue: #d9edf5;
  --max-width: 1280px;
  --xxl-font: 48px;
  --xxl-font-jp: 42px;
  --m-font: 21px; 
  --s-font: 16px;
  --h1: 48px;
  --h2: 32px;
  --h3: 27px;
  --h4: 20px;
  --text: 18px;
  --m-text: 16px;
  --s-text: 14px;
  --ss-text: 13px;
}

:root {
  --header-height: 90px;
  --scroll-margin: 1em;

  /* DPR ディスプレイの表示スケール */
  --dpr : 1;
  --zoom: 1;
}

@media (max-width: 1080px) {
  :root {
    --xxl-font: 36px;
    --xxl-font-jp: 30px;
    --m-font: 18px;
    --s-font: 15px;
    --h1: 40px;
    --h2: 28px;
    --h3: 24px;
    --h4: 18px;
    --text: 16px;
    --m-text: 15px;
    --s-text: 13px;
    --ss-text: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --xxxl-font-jp: 32px;
    --xxl-font: 28px;
    --xxl-font-jp: 28px;
    --m-font: 16px;/* 通常のテキスト */
    --s-font: 14px;
    --h1: 32px;
    --h2: 24px;
    --h3: 21px;
    --h4: 16px;
    --lead: var(--h4);
    --text: 15px;
    --m-text: 14px; /* 2カラム内の見出し */
    --s-text: 12px; /* 2カラム内のテキスト */
    --ss-text: 11px;

    --root-font-size : var(--m-font);/*bodyタグに設定するフォントサイズ*/
  }
}

@media (max-width: 576px) {
  :root {
    --xxxl-font-jp: min(calc(24 / 375 * 100vw), 24px);
    --xxl-font: min(calc(22 / 375 * 100vw), 22px);
    --xxl-font-jp: min(calc(21 / 375 * 100vw), 22px);
    --m-font: min(calc(15 / 375 * 100vw), 15px);
    --s-font: min(calc(13 / 375 * 100vw), 13px);
    --h1: var(--xxl-font);
    --h2: min(calc(20 / 375 * 100vw), 20px);
    --h3: min(calc(18 / 375 * 100vw), 18px);
    --h4: min(calc(16 / 375 * 100vw), 15px);
    --lead: min(calc(17 / 375 * 100vw), 18px);
    --text: min(calc(14 / 375 * 100vw), 14px);
    --m-text: min(calc(13 / 375 * 100vw), 13px);
    --s-text: min(calc(12 / 375 * 100vw), 12px);
    --ss-text: min(calc(11 / 375 * 100vw), 11px);
    --xs-text: min(calc(10 / 375 * 100vw), 11px);
  }
}

@media (max-width: 768px) {
  :root {
    /* 特例、あまり使わないように */
    --space-y-4xl: clamp(48px, calc(48 / 375 * 100vw), 80px);

    --space-y-3xl: clamp(36px, calc(44 / 375 * 100vw), 72px);

    /* --space-y-xlで狭いと思ったときに使用 */
    /* 現在の使用箇所：セクションの最後のCTAボタンの上余白 */
    --space-y-2xl: clamp(32px, calc(36 / 375 * 100vw), 64px);

    --space-y-xl: clamp(28px, calc(32 / 375 * 100vw), 48px);

    /* セクションの上下の余白 */
    --space-y-section: clamp(28px, calc(40 / 375 * 100vw), 56px);

    /*
      セクション余白より一段小さい縦方向の余白。
      リストやグリッドブロックなど大きめのコンテンツの上下の余白に使用する。
      「このブロックを画面内で区切りたい」ときに使う。
    */

    --space-y-area: clamp(28px, calc(40 / 375 * 100vw), 56px);

    /* --space-y-areaが狭いときに使用 */
    --space-y-area--offset: var(--space-y-3xl);

    /*
      画像、表、カード、フォームなど、
      テキストより存在感のある要素の上下の余白に使用する。
      コンテンツを構成する通常要素より大きめに縦の余白をとりたいときに使用する。
    */
    --space-y-lg: clamp(.75em, calc(24 / 375 * 100vw), 28px);
    --space-y-large-element: var(--space-y-lg);

    /*
      通常リストの項目などテキストブロックを縦に並べるときのgapや、
      1カラムのカードなどの通常のコンテナーのpaddingなど、
      1文字よりすこし広めにしたい余白に使用
    */
    --space-y-ml: clamp(.75em, calc(20 / 375 * 100vw), 24px);

    /*
      --space-y-mlではちょっと広かったときに使用
      テキストとテキストの間の余白に使用。
    */
    --space-y-md: clamp(.75em, calc(16 / 375 * 100vw), 20px);
    --space-y-element: var(--space-y-md);

    /*
      2カラムのカードの中身など、小さいコンテナーの縦余白
    */
    --space-y-ms: clamp(.75em, calc(12 / 375 * 100vw), 16px);

    /*
      アイコンとテキスト、リスト項目同士など、関係の近い子要素同士の余白に使用する。
      テキストボックスなどフォーム要素のpaddingにも使用。
      2カラムのカードのなかの要素同士の間の余白で使用
    */
    --space-y-sm: clamp(8px, calc(8 / 375 * 100vw), 12px);
    --space-y-child-element: var(--space-y-sm);

    /*
      一番小さい余白
      2カラムのカードのなかのテキスト要素同士の間の余白で使用
    */
    --space-y-xs: clamp(4px, calc(4 / 375 * 100vw), 8px);

    /* 微調整用 */
    --space-y-2xs: min(2px, calc(2 / 375 * 100vw));
  }
}

@media (max-width: 768px) {
  :root {
    
    --space-x-lg: clamp(.75em, calc(24 / 375 * 100vw), 56px);
    /*
      1階層内側のコンテンツの左右の余白。
      1カラムのコンテナーの左右のpadding。
    */
    --space-x-ml: clamp(.75em, calc(20 / 375 * 100vw), 44px);
    --space-x-area: var(--space-x-ml);

    /*
      画像＋テキストを横にならべたときのgapなど
      1文字ぐらい空けたいときに使う。
    */
    --space-x-md: clamp(.75em, calc(16 / 375 * 100vw), 32px);
    /*
      画面の左右の余白。
    */
    --space-x-page: var(--space-x-md);
    

    /*
      2カラムカードのpaddingなど
      小さい1文字ぐらい空けたいときに使う。
    */
    --space-x-ms: clamp(.5em, calc(12 / 375 * 100vw), 20px);

    /*
      1文字の半分ぐらい空けたいときに使う。
      フォーム要素（テキストボックス）やボタンなどの要素の内側の余白で使用。
      カードの要素内側の余白でも使用。
      buttonが横に並ぶときのgapでも使用。
    */
    --space-x-sm: clamp(.25em, calc(8 / 375 * 100vw), 12px);

    /*
      一番小さい余白
    */
    --space-x-xs: clamp(.2em, calc(4 / 375 * 100vw), 8px);

    /*
      微調整用
    */
    --space-x-2xs: 2px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 44px;

    --root-font-size: var(--text);
    --padding-section-inline: calc(20 / 375 * 100vw);
    --padding-layer-1-inline: calc(20 / 375 * 100vw);

    /* card,buttonが横に並ぶときのgap */
    --gap-x-xs: var(--space-x-xs);
    --gap-x-sm: var(--space-x-sm);
    /* 小さい画像とテキスト、テキストとテキストが横に並ぶときのgap */
    --gap-x: var(--space-x-md);

    --line-height-title: 1.5;
    --line-height-label: 1.5;
    --line-height-button: 1.5;
    --line-height-lead: 1.5;
    --line-height-text: 1.8;
    --line-height-xs: 1.25;

    --hr-color: #ddd;

    --border-color: #d1d5db;

    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 12px;

    --icon-width: 12px;
    --icon-width-sm: 12px;
    --icon-right: calc(var(--icon-width) * 0.75 );/* position:absoluteのときのrightプロパティの値 */
    --btn-icon-width: 1.25em;
    --btn-icon-width-lg: 1.75em;
    --btn-icon-right: calc(var(--btn-icon-width) * .75 );/* ボタンがピル型なので、--icon-rightより広めになる */

    /* ボタンのアイコンの右側の余白 */
    --pr-icon : calc(var(--icon-width) + var(--icon-right) + .65em);

    --btn-font-size-lg: var(--h4);
    --btn-font-size: var(--root-font-size);
    --btn-font-size-ms: var(--m-text);
    --btn-min-height-lg: 62px;
    --btn-min-height: 44px;
    --btn-min-height-sm: 32px;
    --btn-min-height-xs: 24px;
    --btn-padding-md: .75em var(--space-x-sm);/* heightが44pxになるようなpadding */
    --btn-has-icon-padding--md: .75em 3.5em;
    --btn-padding-lg: .4em var(--space-x-ml);/* heightが62pxになるようなpadding */
    --btn-has-icon-padding--lg: .4em 3.5em;
    /*  */
    --btn-padding-has-icon-md: .55em var(--pr-icon);

    --btn-block-gap-x: var(--gap-x-sm);
    --btn-block-gap-y: var(--space-y-sm); 

    --block-list-gap-y: var(--space-y-area);
    --list-gap-y-lg: var(--space-y-large-element);
    --list-gap-y: var(--space-y-ml);
    --list-text: var(--m-font);

    --card-gap-y: var(--space-y-element);
    --card-padding: var(--space-y-ml);
    --card-img-space-b: var(--space-y-ml);/* 画像のしたがタイトルのとき */
    --card-img-space-b-sm: var(--space-y-md);/* 画像のしたがタイトル以外で狭めたいとき */
    --card-sub-title: var(--h3);
    --card-text: var(--m-text);

    --card-sm-gap: var(--space-x-sm);
    --card-sm-padding: var(--space-y-md);/* カードが2カラムのとき */
    --card-xs-padding: var(--space-x-sm);
    --card-xs-padding-x: var(--space-x-sm);/* カードが3カラムのとき */
    --card-sm-space-y-lg: var(--space-y-md);/* カードの写真の下の余白など広めの余白 */
    --card-sm-space-y: var(--space-y-ms);/* 2カラムのカードなど、小さいコンテナーの縦余白 */
    --card-sm-title: var(--m-text);
    --card-sm-text: var(--s-text);
    --card-sm-text-sm: var(--ss-text);
    --card-sm-text-sm-line-height: 1.6;

    --form-control-width-sm: 8em;
    --form-control-width-md: 10em;
    --form-control-height: 36px;
    --form-control-height-lg: 40px;
    --form-control-font-size-notfocused: 13px;
    --form-control-font-size: 16px;
    --form-label-font-size: 13px;
    --form-label-font-size-lg: 14px;
    --form-control-padding-x: var(--space-x-sm);
    --form-control-padding-y: .25em;
    --form-control-icon-width: var(--icon-width);
    --pr-form-control-icon: calc(var(--form-control-icon-width) + var(--form-control-padding-x) + .25em);

    --badge-xs-text: min(calc(9 / 375 * 100vw), 9px);
    --badge-xs-padding: .3em .75em .35em;
    --badge-xs-radius: 4px;
    --badge-xs-gap: 4px;
    --badge-xs-space-b: var(--space-y-sm);


    --pickup-font-size: min(10px, 7.25cqw);
    --pickup-padding: .7em .95em .75em; 
    
  }
}

/* ブラウザの高さが640pxより小さくなったら */

@media (min-width: 768.02px) and (max-height: 600px),
       (min-width: 768.02px) and (max-width: 1600px) {
  
  :root {
    --x: calc(100vw / 1600px);
    --y: calc(100dvh / 600px);
    --zoom: min(var(--x), var(--y));
  }
  
  html {
    zoom: var(--zoom);
  }

}

html {
  scroll-padding-top: var(--header-height);
}

:target {
  scroll-behavior: smooth;
  scroll-margin-top: var(--scroll-margin);
}

* {
  box-sizing: border-box;
}

img {
  width: auto;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: #222;
  overflow-x: hidden;
}

a {
  color: var(--key-blue);
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

main {
  width: 100%;
  margin: 0 auto;
}

.text-ctr {
  text-align: center;
}

.center {
  justify-content: center;
}

.my-0 {
  margin-block: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt0 {
  margin-top: 0px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

/* ---------- background ---------- */
.grd {
  background-image: linear-gradient(141deg, rgb(0, 150, 95) 0%, rgb(0, 100, 180) 50%, rgb(0, 149, 84) 100%);
}

.pale__bg {
  background: var(--bg-light);
}

.pale__bg02 {
  background: var(--bg-light02);
}

.pale__blue__bg {
  background: var(--bg-light-blue);
}

/*

以降のユーティリティクラスのクラス名は、Tailswind.cssに合わせる
これにより、ドキュメントをみれば、クラス名がわかるようにする

https://tailwindcss.com/docs/installation/using-vite

*/

.text-nowrap {
  white-space: nowrap !important;
}

.select-none { 
  user-select: none !important;
}

@media (max-width: 768px) {
  .max-sm\:pb-0  { padding-bottom: 0 !important; }

  .max-sm\:text-no-br br {
    display: none !important;
  }
}

/* 画像にしたメアド */
.text-mail {
  height: 1em;
  vertical-align: middle;
}

/* ---------- 日本語改行調整 ---------- */

:where(html:lang(ja)) {

  .ja-text-wrap {
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .ja-text-balance {
    text-wrap: balance;
  }

  .ja-text-pretty {
    text-wrap: pretty;
  }

  .ja-text-phrase {
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .ja-text-phrase.is-budoux-applied {
    word-break: keep-all;
  }

  .ja-text-phrase:not(.is-budoux-applied){
    text-wrap: pretty;
  }

  .ja-text-wbr {
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .budoux-nowrap {
    white-space: nowrap;
    word-break: keep-all;
  }

}

/* ---------- column ---------- */
section.column {
  width: 100%;
}

section .section-in {
  padding: 50px 50px;
  max-width: var(--max-width);
  margin: 0 auto
}

section .section-in--search {
  padding-block: 32px;
}

section.service .section-in {
  padding: 30px 50px;
}

section.no-space .section-in {
  padding: 0 0 30px;
  display: flex;
  justify-content: center;
}

section.object__bg {
  background: url(../images/common/bg-object.png) center center no-repeat;
  background-size: 90%;
}

@media (max-width: 768px) {
  section .section-in {
    padding: var(--space-y-section) var(--space-x-page);
    margin: 0 auto
  }
  /* トップページの冒頭のセクション */
  section.service .section-in {
   padding: var(--space-y-ml) var(--space-x-page) var(--space-y-section);
  }
  /* カタログ一覧ページの冒頭のセクション */
  section .section-in--search {
    padding-block: var(--space-y-ml) var(--space-y-md);
  }
  /* カタログ一覧ページの一覧のセクション */
  section.search-result .section-in {
    padding-block: var(--space-y-md) var(--space-y-section);
  }
  /* お問合せページの冒頭のセクション */
  section .section-in:has( #contact-page-lead) {
    padding-top: var(--space-y-ml) ;
  }
  /* カタログ詳細ページの最初のセクション */
  section .section-in--model-detail {
    padding-block: var(--space-y-sm) var(--space-y-section);
  }
  /* カタログ詳細ページ */
  .model-detail__back-section .section-in {
    /* padding-block: var(--space-y-ml); */
  }

  /* セクションの冒頭のセンター寄せのタイトル */
  section .section-in--faq-page {
    padding-block: var(--space-y-3xl) var(--space-y-3xl);
  }

  section.faq-cat-nav.faq-cat-nav .section-in {
    padding: var(--space-y-area) var(--space-x-page);
  }
}

/* ---------- btn ---------- */
.btn__block {
  display: flex;
  column-gap: 40px;
  margin-top: 40px;
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
  row-gap: 32px;
  flex-wrap:wrap;
}

.btn__block a {
  border-radius: 30px;
  text-decoration: none;
  padding: 10px 40px;
  text-align: center;
  font-weight: 700;
  position: relative;
  font-size: 18px;
  transition: all 0.3s;
}

.btn__block a.type01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--key-blue);
  border: solid 2px var(--key-blue);
  background: #fff;
  width: 400px;
}

.btn__block a.type01:after {
  content: "";
  display: block;
  width: 8px;
  height: 13px;
  background-image: url(../images/common/arrow_blue.png);
  background-repeat: no-repeat;
  background-size: 8px 13px;
  position: absolute;
  top: calc(50% - 6px);
  right: 24px;
}

@media (any-hover: hover) {
.btn__block a.type01:hover {
  background: var(--key-blue);
  color: #fff;
}
}

.btn__block a.type01.small {
  width: 300px
}

.btn__block a.type02 {
  color: #fff;
  border: solid 2px var(--key-blue);
  background: var(--key-blue);
  width: 400px;
}

@media (any-hover: hover) {
.btn__block a.type02:hover {
  opacity: 0.8;
}
}

.btn__block a.type02.free {
  width: fit-content;
  padding: 10px 60px;
}

.btn__block a.type02:after {
  content: "";
  display: block;
  width: 8px;
  height: 13px;
  background-image: url(../images/common/arrow.png);
  background-repeat: no-repeat;
  background-size: 8px 13px;
  position: absolute;
  top: calc(50% - 6px);
  right: 24px;
}

.btn__block a.type03 {
  border-radius: 48px;
  color: #fff;
  border: solid 2px var(--key-pink);
  background: var(--key-pink);
  width: 560px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn__block a.type03:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 15px;
  background: url(../images/common/icon_mail.png) no-repeat;
  background-size: 21px 15px;
  top: calc(50% - 7.5px);
  left: 15px;
}

@media (any-hover: hover) {
.btn__block a.type03:hover {
  opacity: 0.8;
}
}

.btn__block a.type04 {
  color: #333;
  border: solid 2px var(--key-grn);
  background: #fff;
  width: 640px;
  font-size: 20px;
  padding: 12px 60px;
}

.btn__block a.type04:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(../images/common/circle-arrow-grn.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  position: absolute;
  top: calc(50% - 15px);
  right: 18px;
}

@media (any-hover: hover) {
.btn__block a.type04:hover {
  background: var(--key-grn);
  color: #fff;
}
}

.btn__block a.type04.blue {
  color: var(--key-blue);
  border: solid 2px var(--key-blue);
  background: #fff;
  width: auto;
  font-size: 20px;
  padding: 12px 70px;
}

.btn__block a.type04.blue:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(../images/common/circle-arrow-blue.png);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  position: absolute;
  top: calc(50% - 15px);
  right: 18px;
}

@media (any-hover: hover) {
.btn__block a.type04.blue:hover {
  background: var(--key-blue);
  color: #fff;
}
}

@media (max-width: 768px) {

  html {
    scroll-behavior: smooth;
  }

  body {
    font-size: var(--root-font-size);
  }

  /* 
  汎用ボタンコンテナー
  このクラスを指定しないとボタンのスタイルが適用されないで、いろんなところで使っている
  いろんなところでスタイルを上書きして使っているので、スタイルを編集するときは影響範囲が広いので注意。
  */
  .btn__block {
    margin-top: calc(var(--space-y-large-element));
    column-gap: var(--btn-block-gap-x);
    row-gap: var(--btn-block-gap-y);
    justify-content: center;
  }

  .btn__block a {
    font-size: var(--text);
    padding: var(--space-y-ms) var(--space-x-ms);
  }

  /* セクションの最後にあるような、センター寄せのボタンを入れるコンテナー */
  .btn__block--action {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-y-sm);
    column-gap: var(--gap-x-sm);
    margin: var(--space-y-xl) auto var(--space-y-sm);
  }

  /* 上にドットのページャーにより余白が広くなるので狭める */
  :where(body.home .models.column .talent-slider) + .btn__block--action {
     margin-top: var(--space-y-large-element)
  }


  /* ページの最後にあるような、センター寄せのもっと大きいボタンを入れるコンテナー */
  .btn__block--action--lg {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--btn-block-gap-x);
    row-gap: var(--btn-block-gap-y);
    margin: var(--space-y-large-element) auto 0;
    /* .model-detail__ctaは、下の余白が.section-inと.model-detail__back-sectionのpadding-bottomの合計となるが、 */
    /* .btn__block--action--lgは、.section-inのpadding-bottomしか下に余白がなく狭い印象を受けるので広げる。 */
  }

  /* .model-detail__back-wrapperは下余白が広めで空きすぎるので、調整 */
  /* 内入れのコンテナーは今後、このスタイルにあわせたほうがよさそう */
  :where(.model-detail__back-wrapper) .btn__block--action--lg {
    margin: var(--space-y-xl) auto 0;
    padding: 0;
  }

  /* モデル詳細ページの最後にある、センター寄せのもっと大きいボタンを入れるコンテナー */
  .model-detail__cta.model-detail__cta {
    margin: var(--space-y-large-element) auto 0;
  }

  /* セクションの途中にあって、それほど余白を空けたくないとき */
  .btn__block--action--sm {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-y-sm);
    column-gap: var(--gap-x-sm);
    margin: var(--space-y-large-element) auto 0;
  }

  /* .section_inのなかで1つだけで使われていたら、.section_inの余白があるのでマージンは削除 */
  .btn__block.mt-0, 
  .btn__block--action.mt-0,
  .btn__block--action--lg.mt-0 {
    margin-top: 0;
  }

  /* ボタンを縦に複数ならべたいときは、.btn__blockが入れ子になるので、内側の.btn__blockはmarginを削除する */
  :where(:is(.btn__block, .btn__block--action, .btn__block--action--lg)) :is(.btn__block, .btn__block--action, .btn__block--action--lg) {
    margin-block: 0;
  }

  :where(.section-in) > .btn__block:first-child {
    margin-top: 0;
  }

  .btn__block a.type01.small {
    /* widt: 300pxをリセットして、`.btn__block a.type01`のwidthに揃える */
    width: 480px;
  }

  .btn__block a.type01,
  .btn__block a.type02,
  .btn__block a.type04,
  .btn__block a.type04.blue {
    max-width: 100%;
    line-height: var(--line-height-button);
    font-size: var(--btn-font-size);
    padding: var(--btn-padding-md);
    min-height: var(--btn-min-height);
  }

  /* PCで「type02の幅が自由」なボタン */
  .btn__block a.type02.free {
    /* `.btn__block a.type01`のwidthに揃える */
    width: 400px;
    padding: var(--btn-padding-has-icon-md);
  }

  .btn__block a.type04,
  .btn__block a.type04.blue {
    padding: var(--btn-has-icon-padding--md);
  }

  /* 丸の中に矢印があるアイコン */
  .btn__block a.type01:after,
  .btn__block a.type02:after,
  .btn__block a.type04:after,
  .btn__block a.type04.blue:after {
    aspect-ratio: 1;
    height: auto;
    background-size: contain;
    top: 50%;
    translate: 0 -50%;
    width: var(--btn-icon-width);
    right: var(--btn-icon-right);
  }

   /* 矢印だけのアイコン、矢印だけだと上の記述では大きすぎるので調整 */
  .btn__block a.type01:after {
    width: calc( var(--btn-icon-width) * 0.75);
    background-origin: center right;
  }

  .btn-icon.btn-icon {
    aspect-ratio: 1;
    width: var(--btn-icon-width-lg);
    height: auto;
    padding: .4em;
    right: .75em;
  }

  /* ピンクのCTAボタン（大きめのボタン） */
  .btn__block a.type03 {
    position: relative;
    height: auto;
    line-height: var(--line-height-button);
    font-size: var(--btn-font-size-lg);
    padding: var(--btn-has-icon-padding--lg);
    min-height: var(--btn-min-height-lg);
  }

  .btn__block a.type03:before {
    flex: 0 0 auto;
    background-size: contain;
    height: auto;
    aspect-ratio: 21 / 15;
    width: 21px;
    /*  */
    top: 50%;
    translate: 0 -50%;
    position: absolute;
    left: 1.25em;
  }

  .model-detail__action-btn.model-detail__action-btn {
    max-width: 100%;
    line-height: var(--line-height-button);
    font-size: var(--btn-font-size-ms);
    padding: var(--btn-padding-lg);
    min-height: var(--btn-min-height);
  }

  /* btn__block--actionのなかのボタンはwidth100%で縦に並べる */
  :is(.btn__block--action, .btn__block--action--lg) 
    a:is(.type01, .type02, .type04, .type04.blue) {
      width: 100%;
      width: stretch;
      max-width: 480px;
  }

  .btn-label {
    flex: 1 1 0;
  }

}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 1);
  z-index: 100;
  width: 100%;
}

.header:where(:has( .hamburger-menu.is-open)) {
  background: rgba(255, 255, 255, 1);
}

.header__inner {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 40px;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  box-sizing: border-box;
  height: 90px;
}

:where(.header__inner) > * {
  align-self: center;
}

.nav-wrapper {
  display: flex;
  align-self: stretch;
}

.nav {
  position: static;
  transform: none;
  flex-direction: row;
  background: none;
}

:where(.header__inner) .nav {
  align-self: stretch;
  display: flex;
}

:where(.header__inner .nav) > * {
  align-self: center;
}

.global-nav__item-link {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav a {
  margin-left: 30px;
  text-decoration: none;
  color: var(--key-blue);
  font-weight: 600;
  position: relative;
  transition: opacity 0.3s;
  font-size:var(--s-text);/*縮小しました*/
}

.nav a:hover {
  opacity: 0.7;
}

@media (any-hover: none) { 
  .nav a:hover {
    opacity: 1;
  }
}

.nav a.content-link:before {
  content: "|";
  display: inline-block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: -16px;
}

.nav a.icon__search:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: -28px;
  width: 21px;
  height: 21px;
  background: url(../images/common/search.png) no-repeat;
  background-size: 21px 21px;
}

.global-nav__item {
  display: flex;
  align-self: stretch;
}

.global-sup-nav-container {
  position: relative;
}

.global-sup-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--bg-light-blue);
  padding: 48px;
  max-height: calc(100dvh - (var(--header-height) * var(--zoom)));
  overflow: auto;
  overscroll-behavior-y: none;
}

:where(.global-nav__item.open) .global-sup-nav {
    display: block;
}

.global-sup-nav:is(:hover, :focus) {
  display: block;
}

.header-category-menu {
  --gap: 24px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 1200px;
  max-width: 100%;
  /* width: calc(350px * 2 + var(--gap)); */
}

.header-category-menu__item {
  /* flex: 0 1 calc((100% - var(--gap)) / 2); */
  flex: 0 1 min(calc((100% - (var(--gap) * 2)) / 3), 400px);
  display: flex;
  font-size: 14px;
}

.header-category-menu__item-link {
  flex: 1 1 0;
  text-decoration: none;
  color: inherit;
  display: block;
  background: #fff;
  padding: 24px;
  padding-bottom: 28px;
  padding-right: 64px;
  position: relative;
  transition: background 0.3s;
}

@media (any-hover: hover) {
.header-category-menu__item-link:hover {
  background: var(--bg-light02);
}
}

.header-category-menu__item-link::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 100%;
  background: url(../images/common/circle-arrow-blue.svg) center/contain no-repeat;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
}

.header-category-menu__item-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--key-blue);
  margin: 0 0 .5em;
}
.header-category-menu__item-title:last-child {
  margin-bottom: 0;
}

.header-category-menu__item--type-2 .header-category-menu__item-link::after {
  background-image: url(../images/common/circle-arrow-grn.svg);
}

.header-category-menu__item--type-2 .header-category-menu__item-title {
  color: var(--key-grn);
}

.header-category-menu__item-text {
  display: block;
  font-size: inherit;
}

.logo img {
  width: 180px;
  height: auto;
}

.header__btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

a.regist__btn,
a.inquiry__btn {
  align-self: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

a.regist__btn {
  padding: 4px 20px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 35px;
  color: var(--key-blue);
  background: #fff;
  border: solid 2px var(--key-blue);
  transition: all 0.3s;
}

a.regist__btn:hover {
  background: var(--key-blue);
  color: #fff;
}

a.inquiry__btn {
  padding: 4px 20px 4px 48px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 35px;
  color: #fff;
  border: solid 2px var(--key-pink);
  background: var(--key-pink);
  position: relative;
  transition: opacity 0.3s;
}

a.inquiry__btn:hover {
  opacity: 0.8;
}

a.inquiry__btn:before {
  content: "";
  display: block;
  position: absolute;
  width: 21px;
  height: 15px;
  background: url(../images/common/icon_mail.png) no-repeat;
  background-size: contain;
  top: calc(50% - 7.5px);
  left: 15px;
}

.inquiry__btn--sp,
.tel__btn--sp {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.inquiry__btn--sp img, 
.inquiry__btn--sp img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 56%;
}

.inquiry__btn--sp {
  background: var(--key-pink);
  /* border: solid 2px var(--key-pink); */
  /* width: 32px; */
  min-width: var(--header-height);
}

.tel__btn--sp {
  background: #fff;
  /* border: solid 1px var(--border-color); */
  /* width: 32px; */
  min-width: var(--header-height);
}

.inquiry__btn--sp img {
  /* width: 56%; */
  width: 28px;
}

.tel__btn--sp img {
  /* width: 54%; */
  width: 26px;
}

.lang {
  font-size: var(--m-text);
  font-weight: 700;
  color: var(--key-blue);
}

.lang button,
.lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: var(--text);
  font-weight: 700;
  color: var(--key-blue);
  margin: 0 0.1em;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.lang button.active,
.lang__btn.active {
  background: var(--key-blue);
  color: #fff;
  border-radius: 50%;
}

/* Language menu via wp_nav_menu */
.lang__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 -1.5em 0 -1em;
  padding: 0;
}

.lang__list > * {
  white-space: nowrap;
}

.lang__list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: var(--s-text);
  font-weight: 700;
  color: var(--key-blue);
  margin: 0 0.1em;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.lang__list li.is-active a {
  background: var(--key-blue);
  color: #fff;
  border-radius: 20px;
}

.lang__list li + li::before {
  content: "/";
  font-size: var(--text);
  font-weight: 700;
  color: var(--key-blue);
}

.bookmark,
.bookmark--sp__icon {
  box-sizing: content-box !important;
  background-origin: content-box !important;
  width: 28px;
  height: auto;
  aspect-ratio: 28 / 40;
  background: url(../images/common/favorite_icon_on.svg) no-repeat;
  background-size: contain;
  position: relative;
  border: none;
  transition: opacity 0.3s;
}

.bookmark:hover {
  opacity: 0.7;
}

.bookmark__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--key-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.bookmark__tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--key-blue);
}

.bookmark:hover .bookmark__tooltip {
  opacity: 1;
}

.bookmark .num {
  font-size: 13px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  text-align: center;
  color: #fff;
  padding: 3px;
  border-radius: 10px;
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c10000;
  z-index: 2;
  line-height: 1;
}

.bookmark--sp {
  display: none;
}

.bookmark--sp__icon {
  container-name: bookmark-sp;
  container-type: inline-size;
  width: auto;
  height: 1.5em;
}

.bookmark--sp__icon-inner {
  --font-size: max(8px, 50cqw);
}

.bookmark--sp__num {
  font-size: var(--font-size, 13px);
  font-weight: 700;
  min-width: 1.5em;
  aspect-ratio: 1;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  translate: calc(50% + 0.05em) calc(-50% - 0.05em);
  background: #c10000;
  z-index: 2;
  line-height: 1;
}

/* ---------- hamburger ---------- */
.hamburger {
  width: 32px;
  height: 24px;
  margin-left: auto;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  margin-inline: auto;
  padding: 0;
}

.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #222;
  left: 0;
  transition: .3s;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
}

.hamburger span:nth-child(3) {
  bottom: 0;
}

.hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translateY(14px);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-14px);
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

@media (min-width: 768.02px) {
/* @media (min-width: 1280px) { */

  :where(html:lang(en)) .logo img {
      width: 160px;
  }

  :where(html:lang(en)) .nav a {
    font-size: 12px;
  }

  :where(html:lang(en)) a.regist__btn,
  :where(html:lang(en)) a.inquiry__btn {
    font-size: 12px;
  }

  :where(html:lang(en)) a.regist__btn {
    padding-inline:  1.1em;
  }

  :where(html:lang(en)) .lang__list li a {
    font-size: 12px;
  }

  :where(html:lang(en)) .lang__list {
    margin: 0 -.5em 0 -1.5em;
  }

}

@media (min-width: 768.02px) {
/* @media (min-width: 1280px) { */

  .header__inner--sp {
    display: none !important;
  }

  .hamburger-menu {
    display: none !important;
  }

}

/* ---------- SP 表示 ---------- */
@media (max-width: 768px) {
/*@media (max-width: 1279px) {*/

  .header__inner--pc {
    display: none !important;
  }

  .header__inner {
    padding-right: 0;
  }

  .hamburger-container {
    align-self: stretch;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hamburger-menu {
    position: fixed;
    inset: 0;
    top: var(--header-height, 0);
    background: rgba(255, 255, 255, .97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateX(100%);
    transition: .4s;
    z-index: 4;
    overflow-y: auto;
    overscroll-behavior-y: none;
    padding: 4px 0 0;
  }

  /* @container style(--header-height) {
    .hamburger-menu {

    }
  } */

  .hamburger-menu.is-open {
    transform: translateX(0);
    display: block;
  }

  .hamburger {
    z-index: 5;
  }

  /* .nav a {
    opacity: 0;
  } */

  /* .nav.is-open a {
    opacity: 1;
  } */

  .logo {
    z-index: 5;
    margin-right: auto;
    /* ロゴが斜体になっている分ロゴの左余白が広く見えるので少し左にずらす。 */
    translate: -2% 0;
  }

  .header__btn-group {
    align-self: stretch;
    align-items: stretch;
    gap: 0;
  }

  .bookmark {
    margin-right: 32px;
  }

  .global-nav__item {
    flex-direction: column;
  }

  .global-nav__item-link:has( + .global-sup-nav) {
    position: relative;
  }

  .global-nav__item-link:has( + .global-sup-nav)::after {
    content: '';
    display: block;
    width: 8px;
    aspect-ratio: 15 / 25;
    background: url(../images/common/arrow_blue.png) center/contain no-repeat;
    position: absolute;
    right: 24px;
    top: 50%;
    translate: 0 -50%;
  }

  :where(.global-nav__item) .global-sup-nav {
    position: static;
    padding: 0;
    max-height: none;
    overscroll-behavior: auto;
    display: none;
  }

  :where(.global-nav__item.open) .global-sup-nav {
    display: block;
  }

  :where(.global-nav__item.open) .global-nav__item-link:has( + .global-sup-nav)::after {
    rotate: 90deg;
    right: 22px;
  }

  .header-category-menu {
    gap: 1px;
  }

  .header-category-menu__item {
    flex: 1 1 100%;
    width: 100%;
  }

  .header-category-menu__item + .header-category-menu__item {
    border-top: 1px solid #bed7e3;
  }

  .header-category-menu__item a {
    margin: 0;
  }

  .header-category-menu__item-link {
    background: none;
    padding: 14px 16px;
  }

  .header-category-menu__item-link::after {
    width: 16px;
    right: 16px;
  }

  .header-category-menu__item-title {
    margin: 0;
    font-size: 13px;
    font-weight: normal;
  }

  .header-category-menu__item-text {
    display: none;
  }

  /* モバイルナビオーバーレイ */
  .nav {
    justify-content: flex-start;
    gap: 0;
  }

  .nav a.global-nav__item-link {
    margin-left: 0;
    padding: 14px 20px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(0, 119, 177, 0.12);
  }

  /* | セパレーターを非表示 */
  .nav a.content-link:before {
    display: none;
  }

  /* 検索アイコンを inline に */
  .nav a.icon__search:before {
    position: static;
    translate: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    left: auto;
  }

  a.regist__btn,
  a.inquiry__btn {
    margin-inline: auto;
    width: 80%;
    max-width: 280px;
    display: flex;
    text-align: center;
  }

  a.regist__btn {
    margin-top: 32px;
  }

  a.inquiry__btn {
    margin-top: 8px;
    padding-left: 48px;
    /* padding-left分、文字がセンターからズレるので補正 */
    text-indent: -24px;
  }

  .nav .bookmark--sp {
    width: stretch;
    display: block;
    display: flex;
    align-items: center;
    line-height: 1.5;
    border-radius: 4px;
    padding: 14px 20px;
    margin: 12px 8px 8px;
    border: 1px solid #fff;
    background: #fff;
  }

  .bookmark--sp__icon {
    display: block;
    margin-left: auto;
  }

  .lang {
    margin: 0;
  }

  .lang__list {
    justify-content: center;
    margin: 16px auto;
  }

  .lang__list li.is-active + li {
    margin-left: 0.5em;
  }

  .lang__list li a {
    border-radius: 3em;
    aspect-ratio: 1;
    height: auto;
    width: 2.5em;
  }

}


@media (max-width: 768px) {
/*@media (max-width: 1080px) {*/
  .header__inner {
    max-width: var(--max-width);
    margin: auto;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 80px;
  }

  .logo img {
    width: 160px;
    height: auto;
  }
}

@media (max-width: 768px) {

  .header__inner {
    height: var(--header-height);
    padding-left: 20px;
  }

  .logo img {
    width: 124px;
  }

  .hamburger-container {
    aspect-ratio: 1.1 / 1;
    width: calc(var(--header-height) * 1.1);
    height: var(--header-height);
  }

  .hamburger {
    width: 24px;
    height: 18px;
    scale: .8;
    margin-inline: auto;
    box-sizing: content-box;
    border: 12px solid transparent;
  }

  .hamburger span {
    height: 2px;
  }

  .hamburger span:nth-child(2) {
    top: 8px;
  }

  .hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .bookmark {
    margin-right: 20px;
    width: 16px;
    /* タッチエリアを広げる */
    padding: 8px;
  }

  .bookmark .num {
    top: -3px;
    right: -3px;
  }

  .inquiry__btn--sp img {
    width: 18px;
  }

  .tel__btn--sp img {
    width: 18px;
  }

}

/* ---------- footer ---------- */
.footer {
  background: var(--bg-light-blue);
}

.footer-in {
  padding: 50px 50px;
  max-width: var(--max-width);
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

.footer-nav-container {
  --gap: 24px;
  display: flex;
  margin-block: 56px;
  justify-content: space-between;
  gap: var(--gap);
}

.footer-nav {
  flex: 0 1 auto;
  width: calc(35% + var(--gap));
}

.footer-category-nav {
  flex: 1 1 auto;
  width: calc(65% - var(--gap));
}

.footer-menu {
  --pl: 1.25em;
  padding-left: var(--pl);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.footer-menu__item-link:has( + .footer-sub-nav ) {
  margin-bottom: 0.5em;
}

.footer-menu__item-link,
.footer-sub-menu__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.footer-menu__item-link:any-link:hover,
.footer-sub-menu__item-link:any-link:hover {
  opacity: 0.7;
}

.footer-menu__item-link {
  color: var(--key-blue);
  font-size: inherit;
  font-weight: bold;
  position: relative;
}

.footer-menu__item-link::before {
  content: '';
  display: block;
  width: .8em;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: var(--key-blue);
  position: absolute;
  top: 0.5em;
  left: calc(var(--pl) * -1);
}

.footer-sub-menu {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.footer-sns-menu {
  display: flex;
  align-items: center;
  gap: 8px;

  img {
    display: block;
  }
}

.footer-category-menu {
  --gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: calc(350px * 2 + var(--gap));
  max-width: 100%;
}

.footer-category-menu__item {
  flex: 0 1 calc((100% - var(--gap)) / 2);
  display: flex;
  font-size: 14px;
}

.footer-category-menu__item-link {
  flex: 1 1 0;
  text-decoration: none;
  color: inherit;
  display: block;
  background: #fff;
  padding: 24px;
  padding-bottom: 28px;
  padding-right: 64px;
  position: relative;
  transition: background 0.3s;
}

.footer-category-menu__item-link:hover {
  background: var(--bg-light02);
}

.footer-category-menu__item-link::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 100%;
  background: url(../images/common/circle-arrow-blue.svg) center/contain no-repeat;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
}

.footer-category-menu__item-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--key-blue);
  margin: 0 0 .5em;
}

.footer-category-menu__item-text {
  display: block;
  font-size: inherit;
}

.footer-sub-nav {
  padding: 4px 0;
}

.footer .copyright {
  text-align: center;
  color: #444;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 1080px) {

  .footer-nav {
    width: calc(40% + var(--gap));
  }

  .footer-category-nav {
    width: calc(60% - var(--gap));
  }

  .footer-category-menu__item {
    flex: 1 1 auto;
    width: 100%;
  }

}

@media (max-width: 768px) {

  .footer-nav-container {
    flex-direction: column-reverse;
    margin-block: 0 40px;
    gap: 40px;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-in {
    padding: var(--padding-section-inline);
  }

  .footer-category-nav {
    width: 100%;
  }

  .footer-category-menu {
    flex-direction: column;
    width: auto;
    gap: 8px;
  }

  .footer-category-menu__item {

  }

  .footer-category-menu__item-link {
    padding-block: 16px;
    padding-left: 20px;
    padding-right: 56px;
  }

  .footer-category-menu__item-title {
    font-size: inherit;
    margin: 0 0 4px;
  }

  .footer-category-menu__item-link::after {
    width: 24px;
  }

}

/* ---------- SP ---------- */
@media (max-width: 768px) {

  .news__list {
    grid-template-columns: 1fr;
  }

  .flow__steps {
    flex-direction: column;
  }

  .nav a {
    font-size: 14px;
  }
}

/* ---------- content-ttl ---------- */
.content-ttl {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

.content-ttl h2 {
  display: inline-block;
  width: fit-content;
  margin: 0;
  font-size: var(--xxl-font);
  line-height: 1.4;
  font-weight: 700;
}

.content-ttl h2.jp-title {
  font-size: var(--xxl-font-jp);
}

.content-ttl .grd {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content-ttl .sub-caption {
  font-size: var(--s-font);
  color: #333;
  font-weight: 600;
  margin: 0;
}

.content-ttl.white h2 {
  color: #fff;
}
.content-ttl.white h2.oswald{
  font-family:"Oswald";
  font-weight:400;
}

.content-ttl.white .sub-caption {
  color: #fff;
}

/* section-titile */
.section-title {
  font-size: var(--h2);
  color: #333;
  font-weight: 700;
}

.section-stitle {
  font-size: var(--h3);
  color: #333;
  font-weight: 700;
}

/* ---------- page-title ---------- */
.page-title-in {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title-in ul.bread {
  display: flex;
  justify-content: left;
  width: 100%;
  gap: 20px
}

.page-title-in ul.bread li {
  font-size: var(--ss-text);
  color: var(--key-blue)
}

.page-title-in ul.bread li a {
  color: #333;
  text-decoration: none;
  position: relative;
}

.page-title-in ul.bread li a:hover {
  text-decoration: underline;
}

.page-title-in ul.bread li a:after {
  content: ">";
  display: inline-block;
  position: absolute;
  right: -1em
}

.page-title h1 {
  font-size: calc(var(--xxl-font) * 0.8);
  font-weight: 700;
  margin: calc(30px * 0.8) 0;
}

.page-title h1.grd {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
  .page-title-in {
    padding: calc(8 / 375 * 100vw) calc(var(--space-x-page) + var(--space-x-xs));
  }
  .page-title-in ul.bread li {
    font-size: var(--xs-text);
  }
  .page-title h1 {
    font-size: var(--h2);
    margin: calc(16 / 375 * 100vw) 0 calc(12 / 375 * 100vw);;
  }
  .content-ttl {
    gap: 10px;
    margin-bottom: var(--space-y-element);
  }
  .content-ttl:has(.sub-caption) {
    gap: 2px;
  }
  .content-ttl h2 {
    line-height: var(--line-height-title);
  }

  :where(html:lang(ja)) .content-ttl p:not(.ja-text-phrase) {
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
  }

  .section-stitle {
    line-height: var(--line-height-title);
  }
}
@media (max-width: 576px) {
  /* 一行に納まるようにフォントサイズを調整するには、style属性で--ja-title-lengthをつかって文字数を指定すること */
  :where(html:lang(ja)) .content-ttl {
    container-type: inline-size;
  }
  @container style(--ja-title-length) {
    :where(html:lang(ja)) .content-ttl h2 {
      font-size: min(var(--xxl-font), calc(100cqw / (var(--ja-title-length) + 1)));
    }
  }
}
/* ---------- news ---------- */
.news__list {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin: 40px 0;
}

.news__list article {
  width: 360px
}

.news__card {
  border-radius: 8px;
}

.news__card a {
  text-decoration: none;
  transition: all .4s;
}

.news__card a:hover {
  opacity: .75;
}

.news__card a p {
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.news__card a p span {
  display: block;
  width: fit-content;
}

.news__card a p .tags {
  background: var(--key-grn);
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
}

.news__card a p .date {
  color: var(--key-blue);
  font-size: 15px;
  font-weight: 600;
}

.news__photo {
  width: 340px;
  height: 175px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
  text-align: center;
}

.news__photo img {
  max-width: 100%;
  height: 175px;
  object-fit: cover;
}

.other__news__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.other__news__list dt {
  width: 7em;
  font-size: 15px;
  color: var(--key-blue);
  font-weight: 700;
  padding: 15px 0;
}

.other__news__list dd {
  width: calc(100% - 7em);
  margin: 0;
  font-size: 15px;
  padding: 15px 0;
}

.pagenation {}

.pagination__list {
  display: flex;
  gap: 10px;
  padding: 50px 0 0;
  justify-content: center;
}

.pagination__link {
  color: var(--key-blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  border: solid 1px var(--key-blue);
  padding: 4px 12px;
  display: block;
  height: 36px;
  background: #fff;
}

.pagination__link[aria-current="page"] {
  color: #fff;
  background: var(--key-blue);
}

.pagination__link--prev,
.pagination__link--next {
  background: var(--key-grn);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  position: relative;
}

@media (max-width: 1279px) {
  .news__list article {
    width: calc((100% - 50px * 2) / 3);
  }

  .news__photo {
    width: 100%;
    height: calc((33vw * 2) / 3 * 6 / 9);
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
    text-align: center;
  }

  .news__photo img {
    max-width: 100%;
    height: calc((33vw * 2) / 3 * 6 / 9);
    object-fit: cover;
  }
}

@media (max-width: 1080px) {
  .news__list {
    gap: 30px;
  }

  .news__list.my-0 {
    margin: 0;
  }

  .news__list article {
    width: calc((100% - 30px * 1) / 2);
  }

  .news__photo {
    width: 100%;
    height: calc((50vw * 2) / 3 * 6 / 9);
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
    text-align: center;
  }

  .news__photo img {
    max-width: 100%;
    height: calc((50vw * 2) / 3 * 6 / 9);
    object-fit: contain;
  }
}

@media (max-width: 768px) {

  .news__list {
    margin: var(--space-y-area) auto;
  }

  .news__card {
    font-size: var(--list-text);
  }

  .news__card a {
    display: flex;
    column-gap: var(--gap-x);
  }

  .news__photo {
    flex: 0 0 auto;
    width: 29%;
    margin-bottom: 0;
  }

  :where(.three_column) .news__photo {
    width: 100%;
    margin-bottom: var(--card-img-space-b);
  }

  .news__txt {
    flex: 1; 
  }

  .news__card a p {
    gap: 0;
    line-height: var(--line-height-lead);
  }

  .news__card a p .tags {
    font-size: var(--ss-text);
    line-height: var(--line-height-label);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: var(--space-y-child-element);
  }

  .news__card a p .date {
    font-size: inherit;
    line-height: var(--line-height-label);
    margin-top: var(--space-y-child-element);
  }

  .other__news__list {
    margin: 0 auto 0;
    --dt-width: 6.5em;
  }

  :where(.news__card) + .other__news__list {
    margin: var(--space-y-area) auto 0;
  }

  .other__news__list dt {
    font-size: inherit;
    line-height: var(--line-height-lead);
    width: var(--dt-width);
    /* 前後の要素との合計で--list-gap-yになるよう1/2にする */
    padding: calc(var(--list-gap-y) / 2) 0;
  }

  .other__news__list dd {
    font-size: inherit;
    line-height: var(--line-height-lead);
    width: calc(100% - var(--dt-width));
    /* 前後の要素との合計で--list-gap-yになるよう1/2にする */
    padding: calc(var(--list-gap-y) / 2) 0;
  }

  .other__news__list dt:nth-child(1),
  .other__news__list dd:nth-child(2) {
    padding-top: 0;
  }
  .other__news__list dt:nth-child(-2),
  .other__news__list dd:nth-child(-1) {
    padding-bottom: 0;
  }

}

@media (max-width: 576px) {
  .news__list article {
    width: 100%;
  }
  /* .news__photo {
    width: 100%;
    height: calc((100vw * 2) / 3 * 6 / 9);
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
    text-align: center;
  }

  .news__photo img {
    max-width: 100%;
    height: calc((100vw * 2) / 3 * 6 / 9);
    object-fit: cover;
  } */

  .news__photo img {
    object-fit: contain;
  }
}

.three_column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.three_column div {
  flex-basis: calc((100% - 40px * 2) / 3);
  width: calc((100% - 40px * 2) / 3);
}

.three_column a {
  text-decoration: none;
}

@media (any-hover: hover) {
  
  .three_column a:hover {
    opacity: 0.7;
  }

}

.three_column a p {
  color: #333;
}

.three_column a p .date {
  color: var(--key-blue);
  font-size: 15px;
  font-weight: 600;
  display: block;
}

.three_column img {
  width: auto;
  height: auto;
  max-width: 100%;
}
@media (max-width: 768px) {
  .three_column{
    justify-content: initial;
  }
  .three_column div{
    flex-basis:calc((100% - 40px * 1) / 2);
    width:calc((100% - 40px * 1) / 2) 
  }
  .three_column a p {
    
  }
  .three_column a p .date {
    font-size: var(--s-text);
    line-height: var(--line-height-label);
    margin-top: var(--space-y-child-element);
  }
  .sns_list li {
    width: calc((100% - 15px * 5) / 6);
  }
}
@media (max-width: 576px) {
  .three_column{
    row-gap: var(--block-list-gap-y);
  }
  .three_column div{
    flex-basis:100%;
    width:100%
  }
}

/* ---------- faq ---------- */
.faq__list {
  width: 90%;
  max-width: 840px;
  margin: 0 auto;
}

.faq__list dl {
  display: flex;
  gap: 40px;
  flex-direction: column;
}

.faq__list dt {
  display: flex;
  gap: 20px;
  position: relative;
  align-items: center;
  font-weight: 700;
}

.faq__list dt p {
  width: calc(100% - 80px)
}

.faq__list dt:before {
  content: "Q";
  display: block;
  width: 60px;
  height: 60px;
  background: var(--key-blue);
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif
}

.faq__list dd {
  display: flex;
  gap: 20px;
  position: relative;
  align-items: center;
  font-weight: 500;
}

.faq__list dd p {
  width: calc(100% - 80px)
}

.faq__list dd:before {
  content: "A";
  display: block;
  width: 60px;
  height: 60px;
  background: #fff;
  color: var(--key-grn);
  font-size: 36px;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif
}

@media (max-width: 768px) {

  .faq__list {
    width: 100%;
    margin: var(--space-y-area) auto;
  }

}


/* ---------- inquiry ---------- */
.inquiry__column {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
}

.inquiry__column .txt_block {
  width: calc(40% - 30px);
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.inquiry__column .txt_block h3 {
  color: #fff;
  font-size: var(--h2);
  font-weight: 700;
}

.inquiry__column .txt_block h3 b {
  display: inline-block;
}

.inquiry__column .txt_block p {
  color: #fff;
  font-size: var(--s-text);
}

.inquiry__column .btn_block {
  width: calc(60% - 30px);
}

.inquiry__column .btn_list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-bottom: 40px
}

.inquiry__column .btn_list li {
  width: calc(50% - 15px);
}

.inquiry__column .btn_list a {
  background: #fff;
  padding: 10px 20px;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.inquiry__column .btn_list .btn-inquiry a{position:relative;}

.inquiry__column .btn_list a b {
  font-size: 20px;
  font-weight: 700;
  position: relative;
  color: var(--key-blue)
}

.inquiry__column .btn_list .btn-inquiry a b:before {
  content:""; display:inline-block; margin-right:10px; width:31px; height:23px; background-image:url(../images/common/icon-inquiry.png); background-repeat:no-repeat;  background-size:31px 23px; position:relative; top:4px;
}
.inquiry__column .btn_list .btn-telephone a b:before {
  content:""; display:inline-block; margin-right:10px; width:23px; height:23px; background-image:url(../images/common/icon-telephone.png); background-repeat:no-repeat;  background-size:23px 23px; position:relative; top:4px;
}
.inquiry__column .btn_list .btn-map a{position:relative;}
.inquiry__column .btn_list .btn-map a:after {
  content:""; display:inline-block; position:absolute; width:27px; height:21px; background-image:url(../images/common/inquiry-arrow.png); background-repeat:no-repeat;  background-size:27px 21px; top:calc(50% - 11px); right:20px;
}

.inquiry__column .btn_list a span {
  font-size: 13px;
  color: #333;
}

.inquiry__column .btn_block p {
  text-align: center;
  color: #fff;
  font-size:var(--text);
}

.inquiry__column .btn_block p img {
  vertical-align: middle;
  height: 1em;
  /* メールアドレスを隠してスパムメールを防止する処理 */
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 1080px) {
  .inquiry__column {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .inquiry__column .txt_block {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
  }

  .inquiry__column .btn_block {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .inquiry__column {
    gap:40px;
  }
  .inquiry__column .txt_block h3 {
    text-align: center;
  }
  .inquiry__column .btn_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px
  }

  .inquiry__column .btn_list li {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .inquiry__column .txt_block h3 {
    font-size: var(--h3);
  }

  .inquiry__column .btn_list a b {
  font-size: var(--h4);
  }
  .inquiry__column .btn_list a span {
    font-size: 11px;
  }
  .inquiry__column .btn_block p {
    font-size:var(--s-text);
  }
}

.header-inquiry-column {
  padding: 24px 16px;
  background: var(--key-blue);
}

  .header-inquiry-column .btn_block {
    
  }

  .header-inquiry-column .btn_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .header-inquiry-column .btn_list li {
    
  }

  .header-inquiry-column .btn_list a {
    background: #fff;
    padding: 16px 20px;
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    min-height: 72px;
  }

  .header-inquiry-column .btn_list .btn-inquiry a{position:relative;}

  .header-inquiry-column .btn_list a b {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    color: var(--key-blue)
  }

  .header-inquiry-column .btn-telephone a b {
    font-size: 18px;
  }

  .header-inquiry-column .btn_list .btn-inquiry a b:before {
    content:""; display:inline-block; margin-right:.4em; top:-0.075em; width: auto; height: .9em; aspect-ratio: 31/23; background-image:url(../images/common/icon-inquiry.png); background-repeat:no-repeat;  background-size:contain; position:relative; vertical-align: middle;
  }
  .header-inquiry-column .btn_list .btn-telephone a b:before {
    content:""; display:inline-block; margin-right:.2em; top:-.1em; width: auto; height: 1.05em; aspect-ratio: 23/23; background-image:url(../images/common/icon-telephone.png); background-repeat:no-repeat;  background-size:contain; position:relative; vertical-align: middle;
  }
  .header-inquiry-column .btn_list .btn-map a{position:relative;}
  .header-inquiry-column .btn_list .btn-map a:after {
    content:none; display:inline-block; position:absolute; width:27px; height:21px; background-image:url(../images/common/inquiry-arrow.png); background-repeat:no-repeat;  background-size:27px 21px; top:calc(50% - 11px); right:20px;
  }

  .header-inquiry-column .btn_list a span {
    font-size: 11px;
    color: #333;
    display: block;
    margin-top: 0px;
  }

  .header-inquiry-column .btn_block p {
    text-align: center;
    color: #fff;
    font-size:10px;
    line-height: 1.75;
    margin-top: 16px;
  }

  .header-inquiry-column .btn_block p img {
    vertical-align: middle;
    height: 1em;
    /* メールアドレスを隠してスパムメールを防止する処理 */
    user-select: none;
    -webkit-user-select: none;
  }

/* ---------- 表示切り替えユーティリティ ---------- */
.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}