@charset “utf-8”;

@font-face {
  font-family: 'HigureGothic';
  src: url('/emmerdaycom/uploads/font/HigureGothic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HigureGothic-bold';
  src: url('/emmerdaycom/uploads/font/HigureGothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --colorBase: #6a764e;
  --colorAccent: #fd7202;
  --colorbg: #f1e9de;
  --fontEnglish-sofia: "sofia-pro", sans-serif;
  --fontEnglish-fields: "fields", sans-serif;
  --fontJp: 'HigureGothic', sans-serif;
  --fontJp-bold: 'HigureGothic-bold', sans-serif;
  --fontVariationSettings: 'wght' 400, 'wdth' 90;
  --fontSizeBasic: 1.4rem;
}
html {
    font-size: 62.5%; /* 16px * 62.5% = 10px */
}
@media(max-width: 1300px) {
    html {
        font-size: 60%;
    }
}
@media(max-width: 750px) {
    html {
        font-size: 55%;
    }
}
@media(max-width: 550px) {
    html {
        font-size: 50%;
    }
}

body {
    background: var(--colorbg);
    margin: 0;
    color: var(--colorBase);
    font-family: var(--fontJp) !important;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    font-size: var(--fontSizeBasic);
    letter-spacing: 1px;
    animation: menufix infinite 1s;
}
body .u-font__jp{
    font-family: var(--fontJp) !important;
    font-weight: 600;
}
a{
    color: var(--colorAccent);
}

/********
初期システムCSSを上書き
*********/
body .u-color__bg--base{
    background: var(--colorbg) !important;
}
body .list .select__wrap select{
    height: auto;
    padding: 5px 35px 5px 11px;
}

/********
下層ページCSSを上書き
*********/
body .l-container{
    position: relative;
    padding-top: 180px;
    background: #ffffff;
    padding-bottom: 340px;
}
@media(max-width: 750px) {
    body .l-container{
        padding-top: 30vw;
        padding-bottom: 60.3vw;
    }
}

/** マイページの調整 **/
body .l-container-mypage{
    padding-top: 100px;
}
@media(max-width: 750px) {
    body .l-container-mypage{
        padding-top: 16vw;
    }
}
@media(max-width: 750px) {
    .control-alert, .alert, .alert-danger {
        margin: 40px 0 100px 0;
    }
}

body #index-view{
    padding-top: 0px;
}
body .l-container .layer-page{
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
}
@media(max-width: 750px) {
    body .l-container .layer-page{
        width: 100%;
        max-width: 100%;
        padding: 0px;
    }
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--fontJp) !important;
}

/********
状態とフォント
*********/
.is-pc-block{
    display: block;
}
@media(max-width: 750px) {
    .is-pc-block{
        display: none;
    }
}
.is-sp-block{
    display: none;
}
@media(max-width: 750px) {
    .is-sp-block{
        display: block;
    }
}
.toleety .is-hidden {
    transition: .2s;
    opacity: 0;
}

.below-animation-1s{
    opacity: 0;
    transition: 1s;
    position: relative;
    top: 50px;
}
.below-animation-2s{
    opacity: 0;
    transition: 2s;
    position: relative;
}
.below-animation-4s{
    opacity: 0;
    transition: 4s;
    position: relative;
}
.below-animation-5s{
    opacity: 0;
    transition: 5s;
    position: relative;
}
.below-animation-6s{
    opacity: 0;
    transition: .6s;
    position: relative;
}
.below-animation-7s{
    opacity: 0;
    transition: .7s;
    position: relative;
}
.below-animation-8s{
    opacity: 0;
    transition: .8s;
    position: relative;
    top: 50px;
}
.active {
    opacity: 1;
    top: 0;
}

/********
ボタンアニメーション
*********/
body .btn-anime a {
    transition: all .3s;
    transform: scale(1);
}
body .btn-anime a:hover {
    transform: scale(1.05);
}

/********
loading
*********/
#loading{
    position: absolute;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: #fff;
    transition: opacity .8s ease;
    will-change: opacity;
    z-index: 1001;
}
#loading .loading__inner,
#loading img{
    width: 100%;
    height: 100%;
}
#loading img{
    object-fit: cover;
    transform: scale(1);
    animation: loadingZoom 8s ease-out forwards;
}
@keyframes loadingZoom{
    to{ transform: scale(1.12); }
}
#loading.is-hidden{
    opacity: 0;
    pointer-events: none;
}
#loading.is-scrolling{
    transition: opacity 0s linear;
}
@media (prefers-reduced-motion: reduce){
    #loading img{ animation: none; }
    #loading{ transition: opacity .2s ease, height .2s ease; }
}

/********
共通CSS？不明点
*********/
.font_space_01_tto {letter-spacing: -0.4em}
.font_space_02_fi {letter-spacing: -0.25em}
.font_space_03_kandoo {letter-spacing: 0.1em}
.font_space_04_taike {letter-spacing: 0.05em}
.font_space_05_izu {letter-spacing: -0.08em}
.font_space_06_ido {letter-spacing: -0.3em}
.font_space_07_rase {letter-spacing: -0.07em}
.font_space_08_ppu {letter-spacing: -0.2em}
.font_space_09_sto {letter-spacing: -0.3em}

/********
TOP
*********/
body .page-top{
    position: relative;
    background: var(--colorbg);
    padding-top: 0;
    padding-bottom: 60.3vw;
}
body .buy-links{
  position: fixed;
  bottom: -100px;
  left: 0;
  right: 0;
  width: 48vw;
  margin: 0 auto;
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 999;
}
/* 表示 */
.buy-links.is-visible {
  bottom: 30px;
  opacity: 1;
}
/* 非表示　*/
.buy-links.is-hidden {
  bottom: -100px;
  opacity: 0;
}
body .buy-links a {
    display: block;
    justify-content: space-around;
    background: #4c5d23;
    border-radius: 10px;
    padding: 4vw;
}
body .buy-links img{
    max-width: 38.1vw;
    width: 100%;
    margin: 0 auto;
    display: block;
}
.page-top .content-sub-title{
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    letter-spacing: 1px;
    color: var(--colorBase);
    margin-bottom: 4vw;
    font-family: var(--fontEnglish-fields);
    line-height: 1;
    font-weight: bold;
}
.page-top .content-title{
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 3px;
    color: var(--colorBase);
    margin-bottom: 13.3vw;
    font-weight: bold;
    font-family: var(--fontJp-bold);
    line-height: 1;
}
@media (min-width: 750px) {
    body .buy-links{
        display: none;
    }
    .page-top .content-sub-title{
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .page-top .content-title{
        font-size: 2.6rem;
        margin-bottom: 50px;
    }
}

/* concept */
.page-top .concept{
    position: relative;
}
.page-top .concept .video-area{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100svh;
    margin-bottom: 17.3vw;
}
.page-top .concept .video-area #video{
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100svh;
}
.page-top .concept .inner{
    padding: 0 8vw;
}
.page-top .concept .content-sub-title{
    margin-bottom: 7.33vw;
}
.page-top .concept .content-title{
    letter-spacing: 0px;
    margin-bottom: 6vw;
    line-height: 1.5;
}
.page-top .concept .concept-desc {
  margin-bottom: 12vw;
}
.page-top .concept .concept-desc p {
    font-size: clamp(1.7rem, 4vw, 3.2rem);
    color: var(--colorBase);
    line-height: 1.8;
    font-weight: 600;
}
.page-top .concept .buy-links-top{
    display: none;
}
@media (min-width: 750px) {
    .page-top .concept .video-area{
        width: 100%;
        max-width: 920px;
        margin: 0 auto 35px;
        height: 518px;
    }
    .page-top .concept .video-area #video{
        height: 518px;
    }
    .page-top .concept .inner{
        position: relative;
        padding: 0 140px;
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
    }
    .page-top .concept .content-sub-title{
        margin-bottom: 20px;
    }
    .page-top .concept .content-title{
        margin-bottom: 23px;
    }
    .page-top .concept .concept-desc {
        margin-bottom: 112px;
    }
    .page-top .concept .concept-desc p {
        font-size: 1.6rem;
    }
    .page-top .concept .buy-links-top{
        display: block;
        position: absolute;
        bottom: 0; right: 140px;
        width: 173px;
        transition: all 0.6s ease;
        z-index: 1;
    }
    .page-top .concept .buy-links-top a {
        display: block;
        background: #4c5d23;
        border-radius: 10px;
        padding: 12px 13px 12px 18px;
    }
    .page-top .concept .buy-links-top img {
        width: 100%;
        display: block;
    }
}

/* message */
.page-top .message{
    position: relative;
}
.page-top .message #main-img{
    width: 100%;
    margin: 0 auto 12.6vw;
}
.page-top .message .inner{
    padding: 0 8vw;
}
.page-top .message .content-title{
    font-size: clamp(2.5rem, 6.4vw, 5rem);
    letter-spacing: 0px;
    margin-bottom: 6vw;
    line-height: 1.5;
}
.page-top .message .content-sub-title{
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0px;
    margin-bottom: 10.6vw;
    font-family: var(--fontJp);
}
.page-top .message .message-desc {
  margin-bottom: 12vw;
}
.page-top .message .message-desc p {
    margin-bottom: 10.4vw;
    font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    color: var(--colorBase);
    line-height: 1.8;
    font-weight: 600;
}
.page-top .message .message-desc p:last-child {
  margin-bottom: 0;
}
.page-top .message .message-links{
}
.page-top .message .message-links a {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #7e8b60;
    border-radius: 10px;
    color: var(--colorbg);
    padding: 6vw 5.33vw;
}
.page-top .message .message-links .message-dot {
  width: 3.46vw;
  height: 3.46vw;
  background: #5c6a3a;
  border-radius: 50px;
}
.page-top .message .message-links .message-text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-top .message .message-links .message-text img{
    max-width: 33.6vw;
    width: 50%;
    margin-right: 1.3vw;
    margin-left: 3.33vw;
}
.page-top .message .message-links .message-text span{
    font-size: clamp(1.7rem, 4.53vw, 3.4rem);
}
@media (min-width: 750px){
    .page-top .message{
        position: relative;
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
    }
    .page-top .message #main-img{
        margin: 0;
        position: relative;
        z-index: 0;
    }
    .page-top .message .inner{
        position: absolute;
        top: 12%;
        right: 7%;
        padding: 0;
        width: 40%;
        max-width: 290px;
    }
    .page-top .message .content-title{
        font-size: 2.6rem;
        margin-bottom: 40px;
    }
    .page-top .message .content-sub-title{
        display: none;
    }
    .page-top .message .message-desc{
        margin-bottom: 30px;
    }
    .page-top .message .message-desc p{
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 45px;
        letter-spacing: 0px;
    }
    .page-top .message .message-links a{
        padding: 16px 17px;
    }
    .page-top .message .message-links .message-dot{
        width: 13px;
        height: 13px;
    }
    .page-top .message .message-links .message-text img{
        max-width: 118px;
        width: 50%;
        margin-right: 6px;
        margin-left: 14px;
    }
    .page-top .message .message-links .message-text span{
        font-size: 16px;
    }
}

/* product */
.page-top .product{
    padding: 50vw 0 40.6vw 0;
}
.page-top .product .content-sub-title{
    margin-bottom: 6.66vw;
    padding: 0 8vw;
}
.page-top .product .content-title{
    font-size: clamp(2.5rem, 6.66vw, 5rem);
    letter-spacing: 3px;
    margin-bottom: 15.3vw;
    line-height: 1.5;
    padding: 0 8vw;
}
/* ===========================
   Slider共通部分
=========================== */
.product-visual-track {
}
.page-top .product .product-spec {
  text-align: center;
  padding: 0 8vw;
  margin-top: calc(16vw / 2);
}
.page-top .product .product-spec .box {
  border-bottom: 3px solid #cb8775;
  display: inline-flex;
  align-items: center;
  padding: 0 2.13vw 2.66vw 2.13vw;
  line-height: 1;
  color: #cb8775;
}
.page-top .product .product-spec .product-spec-color {
  font-size: clamp(1.9rem, 5.06vw, 3.83rem);
  margin-right: 7.2vw;
  font-family: var(--fontEnglish-fields);
}
.page-top .product .product-spec .product-spec-size {
  font-size: clamp(2.75rem, 7.3vw, 5.5rem);
  font-family: var(--fontEnglish-fields);
}
/* ===========================
   スライダー部分（スマホ）
=========================== */
.product-visual-viewport {
    position: relative;
    overflow: hidden;
    padding: 0 12vw;/* 左右に余白で「半分見せる」 */
}
.swiper-wrapper .product-visual-slide {
  width: 55vw;
  display: grid;
  place-items: center;
}
.swiper-wrapper .product-visual-slide img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 5;
}
/* 中央を強調 */
.swiper-wrapper .swiper-slide {
    transition: transform .35s ease, opacity .35s ease;
    transform: scale(0.7) !important;
    opacity: 1;
}
.swiper-wrapper .swiper-slide-active {
    transform: scale(1) !important;
}
/* 左矢印 */
.product-visual-viewport .swiper-button-prev {
  left: calc(50% - 38vw);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #f8f5f0;
  position: absolute;
  bottom: -60px;
  z-index: 1;
  pointer-events: auto;
}
.product-visual-viewport .swiper-button-prev::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 10px;
  height: 1px;
  background-color: #b99a70;
  transform: rotate(-30deg);
  transform-origin: left center;
}
.product-visual-viewport .swiper-button-prev::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: #b99a70;
  transform: translateY(-50%);
}
/* 右矢印 */
.product-visual-viewport .swiper-button-next {
  right: calc(50% - 38vw);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #f8f5f0;
  position: absolute;
  bottom: -60px;
  z-index: 1;
  pointer-events: auto;
}
.product-visual-viewport .swiper-button-next::before {
  content: "";
  position: absolute;
  right: 8px;
  width: 10px;
  height: 1px;
  background-color: #b99a70;
  transform: rotate(30deg);
  transform-origin: right center;
}
.product-visual-viewport .swiper-button-next::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: #b99a70;
  transform: translateY(-50%);
}

/* タブレット：Swiperに幅計算を任せる */
@media (min-width: 750px) and (max-width: 1023.98px){
  .product-visual-viewport{
    padding: 0 8vw;
  }
  .swiper-wrapper .product-visual-slide{
    width: auto;
  }
  .swiper-wrapper .swiper-slide{
    transform: scale(0.85) !important;
  }
  .swiper-wrapper .swiper-slide-active{
    transform: scale(1) !important;
  }
}

/* ===========================
   PC版（1024px以上）
=========================== */
@media (min-width: 1024px){
  .product-visual-viewport {
    padding: 0; /* 端の見切りをやめる */
  }
  .product-visual-slide {
    width: auto; /* SwiperのslidesPerView=5で自動幅 */
  }
}
.page-top .product .product-desc {
  margin-top: 18.6vw;
  margin-bottom: 10.6vw;
  padding: 0 8vw;
}
.page-top .product .product-desc p {
  margin-bottom: 10.4vw;
  font-size: clamp(1.4rem, 3.73vw, 2.8rem);
  color: var(--colorBase);
  line-height: 2;
}
.page-top .product .product-desc p:last-child {
  margin-bottom: 0;
}
/* currentColor にして、文字色とボーダー色を連動 */
.page-top .product .product-spec .box{
  border-bottom: 3px solid currentColor;
  color: #cb8775; /* デフォルト */
}
#product-spec .label,
#product-spec .size{
  transition: opacity .25s ease, transform .25s ease;
}
#product-spec.is-updating .label,
#product-spec.is-updating .size{
  opacity: 0;
  transform: translateY(4px);
}
#product-spec { color: #cb8775; }
#product-spec .box { color: inherit; }
#product-spec.spec--pink  { color: #cb8775; }
#product-spec.spec--kahki { color: #6a764e; }
#product-spec.spec--brown { color: #925b5a; }
#product-spec.spec--black { color: #6a5b57; }

.page-top .product .product-links{
    padding: 0 8vw;
}
.page-top .product .product-links a {
  display: flex;
  align-items: center;
  background: #7e8b60;
  border-radius: 10px;
  color: var(--colorbg);
  padding: 6vw 5.33vw;
}
.page-top .product .product-links .product-dot {
  width: 3.46vw;
  height: 3.46vw;
  background: #5c6a3a;
  border-radius: 50px;
  margin-right: 4.53vw;
}
.page-top .product .product-links .product-text {
  font-size: clamp(1.7rem, 4.53vw, 3.4rem);
}
@media (min-width: 750px){
    .page-top .product {
        padding: 112px 0 140px 0;
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
    }
    .page-top .product .content-sub-title{
        margin-bottom: 22px;
        padding: 0 85px;
    }
    .page-top .product .content-title{
        margin-bottom: 43px;
        padding: 0 85px;
        font-size: 2.6rem;
    }
    .product-visual-viewport .swiper-button-next{
        right: 0;
        width: 35px;
        height: 35px;
        left: 22%;
        top: 55%;
        margin: calc(0px - (var(--swiper-navigation-size) / 2)) auto 0;
    }
    .product-visual-viewport .swiper-button-prev{
        right: 22%;
        width: 35px;
        height: 35px;
        left: 0;
        top: 55%;
        margin: calc(0px - (var(--swiper-navigation-size) / 2)) auto 0;
    }
    .page-top .product .product-spec{
        padding: 0 85px;
        margin-top: calc(60px / 2);
    }
    .page-top .product .product-spec .box{
        padding: 0 8px 12px 8px;
    }
    .page-top .product .product-spec .product-spec-color{
        font-size: 1.9rem;
        margin-right: 28px;
    }
    .page-top .product .product-spec .product-spec-size{
        font-size: 2.9rem;
    }
    .page-top .product .product-desc{
        margin-top: 70px;
        margin-bottom: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .page-top .product .product-desc p{
        margin-bottom: 0;
        font-size: 1.6rem;
    }
    .page-top .product .product-links {
        padding: 0;
        width: 290px;
        margin: 0 auto;
    }
    .page-top .product .product-links a{
        padding: 22px 18px;
    }
    .page-top .product .product-links .product-dot{
        margin-right: 15px;
        width: 13px;
        height: 13px;
    }
    .page-top .product .product-links .product-text{
        font-size: 1.6rem;
    }
}

/* SUPPORT */
.page-top .support{
    padding: 14vw 8vw 15.3vw 8vw;
    position: relative;
    background-image: url("/emmerdaycom/uploads/img/top/support_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.page-top .support .content-sub-title{
    letter-spacing: 1px;
    color: var(--colorbg);
    margin-bottom: 7.33vw;
    /* text-shadow: 
    0 0 21px rgba(215, 215, 196, 0.48),
    0 0 5px rgba(215, 215, 196, 0.3);  */
}
.page-top .support .content-title{
    font-size: clamp(2.5rem, 6.66vw, 5rem);
    letter-spacing: 5px;
    color: var(--colorbg);
    margin-bottom: 13.3vw;
    /* text-shadow: 
    0 0 21px rgba(215, 215, 196, 0.48),
    0 0 5px rgba(215, 215, 196, 0.3); */
    line-height: 1.5;
}
.page-top .support-inner{
}
.page-top .support-list{
}
.page-top .support-list li{
    margin-bottom: 4vw;
}
.page-top .support-list li:last-child{
    margin-bottom: 0;
}
.page-top .support-list li a{
    display: flex;
    align-items: center;
    background: rgba(255, 247, 243, 0.9);
    border-radius: 10px;
    color: #a15f45;
    padding: 6vw 5.33vw;
}
.page-top .support-list li .support-dot{
    width: 3.46vw;
    height: 3.46vw;
    background: #a15f45;
    border-radius: 50px;
    margin-right: 4.53vw;
}
.page-top .support-list li .support-text{
    font-size: clamp(1.7rem, 4.53vw, 3.4rem);
}
@media (min-width: 750px){
    .page-top .support{
        padding: 75px 180px 62px 145px;
        position: relative;
        background-image: url("/emmerdaycom/uploads/img/top/support_bg_pc.jpg");
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .page-top .support .box{
        max-width: 235px;
        width: 48%;
    }
    .page-top .support .content-sub-title{
        margin-bottom: 25px;
    }
    .page-top .support .content-title{
        font-size: 26px;
        margin-bottom: 0;
    }
    .page-top .support-inner {
        max-width: 272px;
        width: 48%;
    }
    .page-top .support-list li{
        margin-bottom: 15px;
    }
    .page-top .support-list li a{
        padding: 20px 17px;
    }
    .page-top .support-list li .support-dot{
        width: 12px;
        height: 12px;
        margin-right: 14px;
    }
    .page-top .support-list li .support-text{
        font-size: 16px;
    }
}

/* NEWS */
.page-top .news{
    padding: 25.3vw 8vw 31.3vw 8vw;
}
.page-top .news-inner{
    position: relative;
}
.page-top .news-list{
    margin-bottom: 6.66vw;
}
.page-top .news-list a{
    color: var(--colorBase);
}
.page-top .news-list li{
    padding-bottom: 7.33vw;
    margin-bottom: 7.33vw;
    border-bottom: 2px dotted #c5bcac;
}
.page-top .news-list li:last-child{
    margin-bottom: 0vw;
}
.page-top .news-meta{
    display: flex;
    align-items: center;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: bold;
    font-family: var(--fontEnglish-sofia);
}
.page-top .news-meta .news-badge{
    font-size: clamp(1rem, 2.66vw, 2rem);
    color: #ffffff;
    background: #89a44b;
    line-height: 1;
    padding: 1vw 2.66vw 1.1vw 2.66vw;
    border-radius: 50px;
    margin-left: 3.6vw;
    font-family: var(--fontJp);
}
.page-top .news-meta .pickup{
    background: var(--colorAccent);
    font-family: var(--fontEnglish-sofia);
}
.page-top .news-list .news-text{
    margin-top: 4vw;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 600;
}
.page-top .list-btn{
    text-align: right;
}
.page-top .list-btn .arrow{
    position: relative;
    display: flex;
    align-items: center;
    font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    color: var(--colorBase);
    justify-content: end;
}
.page-top .list-btn .arrow span {
    margin-right: 9.33vw;
    font-weight: 600;
}
.page-top .list-btn .arrow::after {
    content: "";
    position: absolute;
    right: 0;
    width: 32px;
    height: 1px;
    background-color: #b99a70;
}
.page-top .list-btn .arrow::before {
    content: "";
    position: absolute;
    right: 0;
    width: 14px;
    height: 1px;
    background-color: #b99a70;
    transform: translateX(0) rotate(30deg);
    transform-origin: right center;
}
.page-top .list-btn .arrow::after,
.page-top .list-btn .arrow::before {
    transition: transform 0.3s ease;
}
.page-top .list-btn .arrow:hover::after {
    transform: translateX(6px);
}
.page-top .list-btn .arrow:hover::before {
    transform: translateX(6px) rotate(30deg);
}
@media (min-width: 750px){
    .page-top .news{
        padding: 140px 85px 180px 85px;
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
    }
    .page-top .news-inner{
        position: relative;
    }
    .page-top .news-list{
        margin-bottom: 25px;
    }
    .page-top .news-list a{
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .page-top .news-list li{
        padding-bottom: 26px;
        margin-bottom: 26px;
    }
    .page-top .news-meta{
        font-size: 16px;
    }
    .page-top .news-meta .news-badge{
        font-size: 11px;
        padding: 3px 7px;
        margin-left: 10px;
    }
    .page-top .news-list .news-text{
        margin-top: 0;
        font-size: 16px;
    }
    .page-top .list-btn{
        text-align: right;
    }
    .page-top .list-btn .arrow{
        font-size: 16px;
    }
    .page-top .list-btn .arrow span {
        margin-right: 34px;
    }
    .page-top .list-btn .arrow::after {
        width: 26px;
    }
    .page-top .list-btn .arrow::before {
        width: 10px;
    }
}

/********
footer
*********/
footer{
    position: relative;
    background: var(--colorBase);
}
footer a{
    opacity: 1;
    color: var(--colorbg);
    transition: .3s;
}
footer a:hover{
    opacity: 0.5;
}
footer .logo{
    max-width: 458px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -125px;
}
footer .menu-block{
    display: flex;
    align-items: flex-start;
    max-width: 920px;
    margin: 0 auto;
    padding: 160px 60px 195px;
    gap: 150px;
    box-sizing: border-box;
}
footer .main-menu{
    width: 60%;
    max-width: 400px;
}
footer .main-menu li{
    font-size: 1.8rem;
    line-height: 1;
    border-bottom: 1px solid var(--colorbg);
    margin-bottom: calc(50px / 2);
    padding-bottom: calc(50px / 2);
    font-family: var(--fontEnglish-fields);
}
footer .main-menu li:last-child{
    margin-bottom: 0px;
}
footer .sub-menu{
    font-size: 1.8rem;
}
footer .sub-menu li{
    margin-top: calc(60px / 2);
}
footer .sub-menu li:first-child{
    margin-top: 0px;
}
footer .sub-menu .sns-icon{
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: calc(115px / 2);
}
footer .sub-menu .sns-icon li{
    margin-top: 0px;
    max-width: 35px;
}
footer .copy{
    font-size: 1.8rem;
    text-align: center;
    padding: 0px 0 62px;
    color: var(--colorbg);
    font-family: var(--fontEnglish-sofia);
}
@media(max-width: 750px) {
    footer{
    }
    footer .logo{
        width: 100%;
        padding: 0 6.26vw;
        top: -21.7vw;
    }
    footer .menu-block{
        align-items: flex-start;
        padding: 9.33vw 7.73vw 11.3vw;
        gap: 12.8vw;
        flex-direction: column;
    }
    footer .main-menu {
        width: 100%;
    }
    footer .main-menu li{
        margin-bottom: 6vw;
        padding-bottom: 4.8vw;
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    footer .main-menu li a{
        padding-left: 1.33vw;
    }
    footer .sub-menu {
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    footer .sub-menu li{
        margin-top: 8vw;
    }
    footer .sub-menu .sns-icon{
        gap: 6.6vw;
        margin-top: 10.6vw;
    }
    footer .sub-menu .sns-icon li{
        max-width: 8vw;
    }
    footer .copy{
        padding: 0 7.73vw 6.6vw;
        font-size: clamp(1.2rem, 3.2vw, 2.4rem);
    }
}

/********
header-main
*********/
.header-main {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transform: none;
  transition:
    transform .42s cubic-bezier(.2,.7,.2,1),
    background .28s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.header-main.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translate3d(0,-120%,0);
}
.header-main.is-visible {
  transform: translate3d(0,0,0);
}
.header-main.has-bg {
  background: var(--colorbg);
}
#js-.header-main:not(.has-bg) {
  background: transparent !important;
}
.header-main .main-menu{
    background: transparent;
    padding: 20px 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 752px;
    margin: 0 auto;
    box-sizing: border-box;
}
.header-main .logo{
    opacity: 1;
    transition: all .3s;
    max-width: 183px;
}
.header-main .logo:hover{
    opacity: 0.5;
}
.header-main .buy-links-header{
    display: block;
    width: 173px;
    z-index: 1;
    position: absolute;
    top: 19px; right: 126px;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(-10px);
    opacity: 0;
}
.header-main .buy-links-header a {
    display: block;
    background: #4c5d23;
    border-radius: 10px;
    padding: 12px 13px 12px 18px;
}
.header-main .buy-links-header img {
    width: 100%;
    display: block;
}
#header-btn-trigger{
  display:block;
  width:1px;
  height:1px;
}
.header-main .buy-links-header.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.header-main .menu-area{
    display: flex;
    align-items: center;
}
.header-main .mypage-icon{
    margin-right: 20px;
    width: 100%;
    max-width: 40px;
    opacity: 1;
    transition: all .3s;
}
.header-main .mypage-icon:hover{
    opacity: 0.5;
}
@media(max-width: 750px) {
    .header-main .main-menu{
        padding: 4vw 7.33vw;
    }
    .header-main .logo{
        max-width: 39.2vw;
    }
    .header-main .buy-links-header{
        display: none;
    }
    .header-main .mypage-icon{
        margin-right: 4.93vw;
        width: 8vw;
        max-width: 80px;
    }
}

/********
スマホメニュー
*********/
@keyframes menufix {
from {
    padding: 0;
}
to {
    padding: 0;
}
}
@-webkit-keyframes menufix {
from {
    padding: 0;
}
to {
    padding: 0;
}
}

.header-main #overlay-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 2600;
  -webkit-tap-highlight-color: transparent;
}
.header-main #overlay-button span,
.header-main #overlay-button span::before,
.header-main #overlay-button span::after {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--colorBase);
  transform: translateX(-50%);
  content: "";
  transition: all .2s ease-in-out;
}
.header-main #overlay-button span {
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-main #overlay-button span::before {
  top: calc(50% - 8px);
}
.header-main #overlay-button span::after {
  top: calc(50% + 8px);
}
/* hover時 */
.header-main #overlay-button:hover span,
.header-main #overlay-button:hover span::before,
.header-main #overlay-button:hover span::after {
  background: var(--colorBase);
}
/* input制御 */
.header-main input[type=checkbox] {
  display: none;
}
.header-main input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}
/* チェック時：真ん中を消してX */
.header-main input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
.header-main input[type=checkbox]:checked ~ #overlay-button span::before {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  background-color: var(--colorbg);
}
.header-main input[type=checkbox]:checked ~ #overlay-button span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  top: 50%;
  background-color: var(--colorbg);
}
/* チェック時はスクロール禁止 */
html:has(#overlay-input:checked),
body:has(#overlay-input:checked) {
  overflow: hidden;
}

/* ========== overlay を常にフルスクリーンに ========== */
.header-main #overlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(106,118,78,0.90);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.header-main:has(#overlay-input:checked) #overlay{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.header-main:has(#overlay-input:checked){
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: none;
  background: transparent;
  z-index: 1500;
}
.header-main #overlay.active {
}
.header-main #overlay .menu-block {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding-left: 0;
    list-style-type: none;
    padding: 0px 80px 0px;
    gap: 150px;
    box-sizing: border-box;
}
.header-main #overlay .menu-block a{
    color: var(--colorbg);
}
.header-main .menu{
    width: 60%;
    max-width: 400px;
}
.header-main .menu li{
    font-size: clamp(1.5rem, 2.4vw, 1.8rem);
    line-height: 1;
    border-bottom: 1px solid var(--colorbg);
    margin-bottom: 40px;
    padding-bottom: 40px;
    font-family: var(--fontEnglish-fields);
}
.header-main .menu li:last-child{
    margin-bottom: 0px;
}
.header-main .menu li a{
    padding-left: 10px;
}
.header-main .sub-menu{
    font-size: clamp(1.5rem, 2.4vw, 1.8rem);
}
.header-main .sub-menu li{
    margin-top: 40px;
}
.header-main .sub-menu li:first-child{
    margin-top: 0px;
}
.header-main .sub-menu .sns-icon{
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 115px;
}
.header-main .sub-menu .sns-icon li{
    margin-top: 0px;
    max-width: 45px;
}
@media(max-width: 750px) {
    /* タップ領域 */
    .header-main #overlay-button{

    }

    .header-main #overlay-button span,
    .header-main #overlay-button span::before,
    .header-main #overlay-button span::after{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 25px;
        height: 2px;
        background-color: var(--colorBase);
        border-radius: 2px;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
        transition: transform .2s ease-in-out, background-color .2s ease-in-out;
        content: "";
    }
    .header-main #overlay-button span{}

    .header-main #overlay-button span::before{
        transform: translate(-50%, calc(-50% - 8px));
    }
    .header-main #overlay-button span::after{
        transform: translate(-50%, calc(-50% + 8px));
    }
    .header-main input[type=checkbox]:checked ~ #overlay-button span{
        background: transparent;
    }
    .header-main input[type=checkbox]:checked ~ #overlay-button span::before{
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: var(--colorbg);
    }
    .header-main input[type=checkbox]:checked ~ #overlay-button span::after{
        transform: translate(-50%, -50%) rotate(-45deg);
        background-color: var(--colorbg);
    }
    .header-main #overlay .menu-block{
        align-items: flex-start;
        padding: 0 10vw 0;
        /* gap: 9.06vw; */
        gap: 5.06vw;
        flex-direction: column;
    }
    .header-main .menu {
        width: 100%;
    }
    .header-main .menu li{
        /* margin-bottom: 6vw;
        padding-bottom: 4.8vw; */
        margin-bottom: 5vw;
        padding-bottom: 3.8vw;
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .header-main .menu li a{
        padding-left: 1.33vw;
    }
    .header-main .sub-menu {
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .header-main .sub-menu li{
        /* margin-top: 6vw; */
        margin-top: 5vw;
    }
    .header-main .sub-menu .sns-icon{
        gap: 6.6vw;
        /* margin-top: 10.6vw; */
        margin-top: 8.6vw;
    }
    .header-main .sub-menu .sns-icon li{
        max-width: 8vw;
    }
}
@media(max-width: 410px) {
    .header-main .menu li{
        font-size: clamp(1.2rem, 3.2vw, 2.4rem);
    }
    .header-main .sub-menu {
        font-size: clamp(1.2rem, 3.2vw, 2.4rem);
    }
}

/** モーダル アニメーション **/
.mfp-fade.mfp-bg {
opacity: 0;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}

/** モーダル アニメーション **/
.mfp-fade.mfp-bg {
opacity: 0;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;

-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}

/*** ポップアップ ***/
.mfp-content .popup{
    padding: 20px;
    box-sizing: border-box;
}
.mfp-content .popup li .video{
    margin: 0 auto;
    display: block;
    max-width: 1200px;
    text-align: center;
    padding: 50px;
}
.mfp-content .popup li .video iframe{
    width: 100%;
    height: 500px;
}
@media(max-width: 750px) {
    .mfp-content .popup li .video{
        padding: 15px;
    }
    .mfp-content .popup li .video iframe{
        height: 200px;
    }
}
.mfp-content .close{
    text-align: center;
    display: block;
    border: 1px solid;
    max-width: 210px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    font-size: 15px;
    background: #ffffff;
}
.mfp-close-btn-in .mfp-close{
    color: #ffffff !important;
}
/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/********
contact-page
*********/
.contact-page .contact-inner{
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.contact-page .page-title{
    font-size: 2.2rem;
    letter-spacing: 6px;
    text-align: center;
    line-height: 1.2;
    color: #6a764e !important;
    font-family: var(--fontJp-bold);
}
.contact-page .contact__wrap {
    max-width: 800px;
    margin: auto;
    box-sizing: border-box;
    margin-top: 90px;
}
.contact-page .contact__wrap a{
    color: var(--colorAccent);
}
@media(max-width: 750px) {
    .contact-page .contact-inner {
        padding: 0 8vw;
    }
    .contact-page .page-title{
        font-size: clamp(2.2rem, 5.86vw, 4.4rem);
    }
    .contact-page .contact__wrap {
        padding: 0 8vw;
        margin-top: 12vw;
    }
    .contact-page .text-box dl dt {
        font-size: calc(18px + 10 * ((100vw - 450px) / 1450));
    }
    .contact-page .text-box dl dd {
        font-size: calc(14px + 10 * ((100vw - 450px) / 1450));
    }
    body .list .select__wrap select {
        padding: 10px 35px 10px 11px;
        font-size: calc(14px + 10 * ((100vw - 450px) / 1450));
    }
    .contact-page .message_box p {
        font-size: calc((100vw - 450px) / 190 + 24px / 2);
    }
    .contact-page .attention {
        font-size: calc((100vw - 450px) / 190 + 24px / 2);
    }
    .contact-page .form__wrap .form__caution {
        font-size: calc((100vw - 450px) / 190 + 24px / 2);
    }
    .contact-page .form__wrap .form__txt {
        font-size: calc((100vw - 450px) / 190 + 24px / 2);
    }
    body .contact .list .ttl{
        font-size: calc(16px + 10 * ((100vw - 450px) / 1450));
    }
    body span.required{
        font-size: calc(16px + 10 * ((100vw - 450px) / 1450));
    }
}

/* ===========================
   マイページ
=========================== */
.p-account .p-account__inner__content__title,
.p-account .p-mypage__block__title,
.p-account .c-account_menu__list .u-text--subhead{
    color: #6a764e !important;
}
.p-account .u-color__btn--bg,
.c-account_menu__logout{
    background: #7e8b60 !important;
}
.p-account .u-text--btn{
    color: #f1e9de !important;
}
.p-account .p-account__inner__content__form__bottom__btn{
    text-align: center;
}
.p-account .c-form_table__select > *{
    line-height: 40px;
}
.c-account_menu__toggle-button-text{
    font-size: 2rem !important;
}


/********
下層ページ共通
*********/
body .page-layer{
    position: relative;
    background: var(--colorbg);
    padding-top: 0;
    padding-bottom: 337px;
}
body .page-layer .inner{
    position: relative;
    padding: 0 140px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
body .page-layer .main-img{
    position: relative;
}
@media(max-width: 750px) {
    body .page-layer{
        padding-bottom: 44.9vw;
    }
    body .page-layer .inner{
        padding: 0 8vw;
    }
}

/********
下層ページ aboutus
*********/
.page-aboutus .about-hero{
    width: 100%;
    max-width: 920px;
    margin: 0 auto 18px;
}
.page-aboutus .about-hero .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 10px;
}
.page-aboutus .about{
    position: relative;
}
.page-aboutus .about .content-sub-title{
    color: var(--colorBase);
    margin-bottom: 16px;
    font-family: var(--fontEnglish-fields);
    line-height: 1;
    font-weight: bold;
    font-size: 1.6rem;
}
.page-aboutus .about .content-title{
    color: var(--colorBase);
    font-size: 2.6rem;
    display: flex;
    font-family: var(--fontJp-bold) !important;
    margin-bottom: 14px;
}
.page-aboutus .about .content-title .logo{
    width: 30%;
    max-width: 181px;
}
.page-aboutus .about .content-title  span{
    padding: 0 4px;
}
.page-aboutus .about .desc{
    color: var(--colorBase);
    font-size: 1.6rem;
}
.page-aboutus .product-links {
    padding: 0;
    margin: 45px auto 0;
    display: flex;
    flex-wrap: wrap;
}
.page-aboutus .product-links li{
    margin-right: 10px;
    margin-bottom: 10px;
}
.page-aboutus .product-links a {
    display: flex;
    align-items: center;
    background: #7e8b60;
    border-radius: 10px;
    color: var(--colorbg);
    padding: 15px 12px;
    line-height: 1;
}
.page-aboutus .product-links .product-dot {
    width: 8px;
    height: 8px;
    background: #5c6a3a;
    border-radius: 50px;
    margin-right: 8px;
}
.page-aboutus .product-links .product-text {
    font-size: 1.1rem;
    color: #f1e9de;
    letter-spacing: 0px;
}
@media(max-width: 750px) {
    .page-aboutus .about-hero{
        margin: 0 auto 12vw;
    }
    .page-aboutus .about-hero .text-mini{
        font-size: clamp(0.9rem, 3.3vw, 1.8rem);
        text-align: left;
        margin-top: 1.33vw;
        padding: 0 3.3vw;
    }
    .page-aboutus .about .content-sub-title{
        margin-bottom: 6vw;
        font-size: clamp(2.5rem, 6.6vw, 5rem);
    }
    .page-aboutus .about .content-title{
        font-size: clamp(3rem, 8vw, 6rem);
        margin-bottom: 8vw;
        flex-direction: column;
    }
    .page-aboutus .about .content-title .ttlbox{
        display: flex;
    }
    .page-aboutus .about .content-title .logo {
        width: 70%;
        max-width: 417px;
    }
    .page-aboutus .about .desc{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
    }
    .page-aboutus .product-links{
        flex-direction: column;
        margin: 14.4vw auto 0;
    }
    .page-aboutus .product-links li {
        margin-right: 0;
        margin-bottom: 2.66vw;
    }
    .page-aboutus .product-links li:last-child{
        margin-bottom: 0;
    }
    .page-aboutus .product-links a{
        padding: 6.66vw 5.33vw;
    }
    .page-aboutus .product-links .product-dot{
        width: 2.66vw;
        height: 2.66vw;
        margin-right: 5.33vw;
    }
    .page-aboutus .product-links .product-text{
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
}

.page-aboutus .why{
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding-top: 110px;
}
.page-aboutus .why .ttl{
    display: flex;
    font-size: 2.6rem;
    color: var(--colorBase);
    font-family: var(--fontJp-bold) !important;
    align-items: center;
    margin-bottom: 10px;
}
.page-aboutus .why .ttl .logo{
    width: 50%;
    max-width: 181px;
}
.page-aboutus .why .text-box{
    position: absolute;
    color: var(--colorBase);
    top: 16%;
    right: 10%;
    padding: 0;
    width: 50%;
    max-width: 412px;
}
.page-aboutus .why .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 10px;
}
.page-aboutus .why .text-box .content-title{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.2rem;
    margin-bottom: 25px;
}
.page-aboutus .why .text-box .content-sub-title{
    font-size: 1.5rem;
}
.page-aboutus .why .text-box .why-desc{
    margin-top: 3.33vw;
    margin-left: 64px;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0px;
}
.page-aboutus .why .fit-box{
    margin-top: 60px;
    display: flex;
    gap: 30px;
    color: var(--colorBase);
    margin-bottom: 75px;
}
.page-aboutus .why .fit-box .text{
    width: 50%;
}
.page-aboutus .why .fit-box .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.2rem;
    margin-bottom: 45px;
}
.page-aboutus .why .fit-box .desc{
    font-size: 1.4rem;
    line-height: 2.3;
}
.page-aboutus .why .fit-box .why-icon{
    max-width: 306px;
    width: 100%;
}
.page-aboutus .why .make-box{
    color: var(--colorBase);
}
.page-aboutus .why .make-box .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.2rem;
    margin-bottom: 25px;
}
.page-aboutus .why .make-box .desc{
    font-size: 1.4rem;
    line-height: 2.3;
}
@media(max-width: 750px) {
    .page-aboutus .why{
        padding-top: 36.8vw;
    }
    .page-aboutus .why .ttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        flex-direction: column;
        margin-bottom: 7.33vw;
        align-items: flex-start;
    }
    .page-aboutus .why .ttl .ttlbox{
        display: flex;
        align-items: flex-end;
    }
    .page-aboutus .why .ttl .logo{
        width: 100%;
        max-width: 55.6vw;
    }
    .page-aboutus .why .text-box{
        position: relative;
        top: 0; right: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 8vw;
        margin-top: 14.4vw;
    }
    .page-aboutus .why .text-box .content-title{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 6.66vw;
    }
    .page-aboutus .why .text-box .content-sub-title{
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .page-aboutus .why .text-box .content-sub-title span{
        padding-left: 4vw;
    }
    .page-aboutus .why .text-box .why-desc{
        margin-top: 8.66vw;
        margin-left: 0;
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .why .text-mini{
        display: none;
    }
    .page-aboutus .why .fit-box{
        flex-direction: column;
        margin-top: 26vw;
        margin-bottom: 13.3vw;
        gap: 12.6vw;
    }
    .page-aboutus .why .fit-box .text{
        width: 100%;
    }
    .page-aboutus .why .fit-box .subttl{
        margin-bottom: 12vw;
        font-size: clamp(2.5rem, 6.66vw, 5rem);
    }
    .page-aboutus .why .fit-box .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .why .fit-box .why-icon{
        max-width: 100%;
    }
    .page-aboutus .why .make-box .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 10.6vw;
    }
    .page-aboutus .why .make-box .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
}

.page-aboutus .future{
    padding-top: 170px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.page-aboutus .future .ttl{
    display: flex;
    font-size: 2.6rem;
    color: var(--colorBase);
    font-family: var(--fontJp-bold) !important;
    align-items: center;
    margin-bottom: 14px;
}
.page-aboutus .future .ttl .logo{
    width: 50%;
    max-width: 181px;
    margin-right: 5px;
}
.page-aboutus .future .future01-desc{
    position: absolute;
    top: 13%;
    left: 10%;
    width: 50%;
    max-width: 335px;
    letter-spacing: 0px;
}
.page-aboutus .future .future01-desc .desc{
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 2;
}
.page-aboutus .future .future02-desc{
    position: absolute;
    top: 13%;
    right: 10%;
    width: 60%;
    max-width: 453px;
}
.page-aboutus .future .future02-desc .desc01{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 40px;
}
.page-aboutus .future .future02-desc .desc02{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 40px;
    margin-left: 70px;
}
.page-aboutus .future .future02-desc .desc03{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-left: 130px;
}
.page-aboutus .future .future02-desc .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 40px;
}
.page-aboutus .future .future03-desc{
    position: absolute;
    top: 13%;
    left: 10%;
    width: 70%;
    max-width: 420px;
    letter-spacing: 0px;
}
.page-aboutus .future .future03-desc .content-title{
    color: var(--colorBase);
    font-size: 2.2rem;
    line-height: 2;
    margin-bottom: 45px;
    font-family: var(--fontJp-bold) !important;
}
.page-aboutus .future .future03-desc .desc{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
}
.page-aboutus .future .future04-desc{
    position: absolute;
    top: 11%;
    right: 7%;
    width: 100%;
    max-width: 705px;
}
.page-aboutus .future .future04-desc .desc01{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 30px;
}
.page-aboutus .future .future04-desc .desc02{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 50px;
}
.page-aboutus .future .future04-desc .desc03{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-left: 340px;
    margin-bottom: 45px;
}
.page-aboutus .future .future04-desc .desc04{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
    margin-left: 400px;
}
.page-aboutus .future .future04-desc .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 50px;
}
@media(max-width: 750px) {
    .page-aboutus .future{
        padding-top: 37.3vw;
    }
    .page-aboutus .future .ttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        flex-direction: column;
        margin-bottom: 7.33vw;
        align-items: flex-start;
    }
    .page-aboutus .future .ttl .ttlbox {
        display: flex;
        align-items: flex-end;
    }
    .page-aboutus .future .ttl .logo {
        width: 100%;
        max-width: 55.6vw;
    }
    .page-aboutus .future .future01-desc{
        position: relative;
        left: 0; top: 0;
        padding: 0 8vw;
        width: 100%;
        margin-top: 11.3vw;
        margin-bottom: 15.7vw;
    }
    .page-aboutus .future .future01-desc .desc{
        color: var(--colorBase);
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .future .future02-desc{
        position: relative;
        left: 0; top: 0;
        padding: 0 8vw;
        width: 100%;
        max-width: 100%;
        margin-top: 11.3vw;
        margin-bottom: 15.7vw;
    }
    .page-aboutus .future .future02-desc .desc01{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        letter-spacing: 0px;
    }
    .page-aboutus .future .future02-desc .desc02{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        margin-left: 0;
        letter-spacing: 0px;
    }
    .page-aboutus .future .future02-desc .desc03{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-left: 0;
        letter-spacing: 0px;
    }
    .page-aboutus .future .future02-desc .text-mini{
        display: none;
    }
    .page-aboutus .future .future03-desc{
        position: relative;
        left: 0; top: 0;
        padding: 0 8vw;
        width: 100%;
        max-width: 100%;
        margin-top: 11.3vw;
        margin-bottom: 15.7vw;
    }
    .page-aboutus .future .future03-desc .content-title{
        display: none;
    }
    .page-aboutus .future .future03-desc .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .future .future04-desc{
        position: relative;
        left: 0; top: 0;
        padding: 0 8vw;
        width: 100%;
        max-width: 100%;
        margin-top: 11.3vw;
        margin-bottom: 15.7vw;
    }
    .page-aboutus .future .future04-desc .desc01{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        letter-spacing: 0px;
    }
    .page-aboutus .future .future04-desc .desc02{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        letter-spacing: 0px;
    }
    .page-aboutus .future .future04-desc .desc03{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        letter-spacing: 0px;
        margin-left: 0;
    }
    .page-aboutus .future .future04-desc .desc04{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        margin-bottom: 10.6vw;
        letter-spacing: 0px;
        margin-left: 0;
    }
    .page-aboutus .future .future04-desc .text-mini{
        text-align: left;
        margin-top: 1.33vw;
        font-size: clamp(0.9rem, 3.3vw, 1.8rem);
    }
}

.page-aboutus .smile {
    padding-top: 115px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.page-aboutus .smile .content-title {
    display: flex;
    font-size: 2.6rem;
    color: var(--colorBase);
    font-family: var(--fontJp-bold) !important;
    align-items: center;
    margin-bottom: 20px;
}
.page-aboutus .smile .text-box{
    position: absolute;
    top: 5%;
    left: 10%;
    width: 50%;
    max-width: 300px;
    letter-spacing: 0px;
}
.page-aboutus .smile .smile-desc .desc{
    color: var(--colorBase);
    font-size: 1.4rem;
    line-height: 2;
}
.page-aboutus .smile .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 10px;
}
.page-aboutus .smile .logo{
    max-width: 650px;
    width: 80%;
    margin: 80px auto 0;
    color: var(--colorBase);
}
.page-aboutus .smile .logo .ttl{
    font-size: 2.6rem;
    color: var(--colorBase);
    font-family: var(--fontJp-bold) !important;
    align-items: center;
    margin-bottom: 30px;
}
.page-aboutus .smile .logo .dl{
    display: flex;
    justify-content: space-between;
    gap: 28px;
}
.page-aboutus .smile .logo .dl dt{
    max-width: 303px;
    width: 50%;
}
.page-aboutus .smile .logo .dl dd{
    font-size: 1.4rem;
    line-height: 2;
    max-width: 320px;
    width: 50%;
}
.page-aboutus .smile .brand{
    max-width: 650px;
    width: 80%;
    margin: 110px auto 0;
    color: var(--colorBase);
}
.page-aboutus .smile .brand .ttl{
    font-size: 2.6rem;
    color: var(--colorBase);
    font-family: var(--fontJp-bold) !important;
    align-items: center;
    margin-bottom: 30px;
}
.page-aboutus .smile .brand .dl{
    display: flex;
    justify-content: space-between;
    gap: 28px;
}
.page-aboutus .smile .brand .dl dt{
    max-width: 303px;
    width: 50%;
}
.page-aboutus .smile .brand .dl dt .images{
    margin-top: 15px;
}
.page-aboutus .smile .brand .dl dd{
    font-size: 1.4rem;
    line-height: 2;
    max-width: 320px;
    width: 50%;
}
@media(max-width: 750px) {
    .page-aboutus .smile{
        padding-top: 15.3vw;
    }
    .page-aboutus .smile .content-title{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 6vw;
    }
    .page-aboutus .smile .text-box{
        position: relative;
        left: 0; top: 0;
        padding: 0 8vw;
        width: 100%;
        max-width: 100%;
        margin-top: 11.3vw;
        margin-bottom: 15.7vw;
    }
    .page-aboutus .smile .smile-desc .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .smile .text-mini{
        display: none;
    }
    .page-aboutus .smile .logo{
        width: 100%;
        padding: 0 8vw;
        max-width: 100%;
        margin: 34vw auto 0;
    }
    .page-aboutus .smile .logo .ttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 6vw;
    }
    .page-aboutus .smile .logo .dl{
        flex-direction: column;
        gap: 6.66vw;
    }
    .page-aboutus .smile .logo .dl dt{
        max-width: 100%;
        width: 100%;
    }
    .page-aboutus .smile .logo .dl dd{
        width: 100%;
        max-width: 100%;
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-aboutus .smile .brand{
        width: 100%;
        max-width: 100%;
        padding: 0 8vw;
        margin: 22.6vw auto 0;
    }
    .page-aboutus .smile .brand .ttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 6vw;
    }
    .page-aboutus .smile .brand .dl{
        flex-direction: column;
        gap: 8vw;
    }
    .page-aboutus .smile .brand .dl dt{
        width: 100%;
        max-width: 100%;
    }
    .page-aboutus .smile .brand .dl dd{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        max-width: 100%;
        width: 100%;
    }
}

/********
下層ページ メンバーランク
*********/
body .page-rank{
    padding-top: 180px;
    color: var(--colorBase);
}
.page-rank .rank-hero {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 80px;
}
body .page-rank .inner{
    width: 100%;
    max-width: 750px;
    padding: 0 60px;
    box-sizing: border-box;
    margin: 0 auto;
}
.page-rank .content-sub-title{
    font-family: var(--fontJp-bold) !important;
    font-size: 5rem;
    margin-bottom: 25px;
    line-height: 1;
}
.page-rank .content-title{
    font-family: var(--fontJp-bold) !important;
    font-size: 3rem;
    margin-bottom: 50px;
    line-height: 1;
}
.page-rank .desc{
    font-size: 2.8rem;
    line-height: 2;
}
.page-rank .rank{
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
    margin: 0 auto;
}
.page-rank .rank .ranklist{
    margin-bottom: 50px;
}
.page-rank .rank .list{
    margin-bottom: 55px;
}
.page-rank .rank .list dl{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 2px dotted #c5bcac;
}
.page-rank .rank .list dl dt{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-rank .rank .list dl dt .box{
    display: flex;
    align-items: center;
}
.page-rank .rank .list dl dt .namber{
    color: #ffffff;
    background: #705d56;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: block;
    font-size: 3rem;
    text-align: center;
    font-family: var(--fontEnglish-sofia);
    margin-right: 10px;
}
.page-rank .rank .list dl dt .ttl{
    line-height: 1;
    font-size: 3rem;
    font-family: var(--fontJp-bold) !important;
}
.page-rank .rank .list dl dt .mini-text{
    font-size: 2.2rem;
}
.page-rank .rank .list dl dt .rank-icon{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.page-rank .rank .list dl dt .rank-icon li{
}
.page-rank .rank .list dl dd{
    margin-top: 20px;
}
.page-rank .rank .list dl dd .desc{
    font-size: 2.8rem;
    line-height: 1.5;
}
.page-rank .rank .list dl dd .mini-desc{
    font-size: 1.8rem;
    margin-top: 20px;
}
.page-rank .rank .desc{
}
.page-rank .rank .btn{
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-rank .rank .btn a{
    background: #705d56;
    border-radius: 50px;
    font-size: 3.2rem;
    color: #ffffff;
    padding: 25px 80px;
    display: block;
    text-align: center;
    max-width: 446px;
}
.page-rank .rank .note{
    font-size: 1.8rem;
    line-height: 1.7;
    margin-top: 40px;
}
@media(max-width: 750px) {
    body .page-rank{
        padding-top: 30vw;
    }
    .page-rank .rank-hero{
        margin: 0 auto 10.6vw;
    }
    body .page-rank .inner{
        padding: 0 8vw;
    }
    .page-rank .content-sub-title{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 3.33vw;
    }
    .page-rank .content-title{
        font-size: clamp(1.5rem, 4vw, 3rem);
        margin-bottom: 6.66vw;
    }
    .page-rank .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-rank .rank .ranklist{
        margin-bottom: 6.66vw;
    }
    .page-rank .rank .list{
        margin-bottom: 7.33vw;
    }
    .page-rank .rank .list dl {
        padding-bottom: 4vw;
        margin-bottom: 4vw;
    }
    .page-rank .rank .list dl dt .namber{
        width: 6.13vw;
        height: 6.13vw;
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .page-rank .rank .list dl dt .ttl{
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .page-rank .rank .list dl dt .mini-text{
        font-size: clamp(1.2rem, 2.93vw, 2.2rem);
    }
    .page-rank .rank .list dl dt .rank-icon{
        gap: 2.13vw;
    }
    .page-rank .rank .list dl dt .rank-icon li {
        width: 6.66vw;
        max-width: 50px;
    }
    .page-rank .rank .list dl dd{
        margin-top: 2.66vw;
    }
    .page-rank .rank .list dl dd .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
    }
    .page-rank .rank .list dl dd .mini-desc{
        font-size: clamp(0.9rem, 2.4vw, 1.8rem);
        margin-top: 2.66vw;
    }
    .page-rank .rank .btn{
        margin-top: 9.33vw;
    }
    .page-rank .rank .btn a{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
        padding: 3.33vw 10.6vw;
    }
    .page-rank .rank .note{
        font-size: clamp(0.9rem, 2.4vw, 1.8rem);
        margin-top: 5.33vw;
    }
}

/********
下層ページ howto
*********/
.page-howto{
}
.page-howto .howto-hero{
    width: 100%;
    max-width: 920px;
    margin: 0 auto 18px;
}
.page-howto .howto-hero .inner {
    position: relative;
    padding: 0 140px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.page-howto .content-sub-title {
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: var(--colorBase);
    margin-bottom: 20px;
    margin-top: 35px;
    font-family: var(--fontEnglish-fields);
    line-height: 1;
    font-weight: bold;
}
.page-howto .content-title {
    font-size: 2.6rem;
    letter-spacing: 3px;
    color: var(--colorBase);
    margin-bottom: 23px;
    font-weight: bold;
    line-height: 1.5;
    font-family: var(--fontJp-bold) !important;
}
.page-howto .howto-hero .desc {
    margin-bottom: 112px;
    color: var(--colorBase);
    line-height: 1.8;
}
.page-howto .howto-hero .buy-links-top {
    display: block;
    position: absolute;
    bottom: 0;
    right: 140px;
    width: 173px;
    transition: all 0.6s ease;
    z-index: 1;
}
.page-howto .howto-hero .buy-links-top a {
    display: block;
    background: #4c5d23;
    border-radius: 10px;
    padding: 12px 13px 12px 18px;
}
.page-howto .howto-hero .buy-links-top img {
    width: 100%;
    display: block;
}
.page-howto .message{
    width: 100%;
    max-width: 920px;
    margin: 0 auto 140px;
}
.page-howto .message .content-title{
    margin-bottom: 45px;
}
.page-howto .message .cover{
    position: absolute;
    top: 13%; right: 6%;
    z-index: 10;
    width: 100%;
    max-width: 380px;
}
.page-howto .message .cover .inner{
    padding: 0;
}
.page-howto .message .inner .message-desc{
    font-size: 1.6rem;
    color: var(--colorBase);
}
.page-howto .message .message-links{
    padding: 0;
    margin: 45px auto 0;
    display: flex;
    flex-wrap: wrap;
}
.page-howto .message .message-links li {
    margin-right: 8px;
    margin-bottom: 8px;
}
.page-howto .message .message-links a {
    display: flex;
    align-items: center;
    background: #7e8b60;
    border-radius: 10px;
    color: var(--colorbg);
    padding: 15px 12px;
    line-height: 1;
    min-width: 116px;
    box-sizing: border-box;
}
.page-howto .message .message-links .message-dot {
    width: 8px;
    height: 8px;
    background: #5c6a3a;
    border-radius: 50px;
    margin-right: 8px;
}
.page-howto .message .message-links .message-text {
    font-size: 1.1rem;
    color: #f1e9de;
    letter-spacing: 0px;
}

.page-howto .measure{
    width: 100%;
    max-width: 750px;
    margin: 0 auto 0px;
    padding: 0 50px;
}
.page-howto .measure .inner{
    padding: 0;
}
.page-howto .measure .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.6rem;
    color: var(--colorBase);
    margin-bottom: 30px;
}
.page-howto .measure .measure-box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 34px;
}
.page-howto .measure .measure-box .item{
    width: 50%;
    max-width: 340px;
}
.page-howto .measure .measure-box .item .text{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.page-howto .measure .measure-box .item .text .desc{
    font-size: 1.2rem;
    color: var(--colorBase);
}
.page-howto .measure .point{
    position: relative;
    background: #d5dcc6;
    margin-top: 50px;
}
.page-howto .measure .point-text{
    padding: 16px 22px 20px 34px;
}
.page-howto .measure .images{
    width: 50%;
    max-width: 209px;
    position: absolute;
    right: 25px;
    bottom: 20px;
}
.page-howto .measure .ttl{
    color: #6a764e;
    font-size: 2.4rem;
    font-family: var(--fontJp-bold) !important;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}
.page-howto .measure .ttl span{
    font-size: 3.1rem;
    font-family: var(--fontEnglish-fields);
}
.page-howto .measure .list{
    width: 70%;
    max-width: 360px;
}
.page-howto .measure .list li{
    background: rgba(255, 255, 255, 0.89);
    padding: 8px 12px;
    margin-bottom: 6px;
    color: var(--colorBase);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    line-height: 1;
}
.page-howto .measure .list li:last-child{
    margin-bottom: 0px;
}
.page-howto .measure .list li .namber{
    font-size: 2.1rem;
    font-family: var(--fontEnglish-fields);
    padding-right: 10px;
    line-height: 1;
}
@media(max-width: 750px) {
    .page-howto .howto-hero{
        margin: 0 auto 56vw;
    }
    .page-howto .howto-hero .inner{
        padding: 0 8vw;
    }
    .page-howto .content-sub-title{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 8vw;
        margin-top: 14.6vw;
    }
    .page-howto .content-title{
        font-size: clamp(3rem, 8vw, 6rem);
        margin-bottom: 7.33vw;
        letter-spacing: -1px;
    }
    .page-howto .howto-hero .desc{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
    }
    .page-howto .howto-hero .buy-links-top{
        display: none;
    }

    .page-howto .message{
        margin: 0 auto 24vw;
        padding: 0 8vw;
    }
    .page-howto .message .content-title{
        margin-bottom: 10vw;
        font-size: clamp(2.5rem, 6.66vw, 5rem);
    }
    .page-howto .message .cover{
        position: relative;
        top: 0; left: 0;
        max-width: 100%;
        margin-top: 9.33vw;
    }
    .page-howto .message .inner .message-desc{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
    }
    .page-howto .message .message-links{
        margin: 22vw auto 0;
        justify-content: space-between;
        gap: 3.33vw;
    }
    .page-howto .message .message-links li{
        margin-right: 0;
        margin-bottom: 0;
        width: 48%;
    }
    .page-howto .message .message-links a{
        padding: 5.33vw 4vw;
    }
    .page-howto .message .message-links .message-dot{
        width: 2.66vw;
        height: 2.66vw;
        margin-right: 1.43vw;
    }
    .page-howto .message .message-links .message-text{
        font-size: clamp(1.5rem, 4vw, 3rem);
    }

    .page-howto .measure{
        padding: 0 8vw;
    }
    .page-howto .measure .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 13.3vw;
    }
    .page-howto .measure .measure-box{
        flex-direction: column;
        gap: 7.2vw;
    }
    .page-howto .measure .measure-box .item{
        width: 100%;
        max-width: 100%;
    }
    .page-howto .measure .measure-box .item .text{
        gap: 4.26vw;
        margin-top: 4vw;
    }
    .page-howto .measure .measure-box .item .text .desc{
        font-size: clamp(1.4rem, 3.73vw, 2.8rem);
        width: 70%;
    }
    .page-howto .measure .point{
        margin-top: 12.6vw;
        background: none;
    }
    .page-howto .measure .point-text{
        padding: 0;
    }
    .page-howto .measure .ttl{
        font-size: clamp(2.2rem, 5.86vw, 4.4rem);
        margin-bottom: 2.66vw;
    }
    .page-howto .measure .ttl span{
        font-size: clamp(2.8rem, 7.6vw, 5.7rem);
    }
    .page-howto .measure .list {
        width: 100%;
        max-width: 100%;
    }
    .page-howto .measure .list li{
        padding: 2.4vw 3vw;
        letter-spacing: 0px;
        margin-bottom: 1.33vw;
        font-size: clamp(1.15rem, 3.4vw, 2.3rem);
    }
    .page-howto .measure .list li .namber{
        font-size: clamp(2rem, 5.33vw, 4rem);
        padding-right: 2.93vw;
    }
    .page-howto .measure .images{
        display: none;
    }
}

.page-howto .chart{
    width: 100%;
    max-width: 750px;
    margin: 120px auto 0px;
    padding: 0 50px;
}
.page-howto .chart .inner{
    padding: 0;
}
.page-howto .chart .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.6rem;
    color: var(--colorBase);
    margin-bottom: 20px;
}
.page-howto .chart .two{
    display: flex;
    gap: 30px;
}
.page-howto .chart .two .box{
}
.page-howto .chart .two .box .conttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 1.725rem;
    color: var(--colorBase);
    margin-bottom: 10px;
}

.page-howto .chart-point{
    width: 100%;
    max-width: 750px;
    margin: 90px auto 0px;
    padding: 0 50px;
}
.page-howto .chart-point .inner{
    padding: 0;
}
.page-howto .chart-point .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.6rem;
    color: var(--colorBase);
    margin-bottom: 15px;
}
.page-howto .chart-point .conttl{
    font-size: 1.725rem;
    color: var(--colorBase);
    margin-bottom: 30px;
}
.page-howto .chart-point .two{
    display: flex;
    justify-content: space-between;
}
.page-howto .chart-point .two .box{
    width: 49%;
}
@media(max-width: 750px) {
    .page-howto .chart{
        margin: 30.6vw auto 0px;
        padding: 0 8vw;
    }
    .page-howto .chart .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 9.33vw;
    }
    .page-howto .chart .two{
        gap: 12vw;
        flex-direction: column;
    }
    .page-howto .chart .two .box .conttl{
        margin-bottom: 4vw;
        font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .page-howto .chart-point{
        margin: 33.3vw auto 0px;
        padding: 0 8vw;
    }
    .page-howto .chart-point .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 7.33vw;
    }
    .page-howto .chart-point .conttl{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
        margin-bottom: 8.66vw;
    }
    .page-howto .chart-point .two{
        flex-direction: column;
        gap: 10.6vw;
    }
    .page-howto .chart-point .two .box{
        width: 100%;
    }
}

.page-howto .wear{
    width: 100%;
    max-width: 750px;
    margin: 130px auto 0px;
    padding: 0 50px;
}
.page-howto .wear .inner{
    padding: 0;
}
.page-howto .wear .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.6rem;
    color: var(--colorBase);
    margin-bottom: 25px;
}
.page-howto .wear .two{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 35px;
}
.page-howto .wear .two .box{
    width: 50%;
}
.page-howto .wear .two .box .desc{
    font-size: 1.725rem;
    color: var(--colorBase);
    line-height: 2.2;
    padding-top: 35px;
}
@media(max-width: 750px) {
    .page-howto .wear{
        margin: 34.6vw auto 0px;
        padding: 0 8vw;
    }
    .page-howto .wear .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 11.3vw;
    }
    .page-howto .wear .two{
        flex-direction: column;
        gap: 10.6vw;
    }
    .page-howto .wear .two .box{
        width: 100%;
    }
    .page-howto .wear .two .box .desc{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
        line-height: 1.8;
        padding-top: 0;
    }
}

.page-howto .care{
    width: 100%;
    max-width: 750px;
    margin: 95px auto 0px;
    padding: 0 50px;
}
.page-howto .care .inner{
    padding: 0;
}
.page-howto .care .conttl{
    font-size: 1.725rem;
    color: var(--colorBase);
    margin-bottom: 5px;
}
.page-howto .care .subttl{
    font-family: var(--fontJp-bold) !important;
    font-size: 2.6rem;
    color: var(--colorBase);
    margin-bottom: 30px;
}
.page-howto .care .list{
    display: flex;
    justify-content: space-between;
}
.page-howto .care .list .box{
}
.page-howto .care .list .box li{
}
@media(max-width: 750px) {
    .page-howto .care{
        margin: 36vw auto 0px;
        padding: 0 8vw;
    }
    .page-howto .care .conttl{
        font-size: clamp(1.6rem, 4.26vw, 3.2rem);
        margin-bottom: 2.66vw;
    }
    .page-howto .care .subttl{
        font-size: clamp(2.5rem, 6.66vw, 5rem);
        margin-bottom: 11.3vw;
    }
    .page-howto .care .list{
        flex-direction: column;
        gap: 3.73vw;
    }
    .page-howto .care .list .box li{
        margin-top: 4.8vw;
    }
    .page-howto .care .list .box li:first-child{
        margin-top: 0;
    }
}

/********
下層ページ product
*********/
.page-product{

}
.page-product .product-hero{
    width: 100%;
    max-width: 920px;
    margin: 0 auto 110px;
}
.page-product .product-hero .inner{
}
.page-product .product-hero .content-sub-title{
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: var(--colorBase);
    margin-bottom: 20px;
    margin-top: 35px;
    font-family: var(--fontEnglish-fields);
    line-height: 1;
    font-weight: bold;
}
.page-product .product-hero .content-title{
    font-size: 2.6rem;
    letter-spacing: 3px;
    color: var(--colorBase);
    margin-bottom: 23px;
    font-weight: bold;
    line-height: 1.5;
    font-family: var(--fontJp-bold) !important;
}
.page-product .product-hero .desc{
    margin-bottom: 112px;
    color: var(--colorBase);
    line-height: 1.8;
}
.page-product .product-hero .buy-links-top{
    display: block;
    position: absolute;
    bottom: 0;
    right: 140px;
    width: 173px;
    transition: all 0.6s ease;
    z-index: 1;
}
.page-product .product-hero .buy-links-top a{
    display: block;
    background: #4c5d23;
    border-radius: 10px;
    padding: 12px 13px 12px 18px;
}
.page-product .product-hero .buy-links-top img{
    width: 100%;
    display: block;
}

.page-product .message{
    width: 100%;
    max-width: 920px;
    margin: 0 auto 140px;
}
.page-product .message .main-img{
    position: relative;
}
.page-product .message .text-mini{
    font-size: 1rem;
    color: var(--colorBase);
    text-align: right;
    margin-top: 10px;
}
.page-product .message .cover{
    position: absolute;
    top: 10%;
    right: 6%;
    z-index: 10;
    width: 100%;
    max-width: 380px;
}
.page-product .message .inner{
    padding: 0;
}
.page-product .message .content-title{
    font-size: 2.6rem;
    letter-spacing: 3px;
    color: var(--colorBase);
    margin-bottom: 23px;
    font-weight: bold;
    line-height: 1.5;
    font-family: var(--fontJp-bold) !important;
}
.page-product .message .content-subtitle{
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    color: var(--colorBase);
    margin-bottom: 45px;
}
.page-product .message .content-subtitle::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--colorBase);
    margin-right: 8px;
    border-radius: 2px;
}
.page-product .message .message-desc{
    font-size: 1.6rem;
    color: var(--colorBase);
    line-height: 1.8;
}

.page-product .smaile-body{

}
.page-product .smaile-body .inner{

}
.page-product .smaile-body .content-subtitle{

}
.page-product .smaile-body .title-box{

}
.page-product .smaile-body .title-box .content-title{

}
.page-product .smaile-body .title-box .ttl{
    
}
.page-product .smaile-body .smaile-namber{

}
.page-product .smaile-body .smaile-namber .box{
    background: #fff;
    border-radius: 8px;
    padding: 16px;
}
.page-product .smaile-body .smaile-namber .box .text{
    margin-top: 12px;
}
.page-product .smaile-body .smaile-namber .box .text .ttl{

}
.page-product .smaile-body .smaile-namber .box .text .desc{
    
}
.page-product .smaile-body .smaile-namber .box .text .icon{

}
@media(max-width: 750px) {
    .smaile-namber.swiper {
        overflow: visible;
    }
    .smaile-namber .swiper-wrapper {
        display: block; /* スライドを無効化して縦積み */
    }
    .smaile-namber .swiper-slide {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .smaile-namber .swiper-button-prev,
    .smaile-namber .swiper-button-next {
        display: none; /* SP時は矢印不要 */
    }
}

.page-product .smaile-heart{

}
.page-product .smaile-heart .inner{

}
.page-product .smaile-heart .content-subtitle{

}
.page-product .smaile-heart .title-box{

}
.page-product .smaile-heart .title-box .content-title{

}
.page-product .smaile-heart .title-box .ttl{
    
}
.page-product .smaile-heart .heart-namber{

}
.page-product .smaile-heart .heart-namber .box{
    background: #fff;
    border-radius: 8px;
    padding: 16px;
}
.page-product .smaile-heart .heart-namber .box .text{
    margin-top: 12px;
}
.page-product .smaile-heart .heart-namber .box .text .ttl{

}
.page-product .smaile-heart .heart-namber .box .text .desc{
    
}
.page-product .smaile-heart .heart-namber .box .text .icon{

}
@media(max-width: 750px) {
    .heart-namber.swiper {
        overflow: visible;
    }
    .heart-namber .swiper-wrapper {
        display: block; /* スライドを無効化して縦積み */
    }
    .heart-namber .swiper-slide {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .heart-namber .swiper-button-prev,
    .heart-namber .swiper-button-next {
        display: none; /* SP時は矢印不要 */
    }
}

.page-product .lineup{

}
.page-product .lineup .inner{

}
.page-product .lineup .content-subtitle{

}
.page-product .lineup .title-box{

}
.page-product .lineup .title-box .content-title{

}
.page-product .lineup .title-box .ttl{
    
}
.page-product .lineup .main-img{

}
.page-product .lineup .main-img .box{

}
.page-product .lineup .left-area{

}
.page-product .lineup .left-area .size-text{

}
.page-product .lineup .left-area .text{

}
.page-product .lineup .left-area .ttl{

}
.page-product .lineup .left-area .desc{

}
.page-product .lineup .right-area{

}
.page-product .lineup .right-area .size-text{

}
.page-product .lineup .right-area .text{

}
.page-product .lineup .right-area .ttl{

}
.page-product .lineup .right-area .desc{

}

.page-product .experience{

}
.page-product .experience .inner{

}
.page-product .experience .content-title{

}
.page-product .experience .desc{

}