/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ============================= ▼ 全体 ▼ == */
html {
  font-size: 62.5%;
}

/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  html {
    font-size: calc(10 * (100vw/1366));
  }
}

.mothersday_260410 {
  --color-red: #BA0D0E;
  --color-black: #242424;
  --color-bg-beige: #EBE6DF;
  --color-frame-beige: #F5F3EF;
  --color-white: #fff;
  --font-jp: "hiragino-kaku-gothic-pron", sans-serif;
  --font-en: "futura-pt", sans-serif;

  /* transform: none; */
  /* filter: none; */
  width: 100%;
  overflow-x: clip;
}

.mothersday_260410 img,
.mothersday_260410 video,
.mothersday_260410 svg {
  width: 100%;
  height: auto;
}

.mothersday_260410 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.mothersday_260410 a,
.mothersday_260410 picture {
  display: block;
}
/* ============================= ▲ 全体 ▲ == */
/* ===============================================### 
　　　　　　　　　　　　　　　共通
###=============================================== */

.font-jp{
  font-family: var(--font-jp);
  font-style: normal;
  text-align: left;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1;
}

.font-en{
  font-family: var(--font-en);
  font-style: normal;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}

.main-visual{
  background-color: var(--color-bg-beige);
}

.heading-area{
  background-color: var(--color-bg-beige);
}

.index-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttl{
  font-weight: 600;
  text-align: center;
  line-height: 1;
  color: var(--color-red);
}

.intro{
  font-weight: 300;
  text-align: center;
  line-height: 1.8;
  color: var(--color-red);
  margin: 0 auto;
}

.section_price,
.section_subttl{
  line-height: 1;
  color: var(--color-red);
}

.section_subttl{
  font-weight: 600;
}

.brand_name,
.item_name{
  text-align: center;
  color: var(--color-red);
}

.item_name{
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.item_anothername,
.item_price{
  color: var(--color-black);
  font-weight: 300;
  text-decoration: underline;
}

.item_anothername{
  letter-spacing: 0.05em;
}

.item_comment__wrapper{
  position: relative;
  background-color: var(--color-frame-beige);
}

.item_comment__wrapper::after{
  content: "";
  position: absolute;
  background-image: url(../img/svg/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.staff_profile{
  display: flex;
}

.staff_brand,
.staff_name{
  color: var(--color-red);
}

.item_comment_caption{
  line-height: 1.5;
  color: var(--color-red);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.item_comment_txt{
  line-height: 1.5;
  color: var(--color-black);
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* ___________________________ .section_2 */
.section_2 {
  background-color: var(--color-bg-beige);
}

/* ___________________________ .section_3 */
.mothersday_260410 .section_3{
  padding-bottom: 0;
}

/* ===============================================### 
　　　　　　　　　　　　　　　SP
###=============================================== */
@media screen and (max-width: 767px) {
    /* ----------------- .anchor-links */
  .anchor-links {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /* overflow-x: scroll; */
    background-color: var(--color-white);
    height: calc(80* (100vw /750));
  }

  .anchor-links li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(80* (100vw /750));
    text-decoration: none;
    font-size: calc(30* (100vw /750));
    white-space: nowrap;
    line-height: 1;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-red);
    color: var(--color-red);
    padding: 0 calc(8* (100vw /750));
  }

  .anchor-links li:nth-of-type(2n) {
    background-color: var(--color-white);
  }

  .anchor-links li:not(:last-of-type){
    border-right: var(--color-red) 1px solid;
  }

  .anchor-links li span{
    font-size: calc(18* (100vw /750));
    padding-right: calc(8 * (100vw / 750));
  }

  /*  .anchor-links end -----------------*/

  /* ----------------- .heading-area */
  .heading-area{
    padding: calc(50* (100vw /750)) calc(30* (100vw / 750)) calc(89* (100vw /750));
  }

  .lead_txt{
    background-color: var(--color-white);
    border-radius: calc(100 * (100vw /750));
    margin: 0 auto calc(80* (100vw / 750));
    padding: calc(80 * (100vw /750)) 0;
  }

  .ttl{
    font-size: calc(25* (100vw / 750));
  }

  .mv_ttl{
    line-height: 1.8;
    padding-bottom: calc(25* (100vw / 750));
  }

  .intro{
    font-size: calc(23* (100vw / 750));
    width: calc(640* (100vw / 750));
  }

  .anchorlinks_ttl{
    padding-bottom: calc(40* (100vw / 750));
  }

  .index-wrapper{
    flex-direction: column;
    gap: calc(20* (100vw / 750));
    width: calc(584* (100vw / 750));
    margin: 0 auto;
  }

  /* ----------------- .section */
  .section{
    padding: calc(86.5* (100vw / 750)) calc(30* (100vw / 750)) calc(87* (100vw / 750));
  }

  .section_ttl__wrapper{
    margin-bottom: calc(40 * (100vw /750));
  }

  .price_img{
    width: calc(102.93* (100vw / 750));
    margin-bottom: calc(5 * (100vw / 750));
  }

  .section_ttl .section_price{
    font-size: calc(65* (100vw / 750));
    padding-bottom: calc(26* (100vw / 750));
  }

  .section_ttl .section_price span{
    font-size: calc(45* (100vw / 750));
  }

  .section_subttl{
    font-size: calc(40* (100vw / 750));
  }

  .item__wrapper{
    margin: calc(44 * (100vw /750)) auto;
  }

  /* ----------------- .section.item */
  .item{
    border-top: 1px solid var(--color-red);
    width: calc(689.5 * (100vw /750));
    padding-top: calc(44* (100vw / 750));
    margin: 0 auto calc(60* (100vw / 750));
  }

  .brand_name{
    font-size: calc(25* (100vw / 750));
  }

  .item_name{
    font-size: calc(30* (100vw / 750));
    padding: calc(30* (100vw / 750)) 0 calc(30* (100vw / 750));
  }

  .item_img{
    margin-bottom: calc(20* (100vw / 750));
  }

  .item_anothername{
    font-size: calc(23* (100vw / 750));
    line-height: 1.8;
    width: calc(686 * (100vw / 750));
    margin-bottom: calc(20* (100vw / 750));
  }

  .item_price{
    font-size: calc(26* (100vw / 750));
  }

  .item_comment__wrapper{
    border-radius: calc(20* (100vw / 750));
    margin-top: calc(37.38* (100vw / 750));
    padding: calc(55.6* (100vw / 750)) calc(50* (100vw / 750)) calc(50* (100vw / 750)) calc(50* (100vw / 750));
  }

  .item_comment__wrapper::after{
    top: calc(-37.38* (100vw / 750));
    right: calc(170* (100vw / 750));
    width: calc(55.2* (100vw / 750));
    height: calc(37.38* (100vw / 750));
  }

  .staff_profile{
    display: flex;
    column-gap: calc(18* (100vw /750));
    padding-bottom: calc(25* (100vw / 750));
  }

  .staff_img{
    width: calc(120* (100vw / 750));
  }

  .staff_brand{
    font-size: calc(22* (100vw / 750));
    line-height: 2.3181818182;
  }

  .staff_name{
    font-size: calc(40* (100vw / 750));
    line-height: 1.2727272727;
  }

  .item_comment_caption{
    font-size: calc(22* (100vw / 750));
    padding-bottom: calc(25* (100vw / 750));
    /* letter-spacing: 0.1em; */
  }

  .item_comment_txt{
    font-size: calc(20* (100vw / 750));
    /* width: calc(590* (100vw / 750)); */
  }

  .check-btn{
    width: calc(584* (100vw / 750));
    margin: calc(50* (100vw / 750)) auto 0;
  }

  /* ___________________________ .section_1 */
  .section_1 .item:nth-of-type(3) .adjust_fot_twoitems{
    margin-bottom: calc(20 * (100vw / 750));
  }

  .item:nth-of-type(4){
    margin-bottom: 0;
  }

  /* ___________________________ .banner_link */
  .banner_link {
    width: calc(584* (100vw / 750));
    margin: calc(120* (100vw / 750)) auto calc(120* (100vw / 750));
  }

  /* ___________________________ .check-btn.all */
  .check-btn.all{
    margin: 0 auto calc(180* (100vw / 750));
  }

}

/* ===============================================### 
　　　　　　　　　　　　　PC
###=============================================== */
@media screen and (min-width: 768px) {
  .main-visual{
    padding-top: calc(42* (100vw /1366));
  }

  .main-visual img{
    display: block;
    width: calc(1200* (100vw /1366));
    margin: 0 auto;
  }

  /* ----------------- .heading-area */
  .heading-area{
    padding: calc(20* (100vw /1366)) 0 calc(80* (100vw /1366));
  }

  .lead_txt{
    width: calc(850* (100vw /1366));
    background-color: var(--color-white);
    border-radius: calc(100 * (100vw /1366));
    margin: 0 auto calc(80* (100vw / 1366));
    padding: calc(60 * (100vw /1366)) 0 calc(41 * (100vw /1366));
  }

  .ttl{
    font-size: calc(18* (100vw / 1366));
    padding-bottom: calc(36* (100vw / 1366));
  }

  .intro{
    font-size: calc(16* (100vw / 1366));
  }

  .index-wrapper{
    gap: calc(20* (100vw / 1366));
    width: calc(1000* (100vw / 1366));
    margin: 0 auto;
  }

  .index-wrapper .index-btn{
    width: calc(320 * (100vw /1366));
  }

  /* ----------------- .section */
  .section{
    padding: calc(75.5* (100vw / 1366)) 0 calc(80* (100vw / 1366));
  }

  .section_ttl__wrapper{
    width: calc(740* (100vw /1366));
    border-bottom: 1px solid var(--color-red);
    padding-bottom: calc(20.5 * (100vw / 1366));
    margin: 0 auto calc(50 * (100vw / 1366));
  }

  .price_img{
    width: calc(90* (100vw / 1366));
    margin-bottom: calc(9 * (100vw / 1366));
  }

  .section_ttl{
    display: flex;
    align-items: center;
    column-gap: calc(22.5* (100vw /1400));
  }

  .section_ttl .section_price{
    font-size: calc(45* (100vw / 1366));
  }

  .section_ttl .section_price span{
    font-size: calc(35* (100vw / 1366));
  }

  .section_subttl{
    font-size: calc(26* (100vw / 1366));
  }

  .item__wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(740* (100vw /1366));
    row-gap: calc(46 * (100vw / 1366));
    margin: 0 auto calc(52 * (100vw / 1366));
  }

  /* ----------------- .section.item */
  .item{
    width: calc(350 * (100vw /1366));
  }

  .brand_name{
    font-size: calc(14* (100vw / 1366));
  }

  .item_name{
    font-size: calc(20* (100vw / 1366));
    padding: calc(10* (100vw / 1366)) 0 calc(15* (100vw / 1366));
  }

  .item_img{
    margin-bottom: calc(13* (100vw / 1366));
  }

  .item_anothername{
    font-size: calc(13* (100vw / 1366));
    line-height: 1.7307692308;
    margin-bottom: calc(10* (100vw / 1366));
  }

  .item_price{
    font-size: calc(13* (100vw / 1366));
  }

  .item_comment__wrapper{
    border-radius: calc(20* (100vw / 1366));
    margin-top: calc(21.71* (100vw / 1366));
    padding: calc(27.3* (100vw / 1366)) calc(27* (100vw / 1366)) calc(24* (100vw / 1366)) calc(27* (100vw / 1366));
  }

  .item_comment__wrapper::after{
    top: calc(-21.71* (100vw / 1366));
    right: calc(87* (100vw / 1366));
    width: calc(28* (100vw / 1366));
    height: calc(21.71* (100vw / 1366));
  }

  .staff_profile{
    column-gap: calc(10* (100vw /1366));
    padding-bottom: calc(15* (100vw / 1366));
  }

  .staff_img{
    width: calc(60* (100vw / 1366));
  }

  .staff_brand{
    font-size: calc(12 * (100vw / 1366));
    line-height: 1;
    padding-top: calc(15 * (100vw / 1366));
  }

  .staff_name{
    font-size: calc(20* (100vw / 1366));
    line-height: 1.44;
  }

  .item_comment_caption{
    font-size: calc(14* (100vw / 1366));
    padding-bottom: calc(12* (100vw / 1366));
  }

  .item_comment_txt{
    font-size: calc(12* (100vw / 1366));
    /* width: calc(300* (100vw / 1366)); */
  }

  .check-btn{
    width: calc(500* (100vw / 1366));
    margin: calc(50* (100vw / 1366)) auto 0;
  }


  /* ___________________________ .section_1 */
  .section_1 .item:nth-of-type(3) .adjust_fot_twoitems{
    margin-bottom: calc(10 * (100vw / 1366));
  }

  /* ___________________________ .banner_link */
  .banner_link {
    width: calc(500 * (100vw / 1366));
    margin: calc(120* (100vw / 1366)) auto calc(120* (100vw / 1366));
  }

  /* ___________________________ .check-btn.all */
  .check-btn.all {
    margin: 0 auto calc(100 * (100vw / 1366));
  }

}


/* ============================= ▼ animation ▼ == */
.js-fade.fadeUp {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.3s 0s, transform 1.3s 0s;
}

.js-fade.fadeUp.show {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition: opacity 1.3s 0s, transform 1.3s 0s;
}

.js-fade.fadeIn{
  opacity: 0;
  transition: opacity 3s 0s, transform 3s 0s;
}

.js-fade.fadeIn.show{
  opacity: 1;
  transition: opacity 3s 0s, transform 3s 0s;
}