@charset "utf-8";
/* CSS Document */
#cmp_main{ width:100%; margin:0 auto; }
#cmp_main img{ vertical-align:bottom; }
#cmp_main .index_box{ max-width: 800px; margin: auto; }
#cmp_main .index_box > div{ margin: auto; padding: 0; }
#cmp_main .index_box > div img{ display: block; margin: auto; padding: 0; vertical-align: bottom; line-height: 0; }
/* フロート */
#cmp_main .stnav{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; position: fixed; top: 0; left: 0; right: 0; margin: auto; padding: 0 0.7em 0.5em; width: 100%; max-width: 800px; max-height: 300px; background-color: rgb(255,255,255,0.6); cursor: pointer; z-index: 10; transition: .3s; opacity: 0; visibility: hidden; transform: translateY(-300px); }
#cmp_main .stnav.active { opacity: 1; visibility: visible; transform: translateY(0); }
#cmp_main .stnav li{ max-width: 344px; width: 32%; }
/* =======================================================================
 カートボタン
======================================================================= */
.cart { position:relative; }
.cart .btn { position: absolute; left: 50%; transform: translateX(-50%); filter: drop-shadow(3px 6px 7px #aaa); width: 82%; }
.cart .btn1 { top: 67.5%; }
.cart .btn2 { top: 83.2%; }
.cart .btn3 { top: 60.7%; }
.cart .btn4 { top: 74.8%; }
.cart .btn5 { top: 86%; }
.cart .btn6 { top: 88.5%; }
.cart .btn7 { top: 83.5%; }
.cart .btn8 { top: 82.5%; }
.cart .btn9 { top: 88.5%; }
.cart .btn10 { top: 85.0%; }
.cart .btn11 { top: 78.8%; }

/* =======================================================================
 テキスト
======================================================================= */
.txt_area { background: #efeee8; padding: 3% 4% 6%; }
.txt_area ul li {}
.txt_area ul li.txt1 { text-indent: -0.5em; font-size: 30px; letter-spacing: 0px; line-height: 1.4; font-weight: 500 !important; color: #a71e2e !important; margin-bottom: 0.7em; }
.txt_area ul li.txt2 { text-indent: -0.5em; font-size: 29px; letter-spacing: -1px; line-height: 1.4; font-weight: 500 !important; margin-bottom: 0.7em; }
.txt_area ul li.txt3 { font-size: 25.2px; letter-spacing: 0px; line-height: 1.4; }
.txt_area2 { background: #f3ebed; font-size: 25px; padding: 1% 4% 8% 5%; letter-spacing: 0px; }
.txt_area3 { background: #fff; font-size: 27px; padding: 4% 5% 4% 5%; letter-spacing: 1px; font-weight: 500 !important; }

/* =======================================================================
 ページ個別 
======================================================================= */



/* =======================================================================
moadl
======================================================================= */
.modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 1211; }
.modal__bg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%; }
.modal__content{ background: #fff; left: 50%; padding: 30px 20px; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 60%; max-width: 500px; border: 2px solid #7f9caf; color: #527089; text-align: center; line-height: 1.55; }
.modal__content .lead{ text-align: justify; font-size: 120%; font-weight: 500 !important; padding: 0 20px; }
.modal__content .lead span{ font-weight: bold; text-decoration: underline; }
.modal__content .txt{ margin-top: 20px; font-size: 120%; text-align: left; font-weight: 500 !important; padding: 0 20px 1em; border-bottom: 1px solid #818181; }
.modal_btn_area { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 0 40px; }
.modal__content .btn_t a{ display: block; margin-top: 20px; padding: 4px 0; border: solid 1px #000; border-radius: 5px; color: #000; font-size: 120%; text-align: center; transition: all 300ms; }