@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
color:#040404;
min-width:1100px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:1.5em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}


.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ padding: 10px 0;}
header figure img{ height: 60px;}
@media screen and (max-width:767px){
header{ padding: 1.25vw 0;}
header figure img{ height: 12.5vw;}
}

/*フッター*/
footer{ background: #000; padding: 30px 0;}
footer figure img{ height: 80px;}
@media screen and (max-width:767px){
footer{ padding: 2.5vw 0;}
footer figure img{ height: 20vw;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:1100px;}
@media screen and (max-width:767px){
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}



/*fv*/
#fv{ background: url("../images/fv_bg.jpg") center top no-repeat; background-size: cover; text-align: center; padding: 20px 0 120px;}
#fv figure{ width: 585px; margin: 0 auto 10px; position: relative; z-index: 3;}
#fv h1{ text-align: center; margin-bottom: 30px; position: relative; z-index: 1;}
#fv h1 img{ width: 100%;}
#fv h1:before{ content: ""; width: 182px; height: 182px; background: url("../images/fv_ill01.png") center center no-repeat; background-size: 100%; position: absolute; right: 0; top: -120px; z-index: -1;}
#fv h1:after{ content: ""; width: 182px; height: 182px; background: url("../images/fv_ill02.png") center center no-repeat; background-size: 100%; position: absolute; left: -60px; bottom: -130px; z-index: -1;}
#fv p{ font-size: 1.2rem; font-weight: 700;}
@media screen and (max-width:767px){
#fv{ padding: 2.5vw 0 10vw;}
#fv figure{ width:100%; margin: 0 auto 2.5%;}
#fv h1{ margin-bottom: 5%;}
#fv h1 img{ width: 100%;}
#fv h1:before{ width: 20vw; height: 20vw; right: -7.5vw; top: -7.5vw;}
#fv h1:after{ width: 20vw; height: 20vw; left: -10vw; bottom: -12.5vw;}
#fv p{ font-size: 1rem;}
}



/*lead*/
#lead{ padding: 30px 0 60px; background: #292929}
#lead .maincontent{ position: relative; z-index: 1;}
#lead .bg_ico01{ position: absolute; right: -200px; top: -90px; z-index: -1;}
#lead .bg_ico02{ position: absolute; left: -340px; bottom: -120px; z-index: -1;}

#lead ul{ display: flex; justify-content: space-between;}
#lead ul li{ width: calc(50% - 20px);}
#lead ul li h4{ text-align: center; margin-bottom: 30px;}
#lead ul li h4 img{ height: 95px;}
#lead ul li figure{ margin-bottom: 30px;}
#lead ul li p{ font-size: 1rem; color: #fff; text-align: justify;}
@media screen and (max-width:767px){
#lead{ padding: 10vw 0 10vw;}
#lead .bg_ico01{ width: 50vw; right: -20vw; top: -15vw; z-index: -1;}
#lead .bg_ico02{ width: 50vw; left: -20vw; bottom: -15vw; z-index: -1;}

#lead ul{ display: block;}
#lead ul li{ width: 100%;}
#lead ul li:nth-child(2){ margin-top: 10%;}
#lead ul li h4{ margin-bottom: 5%;}
#lead ul li h4 img{ height: 15vw;}
#lead ul li figure{ margin-bottom: 5%;}
#lead ul li figure img{ width: 100%;}
#lead ul li p{ font-size: 0.9rem;}
}



/*商品紹介*/
#item{ margin: 120px 0 80px;}
#item h2{ text-align: center; margin-bottom: 50px;}
#item h2 img{ height: 96px;}

#item .item_box{ display: flex; margin-top: 60px;}
#item .item_box figure.img{ width: 530px; margin-right: 20px;}
#item .item_box .cont{ width: 550px;}
#item .item_box .cont h3{ font-size: 1rem; margin-bottom: 0.5em;}
#item .item_box .cont p{ font-size: 0.9rem; text-align: justify;}
#item .item_box .cont p.price{ font-size: 0.9rem; font-weight: 700; text-align: right;}
#item .item_box .cont p.price strong{ font-size: 1.2rem; color: #ec0206; margin-left: 0.25em;}
#item .item_box .cont p.price span{ font-size: 0.7rem; margin-left: 1em;}
#item .item_box .cont figure.btn a{ width: 350px; height: 70px; border-radius: 70px; display: flex; align-items: center; justify-content: center; background: #ec0206; color: #fff; position: relative; font-size: 1.1rem; font-weight: bold; margin: 0 0 0 auto; transition: 0.3s;}
#item .item_box .cont figure.btn a i{ position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); transition: 0.3s;}
#item .item_box .cont figure.btn a:hover{ opacity: 0.7;}
#item .item_box .cont figure.btn a:hover i{ right: 1em;}

#item .item_box .cont .set{ margin-top: 45px;}
#item .item_box .cont .set h4{ margin: 30px 0 10px; font-size: 1rem;}
#item .item_box .cont .set dl{ display: flex; align-items: center; justify-content: space-between;}
#item .item_box .cont .set figure.btn a{ width: 275px; height: 50px; background: #333; font-size: 0.9rem;}
@media screen and (max-width:767px){
#item{ margin: 15% 0 10%;}
#item h2{ margin-bottom: 7.5%;}
#item h2 img{ height: 15vw;}

#item .item_box{ display: block; margin-bottom: 10%;}
#item .item_box figure.img{ width: 100%; margin: 0 auto 5%;}
#item .item_box .cont{ width: 100%;}
#item .item_box .cont h3{ font-size: 1.2rem;}
#item .item_box .cont p{ font-size: 0.9rem;}
#item .item_box .cont p.price{ font-size: 1rem;}
#item .item_box .cont p.price strong{ font-size: 1.33rem;}
#item .item_box .cont p.price span{ font-size: 0.8rem;}
#item .item_box .cont figure.btn a{ width: 75vw; height: 15vw; border-radius: 15vw; font-size: 1.2rem;}

#item .item_box .cont .set{ margin-top: 10%;}
#item .item_box .cont .set h4{ margin: 7.5% 0 2.5%; font-size: 0.95rem; letter-spacing: 0;}
#item .item_box .cont .set p.price{ font-size: 0.8rem;}
#item .item_box .cont .set p.price strong{ font-size: 1.2rem;}
#item .item_box .cont .set p.price span{ font-size: 0.7rem;}
#item .item_box .cont .set figure.btn a{ width: 45vw; height: 10vw;}
}



/*store*/
#store{ margin: 80px 0 80px;}
#store h2{ text-align: center; margin-bottom: 50px;}
#store h2 img{ height: 96px;}

#store .lead dl{ display: flex; align-items: center;}
#store .lead dl dt{ width: 550px; margin-right: 20px;}
#store .lead dl dd{ width: calc(100% - 570px);}
#store .lead dl dd p{ font-size: 0.9rem; text-align: justify;}
#store .lead p{ font-size: 0.9rem; text-align: center;}

#store .sort{ margin: 60px auto;}
#store .sort dl{ display: flex; align-items: center; justify-content: center;}
#store .sort dl dt{ font-size: 0.9rem; font-weight: bold; margin-right: 1em;}
#store .sort dl dd{ width: 360px;}
#store .sort select{ -webkit-appearance: none; cursor: pointer;}
#store .sort select{ width:100%; padding:0.5em 3em 0.5em 1em; font-family:'Noto Sans JP', sans-serif, Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; font-size:1rem; font-weight:500; line-height: 1.25em; box-sizing: border-box; background: none; border: 1px solid #333;}
#store .sort .select_wrap{ position: relative;}
#store .sort .select_wrap i{ position: absolute; right: 1em; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none;}

#store .result{ margin: 90px auto 0; display: flex; flex-wrap: wrap;}
#store .result{ display: none;}
#store .result.active{ display: flex;}
#store .result dl{ width: 50%;}
#store .result dl{ padding: 30px 45px; border-bottom: 1px solid #333;}
#store .result dl dt{ font-size: 1rem; font-weight: bold; margin-bottom: 10px;}
#store .result dl dd p{ font-size: 0.9rem;}
@media screen and (max-width:767px){
#store{ margin: 10% 0;}
#store h2{ margin-bottom: 7.5%;}
#store h2 img{ height: 15vw;}

#store .lead dl{ display:block;}
#store .lead dl dt{ width: 100%; margin: 0 auto 5%;}
#store .lead dl dd{ width: 100%;}
#store .lead dl dd p{ font-size: 0.9rem;}
#store .lead p{ font-size: 0.9rem; text-align: justify;}

#store .sort{ margin: 10% auto;}
#store .sort dl dt{ font-size: 0.9rem;}
#store .sort dl dd{ width: 50vw;}
#store .sort select{ font-size:1rem;}

#store .result{ margin: 10% auto 0;}
#store .result dl{ width: 100%;}
#store .result dl{ padding: 5% 2.5%;}
#store .result dl dt{ font-size: 1rem; margin-bottom: 2.5%;}
#store .result dl dd p{ font-size: 0.9rem;}
}



/*event*/
#event{ margin: 80px auto 120px;}
#event h2{ text-align: center; margin-bottom: 40px;}
#event h2 img{ height: 216px;}

#event table{ border-spacing: 0; border-collapse: collapse; font-size: 1.2rem;}
#event table th{ text-align: right; font-weight: bold; width: 6em; padding: 0.125em; line-height: 1.5em;}
#event table td{ padding: 0.125em; line-height: 1.5em;}
@media screen and (max-width:767px){
#event{ margin: 10% auto 15%;}
#event h2{ margin-bottom: 7.5%;}
#event h2 img{ height: auto; width: 100%;}

#event table{ font-size: 1rem;}
#event table th{ display: block; text-align: left; width: 100%; padding: 0; margin-bottom: 0.25em;}
#event table td{ font-size: 0.9rem; display: block; width: 100%; padding: 0; margin-bottom: 1em;}
}



/*about*/
#about .maincontent{ position: relative; z-index: 1;}
#about figure.ico01{ position: absolute; left: -250px; top: 0; z-index: -1;}
#about figure.ico02{ position: absolute; right: -200px; top: 330px; z-index: -1;}

#about .txt{ display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; margin-bottom: 80px;}
#about .txt h2{ width: 90px; margin-left: 30px;}
#about .txt h3{ width: 140px; margin-top: 60px;}
#about .txt p{ width: 310px; margin-right: 30px; margin-top: 30px;}

#about .feature ul{ display: flex; justify-content: space-between;}
#about .feature ul li{ width: 526px;}
#about .feature ul li h4{ text-align: center; font-size: 1.5rem; margin-bottom: 15px;}
#about .feature ul li h5{ font-size: 1.2rem; margin: 15px 0;}
#about .feature ul li p{ font-size: 1rem; text-align: justify;}
@media screen and (max-width:767px){
#about figure.ico01{ width: 50vw; left: -25vw; top: -12.5vw;}
#about figure.ico02{ width: 50vw; right: -12.5vw; top: 57.5vw;}

#about .txt{ margin-bottom: 15%;}
#about .txt h2{ width: 12vw; margin-left: 5%;}
#about .txt h3{ width: 18vw; margin-top: 10%;}
#about .txt p{ width: 40vw; margin-right: 5%; margin-top: 5%;}

#about .feature ul{ display: block;}
#about .feature ul li{ width: 100%; margin-top: 10%;}
#about .feature ul li h4{ font-size: 1.2rem; margin-bottom: 2.5%;}
#about .feature ul li h5{ font-size: 1rem; margin: 2.5% 0;}
#about .feature ul li p{ font-size: 0.9rem;}
}



/*howto*/
#howto{ margin: 120px auto;}
#howto h2{ text-align: center; margin-bottom: 50px;}
#howto h2 img{ height: 96px;}

#howto p.att{ text-align: center; font-size: 0.8rem; margin: 30px auto;}

#howto .howto_wrap{ overflow-y: hidden; overflow-x: auto;}
#howto .howto_wrap .howto_list{ width: calc((320px*7) + 60px); padding: 30px 30px; display: flex;}
#howto .howto_wrap .howto_card{ display: flex; flex-direction: column; width: 290px; margin: 0 15px; border: 2px solid #000; padding: 30px; border-radius: 20px; position: relative;}
#howto .howto_wrap .howto_card span.num{ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-size: 1rem; font-weight: bold; border-radius: 50%; position: absolute; left: 0; right: 0; top: -24px; margin: auto;}
#howto .howto_wrap .howto_card figure{ margin-bottom: 30px;}
#howto .howto_wrap .howto_card figure img{ width: 158px;}
#howto .howto_wrap .howto_card .txt{ text-align: center;}
#howto .howto_wrap .howto_card .txt h3{ font-size: 1.2rem; margin-bottom: 15px;}
#howto .howto_wrap .howto_card .txt p{ font-size: 0.8rem; text-align: justify;}
@media screen and (max-width:767px){
#howto{ margin: 15% 0 15%;}
#howto h2{ margin-bottom: 7.5%;}
#howto h2 img{ height: 15vw;}

#howto p.att{ font-size: 0.8rem; margin: 5% auto;}

#howto .howto_wrap{ overflow-y: hidden; overflow-x: auto;}
#howto .howto_wrap .howto_list{ width: calc((70vw*7) + 5vw); padding: 5vw 2.5vw 0;}
#howto .howto_wrap .howto_card{ width: 65vw; margin: 0 2.5vw; padding: 3.75vw; border-radius: 2.5vw;}
#howto .howto_wrap .howto_card span.num{ width: 10vw; height: 10vw; font-size: 1rem; top: -5vw;}
#howto .howto_wrap .howto_card figure{ margin-bottom: 5%;}
#howto .howto_wrap .howto_card figure img{ width: 33.33vw;}
#howto .howto_wrap .howto_card .txt h3{ font-size: 1.2rem; margin-bottom: 3.75%;}
#howto .howto_wrap .howto_card .txt p{ font-size: 0.8rem;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}