@charset "UTF-8";

/*----- reset -----*/
body,h1,h2,h3,h4,h5,p,ul,li,ol,dl,dt,dd,figure,button {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  list-style-type: '';
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  border:none;
  color:inherit;
}

a { 
  color: inherit;
  text-decoration: none;
}

img{
  max-width:100%;
  width: 100%;
	height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

table{
	border-collapse: collapse;
	table-layout: fixed;
}

iframe{
	vertical-align: bottom;
  width: 100%;
  height: 100%;
}

@media (scripting: none) {
  .loading {
    display: none;
  }
}


/*----- common -----*/
*{
  box-sizing: border-box;
}

body {
    font-family: neue-haas-grotesk-display, dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #fff;
  background-color: #E5C0B2;
}

/* コンテンツ量が少ないときにフッターを下にする */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

}

.en-text{
  font-weight: 400;
  font-style: normal;
  font-family: "Roboto", sans-serif;
}

.inner-l{
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  width: calc(100% - 40px);
}

.inner-s{
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
  width: calc(100% - 40px);
}

.pc-only{
	display: none;
}

.sec-heading{
  font-size: 44px;
  text-align: center;
  letter-spacing: 0.1em;
}

/*------ 下線付きのリンク -----*/
.link--underline{
  width: 240px;
  border-bottom: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 14px;
  font-weight: 500;
  font-size: 16px;
}

.link--underline a{
  display: inline-block;
  font-size: 16px;
}

.link--underline__icon{
  width: 7px;
}

/*----- ドロップダウン ----*/
.dropdown{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border: 1px solid #000; */
  cursor: pointer;
}

.dropdownbody{
  font-size: 13px;
  display: none;
}

/* プラスマーク */
.plus {
  display: inline-block;
  color: #fff;
  line-height: 1;
  width: 12px;
  height: 1px;
  background: currentColor;
  position: relative;
  border-radius: 12px;
  cursor: pointer;
}

.plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
  transition: transform .4s;
}

.plus.active::before {
  transform: rotate(0deg);
}

/*----- 製品共通パーツ -----*/
 /* 商品名 */
.product__name{
  /* color:red; */
  font-size: 20px;
  font-weight: bold;
}

/* 商品名英字 */
.product__en-name{
  font-size: 20px;
  /* color:blue; */
  letter-spacing: 0.2em;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

/* 値段 */
.product__price{
  font-size: 13px;
}

/* 商品のコピー特特大サイズ */
.product__xxl-copy{
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* 商品のコピー特大サイズ */
.product__xl-copy{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.9;
}

/* 商品のコピー大サイズ */
.product__l-copy{
  font-size: 20px;
  font-weight: bold;
  line-height: 1.95;
  letter-spacing: 0.03em;
}

/* 商品のコピー中サイズ */
.product__m-copy{
  font-size: 20px;
  font-weight: bold;
  line-height: 1.95;
  letter-spacing: 0.03em;
}

/* 商品のコピー英字 */
.product__en-copy{
  font-size: 18px;
  font-weight: 700;
  display: block;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.2em;
}

/* 商品のポイントのテキスト */
.product__point-desc{
  font-size: 14px;
  line-height: 2;
}

/* 商品の「point」というとこ */
.product__point-heading{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8.5px;
}

.product__point-heading::before{
  content: "";
  background-color: #fff;
  width: 30px;
  height: 1px;
  display: inline-block;
}

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

  .sp-only{
    display: none;
  }

  .dropdownbody{
    font-size: 15px;
  }

  .plus{
    width: 17px;
    height: 2px;
  }

  /* 商品名 */
  .product__name{
    font-size: 28px;
  }

  /* 商品名英字 */
  .product__en-name{
    font-size: 32px;
  }

  /* 値段 */
  .product__price{
    font-size: 16px;
  }
  
  /* 商品のコピー特特大サイズ */
  .product__xxl-copy{
    font-size: 35px;
    letter-spacing: 0.06em;
  }

  /* 商品のコピー特大サイズ */
  .product__xl-copy{
    font-size: 28px;
    letter-spacing: 0.06em;
    line-height: 1.7;
  }

  /* 商品のコピー大サイズ */
  .product__l-copy{
    font-size: 26px;
    letter-spacing: 0.06em;
    line-height: 1.7;
  }

  /* 商品のコピー中サイズ */
  .product__m-copy{
    font-size: 22px;
  }

  /* 商品のコピー英字 */
  .product__en-copy{
    font-size: 18px;
  }

  /* 商品のポイントのテキスト */
  .product__point-desc{
    font-size: 16px;
    line-height: 2.5;
  }

  /* 商品の「point」というとこ */
  .product__point-heading{
    font-size: 14px;
  }

}

@media (min-width: 992px) {
    /*------ 下線付きのリンク -----*/
    .link--underline{
      margin-left: 0;
    }
  

}

/* -------------------------------------------- */
/* ヘッダー */
/* -------------------------------------------- */
.header{
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 11;
  transition: background-color .2s;
}

.header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}

.header .site-logo{
  width: 146px;
}

.header-link{
  display: flex;
  align-items: center;
  gap: 12px;
}

/*------ アイコン -----*/
.header-link__links{
  display: inline-block;
}

.header-link__links.--glass{
  width: 17px;
}

.header-link__links.--person{
  width: 14px;
}

.header-link__links.--cart{
  width: 32px;
}

/* バーガーメニュー */
.burger{
  position: relative;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  place-content: center;
  z-index: 5;
  width: 20px;
  height: 20px;
  top: -3px;
}

/* バー */
.bar,
.bar::before,
.bar::after{
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  transition: transform 0.3s;
}

.bar{
  display: grid;
}

.bar::before,
.bar::after{
  content: "";
  grid-area: 1/1
}

.bar::before {
  transform: translateY(-6px);
}

.bar::after {
  transform: translateY(6px);
}

/* メニュー */
.header-menu{
  display: none;
  color:#fff;
  width: 100%;
  background-color: #4FB0C1;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4;
  overflow-y: auto;
  letter-spacing: 0.1em;
}

.header-menu__wrap{
  width: 100%;
}

.header-menu__inner{
  padding: 80px 0px;
  width: calc(100% - 80px);
  max-width: 934px;
  margin-inline: auto;
}

.header-menu__logo-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-menu__logo{
  width: 205px;
}

.header-menu__instaicon{
  width: 22px;
  display: inline-block;
  margin-top: 20px;
}

.header-menu-list{
  display: flex;
  flex-direction: column;
  --margin: 30px;
  gap: var(--margin);
  margin-top: var(--margin);
}

.header-menu-list__dropdown-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}

.header-menu-list__dropdown-list .footer-nav-list__dropdown-item{
  padding: 0;
}

.header-menu-list__btn-wrap{
  display: flex;
  flex-direction: column;
  gap: var(--margin);
}

.header-menu .link--underline{
  width: 100%;
}
.header-menu .link--underline a{
  font-size: 14px;
}

/* activeがついた時 */
.is-active {
  .burger {
    .bar{
      background-color: transparent;
  
      &::before {
        transform: rotate(45deg);
      }
      
      &::after {
        transform: rotate(-45deg);
      }
    }
  }

  .header-menu{
    transform: translateX(0);
  }

}

body.is-active{
  overflow: clip;
}

/* .header.add-bg{
  background-color:#4FB0C1;
} */


@media (min-width: 768px) {
  .header .site-logo{
    width: 190px;
  }

  /*------ アイコン -----*/
  .header-link__links.--glass{
    width: 22px;
  }

  .header-link__links.--person{
    width: 18px;
  }

  .header-link__links.--cart{
    width: 42px;
  }

  /* メニュー */
  .header-menu__wrap{
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .header-menu__inner{
    padding: 0;
    
    display: flex;
    justify-content: space-between;
  }

  .header-menu__logo-wrap{
    align-items: start;
  }

  .header-menu__logo{
    width: 265px;
  }

  .header-menu__instaicon{
    margin-top: 40px;
  }

  .header-menu-list{
    --margin: 22px;
    gap: var(--margin) 0;
    margin-top: 0;
    height: 212px;
    height: 280px;
    flex-wrap: wrap;
    padding-right: 88px;
  }


  .header-menu .dropdownbody{
    display: block;
  }

  .header-menu-list__dropdown-list{
    font-size: 15px;
    gap:13px;
  }

  .header-menu  .plus{
    display: none;
  }

  .header-menu .link--underline{
    width: 206px;
    margin: 0;
  }

  .header-menu-btn-wrap{
    display: flex;
    gap: 64px;
    margin-top: 30px;
  }

  .header-menu-btn-wrap a{
    width: 206px;
  }


}


/* -------------------------------------------- */
/* footer */
/* -------------------------------------------- */
.footer{
  position: relative;
  z-index: 0;
}

.footer.--about{
  position: relative;
  top: 10px;
  z-index: 1;
}

.footer-inner{
  position: relative;
}

/*----- フッターの上側 -----*/
.footer-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 210px;
  padding-bottom: 200px;
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  margin-top: -430px;
}

/* 円の背景 */
.footer-round{
  width: calc(580 / 375 * 100vw);
  height: calc(600 / 375 * 100vw);
  min-height: 600px;
  min-width: 580px;
  display: block;
  background-color: #4FB0C1;
  border-radius: 50%;
  position: absolute;
  top: 0;
  z-index: -1;
}

.footer-text-l{
  font-size: 38px;
  font-weight: bold;
  letter-spacing: 0.09em;
}

/* サイトロゴ */
.footer-top-logo{
  width: 222px;
  margin-left: -20px;
  margin-top: 16px;
}

/*----- フッターの下側 -----*/
.footer-bottom{
  letter-spacing: 0.1em;
  background-color: #4FB0C1;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-bottom: 60px;
}

/* 区切り線 */
.footer-bottom::before{
  content: "";
  width: 100%;
  margin-inline: auto;
  height: 1px;
  display: block;
  margin-bottom: 48px;
  background-color: #fff;
}

/*----- リンク集 -----*/
.footer-bottom-links{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  gap: 20px
}

/* サイトロゴ */
.footer-bottom-site-logo{
  text-align: center;
  width: 206px;
  display: inline-block;
}

/* インスタのアイコン */
.icon--insta img{
  width: 22px;
}

/*----- フッターナビ -----*/
.footer-nav-list{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-weight: 500;
  padding: 20px 20px 40px;
  line-height: 1;
  font-size: 14px;
}

.footer-nav-list__item{
  position: relative;
  padding: 15px 0;
}

/* スペース用 */
.pc-link-space{
  display: none;
  visibility: hidden;
}

/* フッターのドロップダウン */
.footer-nav-list__dropdown{
  font-size: 13px;
  display: none;
}

.footer-nav-list__dropdown-item{
  padding: 10px 8px;
}

.footer-nav-list__dropdown-item a{
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 線 */
.footer-nav-list__dropdown-item a::before{
  content: "";
  background-color: #95CFD9;
  width: 8px;
  height: 1px;
  display: block;
}

/*----- 著作権 -----*/
.footer-copy{
  text-align: center;
  display: block;
  font-size: 10px;
  font-weight: 500;
  width: 100%;
}

@media (min-width: 768px) {
  .footer{
    position: relative;
  }
  
  /*----- フッターの上側 -----*/
  .footer-top{
    padding-top: 310px;
    padding-top: calc(310 / 1360 * 100vw);
    padding-bottom: 200px;
    padding-bottom: calc(200 / 1360 * 100vw);
    margin-top: -660px;
  }
  
  /* 円の背景 */
  .footer-round{
    width: calc(580 / 375 * 100vw);
    height: calc(600 / 375 * 100vw);
    width: calc(1586 / 1360 * 100vw);
    height: calc(1586 / 1360 * 100vw);
  }
  
  .footer-text-l{
    font-size: 52px;
  }
  
  /* サイトロゴ */
  .footer-top-logo{
    width: 300px;
    margin-left: -30px;
    margin-top: 20px;
  }
  
  /*----- フッターの下側 -----*/
  .footer-bottom{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
    padding-bottom: 80px;
  }
  
  /* 区切り線 */
  .footer-bottom::before{
    margin-bottom: 70px;
  }
  
  /*----- リンク集 -----*/
  .footer-bottom-links{
    align-items: start;
    gap: 40px;
    padding-left: 40px;
  }
  
  /* サイトロゴ */
  .footer-bottom-site-logo{
    width: 265px;
  }
  
  /*----- フッターナビ -----*/
  .footer-nav-list{
    padding: 0 40px 0 0px;
    height: 270px;
    gap: 33px 20px;
  }
  
  .footer-nav-list__item{
    padding: 0;
    min-width: 200px;
  }

  /* スペース用 */
  .pc-link-space{
    display: block;
  }

  /* プラスマーク */
  .footer-nav-list__item .plus {
    display: none;
  }
  
  /* フッターのドロップダウン */
  .footer-nav-list__dropdown{
    display: block;
  }

  .footer-nav-list__dropdown ul{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: -10px;
  }
  
  .footer-nav-list__dropdown-item{
    padding: 0;
  }
  
  /* 線 */
  .footer-nav-list__dropdown-item a::before{
    display: block;
  }
  
  /*----- 著作権 -----*/
  .footer-copy{
    text-align: left;
    padding-left: 40px;
    margin-top: -14px;
  }
  
}


/* -------------------------------------------- */
/* mv */
/* -------------------------------------------- */
.mv{
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.mv-content{
  /* max-width: 940px; */
  margin-inline: auto;
  width: calc(100% - 30px);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  padding-left: 34px;
  gap: 200px;
  letter-spacing: 0.09em;
}

/* 大きいテキスト */
.mv-text--l{
  font-size: calc(42 / 375 * 100vw);
}

/* 小さいテキスト */
.mv-text--s{
  font-size: calc(17 / 375 * 100vw);
  line-height: 1.75;
}

.mv-content .site-logo{
  width: 148px;
  margin-top: 12px;
}

/* 円 */
.mv-round {
  width: 304px;
  height: 304px;
  width: calc(334 / 375 * 100vw);
  height: calc(334 / 375 * 100vw);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%);
  position: absolute;
  z-index: -1;
}

#opv-wrap {
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: 21;
  overflow: hidden;
}

#opv-wrap video{
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}


/* スライド */
.swiper{
  height: 100%;
}

.swiper-slide{
  width: 100%;
  height: auto;
}

.swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .mv-content{
    flex-direction: row;
    align-items: center;
    padding-left: 0px;
    gap: 0;
  }
  
  /* 大きいテキスト */
  .mv-text--l{
    font-size: 80px;
  }
  
  /* 小さいテキスト */
  .mv-text--s{
    font-size: 22px;
    margin-top: 400px;
  }
  
  .mv-content .site-logo{
    width: 190px;
    margin-top: 16px;
  }
  
  /* 円 */
  .mv-round{
    width: 790px;
    height: 790px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }


}

/* -------------------------------------------- */
/* about */
/* -------------------------------------------- */
.top-about{
  position: relative;
  background-color: #D77263;
  overflow: hidden;
  width: 100%;
}

.top-about::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 413.6%;
  background-color: #324266;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 0;
  left: calc((-617 / 375) * 100vw);
  bottom: 0;
}

.top-about-inner{
  padding-top: 90px;
  padding-bottom: 90px;
}

.column2{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-about-article{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.top-about-article.--top{
  flex: 1;
}

.top-about-article.--bottom{
  margin-top: 60px;
}

.top-about__heading{
  font-size: 26px;
  line-height: 1.7;
  font-weight: bold;
}

.top-about__text{
  font-size: 13px;
  line-height: 2.66;
  letter-spacing: 0.05em;
  margin-top: 32px;
}

.top-about__image{
  width: 226px;
  margin-top: 60px;
}

.top-about-article .view-more{
  margin-top: 44px;
}

@media (min-width: 768px) {
  .top-about::before {
    width: 120%;
    right: 0;
    top: 0;
    right: 0;
    left: auto;
    transform: translateX(0);
  }
  
  .top-about-inner{
    padding-top: 220px;
    padding-bottom: 230px;
  }
  
  .column2{
    flex-direction: row;
    align-items: stretch;
  }

  .top-about-article{
    align-items: start;
  }
  
  .top-about-article.--top{
    text-align: left;
    margin-left: 70px;
  }
  
  .top-about-article.--bottom{
    margin-top: 190px;
    text-align: left;
    padding-left: 420px;
  }
  
  .top-about__heading{
    font-size: 35px;
  }
  
  .top-about__text{
    font-size: 16px;
    line-height: 2.5;
    letter-spacing: 0.06em;
    margin-top: 60px;
    margin-top: 0px;
  }

  .top-about-article.--bottom .top-about__text{
    margin-top: 60px;
  }
  
  .top-about__image{
    width: 422px;
    margin-right: 32px;
    margin-top: 0;
  }

  .top-about-article .view-more{
    margin-top: 0px;
  }

}


/* -------------------------------------------- */
/* 固定の背景 */
/* -------------------------------------------- */
.fixed-bg-wrap {
  position: relative;
  clip-path: inset(0 0 0 0);
  width: 100%;
  height: 230px;
  /* position: sticky; */
  top: 0;
}


.fixed-bg {
  width: 100%;
  height: 100%;
  background-image: url(https://d2w53g1q050m78.cloudfront.net/4weeksfemmecojp/uploads/image-sp.webp?1735185048901);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
}


@media (min-width: 768px) {
  
  .fixed-bg-wrap {
    height: 420px;
    position: relative;
  }

  .fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(https://d2w53g1q050m78.cloudfront.net/4weeksfemmecojp/uploads/image-pc.webp?1735185049026);
  }

}




/* -------------------------------------------- */
/* top-products */
/* -------------------------------------------- */
.bg-lightblue{
  background-color: #4FB0C1;
}

.bg-orange{
  background-color: #D77263;
}

.bg-product-pink{
  background-color: rgb(223, 193, 181);
}

.bg-navy{
  background-color: #324266;
}

.top-product{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-bottom: 100px;
  position: relative;
}

/* テキストボックス */
.top-product .product__info{
  text-align: center;
  margin-top: 60px;
}

/* ※ */
sup{
  margin-left: -16px;
  font-size: 12px;
}

/* 商品名 */
.top-product .product__name{
  margin-top: 40px;
}

/* 値段 */
.top-product .product__price{
  display: inline-block;
  margin-top: 16px;
}

/* 注意書き */
.product__note{
  font-size: 10px;
  text-align: right;
  padding-right: 20px;
  margin-top: 56px;
  margin-bottom: -70px;
}

/* リンク */
.product-link-wrap{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}

@media (min-width: 992px) {
  
  .top-product{
    padding-right: calc(50vw - 50%);
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .top-product.--reverse{
    padding-right: 0;
    padding-left: calc(50vw - 50%);
    flex-direction: row-reverse;
  }
  
  /* 商品画像 */
  .top-product .product__image{
    width: 51%;
  }
  
  /* テキストボックス */
  .top-product .product__info{
    text-align: left;
    margin-top: 0px;
  }
  
  /* 商品名 */
  .top-product .product__name{
    margin-top: 56px;
  }
  
  /* 値段 */
  .top-product .product__price{
    margin-top: 12px;
  }
  
  /* 注意書き */
  .product__note{
    padding-right: 0px;
    margin-top: 120px;
    margin-bottom: 0px;
  }

  /* リンク */
  .product-link-wrap{
    flex-direction: row;
    gap: 30px;
    margin-top: 70px;
  }

}

/* -------------------------------------------- */
/* top-news */
/* -------------------------------------------- */
.top-news{
  background-color: #dfb1a4;
}

.top-news-inner{
  max-width: 900px;
  padding-top: 100px;
  padding-bottom: 530px;
}

:root{
  --padding: 24px;
}

.news-wrap{
  display: flex;
  flex-direction: column;
  gap: var(--padding);
  margin-top: 50px;
  /* padding-bottom: 60px; */
}

.news__item{
  border-bottom: 1px solid #EDD3C8;
  padding-bottom: var(--padding);
  display: flex;
  gap: 36px;
}

.news__heading{
  font-size: 13px;
  line-height: 1.8;
}

.news__date{
  font-size: 13px;
}

.view-more.--news{
  margin: 50px auto 0;
}


@media (min-width: 768px) {

  .top-news-inner{
    padding-top: 140px;
    padding-bottom: 780px;
  }
  
  :root{
    --padding: 30px;
  }
  
  .news-wrap{
    margin-top: 48px;
  }
  
  .news__item{
    gap: 124px;
  }
  
  .news__heading{
    font-size: 16px;
  }
  
  .news__date{
    font-size: 16px;
  }

  .view-more.--news{
    margin: 60px auto 0;
  }

}

/* -------------------------------------------- */
/* 下層ページ */
/* -------------------------------------------- */
.bg-pink{
  background-color: #E6ABBF;
}

/* Aboutページ共通 */
.about-inner{
  padding-top: 100px;
  padding-bottom: 100px;
  max-width: 980px;
}

.about-page-section .product__en-copy{
  margin-bottom: 20px;
}

/*----- ingredient -----*/
.ingredient-top{
  margin-top: 40px;
}

.ingredient-text-wrap{
  width: 100%;
}

.ingredient-image-wrap{
  width: 100%;
}

/* key ingredient */
.ingredient-keypoint{
  margin-top: 40px;
}

.ingredient .product__l-copy{
  margin-top: 32px;
}

.ingredient .product__point-desc{
  margin-top: 40px;
}

/* 醤油醸造発酵とは */
.ingredient-dropdown{
  margin-top: 40px;
}

.ingredient-dropdown__heading{
  border-bottom: 1px solid #fff;
  padding-bottom: 30px;
  margin-bottom: 30px;
  font-size: 16px;
}

.ingredient-dropdown__body{
  /* display: none; */
  line-height: 1.8;
  padding-bottom: 30px;
}

/* commitments */
.ingredient-bottom{
  margin-top: 40px;
}

/* コミットのリスト */
.ingredient-commitments-list{
  font-size: 20px;
  font-weight: bold;
  margin-top: 32px;
}

.ingredient-commitments-list__item{
  display: flex;
  align-items: center;
  gap: 7px;
}

/* チェックマーク */
.ingredient-commitments-list__item::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(img/icon/checkmark.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* 画像 */
.ingredient-image{
  margin-top: 50px;
  width: 100%;
}

/*----- fragrance -----*/
.fragrance__text{
  line-height: 2.6;
  margin-top: 40px;
}

.fragrance__image{
  margin-top: 50px;
}


/*----- background -----*/
.background{
  background-color: #E5C0B2;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.background::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 402%;
  background-color: #D77263;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: -1;
  right: 0;
  top: 12%;
}

.background-inner{
  margin-top: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  border: 1px solid #fff;
  margin-bottom: 530px;
}

.background-wrap{
  /* padding: 50px 0px; */
  max-width: 945px;
  margin-inline:  auto;
}

.background .product__xxl-copy{
  font-size: 26px;
}

.background-image-wrap{
  width: calc(265 / 375 * 100vw);
  margin-left: -20px;
  text-align: center;
  margin-top: 50px;
}

.background-text-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
}

.background__text{
  line-height: 2;
  margin-top: 40px;
}

/* 画像のキャプション */
.background__image-caption{
  font-size: 14px;
  margin-top: 25px;
  display: inline-block;
}

@media (min-width: 768px) {

  /* Aboutページ共通 */
  .about-inner{
    padding-top: 140px;
  }

  .about-page-section .product__en-copy{
    margin-bottom: 30px;
  }

  /*----- ingredient -----*/
  .ingredient-inner{
    padding-bottom: 156px;
  }

  .ingredient-top{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
  }

  .ingredient-bottom{
    display: flex;
    align-items: center;
  }

  .ingredient-text-wrap{
    width: 50%;
  }

  .ingredient-image-wrap{
    width: 50%;
  }

  /* key ingredient */
  .ingredient-keypoint{
    margin-top: 60px;
  }

  .ingredient .product__l-copy{
    margin-top: 24px;
  }

  /* 醤油醸造発酵とは */
  .ingredient-dropdown{
    margin-top: 60px;
  }

  .ingredient-dropdown__body{
    line-height: 2.1;
    padding-bottom: 50px;
  }

  /* commitments */
  .ingredient-bottom{
    margin-top: 70px;
    display: flex;
    justify-content: start;
    flex-direction: row-reverse;
    gap: 110px;
  }

  /* コミットのリスト */
  .ingredient-commitments-list{
    font-size: 26px;
  }

  .ingredient-commitments-list__item{
    gap: 10px;
  }

  /* チェックマーク */
  .ingredient-commitments-list__item::before{
    width: 25px;
    height: 25px;
  }

  /* 画像 */
  .ingredient-image{
    margin-top: 0px;
    width: 50%;
  }

  /*----- fragrance -----*/
  .fragrance-inner{
    padding-top: 140px;
    padding-bottom: 100px;
  }

  .fragrance-wrap{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
  }

  .fragrance__image{
    width: 43%;
    margin-top: 0;
  }

  .fragrance-text-wrap{
    width: 51%;
  }

  .fragrance__text{
    line-height: 2.5;
    margin-top: 40px;
  }

  /*----- background -----*/
  .background::before {
    width: 139.7%;
    right: 0;
    top: 0;
  }

  .background-inner{
    padding-top: 120px;
    padding-bottom: 120px;
    margin-top: 140px;
    margin-bottom: 800px;
  }

  .background-wrap{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .background .product__xxl-copy{
    font-size: 35px;
  }

  .background-text-wrap{
    padding-left: 0px;
    align-items: start;
    width: 53%;
  }

  .background__text{
    line-height: 2.5;
    margin-top: 60px;
  }

  .background-image-wrap{
    width: 34%;
    margin-top: 0;
    margin-left: 0;
  }

  /* 画像のキャプション */
  .background__image-caption{
    margin-top: 30px;
  }




}









/* -------------------------------------------- */
/* about-mv */
/* -------------------------------------------- */
.about-mv{
  height: 100vh;
  width: 100%;
  display: inline-block;
  position: relative;
}

.about-wrap{
  position: relative;
}

/* 画像 */
.about-mv-image{
  display: inline-block;
  width: 100%;
}

/*----- テキスト -----*/
.about-mv-text-wrap{
  letter-spacing: 0.09em;
  width: 63%;
  margin-top: -60px;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  position: absolute;
}

/*----- 大テキスト -----*/
.about-mv-text--l{
  font-size: 42px;
  font-size: clamp(42px, calc(42 / 375 *100vw), 50px);
  font-weight: bold;
  line-height: 1.4;
}

/*----- 小テキスト -----*/
.about-mv-text--s{
  font-size: 17px;
  font-size: clamp(17px, calc(17 / 375 *100vw), 22px);
  margin-top: 40px;
  font-weight: bold;
  line-height: 1.75;
}

/*----- ロゴ -----*/
.about-mv .site-logo{
  width: 148px;
  width: clamp(148px, calc(148 / 375 *100vw), 190px);
  margin-top: 12px;
}

@media (min-width: 992px) {
  .about-mv{
    height: auto;
  }

  
  .about-mv-image{
    width: 67%;
  }

  /*----- テキスト -----*/
  .about-mv-text-wrap{
    letter-spacing: 0.06em;
    width: auto;
    z-index: 1;
    top: 41%;
    left: 58%;
    transform: translateX(0%);
  }

  /*----- 大テキスト -----*/
  .about-mv-text--l{
    font-size: 50px;
    line-height: 1.4;
  }

  /*----- 小テキスト -----*/
  .about-mv-text--s{ 
    font-size: 22px;
    margin-top: 50px;
  }

  /*----- ロゴ -----*/
  .about-mv .site-logo{
    width: 190px;
    margin-top: 16px;
  }

  /* オブジェクト配置のためのオプション */
  .bg-navy-bar{
    content: "";
    width: 100%;
    height: calc(160 / 1360 * 100vw);
    background-color: #324266;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }


}

/* -------------------------------------------- */
/* approach*/
/* -------------------------------------------- */
.approach{
  background-color: #324266;
}

.approach .product__xxl-copy{
  font-size: 25px;
  line-height: 1.7;
}

.approach .product__point-desc{
  margin-top: 40px;
  letter-spacing: 0;
}

/* 下側の表 */
.approach-term-column2{
  display: flex;
  gap: 9px;
  margin-top: 90px;
}

.approach-term-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.approach-term-wrap{
  width: 50%;
  text-align: left;
}

.approach-term-list__item{
  font-size: 12px;
  padding: 6px;
  text-align: center;
  font-weight: bold;
}

.approach-term-list__item.--1{
  background-color: rgba(255, 255, 255, 0.07);
  position: relative;
}

.approach-term-list__item.--2{
  background-color: rgba(255, 255, 255, 0.14);
}

.approach-term-list__item.--3{
  background-color: rgba(255, 255, 255, 0.21);
  position: relative;
}

.approach-term-list__item.--4{
  background-color: rgba(255, 255, 255, 0.28);
}

/* 円の部分 */
.approach-term-list__item.--1 span,
.approach-term-list__item.--3 span{
  border: 2px dotted #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius:  50%;
  position: absolute;
  top: -45px;
  right:-25px;
  font-size: 12px;
  font-weight: bold;
}

/* 縦の線 */
.approach-term-list__item.--1 span::after,
.approach-term-list__item.--3 span::after{
  content: "";
  border-right: 2px dotted #fff;
  width: 2px;
  height: 85%;
  position: absolute;
  bottom: -36px;
  left: 45%;
}

.approach-term__text{
  font-size: 12px;
  line-height: 1.6;
  margin-top: 16px;
  letter-spacing: 0.05em;
}

/* 下側の表 */
.approach-figure-bottom{
  border: 1px solid #4FB0C0;
}

/* 見出し */
.approach-figure-bottom__heading{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 2px;
  position: relative;
}

/* 三角形 */
.approach-figure-bottom__heading::before{
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #324266 transparent transparent;
  border-width: 0px 15px 30px 0px;
}

.approach-figure-bottom-wrap{
  display: flex;
  align-items: start;
  gap: 7px;
  padding: 12px 8px;
  position: relative;
}

.approach-figure-bottom__content{
  flex:1;
  letter-spacing: 0.03em;
}

/* 商品名 */
.approach-figure-bottom__product-name{
  font-size: 14px;
}

/* 説明 */
.approach-figure-bottom__product-desc{
  font-size: 12px;
  margin-top: 4px;
  font-weight: bold;
}

.approach-figure-bottom-column2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:9px;
  margin-top: 15px;
}

.approach-figure-bottom.--lightblue{
  border-color: #4FB0C1;
  margin-top: 20px;
}

.approach-figure-bottom.--lightblue .approach-figure-bottom__heading{
  background-color: #4FB0C1;
}

.approach-figure-bottom.--lightblue .approach-figure-bottom__content{
  margin-left: 3px;
}

.approach-figure-bottom.--lightblue .approach-figure-bottom-wrap{
  padding: 16px;
}

.approach-figure-bottom.--lightblue .approach-figure-bottom__figure{
  width: 20px;
}

.approach-figure-bottom.--orange{
  border-color: #D77263;
}

.approach-figure-bottom.--orange .approach-figure-bottom__heading{
  background-color: #D77263;
}

.approach-figure-bottom.--orange .approach-figure-bottom__figure{
  width: 22px;
}

.approach-figure-bottom.--pink{
  border-color: #E6ABBF;
}

.approach-figure-bottom.--pink .approach-figure-bottom__heading{
  background-color: #E6ABBF;
}

.approach-figure-bottom.--pink .approach-figure-bottom__figure{
  width: 22px;
}

.approach .product__note{
  font-size: 10px;
  margin-top: 24px;
  padding-right: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .approach-inner{
    padding-bottom: 140px;
  }

  .approach .product__xxl-copy{
    font-size: 35px;
  }

  /* 下側の表 */
  .approach-term-column2{
    gap: 13px;
    margin-top: 160px;
  }
  
  .approach-term-list{
    gap: 13px;
  }
  
  .approach-term-wrap{
    text-align: center;
  }

  .approach-term-list__item{
    font-size: 18px;
    padding: 10px;
  }
  
  /* 円の部分 */
  .approach-term-list__item.--1 span,
  .approach-term-list__item.--3 span{
    border: 3px dotted #fff;
    width: 62px;
    height: 62px;
    top: -74px;
    right:-37px;
    font-size: 16px;
  }
  
  /* 縦の線 */
  .approach-term-list__item.--1 span::after,
  .approach-term-list__item.--3 span::after{
    border-right: 3px dotted #fff;
    width: 3px;
    height: 100%;
    bottom: -62px;
    left: 48%;
  }

  .approach-term__text{
    font-size: 14px;
    line-height: 2;
    margin-top: 24px;
    letter-spacing: 0.04em;
  }

  /* 見出し */
  .approach-figure-bottom__heading{
    font-size: 25px;
    padding: 6px;
  }

  /* 三角形 */
  .approach-figure-bottom__heading::before{
    border-width: 0px 22px 50px 0px;
  }

  .approach-figure-bottom-wrap{
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }

  .approach-figure-bottom__content{
    flex: initial;
    letter-spacing: 0.03em;
  }

  /* 商品名 */
  .approach-figure-bottom__product-name{
    font-size: 18px;
  }

  /* 説明 */
  .approach-figure-bottom__product-desc{
    font-size: 14px;
    margin-top: 6px;
  }

  .approach-figure-bottom-column2{
    gap:22px;
    margin-top: 20px;
  }

  .approach-figure-bottom.--lightblue{
    margin-top: 30px;
  }

  .approach-figure-bottom.--lightblue .approach-figure-bottom__content{
    margin-left: 50px;
  }

  .approach-figure-bottom.--lightblue .approach-figure-bottom__figure{
    width: 36px;
    position: absolute;
    left: 25%;
    bottom: 14%;
  }

  .approach-figure-bottom.--orange .approach-figure-bottom__figure{
    width: 40px;
  }

  .approach-figure-bottom.--pink .approach-figure-bottom__figure{
    width: 40px;
  }

  .approach .product__note{
    font-size: 12px;
  }
  

}

/* -------------------------------------------- */
/* ingredient */
/* -------------------------------------------- */




@media (min-width: 768px) {


}

/* -------------------------------------------- */
/* fragrance */
/* -------------------------------------------- */




@media (min-width: 768px) {


}

/* -------------------------------------------- */
/* background */
/* -------------------------------------------- */




@media (min-width: 768px) {


}



/* -------------------------------------------- */
/* background */
/* -------------------------------------------- */




@media (min-width: 768px) {


}


/* -------------------------------------------- */
/* animation */
/* -------------------------------------------- */
.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 2s,visibility 2s, transform 2s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.space-top {
    padding-top: 70px;   
}
.space {
    padding-bottom: 430px;
}
@media (min-width: 768px) {
    .space-top {
        padding-top: 100px;   
    }
    .space {
        padding-bottom: 680px;
    }
}

.about-mv-text-wrap.js-fadeIn {
  transform: translate(-50%, 50px);
}
.about-mv-text-wrap.scroll {
  transform: translate(-50%, 0px);
}
.u-color__btn--bg {
  background-color: #4FB0C1;
  color: #fff;
}


/* -------------------------------------------- */
/* lpへの追従バナー */
/* -------------------------------------------- */

.lp-pop {
  display: block;
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 300px;
  z-index: 20;
  opacity: 0;
  transition-duration: .5s;
}
.lp-pop.view {
  opacity: 1;  
}
.lp-pop img {
  width: 100%;   
}


.lp-pop .close {
  display: none;   
}

@media (max-width: 768px) {
  .lp-pop {
    left: 0;
    right: 0;
    bottom: 5vw;
    margin: auto;
    width: 90%;
    height: fit-content;
  }
  .lp-pop .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
    width: 10vw;
  }
}