@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
.gothic{ font-weight: 900;}
.en{ font-family: 'Roboto Condensed', sans-serif; font-weight: 700;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
/* contents */
.tieup20250207 #contents{ background: #141414 url(../img/bg.jpg) left top repeat; font-feature-settings: "palt";}
#main{ border-bottom: 1px solid #222;}
#article p.text{ color: #fff; text-align: justify;}
#article section{ padding-top: 0;}
#article section h2{ font-weight: 700; line-height: 1.3; color: #6e9561; border-top: 1px solid #6e9561; border-bottom: 1px solid #6e9561;}
#article section .detail.memo{ border-top: 1px solid #bababa; border-bottom: 1px solid #bababa;}
#article section .detail.memo h3,
#article section .detail.memo .text{ color: #bababa;}
#article section .detail:last-of-type{ padding-bottom: 0;}
#article section .detail h3{ font-weight: 700; line-height: 1.3; color: #fff;}
#article section .detail h3 span{ color: #6e9561;}
#article section .detail .answer{ font-weight: 700; line-height: 1.6; color: #fff;}
#article section .detail .text:last-of-type{ margin-bottom: 0;}
#article section .detail .img img{ border: 1px solid #222; border-radius: 10px;}
#article section .detail .notes{ color: #bababa;}
#article section .profile-box{ background: #000; border: 1px solid #222; border-radius: 10px;}
#article section .profile-box .profile-detail p{ line-height: 1.6; color: #fff;}
#article section .profile-box .profile-detail p a{ color: #0071be;}
#article section .profile-box .profile-detail p.name{ font-weight: 700;}
#article section .profile-box .profile-detail p.name span{ font-size: 70%; display: inline-block; margin-left: 10px;}
#menu .sticky-box .h2-style{ background: url(../img/ico-index.png) left center no-repeat; color: #fff;}
#menu .sticky-box .h2-style .ja{ font-weight: 700;}
#menu .menu-list dt{ border-top: 1px solid #6e9561;}
#menu .menu-list dt a{ font-weight: 700; line-height: 1.4; color: #6e9561; display: block; text-decoration: none;}
#menu .menu-list dd a{ line-height: 1.4; color: #fff; display: block; text-decoration: none;}
#menu .menu-list dd a span{ font-weight: 700; color: #6e9561;}
#lineup{ background: #000; border-top: 1px solid #222; border-bottom: 1px solid #222;}
#lineup .tit-box{ text-align: center;}
#lineup .tit-box h2{ color: #fff; line-height: 1.0;}
#lineup .tit-box p{ font-weight: 700; color: #fff; line-height: 1.0;}
#lineup .qi35product-list{ display: flex; flex-wrap: wrap;}
#lineup .qi35product-list li a{ text-decoration: none;}
#lineup .qi35product-list li .img{ background: #222; border-radius: 10px 10px 0 0;}
#lineup .qi35product-list li a .shop-btn{ background: #0071be; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative; border-radius: 0 0 10px 10px;}
#lineup .qi35product-list li a .shop-btn::after{ content: ""; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute;}
#lineup .qi35product-list li a .official-btn{ background: #6e9561; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative; border-radius: 0 0 10px 10px;}
#lineup .qi35product-list li a .official-btn::after{ content: ""; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
/* contents */
.inner{ width: 1080px; margin: 0 auto;}
#main{ background: #000 url(../img/main-bg_pc.jpg) center top no-repeat;}
#main .inner{ height: 500px; position: relative;}
#main h1{ position: absolute; left: -25px; top: 58px;}
#column2{ padding-top: 50px;}
#column2 .inner{ display: flex;}
#article{ width: 730px; margin-right: auto;}
#article .text{ font-size: 17px; line-height: 2.0;}
#article > .text{ margin-bottom: 50px;}
#article #index{ display: none;}
#article section{ padding-bottom: 100px;}
#article section h2{ font-size: 34px; padding: 20px 0; margin-bottom: 45px;}
#article section .detail{ padding-bottom: 50px;}
#article section .detail.memo{ padding: 25px 0;}
#article section .detail h3{ font-size: 28px; margin-bottom: 25px;}
#article section .detail .answer{ font-size: 22px; margin-bottom: 25px;}
#article section .detail .text{ margin-bottom: 25px;}
#article section .detail .img{ margin-top: 30px;}
#article section .detail .img img{ width: 100%;}
#article section .detail .notes{ font-size: 15px; line-height: 1.8; padding-bottom: 10px;}
#article section .detail .notes strong{ font-size: 18px;}
#article section .profile-box{ display: flex; align-items: center; padding: 30px; margin-bottom: 50px;}
#article section .profile-box .profile-detail{ padding-left: 20px;}
#article section .profile-box .profile-detail p{ font-size: 15px;}
#article section .profile-box .profile-detail p.name{ font-size: 24px; margin-bottom: 10px;}
#menu{ width: 310px;}
#menu .shop-btn a{ font-size: 17px; background: #0071be; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; text-decoration: none; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); display: block; position: relative; border-radius: 10px; padding: 20px 0;}
#menu .shop-btn a::after{ content: ""; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; width: 8px; height: 8px; right: 20px; top: 50%; margin-top: -6px;}
#menu .menu-btn{ display: none;}
#menu .sticky-box{ position: sticky; top: 30px; margin-bottom: 100px;}
#menu .sticky-box .h2-style{ background-size: 32px; padding-left: 42px; margin-bottom: 20px;}
#menu .sticky-box .h2-style .en{ font-size: 38px;}
#menu .sticky-box .h2-style .ja{ font-size: 17px; display: inline-block; margin-left: 10px; position: relative; top: -2px;}
#menu .menu-list{ background: #000;}
#menu .menu-list dt a{ font-size: 17px; padding: 10px 20px;}
#menu .menu-list dd a{ font-size: 15px; text-indent: -20px; padding: 0 20px 15px 40px;}
#menu .btn-box{ margin-top: 30px;}
#lineup{ padding: 80px 0 100px;}
#lineup .tit-box{ margin-bottom: 40px;}
#lineup .tit-box h2{ font-size: 52px; margin-bottom: 10px;}
#lineup .tit-box p{ font-size: 20px;}
#lineup .qi35product-list li{ width: 255px; margin-right: auto;}
#lineup .qi35product-list li:nth-of-type(4n){ margin-right: 0;}
#lineup .qi35product-list li .img{ padding-top: 10px;}
#lineup .qi35product-list li .img img{ width: 100%;}
#lineup .qi35product-list li .shop-btn{ font-size: 17px; padding: 15px 0;}
#lineup .qi35product-list li .shop-btn::after{  width: 8px; height: 8px; right: 20px; top: 50%; margin-top: -6px;}
#lineup .qi35product-list li .official-btn{ font-size: 17px; padding: 15px 0;}
#lineup .qi35product-list li .official-btn::after{  width: 8px; height: 8px; right: 20px; top: 50%; margin-top: -6px;}

}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body.fixed{ height: 100%; overflow: hidden;}
header{ position: relative; z-index: 200;}
header .g-nav{ width: 100vw;}
/* contents */
.tieup20250207 #contents{ background-size: 10px 20px;}
.shop-btn::after{ width: 6px; height: 6px; right: 10px; top: 50%; margin-top: -4px;}
#column2{ padding-top: 20px;}
#article .text{ font-size: 17px; line-height: 1.8;}
#article > .text{ padding: 0 20px; margin-bottom: 30px;}
#index{ background: #000; border: 1px solid #222; border-radius: 10px; padding: 15px 0 10px; margin: 0 20px 50px; }
#index .tit-box{ text-align: center; margin-bottom: 15px;}
#index .tit-box h2{ font-size: 30px; color: #fff; background: url(../img/ico-index.png) center left no-repeat; background-size: 25px; padding-left: 35px; display: inline-block; margin-bottom: 5px;}
#index .tit-box p{ font-size: 14px; font-weight: 700; color: #fff;}
#index .menu-list dt{ border-top: 1px solid #6e9561;}
#index .menu-list dt a{ font-size: 15px; font-weight: 700; line-height: 1.4; color: #6e9561; display: block; text-decoration: none; padding: 10px 15px;}
#index .menu-list dd a{ font-size: 13px; line-height: 1.4; color: #fff; display: block; text-decoration: none; padding: 0 15px 10px;}
#index .menu-list dd a span{ font-weight: 700; color: #6e9561;}
#article section{ padding-bottom: 50px;}
#article section h2{ font-size: 28px; padding: 10px 20px; margin-bottom: 25px;}
#article section .detail{ padding: 0 20px 45px;}
#article section .detail.memo{ padding: 20px 0; margin: 0 20px;}
#article section .detail .answer{ font-size: 18px; margin-bottom: 15px;}
#article section .detail h3{ font-size: 20px; margin-bottom: 20px;}
#article section .detail .text{ margin-bottom: 15px;}
#article section .detail .img{ margin-top: 25px;}
#article section .detail .notes{ font-size: 14px; line-height: 1.6; padding-bottom: 10px;}
#article section .detail .notes strong{ font-size: 17px;}
#article section .profile-box{ padding: 15px; margin: 0 20px 25px;}
#article section .profile-box .profile-detail{ padding: 8px 5px 0;}
#article section .profile-box .profile-detail p{ font-size: 14px;}
#article section .profile-box .profile-detail p.name{ font-size: 17px; margin-bottom: 5px;}
#menu .sticky-box{
    display: flex;
    align-items: flex-end;
    flex-flow: row-reverse;
	position: fixed;
	top: 50%;
	right: 0;
	width: 350px;
	height: 100%;
	transition: all 0.5s;
	transform: translate(310px, -50%);
    opacity: 1;
    z-index: 100;
}
#menu.hide .sticky-box{
    opacity: 0;
    z-index: -1;
}
#menu.open .sticky-box{ transform: translate(0, -50%);}
#menu .shop-btn{ background: #0071be; width: 40px; margin-bottom: 10px; padding: 10px; border-radius: 10px 0 0 10px;}
#menu .menu-btn{ background: #6e9561; width: 40px; margin-bottom: 20px; padding: 10px; border-radius: 10px 0 0 10px;}
#menu .menu-btn .ac{ display: none;}
#menu .menu-btn .ic{ display: block;}
#menu.open .menu-btn .ac{ display: block;}
#menu.open .menu-btn .ic{ display: none;}
#menu .menu-list{ background: #000; min-height: 100vh; min-height: 100svh; width: 345px;}
#menu .menu-list dt a{ font-size: 15px; padding: 8px 15px;}
#menu .menu-list dd a{ font-size: 13px; padding: 0 15px 10px;}
#lineup{ padding: 40px 0 35px;}
#lineup .inner{ padding: 0 20px;}
#lineup .tit-box{ margin-bottom: 25px;}
#lineup .tit-box h2{ font-size: 30px; margin-bottom: 8px;}
#lineup .tit-box p{ font-size: 14px;}
#lineup .qi35product-list li{ width: 48%; margin: 0 auto 15px 0;}
#lineup .qi35product-list li:nth-of-type(2n){ margin-right: 0;}
#lineup .qi35product-list li .img{ padding-top: 10px;}
#lineup .qi35product-list li .shop-btn{ font-size: 12px; padding: 10px 0;}
#lineup .qi35product-list li .shop-btn::after{ width: 6px; height: 6px; right: 15px; top: 50%; margin-top: -5px;}
#lineup .qi35product-list li .official-btn{ font-size: 12px; padding: 10px 0;}
#lineup .qi35product-list li .official-btn::after{ width: 6px; height: 6px; right: 15px; top: 50%; margin-top: -5px;}
#layer-black.ac{ background: rgba(0, 0, 0, 0.75); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1;}
}