:root {
    /* しっぽり明朝（日本語） */
    --font-mincho: YakuHanMP, 'Shippori Mincho', 'Yu Mincho', serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans Emoji';
    /* Cormorant Infant（英字） */
    --font-cormorant: 'Cormorant Infant', cormorant-infant, serif;
    /* Noto Sans（通常） */
    --font-noto: 'Noto Sans JP', sans-serif;
    /* カラー */
    --color-wine-red: #81385F;
    --color-gold: #B2AC7B;
    --color-black: #292929;
    --color-blue-light: #D6ECF5;
    --color-cream: #FDF5B8;
    --color-white: #FFFFFF;
}

.ja-noto{
  font-family: var(--font-noto);
}

main {
    font-size: 62.5%; /* 16px × 62.5% = 10px */
    font-family: var(--font-mincho);
    color: var(--color-black);
    font-weight: 500;
  }

.u-mobile {
  display: none;
}

@media (max-width: 768px) {
  .u-mobile {
    display: block;
  }
}

.u-desktop {
  display: block;
}

@media (max-width: 768px) {
  .u-desktop {
    display: none;
  }
}

/* もっと小さい幅だけに出したいやつ */
.sp-only {
  display: none;
}

@media (max-width: 500px) {
  .sp-only {
    display: block;
  }
}

.sp-only-img {
  display: block;
}
@media (min-width: 768px) {
  .sp-only-img {
    display: none;
  }
}


.img-wrapper {
  position: relative;
  padding: 0;
  margin: 0;
}

/* caption 共通 */
.img-wrapper .caption {
  position: absolute;
  bottom: 2px;
  right: 6px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* 下寄せバリエーション */
.img-wrapper .caption.--bottom {
  bottom: -2rem;
}

.img-wrapper .caption-top{
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

/* MD以下のとき */
@media (max-width: 768px) {
  .img-wrapper .caption {
    font-size: 10px;
  }
}


@media (max-width: 768px) {
  .column__contents .contents-bg{
    top: 0;
    right: -40px;
  }
}

.column__contents .inner{
  padding-bottom: 4rem;
}

.column-under-contents{
  padding-bottom: 8rem;
}





/* スクロールヒント */
.merit__item-image--scroll-wrapper{
  position: relative;
}


@media (max-width: 768px) {
  .merit__item-image--scroll {
    width: 100vw; 
    /* margin-right: calc(50% - 50vw);  */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #eee transparent;
  }
  
  /* 画像を固定幅にする */
  .merit__item-image--scroll .scroll-img {
    width: 1200px;
    height: auto;
    padding-right: 24px;
    object-fit: contain;
    max-width: none;
    padding-inline-end: 50px;
  }
}


.scroll-hint.--top {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 24rem;
  z-index: 10;
  pointer-events: none;
}

.scroll-hint.--bottom {
  position: absolute;
  top: 35%;
  left: 15%;
  width: 24rem;
  z-index: 10;
  pointer-events: none;
}

.scroll-hint .scroll-hint-img {
  display: block;
  width: 24rem;
  object-fit: contain;
  animation: scrollHintBounce 1.5s ease-in-out infinite;
}

@media (min-width: 769px) {
  .scroll-hint {
    display: none;
  }
}

@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-15px);
  }
}



/*************************************************
  共通スタイル
***************************************************/

.color-accent {
  color: var(--color-wine-red);
  font-weight: bold;
}

.under-line-cream {
  background: linear-gradient(transparent 60%, var(--color-cream) 60%);
}

.column-inner{
  width: 100%;
  max-width: 1348px;
  padding-inline: 24px;
  margin-inline: auto;
}


.column-min-inner{
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

.en-text{
  font-size: 7.8rem;
  letter-spacing: 0.03em;
  font-style: italic;
}

@media (max-width: 768px) {
  .en-text{
    font-size: 4.3rem;
    letter-spacing: normal;
  }
}

@media (max-width: 390px) {
  .en-text{
    font-size: 3.8rem;
  }
}

.ja-text{
  margin-top: 1.7rem;
  font-size: 3.6rem;
  letter-spacing: 0.08em;
  line-height: calc(40 / 36);
}

@media (max-width: 768px) {
  .ja-text{
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}
@media (max-width: 380px) {
  .ja-text{
    font-size: 1.2rem;
    letter-spacing: normal;
  }
}

.column__section-mv{
  margin-top: 10rem;
}
@media (max-width: 768px) {
  .column__section-mv{
    margin-top: 4.1rem;
  }
}

body.column{
  container-type: inline-size;
}

.section-mv{
  padding-left: 5rem;
  margin-right: clamp(-100000px, calc(650px - 50cqw), -20px);
  position: relative;
}

.section-mv::before{
  content: '';
  display: block;
  width: 4.8rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0.5%;
  left: -1.5rem;
  z-index: 1;
}

.area-section-mv::before{
  background-image: url(../img/column/area-arrow.svg);
  height: 50%;
}
.station-section-mv::before{
  background-image: url(../img/column/station-arrow.svg);
  height: 40%;
}
.merit-section-mv::before{
  background-image: url(../img/column/merit-arrow.svg);
  height: 40%;
}

@media (max-width: 768px) {
  .area-section-mv::before,
  .station-section-mv::before,
  .merit-section-mv::before{
    width: 2.5rem;
    left: 0;
    height: 28rem;
    top: 0;
  }
}

@media (max-width: 420px) {
  .area-section-mv::before,
  .station-section-mv::before,
  .merit-section-mv::before{
    height: 20rem;
  }
}



@media (max-width: 768px) {
  .section-mv{
    padding-left: 2.5rem;
    margin-right: 0;
  }
}


.section-mv-img{
  width: 100%;
  height: 480px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .section-mv-img{
    height: auto;
    aspect-ratio: 301 / 281;
  }
}

.section-mv .img-wrapper{
  position: relative;
}

.section-mv .img-wrapper .top-right{
  width: fit-content;
  height: fit-content;
  bottom: 8px;
  left: auto;
  right: 5px;
  position: absolute;
}

/* @media (max-width: 1350px) {
  .section-mv .img-wrapper .top-right{
    left: 61.5%;
  }
}
 */
/* @media (max-width: 1000px) {
  .section-mv .img-wrapper .top-right{
    left: 60%;
  }
} */
@media (max-width: 768px) {
  .section-mv .img-wrapper .top-right{
    right: 6px;
    left: auto;
    bottom: auto;
    top: 3px;
    color: var(--color-black);
  }
}

/* @media (min-width: 1920px) {
  .section-mv .img-wrapper .top-right{
    left: 68%;
  }
}
 */
.section-mv .img-wrapper .bottom-right{
  width: fit-content;
  height: fit-content;
  bottom: 8px;
  left: 63%;
  position: absolute;
}

@media (max-width: 768px) {
  .section-mv .img-wrapper .bottom-right{
    right: 4px;
    left: auto;
    bottom: 4px;
  }
}

@media (min-width: 1920px) {
  .section-mv .img-wrapper .bottom-right{
    left: 68%;
  }
}


.section-mv-heading{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
}

.section-mv-heading .number{
  font-size: 18rem;
  line-height: 1;
  font-weight: 500;
  font-style: italic;
  margin-bottom: -1.5rem;
}
@media (max-width: 768px) {
  .section-mv-heading .number{
    font-size: 10rem;
  }
}
/* @media (max-width: 450px) {
  .section-mv-heading .number{
    font-size: 8rem;
  }
} */

.section-mv-heading .title{
  font-size: 3.6rem;
  line-height: calc(40 / 36);
  letter-spacing: 0.08em;
  font-weight: 500;
}
@media (max-width: 768px) {
  .section-mv-heading .title{
    font-size: 1.9rem;
  }
}
  .section-text{
    margin-top: 5.2rem;
    font-size: 2.1rem;
    line-height: calc(36 / 21);
  }

  @media (max-width: 768px) {
    .section-text{
      margin-top: 3.6rem;
      font-size: 1.2rem;
      line-height: calc(21 / 12);
    }
  }

  .section-label{
    margin-top: 9.5rem;
    display: flex;
    align-items: center;
    gap: 3.67rem;
    position: relative;
  }

  @media (max-width: 1024px) {
    .section-label{
      gap: 1rem;
      flex-direction: column;
      align-items: flex-start;
      margin-top: 4.3rem;
    }
  }




.section-label .title{
  height: 100%;
  font-size: 2.8rem;
  line-height: calc(40 / 28);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-wine-red);
  padding-right: 3.4rem;
  position: relative;
  &::before{
    content: '';
    display: block;
    width: 1px;
    height: 230%;
    transform: translateY(-30%);
    background-color: var(--color-wine-red);
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media (max-width: 1024px) {
  .section-label .title{
    width: 100%;
    padding-right: 2.4rem;
    &::before{
      width: calc(100% - 8rem);
      height: 1px;
      transform: translateY(-50%);
      background-color: var(--color-wine-red);
      position: absolute;
      top: 50%;
      right: 0;
    }
  }
}

@media (max-width: 768px) {
  .section-label .title{
    font-size: 2rem;
    &::before{
      width: calc(100% - 6.5rem);
    }
  }
}
.section-label .text{
  font-size: 2rem;
  line-height: calc(36 / 21);
}

@media (max-width: 768px) {
  .section-label .text{
    font-size: 1.4rem;
  }
}

.section-label .text:has(img){
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-label .text .fs-16{
  font-size: 1.6rem;
}
@media (max-width: 768px) {
  .section-label .text .fs-16{
    font-size: 1.2rem;
  }
}

.section-label .text img{
  width: 25%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .section-label .text img{
    width: 40%;
  }
}

@media (max-width: 500px) {
  .section-label .text img{
    width: 55%;
  }
}


/*************************************************
   column-mv 
***************************************************/

.column-mv-inner{
  position: relative;
}

.column-section-title{
  position: absolute;
  top:7.5%;
  left: 5.6vw;
  color: var(--color-white);
  font-size: 10.4rem;
  letter-spacing: 0.03em;
  font-style: italic;
}

@media (max-width: 768px) {
  .column-section-title{
    font-size: 5rem;
  }
}
.column-mv-contents{
  margin-top: 12.8rem;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 768px) {
  .column-mv-contents{
    margin-top: 6.7rem;
    max-width: 100%;
  }
}
.column-mv-contents-title{
  font-size: 2.8rem;
  letter-spacing: 0.08em;
  line-height: calc(48 / 28);
}

@media (max-width: 768px) {
  .column-mv-contents-title{
    font-size: 2rem;
  }
}

.column-mv-contents-title span{
  display: block;
}

.column-mv-contents-text{
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  line-height: calc(36 / 16);
  margin-top: 5.6rem;
}

@media (max-width: 768px) {
  .column-mv-contents-text{
    font-size: 1.4rem;
    line-height: 2.3;
    letter-spacing: normal;
    margin-top: 3.7rem;
  }
}


.column__speclialist{
  margin-top: 10.7rem;
}
@media (max-width: 768px) {
  .column__speclialist{
    margin-top: 6.7rem;
  }
}

.speclialist-title{
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 4.2rem;
 color: var(--color-wine-red);
 &::before,
 &::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-wine-red);
 }
}

@media (max-width: 768px) {
  .speclialist-title{
    gap: 2.5rem;
    &::before,
    &::after{
      height: 0.5px;
      margin-top: 0.5rem;
    }
  }
}

.speclialist-title span{
  display: block;
  width: fit-content;
  font-size: 3rem;
  letter-spacing: 0.03em;
  font-style: italic;
}

@media (max-width: 768px) {
  .speclialist-title span{
    font-size: 2.5rem;
  }
}
.speclialist-contents-item{
  margin-top: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-wine-red);
}
@media (max-width: 768px) {
  .speclialist-contents-item{
    margin-top: 3rem;
    padding-bottom: 3rem;
  }
}


.speclialist-item{
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 5.1rem;
}
@media (max-width: 768px) {
  .speclialist-item{
    width: 100%;
    flex-direction: column;
    gap: 2.6rem;
  }
}


.specialist-item-image{
  flex: 0 0 16rem;
}
@media (max-width: 768px) {
  .specialist-item-image{
    flex: 1 1 auto;
    width: 47.2%;
    margin-inline: auto;
  }
}


.specialist-item-body{
  flex: 1 1 auto;
}

.speclialist-item-title{
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(36 / 26);
}
@media (max-width: 768px) {
  .speclialist-item-title{
    font-size: 1.3rem;
    line-height: calc(24 / 13);
  }
}

.speclialist-item-title .name{
  display: inline-block;
  font-size: 2.4rem;
  line-height: calc(36 / 32);
}

@media (max-width: 768px) {
  .speclialist-item-title .name{
    font-size: 1.6rem;
    line-height: calc(24 / 20);
  }
}

.speclialist-item-text{
  font-size: 1.6rem;
  line-height: calc(30 / 20);
  margin-top: 2.8rem;
  /* font-weight: bold; */
}

@media (max-width: 768px) {
  .speclialist-item-text{
    font-size: 1.1rem;
    line-height: calc(18 / 11);
    margin-top: 1.75rem;
  }
}



/*speclialist-summary*/

.speclialist-summary{
  margin-top: 12.6rem;
  width: 100%;
  padding-block: 6rem 6.5rem;
  padding-inline: 2rem;
  position: relative;
  border: 1px solid var(--color-gold);
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/column/top-summary-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media (max-width: 768px) {
  .speclialist-summary{
    margin-top: 3rem;
    padding-block: 3.3rem 3.75rem;
    &::before{
      background-image: url(../img/column/top-summary-bg-sp.webp);
    }
  }
}

.speclialist-summary-title{
  font-size: 3rem;
  letter-spacing: 0.03em;
  font-style: italic;
  text-align: center;
}
@media (max-width: 768px) {
  .speclialist-summary-title{
    font-size: 2.5rem;
  }
}

.speclialist-summary-text{
  font-size: 2rem;
  line-height: calc(42 / 22);
  margin-top: 4.8rem;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 768px) {
  .speclialist-summary-text{
    font-size: 1.2rem;
    line-height: calc(19 / 12);
    margin-top: 1.5rem;
  }
}

.speclialist-summary-list{
  margin-top: 4.2rem;
  width: 68rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .speclialist-summary-list{
    width: fit-content;
    margin-inline: auto;
    margin-top: 2.5rem;
    align-items: flex-end;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .speclialist-summary-list ii:nth-child(1) .speclialist-summary-item {
    width: 22.6rem;
  }
  
  .speclialist-summary-list ii:nth-child(2) .speclialist-summary-item {
    width: 25.1rem;
  }
  
  .speclialist-summary-list ii:nth-child(3) .speclialist-summary-item {
    width: 20.6rem;
  }
}

.speclialist-summary-item {
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.speclialist-summary-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.speclialist-summary-item:hover {
  opacity: 0.7;
}

/*************************************************
   area-contents 
***************************************************/

.column__area{
  margin-top: 18.5rem;
  position: relative;
  width: 100%;
  padding-block: 5rem 18rem;
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/column/area-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media (max-width: 768px) {
  .column__area{
    margin-top: 8.5rem;
    padding-block: 4rem 6.4rem;
  }
}

.top-area-title{
  margin-top: -10.5rem;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .top-area-title{
    margin-top: -6.5rem;
  }
}

.top-area-text{
  margin-top: 2.4rem;
  font-size: 2.2rem;
  line-height: calc(42 / 22);
  letter-spacing: 0.08em;
  font-weight: bold;
}
@media (max-width: 768px) {
  .top-area-text{
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: calc(27 / 14);
    letter-spacing: normal;
  }
}


.area__contents-list{
  max-width: 95%;
  margin-left: auto;
  margin-top: 7.2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 5.5%;
}

@media (max-width: 768px) {
  .area__contents-list{
    margin-top: 3.6rem;
    grid-template-columns: 1fr;
    gap: 4.1rem;
    max-width: 100%;
    margin-left: 0;
  }
}

.area__contents-item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.area__contens-title{
  width: 65%;
}
@media (max-width: 768px) {
  .area__contens-title{
    width: 80%;
  }
}

.area__contens-text{
  font-size: 1.6rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .area__contens-text{
    margin-top: 1.5rem;
    font-size: 1.2rem;
    line-height: calc(21 / 12);
  }
}

.area__contents-item:not(:first-child) .area__contens-text{
  padding-bottom: 1.7rem;
}

.area__contents-item .img-wrapper{
  margin-top: 7.1rem;
}
@media (max-width: 768px) {
  .area__contents-item .img-wrapper{
    margin-top: 2.5rem;
  }
}


/*************************************************
   station-contents 
***************************************************/

.station-contents{
  margin-top: 7.7rem;
}
@media (max-width: 768px) {
  .station-contents{
    margin-top: 6.2rem;
  }
}

.station__mv-text .title{
  display: flex;
  flex-direction: column;
}

.station__mv-text .title .min-text{
  font-size: 2.8rem;
  line-height: calc(36 / 28);
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .station__mv-text .title .min-text{
    font-size: 1.8rem;
    line-height: calc(22 / 18);
  }
}

@media (max-width: 450px) {
  .station__mv-text .title .min-text{
    font-size: 1.4rem;
    line-height: calc(20 / 15);
  }
}
.station__mv-text .title .large-text{
  font-size: 3.6rem;
  line-height: calc(40 / 36);
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .station__mv-text .title .large-text{
    font-size: 2rem;
    line-height: calc(24 / 20);
  }
}


.station__mv-text .title .large-text .av-40{
  letter-spacing: -0.04em;
}



.station__mv-text{
  margin-top: 5.8rem;
}

@media (max-width: 768px) {
  .station__mv-text{
    margin-top: 2.5rem;
  }
}


.station__graph{
  margin-top: 3.6rem;
  position: relative;
}

.station__graph-body{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

@media (max-width: 1100px) {
  .station__graph-body{
    position: relative;
    top: 0;
    right: 0;
    width: 75%;
    margin-inline: auto;
  }
}


@media (max-width: 768px) {
  .station__graph-body{
    width: 100%;
  }
}

.station__graph-title{
  width: 55%;
}
.station__graph-title img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .station__graph-title{
    width: 70%;
  }
}

.station__graph-text{
  margin-top: 1.5rem;
  font-size: 1.6rem;
  line-height: calc(22 / 16);
}

@media (max-width: 768px) {
  .station__graph-text{
    margin-top: 1rem;
    font-size: 1.2rem;
    line-height: calc(21 / 12);
  }
}

@media (max-width: 1100px) {
  .station__graph-img{
    margin-top: 2rem;
    width: 55%;
    margin-inline: auto;
  }
}

@media (max-width: 500px) {
  .station__graph-img{
    width: 100%;
  }
}



.station__contents-items{
  width: 100%;
  margin-top: 6.8rem;
  display: flex;
  gap: 4.8rem;
}

@media (max-width: 768px) {
  .station__contents-items{
    margin-top: 2.5rem;
    flex-direction: column;
    gap: 2.4rem;
  }
}

.station__contents-item--list{
  flex: 1 1 auto;
}



.station__contents-item--img{
  flex: 0 0 50%;
}

@media (max-width: 768px) {
  .station__contents-item--img{
    flex: 1 1 auto;
  }
}



.station__contents-item--list .station-list-img{
  width: 85%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .station__contents-item--list .station-list-img{
    width: 75%;
  }
}

@media (max-width: 500px) {
.station__contents-item--img .img-wrapper{
    width: 70%;
    margin-inline: auto;
  }
}



.station__contents-item--img .station-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 500px) {
  .station__contents-item--img .station-img.fit-img{
    width: 100%;
    aspect-ratio: 250 / 132;
    max-height: 132px;
  }
}

.station__contents-point{
  margin-top: 4.8rem;
}
@media (max-width: 768px) {
  .station__contents-point{
    margin-top: 4rem;
  }
}

.station__contents-point img{
  width: 100%;
  height: auto;
  object-fit: cover;
}


/*************************************************
   asset-contents 
***************************************************/



.column__asset{
  margin-top: 14.9rem;
  position: relative;
  width: 100%;
  padding-block: 5rem 12rem;
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/column/merit-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media (max-width: 768px) {
  .column__asset{
    margin-top: 6.5rem;
    padding-block: 4rem 7rem;
  }
}



.merit__contents{
  margin-top: 10.3rem;
}
@media (max-width: 768px) {
  .merit__contents{
    margin-top: 4.6rem;
  }
}

.merit__title-01{
  margin-top: 9.5rem;
  width: 23.5%;
}

@media (max-width: 768px) {
  .merit__title-01{
    margin-top: 6.1rem;
    width: 40%;
  }
}
@media (max-width: 450px) {
  .merit__title-01{
    width: 55%;
  }
}

.merit__text{
  margin-top: 2.4rem;
  font-size: 1.6rem;
  line-height: calc(22 / 16);
  letter-spacing: 0.02em;
}

.merit__text:has(> span) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.merit__text .caption {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
  .merit__text{
    margin-top: 1.6rem;
    font-size: 1.2rem;
    line-height: calc(21 / 12);
  }
  .merit__text .caption {
      font-size: 1.0rem;
  }
}

.merit__text .color-accent{
  color: var(--color-wine-red);
  font-weight: bold;
}




.merit__item-image01{
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .merit__item-image01{
    margin-top: 2rem;
  }
}


.merit__title-02{
  margin-top: 10rem;
  width: 23.5%;
}

@media (max-width: 768px) {
  .merit__title-02{
    margin-top: 5rem;
    width: 40%;
  }
}
@media (max-width: 450px) {
  .merit__title-02{
    width: 50%;
  }
}

.merit__item-image02{
  margin-top: 5rem;
}
@media (max-width: 768px) {
  .merit__item-image02{
    margin-top: 3rem;
  }
}


.merit__item-contents{
  margin-top: 5rem;
  display: flex;
  justify-content: space-between;
  gap: 5%;
}
@media (max-width: 768px) {
  .merit__item-contents{
    margin-top: 3rem;
    flex-direction: column;
    gap: 2rem;
  }
}

.merit__item-contents-body{
  flex: 0 0 46.5%;
}
@media (max-width: 768px) {
  .merit__item-contents-body{
    flex: 1 1 auto;
  }
}

.merit__title-03{
  width: 85%;
}

@media (max-width: 768px) {
  .merit__title-03{
    width: 100%;
  }
}

.merit__item-contents .img-wrapper{
  margin-top: 5rem;
}
@media (max-width: 768px) {
  .merit__item-contents .img-wrapper{
    margin-top: 0;
    width: 100%;
  }
}


/*************************************************
   summary-contents 
***************************************************/


.column__summary{
  padding-block: 12rem;
  position: relative;
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/column/summary-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media (max-width: 768px) {
  .column__summary{
    padding-block: 6rem;
    &::before{
      background-image: url(../img/column/summary-bg-sp.webp);
    }
  }
}

.summary__heading{
  font-style: italic;
  font-size: 5rem;
  letter-spacing: 0.03em;
  text-align: center;
}
@media (max-width: 768px) {
  .summary__heading{
    font-size: 2.5rem;
  }
}


.summary__list{
  margin-top: 8.3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
}

@media (max-width: 768px) {
  .summary__list{
    margin-top: 4.6rem;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.summary__item-heading{
  width: 95%;
  display: grid;
  place-items: center;
}

.summary__item:nth-of-type(2) .summary__item-heading img{
  width: 81%;
  margin-inline: auto;
}


@media (max-width: 768px) {
  .summary__item-heading img{
    width: 100%;
  }
}

@media (max-width: 768px) {
  .summary__item-heading:nth-child(2) img{
    width: 90%;
  }
}


.summary__item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7.63rem;
}

@media (max-width: 768px) {
  .summary__item{
    gap: 3rem;
  }
}


.summary__contents{
  margin-top: 10rem;
  padding-block: 5.3rem 6.7rem;
  border-top: 1px solid var(--color-wine-red);
  border-bottom: 1px solid var(--color-wine-red);
}

@media (max-width: 768px) {
  .summary__contents{
    margin-top: 4.6rem;
    padding-block: 3.2rem;
  }
}

.summary__contents-text{
  font-size: 2.4rem;
  line-height: calc(42 / 24);
  letter-spacing: 0.08em;
  text-align: center;
}

@media (max-width: 768px) {
  .summary__contents-text{
    font-size: 1.3rem;
    line-height: calc(23 / 13);
    letter-spacing: 0.04em;
  }
}