@charset "utf-8";


/* --------------- base --------------- */
body{
  font-family: "Gothic Medium BBB", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  /* 14-16 */
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.75;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
}
a{
  text-decoration: none;
  color: #333;
}
img,svg {
  width: 100%;
  height: auto;
  vertical-align: middle;
  box-sizing: border-box;
}
button{
  display: block;
  letter-spacing: 0.1em;
}
*,
*::before,
*::after {
  box-sizing: boder-box;
}
.block{
  display: block;
}
.ib {
  display: inline-block;
}

.flex{
  display: flex;
}
.grid{
  display: grid;
}
.grid2{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
@media (max-width: 767px){
  .grid2{
    grid-template-columns: repeat(1,1fr);
  }
}

/* position relativeを使ったり、後ろ背景をりz-indexを上に持ってきたりする機会が多いので、その場合はこのクラス使ってもらうと楽です */
.contents-relative{
  position: relative;
  z-index: 1;
}

/* PCで表示させたり逆にSPだけで表示させたり。端末で改行変わる時とか便利です */
.pc-none{
  display: none;
}
.sp-only{
  display: none;
}
@media (max-width: 1023px){
  .pc-none{
    display: inherit;
  }
  .pc-only{
    display: none;
  }
}
@media (max-width: 767px){
  .sp-none{
    display: none;
  }
  .sp-only{
    display: inherit;
  }
}



/* --------------- type --------------- */
/* font-size */
/* 今回から文字や余白サイズは数字で管理しようかと思います。以前のようなS,M,L等だと追加で文字サイズが必要になった場合詰むのと、デザインから実装する際の確認が手間なので。数字は悪手だと思って避けてましたが、ルール破綻よりはマシだと思うのでこうします。 */
/* 文字サイズ選定基準は明確にはありませんが、本文14~18px、24~40pxを基準に決めていくことが多いです。（デフォルト文字サイズ、今回は少し小さめの14-16pxです。）SPのジャンプ率は、PCフルHDより小さく設定します。 */
.txt-30-72{
  font-size: clamp(1.875rem, 1.238rem + 2.72vw, 4.5rem);
  letter-spacing: 0.22em;
  /* レタースペーシングはサイズごとに設定しないと、bodyや親要素の数値基準になってしまうので、それそれに記載 */
  line-height: 1.4;
  /* 基本、文字サイズが大きいほど行間を狭くしています。ただし、狭すぎると詰まった印象になるので和文は1.35より下は原則作りません。 */
}
.txt-26-48{
  font-size: clamp(1.625rem, 1.291rem + 1.42vw, 3rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-25-44{
  font-size: clamp(1.563rem, 1.274rem + 1.23vw, 2.75rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-25-42{
  font-size: clamp(1.563rem, 1.305rem + 1.1vw, 2.625rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-24-40{
  font-size: clamp(1.5rem, 1.257rem + 1.04vw, 2.5rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-22-36{
  font-size: clamp(1.375rem, 1.163rem + 0.91vw, 2.25rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-20-32{
  font-size: clamp(1.25rem, 1.068rem + 0.78vw, 2rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.txt-18-28{
  font-size: clamp(1.125rem, 0.973rem + 0.65vw, 1.75rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-17-26{
  font-size: clamp(1.063rem, 0.926rem + 0.58vw, 1.625rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-16-24{
  font-size: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-15-22{
  font-size: clamp(0.938rem, 0.831rem + 0.45vw, 1.375rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.txt-15-20{
  font-size: clamp(0.938rem, 0.862rem + 0.32vw, 1.25rem);
  letter-spacing: 0.1em;
  line-height: 1.55;
}
/* お問い合わせフォーム項目用 */
/* フォーム項目は、fzが16px以下だとタップした時勝手に画面拡大されるので、SPでも16px以上に設定。 */
.txt-16-18{
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
  letter-spacing: 0.1em;
  line-height: 1.55;
}
.txt-14-18{
  font-size: clamp(0.875rem, 0.814rem + 0.26vw, 1.125rem);
  letter-spacing: 0.1em;
}
.txt-14-16{
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  letter-spacing: 0.1em;
}
.txt-12-14{
  font-size: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
  letter-spacing: 0.1em;
}
.txt-10-12{
  font-size: clamp(0.625rem, 0.595rem + 0.13vw, 0.75rem);
  letter-spacing: 0.1em;
}

/* 書体 */
/* 何も指定してない時は中ゴシックBBが当たります */
.gothic-bbb{
  font-family: "Gothic Medium BBB", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  font-weight: 400;
}
/* 見出ゴMB31 */
.midashigo{
  font-family: "Midashi Go MB31", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  font-weight: 600;
}
/* Inter 欧文タイトルとかに使用する。今回は和欧混植で設定していないので、英語表記部分（例えば欧文見出し等）は各々これらの欧文クラスを使用。レタースペーシングは欧文用に書いてるので、CSSの順番新たに設定しなくても上書きされます。 */
.inter-regular{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
  /* ↑欧文は字間狭く設定します */
}
.inter-medium{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}
.inter-semibold{
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}


.txt-light{
  font-weight: 300;
}
.txt-regular{
  font-weight: 400;
}
.txt-medium{
  font-weight: 500;
}
.txt-semibold{
  font-weight: 600;
}
.txt-bold{
  font-weight: 700;
}
.txt-center{
  text-align: center;
}
.txt-left{
  text-align: left;
}
.txt-right{
  text-align: right;
}
/* 箱組の文字は、基本justifyを設定 */
.txt-just{
  text-align: justify;
}
.lh-info{
  line-height: 1.5;
}
.lh-en{
  line-height: 1.1;
}
.ls-jp-wide{
  letter-spacing: 0.14em;
}
.ls-jp-normal{
  letter-spacing: 0.1em;
}
.ls-en{
  letter-spacing: 0.02em;
}
.en-upper{
  text-transform: uppercase;
}
.en-normal{
  text-transform: none;
}





@media (max-width: 767px){
}


/* --------------- wrap --------------- */

.wrap-1840{
  width: 96%;
  margin: 0 auto;
}
.wrap-1360{
  width: min(86%,85em);
  margin: 0 auto;
}
.wrap-1080{
  width: min(76%,67.5em);
  margin: 0 auto;
}
.wrap-960{
  width: min(72%,60em);
  margin: 0 auto;
}
.wrap-800{
  width: min(68%,50em);
  margin: 0 auto;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .wrap-1840{
    width: 90%;
  }
  .wrap-1360,
  .wrap-1080,
  .wrap-960,
  .wrap-800{
    width: min(90%,36em);
  }
}


/* --------------- space --------------- */
/* 375px~1920px */
/* いつものセクション間の数値から、LM用に少し調整しています。余談ですが、今までは、PC最大の0.4倍の値をSP最小としてましたが、今回は0.45倍、100,80のような小さい値と320のような大きい値はさらに微調整を加えています。 */
.space-140-320{
  padding-top: 8.75rem;
  padding-top: clamp(8.75rem, 6.019rem + 11.65vw, 20rem);
}
.space-140-320-bottom{
  padding-bottom: 8.75rem;
  padding-bottom: clamp(8.75rem, 6.019rem + 11.65vw, 20rem);
}

.space-120-280{
  padding-top: 7.5rem;
  padding-top: clamp(7.5rem, 5.073rem + 10.36vw, 17.5rem);
}
.space-120-280-bottom{
  padding-bottom: 7.5rem;
  padding-bottom: clamp(7.5rem, 5.073rem + 10.36vw, 17.5rem);
}

.space-108-240{
  padding-top: 6.75rem;
  padding-top: clamp(6.75rem, 4.748rem + 8.54vw, 15rem);
}
.space-108-240-bottom{
  padding-bottom: 6.75rem;
  padding-bottom: clamp(6.75rem, 4.748rem + 8.54vw, 15rem);
}

.space-90-200{
  padding-top: 5.625rem;
  padding-top: clamp(5.625rem, 3.956rem + 7.12vw, 12.5rem);
}
.space-90-200-bottom{
  padding-bottom: 5.625rem;
  padding-bottom: clamp(5.625rem, 3.956rem + 7.12vw, 12.5rem);
}

.space-72-160{
  padding-top: 4.5rem;
  padding-top: clamp(4.5rem, 3.165rem + 5.7vw, 10rem);
}
.space-72-160-bottom{
  padding-bottom: 4.5rem;
  padding-bottom: clamp(4.5rem, 3.165rem + 5.7vw, 10rem);
}

.space-54-120{
  padding-top: 3.375rem;
  padding-top: clamp(3.375rem, 2.374rem + 4.27vw, 7.5rem);
}
.space-54-120-bottom{
  padding-bottom: 3.375rem;
  padding-bottom: clamp(3.375rem, 2.374rem + 4.27vw, 7.5rem);
}

.space-48-100{
  padding-top: 3rem;
  padding-top: clamp(3rem, 2.211rem + 3.37vw, 6.25rem);
}
.space-48-100-bottom{
  padding-bottom: 3rem;
  padding-bottom: clamp(3rem, 2.211rem + 3.37vw, 6.25rem);
}

.space-40-80{
  padding-top: 2.5rem;
  padding-top: clamp(2.5rem, 1.893rem + 2.59vw, 5rem);
}
.space-40-80-bottom{
  padding-bottom: 2.5rem;
  padding-bottom: clamp(2.5rem, 1.893rem + 2.59vw, 5rem);
}
/* 1 */
.space-1{
  padding-top: 1px;
}

/* 文字周りのmtやpt。スマホでは余白が同じ値だと大きく開いて見えるので、少しだけ小さくなるよう調整しています。ある程度準備しておきますが、デザインを忠実に再現することが前提なので汎用クラスで事足りない場合は個別でCSSを書いてください。 */
/* margin-top */
.mt3{
  margin-top: 3em;
}
.mt2_5{
  margin-top: 2.5em;
}
.mt2{
  margin-top: 2em;
}
.mt1_5{
  margin-top: 1.5em;
}
.mt1{
  margin-top: 1em;
}
.mt0_5{
  margin-top: 0.5em;
}
@media (max-width: 767px){
  .mt3{
    margin-top: 1.9em;
  }
  .mt2_5{
    margin-top: 1.7em;
  }
  .mt2{
    margin-top: 1.3em;
  }
  .mt1_5{
    margin-top: 1em;
  }
  .mt1{
    margin-top: 0.8em;
  }
  .mt0_5{
    margin-top: 0.4em;
  }
}
/* margin-bottom */
.mb3{
  margin-bottom: 3em;
}
.mb2_5{
  margin-bottom: 2.5em;
}
.mb2{
  margin-bottom: 2em;
}
.mb1_5{
  margin-bottom: 1.5em;
}
.mb1{
  margin-bottom: 1em;
}
.mb0_5{
  margin-bottom: 0.5em;
}
@media (max-width: 767px){
  .mb3{
    margin-bottom: 1.9em;
  }
  .mb2_5{
    margin-bottom: 1.7em;
  }
  .mb2{
    margin-bottom: 1.3em;
  }
  .mb1_5{
    margin-bottom: 1em;
  }
  .mb1{
    margin-bottom: 0.8em;
  }
  .mb0_5{
    margin-bottom: 0.4em;
  }
}
/* 全方位paddinfg */
.p2{
  padding: 2em;
}
.p1_5{
  padding: 1.5em;
}
.p1{
  padding: 1em;
}
.p0_5{
  padding: 0.5em;
}
@media (max-width: 767px){
  .p2{
    padding: 1.3em;
  }
  .p1_5{
    padding: 1em;
  }
  .p1{
    padding: 0.8em;
  }
  .p0_5{
    padding: 0.4em;
  }
}
/* gap */
.g2{
  gap: 2em;
}
.g1_5{
  gap: 1.5em;
}
.g1{
  gap: 1em;
}
.g0_5{
  gap: 0.5em;
}
@media (max-width: 767px){
  .g2{
    gap: 1.3em;
  }
  .g1_5{
    gap: 1em;
  }
  .g1{
    gap: 0.8em;
  }
  .g0_5{
    gap: 0.4em;
  }
}
/* grid-gap */
.gg2{
  grid-gap: 2em;
}
.gg1_5{
  grid-gap: 1.5em;
}
.gg1{
  grid-gap: 1em;
}
.gg0_5{
  grid-gap: 0.5em;
}
@media (max-width: 767px){
  .gg2{
    grid-gap: 1.3em;
  }
  .gg1_5{
    grid-gap: 1em;
  }
  .gg1{
    grid-gap: 0.8em;
  }
  .gg0_5{
    grid-gap: 0.4em;
  }
}
/* padding-inline */
.pi2{
  padding-inline: 2em;
}
.pi1_5{
  padding-inline: 1.5em;
}
.pi1{
  padding-inline: 1em;
}
.pi0_5{
  padding-inline: 0.5em;
}
@media (max-width: 767px){
  .pi2{
    padding-inline: 1.3em;
  }
  .pi1_5{
    padding-inline: 1em;
  }
  .pi1{
    padding-inline: 0.8em;
  }
  .pi0_5{
    padding-inline: 0.4em;
  }
}

.fit{
  width: fit-content;
}

.align-center{
  align-items: center;
}
.align-end{
  align-items: end;
}


/* --------------- color --------------- */
/* bg */
.bg-black{
  background-color: #333;
}
.bg-white{
  background-color: #fff;
}
.bg-gray01{
  background-color: #f2f3f4;
}
.bg-gray02{
  background-color: #f7f7f7;
}

/* txt */
.txt-black, .txt-black a{
  color: #333;
}
.txt-gray, .txt-gray a{
  color: #888;
}
.txt-white, .txt-white a{
  color: #fff;
}