@import url(base.css);
@import url('https://fonts.cdnfonts.com/css/adobe-garamond-pro-2');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@300;400;700&family=Sawarabi+Mincho&display=swap');

.c5-main{
  overflow: hidden;
  background: #1b1b1b;
  position: relative;
}
.c5-main::before{
  content: "";
  display: block;
  width: 1px;
  height: 935px;
  background-image: linear-gradient(180deg ,var(--brown) 0%, var(--brown) 20%,transparent 40%,transparent 50%,var(--brown) 100%);
  transform: rotate(51deg);
  position: absolute;
  top: 0;
  left: calc(50% + 521px);
  mix-blend-mode: overlay;
  z-index: 555;
  transform-origin: top;
}
.c5-main::after{
  content: "";
  display: block;
  width: 1px;
  height: 756px;
  background-image: linear-gradient(180deg ,transparent 0%,var(--brown) 30%,var(--brown) 90%,transparent 100%);
  transform: rotate(51deg);
  position: absolute;
  top: 462px;
  left: 52%;
  mix-blend-mode: overlay;
  z-index: 555;
  transform-origin: top;
}
@media screen and (min-width:768px) and (max-width:1200px) {
  .c5-main::before{
    height: calc(935 / 1200 * 100vw);
    background-image: linear-gradient(180deg ,var(--brown) 0%, var(--brown) 20%,transparent 40%,transparent 50%,var(--brown) 100%);
    transform: rotate(51deg);
    position: absolute;
    top: 0;
    left: 93%;
  }
  .c5-main::after{
    height: calc(756 / 1200 * 100vw);
    background-image: linear-gradient(180deg ,transparent 0%,var(--brown) 30%,var(--brown) 90%,transparent 100%);
    transform: rotate(51deg);
    position: absolute;
    top: calc(462 / 1200 * 100vw);
    left: 52%;
  }
  
}
@media screen and (max-width:767px) {
  .c5-main::before{
    height: calc(760 / 750 * 100vw);
    background-image: linear-gradient(180deg ,var(--brown) 0%, var(--brown) 30%,transparent 56%,transparent 74%,var(--brown) 100%);
    transform: rotate(50deg);
    position: absolute;
    top: 0;
    left: 114%;
    opacity: 1;
  }
  .c5-main::after{
    height: calc(600 / 750 * 100vw);
    background-image: linear-gradient(180deg ,transparent 0%,var(--brown) 30%,var(--brown) 90%,transparent 100%);
    transform: rotate(50deg);
    position: absolute;
    top: calc(467 / 750 * 100vw);
    left: 52%;
    opacity: 1;
  }
  
}


/* c5-bg__line 背景の線 */

.c5-bg__line{
  background-image: url(../images/common/bg_line_pc.png);
  background-repeat: repeat-y;
  background-position: right ;
  background-size: auto;
}
@media screen and (max-width:767px) {
  .c5-bg__line{
    background-image: url(../images/common/bg_line_sp.png);
    background-size: contain;
    background-position: top center;
  }
}


/* ボタン 固定 */

.c5-text__btn{
  display: flex;
  align-items: center;
  gap: 7%;
}
.c5-text__btn div{
  width: 60px;
  position: relative;
  z-index: 1;
  display: flex;
}
.c5-text__btn div::after{
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%,-50%);
  z-index: -1;
  transition: 0.25s;
}
.c5-text__btn p{
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: var(--white);
  font-family: 'Bodoni 72 Oldstyle',serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media screen and (min-width:768px) and (max-width:1200px) {
  .c5-text__btn div{
    width: calc(60 / 1200 * 100vw);
  }  
  .c5-text__btn div::after{
    width: calc(40 / 1200 * 100vw);
    height: calc(40 / 1200 * 100vw);
  }  
  /* .c5-link:hover .c5-text__btn div::after{
    width: calc(60 / 1200 * 100vw);
    height: calc(60 / 1200 * 100vw);
  } */
}
@media screen and (max-width:767px) {
  .c5-text__btn div{
    width: calc(150 / 767 * 100vw);
  }
  .c5-text__btn div::after{
    width: calc(110 / 767 * 100vw);
    height: calc(110 / 767 * 100vw);
  }
  .c5-text__btn p{
    font-size: calc(32 / 767 * 100vw);
  } 
}
@media (any-hover:hover){
  .c5-link:hover .c5-text__btn div::after{
    width: 60px;
    height: 60px;
    background-color: var(--brown);
    border-color: var(--brown);
  }
}
/* @media (any-hover:none){
  .c5-link:active .c5-text__btn div::after{
    width: calc(120 / 767 * 100vw);
    height: calc(120 / 767 * 100vw);
    background-color: var(--brown);
    border-color: var(--brown);
  }  
} */



/* ボタン 追従 */
.c5-side-btn{
  position: fixed;
  right: 0;
  bottom: 50%;
  transform: translate(100%,0%);
  transition: 0.5s;
  z-index: 2;
}
.c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr{
  display: inline-block;
  width: 100%;
  padding: 2% 0 3%;
  background: var(--black);
  border: 1px solid var(--white);
  transition: 0.25s;
}
.c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p{
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  color: var(--white);
}
.c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p:nth-of-type(2){
  font-size: 16px;
  padding:30px 15px ;
}
.c5-side-btn.open{
  transform: translate(-1%,0%);
}

@media screen and (max-width:767px) {
  .c5-side-btn{
    position: fixed;
    bottom: 0;
    transform: translate(0%,100%);
    transition: 0.5s;
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2% 0 4%;
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr div{
    width: 28%;
    margin-right: 3%;
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p{
    letter-spacing: 0.08em;
    writing-mode:horizontal-tb ;
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p:nth-of-type(1){
    margin-right: 3%;
    font-size: calc(32 / 767 * 100vw);
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p:nth-of-type(1) .garamond{
    font-size: calc(35 / 767 * 100vw);
  }
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr p:nth-of-type(2){
    padding: 0;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-side-btn.open{
    transform: translate(0%,0%);
  }
}

.c5-text__category{
  font-style: italic;
  color: var( --brown);
}
.c5-text__name{
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
}
.c5-text__desc{
  width: 100%;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--white);
}
.c5-text__copy{
  width: 100%;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--gray);
}
.c5-text__en{
  font-weight: 400;
  background: linear-gradient(to right,#4e4e4e 0%,#e3e3e3 100%);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
}
.c5-text__ja{
  font-family:'YuMincho','Yu Mincho',serif ;
  font-style: italic;
  color: var(--brown);
}


/* c5-anc */

.c5-anc{
  margin-bottom: 80px;
}
.c5-anc .c5-anc__list{
  display: flex;
}
.c5-anc .c5-anc__list .c5-anc__item {
  width: 33.3333333333%;
}
.c5-anc .c5-anc__list .c5-anc__item:not(:last-child) {
  border-right: 1px solid #5f5f5f;
}
.c5-anc .c5-anc__item a{
  display: block;
  padding:4.5% 0 13% ;
  transition: 0.25s;
  position: relative;
}
.c5-anc .c5-anc__item a::after{
  content: "";
  display: block;
  width:12px;
  height:12px;
  border-left: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  transform: rotate(-35deg) translateX(-50%) skewX(20deg);
  position: absolute;
  top: 72%;
  left: 50%;
  transition: 0.25s;
}
.c5-anc .c5-anc__item p{
  text-align: center;
}
.c5-anc .c5-anc__item p:first-child{
  margin-bottom: 2.5%;
}
.c5-anc .c5-anc__item p .c5-text__en{
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  letter-spacing: 0.12em;
  position: relative;
  transition: 0.25s;
}
.c5-anc .c5-anc__item p .c5-text__ja{
  display: flex;
  justify-content: center;
  gap: 3%;
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  letter-spacing: 0.04em;
  transition: 0.25s;
}
.c5-anc .c5-anc__item p .c5-text__ja::before{
  content: "";
  width: 8%;
  height: 1px;
  margin-top: 2%;
  background: var(--brown);
  transition: 0.25s;
}
.c5-anc .c5-anc__item p .c5-text__ja::after{
  content: "";
  width: 8%;
  height: 1px;
  margin-top: 2%;
  background: var(--brown);
  transition: 0.25s;
}
/* c5-anc:hover*/

.c5-anc .c5-anc__item a:hover{
  background-color: var(--brown);
}
.c5-anc .c5-anc__item a:hover .c5-text__en{
  color: #fff;
}
.c5-anc .c5-anc__item a:hover .c5-text__ja{
  color: #fff;
}
.c5-anc .c5-anc__item a:hover .c5-text__en::before{
  border-left:1px solid #fff;
  border-bottom:1px solid #fff;
}
.c5-anc .c5-anc__item a:hover .c5-text__ja::before{
  background: #fff;
}
.c5-anc .c5-anc__item a:hover .c5-text__ja::after{
  background: #fff;
}

@media screen and (max-width:767px) {
  .c5-anc{
    margin-bottom: calc(90 / 767 * 100vw);
    padding: 0 4.5%;
  }
  .c5-anc .c5-anc__list{
    display: flex;
    flex-wrap: wrap;
  }
  .c5-anc .c5-anc__list .c5-anc__item {
    width: 50%;
    position: relative;
  }
  .c5-anc .c5-anc__list .c5-anc__item:not(:last-child) {
    border-right: none;
  }
  .c5-anc .c5-anc__item a{
    display: block;
    padding:8% 0 8% 6% ;
  }
  .c5-anc .c5-anc__item a::after{
    content: "";
    display: block;
    width:8px;
    height:8px;
    border-left: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    transform: rotate(-35deg) translateX(-50%) skewX(20deg);
    position: absolute;
    top: 43%;
    left: 86%;
    transition: 0.25s;
  }  
  .c5-anc .c5-anc__item p{
    text-align: left;
  }
  .c5-anc .c5-anc__item p:first-child{
    margin-bottom: 3%;
  }
  .c5-anc .c5-anc__item p .c5-text__en{
    font-size: calc(48 / 767 * 100vw);
  }
  .c5-anc .c5-anc__item p .c5-text__ja{
    display: inline;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-anc .c5-anc__item p .c5-text__ja::before{
    content: none;
  }
  .c5-anc .c5-anc__item p .c5-text__ja::after{
    content: none;
  }
  .c5-anc .c5-anc__list .c5-anc__item:nth-child(2n + 1)::before {
    content: "";
    display: block;
    width: 1px;
    height: 80%;
    background-color: #5f5f5f;
    position: absolute;
    top: 10%;
    right: 0;
  }
  .c5-anc .c5-anc__list .c5-anc__item:nth-child(-n + 2)::after {
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background-color: #5f5f5f;
    position: absolute;
    bottom: 0;
    right: 6%;
  }
}


/* c5-kv */

.c5-kv{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 110px;
  position: relative;
}
.c5-kv__inner{
  width: 100%;
  max-width:1200px ;
  padding: 0 8.3%;
  margin: 0 auto;
  padding-bottom: 73px;
}
.c5-main__title{
  width: 72%;
  max-width:720px ;
  margin: 0 auto 80px;
  padding-top: 80px;
  position: relative;
}
.c5-kv__slider__item{
  padding-bottom: 2%;
}
.c5-kv__slider__item__container dl{
  position: relative;
}
.c5-kv__slider__item__container dd{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 63%;
  position: absolute;
  top: 31%;
  left: 0;
}
.c5-kv__slider__item__container .c5-text__category{
  margin-bottom: 1%;
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-kv__slider__item__container .c5-text__name{
  margin-bottom: 2%;
  font-size: calc(34 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-kv__slider__item__container .c5-text__name img{
  display: block;
  width: 3%;
  margin: 1% 0 1% 0.5%;
}
.c5-kv__slider__item__container .c5-text__name .c5-text__name-product{
  font-family: 'Bodoni 72 Oldstyle',serif;
  font-weight: 400;
}
.c5-kv__slider__item__container .c5-text__name .c5-text__name-product .garamond{
  font-size: calc(37 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: 'Adobe Garamond Pro', sans-serif;
}
.c5-kv__slider__item__container .c5-text__desc{
  display: flex;
  gap: 2%;
  margin-bottom: auto;
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
}
.c5-kv__slider__item__container .c5-text__desc::before{
  content: "";
  width: 5.3%;
  height: 1px;
  margin-top: 1%;
  background: var(--white);
}
.c5-kv__slider__item__container .c5-text__btn{
  width: 22%;
}
.c5-text__btn div img{
  vertical-align: super;
}
@media screen and (max-width:767px) {
  .c5-kv{
    margin: 0 auto calc(190 / 767 * 100vw);
    position: relative;
  }
  .c5-kv__inner{
    padding: 0 4%;
  }
  .c5-kv__slider__track{
    padding-bottom: 10vw;
  }
  .c5-main__title{
    width: 98%;
    margin: 0 auto calc(75 / 767 * 100vw);
    padding-top: calc(75 / 767 * 100vw);
  }
  .c5-kv__slider{
    padding-bottom: 0;
  }
  .c5-kv__slider__item__container dl{
    height: 98vw;
  }  
  .c5-kv__slider__item__container dd{
    height: 63vw;
    position: relative;
    top: calc((202 / 767 * 100vw) * -1);
    left: 0;
  }
  .c5-kv__slider__item__container .c5-text__category{
    margin-bottom: 1.5%;
    font-size: calc(26 / 767 * 100vw);
    line-height: 1.3;
  }
  .c5-kv__slider__item__container .c5-text__name{
    margin-bottom: 14%;
    font-size: calc(42 / 767 * 100vw);
  }
  .c5-kv__slider__item__container .c5-text__name img{
    width: 4%;
  }  
  .c5-kv__slider__item__container .c5-text__name .c5-text__name-product .garamond{
    font-size: calc(46 / 767 * 100vw);
    font-family: 'Adobe Garamond Pro', sans-serif;
  }  
  .c5-kv__slider__item__container .c5-text__desc{
    display: flex;
    gap: 0%;
    margin-bottom: auto;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-kv__slider__item__container .c5-text__desc span{
    padding-left: 2em;
    text-indent: -1em;
    line-height: 1.9;
  }
  .c5-kv__slider__item__container .c5-text__desc::before{
    content: "";
    width: 4.3%;
    height: 1px;
    margin-top: 3%;
    background: var(--white);
  }
  .c5-kv__slider__item__container .c5-text__btn{
    width: 58%;
    margin-left: 39%;
  }
}

/* pagination */
.swiper-wrapper{
  height: auto;
  padding-bottom: 64px;
}
.swiper .swiper-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5%;
  bottom: 3.5%;
}
.swiper .swiper-pagination .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  background: #8e8e8e;
  outline: none;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active{
  transform: scale(1.6);
  background: #fff;
  border: 2px solid var( --brown);
}

@media screen and (min-width:768px) and (max-width:1200px) {
  .swiper .swiper-pagination .swiper-pagination-bullet{
    width: calc(10 / 1200 * 100vw);
    height: calc(10 / 1200 * 100vw);
  }
}
@media screen and (max-width:767px) {
  .swiper-wrapper{
    height: auto;
    padding-bottom: calc(100 / 750 * 100vw);
  }  
  .swiper .swiper-pagination{
    gap: 8%;
    bottom: 3.5%;
  }
  .swiper .swiper-pagination .swiper-pagination-bullet{
    display: flex;
    align-items: center;
    width: calc(20 / 767 * 100vw);
    height: calc(20 / 767 * 100vw);
    margin: 0;
  } 
}

/* arrow */
.swiper-button-prev,.swiper-button-next{
  top: 96%;
  width: 20px;
  outline: none;
  opacity: 0.7;
}
.swiper-button-prev{
  left: 37%;
}
.swiper-button-next{
  right: 37%;
}
.swiper-button-prev button,.swiper-button-next button{
  width: 100%;
}
.swiper-button-prev:after,.swiper-button-next:after{
  content: none;
}
@media screen and (min-width:768px) and (max-width:1200px) {
  .swiper-button-prev,.swiper-button-next{
    width: calc(20 / 1200 * 100vw);
  }  
}
@media screen and (max-width:767px) {
  .swiper-button-prev:after,.swiper-button-next:after{
    content: none;
  }  
  .swiper-button-prev{
    left: 5%;
  }
  .swiper-button-next{
    right: 5%;
  }
  .swiper-button-prev,.swiper-button-next{
    width: calc(40 / 750 * 100vw);
    opacity: 0.7;
  }  
}

.c5-sec{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.c5-sec__inner{
  width: 100%;
  max-width:1200px;
  margin: 0 auto;
  padding: 0 12%;
}
.c5-category .c5-sec__inner{
  padding: 13% 9% 0 11%;
}
.c5-category{
  margin-bottom: 60px;
}
.c5-category .c5-sec__title{
  margin-bottom: 70px;
  padding-bottom: 10px;
  font-size: 62px;
  font-family: 'Bodoni 72 Oldstyle',serif;
  letter-spacing: 0.12em;
}
.c5-category .c5-sec__title .c5-text__en::before{
  content: "";
  width:58px ;
  height: 20px;
  background-color: var( --black);
  border-top: 1px solid var(--brown);
  position: absolute;
  right: -21px;
  bottom: 4px;
  transform: rotate(-38deg);
  z-index: 2;
}
.c5-category .c5-sec__title .c5-text__ja{
  font-size:22px ;
  font-weight: 400;
  position: relative;
  top: 16px;
  left: -8px;
  z-index: 2;
}
.c5-category .c5-sec__item:not(:last-child){
  margin-bottom: 80px;
}
.c5-category .c5-sec__item dl{
  display: flex;
  gap: 2.5%;
  padding-bottom: 3%;
}
.c5-category .c5-sec__item dl dt{
  flex-basis: 38%;
  padding-bottom: 2%;
}
.c5-category .c5-sec__item dl dd{
  display: flex;
  flex-direction: column;
  flex-basis: 59.5%;
}
.c5-category .c5-sec__item .c5-text__category{
  margin-top: 1%;
  margin-bottom: 2.5%;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-category .c5-sec__item .c5-text__name{
  margin-bottom: 4.5%;
  font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
}
.c5-category .c5-sec__item .c5-text__desc{
  margin-bottom:auto;
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-indent: -0.3em;
}
.c5-category .c5-sec__item .c5-text__copy{
  display: flex;
  align-items: center;
  gap: 2%;
  margin-left: 1%;
  margin-bottom:auto ;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-category .c5-sec__item .c5-text__copy::before{
  content: "";
  width: 3%;
  height: 1px;
  background: var(--gray);
}
.c5-category .c5-sec__item .c5-text__btn{
  margin-left: 60%;
  margin-bottom: 3%;
}
.c5-category .c5-sec__item .c5-text__btn p{
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-category .c5-sec__box:not(:last-child){
  margin-bottom: 140px;
}
@media screen and (max-width:767px) {
  .c5-category .c5-sec__inner{
    padding: 18% 9% 0;
  }  
  .c5-sec__inner{
    padding: 0 8%;
  }  
  .c5-category{
    margin-bottom: 0%;
  }
  .c5-category .c5-sec__title{
    margin-bottom:10.6%;
    padding-bottom: calc(16 / 767 * 100vw);
    font-size: calc(88 / 767 * 100vw);
  }
  .c5-category .c5-sec__title .c5-text__en::before{
    content: "";
    width:calc(74 / 767 * 100vw) ;
    height: calc(20 / 767 * 100vw);
    right: -6%;
    bottom: 8%;
    transform: rotate(-40deg);  
  }
  .c5-category .c5-sec__title .c5-text__ja{
    font-size:calc(32 / 767 * 100vw) ;
    top: calc(27 / 767 * 100vw);
    left: calc(-9 / 767 * 100vw);
  }
  .c5-category .c5-sec__item:not(:last-child){
    margin-bottom:21.7391304347826% ;
  }
  .c5-category .c5-sec__item dl{
    flex-direction: column;
    gap: calc(30 / 767 * 100vw);
    padding-bottom: 8%;
  }
  .c5-category .c5-sec__item dl dt{
    flex-basis: auto;
    padding-bottom: 0%;
  }
  .c5-category .c5-sec__item dl dd{
    display: flex;
    flex-direction: column;
    flex-basis: auto;
  }
  .c5-category .c5-sec__item .c5-text__category{
    margin-top: 0;
    margin-bottom: 2%;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-category .c5-sec__item .c5-text__name{
    margin-bottom: 7%;
    font-size: calc(48 / 767 * 100vw);
  }
  .c5-category .c5-sec__item .c5-text__desc{
    margin-bottom: 20%;
    font-size: calc(42 / 767 * 100vw);
    text-indent: -0.5em;
  }
  .c5-category .c5-sec__item .c5-text__copy{
    align-items:flex-start;
    gap: 5%;
    margin-left: 1%;
    margin-bottom:17% ;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-category .c5-sec__item .c5-text__copy::before{
    content: "";
    width: 8%;
    margin-top: 3%;
  }  
  .c5-category .c5-sec__item .c5-text__btn{
    margin-left: 23%;
    margin-bottom: 0%;
  }
  .c5-category .c5-sec__item .c5-text__btn p{
    font-size: calc(32 / 767 * 100vw);
  }
  .c5-category .c5-text__btn div{
    width: calc(190 / 767 * 100vw);
  }

  .c5-category .c5-sec__box:not(:last-child){
    margin-bottom: 34.8115942028986%;
  }
  
}

.c5-bnr{
  padding-bottom: 100px;
}
.c5-bnr__link{
  display: block;
}
@media screen and (max-width:767px) {
  .c5-bnr{
    padding-bottom: 24.7718383311604%;
  }
}

.c5-detail__outer{
  background-image:linear-gradient(to bottom,#1b1b1b 0,#252525 120px,#2d2d2d 767px,#1b1b1b 100%);
}
.c5-detail{
  width: 100%;
  padding: 130px 0 220px;  
}
.c5-detail .c5-sec__title{
  margin-bottom: 60px;
  padding-bottom: 10px;
  font-size: 62px;
  font-family: 'Bodoni 72 Oldstyle',serif;
  letter-spacing: 0.12em;
}
.c5-detail .c5-sec__title .c5-text__en::before{
  content: "";
  width:58px ;
  height: 20px;
  background-color: #252525;
  border-top: 1px solid var(--brown);
  position: absolute;
  right: -21px;
  bottom: 4px;
  transform: rotate(-38deg);
  z-index: 2;
}
.c5-detail .c5-sec__title .c5-text__ja{
  font-size:22px ;
  position: relative;
  top: 16px;
  left: -8px;
  z-index: 2;
}
.c5-detail__box{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 80px;
}
.c5-detail__box .c5-detail__img{
  flex-basis: 47%;
  margin-top: 0px;
  margin-right: -3%;
  padding-right:0%;
}
.c5-detail__box .c5-detail__text{
  flex-basis: 50.8571428571429%;
}
.c5-detail__box .c5-text__name{
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: 'Bodoni 72 Oldstyle',serif;
  font-weight: 400;
  border-bottom: 1px solid var(--brown);
}
.c5-detail__box .c5-text__name .garamond{
  font-size: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: 'Adobe Garamond Pro', sans-serif;
}
.c5-detail__box .c5-text__desc{
  margin-bottom: 10px;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: var(--white);
  font-family :'YuGothic', 'Yu Gothic', sans-serif;
  letter-spacing: -0.02em;
}
.c5-detail__box .c5-text__note{
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: var(--white);
  font-family :'YuGothic', 'Yu Gothic', sans-serif;
  line-height: 1.4;
}
.c5-text__desc tr td{
  width: 5em;
  line-height: 1.8;
  vertical-align: baseline;
}
.c5-text__desc tr td:first-child{
  width: 5em;
}

@media screen and (max-width:767px) {
  .c5-detail{
    width: 100%;
    padding: 37.5797101449275% 0 41%;  
    background:linear-gradient(to bottom,#1b1b1b 0,#252525 14%,#2d2d2d 92%,#1b1b1b 100%);
  }
  .c5-detail .c5-sec__title{
    margin-bottom:14.4927536231884%;
    padding-bottom: calc(16 / 767 * 100vw);
    font-size: calc(74 / 767 * 100vw);
  }
  .c5-detail .c5-sec__title .c5-text__en::before{
    content: "";
    width:calc(74 / 767 * 100vw) ;
    height: calc(20 / 767 * 100vw);
    background-color: #252525;
    right: -12%;
    bottom: 8%;
    transform: rotate(-40deg); 
  }
  .c5-detail .c5-sec__title .c5-text__ja{
    font-size: calc(32 / 767 * 100vw);
    top: calc(27 / 767 * 100vw);
    left: calc(-9 / 767 * 100vw);
  }  
  .c5-detail__box{
    display: flex;
    flex-direction: column;
    gap: calc(100 / 767 * 100vw);
    margin-bottom: 18.8405797101449%;
  }
  .c5-detail__box .c5-detail__img{
    flex-basis: auto;
    margin-top: 0px;
    padding-right:0%;
  }
  .c5-detail__box .c5-detail__text{
    flex-basis: auto;
  }
  .c5-detail__box .c5-text__name{
    margin-bottom: 4.3%;
    padding-bottom: 4%;
    font-size: calc(52 / 767 * 100vw);
  }
  .c5-detail__box .c5-text__name .garamond{
    font-size: calc(57 / 767 * 100vw);
  }
  .c5-detail__box .c5-text__desc{
    width: 100%;
    margin-bottom: 1%;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-detail__box .c5-text__note{
    font-size: calc(20 / 767 * 100vw);
  }  
  .c5-text__desc td{
    line-height: 1.8;
    vertical-align: baseline;
  }
  .c5-text__desc tr td:first-child{
    width: 7em;
  }
  
}

/* 一番下のボタン */
.c5-btn__box{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.c5-btn__box .c5-text__btn{
  width: 50%;
  display: block;
}
.c5-btn__box .c5-text__btn a{
  display: flex;
  align-items: center;
  gap: 7%;
  justify-content: center;
}
@media screen and (max-width:767px) {
  .c5-btn__box{
    flex-direction: column;
    gap: calc(130 / 767 * 100vw);
    width: 100%;
  }
  .c5-btn__box .c5-text__btn{
    width: 100%;
  }
  .c5-btn__box .c5-text__btn a{
    gap: 0%;
    justify-content: space-around;
  }
  .c5-btn__box .c5-text__btn div{
    width: calc(230 / 767 * 100vw);
    margin-right: 8%;
  }
}
@media (any-hover:hover){
  .c5-btn__box .c5-text__btn a:hover div::after{
    width: 60px;
    height: 60px;
    background-color: var(--brown);
    border-color: var(--brown);    
  }
}
/* @media (any-hover:none){
  .c5-btn__box .c5-text__btn a:active div::after{
    width: calc(120 / 767 * 100vw);
    height: calc(120 / 767 * 100vw);
    background-color: var(--brown);
    border-color: var(--brown);
  }
} */



/* 画像アニメーション */
.mask{
  -webkit-mask-image:linear-gradient(-25deg,transparent,transparent 41.6666666667%,rgba(0,0,0,.02) 43.3333333333%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.18) 46.6666666667%,rgba(0,0,0,.32) 48.3333333333%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 51.6666666667%,rgba(0,0,0,.82) 53.3333333333%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.98) 56.6666666667%,#000 58.3333333333%,#000);
  mask-image:linear-gradient(-25deg,transparent,transparent 41.6666666667%,rgba(0,0,0,.02) 43.3333333333%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.18) 46.6666666667%,rgba(0,0,0,.32) 48.3333333333%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 51.6666666667%,rgba(0,0,0,.82) 53.3333333333%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.98) 56.6666666667%,#000 58.3333333333%,#000);
  -webkit-mask-size:100% max(300%,100vh);
  mask-size:100% max(300%,100vh);
  -webkit-mask-position:center 100%;
  mask-position:center 100%;
  filter: blur(1em) brightness(1.85);
  opacity: 0;
  will-change: filter;
  transition:mask-position 1s linear,-webkit-mask-position 1s linear,opacity 0.9s 0.2s,filter 0.9s 0.2s;
}
.mask-text{
  -webkit-mask-image:linear-gradient(-25deg,transparent,transparent 41.6666666667%,rgba(0,0,0,.02) 43.3333333333%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.18) 46.6666666667%,rgba(0,0,0,.32) 48.3333333333%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 51.6666666667%,rgba(0,0,0,.82) 53.3333333333%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.98) 56.6666666667%,#000 58.3333333333%,#000);
  mask-image:linear-gradient(-25deg,transparent,transparent 41.6666666667%,rgba(0,0,0,.02) 43.3333333333%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.18) 46.6666666667%,rgba(0,0,0,.32) 48.3333333333%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 51.6666666667%,rgba(0,0,0,.82) 53.3333333333%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.98) 56.6666666667%,#000 58.3333333333%,#000);
  -webkit-mask-size:100% max(300%,100vh);
  mask-size:100% max(300%,100vh);
  -webkit-mask-position:center 100%;
  mask-position:center 100%;
  opacity: 0;
  filter: blur(6px);
  will-change: filter;

  transition:mask-position 1s linear,-webkit-mask-position 1s linear,opacity 1s 0.2s,filter 1s 0.2s;
}
.mask.open{
  -webkit-mask-position:center 0;
  mask-position:center 0;
  -webkit-mask-size:100% max(400%,100vh);
  mask-size:100% max(400%,100vh);
  filter: blur(0) brightness(1);
  opacity: 1;
}
.mask-text.open{
  -webkit-mask-position:center 0;
  mask-position:center 0;
  opacity: 1;
  filter: blur(0);

}

.title-bg{
  width: 100vw;
  height: 170px;
  position: absolute;
  background:linear-gradient(to bottom,#2d2d2d 0%,#2d2d2d 40%,#1b1b1b 100%);
}
@media screen and (max-width:767px) {
  .title-bg{
    height: calc(270 / 767 * 100vw);
    background:linear-gradient(to bottom,#2d2d2d 0%,#2d2d2d 30%,#1b1b1b 100%);
  }  
}


.c5-review-top .c5-share{
  margin-top: 160px;
  margin-bottom: 50px;
}
@media screen and (max-width:767px) {
  .c5-review-top .c5-share{
    margin-top: calc(200 / 767 * 100vw);
    margin-bottom:calc(0 / 767 * 100vw);
  }  
}



/*------------- reviewページ ----------------*/

/* .c5-kv */

.c5-review .c5-kv__container dl{
  position: relative;
}
.c5-review .c5-kv__container dd{
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 52%;
  left: 0;
}
.c5-review .c5-kv__container .c5-text__category{
  margin-bottom: 1%;
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-review .c5-kv__container .c5-text__name{
  margin-bottom: 2%;
  font-size: calc(46 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
}
.c5-review .c5-kv__container .c5-text__name img{
  display: block;
  width: 4%;
  margin: 2% 0 2% 0.5%;
}
.c5-review .c5-kv__container .c5-text__name .c5-text__name-product{
  font-weight: 400;
}
.c5-review .c5-kv__container .c5-text__name .c5-text__name-product .garamond{
  font-size: calc(50 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-review .c5-text__en::before{
  content: none;
}

@media screen and (max-width:767px) {
  .c5-review .c5-kv__container dd{
    top: 45%;
  }
  .c5-review .c5-kv__container .c5-text__category{
    margin-bottom: 2%;
    font-size: calc(26 / 767 * 100vw);
    line-height: 1.3;
  }
  .c5-review .c5-kv__container .c5-text__name{
    margin-bottom: 2%;
    font-size: calc(42 / 767 * 100vw);
  }
  .c5-review .c5-kv__container .c5-text__name img{
    margin: 3% 0 3% 0.5%;
  }
  .c5-review .c5-kv__container .c5-text__name .c5-text__name-product .garamond{
    font-size: calc(46 / 767 * 100vw);
  } 
}

/* c5-lead */

.c5-lead{
  margin-bottom: 100px;
}
.c5-lead .c5-sec__title{
  margin-bottom: 20px;
}
.c5-lead .c5-sec__copy{
  font-size: 22px;
}  
@media screen and (max-width:767px) {
  .c5-lead{
    margin-bottom:calc(140 / 767 * 100vw);
  }
  .c5-lead .c5-sec__title{
    margin-bottom:calc(40 / 767 * 100vw);
  }  
  .c5-lead .c5-sec__copy{
    font-size: calc(28 / 767 * 100vw);
    text-align: center;
  }  
}

/* c5-profile */

.c5-review .c5-profile{
  margin-bottom: 140px;
}
.c5-review .c5-profile .c5-sec__title{
  margin-bottom: 60px;
}
.c5-review .c5-profile .c5-sec__box{
  padding: 2.8%;
  background-color: #131313;
}
.c5-review .c5-profile .c5-sec__box dl dt{
  display: flex;
  gap: 3%;
  align-items: center;
}
.c5-review .c5-profile .c5-sec__box dt div{
  width:14% ;
}
.c5-review .c5-profile .c5-sec__box dt span{
  display: block;
  position: static;
}
.c5-review .c5-profile .c5-sec__box dt .c5-text__en{
  margin-bottom:10px ;
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: var(--brown);
  font-style: italic;
}
.c5-review .c5-profile .c5-sec__box dl .c5-text__ja{
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 500;
  color: var(--white);
  font-style: normal;
}
.c5-review .c5-profile .c5-sec__box dl dd{
  height: 0;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  overflow-y: hidden;
  transition: 0.5s;
}

@media screen and (max-width:767px) {
  .c5-review .c5-profile{
    margin-bottom: calc(270 / 767 * 100vw);
  }
  .c5-review .c5-profile .c5-sec__title{
    margin-bottom: calc(70 / 767 * 100vw);
  }
  .c5-review .c5-profile .c5-sec__box{
    padding: 3%;
    background-color: #131313;
  }
  .c5-review .c5-profile .c5-sec__box dl dt{
    gap: 6%;
  }
  .c5-review .c5-profile .c5-sec__box dt div{
    width:25.3% ;
  }
  .c5-review .c5-profile .c5-sec__box dt .c5-text__en{
    margin-bottom:15% ;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-review .c5-profile .c5-sec__box dl .c5-text__ja{
    font-size: calc(42 / 767 * 100vw);
  }
  .c5-review .c5-profile .c5-sec__box dl dd{
    font-size:calc(28 / 767 * 100vw) ;
  }
}


/* c5-interview */

.c5-interview{
  margin-bottom: 130px;
}
.c5-interview .c5-sec__title{
  margin-bottom:55px ;
}
.c5-interview .c5-sec__box .c5-sec__text-q{
  display: flex;
  gap: 2%;
  margin-bottom:17px ;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.875;
  letter-spacing: 00.04em;
  color: var(--brown);
}
.c5-interview .c5-sec__box .c5-sec__text-q::before{
  content: "";
  display: block;
  width: 4.5%;
  height: 1px;
  margin-top: 1.5%;
  background-color: var(--brown);
}
.c5-interview .c5-sec__box .c5-sec__text-a{
  margin-bottom: 60px;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 1.75;
  letter-spacing: 00.04em;
  color: var(--white);
}
.c5-interview .c5-sec__box .c5-sec__flex{
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.c5-interview .c5-sec__box .c5-sec__flex p{
  flex: 0 0 48%;
  margin-bottom: 0;
}
.c5-interview .c5-sec__box .c5-sec__flex div{
  flex: 0 0 48%;
}

@media screen and (max-width:767px) {
  .c5-interview{
    margin-bottom: calc(195 / 767 * 100vw);
  }
  .c5-interview .c5-sec__title{
    margin-bottom:calc(90 / 767 * 100vw) ;
  }
  .c5-interview .c5-sec__box .c5-sec__text-q{
    gap: 4%;
    margin-bottom:calc(45 / 767 * 100vw) ;
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-interview .c5-sec__box .c5-sec__text-q::before{
    content: "";
    display: block;
    width: 10%;
    height: 1px;
    margin-top: 3.5%;
    background-color: var(--brown);
  }
  .c5-interview .c5-sec__box .c5-sec__text-a{
    margin-bottom: calc(90 / 767 * 100vw);
    font-size: calc(28 / 767 * 100vw);
  }
  .c5-interview .c5-sec__box .c5-sec__flex{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: calc(90 / 767 * 100vw);
  }
  .c5-interview .c5-sec__box .c5-sec__flex p{
    flex: 0 0 100%;
    margin-bottom: calc(50 / 767 * 100vw);
  }
  .c5-interview .c5-sec__box .c5-sec__flex div{
    flex: 0 0 100%;
  }
  
}


/* c5-share */

.c5-share{
  margin-bottom: 130px;
}
.c5-share .c5-sec__flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.c5-share .c5-sec__flex p{
  width: 50%;
  padding-right: 5%;
  font-size: calc(38 / var(--root-font-size) * var(--font-ratio) * 1rem);
  letter-spacing: 00.12em;
  text-align: right;
  border-right: 1px solid var(--brown);
}
.c5-share .c5-sec__flex .c5-sec__box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  margin-left: 5%;
}
.c5-share .c5-sec__flex div a{
  width: 9.6%;
}
.c5-share .c5-sec__flex div a:first-child{
  margin-right: 8%;
}

@media screen and (max-width:767px) {
  .c5-share{
    margin-bottom: calc(195 / 767 * 100vw);
  }
  .c5-share .c5-sec__flex p{
    padding-right: 9%;
    font-size: calc(74 / 767 * 100vw);
  }
  .c5-share .c5-sec__flex .c5-sec__box{
    margin-left: 9%;
  }
  .c5-share .c5-sec__flex div a{
    width: 35%;
  }
  .c5-share .c5-sec__flex div a:first-child{
    margin-right: 20%;
  }
}


/* c5-article */

.c5-article{
  margin-bottom: 90px;
}
.c5-article .c5-sec__title{
  width: 22.9%;
  margin-bottom: 40px;
}
.c5-article .c5-sec__list{
  display: flex;
  gap: 3.4%;
  margin-bottom:90px ;

}
.c5-article .c5-sec__item{
  padding-bottom: 30px;
}
.c5-article .c5-sec__item .c5-text__category{
  margin-top: 1%;
  margin-bottom: 3%;
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-article .c5-sec__item .c5-text__name{
  margin-bottom: 8.5%;
  font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-article .c5-sec__item .c5-text__btn{
  margin-left: 50%;
}
.c5-article .c5-sec__inner .c5-sec__box:nth-of-type(1) .c5-text__btn div{
  width:30% ;
}
.c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  width: 50%;
  margin: 0 auto;
}
.c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn p{
  letter-spacing: 0.08em;
}
.c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn div{
  width:80px ;
}

@media screen and (max-width:767px) {
  .c5-article{
    margin-bottom: 0;
  }
  .c5-article .c5-sec__title{
    width: 45.9%;
    margin-bottom: calc(100 / 767 * 100vw);
  }
  .c5-article .c5-sec__list{
    display: flex;
    gap:calc(140 / 767 * 100vw) ;
    flex-direction: column;
    margin-bottom:calc(170 / 767 * 100vw) ;
  }
  .c5-article .c5-sec__item{
    padding-bottom: calc(50 / 767 * 100vw);
  }
  .c5-article .c5-sec__item .c5-text__category{
    margin-top: 2%;
    margin-bottom: 3%;
    font-size: calc(28 / 767 * 100vw);
    line-height: 1.3;
  }
  .c5-article .c5-sec__item .c5-text__name{
    margin-bottom: 13.4%;
    font-size: calc(48 / 767 * 100vw);
  }
  .c5-article .c5-sec__item .c5-text__btn{
    margin-left: 21%;
  }
  .c5-article .c5-sec__inner .c5-sec__box:nth-of-type(1) .c5-text__btn div{
    width:40% ;
  }
  .c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn a{
    justify-content: flex-start;
    gap: 4%;
    width: 96%;
  }
  .c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn p{
    letter-spacing: 0.08em;
    line-height: 1.6;
  }
  .c5-article .c5-sec__inner .c5-sec__box:nth-of-type(2) .c5-text__btn div{
    width:calc(170 / 767 * 100vw) ;
  } 
}


/* アコーディオン c5-interview ボタン含む */

.c5-interview .c5-sec__box{
  height: 8em;
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to top,transparent 0%,#000 40%);
  mask-image: linear-gradient(to top,transparent 0%,#000 40%);
  -webkit-mask-position:left bottom ;
  mask-position:left bottom;
  -webkit-mask-size:100% 250%;
  mask-size:100% 250%;
  transition:height 0.8s , webkit-mask-size 1s , -webkit-mask-position 1s;
}
.c5-interview .c5-sec__box.open{
  -webkit-mask-size:100% 800%;
  mask-size:100% 800%;
  -webkit-mask-position:left top ;
  mask-position:left top;
}
.c5-interview .c5-accordion__btn{
  margin-top: 50px;
}
.c5-interview .c5-accordion__btn button{
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 14%;
  width: 24%;
  margin: 0 auto;
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.c5-interview .c5-accordion__btn span{
  width: 45px;
  height: 45px;
  border:1px solid var(--white);
  border-radius: 50%;
  position: relative;
  transition: 0.25s;
}
.c5-interview .c5-accordion__btn span::before{
  content: "";
  width: 20px;
  height: 1px;
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
}
.c5-interview .c5-accordion__btn span::after{
  content: "";
  width: 20px;
  height: 1px;
  background: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transition:all 0.25s;
}
.c5-interview .c5-sec__box.open + .c5-accordion__btn button span::after{
  transform: rotate(0deg)  translateX(-50%);
  transform-origin: center;
}

@media screen and (max-width:767px) {
  .c5-interview .c5-sec__box{
    height: calc(280 / 767 * 100vw);
    -webkit-mask-image: linear-gradient(to top,transparent 0%,#000 35%);
    mask-image: linear-gradient(to top,transparent 0%,#000 35%);
    -webkit-mask-position:left bottom ;
    mask-position:left bottom;
    -webkit-mask-size:100% 250%;
    mask-size:100% 250%;
  }
  .c5-interview .c5-sec__box.open{
    -webkit-mask-size:100% 800%;
    mask-size:100% 800%;
  }
  .c5-interview .c5-accordion__btn{
    margin-top: calc(70 / 767 * 100vw);
  }
  .c5-interview .c5-accordion__btn button{
    gap: 15%;
    width: 60.9%;
    font-size: calc(32 / 767 * 100vw);
  }
  .c5-interview .c5-accordion__btn span{
    width: calc(110 / 767 * 100vw);
    height: calc(110 / 767 * 100vw);
  }
  .c5-interview .c5-accordion__btn span::before{
    content: "";
    width:calc(60 / 767 * 100vw) ;
  }
  .c5-interview .c5-accordion__btn span::after{
    content: "";
    width:calc(60 / 767 * 100vw) ;
  }  
}


/* アコーディオン c5-profile ボタン含む */

.c5-review .c5-profile .c5-sec__box dt .c5-accordion__profile-btn{
  width:clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height:clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  margin-left: auto;
  margin-right: 2%;
  position: relative;
}
.c5-review .c5-profile .c5-accordion__profile-btn button{
  display: block;
  width: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  border-radius: 50%;
  transition: 0.25s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.c5-review .c5-profile .c5-accordion__profile-btn .c5-line{
  width: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.c5-review .c5-profile .c5-accordion__profile-btn .c5-line::before{
  content: "";
  width: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height: 1px;
  background: var(--brown);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
}
.c5-review .c5-profile .c5-accordion__profile-btn .c5-line::after{
  content: "";
  width: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height: 1px;
  background: var(--brown);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transition:all 0.25s;
}
.c5-review .c5-profile .c5-accordion__profile-btn .c5-circle{
  position: absolute;
  width: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  height: clamp(2.375rem, 1.563rem + 1.667vw, 2.813rem);
  top: 0;
  left: 0;
  border-radius: 50%;
  transition:all 0.25s;
}
.c5-profile .c5-accordion__profile-btn.open button + .c5-line::after{
  transform:translateX(-50%) rotate(0deg) ;
} 

@media screen and (max-width:767px) {
  .c5-review .c5-profile .c5-sec__box dt .c5-accordion__profile-btn{
    width:calc(60 / 767 * 100vw);
    height:calc(60 / 767 * 100vw);
    margin-left: auto;
    margin-right: 2%;
    position: relative;
  }
  .c5-review .c5-profile .c5-accordion__profile-btn button{
    display: block;
    width: calc(60 / 767 * 100vw);
    height: calc(60 / 767 * 100vw);
    border-radius: 50%;
    transition: 0.25s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .c5-review .c5-profile .c5-accordion__profile-btn .c5-line{
    width: calc(60 / 767 * 100vw);
    height: calc(60 / 767 * 100vw);
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .c5-review .c5-profile .c5-accordion__profile-btn .c5-line::before{
    content: "";
    width: calc(60 / 767 * 100vw);
    height: 1px;
    background: var(--brown);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
  }
  .c5-review .c5-profile .c5-accordion__profile-btn .c5-line::after{
    content: "";
    width: calc(60 / 767 * 100vw);
    height: 1px;
    background: var(--brown);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    transition:all 0.25s;
  }
  .c5-review .c5-profile .c5-accordion__profile-btn .c5-circle{
    position: absolute;
    width: calc(60 / 767 * 100vw);
    height: calc(60 / 767 * 100vw);
    top: 0;
    left: 0;
    border-radius: 50%;
    transition:all 0.25s;
  }
  .c5-profile .c5-accordion__profile-btn.open button + .c5-line::after{
    transform:translateX(-50%) rotate(0deg) ;
  }  
}

@media (any-hover:hover){
  .c5-article .c5-sec__inner .c5-text__btn a:hover div::after{
    width: 60px;
    height: 60px;
    background: var(--brown);
    border-color: var(--brown);
  }
  .c5-profile .c5-accordion__profile-btn:hover{
    transform: scale(1.3);
  }
  .c5-profile .c5-accordion__profile-btn button:hover + .c5-line::before{
      background: var(--white);
  }
  .c5-profile .c5-accordion__profile-btn button:hover + .c5-line::after{
      background: var(--white);
  }
  .c5-profile .c5-accordion__profile-btn button:hover + .c5-line + .c5-circle{
    background: var(--brown);
    transform: scale(1.3);
  }
  .c5-interview .c5-accordion__btn button:hover span{
    border: none;
    background: var(--brown);
    transform: scale(1.3);
  }  
  .c5-side-btn .c5-side-btn__inner .c5-side-btn__bnr:hover{
    background: var(--brown);
    border: 1px solid var(--brown);
  }  
}

.c5-review .c5-profile .c5-text__desc,.c5-review .c5-interview .c5-sec__text-q,.c5-review .c5-interview .c5-sec__text-a{
  font-family :'YuGothic', 'Yu Gothic', sans-serif;
}
.c5-review .c5-interview .c5-sec__text-q{
  font-style: italic;
}

/*--------- Android対応 ---------*/
body.Android .c5-main{
  font-family:'YuMincho','Yu Mincho', 'Noto Serif JP','Sawarabi Mincho', serif ;
  color: var(--white);
}
body.Android .c5-text__ja{
  font-family:'YuMincho','Yu Mincho', 'Noto Serif JP','Sawarabi Mincho', serif ;
}
body.Android .c5-detail__box .c5-text__desc{
  font-family: 'YuGothic', 'Yu Gothic','Noto Sans JP', sans-serif;
}
body.Android .c5-font p{
  font-family:'YuMincho','Yu Mincho', 'Noto Serif JP','Sawarabi Mincho', serif ;
}
body.Android .c5-review .c5-profile .c5-text__desc, body.Android .c5-review .c5-interview .c5-sec__text-q, body.Android .c5-review .c5-interview .c5-sec__text-a{
  font-family: 'YuGothic', 'Yu Gothic','Noto Sans JP', sans-serif;
}
body.Android .c5-text__btn div::after{
  width: calc(95 / 750 * 100vw);
  height: calc(95 / 750 * 100vw);
}
body.Android .c5-kv__slider__item__container .c5-text__btn{
  margin-left: 37%;
}
body.Android .c5-category .c5-sec__item .c5-text__btn{
  margin-left: 21%;
}
body.Android .c5-category .c5-sec__title{
  margin-bottom: 10%;
  padding-bottom: calc(25 / 767 * 100vw);
  letter-spacing: 0.06em;
}
body.Android .c5-detail .c5-sec__title{
  padding-bottom: calc(25 / 767 * 100vw);
}

/*--------- MISIA追加 ---------*/
.new_misia dd .c5-text__category,.new_misia dd .c5-text__name,.new_misia dd .c5-text__desc{
  visibility: hidden;
}
@media screen and (max-width:767px) {
  .new_misia dd{
    height:49vw ;
  }
}
.c5-feature{
  position: relative;
  z-index: 1;
}
.c5-feature::after{
  content: "";
  width: 100vw;
  height: 100%;
  background: url(../images/misia/interview_product_bg.png) repeat left top;
  background-size: contain;
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  z-index: -1;
}
.c5-feature .c5-sec__inner{
  padding-top: 4%;
  padding-bottom: 5%;
}

.c5-feature .c5-sec__title{
  margin-left: -8%;
  font-size: calc(160 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: #c6d2dc;
  font-family: miller-banner,serif;
  font-weight: 200;
  letter-spacing: 0.02em;
}
.c5-feature .c5-sec__sub-title{
  margin-top: -10%;
  font-size: calc(42 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: #171829;
  font-family: miller-banner,serif;
  font-weight: 200;
  text-align: center;
}
.c5-feature .c5-sec__sub-title .blue{
  color: #547096;
}
.c5-feature .c5-sec__desc{
  margin-top: 1%;
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-align: center;
  color: #111 ;
}
.c5-feature .c5-bnr{
  display: block;
  margin-top: 3%;
  padding: 0 14%;
}
.c5-feature .c5-feature__btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 21%;
  margin: 5% auto 0;
  padding: 1% 3%;
  font-weight: 200;
  border: 1px solid #171829;
  border-radius: 50px;
  letter-spacing: 0.04em;
}
.c5-feature .c5-feature__btn p{
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: miller-banner,serif;
  font-weight: 200;
  color: #171829;
}
.c5-feature .c5-feature__btn svg{
  width: 10%;
  stroke: #171829;
}
@media screen and (max-width:767px) {
  .c5-feature .c5-sec__inner{
    padding-top: 5%;
    padding-bottom: 11%;
  }
  .c5-feature .c5-sec__title{
    margin-left: -6%;
    font-size: calc(160 / 750 * 100vw);
  }
  .c5-feature .c5-sec__sub-title{
    margin-top: -13%;
    font-size: calc(56 / 750 * 100vw);
  }
  .c5-feature .c5-sec__desc{
    margin-top: 1%;
    font-size: calc(24 / 750 * 100vw);
  }
  .c5-feature .c5-bnr{
    display: block;
    margin-top: 5%;
    padding: 0 ;
  }
  .c5-feature .c5-feature__btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 8% auto 0;
    padding: 4% 12%;
    font-weight: 200;
  }
  .c5-feature .c5-feature__btn p{
    font-size: calc(28 / 750 * 100vw);
    font-family: miller-banner,serif;
    font-weight: 200;
    color: #171829;
  }
}

.s5-returnToTop{
  margin: 0;
}