@charset "UTF-8"; 
@import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700&subset=japanese&font-display+swap"; 
@import"https://use.fontawesome.com/releases/v5.6.1/css/all.css"; 

/* reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p { margin: 0; padding: 0; }
html { -ms-touch-action: manipulation; touch-action: manipulation; }
body { font-weight: 400; -webkit-font-kerning: auto; font-kerning: auto; letter-spacing: .04em; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Noto Sans JP', '游ゴシック Medium', 'YuGothic', 'YuGothicM', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '-apple-system', 'BlinkMacSystemFont', 'Verdana', 'Meiryo', sans-serif; }
html { font-size: 62.5%; }
body { font-size: 1.4rem; margin: 0; padding: 0; }
@media(min-width:30em) {  body { font-size: 1.5rem; } }
@media(min-width:48em) { body { font-size: 1.6rem; } }
a:hover, button:hover ,img:hover { transition: all .3s ease-in-out; }
img { border: 0; virtical-align: bottom; }
button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
ul, ol { list-style: none; }
input,textarea { -webkit-appearance: none; border-radius: 0; }
::placeholder { color: #CCC; }
.clearfix::after { content:""; display: block; clear: both; }
* html .clearfix { height: 1px; }
i { padding: 0 .2em 0 0; }
.view_pc,.view_sp {display: none;}

/* header */
header { color: #FFF; transition: all .3s ease-in-out; }
header div { position: relative; }
header.header_fixed { background: rgba(158,212,81,0.80); box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); position: fixed; top:0; left: 0; z-index: 999; transition: all .3s ease-in-out; }
.header_logo a { padding: 1em; display: inline-block; }
.header_logo span { display: inline-block; padding: .2em 0; vertical-align: top; margin-top: 1em; border-top:3px solid #FFF; border-bottom:3px solid #FFF; }

/* common */
.FV { width: 100%; position: relative; }
.FV_txt_1,.FV_txt_2,.FV_txt_3,.FV_logo { position: absolute; }
.FV_txt_1 { width: 40%; left: 0; top:25%; padding: 0 5% 0 10%; }
.FV_txt_2 { width: 45%; right: 0; top:27%; padding: 0 2%; }
.FV_txt_3 { left:0; top:50%;  padding: 0 43% 0 5%; }
.FV_logo { bottom:0; padding: 0 10%; left: 0; }
.cta_area { position: relative; padding: 5%; background: #FF0; border: 5px solid #F00; border-radius: 10px; margin: 3%; }
.cta_color_2 { background: #FFF; border: none; }
.content {line-height: 0;margin: 0; padding: 0;}
.content img { line-height: 0; }
/* footer */
footer {background: #FFF; text-align: center;  }
.footer_logo img { display: block; margin: auto; }
footer ul { text-align: center; padding: 1em 0; }
footer li { display: inline-block; margin: 0 .2em; padding: 0 .5em 0 0; border-right: 1px solid #999;  }
footer li:nth-child(3) { border-right: none; padding: 0; }
footer li a { font-size: 12px; color: #999; }
.copy { padding: 1em 0; }
#page_top { position: fixed; bottom: 30px; right: 20px; z-index: 999; }
#page_top a { background: rgba(7,7,7,0.50); color: #fff; text-align: center; text-decoration: none; padding:0 .5em; }
#page_top i { padding: 0 !important; }
#page_top a:hover { background: rgba(0,0,0,0.80); text-decoration: none; }
.video { width: 100%; }
.video video { display: block; border: none; width: 100%; }
#CTA_fixed { opacity: 0; position: fixed; z-index: 999; bottom:65px; right: 0; width: 200px; transition: all .3s ease-in-out;  }
.op { opacity: .8 !important; transition: all .3s ease-in-out; }
.blank_box { width: 100%; height: 180px; opacity: 0; }
.sub_note { font-size: 1.6rem; padding: 20px; margin: 10px; border:1px solid #EEE; line-height: 2; }
.sub_note2 { font-size: 1.2rem; padding: 20px; margin: 5% 0; border:1px solid #EEE; background: #FDFFF2; line-height: 2; }
.sub_note p,.sub_note ul { font-size: 1.2rem; padding: .5em; }
.sub_note h3,
.sub_note h4 { padding: 1em 0;}
.sub_note li { list-style: decimal; padding:0 .5em; margin: 0 0 .5em 2em; }
.content h2 { text-align: center; padding: 10% 0; font-size: 20px; font-weight: bold; }
.table_area table { font-size: 1.2rem; width: 95%; margin: 1em auto; border: 1px solid #CCC; line-height: 2; }
.table_area th { width: 30%; text-align: center; padding: 1em; font-weight: 600; background: #EFEFEF; border: 1px solid #CCC; }
.table_area td { padding: 1em 1em 1em 2em; border: 1px solid #CCC; background: #FFF; }
.flex_box {display: flex; width: 100%; margin: 0 auto; }
.flex_box div { width:50%; padding: 5px;}
#product-component-1631083561873 { max-width:100% !important; margin: 10px auto; }  
.cart_area { margin:2%; padding:2%; border: 1px solid #EFEFEF; color:rgba(81,98,91,1.00) ; }        
.item_images img { display: block; width: 90%; }
.float_box::after { content:""; display: block; clear: both; }
.float_box .item_images,.float_box .table_area2 { float: left;}
.float_box .item_images { width: 30%;}
.float_box .table_area2 { width: 70%;}
.item_title { font-size: 40px; text-align: center; padding: 5% 0; font-weight: bold; }
.table_area2 table { font-size: 1.6rem; font-weight: 600;  width: 100%; margin: 5% auto; border: none; line-height: 2; }
.table_area2 th { width: 30%; text-align: center; padding: 1em; font-weight: 600; background: #EFEFEF; border: none; }
.table_area2 td { padding: 1em 1em 1em 2em; border: 1px solid #EFEFEF; background: #FFF; }
.CTA_inner { position: relative; }
.CTA_btn {}
.note_txt { font-size: 12px; padding: 10px; margin: 5px; border:2px solid #CCC; border-radius: 5px; color:#999; }
.last_txt { position: relative;}
.last_txt_posi { position: absolute; bottom:0; left: 0; }
.CTA_title { background: #F00; color: #FFF; text-align: center; font-size: 25px; font-weight: 600; padding: 15px 0; }
.count_num_area { position: relative; line-height: 2; text-align: center; padding:5% 5% 10% 5%; }
.count_num_area h1 { font-size: 40px; }
.count_num { background: #00b72d; color: #FFF; border-radius: 10px; padding: 5% 0; }
.count_num_txt { font-size: 100px; color: #ffff00; font-weight: bold; line-height: 1; }
.count_num_txt div { display: inline-block; padding: 0 15px; letter-spacing: 5px; }
.count_num_txt span { font-size: 40px; }
.count_num_area p { font-size:60px; font-weight: bold; }
.countdown { font-size: 80px; color: #F00; font-weight: bold; position: absolute; bottom: 15%; left:0; width: 100%; text-align: center; }
.cont { padding: 3% 0; }
.btn_wrap a { display: block; text-align: center; padding: 2% 0; font-size: 12px;}
/* ///////////////////////////////////////////////////////////////////// 
// Media Queries
/////////////////////////////////////////////////////////////////////*/
/* PC */
@media screen and (min-width: 480px) { 
  body { background: #FBF9F8; }
  .view_pc {display: block;}
  #wrap { width: 750px; background: #FFF; margin: auto; overflow: hidden; border-radius: 3px; box-shadow: 0 0px 20px rgba(0,0,0,0.2);}
  
  /* width */
  .footer_logo img { width: 5%; }
  
  /* font-size */
  .btn_wrap { font-size: 1.4em; }
  #page_top a { font-size: 2em; }
  .copy { font-size: .8em; }
}
/* SP */
@media screen and (max-width: 768px) { 
  .view_sp {display: block;}
  
  /* width */
  .footer_logo img { width: 20%;}
  
  /* font-size */
  .footer_in { font-size: .8em; }
  #page_top a { font-size: 1em; }
  .copy { font-size: .8em; }
  .count_num_area h1 { font-size: 25px; }
  .count_num_txt { font-size: 60px; }
  .count_num_txt div { padding: 0 5px; letter-spacing: normal; }
  .count_num_txt span { font-size: 30px; }
  .count_num_area p { font-size: 30px;}
  .countdown { font-size: 50px; }
}