@charset "utf-8";


/* --------------- base --------------- */
body{
  font-family: "Shippori Mincho", serif;
  /* 14-17 */
  font-size: clamp(0.875rem, 0.829rem + 0.19vw, 1.063rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.4;
  color: #383533;
  font-kerning: normal;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px){
  body{
    line-height: 2.2;
  }
}
a{
  text-decoration: none;
  color: #383533;
}
img,svg {
  width: 100%;
  height: auto;
  vertical-align: middle;
  box-sizing: border-box;
}
button{
  display: block;
  letter-spacing: 0.08em;
}
*,
*::before,
*::after {
  box-sizing: boder-box;
}
.block{
  display: block;
}
.ib {
  display: inline-block;
}
.pc-none{
  display: none;
}
.sp-only{
  display: none;
}


.contents-relative{
  position: relative;
  z-index: 1;
}
.fit{
  width: fit-content;
}

@media (max-width: 1023px){
  .pc-none{
    display: inherit;
  }
  .pc-only{
    display: none;
  }
}

@media (max-width: 767px){
  .sp-none{
    display: none;
  }
  .sp-only{
    display: inherit;
  }
}

@media (max-width: 375px) {
  .sp-none {
    display: none;
  }

  .sp-only {
    display: inherit;
  }
}



/* --------------- type --------------- */

/* font-size */
.txt-34-60{
  font-size: 3.5294em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-32-56{
  font-size: 3.2941em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-30-52{
  font-size: 3.0588em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-28-48{
  font-size: 2.8235em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-26-44{
  font-size: 2.5882em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-24-40{
  font-size: 2.3529em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-22-36{
  font-size: 2.1176em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-20-32{
  font-size: 1.8823em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-18-28{
  font-size: 1.6471em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-16-24{
  font-size: 1.4117em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-15-22{
  font-size: 1.2941em;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.txt-15-19{
  font-size: 1.1176em;
  letter-spacing: 0.08em;
}
.txt-13-15{
  font-size: 0.8823em;
  letter-spacing: 0.08em;
}
.txt-11-13{
  font-size: 0.7647em;
  letter-spacing: 0.08em;
}
.txt-10-12{
  font-size: 0.7059em;
  letter-spacing: 0.08em;
}

@media (max-width: 1023px){
  .txt-34-60{
    font-size: 2.4285em;
    line-height: 1.75;
  }
  .txt-32-56{
    font-size: 2.2857em;
    line-height: 1.75;
  }
  .txt-30-52{
    font-size: 2.1428em;
    line-height: 1.75;
  }
  .txt-28-48{
    font-size: 2em;
    line-height: 1.75;
  }
  .txt-26-44{
    font-size: 1.8571em;
    line-height: 1.75;
  }
  .txt-24-40{
    font-size: 1.7142em;
    line-height: 1.75;
  }
  .txt-22-36{
    font-size: 1.5714em;
    line-height: 1.75;
  }
  .txt-20-32{
    font-size: 1.4285em;
    line-height: 1.75;
  }
  .txt-18-28{
    font-size: 1.2857em;
    line-height: 1.75;
  }
  .txt-16-24{
    font-size: 1.1428em;
    line-height: 1.75;
  }
  .txt-15-22{
    font-size: 1.0714em;
    line-height: 1.75;
  }
  .txt-15-19{
    font-size: 1.0714em;
  }
  .txt-13-15{
    font-size: 0.9285em;
  }
  .txt-11-13{
    font-size: 0.7857em;
  }
  .txt-10-12{
    font-size: 0.7143em;
  }
}


.cormorant-garamond-medium{
  font-family: "Cormorant Garamond", "Shippori Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.cormorant-garamond-semibold{
  font-family: "Cormorant Garamond", "Shippori Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
/* 大文字の英語はこれを適用 */
.en-upper{
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.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;
}
.txt-just{
  text-align: justify;
}
.txt-vertical{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/* 文字間、行間 個別指定する際は下記を使う */
.ls-0_4{
  letter-spacing: 0.4em;
}

.ls-0_2 {
  letter-spacing: 0.2em;
}

.ls-0_15{
  letter-spacing: 0.15em;
}
.ls-0_08{
  letter-spacing: 0.08em;
}
.ls-0_05{
  letter-spacing: 0.05em;
}
.lh-3_2{
  line-height: 3.2;
}
.lh-3{
  line-height: 3;
}
.lh-2_8{
  line-height: 2.8;
}
.lh-2_4{
  line-height: 2.4;
}
.lh-2_2{
  line-height: 2.2;
}
.lh-2{
  line-height: 2;
}
.lh-1_8{
  line-height: 1.8;
}
.lh-1_6{
  line-height: 1.6;
}
@media (max-width: 767px){
  .lh-3_2{
    line-height: 2.9;
  }
  .lh-3{
    line-height: 2.7;
  }
  .lh-2_8{
    line-height: 2.5;
  }
  .lh-2_4{
    line-height: 2.2;
  }
  .lh-2_2{
    line-height: 2;
  }
  .lh-2{
    line-height: 1.9;
  }
  .lh-1_8{
    line-height: 1.7;
  }
  .lh-1_6{
    line-height: 1.55;
  }
}


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


/* --------------- wrap --------------- */
.wrap-1790{
  width: 94%;
  margin: 0 auto;
}
/* 基本のコンテンツ幅。gridで組む際はこのwrap-1534と.grid-16を併用したタグの内側でレイアウトしていく */
.wrap-1534{
  width: min(94%,90.1931em);
  margin: 0 auto;
}
@media (max-width: 1023px){
  .wrap-1534{
    width: 90.1334%;
  }
  .wrap-1790{
    width: 90.1334%;
  }
}
@media (max-width: 767px){
  .wrap-1534{
    width: min(90.1334%,32em);
  }
}

/* .wrap-1534 {
  width: clamp(21.25rem, 3.137rem + 77.28vw, 95.875rem);
  margin: 0 auto;
} */


/* --------------- flex --------------- */
.flex{
  display: flex;
}
.justify-between{
  justify-content: space-between;
}
.justify-center{
  justify-content: center;
}
.align-start{
  align-items: flex-start;
}
.align-center{
  align-items: center;
}
.align-end{
  align-items: flex-end;
}
.g2{
  gap:2em;
}

/* --------------- grid --------------- */

/* 大枠のレイアウトはgrid, */

/* ご存知かもしれませんが、CSS変数(https://x.gd/c0Bov)で
デザインデータのgap 1スペース分の変数を入れています。レスポンシブでSPにも対応してるので機会があれば使ってください */
:root{
  --gap-base: min(2.2222vw,2em);
}

.grid{
  display: grid;
}
.grid-2{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
/* 16グリッド。wrap-1534と併用して子要素をレイアウトしていく。SPでは8グリッドに変化 */
.grid-16{
  display: grid;
  grid-template-columns: repeat(16,1fr);
  column-gap: var(--gap-base);
}
.gg-base{
  grid-gap: var(--gap-base);
}
.mt-gap-base{
  margin-top: calc(var(--gap-base)*2);
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  :root{
    --gap-base: min(3.7334vw,1em);
  }
  .grid-16{
    grid-template-columns: repeat(8,1fr);
  }
  .grid-2{
    grid-template-columns: repeat(1,1fr);
  }
}

/* ----- col ----- */
/* 要素幅をグリッド列に合わせる。 */
/* GPTが上手いこと説明してくれたので、良かったら参照してください↓
https://chatgpt.com/share/685187ca-53b0-8011-ba2e-f83337564f24 */
/* PC、Tab、SPで列数とスタート位置を上書きできるようにしています。よくあるフレームワークに倣ってPCをlg、Tabをmd、SPをsmとしています。PCでグリッド5列分の要素は.col-lg-5。レイスとの関係でそれをタブレットサイズで7列にしたい時は同じタグにcol-md-7を追記すれば1023px以下で7列に上書きされます。 */
/* SPでは基本縦積みなので、何も書かなければ強制的に全幅(8列)になります。その上でスマホで6列分の幅にしたい時はcol-sm-6を同じタグに追記すれば反映されます。 */
.col-lg-1{
  grid-column: auto / span 1;
}
.col-lg-2{
  grid-column: auto / span 2;
}
.col-lg-3{
  grid-column: auto / span 3;
}
.col-lg-4{
  grid-column: auto / span 4;
}
.col-lg-5{
  grid-column: auto / span 5;
}
.col-lg-6{
  grid-column: auto / span 6;
}
.col-lg-7{
  grid-column: auto / span 7;
}
.col-lg-8{
  grid-column: auto / span 8;
}
.col-lg-9{
  grid-column: auto / span 9;
}
.col-lg-10{
  grid-column: auto / span 10;
}
.col-lg-11{
  grid-column: auto / span 11;
}
.col-lg-12{
  grid-column: auto / span 12;
}
.col-lg-13{
  grid-column: auto / span 13;
}
.col-lg-14{
  grid-column: auto / span 14;
}
.col-lg-15{
  grid-column: auto / span 15;
}
.col-lg-16{
  grid-column: auto / span 16;
}
@media (max-width: 1023px){
  .col-md-1{
    grid-column: auto / span 1;
  }
  .col-md-2{
    grid-column: auto / span 2;
  }
  .col-md-3{
    grid-column: auto / span 3;
  }
  .col-md-4{
    grid-column: auto / span 4;
  }
  .col-md-5{
    grid-column: auto / span 5;
  }
  .col-md-6{
    grid-column: auto / span 6;
  }
  .col-md-7{
    grid-column: auto / span 7;
  }
  .col-md-8{
    grid-column: auto / span 8;
  }
  .col-md-9{
    grid-column: auto / span 9;
  }
  .col-md-10{
    grid-column: auto / span 10;
  }
  .col-md-11{
    grid-column: auto / span 11;
  }
  .col-md-12{
    grid-column: auto / span 12;
  }
  .col-md-13{
    grid-column: auto / span 13;
  }
  .col-md-14{
    grid-column: auto / span 14;
  }
  .col-md-15{
    grid-column: auto / span 15;
  }
  .col-md-16{
    grid-column: auto / span 16;
  }
}
@media (max-width: 767px){
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-13,
  .col-lg-14,
  .col-lg-15,
  .col-lg-16,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-13,
  .col-md-14,
  .col-md-15,
  .col-md-16{
    grid-column: auto / span 8;
  }
  .col-sm-1{
    grid-column: auto / span 1;
  }
  .col-sm-2{
    grid-column: auto / span 2;
  }
  .col-sm-3{
    grid-column: auto / span 3;
  }
  .col-sm-4{
    grid-column: auto / span 4;
  }
  .col-sm-5{
    grid-column: auto / span 5;
  }
  .col-sm-6{
    grid-column: auto / span 6;
  }
  .col-sm-7{
    grid-column: auto / span 7;
  }
  .col-sm-8{
    grid-column: auto / span 8;
  }
}

/* ----- start ----- */
/* グリッドの何列目から始まるのかを指定するものです。挙動とっ指定方法は、上のgrid-columnと同じです。 */
.start-lg-1{
  grid-column-start: 1;
}
.start-lg-2{
  grid-column-start: 2;
}
.start-lg-3{
  grid-column-start: 3;
}
.start-lg-4{
  grid-column-start: 4;
}
.start-lg-5{
  grid-column-start: 5;
}
.start-lg-6{
  grid-column-start: 6;
}
.start-lg-7{
  grid-column-start: 7;
}
.start-lg-8{
  grid-column-start: 8;
}
.start-lg-9{
  grid-column-start: 9;
}
.start-lg-10{
  grid-column-start: 10;
}
.start-lg-11{
  grid-column-start: 11;
}
.start-lg-12{
  grid-column-start: 12;
}
.start-lg-13{
  grid-column-start: 13;
}
.start-lg-14{
  grid-column-start: 14;
}
.start-lg-15{
  grid-column-start: 15;
}
@media (max-width: 1023px){
  .start-md-1{
    grid-column-start: 1;
  }
  .start-md-2{
    grid-column-start: 2;
  }
  .start-md-3{
    grid-column-start: 3;
  }
  .start-md-4{
    grid-column-start: 4;
  }
  .start-md-5{
    grid-column-start: 5;
  }
  .start-md-6{
    grid-column-start: 6;
  }
  .start-md-7{
    grid-column-start: 7;
  }
  .start-md-8{
    grid-column-start: 8;
  }
  .start-md-9{
    grid-column-start: 9;
  }
  .start-md-10{
    grid-column-start: 10;
  }
  .start-md-11{
    grid-column-start: 11;
  }
  .start-md-12{
    grid-column-start: 12;
  }
  .start-md-13{
    grid-column-start: 13;
  }
  .start-md-14{
    grid-column-start: 14;
  }
  .start-md-15{
    grid-column-start: 15;
  }
}
@media (max-width: 767px){
  .start-lg-1,
  .start-lg-2,
  .start-lg-3,
  .start-lg-4,
  .start-lg-5,
  .start-lg-6,
  .start-lg-7,
  .start-lg-8,
  .start-lg-9,
  .start-lg-10,
  .start-lg-11,
  .start-lg-12,
  .start-lg-13,
  .start-lg-14,
  .start-lg-15,
  .start-lg-16,
  .start-md-1,
  .start-md-2,
  .start-md-3,
  .start-md-4,
  .start-md-5,
  .start-md-6,
  .start-md-7,
  .start-md-8,
  .start-md-9,
  .start-md-10,
  .start-md-11,
  .start-md-12,
  .start-md-13,
  .start-md-14,
  .start-md-15,
  .start-md-16{
    grid-column-start: 1;
  }
  .start-sm-1{
    grid-column-start: 1;
  }
  .start-sm-2{
    grid-column-start: 2;
  }
  .start-sm-3{
    grid-column-start: 3;
  }
  .start-sm-4{
    grid-column-start: 4;
  }
  .start-sm-5{
    grid-column-start: 5;
  }
  .start-sm-6{
    grid-column-start: 6;
  }
  .start-sm-7{
    grid-column-start: 7;
  }
}


.grid-wrap{
  width: min(94vw, 90.1931em);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-gap: min(2.2222vw,2em);
}
.grid-wrap__left{
  grid-column: auto / span 5;
  grid-column-start: 4;
  grid-row-start: 1;
  z-index: 2;
}
.grid-wrap__right{
  grid-column: auto / span 8;
  grid-column-start: 7;
  grid-row-start: 1;
}

@media (max-width: 767px){
  .grid-wrap{
    width: min(90.1334vw,32em);
    grid-template-columns: repeat(8,1fr);
    grid-gap: min(3.7334vw,1em);
  }
  .grid-wrap__left{
    grid-column: auto / span 6;
    grid-column-start: 2;
    grid-row-start: auto;
    order: 2;
  }
  .grid-wrap__right{
    grid-column: auto / span 6;
    grid-column-start: 2;
    grid-row-start: auto;
    order: 1;
  }
}

/* grid-row-start */
.rowstart-lg-1{
  grid-row-start: 1;
}
@media (max-width: 767px){
  /* SPだと横に重ねることもないと思うので解除 */
  .rowstart-lg-1{
    grid-row-start: auto;
  }
}

/* z-index */
.z-1{
  z-index: 1;
}
.z-2{
  z-index: 2;
}
.z-3{
  z-index: 3;
}

/* SPサイズのみ order */
@media (max-width: 767px){
  .order-sp-1{
    order: 1;
  }
  .order-sp-2{
    order: 2;
  }
  .order-sp-3{
    order: 3;
  }
}



/* --------------- space --------------- */
/* 375px~1920px */
/* 128-320 */
.space-128-320{
  padding-top: 8rem;
  padding-top: clamp(8rem, 5.087rem + 12.43vw, 20rem);
}
.space-128-320-bottom{
  padding-bottom: 8rem;
  padding-bottom: clamp(8rem, 5.087rem + 12.43vw, 20rem);
}
/* 112-280 */
.space-112-280{
  padding-top: 7rem;
  padding-top: clamp(7rem, 4.451rem + 10.87vw, 17.5rem);
}
.space-112-280-bottom{
  padding-bottom: 7rem;
  padding-bottom: clamp(7rem, 4.451rem + 10.87vw, 17.5rem);
}
/* 96-240 */
.space-96-240{
  padding-top: 6rem;
  padding-top: clamp(6rem, 3.816rem + 9.32vw, 15rem);
}
.space-96-240-bottom{
  padding-bottom: 6rem;
  padding-bottom: clamp(6rem, 3.816rem + 9.32vw, 15rem);
}
/* 80-200 */
.space-80-200{
  padding-top: 5rem;
  padding-top: clamp(5rem, 3.18rem + 7.77vw, 12.5rem);
}
.space-80-200-bottom{
  padding-bottom: 5rem;
  padding-bottom: clamp(5rem, 3.18rem + 7.77vw, 12.5rem);
}
/* 64-160 */
.space-64-160{
  padding-top: 4rem;
  padding-top: clamp(4rem, 2.544rem + 6.21vw, 10rem);
}
.space-64-160-bottom{
  padding-bottom: 4rem;
  padding-bottom: clamp(4rem, 2.544rem + 6.21vw, 10rem);
}
/* 48-120 */
.space-48-120{
  padding-top: 3rem;
  padding-top: clamp(3rem, 1.908rem + 4.66vw, 7.5rem);
}
.space-48-120-bottom{
  padding-bottom: 3rem;
  padding-bottom: clamp(3rem, 1.908rem + 4.66vw, 7.5rem);
}
/* 40-100 */
.space-40-100{
  padding-top: 2.5rem;
  padding-top: clamp(2.5rem, 1.59rem + 3.88vw, 6.25rem);
}
.space-40-100-bottom{
  padding-bottom: 2.5rem;
  padding-bottom: clamp(2.5rem, 1.59rem + 3.88vw, 6.25rem);
}
/* 34-80 */
.space-34-80{
  padding-top: 2.125rem;
  padding-top: clamp(2.125rem, 1.427rem + 2.98vw, 5rem);
}
.space-34-80-bottom{
  padding-bottom: 2.125rem;
  padding-bottom: clamp(2.125rem, 1.427rem + 2.98vw, 5rem);
}
/* 1 */
.space-1{
  padding-top: 1px;
}

/* margin-top */
.mt-3{
  margin-top: 3em;
}
.mt-2_5{
  margin-top: 2.5em;
}
.mt-2{
  margin-top: 2em;
}
.mt-1_5{
  margin-top: 1.5em;
}
.mt-1{
  margin-top: 1em;
}
.mt-0_5{
  margin-top: 0.5em;
}
@media (max-width: 767px){
  .mt-3{
    margin-top: 1.9em;
  }
  .mt-2_5{
    margin-top: 1.7em;
  }
  .mt-2{
    margin-top: 1.3em;
  }
  .mt-1_5{
    margin-top: 1em;
  }
  .mt-1{
    margin-top: 0.8em;
  }
  .mt-0_5{
    margin-top: 0.4em;
  }
}
/* margin-bottom */
.mb-3{
  margin-bottom: 3em;
}
.mb-2_5{
  margin-bottom: 2.5em;
}
.mb-2{
  margin-bottom: 2em;
}
.mb-1_5{
  margin-bottom: 1.5em;
}
.mb-1{
  margin-bottom: 1em;
}
.mb-0_5{
  margin-bottom: 0.5em;
}
@media (max-width: 767px){
  .mb-3{
    margin-bottom: 1.9em;
  }
  .mb-2_5{
    margin-bottom: 1.7em;
  }
  .mb-2{
    margin-bottom: 1.3em;
  }
  .mb-1_5{
    margin-bottom: 1em;
  }
  .mb-1{
    margin-bottom: 0.8em;
  }
  .mb-0_5{
    margin-bottom: 0.4em;
  }
}

/* padding-top */
.pt-3{
  padding-top: 3em;
}
.pt-2_5{
  padding-top: 2.5em;
}
.pt-2{
  padding-top: 2em;
}
.pt-1_5{
  padding-top: 1.5em;
}
.pt-1{
  padding-top: 1em;
}
.pt-0_5{
  padding-top: 0.5em;
}
@media (max-width: 767px){
  .pt-3{
    padding-top: 1.9em;
  }
  .pt-2_5{
    padding-top: 1.7em;
  }
  .pt-2{
    padding-top: 1.3em;
  }
  .pt-1_5{
    padding-top: 1em;
  }
  .pt-1{
    padding-top: 0.8em;
  }
  .pt-0_5{
    padding-top: 0.4em;
  }
}

/* padding-bottom */
.pb-3{
  padding-bottom: 3em;
}
.pb-2_5{
  padding-bottom: 2.5em;
}
.pb-2{
  padding-bottom: 2em;
}
.pb-1_5{
  padding-bottom: 1.5em;
}
.pb-1{
  padding-bottom: 1em;
}
.pb-0_5{
  padding-bottom: 0.5em;
}
@media (max-width: 767px){
  .pb-3{
    padding-bottom: 1.9em;
  }
  .pb-2_5{
    padding-bottom: 1.7em;
  }
  .pb-2{
    padding-bottom: 1.3em;
  }
  .pb-1_5{
    padding-bottom: 1em;
  }
  .pb-1{
    padding-bottom: 0.8em;
  }
  .pb-0_5{
    padding-bottom: 0.4em;
  }
}
/* padding-left */
.pl-3{
  padding-left: 3em;
}
.pl-2_5{
  padding-left: 2.5em;
}
.pl-2{
  padding-left: 2em;
}
.pl-1_5{
  padding-left: 1.5em;
}
.pl-1{
  padding-left: 1em;
}
.pl-0_5{
  padding-left: 0.5em;
}
@media (max-width: 767px){
  .pl-3{
    padding-left: 1.9em;
  }
  .pl-2_5{
    padding-left: 1.7em;
  }
  .pl-2{
    padding-left: 1.3em;
  }
  .pl-1_5{
    padding-left: 1em;
  }
  .pl-1{
    padding-left: 0.8em;
  }
  .pl-0_5{
    padding-left: 0.4em;
  }
}


/* --------------- color --------------- */
/* bg */
.bg-red{
  background-color: #ba4c4c;
}
.bg-pink{
  background-color: #f3e1e1;
}
.bg-light-orange{
  background-color: #f2e1d6;
}
.bg-light-beige{
  background-color: #faf3ed;
}
.bg-gray{
  background-color: #f4f1ec;
}
.bg-white{
  background-color: #fff;
}

/* txt */
.txt-red, .txt-red a{
  color: #ba4c4c;
}
.txt-black, .txt-black a{
  color: #383533;
}
.txt-white01, .txt-white01 a{
  color: #fff;
}

.txt-gray{
color: #383533;
opacity: 0.7;
}

/* 赤背景の上にはこの白を使う */
.txt-white02, .txt-white02 a{
  color: #fcfafa;
}

.border-gray{
  border: 0.75px solid rgba(56,53,51,0.4) ;
}
.underline-gray-center{
  position: relative;
  padding-bottom: 0.5em;
}
.underline-gray-center::after{
  position: absolute;
  bottom:0;
  left:50%;
  content: '';
  width: 1.5em;
  height: 0.75px;
  border: none;
  background-color: #383533;
  translate:-50% 0;
}
.underline-gray-left{
  position: relative;
  padding-bottom: 1em;
}
.underline-gray-left::after{
  position: absolute;
  bottom:0;
  left:0;
  content: '';
  width: 1.5em;
  height: 1.5px;
  border: none;
  background-color: #383533;
  transform: scaleY(0.5);
}
.sideline-gray{
  position: relative;
  height: 1em;
}
.sideline-gray::after{
  position: absolute;
  top:60%;
  left:-0.5em;
  content: '';
  width: 7em;
  height: 1.5px;
  border: none;
  background-color: #333333;
  translate:-100% -50%;
  z-index: 2;
  transform: scaleY(0.5);
  opacity: 0.5;
}
.sideline-gray-ttl {
  position: relative;
  height: 1em;
  margin-left: 4.5em;
}
.sideline-gray-ttl::after{
  position: absolute;
    top: 60%;
    left: -0.5em;
    content: '';
    width: 9em;
    height: 1.5px;
    border: none;
    background-color: #333333;
    translate: -100% -50%;
    z-index: 2;
    transform: scaleY(0.5);
    opacity: 0.5;
}

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

@media (max-width: 767px){
  .sideline-gray::after {
      display: none;
    }

  .sideline-gray-ttl {
    position: relative;
    height: 1em;
    margin-left:1em;
  }

  .sideline-gray-ttl::after {
    position: absolute;
    top: 60%;
    left: -0.5em;
    content: '';
    width: 5em;
    height: 1.5px;
    border: none;
    background-color: #333333;
    translate: -100% -50%;
    z-index: 2;
    transform: scaleY(0.5);
    opacity: 0.5;   }

}