@charset "utf-8";
/* CSS Document */
/* product_detail.css */
.detailslider {
  background: var(--c-gr01);
  position: relative;
  margin-top: calc(120 / 750 * 100%);
}
.detailslider + .box--40 {
  margin-top: clamp(45px,calc(90 / 750 * 100%),90px);
}
.detailslider .owl-dots {
  position: absolute;
  bottom: calc(80 / 900 * 100%);
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
}
.detailslider .owl-carousel button.owl-dot {
  width: clamp(10px,calc(20 / 750 * 100vw),20px);
  height: clamp(10px,calc(20 / 750 * 100vw),20px);
  border-radius: 20px;
  background: var(--c-bl02);
  margin: 0 clamp(5px,calc(10 / 750 * 100vw),10px);
  transform: scale(calc(12 / 20 ));
  transition: all .5s ease;
}
.detailslider .owl-carousel button.owl-dot.active {
  transform: scale(1);
}

.infobar {
  display: none;
}
@media screen and (min-width:750px){
  .detailslider {
      background: url(img/slider_cover_pc.png) top center no-repeat ;
    -webkit-background-size: cover;
    background-size: cover;
    margin-top: 70px;
    
    
    }
}


/* -------------------------------------------- */

.detail__name {
  font-size: var(--fs-60);
  font-weight: 500;
  font-family: var(--font-en-b);
  line-height: var(--lh-60);
  margin: 0 auto;
}
.detail__caption {
  font-size: var(--fs-28);
  font-weight: 500;
  font-family: var(--font-ja-b);
  line-height: var(--lh-28);
  margin: clamp(5px,calc(10 / 610 * 100%),10px) auto;
  color: var(--c-bl02);
}
.detail__att {
  color: var(--c-bl02);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
}

@media screen and (min-width:750px){
  .detail__item {
    max-width: 780px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .detail__name {
    font-size: var(--fs-50);
    line-height: var(--lh-50);
  }
  .detail__caption {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    margin: 0 auto;
    color: var(--c-bl02);
  }
  .detail__att {
    font-size: var(--fs-14);
    line-height: var(--lh-14);
  }

}

/* -------------------------------------------- */
.offer {
  display: block;
  margin: clamp(30px,calc(60 / 670 * 100%),60px) auto;
}
.offer .offer__item {
  background: var(--c-wh);
  box-sizing: border-box;
  display: block;
  margin: clamp(20px,calc(40 / 670 * 100%),40px) auto;
  padding: calc(30 / 670 * 100%) calc(40 / 670 * 100%) calc(40 / 670 * 100%);
}
.offer .offer__name {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
  border-bottom: 1px solid;
  box-sizing: border-box;
  padding-bottom: calc(20 / 670 * 100%);
  margin-bottom: calc(20 / 670 * 100%);
}
.offer .offer__name span {
    font-size: var(--fs-26);
    line-height: var(--lh-26);
}
.offer .offer__price {
  font-size: var(--fs-50);
  font-family: var(--font-en-b);
  font-weight: 500;
  line-height: var(--lh-50);
}
.offer .offer__price .offer__price--tax {
  font-size: var(--fs-18);
  font-family: var(--font-ja);
  line-height: var(--lh-18);
  font-weight: 400;
  color: var(--c-bl02);
}
.offer .offer__tag {
  margin: calc(10 / 610 * 100%) auto 0;
  
}
.offer .offer__tag span {
  display: inline-block;
  color: var(--c-bl01);
  font-weight: 500;
  border-radius: 2em;
  padding: .1em 1.2em;
  border: 1px solid var(--c-bl01);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
}
.offer .offer__btn .btn--ar {
  margin: calc(40 / 610 * 100%) auto 0;
}
.offer .offer__att {
  margin: calc(30 / 610 * 100%) auto 0;
  text-align: center;
}
.offer .offer__att a {
  font-size: var(--fs-18);
  font-family: var(--font-ja);
  line-height: var(--lh-18);
  font-weight: 400;
  color: var(--c-bl02);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media screen and (min-width:750px){
  .offer {
    margin: 80px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    gap: 40px;
    position: relative;
    width: 100%;
  }
  .offer .offer__item {
    background: var(--c-wh);
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 30px 40px 30px;
    width: calc((100% - 40px) / 2);
  }
  .offer .offer__name {
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .offer .offer__name span {
      font-size: var(--fs-20);
      line-height: var(--fs-20);
  }
  .offer__pricebox {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -ms-align-items: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: flex-start;
    width: 100%;
  }
  .offer .offer__price {
    font-size: var(--fs-40);
    line-height: var(--fs-40);
  }
  .offer .offer__price .offer__price--tax {
    font-size: var(--fs-12);
    line-height: var(--lh-12);
  }
  .offer .offer__tag {
    margin: 0;
    display: inline-block;
    padding-bottom: 6px;
  }
  .offer .offer__tag span {
    color: var(--c-bl01);
    font-weight: 500;
    border-radius: 2em;
    padding: 6px 10px;
    border: 2px solid var(--c-bl01);
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    width: 120px;
    text-align: center;
    box-sizing: border-box;
  }
  .offer .offer__btn .btn--ar {
    margin: 30px auto 0;
    max-width: 320px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .offer .offer__att {
    margin: 10px auto 0;
    text-align: center;
  }
  .offer .offer__att a {
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    text-underline-offset: 0.7em;
  }
  
  
  
  
}
@media screen and (min-width:1100px){
  .offer {
    margin: 80px -40px;
    width: calc(100% + 80px);
  }
}


/* -------------------------------------------- */

.committed__item {
  position: relative;
  margin: calc(40 / 670 * 100%) auto;
  background: var(--c-wh);
}
.committed__item .committed__textbox {
  box-sizing: border-box;
  display: block;
  padding: calc(40 / 670 * 100%);
}
.committed__item .committed__point {
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: 1em;
  font-family: var(--font-en-b);
  color: var(--c-bl02);
}
.committed__item .committed__title {
  margin: calc(10 / 610 * 100%) auto calc(20 / 610 * 100%);
  box-sizing: border-box;
  padding-bottom: calc(20 / 610 * 100%);
  border-bottom: 1px solid var(--c-bk);
  color: var(--c-bl01);
  font-size: var(--fs-36);
  line-height: var(--lh-36);
}
.committed__item .text {
  margin: 0 auto;
  line-height: calc(46 / 26 * 1em);
}

@media screen and (min-width:750px){
  .committed__list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-align-items: stretch;
      align-items: stretch;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
    position: relative;
    gap: 40px;
    margin: 80px auto;
  }
  .committed__item {
    margin: 0
  }
  .committed__item--half {
    width: calc((100% - 40px) /2);
  }
  .committed__item--long {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .committed__item .committed__textbox {
    background: var(--c-wh);
    box-sizing: border-box;
    display: block;
    padding: 40px;
  }
  .committed__item--long .committed__textbox {
    width: calc(480 / 1000 * 100%);
  }
  .committed__item--long .committed__image {
    width: calc(520 / 1000 * 100%);
    position: relative;
    background: var(--c-gr01);
  }
  .committed__item--long .committed__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom left;
  }
  .committed__item .committed__point {
    font-size: var(--fs-14);
  }
  .committed__item .committed__title {
    margin: 6px auto 20px;
    box-sizing: border-box;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-bk);
    color: var(--c-bl01);
    font-size: var(--fs-26);
    line-height: var(--lh-26);
  }
  .committed__item .text {
    margin: 0 auto;
    
    line-height: calc(36 / 16 * 1em);
  }  
  
  
}

/* -------------------------------------------- */

.features {
  position: relative;
  display: block;
  margin: var(--margin-140) auto;
  width: 100%;
}
.features .features__box {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding: calc(140 / 750 * 100%) 0;
  width: 100%;
  z-index: 3;
}
.features .features__logo {
  width: calc(297 / 750 * 100%);
  margin: 0 auto  calc(100 / 750 * 100%) ;
}
.features .features__image {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: calc(500 / 750 * 100%);
  width: calc(530 / 750 * 100%);
  margin: 0 auto;
}
.features__image .features__item {
  width: calc(280 / 530 * 100%);
  display: block;
  position: absolute;
}
.features__image .features__item--01 {
  top: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
}
.features__image .features__item--02 {
  bottom: 0;
  left: 0%;
}
.features__image .features__item--03 {
  bottom: 0;
  right: 0%;
}
.features__circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid var(--c-wh);
  border-radius: 50%;
  position: relative;
}
.features .features__image .features__item .features__text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: var(--c-wh);
  font-size: var(--fs-26);
  line-height: var(--lh-26);
  transform: translate3d(-50%,-50%,0);
}
.features .features__bg{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

@media screen and (min-width:750px){
.features {
  margin: 140px auto 80px;
}
  .features  + .box--40 {
    margin-top: 80px;
    margin-bottom: 140px;
  }
.features .features__box {
  padding: 80px 10px 60px;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.features .features__logo {
  width: calc(410 / 1000 * 100%);
  margin: 0;
}
  .features .features__logo img {
    max-width: 270px;
    margin: 0 auto;
  }
.features .features__image {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: calc(550 / 1000 * 100%);
  width: calc(590 / 1000 * 100%);
  margin: 0 auto;
}
.features__image .features__item {
  width: calc(280 / 590 * 100%);
  display: block;
  position: absolute;
}
.features__image .features__item--01 {
  top: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
}
.features__image .features__item--02 {
  bottom: 0;
  left: 0%;
}
.features__image .features__item--03 {
  bottom: 0;
  right: 0%;
}
.features__circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid var(--c-wh);
  border-radius: 50%;
  position: relative;
}
.features .features__image .features__item .features__text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: var(--c-wh);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  transform: translate3d(-50%,-50%,0);
}
.features .features__bg{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}  
}


/* -------------------------------------------- */
.btnbox__2col--detail {
  box-sizing: border-box;
  padding: 0 calc(30 / 670 * 100%);
}
@media screen and (min-width:750px){
  .btnbox__2col--detail {
    padding: 0;
  }
}

/* -------------------------------------------- */
.detail__acditem {
  border-bottom: 1px solid var(--c-bl02);
  padding: calc(10 / 610 * 100%) 0;
}
.detail__acditem:first-child {
  border-top: 1px solid var(--c-bl02);
}
.detail__acditem .detail__acdtitle {
  box-sizing: border-box;
  padding: calc(20 / 610 * 100%) calc(30 / 610 * 100%);
  display: block;
  cursor: pointer;
  font-size: var(--fs-24);
  position: relative;
  z-index: 2;
}
.detail__acditem .detail__acdtitle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  font-size: var(--fs-20);
  right: 1.5em;
  width: 1em;
  height: 1px;
  background: var(--c-bk);
  transform: rotate(0deg);
  transition: all .5s ease;
  opacity: 1;
}
.detail__acditem .detail__acdtitle:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  font-size: var(--fs-20);
  right: 1.5em;
  width: 1em;
  height: 1px;
  background: var(--c-bk);
  transform: rotate(90deg);
  transition: all .5s ease;
  opacity: 1;
}
.detail__acditem .detail__acd--open:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  font-size: var(--fs-20);
  right: 1.5em;
  width: 1em;
  height: 1px;
  background: var(--c-bk);
  transform: rotate(90deg);
  transition: all .5s ease;
  opacity: 0;
}
.detail__acditem .detail__acd--open:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  font-size: var(--fs-20);
  right: 1.5em;
  width: 1em;
  height: 1px;
  background: var(--c-bk);
  transform: rotate(180deg);
  transition: all .5s ease;
  opacity: 1;
}
.detail__acditem .detail__acdtext {
  box-sizing: border-box;
  padding: 0 calc(30 / 610 * 100%) calc(20 / 610 * 100%);
  display: block;
  position: relative;
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  color: var(--c-bl02);
}
.detail__acditem .detail__acdtext--att {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
}


@media screen and (min-width:750px){
  .detail__acditem {
    padding: 10px 0;
  }
.detail__acditem .detail__acdtitle {
  padding: 20px 30px;
  font-size: var(--fs-18);
}
.detail__acditem .detail__acdtext {
  padding: 0 30px 20px;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  position: relative;
}
.detail__acditem .detail__acdtext--att {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
}





/* -------------------------------------------- */
.otherproducts {
  display: block;
  margin: calc(80 / 670 * 100%) auto;
}
.otherproducts .otherproducts__item {
  margin: calc(40 / 670 * 100%) auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: var(--c-wh);
}
.otherproducts .otherproducts__image {
  position: relative;
  overflow: hidden;
  position: relative;
  width: 50%;
  height: auto;
  background: var(--c-gr01);
}
.otherproducts img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: all .5s ease;
}
.otherproducts a:hover img {
  transform: scale(1.03);
}
.otherproducts .otherproducts__textbox {
  display: block;
  box-sizing: border-box;
  padding: calc(40 / 670 * 100%);
  position: relative;
  width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items:stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  flex-flow: column;
  box-sizing: border-box;
}
.otherproducts .otherproducts__name {
  font-size: var(--fs-34);
  font-family: var(--font-en);
  font-weight: 400;
}
.otherproducts .otherproducts__catch {
  font-size: var(--fs-22);
  line-height: var(--lh-22);
}
.otherproducts .otherproducts__price {
}
.otherproducts .otherproducts__pricetitle {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  border-bottom: 1px solid var(--c-bk);
  padding-bottom: .3em;
  
}
.otherproducts .otherproducts__pricetext {
  font-size: var(--fs-34);
  line-height: 1em;
  font-family: var(--font-en);
  font-weight: 500;
  padding-top: .4em;
}
.otherproducts .otherproducts__price--tax {
  font-size: var(--fs-18);
  color: var(--c-bl02);
}

@media screen and (min-width:750px){
  .box--otherproducts {
    margin-top: 140px;
  }
  .otherproducts {
   margin: 80px auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: nowrap;
     flex-wrap: nowrap;
     -ms-align-items: stretch;
     align-items: stretch;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: center;
    gap: 40px;
}
.otherproducts .otherproducts__item {
  width: calc((100% - 40px ) / 2);
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: var(--c-wh);
}
.otherproducts .otherproducts__image {
  position: relative;
  overflow: hidden;
  position: relative;
  width: 250px;
  min-height: 250px;
}
.otherproducts .otherproducts__textbox {
  display: block;
  box-sizing: border-box;
  padding: 30px;
  position: relative;
  width: calc(100% - 250px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items:stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  flex-flow: column;
  box-sizing: border-box;
}
.otherproducts .otherproducts__name {
  font-size: var(--fs-24);
}
.otherproducts .otherproducts__catch {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}
.otherproducts .otherproducts__pricetitle {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
.otherproducts .otherproducts__pricetext {
  font-size: var(--fs-28);
}
.otherproducts .otherproducts__price--tax {
  font-size: var(--fs-14);
}

}