@charset "UTF-8";

/* ==================================================
   20260618 Renewal
   ================================================== */

:root {
    --header-height-base: clamp(85px, calc(23.333px + 7.708vw), 80px);
    --header-height: calc(
        var(--header-height-base) +
        clamp(40px, calc(6.667px + 4.167vw), 60px)
    );
}

body.is-member {
    --header-height: calc(
        var(--header-height-base) + 34px +
        clamp(40px, calc(6.667px + 4.167vw), 60px)
    );
}
body#page_shopping_confirm,
body#page_shopping{
    --header-height: var(--header-height-base);
}

@media screen and (max-width:767px) {
	:root {
		--header-height-base: 50px;
	}
}

/* base */
html body{
    padding-top: var(--header-height);
    color: #000;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    
}
body#page_shopping_confirm,
body#page_shopping{
    padding-top: 0;
}
.site__main{
    padding: clamp(60px, calc(21.538px + 7.692vw), 120px) 15px;
    max-width: 1310px;
}
.site__main:not(.front_page .site__main){
    margin-top: 40px;
    padding-top: 0;
}
.main__content {
    margin-left: 0;
    width: calc(100% - 280px);
    flex-basis: calc(100% - 280px);
}
body:has(.main__sidebar_left) .main__content{
    margin-left: 40px;
}
.main__sidebar_left {
    width: 240px;
    flex-basis: 240px;
}
.wrap{
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1310px;
}

@media screen and (max-width:991px) {
    .site__main:not(.front_page .site__main){
        margin-top: 20px;
    }
    .main__content {
        width: 100%;
        flex-basis: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width:767px) {
    html body{
        padding-top: var(--header-height-base);
    }
}

/* 共通 */
p:last-child{
    margin-bottom: 0;
}
a{
    color: #000;
    transition: all .3s;
}
a:hover{
    color: #000;
    opacity: 0.7;
}
.h-style01[data-en] {
    position: static;
    margin-bottom: clamp(30px, calc(19.437px + 2.113vw), 60px);
    color: #0C3429;
    font-size: clamp(16px, calc(12.592px + 0.282vw), 18px);
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    overflow: hidden;
}
.h-style01[data-en]:before{
    content: attr(data-en);
    display: block;
    margin-bottom: 10px;
    font-size: clamp(35px, calc(29.718px + 1.056vw), 35px);
    font-weight: normal;
    text-align: center;
    letter-spacing: 2.5px;
}
.h-style01[data-en] span{
    display: inline-block;
    position: relative;
    padding: 0 25px;
    color: #0C3429;
}
.h-style01[data-en] span:after,
.h-style01[data-en] span:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1000px;
    height: 1px;
    background: #0C3429;
    transform: translateY(-50%) translateX(-100%);
}
.h-style01[data-en] span:after{
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(100%);
}
.ff00{
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}
.ff01{
    font-family: "Yu Gothic", "Yu Gothic UI";
}
.pickup{
    color: #ED913C;
}
.sp{
    display: none;
}

@media screen and (max-width:767px) {
    .h-style01[data-en]:before{
        margin-bottom: 5px;
    }
    .sp{
        display: block;
    }
}

/* header */
.site__header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    color: #fff;
    background: #0C3429;
    box-shadow: none;
    z-index: 998;
}
body.is-member .site__header {
    top: 34px;
}
body#page_shopping_confirm .site__header,
body#page_shopping .site__header {
    position: static;
}
.site__header a{
    color: #fff;
}
.site__header .nav__main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 50px;
    max-width: 100%;
    height: var(--header-height-base);
}
.site__header .logo {
    justify-self: start;
    margin: 0;
    width: clamp(118px, calc(-42.000px + 20.000vw), 214px);
    max-width: none;
    line-height: 1;
}
.site__header .logo img{
    display: block;
}
.site__header .gnav{
    justify-self: center;
    display: flex;
    gap: clamp(20px, calc(-30.000px + 6.250vw), 50px);

}
.site__header .gnav a{
    display: block;
    position: relative;
    font-size: clamp(10px, calc(6.667px + 0.417vw), 12px);
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
}
.site__header .gnav a:hover{
    opacity: 1;
}
.site__header .gnav a:after,
.site__header .gnav a:before{
    content: attr(data-en);
    display: block;
    margin-bottom: 3px;
    font-size: clamp(18px, calc(4.667px + 1.667vw), 20px);
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    letter-spacing: 1.3px;
    text-align: center;
    transition: all .3s;
}
.site__header .gnav a:after{
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    opacity: 0;
}
.site__header .gnav a:hover:after,
.site__header .gnav a:hover:before{
    transform: translateY(-28px);
}
.site__header .gnav a:hover:before{
    opacity: 0;
}
.site__header .gnav a:hover:after{
    opacity: 1;
}
.site__header .gnav span{
    display: block;
    position: relative;
    background: #0C3429;
    z-index: 2;
}
.site__header .cart-area{
    justify-self: end;
    display: flex;
    gap: clamp(15px, calc(-10.000px + 3.125vw), 30px);
    align-items: center;
}
.site__header .ec-cartNavi{
    display: flex;
    align-items: center;
    padding: 0;
}
.site__header .ec-cartNavi img{
    width: 40px;
    aspect-ratio: 1 / 1;
}
.site__header .nav__cart .ec-cartNavi__badge{
    position: absolute;
    top: -5px;
    left: auto;
    right: -10px;
}
.site__header .welcome{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0 clamp(15px, calc(-43.333px + 7.292vw), 50px);
    width: 100%;
    height: 34px;
    color: #fff;
    font-size: clamp(11px, calc(2.667px + 1.042vw), 16px);
    line-height: 1.2;
    background: #A79B59;
}
.site__header .welcome .info{
    padding: 0;
}
.site__header .member-area{
    position: relative;
}
.site__header .login{
    width: 40px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}
.site__header .mypage{
    position: absolute;
    right: -15px;
    bottom: 0;
    width: 300px;
    padding: 20px;
    background: #fff;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    opacity: 0;
    z-index: -1;
    transition: all .5s;
    pointer-events: none;
}
.site__header .member-area:hover .mypage{
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}
.site__header .mypage ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 15px;
    margin-bottom: 20px;
}
.site__header .mypage li{
    width: calc((100% - 30px) / 3);
}
.site__header .mypage li img{
    display: block;
    margin: 0 auto;
    width: 60px;
}
.site__header .mypage a{
    display: block;
    color: #000;
}
.site__header .mypage li a{
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}
.site__header .mypage .bottom div a{
    margin-bottom: 5px;
    padding: 10px;
    color: #0C3429;
    font-weight: bold;
    text-align: center;
    text-align: center;
    line-height: 1;
    border: #0c3429 2px solid;
}
.menu-trigger{
	display: none;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 20px;
	cursor: pointer;
    transform: translateY(-50%);
    z-index: 99999;
}
.menu-trigger .inr{
	position: relative;
	width: 100%;
	height: 15px;
    transition: all .3s;
}
.menu-trigger span {
	position: absolute;
	right: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: all .3s;
}
.menu-trigger.drawer-open span {
	background: #fff;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 50%;
    transform: translateY(-50%);
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.drawer-open span:nth-of-type(3),
.menu-trigger.drawer-open span:nth-of-type(1) {
	top: 50%;
	bottom: auto;
    transform: translateY(-50%) rotate(-45deg);
}
.menu-trigger.drawer-open span:nth-of-type(2){
	opacity: 0;
}
.menu-trigger.drawer-open span:nth-of-type(3) {
    transform: translateY(-50%) rotate(45deg);
}
.ec-drawerRole {
    top: var(--header-height-base);
    height: calc(100vh - var(--header-height-base));
    transition: all .8s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav__account,
.nav__cart-sp,
.nav__history,
.sb__delivery-date .ttl+p,
.ec-drawerRole .sb__delivery-date .ttl {
    background-color: #0C3429;
}
.nav__contact-info>*{
    border-color: #0C3429;
}
.site__header .nav__secondary {
    background: none;
    padding: 0;
}
.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0!important;
    height: clamp(40px, calc(6.667px + 4.167vw), 60px);
    background: #F0F0F0;
}
.header-nav a{
    display: block;
    padding: 0 20px;
    height: auto!important;
    color: #0C3429;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-right: #0c3429 1px solid;
}
.header-nav a:last-child{
    border: none;
}
.cart-area .search{
    position: relative;
}
.cart-area .search:after,
.cart-area .search:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 50px;
    background: #fff;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    opacity: 0;
    transition: all .3s;
}
.cart-area .search:after{
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
.cart-area .search.show:after,
.cart-area .search.show:before{
    opacity: 1;
}
.cart-area .search select{
    display: none;
}
.cart-area .search .ec-headerSearch .ec-headerSearch__keyword{
    position: absolute;
    right: 0;
    bottom: -70px;
    width: 300px;
    background: none;
    border: none;
    border-bottom: #2f5148 1px solid;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .3s;
}
.cart-area .search.show .ec-headerSearch .ec-headerSearch__keyword{
    bottom: clamp(-75px, calc(-13px - 5.625vw), -58px);
    background: #F0F0F0;
    opacity: 1;
    pointer-events: auto;
}
.cart-area .search .ec-headerSearch__keyword input::placeholder {
    /* font-size: 17px; */
}
.cart-area .ec-headerSearch .ec-headerSearch__keyword .ec-icon{
    width: 45px;
    height: 45px;
    background: url('../images/icon/icon_search.png') no-repeat center;
    background-size: 35px auto;
}
.cart-area .ec-headerSearch .ec-headerSearch__keywordBtn{
    right: -10px;
}
.cart-area .ec-headerSearch .ec-headerSearch__keyword .ec-icon img{
    display: none;
}
.cart-area .search .icon{
    display: inline-block;
    width: 45px;
    cursor: pointer;
    transform: translateX(5px);
    transition: all .3s;
}
.cart-area .search.show .icon{
    opacity: 0;
}
.member-banner{
    display: none;
    position: fixed;
    right: 20px;
    bottom: 70px;
    width: 226px;
    z-index: 99;
}
.site__header .member-banner{
    display: block;
}
.ec-drawerRole .nav__contact-info > *{
    width: 100%;
}
.ec-drawerRole .nav__search{
    padding: 10px;
    padding-top: 0;
}
.ec-drawerRole .search__area{
    border: none;
}
.ec-drawerRole .search__area input[type="text"]{
    margin: 0;
    border-radius: 2px;
}
.ec-drawerRole .sb__category>.cat__menu{
    margin: 0 10px;
} 

.ec-drawerRole .sb__category .onclick-area{
    height: auto;
}
.ec-drawerRole .sb__category .ttl, 
.ec-drawerRole .sb__category ul li a.ttl2{
    font-size: 18px;
}
.ec-drawerRole .sb__category ul li a.ttl2{
    border-bottom: #dbdbdb 1px solid;
}
.ec-drawerRole .sb__category > ul ul li {
    margin: 0;
}
.ec-drawerRole .sb__category ul li a{
    padding: 10px;
    padding-right: 25px;
    color: #000;
    font-size: 16px;
}
.ec-drawerRole .sb__category ul .cat__has-sub{
    border-bottom: none!important;
}
.ec-drawerRole .opened>.cat__menu-sub {
    margin-top: 0;
}
.ec-drawerRole .cat__menu-sub{
    border-bottom: #dbdbdb 1px solid;
}
.ec-drawerRole .cat__menu-sub.show{
    margin-top: 10px;
}
.ec-drawerRole .sb__category ul>li>a:before{
    right: 15px;
}
.ec-drawerRole {
    
}
.ec-drawerRole {
    
}

@media screen and (max-width:767px) {
    body.is-member .site__header {
        top: 0;
    }
    .site__header .nav__main {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cart-area .search,
    .site__header .header-nav,
    .site__header .welcome,
    .site__header .member-area,
    .site__header .gnav{
        display: none;
    }
    .site__header .ec-headerRole__cart{
        position: absolute;
        top: 50%;
        right: 55px;
        width: 28px;
        transform: translateY(-50%);
    }
    .menu-trigger {
        display: block;
    }
}

/* main */
.front_page .link a{
    display: inline-block;
    padding-right: 32px;
    font-size: clamp(18px, calc(14.154px + 0.769vw), 24px);
    background: url('../images/icon/arrow.svg') no-repeat right center;
    background-size: 25px auto;
}

.main__content .top-content:not(:last-child){
    margin-bottom: 60px;
}
.top-content.mv {
    position: relative;
    color: #fff;
}
.top-content.mv .image img{
    display: block;
    width: 100%;
}
.top-content.mv .text02,
.top-content.mv .text01{
    position: absolute;
    top:clamp(35px, calc(-200px + 22.500vw), 65px);
    left: 50%;
    padding: 0 20px;
    width: 100%;
    max-width: 1520px;
    font-size: clamp(21px, calc(-43.000px + 8.000vw), 35px);
    line-height: 1.4;
    transform: translateX(-50%);
}
.top-content.mv .text02{
    top: auto;
    bottom: clamp(20px, calc(7.179px + 2.564vw), 60px);
    font-size: clamp(12px, calc(-2.744px + 2.949vw), 25px);
    line-height: 1;
}
.top-content.mv .text02 img{
    display: inline-block;
    margin-top: 26px;
    width: 480px;
}
.top-content.mv .product {
    position: absolute;
    right: clamp(15px, calc(-375.385px + 27.885vw), 160px);
    bottom: 50px;
}
.top-content.mv .product a{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 
        clamp(10px, calc(-25.714px + 3.571vw), 20px) 
        clamp(10px, calc(-61.429px + 7.143vw), 20px);
    color: #fff;
    background: #0C3429;
    margin-bottom: 10px;
}
.top-content.mv .product img{
    width: clamp(75px, calc(-192.857px + 26.786vw), 100px);
    height: auto;
}
.top-content.mv .product .info{
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 0;
    padding-left: clamp(15px, calc(-92.143px + 10.714vw), 45px);
    padding-right: clamp(15px, calc(-56.429px + 7.143vw), 35px);
    font-size: clamp(16px, calc(1.714px + 1.429vw), 20px);
    border-left: #657E77 2px solid;
}
.top-content.mv .product .info:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 11px;
    height: 28px;
    background: #fff;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    transform: translateY(-50%);
}
.top-content.mv .product .inr{
    text-align: center;
}
.top-content.mv .product strong{
    display: block;
    margin-bottom: 30px;
    font-size: clamp(20px, calc(-8.571px + 2.857vw), 24px);
    font-weight: normal;
}
.top-content.mv .product .inr span{
    color: #A79B5A;
    font-size: clamp(18px, calc(10.857px + 0.714vw), 20px);
}
.top-content.mv .product b{
    font-size: clamp(30px, calc(-5.714px + 3.571vw), 40px);
    font-weight: normal;
}
.top-content.mv .product i{
    font-size: clamp(12px, calc(-2.286px + 1.429vw), 16px);
    font-style: normal;
}
.top-content.mv .product small{
    display: block;
    padding: 10px;
    color: #fff;
    font-size: clamp(10px, calc(-4.286px + 1.429vw), 14px);
    background: #A79B59;
}
.top-content.naire {
    padding: clamp(60px, calc(21.538px + 7.692vw), 120px) 0;
    text-align: center;
    background: #F4EEE1;
}
.top-content.naire .header{
    margin-bottom: clamp(40px, calc(-11.282px + 10.256vw), 120px);
    font-size: clamp(14px, calc(10.479px + 0.504vw), 24px);
}
.top-content.naire strong{
    display: block;
    margin-bottom: clamp(20px, calc(-5.641px + 5.128vw), 40px);
    font-weight: normal;
    font-size: clamp(22px, calc(15.662px + 1.268vw), 30px);
}
.top-content.naire .header p{
    margin-bottom: clamp(20px, calc(13.590px + 1.282vw), 30px);
}
.top-content.naire .body{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(30px, calc(10.769px + 3.846vw), 60px) clamp(20px, calc(-76.552px + 13.793vw), 100px);
    margin: 0 auto;
    max-width: 1000px;
}
.top-content.naire .box {
    width: calc((100% - clamp(20px, calc(-76.552px + 13.793vw), 100px) * 2) / 3);
}
.top-content.naire .box img{
    display: block;
    margin-bottom: clamp(15px, calc(-1.026px + 3.205vw), 40px);
    border: #707070 1px solid;
    border-radius: 100%;
}
.top-content.naire .box dl{
    margin: 0 -30px;
    text-align: center;
}
.top-content.naire .box dt{
    margin-bottom: 15px;
    font-weight: 500;
    font-size: clamp(15px, calc(1.724px + 1.897vw), 24px);
}
.top-content.naire .box dd{
    font-weight: 500;
    font-size: clamp(13px, calc(9.795px + 0.641vw), 16px);
}
.top-content.naire .link {
    margin-top: clamp(30px, calc(10.769px + 3.846vw), 60px);
    text-align: center;
}
.top-content.naire .link a{
    display: inline-block;
    padding: 25px 60px;
    padding-right: 120px;
    color: #fff;
    font-size: clamp(18px, calc(10.308px + 1.538vw), 24px);
    background: #0C3429 url('../images/icon/arrow05.svg') no-repeat right 60px center;
    background-size: 45px auto;
}
.top-content.naire .link a:hover{
    background: #0C3429 url('../images/icon/arrow05.svg') no-repeat right 47px center;
    background-size: 45px auto;
}
.top-content.ranking .tab-menu {
    display: flex;
    justify-content: center;
    gap: clamp(5px, calc(-4.615px + 1.923vw), 20px);
    margin-bottom: clamp(30px, calc(-20.000px + 6.250vw), 60px);
    border-bottom: #0c3429 1px solid;
}
.top-content.ranking .tab-menu span{
    display: inline-block;
    padding: 15px 5px;
    width: clamp(180px, calc(96.667px + 10.417vw), 230px);
    aspect-ratio: 23 / 5;
    color: #0C3429;
    font-size: clamp(15px, calc(6.667px + 1.042vw), 20px);
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    border: #0c3429 1px solid;
    border-bottom: none;
    cursor: pointer;
    transition: all .3s;
}
.top-content.ranking .link br,
.top-content.ranking .tab-menu span br{
    display: none;
}
.top-content.ranking .tab-menu span:hover,
.top-content.ranking .tab-menu span.active{
    color: #fff;
    background: #0c3429;
}
.top-content.ranking div[data-tab]{
    counter-reset: order;
    display: none;
}
.top-content.ranking div[data-tab].active{
    display: block;
}
.top-content.ranking .inr{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 20px;
}
.top-content.ranking .box{
    position: relative;
    width: calc((100% - 40px) / 3);
}
.top-content.ranking .box:nth-of-type(n+4){
    width: 25%;
}
.top-content.ranking .box:before{
    counter-increment: order;
    content: counter(order);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 14px;
    width: clamp(35px, calc(-15.000px + 6.250vw), 50px);
    aspect-ratio: 1 / 1;
    color: #fff;
    font-size: clamp(20px, calc(3.333px + 2.083vw), 23px);
    line-height: 1;
    background: #3B4043;
    z-index: 2;
}
.top-content.ranking .box:nth-of-type(1):before{
    background: #A79B5A;
}
.top-content.ranking .box:nth-of-type(2):before{
    background: #989898;
}
.top-content.ranking .box:nth-of-type(3):before{
    background: #8B725E;
}
.top-content.ranking .image{
    margin-bottom: 20px;
    aspect-ratio: 1 / 1;
    border: #707070 1px solid;
}
.top-content.ranking .tab-detail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-content.ranking .name {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: clamp(16px, calc(14.718px + 0.256vw), 18px);
}
.top-content.ranking .price {
    font-weight: 500;
    font-size: clamp(20px, calc(3.333px + 2.083vw), 26px);
}
.top-content.ranking .link{
    margin-top: 30px;
    display: block;
    text-align: center;
}
.top-content.ranking .link a{
    display: inline-block;
    padding: 20px 55px;
    padding-right: 85px;
    color: #fff;
    font-size: clamp(16px, calc(2.667px + 1.667vw), 24px);
    background: #0C3429 url('../images/icon/arrow06.svg') no-repeat right 55px center;
    background-size: 25px auto;
}
.top-content.ranking .link a:hover{
    background: #0C3429 url('../images/icon/arrow06.svg') no-repeat right 45px center;
    background-size: 25px auto;
}
.top-content.popular .body{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, calc(17.179px + 2.564vw), 50px);
}
.top-content.popular .box{
    width: calc((100% - clamp(30px, calc(17.179px + 2.564vw), 50px) * 2) / 3);
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    text-align: center;
}
.top-content.popular .box img{
    display: block;
    margin-bottom: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: #707070 1px solid;
}
.top-content.brand .body{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.top-content.brand figure{
    width: calc((100% - 48px) / 4);
}
.top-content.search h3{
    margin-bottom: 20px;
    font-weight: normal;
    font-size: clamp(18px, calc(12.872px + 1.026vw), 26px);
}
.top-content.search .box a{
    display: block;
    text-align: center;
}
.top-content.search .case {
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.top-content.search .case .inr{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.top-content.search .case .box{
    width: calc((100% - 90px) / 4);
    font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
}
.top-content.search .case span{
    display: block;
    margin-bottom: 20px;
    width: 100%;
    aspect-ratio: 456 / 612;
    background: #000;
    border: #707070 1px solid;
}
.top-content.search .case a:hover{
    opacity: 1;
}
.top-content.search .case img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s;
}
.top-content.search .case a:hover img{
    opacity: 0.7;
}
.top-content.search .price .inr{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}
.top-content.search .price .box{
    width: calc((100% - 42px) / 4);
    font-size: clamp(16px, calc(9.333px + 0.833vw), 14px);
    border: #707070 1px solid;
}
.top-content.search .price .box a{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}
.top-content.search .price b{
    font-size: clamp(20px, calc(3.333px + 2.083vw), 24px);
    font-weight: normal;
}
.top-content.search .price p{
    font-size: clamp(14px, calc(11.436px + 0.513vw), 18px);
}
.top-content.flow {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
    padding: clamp(40px, calc(-4.872px + 8.974vw), 110px) 0;
    background: #F0F0F0;
}
.top-content.flow .header{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(18px, calc(14.795px + 0.641vw), 23px);
    text-align: center;
}
.top-content.flow .body{
    counter-reset: order;
}
.top-content.flow .box{
    position: relative;
    padding-left: 20%;
}
.top-content.flow .box:before{
    counter-increment: order;
    content: 'STEP ' counter(order);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -15px;
    left: 0;
    padding: 5px;
    width: 13%;
    aspect-ratio: 176 / 60;
    color: #fff;
    font-size: clamp(16px, calc(10.231px + 1.154vw), 20px);
    background: #0C3429;
}
.top-content.flow .box:after{
    content: '';
    position: absolute;
    left: 6.5%;
    bottom: 0;
    width: 1px;
    height: calc(100% - 80px);
    background: #0C3429;
}
.top-content.flow dl{
    margin-bottom: clamp(30px, calc(-2.051px + 6.410vw), 80px);
}
.top-content.flow .box:last-child dl{
    margin-bottom: 0;
}
.top-content.flow .box:last-child:after{
    content: none;
}

.top-content.flow dt{
    margin-bottom: 30px;
    padding-top: 5px;
    padding-left: 65px;
    min-height: 45px;
    color: #0C3429;
    font-weight: 600;
    font-size: clamp(18px, calc(11.590px + 1.282vw), 24px);
}
.top-content.flow dl.d1 dt{
    background: url('../images/icon/icon-sp.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dl.d2 dt{
    background: url('../images/icon/icon-search.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dl.d3 dt{
    background: url('../images/icon/icon-pc.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dl.d4 dt{
    background: url('../images/icon/icon-calculator.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dl.d5 dt{
    background: url('../images/icon/icon-document.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dl.d6 dt{
    background: url('../images/icon/icon-truck02.png') no-repeat 0 center;
    background-size: 45px auto;
}
.top-content.flow dd p{
    margin-bottom: clamp(15px, calc(5.385px + 1.923vw), 30px);
    font-size: clamp(16px, calc(10.872px + 1.026vw), 20px);
}
.top-content.flow dd span{
    display: inline-block;
    padding: 0 5px;
    color: #fff;
    background: #A79B59;
}
.top-content.flow dd li{
    margin-bottom: 10px;
    font-size: clamp(14px, calc(10.154px + 0.769vw), 16px);
}
.top-content.flow dd li:before{
    content: '●';
    display: inline-block;
    margin-right: clamp(5px, calc(0.513px + 0.897vw), 12px);
    color: #A79B59;
}
.top-content.flow .link-s2{
    margin-top: 30px;
}
.top-content.flow .link-s2 a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(220px, calc(-117.931px + 48.276vw), 370px);
    aspect-ratio: 500 / 95;
    color: #fff;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 20px);
    text-align: center;
    background: #A79B59;
}
.top-content.flow li a{
    color: #A79B59;
    text-decoration: underline;
}
.top-content.delivery {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
}
.top-content.delivery .header{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(18px, calc(14.795px + 0.641vw), 23px);
    text-align: center;
}
.top-content.delivery .upper{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(15px, calc(-7.436px + 4.487vw), 50px);
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.top-content.delivery .upper dl{
    margin-bottom: 0;
    width: calc((100% - clamp(20px, calc(0.769px + 3.846vw), 50px) * 3) / 4);
    text-align: center;
    border: #0c3429 1px solid;
}
.top-content.delivery .upper dt{
    padding: clamp(10px, calc(3.590px + 1.282vw), 20px) 10px;
    color: #fff;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    background: #0C3429;
}
.top-content.delivery .upper dd{
    padding: 30px 10px;
    color: #0C3429;
    font-size: 14px;
}
.top-content.delivery .upper dd:before{
    content: '';
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100px;
    aspect-ratio: 1 / 1;
}
.top-content.delivery .upper dl.d1 dd:before{
    background: url('../images/icon/icon-truck03.png') no-repeat center;
    background-size: cover;
}
.top-content.delivery .upper dl.d2 dd:before{
    background: url('../images/icon/icon-ink.png') no-repeat center;
    background-size: cover;
}
.top-content.delivery .upper dl.d3 dd:before{
    background: url('../images/icon/icon-palette.png') no-repeat center;
    background-size: cover;
}
.top-content.delivery .upper dl.d4 dd:before{
    background: url('../images/icon/icon-search02.png') no-repeat center;
    background-size: cover;
}
.top-content.delivery .upper b{
    display: block;
    font-size: clamp(20px, calc(15.513px + 0.897vw), 27px);
}
.top-content.delivery .upper i{
    font-style: normal;
    font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
}
.top-content.delivery .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px clamp(30px, calc(-34.103px + 12.821vw), 130px);
    color: #fff;
    background: #0C3429;
}
.top-content.delivery .text{
    font-size: clamp(22px, calc(18.154px + 0.769vw), 28px);
    font-weight: bold;
    text-align: center;
}
.top-content.delivery .text span{
    display: block;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
}
.top-content.delivery .date ul{
    display: flex;
    gap: 30px;
}
.top-content.delivery .date li{
    text-align: center;
}
.top-content.delivery .date li b{
    display: block;
    font-size: clamp(22px, calc(18.154px + 0.769vw), 28px);
}
.top-content.delivery .date li i{
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    font-style: normal;
}
.top-content.design {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
    padding: clamp(60px, calc(21.538px + 7.692vw), 120px) 0;
    background: #F0F0F0;
}
.top-content.design .header{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(18px, calc(14.795px + 0.641vw), 23px);
    text-align: center;
}
.top-content.design .upper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    padding: clamp(15px, calc(2.179px + 2.564vw), 35px);
    background: #fff;
}
.top-content.design .upper dl{
    margin-bottom: 0;
    width: calc((100% - 40px) / 3);
    text-align: center;
}
.top-content.design .upper dt{
    margin-bottom: 20px;
    color: #0C3429;
    font-size: clamp(16px, calc(9.333px + 0.833vw), 20px);
    font-weight: 600;
}
.top-content.design .upper dt span{
    display: block;
}
.top-content.design .upper dt span:after{
    content: '';
    display: block;
    margin: 0 auto;
    margin-bottom: 15px;
    width: 70px;
    aspect-ratio: 1 / 1;
}
.top-content.design .upper dl.d1 span:after{
    background: url('../images/icon/icon-pen.png') no-repeat center;
    background-size: cover;
}
.top-content.design .upper dl.d2 span:after{
    background: url('../images/icon/icon-folder.png') no-repeat center;
    background-size: cover;
}
.top-content.design .upper dl.d3 span:after{
    background: url('../images/icon/icon-fukidashi.png') no-repeat center;
    background-size: cover;
}
.top-content.design .upper dt b{
    display: inline-block;
    margin-bottom: clamp(15px, calc(5.385px + 1.923vw), 30px);
    padding: 3px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: #497E6F;
}
.top-content.design .upper dl.d2 b{
    background: #E09345;
}
.top-content.design .upper dl.d3 b{
    background: #57699A;
}
.top-content.design .upper dd{
    font-size: 14px;
}
.top-content.design h3{
    margin-bottom: 30px;
    color: #0C3429;
    font-size: clamp(22px, calc(18.154px + 0.769vw), 28px);
    font-weight: normal;
    text-align: center;
    overflow: hidden;
}
.top-content.design h3 span{
    display: inline-block;
    position: relative;
}
.top-content.design h3 span:before,
.top-content.design h3 span:after{
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    width: 1000px;
    height: 1px;
    background: #405F57;
    transform: translateY(-50%) translateX(-100%);
}
.top-content.design h3 span:after{
    left: auto;
    right: -30px;
    transform: translateY(-50%) translateX(100%);
}
.top-content.design .bottom {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, calc(-18.462px + 7.692vw), 80px);
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.top-content.design .bottom dl{
    margin-bottom: 0;
    width: calc((100% - clamp(20px, calc(-18.462px + 7.692vw), 80px) * 3) / 4);
    color: #0C3429;
}
.top-content.design .bottom dt{
    margin-bottom: 10px;
    font-size: clamp(18px, calc(16.718px + 0.256vw), 20px);
    font-weight: 600;
}
.top-content.design .bottom dt:before{
    content: '●';
    display: inline-block;
    margin-right: 5px;
    color: #A79B5A;
}
.top-content.design .bottom dd{
    font-size: clamp(16px, calc(14.718px + 0.256vw), 18px);   
}
.top-content.payment .link,
.top-content.design .link{
    display: block;
    text-align: center;
}
.top-content.payment .link a,
.top-content.design .link a{
    display: inline-block;
    padding: 20px 50px;
    padding-right: 130px;
    color: #fff;
    font-size: clamp(22px, calc(16.872px + 1.026vw), 20px);
    line-height: 1;
    background: #0C3429 url('../images/icon/arrow05.svg') no-repeat right 60px center;
    background-size: 45px auto;
}

.top-content.payment .link a:hover,
.top-content.design .link a:hover{
    background: #0C3429 url('../images/icon/arrow05.svg') no-repeat right 47px center;
    background-size: 45px auto;
}
.top-content.payment {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
}
.top-content.payment .header{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(18px, calc(14.795px + 0.641vw), 23px);
    text-align: center;
}
.top-content.payment .body{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}
.top-content.payment dl{
    margin-bottom: 0;
    padding: clamp(20px, calc(7.179px + 2.564vw), 40px) 20px;
    width: calc((100% - 75px) / 4);
    text-align: center;
    border: #707070 1px solid;
}
.top-content.payment dt{
    display: inline-block;
    margin-bottom: clamp(15px, calc(-10.000px + 3.125vw), 30px);
    color: #0C3429;
    font-size: clamp(18px, calc(14.154px + 0.769vw), 24px);
}
.top-content.payment dt:before{
    content: '●';
    display: inline-block;
    margin-right: 5px;
    color: #A79B59;
}
.top-content.payment dt span{
    font-size: clamp(15px, calc(13.718px + 0.256vw), 17px);
}
.top-content.payment p.s1{
    margin-bottom: clamp(40px, calc(20.769px + 3.846vw), 70px);
    font-size: clamp(18px, calc(16.718px + 0.256vw), 20px);
    text-align: center;
}
.quality {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
    padding: clamp(60px, calc(21.538px + 7.692vw), 120px) 0;
    text-align: center;
    background: #F0F0F0;
    overflow: hidden;
}
.quality:not(.front_page .quality) {
    margin-bottom: 0;
}
.quality .wrap{
    max-width: 1030px;
}
.quality .header{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    padding: 0;
    width: auto;
    font-size: clamp(14px, calc(7.590px + 1.282vw), 20px);
}
.quality .main{
    margin-bottom: clamp(40px, calc(27.179px + 2.564vw), 60px);
}
.quality .main img{
    border: 1px solid #707070;
}
.quality .sub .inr{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.quality .sub img{
    display: block;
    width: calc((100% - 90px) / 4);
    aspect-ratio: 228 / 306;
    object-fit: cover;
    border: 1px solid #707070;
}
.quality .link a {
    display: inline-block;
    padding-right: 32px;
    font-size: clamp(18px, calc(14.154px + 0.769vw), 24px);
    background: url(../images/icon/arrow.svg) no-repeat right center;
    background-size: 25px auto;
}
.top-content.news {
    position: relative;
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
}
.top-content.news h2{
    margin-bottom: 50px;
}
.top-content.news ul{
    margin: 0;
    padding: 0;
    text-align: center;
    border: none;
    box-shadow: none;
}
.top-content.news li{
    margin: 0;
    padding: 30px 0 20px;
    font-size: 22px;
    text-align: left;
    background: url('../images/icon/arrow.svg') no-repeat right center;
    background-size: 25px auto;
    border-bottom: #d3d3d3 1px solid;
}
.top-content.news li a{
    padding: 0;
    padding-right: 40px;
}
.top-content.news li span{
    display: inline-block;
    margin-right: clamp(20px, calc(-5.641px + 5.128vw), 60px);
}
.top-content.news .show-btn{
    display: inline-block;
    margin: 0 30px;
    margin-top: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(18px, calc(14.154px + 0.769vw), 24px);
    cursor: pointer;
}
.top-content.news .show-btn i{
    display: inline-block;
    margin-left: 10px;
}
.top-content.faq {
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
}
.top-content.faq:before{
    content: '';
    display: block;
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
    width: 100%;
    aspect-ratio: 192 / 39;
    background: url('../images/top/faq-bg.jpg') no-repeat center;
    background-size: cover;
}
.top-content.faq dl{
    position: relative;
    margin-bottom: 0;
    padding-right: 50px;
    cursor: pointer;
}
.top-content.faq dl:not(:last-of-type){
    margin-bottom: clamp(30px, calc(-14.872px + 8.974vw), 65px);
}
.top-content.faq dl:after,
.top-content.faq dl:before{
    content: '';
    position: absolute;
    top: 15px;
    right: 0;
    width: 30px;
    height: 1px;
    background: #000;
}
.top-content.faq dl:after{
    transform: rotate(90deg);
    transition: all .3s;
}
.top-content.faq dl.show:after{
    transform: rotate(0deg);
}
.top-content.faq dt{
    font-size: 23px;
    font-weight: normal;
    padding-bottom: 20px;
}
.top-content.faq dt:before{
    content: 'Q.';
    display: inline-block;
    margin-right: 20px;
    font-size: 30px;
}
.top-content.faq dd{
    margin-top: 10px;
    height: 0;
    opacity: 0;
    font-size: 18px;
    transition: all .3s;
}
.top-content.faq .show dd{
    height: auto;
    opacity: 1;
}
.top-content.faq .link{
    display: block;
    margin-top: clamp(30px, calc(-36.667px + 8.333vw), 70px);
    text-align: center;
}

@media screen and (max-width:1500px) {
    .top-content.mv .text02,
    .top-content.mv .text01{
        left: 30px;
        padding: 0 20px;
        width: auto;
        transform: translateX(0);
    }
    .top-content.mv .text02{
        text-align: center;
    }
    .top-content.mv .text02 img{
        width: clamp(300px, calc(-331.667px + 78.958vw), 500px);
    }
}

@media screen and (max-width:991px) {
    .top-content.mv .product {
        display: none;
    }
    .top-content.naire .box dl{
        margin: 0;
    }
    .top-content.ranking .body{
        align-items: flex-start;
        gap: 20px;
    }
    .top-content.ranking .box:first-child,
    .top-content.ranking .box{
        width: calc((100% - 40px) / 3);
    }
    .top-content.delivery .upper dl{
        width: calc((100% - clamp(15px, calc(-7.436px + 4.487vw), 50px) * 1) / 2);
    }
    .top-content.design .bottom dl{
        width: calc((100% - clamp(20px, calc(-18.462px + 7.692vw), 80px) * 1) / 2);
    }
    .top-content.payment dl{
        width: calc((100% - 25px) / 2);
    }
}

@media screen and (max-width:767px) {
    .top-content.mv .text02,
    .top-content.mv .text01{
        left: 0;
        padding: 0;
        padding-left: clamp(20px, calc(-70.000px + 24.000vw), 50px);
        letter-spacing: -0.5px;
    }
    .top-content.mv .text02 img{
        margin-top: 10px;
        width: 200px;
    }
    .top-content.naire .body{
        gap: 30px 20px;
    }
    .top-content.naire .box {
        width: 45%;
    }
    .top-content.naire .box dd br{
        display: none;
    }
    .top-content.payment .link a,
    .top-content.design .link a,
    .top-content.ranking .link a,
    .top-content.naire .link a{
        padding: 15px 20px;
        padding-right: 50px;
        font-size: 15px;
        background-image: url('../images/icon/arrow05.svg');
        background-position: right 15px center;
        background-size: 25px auto;
    }
    .top-content.ranking .tab-menu span{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: calc((100% - 15px) / 4);
        height: 40px;
        aspect-ratio: unset;
        font-size: 12px;
        line-height: 1.2;
    }
    .top-content.ranking .tab-menu span br{
        display: block;
    }
    .top-content.ranking .wrapper{
        margin: 0 -15px;
        padding-left: 15px;
        overflow-x: auto;
    }
    .top-content.ranking .inr{
        flex-wrap: nowrap;
        justify-content: start;
        width: 1400px;
    }
    .top-content.ranking .box{
        width: 260px!important;
    }
    .top-content.popular .box{
        width: calc((100% - clamp(30px, calc(17.179px + 2.564vw), 50px) * 1) / 2);
    }
    .top-content.brand .body{
        gap: 15px 30px;
    }
    .top-content.brand figure{
        width: calc((100% - 30px) / 2);
    }
    .top-content.search .case .inr{
        gap: 30px 20px;
    }
    .top-content.search .case .box{
        width: calc((100% - 20px) / 2);
    }
    .top-content.search .case span{
        margin-bottom: 10px;
    }
    .top-content.search .price .inr{
        gap: 25px;
        margin-bottom: 10px;
    }
    .top-content.search .price .box{
        width: calc((100% - 25px) / 2);
    }
    .top-content.search .price .box a{
        min-height: 45px;
    }
    .top-content.flow .box{
        padding-left: 15px;
    }
    .top-content.flow .box:before{
        top: 0;
        left: -15px;
        width: 70px;
        font-size: 11px;
    }
    .top-content.flow .box:after{
        left: 0;
        height: 100%;
    }
    .top-content.flow dl{
        padding-top: 40px;
    }
    .top-content.flow dt{
        margin-bottom: 20px;
        padding-left: 45px;
        min-height: 30px;
        background-size: 30px auto!important;
    }
    .top-content.delivery .upper dd:before{
        margin-bottom: 10px;
        width: 70px;
    }
    .top-content.payment dl,
    .top-content.design .bottom dl,
    .top-content.design .upper dl{
        width: 100%;
    }
    .quality .sub{
        overflow: auto;
    }
    .quality .sub .inr{
        flex-wrap: nowrap;
        gap: 15px;
        width: 660px;
    }
    .quality .sub img{
        width: 150px;
    }
    .top-content.news h2{
        margin-bottom: 10px;
    }
    .top-content.news li{
        padding: 20px 0 45px 10px;
        font-size: 18px;
        background: url('../images/icon/arrow.svg') no-repeat right bottom 25px;
        background-size: 25px auto;
    }
    .top-content.news li:last-of-type{
        border-bottom: none;
    }
    .top-content.news li a{
        padding: 0;
        padding-right: 30px;
        line-height: 1.65;
    }
    .top-content.news li span{
        display: block;
        margin-bottom: 3px;
        margin-left: -10px;
    }
    .top-content.faq dl{
        padding-right: 25px;
    }
    .top-content.faq dl:after,
    .top-content.faq dl:before{
        top: 12px;
        width: 15px;
    }
    .top-content.faq dt{
        position: relative;
        padding-left: 25px;
        font-size: 14px;
    }
    .top-content.faq dt:before{
        position: absolute;
        top: 0;
        left: 0;
        font-size: 18px;
    }
    .top-content.faq dd{
        padding-left: 25px;
        font-size: 16px;
    }
}

/* sidebar */
.side-content{
    margin-top: 20px;
}
.sb__category ul .cat__has-sub {
    padding: 0;
    border-bottom: 1px solid #707070!important;
}
.sb__category .ttl,
.sb__category ul li a.ttl2 {
    position: relative;
    margin: 0;
    padding: 20px 10px!important;
    padding-right: 40px!important;
    font-weight: normal!important;
    font-size: 22px;
    background: none!important;
}
.sb__category .ttl:after,
.sb__category ul li a.ttl2:after {
    content: '';
    position: absolute;
    top: 0;
    right: 20px;
    width: 14px;
    height: 100%;
    background: url('../images/icon/arrow04.svg') no-repeat right center!important;
    background-size: 100% auto!important;
}
.cat__has-sub.opened .ttl:after,
.cat__has-sub.opened a.ttl2:after,
.cat__has-sub.opened a.ttl2,
.cat__has-sub.opened .ttl{
    background: none!important;
}
.sb__category .ttl:before,
.sb__category ul li a.ttl2:before{
    display: none;
}
.sb__category li img{
    width: 45px!important;
    height: auto!important;
}
.sb__category ul li a {
    color: #3B4043;
    font-size: 16px;
    font-weight: normal!important;
    line-height: 1.2;
}
.sb__category ul li li li a {
    font-size: 18px;
}
.main__sidebar_left .sb__category>ul ul li {
    margin: 20px 0!important;
    padding: 0!important;
    border-bottom: none!important;
}
.sb__category ul#category>li.cat__has-sub:hover .cat__menu-sub li:first-child b:after{
    display: none;
}
.sb__category ul>li>a:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-display: swap;
    color: #000;
    right: 5px;
    font-size: 12px;
}
.main__sidebar_left .sb__category .onclick-area:hover{
    background: none;
    opacity: 0.8;
    /* transition: all .3s; */
}
.opened>.cat__menu-sub {
    margin-top: -10px;
}
.p-textsearch-compact {
    background: #F5F5F5!important;
}
.p-textsearch-btn {
    background: #0C3429!important;
}

/* footer */
.site__footer{
    margin: 0!important;
    padding-bottom: 40px;
    color: #fff;
    background: #0C3429;
    border-top: none;
}
.site__footer a{
    color: #fff;
}
#chatbot-container{
    right: clamp(15px, calc(-43.333px + 7.292vw), 50px)!important;
    bottom: clamp(15px, calc(-43.333px + 7.292vw), 50px)!important;
    border-radius: 100%;
    box-shadow: 0px 0px 11px #FFFFFFBF;
    z-index: 99999!important;
}
#chatbot-container #minimized-icon{
    width: clamp(56px, calc(34.205px + 4.359vw), 90px);
}
.footer-content.company {
    padding-top: clamp(60px, calc(-4.103px + 12.821vw), 160px);
    padding-bottom: clamp(80px, calc(67.179px + 2.564vw), 100px);
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url('../images/footer/company-bg.jpg') no-repeat center;
    background-size: cover;
}
.footer-content.company .wrap{
    max-width: 1030px;
}
.footer-content.company h2{
    margin-bottom: 60px;
    color: #fff;
    font-size: clamp(22px, calc(15.590px + 1.282vw), 32px);
    font-weight: normal;
    text-align: center;
    line-height: 1.6;
}
.footer-content.company .contact{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 55px;
}
.footer-content.company .contact a{
    display: flex;
    align-items: center;
    width: calc((100% - 40px) / 2);
    aspect-ratio: 48 / 11;
    color: #fff;
    border: #fff 1px solid;
}
.footer-content.company a.tel{
    padding-left: 16%;
    font-size: 14px;
    background: url('../images/icon/icon-phone.png') no-repeat 17% center;
    background-size: 56px auto;
}
.footer-content.company a.tel b {
    display: block;
    font-weight: normal;
    font-size: clamp(24px, calc(16.308px + 1.538vw), 32px);
}
.footer-content.company a.mail {
    padding-left: 13%;
    font-size: clamp(20px, calc(14.231px + 1.154vw), 26px);
    background: url('../images/icon/icon-mail.png') no-repeat 11% center;
    background-size: 55px auto;
}
.footer-content.company .body{
    display: flex;
    flex-wrap: wrap;
}
.footer-content.company dl{
    margin: 0;
    padding: 0 15px;
    padding-top: clamp(30px, calc(10.769px + 3.846vw), 60px);
    width: calc(100% / 3);
    font-size: 18px;
    border-right: #fff 1px solid;
}
.footer-content.company dl:last-child{
    border: none;
}
.footer-content.company dt{
    margin-bottom: 20px;
    text-align: center;
    font-weight: 400;
}
.footer-content.company dd{
    font-weight: normal;
    line-height: 1.65;
}
.footer-content.menu {
    position: relative;
    padding-top: 80px;
}
.footer-content.menu .pagetop{
    display: block!important;
    position: absolute;
    top: -30px;
    bottom: auto!important;
    right: clamp(25px, calc(-3.846px + 5.769vw), 70px);
    padding: 0;
    padding-top: 52px;
    width: auto;
    height: auto;
    font-size: 18px;
    background: url('../images/icon/arrow03.svg') no-repeat 20px 0;
    background-size: 11px auto;
    border: none;
}
.footer-content.menu .pagetop:before{
    display: none;
}
.footer-content.menu .body{
    display: flex;
    gap: 45px clamp(30px, calc(-43.718px + 14.744vw), 145px);
    flex-wrap: wrap;
    margin-bottom: clamp(30px, calc(-27.692px + 11.538vw), 120px);
}
.footer-content.menu .logo{
    width: 214px;
}
.footer-content.menu .logo img{
    max-width: 100%;
}
.footer-content.menu .nav{
    flex: 1;
    display: flex;
    gap: 50px clamp(20px, calc(-16.364px + 9.091vw), 100px);
}
.footer-content.menu .nav:before,
.footer-content.menu .nav:after{
    display: none;
}
.footer-content.menu li{
    margin-bottom: 12px;
}
.footer-content.menu li a{
    font-size: 16px;
}
.site__footer .copyright{
    padding: 0;
    width: auto;
    color: #fff;
    font-size: 16px;
    text-align: center;
}

@media screen and (max-width:991px) {
    .footer-content.company dl{
        padding-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
        width: 100%;
        border: none;
        border-bottom: #fff 1px solid;
    }
}

@media screen and (max-width:767px) {
    .footer-content.company {
        background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/footer/company-bg-sp.jpg') no-repeat center;
        background-size: cover;
    }
    .footer-content.company h2{
        margin-bottom: 50px;
        line-height: 1.35;
    }
    .footer-content.company .contact{
        gap: 20px;
        margin-bottom: 0;
    }
    .footer-content.company .contact a{
        width: 100%;
        aspect-ratio: 5 / 1;
    }
    .footer-content.company .contact span{
        display: inline-block;
        text-align: center;
    }
    .footer-content.company a.tel{
        padding-left: 32%;
        background-position: 12% center;
    }
    .footer-content.company a.mail {
        padding-left: 33%;
        background-position: 14% center;
    }
    .footer-content.company .body{
        display: none;
    }
    .footer-content.menu .pagetop{
        top: -25px;
        padding-top: 40px;
        font-size: 14px;
        background: url('../images/icon/arrow03.svg') no-repeat 14px 0;
        background-size: 9px auto;
    }
    .footer-content.menu .logo{
        order: 2;
        margin: 0;
        margin: 0 auto;
        width: 214px;
    }
    .footer-content.menu .nav{
        flex: none;
        padding-left: 20px;
        width: 100%;
    }
    .footer-content.menu li{
        margin-bottom: 8px;
    }
    .footer-content.menu li a{
        font-size: 14px;
    }
    .site__footer .copyright{
        font-size: 14px;
    }
}

@media screen and (max-width:375px) {
    .footer-content.menu .nav{
        padding-left: 0;
    }
}

/* 下層 */
.ec-searchnavRole__topicpath .ec-topicpath {
    margin: clamp(20px, calc(7.179px + 2.564vw), 40px) 0;
    padding: 0;
    font-size: clamp(14px, calc(7.590px + 1.282vw), 16px);
    white-space: wrap!important;
    background: none;
    border: none;
}
.ec-searchnavRole__topicpath .ec-topicpath a{
    color: #000;
    font-weight: 500;
}
.ec-topicpath .ec-topicpath__item,
.ec-topicpath .ec-topicpath__divider,
.ec-topicpath .ec-topicpath__item--active {
    padding-right: 0;
    color: #000;
    font-weight: 500;
    background: none;
}
.ec-topicpath .ec-topicpath__item:after,
.ec-topicpath .ec-topicpath__divider:after{
    content: '/';
    display: inline-block;
    padding: 0 10px;
    color: #000;
}
.ec-topicpath .ec-topicpath__item:last-of-type:after{
    display: none;
}
.form-control {
    max-width: 100%;
}

/* 商品一覧 */
.site__main .main__content--free {
    padding-bottom: 0;
}
.catgory-content .eyecatch{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.catgory-content .eyecatch img{
    width: 100%;
}
.catgory-content .lead{
    margin-bottom: clamp(35px, calc(12.564px + 4.487vw), 70px);
    font-weight: 400;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    text-align: center;
}
.catgory-content .text-content{
    margin-bottom: 60px;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    text-align: center;
}
.catgory-content .text-content h2{
    margin-bottom: clamp(30px, calc(4.359px + 5.128vw), 70px);
    padding-bottom: 10px;
    font-weight: normal;
    font-size: clamp(24px, calc(13.744px + 2.051vw), 40px);
    border-bottom: #7f7f7f 1px solid;
}
.catgory-content .tab-content{
    margin-bottom: 60px;
}
.catgory-content .tab-menu{
    display: flex;
    justify-content: space-between;
    border-bottom: #0c3429 8px solid;
}
.catgory-content .tab-menu span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 40px) / 3);
    height: 75px;
    color: #fff;
    font-size: clamp(14px, calc(6.308px + 1.538vw), 26px);
    background: #A79B59;
    cursor: pointer;
}
.catgory-content .tab-menu span.active{
    background: #0C3429;
}
.catgory-content .tab-detail {
    background: #F0F0F0;
}
.catgory-content .tab-detail [data-tab]{
    padding: 60px 20px;
    padding-bottom: clamp(60px, calc(-4.103px + 12.821vw), 160px);
}
.catgory-content .tab-detail [data-tab]:not(.active){
    display: none;
}
.catgory-content .tab-detail .text{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
    text-align: center;
    line-height: 1.7;
    letter-spacing: 1px;
}
.catgory-content .tab-detail h3{
    margin-bottom: clamp(20px, calc(0.769px + 3.846vw), 50px);
    font-weight: normal;
    font-size: clamp(20px, calc(7.179px + 2.564vw), 40px);
}
.catgory-content .tab-detail h3:before{
    content: '★';
    display: block;
    margin-bottom: 10px;
    color: #A79B59;
    font-size: 20px;
}
.catgory-content .tab-detail [data-tab="t2"] h3:before{
    content: '★★';
}
.catgory-content .tab-detail [data-tab="t3"] h3:before{
    content: '★★★';
}
.catgory-content .recommend h4{
    margin-bottom: clamp(20px, calc(-5.641px + 5.128vw), 60px);
    font-size: clamp(20px, calc(10.385px + 1.923vw), 27px);
    font-weight: normal;
    text-align: center;
}
.catgory-content .recommend .inr{
    display: flex;
    gap: 30px;
}
.catgory-content .recommend .box{
    width: calc((100% - 60px) / 3);
}
.catgory-content .recommend .image{
    margin-bottom: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: #707070 1px solid;
}
.catgory-content .recommend .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catgory-content .recommend .info{
    font-weight: bold;
}
.catgory-content .recommend .name{
    margin-bottom: 10px;
    font-size: clamp(16px, calc(14.718px + 0.256vw), 18px);
    font-weight: 400;
}
.catgory-content .recommend .price{
    font-size: clamp(20px, calc(13.590px + 1.282vw), 20px);
}
.product_page .top-content.ranking h2:before,
.product_page .top-content.ranking h2{
    color: #000;
    text-align: left;
}
.product_page .top-content.ranking h2:before{
    font-size: clamp(35px, calc(18.974px + 3.205vw), 40px);
}
.product_page .top-content.ranking h2 span{
    padding: 0;
}
.product_page .top-content.ranking h2 span:before,
.product_page .top-content.ranking h2 span:after{
    display: none;
}
.product_page .top-content.ranking .link{
    display: none;
}
.product_page .main__content--free {
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
    border-bottom: none;
}
.product_page .main__content h1{
    margin-bottom: clamp(40px, calc(20.769px + 3.846vw), 70px);
     line-height: 1.2;
    font-size: clamp(25px, calc(8.974px + 3.205vw), 30px);
    font-weight: 600;
}
.product_page .main__content h1 span{
    display: block;
    margin-top: clamp(5px, calc(-1.410px + 1.282vw), 15px);
    font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
    font-weight: normal;
}
.ec-searchnavRole__counter{
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: clamp(20px, calc(10.385px + 1.923vw), 24px);
    border-bottom: #b7b7b7 1px solid;
}
.ec-searchnavRole__counter span.ec-font-bold{
    color: #000;
}
.ec-searchnavRole__actions .ec-select.flex-box{
    flex-wrap: wrap;
}
.ec-searchnavRole__actions .sort{
    display: flex!important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: clamp(15px, calc(5.385px + 1.923vw), 30px);
    width: 100%;
    text-align: center;
}
.ec-searchnavRole__infos .ec-searchnavRole__actions .sort label{
    margin: 0;
    padding: 7px 5px;
    min-width: 150px;
    min-height: 35px;
    color: #0C3429;
    font-size: 16px;
    text-align: center;
    background: #fff;
    border: #0c3429 1px solid;
    border-radius: 0;
}
.ec-searchnavRole__infos input[type="radio"].order-by + label:hover,
.ec-searchnavRole__infos input[type="radio"].order-by + label.selected {
    color: #fff;
    background: #0C3429;
}
.ec-searchnavRole__actions .num{
    justify-content: flex-end;
    width: 100%;
}
.main__content .search_contents.catesearch {
    border: 1px solid #b7b7b7;
    border-radius: 0;
    padding: clamp(15px, calc(5.385px + 1.923vw), 30px);
    width: 100%;
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.main__content .search__area_cate button{
    background: #ED913C;
    border-color: #ED913C;
}
.product__list{
    margin-bottom: clamp(60px, calc(21.538px + 7.692vw), 120px);
}
.product__list .products{
    display: flex;
    gap: clamp(20px, calc(-25.000px + 5.859vw), 50px);
}
.main__content .product__list .products>li {
    margin: 0 0 10px!important;
    width: calc((100% - clamp(20px, calc(-25px + 5.859vw), 50px) * 2) / 3);
    max-width: calc((100% - clamp(20px, calc(-25px + 5.859vw), 50px) * 2) / 3);
}
.main__content .product__list .products>li:hover img,
.products .product__thumb img{
    border-color: #707070;
}
.main__content .product__list .products h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}
.product__list .price-flex .bg-red + p.bg-wh {
    color: #0C3429;
}
.main__content .product__list .products p {
    margin: 0!important;
    margin-bottom: 5px!important;
    font-size: 15px;
    font-weight: 500;
    font-family: "Yu Gothic", "Yu Gothic UI";
}
.ec-pagerRole .ec-pager{
    margin: 50px 0;
    padding: 0;
}
.ec-pagerRole .ec-pager .ec-pager__item--active a {
    background: #0C3429;
}

@media screen and (max-width:800px) {
    .main__content .product__list .products>li {
        margin-bottom: 20px!important;
        width: calc((100% - clamp(20px, calc(-25px + 5.859vw), 50px)) / 2);
        max-width: calc((100% - clamp(20px, calc(-25px + 5.859vw), 50px)) / 2);
    }
}

@media screen and (max-width:767px) {
    .catgory-content .tab-menu span{
        width: calc((100% - 20px) / 3);
        height: 40px;
    }
    .catgory-content .tab-detail [data-tab]{
        padding: 15px;
    }
    .catgory-content .recommend .wrapper{
        overflow: auto;
    }
    .catgory-content .recommend .inr{
        flex-wrap: nowrap;
        gap: 20px;
        width: 820px;
    }
    .catgory-content .recommend .box{
        width: 260px;
    }
    .ec-searchnavRole__actions .sort{
        gap: 10px;
    }
    .ec-searchnavRole__infos .ec-searchnavRole__actions .sort label{
        padding: 0 5px;
        height: 30px;
        min-height: 30px;
        font-size: 14px;
        line-height: 30px;
    }
}

/* 商品詳細 */
.product-siteMain .product-siteContents{
    width: calc(100% - 280px);
    flex-basis: calc(100% - 280px);
    margin-left: 40px;
}
.ec-productRole.main-content{
    display: flex;
    flex-wrap: wrap;
}
.ec-productRole.main-content .ec-grid2,
.ec-productRole.main-content .ec-grid2__cell{
    width: 100%;
}
.ec-grid2__cell.cleft {
    display: flex!important;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}
.ec-productRole__info{
    width: 50%!important;
}
.ec-productRole__image {
    width: calc(50% - 40px)!important;
}
.ec-productRole__image .slick-arrow{
    display: none!important;
}
.ec-productRole__image .slick-slider {
    margin-bottom: 30px;
}
.ec-productRole__image .ec-sliderItemRole .slideThumb img,
.ec-productRole__image .ec-sliderItemRole img {
    border: 1px solid #707070;
}
.ec-productRole__image .ec-sliderItemRole .item_nav{
    gap: 24px;
    margin: 0;
}
.ec-productRole__image .ec-sliderItemRole .slideThumb {
    width: calc((100% - 48px) / 3);
    padding: 0;
    margin: 0;
}
.ec-productRole__info>.ec-productRole{
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}
.ec-productRole .ec-productRole .ec-productRole__tags{
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}
.ec-productRole .ec-productRole .ec-productRole__tag {
    margin: 0!important;
    margin-bottom: 10px!important;
    padding: 6px 15px;
    font-size: 14px;
    line-height: 1.2;
    border: none;
    border-radius: 3px;
}
.main-content .ec-productRole .ec-productRole__code {
    font-weight: normal;
    font-size: 14px;
}
.main-content .ec-productRole .ec-headingTitle {
    margin: 0;
    margin-bottom: 20px;
    font-size: clamp(25px, calc(18.590px + 1.282vw), 26px)!important;
}
.main-content.ec-productRole .ec-productRole__price{
    background: none;
}
.main-content .non-member-price{
    margin-bottom: 10px;
    padding: 0;
}
.main-content .non-member-price .ec-price__price,
.main-content .non-member-price .ec-price__price__name,
.main-content .non-member-price .ec-price__price__right {
    font-size: 16px;
    color: #FC8C1A!important;
}
.main-content .non-member-price .ec-price__price__right.font-m{
    font-size: 35px!important;
}
.main-content .non-member-price .ec-price__price__right.font-m small{
    font-size: 35px;
}
.ec-productRole .btn-content{
    display: flex;
    gap: clamp(15px, calc(9.231px + 1.154vw), 24px);
    margin-bottom: clamp(10px, calc(0.385px + 1.923vw), 25px);
}
.ec-productRole .btn-content .btn{
    padding: 0;
    width: 206px;
    aspect-ratio: 21 / 5.5;
    color: #0C3429;
    font-size: clamp(15px, calc(13.718px + 0.256vw), 17px);
    font-weight: 500;
    text-align: center;
    line-height: 58px;
    border: #0c3429 2px solid;
}
.ec-productRole .btn-content .btn a{
    display: block;
    color: #0C3429;
}
.ec-productRole .btn-content .btn.proposal{
    color: #fff;
    background: #0c3429;
}
.ec-productRole .btn-content .btn button{
    line-height: 1;
    background: none;
    border: none;
}
.ec-productRole .ec-productRole__description,
.ec-productRole .ec-productInfo,
.ec-productRole .about_printing {
    padding-right: 0;
}
.ec-productRole .ec-productRole__description{
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.ec-productRole .ec-productRole__description p {
    font-size: clamp(16px, calc(14.718px + 0.256vw), 18px);
    line-height: 1.7;
}
.ec-productRole .print-left{
    width: 100%;
}
.ec-productRole .print-right{
    padding: 0;
}
.ec-productRole .ec-productInfo h2{
    margin-bottom: 20px;
    padding: 0;
    font-weight: 500;
    font-size: 18px;
}
.ec-productRole .ec-productInfo h2:before{
    display: none;
}
.ec-productRole .product__specification td,
.ec-productRole .product__specification th{
    padding: 12px;
    font-weight: 500;
    font-size: clamp(15px, calc(13.077px + 0.385vw), 18px);
}
.ec-productRole .product__specification th{
    width: 160px;
}
.ec-productRole .about_printing h2{
    padding-bottom: 10px;
}
.ec-productRole .red{
    color: #EB4133;
    font-weight: bold;
}
.ec-productRole .about_printing p a.btn__outline-primary{
    color: #fff;
    font-weight: 500!important;
    background: #526D65;
    border-color: #526D65;
}
.ec-productInfo .btn.btn__outline-primary.e-inline.vl-middle.beginner:before{
    background: url(/html/plugin/Exp/assets/images/new_common/icon_designformat_white.png) no-repeat 0 0;
    background-size: 30px 30px;
}
.about_printing .btn.btn__outline-primary.e-inline.vl-middle i {
    right: 10px;
    background: url(/html/plugin/Exp/assets/images/new_common/icon_download_wh.png) no-repeat 0 0;
    background-size: 25px 25px;
}
.ec-productRole .check-point-wrap {
    padding: 20px;
    background: #F9F9F9;
}
.ec-productRole .check-ttl {
    color: #526D65;
    margin-bottom: 15px;
    font-size: 18px !important;
}
.ec-productRole .entry-data-check-inner {
    padding-left: 22px;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.5;
}
.ec-productRole .entry-data-check-inner:before,
.ec-productRole .entry-data-check-inner:after{
    margin-top: 5px;
    border-color: #526D65;
}
.ec-productRole .product__customize .ec-productRow{
    border: none;
}
.ec-productRole .order_flow_title{
    margin-bottom: 15px;
    padding: 15px 0;
    color: #fff!important;
    text-align: center;
    background: #596C66;
    border-radius: 5px 5px 0 0;
}
.ec-productRole .order_flow_title:before{
    display: none;
}
.ec-productRole .order_flow_title span{
    display: inline-block;
    padding-left: 30px;
    background: url(/html/plugin/Exp/assets/images/cp/tutorial/btnicon_mitumori_white.png) no-repeat 0 0;
    background-size: 25px auto;
}
.ec-productRole .estimate-right{
    padding: 0;
}
.ec-productRole .estimate-left .left-wrap {
    background: #fff;
    border: #ddd 1px solid;
}
.ec-productRole .estimate-box {
    max-width: 100%;
}
.ec-productRole .sub-title {
    margin-bottom: 10px!important;
    padding: 10px;
    padding-left: 15px;
    color: #596C66;
    font-size: 18px;
    border-left: 4px solid #596C66;
    background: #F3F5FC;
}
.ec-productRole li .sub-title {
    margin-bottom: 0!important;
}
.ec-productRow li:has(.sub-title){
    margin: 10px!important;
    margin-top: 0;
    padding: 0!important;
    width: calc(100% - 20px)!important;
    background: #F3F5FC;
}
.ec-productRole .s-title,
.ec-productRole #InsertNameRadio li{
    color: #596C66;
}
.ec-productRole .s-title{
    margin-bottom: 10px;
}
.ec-productRole .label__color {
    margin-left: 5px!important;
    width: 15px !important;
    height: 15px !important;
    /* border: none !important; */
}
.ec-productRole .ec-productRow .form__checkbox label {
    margin-right: 10px;
    padding-top: 3px;
    padding-left: 30px;
    min-height: 25px;
    color: #000!important;
    font-weight: bold;
}
.ec-productRole .ec-productRow #positionBox .form__checkbox label {
    padding-top: 10px;
}
.ec-productRole .showOn:before,
.ec-productRole #InsertNameBox .ec-productRow .form__checkbox label:before,
.ec-productRole .ec-productRow .form__checkbox label:before {
    top: 50%;
    width: 25px;
    height: 25px;
    border: #3a71b9 1px solid;
    transform: translateY(-50%);
}
.ec-productRole .showOn:after,
.ec-productRole .ec-productRow .form__checkbox label:after {
    top: 44%!important;
    left: 5px;
    width: 8px;
    height: 14px;
    border-width: 0 3px 3px 0;
    border-color: #3A71B9;
    transform: rotate(45deg) translateY(-50%);
}
.ec-productRole .showOn {
    padding-left: 30px;
    color: #000!important;
}
.ec-productRole .productDetail_row .productDetail_col.quantity,
.ec-productRole .colorder {
    width: 15%;
}
.ec-productRole .productDetail_row .productDetail_col.text,
.ec-productRole span.w-60p {
    width: 40%;
}
.ec-productRole .note-tooltip {
    margin-left: 10px;
    transform: translateY(10px);
}
.ec-productRole .estimate-right {
    background: none;
}
.ec-productRole .sub-title.culculate {
    padding: 0;
    padding-bottom: 10px;
    color: #000;
    font-size: clamp(20px, calc(13.590px + 1.282vw), 24px);
    background: none;
    border: none;
}
.ec-productRole .product__quote .quote__box {
    padding-right: 0;
    padding-left: 0;
    background: #F5F5F5;
}
.ec-productRole .quote__box.parent {
    margin-bottom: 20px;
    padding: 20px!important;
}
.ec-productRole #methodBox{
    color: #000!important;
    border: none!important;
}
.ec-productRole .product__quote {
    padding: 0;
    font-size: 16px;
}
.ec-productRole .product__quote dd{
    font-weight: 500;
}
.ec-productRole p#cautionary_note,
.quote__box .tx-highlight#deliver_time,
.quote__box .tx-highlight#proofreading_date,
.ec-productRole .product__quote .tx-highlight {
    color: #ED913C!important;
}
.ec-productRole #deliver_time small:last-of-type{
    color: #000;
}
.ec-productRole .quote__box .tx-highlight#deliver_time{
    color: #ED913C;
}
.ec-productRole .deliver__box h3{
    font-size: clamp(20px, calc(13.590px + 1.282vw), 24px);
}
.ec-productRole .btn__cart,
.ec-productRole .btn__orange {
    background-color: #ED913C;
    border-color: #ED913C;
}
.ec-productRole .estimate-box .barBtn .btn__default {
    color: #596C66;
    font-size: 18px;
    font-weight: bold;
    border: #596c66 2px solid;
}
.ec-productRole .product__quote > div:nth-child(2n) {
    padding-left: 0;
}
.ec-productRole .contact-btn-group{
    display: flex;
    justify-content: center;
    gap: 12px;
}
.ec-productRole .contact-btn-group .favorite a,
.ec-productRole .contact-btn-group .btn-contact{
    display: block;
    position: relative;
    padding: 10px 15px;
    padding-left: 55px;
    width: auto;
    color: #5F5F5F;
    font-weight: bold;
    cursor: pointer;
    border: #d0d0d0 2px solid;
    border-radius: 5px;
}
.ec-productRole .contact-btn-group .favorite a{
    height: 100%;
}
.ec-productRole .contact-btn-group div i{
    position: absolute;
    top: 50%;
    left: 15px;
    color: #999999;
    font-size: 28px;
    transform: translateY(-50%);
}
.ec-productRole .contact-btn-group .addComplete i{
    color: #ffc800;
}

@media screen and (max-width:991px) {
    .site__main .product-siteMain {
        padding-top: 0;
    }
    .product-siteMain .product-siteContents{
        width: 100%;
        flex-basis: 100%;
        margin-left: 0;
    }
    .ec-productRole .estimate-left, .estimate-right {
        padding: 0;
    }
    .ec-productRole .btn-area{
        padding: 0!important;
    }
}

@media screen and (max-width:820px) {
    .ec-productRole__info,
    .ec-productRole__image {
        width: 100%!important;
    }
    .main-content .non-member-price .ec-price__price,
    .main-content .non-member-price .ec-price__price__name,
    .main-content .non-member-price .ec-price__price__right {
        font-size: 16px;
    }
    .main-content .non-member-price .ec-price__price__right.font-m{
        font-size: 35px!important;
    }
    .main-content .non-member-price .ec-price__price__right.font-m small{
        font-size: 20px;
    }
}

@media screen and (max-width: 750px) {
    .ec-productRole .ec-sliderItemRole {
        max-width: 345px;
        height: 345px;
    }
    .ec-productRole .product__specification th{
        width: 130px;
    }
    .ec-productRole [name="childSize"] {
        padding: 5px!important;
    }
    .ec-productRole .estimate-left .left-wrap {
        padding: 0;
        border: none;
    }
    .ec-productRow li:has(.sub-title){
        margin: 0!important;
        margin-bottom: 10px!important;
        width: 100%!important;
    }
    .ec-productRole .product__customize{
        margin-bottom: 10px;
    }
    .ec-productRole .product__customize .ec-productRow>li {
        padding: 0;
    }
    .ec-productRole .product__quote .barBtn .btn{
        margin-bottom: 0;
    }
    .ec-productRole .contact-btn-group{
        display: block;
    }
    .ec-productRole .contact-btn-group .favorite a,
    .ec-productRole .contact-btn-group .btn-contact{
        margin-bottom: 10px;
        padding: 10px 15px;
        text-align: center;
    }
}

/* ご利用ガイド */
.guide-header h1 {
    margin-bottom: clamp(30px, calc(10.769px + 3.846vw), 60px);
}
.guide-content h1 img{
    display: block;
}
.guide-content h2 {
    margin-bottom: 15px;
    color: #0C3429;
    font-size: clamp(25px, calc(0.000px + 5.000vw), 50px);
    font-weight: normal;
    text-align: center;
}
.guide-content h3 {
    margin-bottom: clamp(30px, calc(0.000px + 6.000vw), 60px);
    padding-bottom: 10px;
    font-size: clamp(22px, calc(4.000px + 3.600vw), 40px);
    font-weight: normal;
    text-align: center;
    border-bottom: #000 1px solid;
}
.guide-content h4 {
    position: relative;
    margin-bottom: 20px;
    padding-left: 35px;
    font-size: clamp(20px, calc(8.000px + 2.400vw), 32px);
    font-weight: 500;
}
.guide-content h4:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 1px;
    background: #000;
    transform: translateY(-50%);
}
.guide-content p{
    margin-bottom: clamp(20px, calc(10.385px + 1.923vw), 35px);
}
.guide-content {
    margin-bottom: clamp(60px, calc(0.000px + 12.000vw), 120px);
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
}
.guide-content .box:not(:first-of-type){
    padding-top: clamp(30px, calc(0.000px + 6.000vw), 60px);
    border-top: #000 1px solid;
}
.guide-content .heading{
    margin-bottom: clamp(35px, calc(-0.000px + 7.000vw), 70px);
    color: #0C3429;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
}
.guide-content .heading p{
    display: inline-block;
    position: relative;
    font-size: clamp(16px, calc(12.000px + 0.800vw), 20px);
}
.guide-content .heading p:before,
.guide-content .heading p:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1000px;
    height: 1px;
    background: #0C3429;
    transform: translateY(-50%) translateX(calc(-100% - 30px));
}
.guide-content .heading p:after{
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(calc(100% + 30px));
}
.guide-content dl{
    margin-bottom: clamp(40px, calc(27.179px + 2.564vw), 60px);
}
.guide-content dt{
    margin-bottom: 5px;
    font-weight: 500;
}
.guide-content dt:before{
    content: '■';
    display: inline-block;
}
.guide-content .link{
    display: block;
    margin-top: 20px;
}
.guide-content .btn-s1{
    display: inline-block;
    padding-left: 40px;
    padding-right: 85px;
    min-width: 320px;
    height: 66px;
    font-size: clamp(16px, calc(12.000px + 0.800vw), 20px);
    line-height: 64px;
    background: #fff url('../images/icon/arrow.svg') no-repeat right 45px center;
    background-size: 25px auto;
    border: #000 1px solid;
}
.guide-content .btn-s1.large{
    min-width: 415px;
    height: 90px;
    line-height: 88px;
}
.guide-content .btn-s2{
    display: inline-block;
    position: relative;
    padding-right: 50px;
    padding-bottom: 10px;
    font-size: clamp(14px, calc(10.154px + 0.769vw), 20px);
    background: url('../images/icon/arrow.svg') no-repeat right 0 center;
    background-size: 25px auto;
}
.guide-content .btn-s2:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
}
.guide-content.c02 .link{
    margin-top: clamp(30px, calc(0.000px + 6.000vw), 60px);
    text-align: center;
}
.guide-content.c02 .image{
    margin: clamp(30px, calc(0.000px + 6.000vw), 60px) 0;
}

@media screen and (max-width:767px) {
    .guide-content .link{
        text-align: center;
    }
    .guide-content .btn-s2{
        text-align: left;
    }
    .guide-content .btn-s1.large{
        padding-left: 40px;
        padding-right: 85px;
        padding-bottom: 0;
        min-width: 320px;
        height: 66px;
        line-height: 64px;
    }
}

/* ゴルフグッズラボとは(作業後移動) ggl */
body:has(.ggl-content) #container{
    overflow: hidden;
}
body:has(.ggl-content) .site__main {
    margin-top: 0!important;
}
body:has(.ggl-content) .ec-searchnavRole__topicpath{
    display: none;
}
body:has(.ggl-content) .header-nav.ggl{
    background: #fff;
}
.header-nav.ggl a{
    position: relative;
    padding: 0 clamp(5px, calc(-20.000px + 3.125vw), 20px);
    font-size: clamp(14px, calc(8.667px + 0.667vw), 18px);
    font-weight: bold;
    border: none;
}
.header-nav.ggl a:hover{
    text-decoration: none;
    opacity: 1;
}
.header-nav.ggl a:hover:before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: calc(100% - clamp(5px, calc(-20.000px + 3.125vw), 20px) * 2);
    height: 2px;
    background: #0C3429;
    transform: translateX(-50%);
}
.wide-bg{
    position: relative;
}
.wide-bg:before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    transform: translateX(-50%);
}
.wide-bg>.ggl-container{
    position: relative;
}
.ggl-content .link{
    display: block;
    text-align: center;
}
.ggl-content .btn-s1{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    min-width: 378px;
    max-width: 100%;
    height: 73px;
    color: #fff;
    font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
    font-family: "Yu Gothic", "Yu Gothic UI";
    font-weight: 500;
    background: #2F7D4F;
    border-radius: 5px;
}
body:has(.ggl-content) .top-content.faq{
    margin-top: calc(clamp(60px, calc(21.538px + 7.692vw), 120px) * -1);
    margin-bottom: 0;
    padding: clamp(60px, calc(21.538px + 7.692vw), 120px) 0;
    background: #F8F6F0;
}
body:has(.ggl-content) .top-content.faq:before{
    display: none;
}

.anker-parent{
    position: relative;
}
.anker{
    position: absolute;
    top: calc(var(--header-height) * -1);
}

@media screen and (max-width:767px) {
    .ggl-content .btn-s1{
        padding: 0 15px;
        min-width: auto;
        height: 55px;
    }
}


/* ===========================
   DESIGN TOKENS
=========================== */
:root {
  --ggl-green-deep:   #1a4d2e;
  --ggl-green:        #2e7d4f;
  --ggl-green-mid:    #3d9966;
  --ggl-green-light:  #e8f5ee;
  --ggl-green-pale:   #f2faf5;
  --ggl-white:        #ffffff;
  --ggl-cream:        #f8f6f0;
  --ggl-beige:        #ede9df;
  --ggl-gold:         #b89a4a;
  --ggl-gold-light:   #f5edd8;
  --ggl-text:         #1c1c1c;
  --ggl-text-mid:     #444444;
  --ggl-text-light:   #6b6b6b;
  --ggl-border:       #d8e8de;
  --ggl-shadow:       0 2px 12px rgba(30,77,46,.10);
  --ggl-shadow-hover: 0 6px 24px rgba(30,77,46,.18);
  --ggl-radius:       10px;
  --ggl-radius-lg:    16px;
  --ggl-font-display: 'Noto Serif JP', 'Georgia', serif;
  --ggl-font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --ggl-max-w:        100%;
  --ggl-section-py:   clamp(50px, calc(11.538px + 7.692vw), 110px);
  /* --ggl-section-py-sp: 56px; */
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ggl-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ggl-text);
  background: var(--ggl-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ggl-green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===========================
   LAYOUT UTILITIES
=========================== */
.ggl-container {
  max-width: var(--ggl-max-w);
  margin: 0 auto;
}
.ggl-section {
  padding: var(--ggl-section-py) 0;
}
.ggl-section--cream { background: var(--ggl-cream); }
.ggl-section--green-pale { background: var(--ggl-green-pale); }
.ggl-section--beige { background: var(--ggl-beige); }

.ggl-section-label {
    display: inline-block;
    font-size: clamp(11px, calc(9.718px + 0.256vw), 13px);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ggl-green-mid);
    font-weight: 700;
    font-family: "Yu Gothic", "Yu Gothic UI";
    margin-bottom: 10px;
}
.ggl-section-title {
  font-family: var(--ggl-font-display);
  font-size: clamp(22px, calc(13.026px + 1.795vw), 36px);
  font-weight: 600;
  color: var(--ggl-green-deep);
  line-height: 1.4;
  margin-bottom: 14px;
}
.ggl-section-lead {
    font-size: 17px;
    font-family: "Yu Gothic", "Yu Gothic UI";
    font-weight: 500;
    color: var(--ggl-text-mid);
    max-width: 680px;
    line-height: 1.9;
}
.ggl-section-head {
  margin-bottom: clamp(20px, calc(0.769px + 3.846vw), 50px);
}
.ggl-section-head--center {
  text-align: center;
}
.ggl-section-head--center .ggl-section-lead {
  margin: 0 auto;
}

/* ===========================
   BUTTONS
=========================== */
.ggl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--ggl-font-body);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.ggl-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ggl-btn--primary {
  background: var(--ggl-green);
  color: var(--ggl-white);
  border-color: var(--ggl-green);
}
.ggl-btn--primary:hover {
  background: var(--ggl-green-deep);
  border-color: var(--ggl-green-deep);
  box-shadow: 0 4px 14px rgba(30,77,46,.25);
}
.ggl-btn--outline {
  background: transparent;
  color: var(--ggl-green);
  border-color: var(--ggl-green);
}
.ggl-btn--outline:hover {
  background: var(--ggl-green-light);
}
.ggl-btn--white {
  background: var(--ggl-white);
  color: var(--ggl-green-deep);
  border-color: var(--ggl-white);
}
.ggl-btn--white:hover {
  background: var(--ggl-green-light);
  border-color: var(--ggl-green-light);
}
.ggl-btn--gold {
  background: var(--ggl-gold);
  color: var(--ggl-white);
  border-color: var(--ggl-gold);
}
.ggl-btn--gold:hover {
  background: #9c8038;
  border-color: #9c8038;
}
.ggl-btn--lg {
  padding: 18px 36px;
  font-size: 17px;
}

/* ===========================
   HERO / FIRSTVIEW
=========================== */
.ggl-hero {
  color: var(--ggl-white);
  padding-top: clamp(40px, calc(-4.872px + 8.974vw), 110px);
  padding-bottom: clamp(10px, calc(-2.821px + 2.564vw), 30px);
  position: relative;
}
.ggl-hero::before {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url('../images/footer/company-bg.jpg') no-repeat center;
    background-size: cover;
}
.ggl-hero__inner {
  position: relative;
}
.ggl-hero__eyebrow {
  display: inline-block;
  background: rgba(12,52,41,.8);
  color: #fff;
  font-size: clamp(12px, calc(9.436px + 0.513vw), 16px);
  letter-spacing: .18em;
  padding: 0 clamp(20px, calc(7.179px + 2.564vw), 40px);
  border-radius: 16px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
}
.ggl-hero__h1 {
    color: #fff;
    font-family: var(--ggl-font-display);
    font-size: clamp(28px, 4.5vw, 46px);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;
    letter-spacing: 2.6px;
}
.ggl-hero__subtitle {
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.6;
}
.ggl-hero__desc {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 36px;
  max-width: 700px;
}
.ggl-hero__ctas a{
    display: block;
    margin-bottom: 20px;
    width: 100%;
    max-width: 500px;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    font-weight: 500;
    text-align: center;
    border-radius: 10px;
}

/* ===========================
   LEAD TEXT
=========================== */
.ggl-lead .ggl-container{
    padding: 0 clamp(0px, calc(-133.333px + 16.667vw), 80px);
}
.ggl-lead-block {
  margin: 0 auto;
  text-align: center;
}
.ggl-lead-block .ggl-section-label{
    font-size: clamp(12px, calc(10.077px + 0.385vw), 15px);
}
.ggl-lead-block h2{
    margin-bottom: 30px;
    font-size: clamp(28px, calc(17.744px + 2.051vw), 44px);
}
.ggl-lead-block p {
  font-size: clamp(16px, calc(12.154px + 0.769vw), 22px);
  line-height: 2;
  color: var(--ggl-text-mid);
  font-weight: 500;
}
.ggl-lead-block p + p { margin-top: 16px; }
.ggl-lead-block__highlight {
  display: inline-block;
  background: var(--ggl-green-light);
  color: var(--ggl-green-deep);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

/* ===========================
   MEMBER BANNER
=========================== */
.ggl-banner{
    position: relative;
}
.ggl-banner.ggl-section--green-pale:before{
    background: #F8FCFA;
}
.ggl-banner .ggl-container{
    position: relative;
}
.ggl-banner-member {
    position: relative;
    background: linear-gradient(105deg, var(--ggl-green-deep) 0%, var(--ggl-green-mid) 100%);
    border-radius: clamp(20px, calc(13.590px + 1.282vw), 30px);
    padding: clamp(30px, calc(10.769px + 3.846vw), 60px) clamp(30px, calc(4.359px + 5.128vw), 70px);
    color: var(--ggl-white);
}
.ggl-banner-member:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 26%;
    height: 100%;
    background: url('../images/icon/icon-touroku.png') no-repeat right bottom clamp(30px, calc(10.769px + 3.846vw), 60px);
    background-size: 77% auto;
}
.ggl-banner-member-inner{
    padding-left: 25%;
    text-align: center;
}
.ggl-banner-member__title {
  font-family: var(--ggl-font-display);
  font-size: clamp(22px, calc(11.744px + 2.051vw), 38px);
  font-weight: 500;
  margin-bottom: clamp(20px, calc(7.179px + 2.564vw), 40px);
  color: #fff;
  text-align: center;
}
.ggl-banner-member__text {
  font-size: clamp(16px, calc(12.154px + 0.769vw), 22px);
  color: rgba(255,255,255,.85);
  line-height: 1.36;
}
.ggl-banner-member__features {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 10px clamp(10px, calc(-22.051px + 6.410vw), 60px);
    margin-top: 20px;
}
.ggl-banner-member__feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(14px, calc(10.154px + 0.769vw), 20px);
  color: rgba(255,255,255,.9);
  font-weight: 600;
}
.ggl-banner-member__feature::before {
    content: '';
    border-radius: 50%;
    width: 30px;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: url('../images/icon/icon-check.png') no-repeat center;
    background-size: 100% auto;
}
.ggl-banner-member__cta {
    margin-top: clamp(15px, calc(5.385px + 1.923vw), 30px);
}
.ggl-banner-member__cta .ggl-btn{
    padding: clamp(10px, calc(0.385px + 1.923vw), 25px) clamp(30px, calc(-5.256px + 7.051vw), 85px);
    color: #fff;
    font-size: clamp(16px, calc(10.872px + 1.026vw), 24px);
    font-weight: 500;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.08em;
    background: #B39B56;
    border: none;
    border-radius: 10px;
}

@media screen and (max-width:767px) {
    .ggl-banner-member {
        padding: 20px;
    }
    .ggl-banner-member:before{
        display: none;
    }
    .ggl-banner .ggl-container{
        padding: 0;
    }
    .ggl-banner-member__features {
        grid-template-columns: repeat(1, max-content);
    }
    .ggl-banner-member-inner{
        padding-left: 0;
    }
}

/* ===========================
   STRENGTH CARDS
=========================== */
.ggl-strength {
    position: relative;
}
.ggl-strength:before {
    background: #F8F6F1;
}
.ggl-strength-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 clamp(0px, calc(-19.231px + 3.846vw), 30px);
}
.ggl-strength-card {
    position: relative;
    background: var(--ggl-white);
    border: 1px solid var(--ggl-border);
    border-radius: var(--ggl-radius);
    padding: 28px 24px;
    padding-top: 90px;
    text-align: center;
    box-shadow: var(--ggl-shadow);
    transition: box-shadow .2s, transform .2s;
}
.ggl-strength-card:before{
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 70px;
    aspect-ratio:  1 / 1;
    transform: translateX(-50%);
}
.ggl-strength-card.c1:before{
    background: url('../images/icon/icon-writing.png') no-repeat center;
    background-size: cover;
}
.ggl-strength-card.c2:before{
    background: url('../images/icon/icon-box02.png') no-repeat center;
    background-size: cover;
}
.ggl-strength-card.c3:before{
    background: url('../images/icon/icon-trophy.png') no-repeat center;
    background-size: cover;
}
.ggl-strength-card.c4:before{
    background: url('../images/icon/icon-card.png') no-repeat center;
    background-size: cover;
}
.ggl-strength-card:hover {
  box-shadow: var(--ggl-shadow-hover);
  transform: translateY(-3px);
}
.ggl-strength-card__num {
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--ggl-green-mid);
  font-weight: 600;
  margin-bottom: 8px;
}
.ggl-strength-card__title {
  font-family: var(--ggl-font-display);
  font-size: clamp(16px, calc(13.436px + 0.513vw), 20px);
  font-weight: 700;
  color: var(--ggl-green-deep);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ggl-strength-card:hover .ggl-strength-card__title {
    color: #8A784B;
}
.ggl-strength-card__text {
  font-size: 14px;
  color: var(--ggl-text-mid);
  line-height: 1.8;
}
.ggl-strength-card--featured .ggl-strength-card__title {
  color: #7a6020;
}

/* ===========================
   USE CASE GRID
=========================== */
.ggl-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ggl-usecase-card {
  background: var(--ggl-white);
  border-radius: var(--ggl-radius);
  overflow: hidden;
  box-shadow: var(--ggl-shadow);
  border: 1px solid var(--ggl-border);
  transition: box-shadow .2s, transform .2s;
}
.ggl-usecase-card:hover {
  box-shadow: var(--ggl-shadow-hover);
  transform: translateY(-3px);
}
.ggl-usecase-card__head {
    background: var(--ggl-green-deep);
}
.ggl-usecase-card__head h3{
    padding: 24px 10px;
    /* padding-left: 70px; */
    color: var(--ggl-white);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    background-size: 50px auto!important;
}
.c1 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-golf.png') no-repeat 10px center;
}
.c2 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-badge.png') no-repeat 10px center;
}
.c3 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-handshake.png') no-repeat 10px center;
}
.c4 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-group.png') no-repeat 10px center;
}
.c5 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-star02.png') no-repeat 10px center;
}
.c6 .ggl-usecase-card__head h3{
    background: url('../images/icon/icon-hot.png') no-repeat 10px center;
}
.ggl-usecase-card__emoji { font-size: 22px; line-height: 1; }
.ggl-usecase-card__scene {
  font-family: var(--ggl-font-display);
  font-size: 16px;
  font-weight: 700;
}
.ggl-usecase-card__body { padding: 18px 20px; }
.ggl-usecase-card__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ggl-usecase-card__tag {
  background: var(--ggl-green-light);
  color: var(--ggl-green-deep);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.ggl-usecase-card__desc {
  font-size: 15px;
  color: var(--ggl-text-mid);
  line-height: 1.55;
}

/* ===========================
   FLOW STEPS
=========================== */
.ggl-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.ggl-flow-grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 16px);
  right: calc(12.5% + 16px);
  height: 2px;
  background: linear-gradient(90deg, var(--ggl-green-mid), var(--ggl-green-light));
  pointer-events: none;
}
.ggl-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px 24px;
  position: relative;
}
.ggl-flow-step__num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ggl-green);
  color: var(--ggl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ggl-font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(46,125,79,.3);
}
.ggl-flow-step:first-child .ggl-flow-step__num { background: var(--ggl-green-deep); }
.ggl-flow-step:last-child .ggl-flow-step__num { background: var(--ggl-gold); }
.ggl-flow-step__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ggl-green-deep);
  margin-bottom: 6px;
  line-height: 1.4;
}
.ggl-flow-step__desc {
  font-size: 13px;
  color: var(--ggl-text-light);
  line-height: 1.75;
}
#flow .link{
    margin-top: clamp(0px, calc(-19.231px + 3.846vw), 30px);
}


/* ===========================
   DELIVERY CARDS
=========================== */
.ggl-delivery:before{
    background: #EBE9E0;
}
.ggl-delivery .ggl-container{
    margin: 0 auto;
    max-width: 1200px;
}
.ggl-delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.ggl-delivery-card {
  border-radius: var(--ggl-radius);
  padding: 28px 24px;
  border: 1px solid var(--ggl-border);
  background: var(--ggl-white);
  box-shadow: var(--ggl-shadow);
}
.ggl-delivery-card__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}
.ggl-delivery-card--print .ggl-delivery-card__badge {
  background: var(--ggl-green-light);
  color: var(--ggl-green-deep);
}
.ggl-delivery-card--noprint .ggl-delivery-card__badge {
  background: var(--ggl-gold-light);
  color: #7a6020;
}
.ggl-delivery-card--option .ggl-delivery-card__badge {
  background: #e8edf5;
  color: #3a5080;
}
.ggl-delivery-card__time {
  font-family: var(--ggl-font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--ggl-green-deep);
  margin-bottom: 8px;
}
.ggl-delivery-card--noprint .ggl-delivery-card__time { color: #8a6e10; }
.ggl-delivery-card--option .ggl-delivery-card__time { color: #3a5080; }
.ggl-delivery-card__desc {
  font-size: 13px;
  color: var(--ggl-text-mid);
  line-height: 1.8;
}
.ggl-delivery-note {
  background: var(--ggl-cream);
  border-left: 3px solid var(--ggl-green-mid);
  margin-bottom: clamp(20px, calc(7.179px + 2.564vw), 40px);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  color: var(--ggl-text-mid);
  line-height: 1.8;
}
.ggl-delivery-note:before{
    content: '●';
    display: inline-block;
    color: #57976A;
    font-size: 17px;
    transform: translateY(1px);
}
.ggl-delivery-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: clamp(25px, calc(5.769px + 3.846vw), 55px);
    padding: clamp(20px, calc(0.769px + 3.846vw), 50px);
    color: #fff;
    background: #0C3429;
    border-radius: 10px;
}
.ggl-delivery-date .title{
    width: auto;
    font-size: clamp(16px, calc(14.718px + 0.256vw), 18px);
}
.ggl-delivery-date .detail{
    display: flex;
    gap: 20px clamp(20px, calc(7.179px + 2.564vw), 40px);
}
.ggl-delivery-date strong{
    display: block;
    font-weight: normal;
    font-size: clamp(22px, calc(11.744px + 2.051vw), 38px);
}
.ggl-delivery-date li{
    text-align: center;
    font-size: clamp(15px, calc(13.077px + 0.385vw), 18px);
}
.ggl-delivery-date li b{
    display: block;
    font-weight: normal;
    font-size: clamp(20px, calc(13.590px + 1.282vw), 30px);
    line-height: 1.25;
}
.ggl-delivery-date .link{
    display: block;
    text-align: center;
}

/* ===========================
   UPLOAD STEPS
=========================== */
.ggl-upload-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.ggl-upload-step {
  background: var(--ggl-white);
  border: 1px solid var(--ggl-border);
  border-radius: var(--ggl-radius);
  padding: 28px 22px;
  position: relative;
  box-shadow: var(--ggl-shadow);
}
.ggl-upload-step__num {
  font-family: var(--ggl-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ggl-green-light);
  line-height: 1;
  margin-bottom: 10px;
}
.ggl-upload-step__title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ggl-green-deep);
  margin-bottom: 15px;
}
.ggl-upload-step__desc {
  font-size: 15px;
  color: var(--ggl-text-mid);
  line-height: 1.8;
}
.ggl-upload-note {
  background: var(--ggl-gold-light);
  border: 1px solid #e0c87a;
  border-radius: var(--ggl-radius);
  margin-bottom: clamp(25px, calc(8.974px + 3.205vw), 50px);
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #6b5010;
  line-height: 1.8;
}
.ggl-upload-note strong {
    display: inline-block;
    color: #8a6010;
}
.ggl-upload-note strong:before{
    content: '●';
    display: inline-block;
    margin-right: 3px;
    font-size: 17px;
    transform: translateY(1px);
}

/* ===========================
   PAYMENT
=========================== */
.ggl-payment:before{
    background: #F4FAF6;
}
.ggl-payment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: clamp(25px, calc(8.974px + 3.205vw), 50px);
  padding: 0 clamp(0px, calc(-19.231px + 3.846vw), 30px);
}
.ggl-payment-card {
    position: relative;
    background: var(--ggl-white);
    border: 1px solid var(--ggl-border);
    border-radius: var(--ggl-radius);
    padding: 22px 18px;
    padding-top: 100px;
    text-align: center;
    box-shadow: var(--ggl-shadow);
}
.ggl-payment-card:after{
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    width: 50px;
    aspect-ratio: 1 / 1;
    background-size: cover!important;
    transform: translateX(-50%);
}
.ggl-payment-card.c1:after{
    background: url('../images/icon/icon-payment.png') no-repeat center;
}
.ggl-payment-card.c2:after{
    background: url('../images/icon/icon-card02.png') no-repeat center;
}
.ggl-payment-card.c3:after{
    background: url('../images/icon/icon-shop.png') no-repeat center;
}
.ggl-payment-card.c4:after{
    background: url('../images/icon/icon-atm.png') no-repeat center;
}
.ggl-payment-card--featured {
  border-color: var(--ggl-green);
  background: var(--ggl-green-pale);
  position: relative;
}
.ggl-payment-card--featured::before {
  content: '法人に人気';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ggl-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.ggl-payment-card__title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ggl-green-deep);
  margin-bottom: 6px;
}
.ggl-payment-card__desc {
  font-size: 13px;
  color: var(--ggl-text-mid);
  line-height: 1.75;
}
.ggl-payment-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ggl-text-light);
  background: var(--ggl-cream);
  padding: 10px 16px;
  border-radius: 6px;
  line-height: 1.75;
}

/* ===========================
   DIVIDER
=========================== */
.ggl-divider {
  border: none;
  height: 1px;
  background: var(--ggl-border);
  margin: 0;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
  .ggl-strength-grid { grid-template-columns: repeat(2, 1fr); }
  .ggl-flow-grid { grid-template-columns: repeat(4, 1fr); }
  .ggl-product-grid { grid-template-columns: repeat(2, 1fr); }
  .ggl-payment-grid { grid-template-columns: repeat(2, 1fr); }
  .ggl-usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    /* --ggl-section-py: var(--ggl-section-py-sp); */
  }
  .ggl-hero__inner {
    grid-template-columns: 1fr;
  }
  .ggl-hero { padding: 52px 0 56px; }
  .ggl-hero__ctas { flex-direction: column; }
  .ggl-hero__ctas .ggl-btn { width: 100%; max-width: 340px; justify-content: center; }

  .ggl-banner-member {
    flex-direction: column;
    padding: 28px 24px;
    text-align: center;
  }
  .ggl-banner-member__icons { justify-content: center; }
  .ggl-banner-member__features { justify-content: center; }

  .ggl-strength-grid { grid-template-columns: 1fr; gap: 14px; }
  .ggl-usecase-grid { grid-template-columns: 1fr; }
  .ggl-product-grid { grid-template-columns: 1fr; }
  .ggl-delivery-grid { grid-template-columns: 1fr; }
  .ggl-upload-steps { grid-template-columns: 1fr; }
  .ggl-payment-grid { grid-template-columns: repeat(2, 1fr); }

  .ggl-flow-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .ggl-flow-grid::before { display: none; }

  .ggl-cta-final__btns { flex-direction: column; align-items: center; }
  .ggl-cta-final__btns .ggl-btn { width: 100%; max-width: 320px; justify-content: center; }

  .ggl-trust-bar__inner { gap: 18px; }

  .ggl-faq-body { padding-left: 20px; }
}

@media (max-width: 480px) {
  .ggl-flow-grid { grid-template-columns: 1fr; }
  .ggl-payment-grid { grid-template-columns: 1fr; }
  /* .ggl-container { padding: 0 16px; } */
}


/* ========================
     FAQ
========================= */

/* FAQ カテゴリタブ */
.ggl-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  justify-content: center;
}
.ggl-faq-tab {
  background: var(--ggl-white);
  border: 1.5px solid var(--ggl-border);
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ggl-text-mid);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
  font-family: var(--ggl-font-body);
}
.ggl-faq-tab:hover,
.ggl-faq-tab.is-active {
  background: var(--ggl-green);
  color: #fff;
  border-color: var(--ggl-green);
}
.ggl-faq-category {
  display: none;
}
.ggl-faq-category.is-visible {
  display: block;
}
.ggl-faq-category-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ggl-green-mid);
  letter-spacing: .08em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ggl-green-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ggl-faq-category + .ggl-faq-category {
  margin-top: 36px;
}
/* 特に多い質問ボックス */
.ggl-faq-hot {
  background: var(--ggl-gold-light);
  border: 1px solid #e0c87a;
  border-radius: var(--ggl-radius);
  padding: 24px 28px;
  margin-bottom: 36px;
}
.ggl-faq-hot__title {
  font-weight: 700;
  font-size: 14px;
  color: #7a6020;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ggl-faq-hot__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ggl-faq-hot__list li a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ggl-white);
  border: 1px solid #d4b860;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #7a6020;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ggl-faq-hot__list li a:hover {
  background: var(--ggl-gold);
  color: #fff;
  border-color: var(--ggl-gold);
  text-decoration: none;
}
.ggl-faq-hot__list li a::before {
  content: '→';
  font-size: 11px;
}
@media (max-width: 600px) {
  .ggl-faq-hot { padding: 18px 16px; }
  .ggl-faq-tabs { gap: 6px; }
  .ggl-faq-tab { font-size: 12px; padding: 6px 12px; }
}