@charset "Shift_JIS";/**/

#info_contents{margin-bottom:0!important;}
.olvewell{font-weight: normal;}
.mt{margin-top: 4em!important;}
.mb{margin-bottom: 4em!important;}
.txt_c{text-align: center;}
.lay1{width: 70%; border: 1px solid #333; border-radius: 5em; margin: 0 auto 5em auto; line-height: 1;}
.lay2 ul,.lay3 ul,.lay3pr ul{
display: flex; flex-direction: row; margin: 0 5%;}
.lay2 li{
width: 50%; border: 1px solid #333; border-radius: 5em; margin: 0 1.5%; line-height: 1;}
.lay3 li{
width: 33%; border-radius: 5em; margin: 0 1.5%; line-height: 1;}
.lay3pr li{
width: 33%; border: ; margin: 0 1.5% 1em 1.5%; line-height: 1;}
.lay3 .txt_set{text-align: center; padding-top: 0.5em; font-size: 120%;}
.colorchange_bg{animation: colorchange-color 10s infinite; padding: 6%;}
@keyframes colorchange-color{
  0%, 100%{background-color: #ecf2f9;}
  25%{background-color: #f0f8f8;}
  50%{background-color: #f0f5e8;}
  70%{background-color: #f2edf5;}
	80%{background-color: #f3f3f3;}
	}

.btn_lay1{border: 2px solid #66a47f; border-radius: 0.5em; color:#66a47f; font-size: 1.5em; font-weight: bold; text-align:center; margin: 3em auto; width: 60%;}
.btn_sum{border: 2px solid #66a47f; border-radius: 0.5em; color:#66a47f; font-size: 1.5em; font-weight: bold; text-align:center; margin: 0em auto 3em auto; width: 60%;}
.btn_lay1 a{display: block; padding: 1em;}
.btn_lay1 a:link{color: #66a47f; text-decoration: none;}
.btn_lay1 a:visited{color: #66a47f; text-decoration: none;}
.btn_lay1 a:hover{color: #66a47f; text-decoration: none;}
.btn_lay1 a:active{color: #66a47f; text-decoration: none;}
.btn_sum a{display: block; padding: 1em;}
.btn_sum a:link{color: #66a47f; text-decoration: none;}
.btn_sum a:visited{color: #66a47f; text-decoration: none;}
.btn_sum a:hover{color: #66a47f; text-decoration: none;}
.btn_sum a:active{color: #66a47f; text-decoration: none;}

/* default include */ 
.def_incl ul{display: flex; flex-direction: row;}
.def_incl .display_matrix li{width:33.333%; line-height: 1;}
.def_incl .display_matrix .price_box{font-size: 120%;}

/* include */
.item_include{text-align: center; margin: 0 auto 1em auto; font-size: 180%;}
.item_include .img_box, .item_include .name_box{display: none;}
.item_include .btn{display: none;}
.item_include .yen{font-weight: normal;}
.item_include .price2 {font-size: 180%; font-weight: normal;}
.item_include .price2 strong{font-weight: normal;}
.item_include .tax{font-size: 40%; font-weight: bold; margin-left: -0.35em;}
.item_include .cp_box{font-size: 60%; margin-top: 0.3em;}

.item_refill{margin-top: -3.5em; text-align: center;}
.item_refill a{font-weight: bold;}
.last_img{width: 40%; margin: 1em 30% 2em 30%;}

/*レスポンシブ-----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
	#info_contents{margin:0!important;}
	.mt{margin-top: 2em!important;}
	.mb{margin-bottom: 2em!important;}
	.lay1{margin: 0 auto 2.5em auto;}
	.lay3{margin: 0.5em 1%;}
	.lay3 .txt_set{padding-top: 0.6em; font-size: 75%;}
	.btn_lay1{font-size: 1em; margin: 2em auto 4em auto; width: 70%; display: block;}
	.btn_sum{font-size: 1em; margin: 0 auto 2em auto; width: 70%; display: block;}
	.def_incl ul{margin: 0 5%;}
	.def_incl .display_matrix li{margin: 0;}
	.def_incl .display_matrix .name{font-weight: normal; font-size: 85%;}
	.def_incl .display_matrix .price_box{font-size: 85%;}
	.def_incl .display_matrix .tax{margin-left: -0.4em; font-size:70%;}
	.def_incl .display_matrix .cp_limit{font-size: 84%; margin-left: 0.1em;}
	.item_include{margin: 0 3em 1em 3em; font-size: 1.15em;}
	.item_include .cp_box{font-size: 60%; margin-top: 0.3em;}
	.item_include .yen{font-weight: bold;}
	.item_include .price2 {font-size: 100%; font-weight: bold;}
	.item_include .price2 strong{font-weight: bold;}
	.item_include .tax{font-size: 70%; font-weight: bold; margin-left: -0.35em;}
	.tit_refill{margin-top: 3em; padding-left: 0.5em;}
	.item_refill{margin-top: -2.5em; font-size: 60%;}
	.item_refill a{font-size: 110%;}
	.last_img{margin: 0; padding: 1em 30%; width: 100%;}
	.sp_none{display: none;}
}
/*レスポンシブ-----------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 769px){
.pc_none{display: none;}
}

/* アニメ */
.fuwatAnime{-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:2s; /* アニメ時間 */
-ms-animation-duration:2s; 
animation-duration:2s; 
-webkit-transition-delay: 0.5s;/* 開始時間 */
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-animation-name: fuwatAnime; /* アニメ名 */
-ms-animation-name: fuwatAnime; 
animation-name: fuwatAnime; visibility: visible !important;}

/* 動作内容 */
@-webkit-keyframes fuwatAnime{0%{opacity: 0; -webkit-transform: translateY(-150px);}
 100%{opacity: 1; -webkit-transform: translateY(0);}}
@keyframes fuwatAnime{0%{opacity: 0; -webkit-transform: translateY(-150px); -ms-transform: translateY(-150px); transform: translateY(-150px);}
 100%{opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}}

@-webkit-keyframes fuwatAnime2{0%{opacity: 0; -webkit-transform: translateY(-200px);}
 100%{opacity: 1; -webkit-transform: translateY(0);}}

@-webkit-keyframes fadeIn_l_Anime{0%{opacity: 0; -webkit-transform: translateX(-300px);}
 100%{opacity: 1; -webkit-transform: translateX(0); width: 100%;}}

@keyframes fuwatAnime2{
  0%{
    opacity: 0;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeIn_l_Anime{
  0%{
    opacity: 0.5; /* 透明 */ -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px); /*X軸（右横に）方向に300px */
  }
  100%{
    opacity: 1; /* 不透明 */ -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    width: 100%;
  }
}