@charset "UTF-8";

html,body{
width: 100%;background: #f5f5f5;
font-size: 62.5%; /* 10px*/
font-family: "Noto Sans Jp", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #333;
margin:0;padding:0;
}

.container{
 max-width: 1024px;    
 margin-left: auto;
 margin-right: auto;
 background: #fff;
}

/*------------------------------------------------------
Parts
-------------------------------------------------------*/

.sponly_block {display: none;}
.pconly_block {display:block;}


.tc{text-align: center !important;}
.tl{text-align: left !important;}
.tr{text-align: right !important;}

.ic{
 display: block;
 margin: auto;
}


.txt_2x{font-size:2.0em;}
.txt_1-5x{font-size:1.5em;}
.txt_1-2x{font-size:1.2em;}


.w5{width:5%  !important;}
.w10{width:10%  !important;}
.w15{width:15%  !important;}
.w20{width:20%  !important;}
.w30{width:30%  !important;}
.w40{width:40%  !important;}
.w50{width:50%  !important;}
.w100{width:100%  !important;}

.clr_blu{color: #00ced1}
.clr_mzd{color: #DD007F}
.clr_can{color: #2CA0DA}
.clr_ind{color: #1D2081}

.fl{
 float: left;
}

.fr{
 float: right;
}

.cf{
 clear: both;
}

.lead_line {
 position: relative;
 background: #00ced1;
 color: #fff;
 padding: 0.5rem;
 text-align: center;
 font-weight: normal;
 font-size:4.0rem;
 clear: both;
 }

/* 下三角 */ 
.lead_line:after {
 border: 40px solid transparent;
 border-top-color: #00ced1;
 border-bottom-width: 0;
 bottom: -40px;
 content: "";
 display: block;
 left: 47%;
 position: absolute;
 width: 0;
}

.fnt_min{
font-family: 'Noto Serif JP',"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",serif ; 
}

.fnt_b{
 font-weight: bold;
}


/*------------------------------------------------------
Contents
-------------------------------------------------------*/
.hdr_logo{
 width: 40%;
 font-weight: bold;
 padding: 1rem 0;
}
.hdr_logo th{
 width: 30%;
 padding-left: 1.0rem;
 text-align: left;
 font-size: 1.1rem;
}
.hdr_logo img{
 width: 100%;
}
.hdr_logo td{
 vertical-align: bottom;
 padding-bottom: 0.2rem;
 font-size: 1.5rem;
}


.main_v{
 background-image: url(../img/main_v_pc.jpg);
 background-repeat:no-repeat;
 background-size: 100% auto;
 margin: 0;
 height:auto; 
}

.main_catch_1{
 color:#fff;
 margin: 0;
 font-size: 4.3rem;
 padding-top:10%;
 padding-left: 65%;  
 text-shadow:1px 1px 5px #333;

}

.main_catch_2{
 color:#534741;
 background:linear-gradient(to right , rgba(255,255,255,0.0), #fff 40% );
 margin: 10vh 0 0;
 text-align: right;
 font-size:3.0rem;
 padding: 2rem;
}

.intro_1{
 position: relative;
 height:400px;
 margin-top: 0%;
 background:linear-gradient(to bottom , rgba(0,206,209,0.4), #fff 60% );
}

.intro_1 p{
 margin: 0;
 padding: 6rem 4rem;
 font-size: 1.4rem;
}

.intro_1_pname img{
 width: 60%;
 padding-left: 4rem;
}

.intro_1_pphoto img{
 position: absolute;
 top:15%;
 right: 10%;
 width: 13%;
}

.cta_1{
 display: flex;    
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3rem;
 background:linear-gradient(to left , rgba(245,245,245,0.8), #fff 60% );
 border: solid 1px #534741;
}

.cta_1_box1 p{
 font-size: 1.6rem;
 padding:0 3em;
 
}

.cta_1_box2{
 width: 40%;
 padding: 1em;
 font-size: 1.2rem;
}

.cta_1_box2 p{
 font-size: 1.4rem;
 text-align: center;
 margin-bottom: 0;
}

.cta_1_box2 img{
 width: 100%;
 display: block;
 margin-left: auto;
 margin-right: auto;
 
}

.cta_1_box2 img:hover{
 opacity: 0.8;
    }

.cta_1_catch{
 font-size: 2.8rem;
 padding: 0;
 margin: 0;
 color:#534741;
}

.pname_lavi{
 font-size: 2.0rem;
 color: #00ced1;
}
.pname_plus{
 color: #00ced1;
}
.pname_t{
 font-size: 2.4rem;
}

.kyokan_area{
 margin-left: 0%;
 color: #663300;
 padding: 1rem;
 font-size:2.8rem;
}

.kyokan_area table{
 width: 90%;
 margin: 3rem auto;
    }    

.kyokan_area th,td{
 padding: 3.0rem 1rem 1.0rem;
 
}

.kyokan_area td{
 vertical-align: middle;
 border-bottom: solid 2px #ddd;
}

.promo_1 p{
 font-size: 3.0rem;
 text-align: center;
 line-height: 1.7;
}

.promo_1_exp p{
 font-size: 3.0rem;
}

.taxifolin_face img{
 width: 15%;
}

.taxifolin_side img{
 width: 80%;
 margin-bottom: 5rem;
}
.promo_2{
 margin-top: 6rem;
}

.promo_2 p{
 font-size: 1.8rem;
 text-align: center;
 line-height: 1.7;
}

.siberia{
 position: relative;
 margin-bottom: 2vw;
}

.siberia img{
 width: 100%        
}

.siberia_exp1{
 position: absolute;
 top:3rem;
 left: 3rem;
}

.siberia_exp2{
 position: static;
 padding: 3rem;
 margin-bottom: 5rem;
}

.siberia_exp2 img{
 width:20%;
 float:right;
 margin: 3rem;
}

.dhq_exp{
 padding: 3rem 3rem;
}

.dhq_exp p{
 font-size: 2.0rem;   
}

.dhq_exp img{
 width: 70%;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.dhq_exp table{
 width: 100%;    
 font-size: 1.6rem;    
}

.dhq_exp th{
 width: 20%;
}

.dhq_exp th,td{
 text-align: left;
 vertical-align: top;
 padding: 1rem;
}

.dhq_exp td{
 padding: 1rem;
 vertical-align: top;
}

.ganso p{
 font-size: 4.0rem;
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

.ametis{
 width: 80%; 
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3.0rem;
}

.ametis p{
 font-size: 1.8rem;
 text-align: center;
}

.ametis li{
  font-size: 2.2rem;  
}

.kenko{
 width: 70%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 6rem;
}

.kenko p{
 font-size: 1.8rem;
}


.kenko img{
 width: 40%;
 float:left;
}

.kenko ul{
 width: 70%;
 margin-left: 30rem;
 font-size: 3.0rem;
 list-style: none;
}

.kenko li{
 line-height: 2.0;
 margin-top: 1.0rem;
 color: #663300;
}

.voice{
 margin-top: -1rem;
 background: #F5FFFA;
 padding: 10rem 0 5rem;
}

.voice_box{
 width:80%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3rem;
 padding: 0.5rem 2rem;
 background: #fff;
 font-size: 1.8rem;
 border-radius: 10px;
}

.voice img{
 width:8%        
 }    

.voice p{
 margin: 1rem 0;
}

.faq_ttl{
 background: #9D8477;
 padding: 1rem 3rem; 
 margin-bottom: 2rem;
}

.faq_ttl p{
 font-size: 2.8rem;
 color: #fff;
 margin: 0;
}

.faq table{
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2rem;
 font-size: 1.8rem;
}

.faq img{
 width: 50%;
}

.faq th{
 width: 13%;
}


.promo_3{
background:linear-gradient(to left , rgba(245,245,245,1.0), #fff 60% );
margin-bottom: 0rem;
}
 
.promo_3 img{
width: 100%;
}

.amazon_btn2{
 display: flex;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
}

.amazon_btn2_l{
 padding: 0rem;
 font-size: 2.0rem;
 font-weight: bold;
 width: 50%;
}

.amazon_btn2_l p{
 padding-top: 1.5em;
}

.amazon_btn2_r{
 padding: 5em 5em;
 width: 50%;
}

.amazon_btn2 img{
 margin: 0;
 width: 100%;
}

.amazon_btn2 img:hover{
 opacity: 0.8;
}

footer{
 margin: 0;
 padding: 1rem 3rem;
 background: #979797;
 color: #fff;
 font-size: 1.8rem;
}

footer a{
text-decoration: none;
color: #fff; 
}

.ftr_wrap{
 display: flex;
}

.ftr_wrap p{
 padding-top: 2rem;
 width: 85%;
}

.ftr_wrap img{
 width: 15%;
 height: 15%;
}



.copyr{
 background: #808080;
 color: #fff;
 padding: 1rem 3rem;
 margin: 0;
 font-size: 1.4rem;
}



/*------------------------------------------------------
Tablet Size 
-------------------------------------------------------*/

@media screen and (max-width: 896px) {
    
/*------------------------------------------------------
Parts
-------------------------------------------------------*/ 
    

.lead_line {
 position: relative;
 padding: 0.1rem;
 font-size:2.4rem;
 }    
    
 /* 下三角 */ 
.lead_line:after {
 border: 30px solid transparent;
 border-top-color: #00ced1;
 border-bottom-width: 0;
 bottom: -30px;

}    
     
    
    
    
/*------------------------------------------------------
Contents
-------------------------------------------------------*/
.hdr_logo{
 width: 100%;
}
.hdr_logo th{
 width:20%;
 font-size: 0.8rem;
}
.hdr_logo img{
 width: 100%;
}
.hdr_logo td{
 padding: 0 0.5rem 0.5rem;
 font-size: 1.2rem;
} 
    
.main_v{
 background-image: url(../img/main_v_sp.jpg);
 background-repeat:no-repeat;
 background-size: 100% auto;
 margin: 0;
 height: auto;
}    
    
.main_catch_1{
 color:#fff;
 margin: 0;
 font-size: 6vw;
 padding-top:15%;
 padding-left: 60%;  
 text-shadow:1px 1px 5px #333;
}
    
.main_catch_2{
 color:#534741;
 background:linear-gradient(to right , rgba(255,255,255,0.0), #fff 30% );
 margin: 10% 0 0;
 text-align: right;
 font-size:4.0vw;
 padding: 1rem 0;
}   
        
.intro_1{
 margin-top: 0%;
 background:linear-gradient(to bottom , rgba(0,206,209,0.4), #fff 30% );
 height: auto;
}    
    
.intro_1 p{
 margin: 0;
 padding: 2rem 2rem;
 font-weight: bold;
 font-size: 1.5rem;
 text-align: center;
}
.intro_1_pname img{
 width: 60%;
 padding: 10%;
}
    
.intro_1_pphoto img{
 position: absolute;
 top:0;
 right: 0;
 width: 13%;
}    
    
    
.cta_1{
width: 90%;
    }
    

.pname_lavi{
 font-size: 2.4rem;
 font-weight:bold;
 color: #00ced1;
}
.pname_plus{
 font-size: 2rem;
 font-weight:bold;
 color: #00ced1;
}
.pname_t{
 font-size: 2.4rem;
 font-weight:bold;
}
        
.kyokan_area{
 margin-left: 0%;
 font-size: 2.6rem;
 color: #663300;
 padding: 1rem;
}

.kyokan_area table{
 width: 95%;       
    } 
.kyokan_area th,td{
 padding: 2.0rem 0rem 1.0rem;
}
.kyokan_area img{
 width: 50%        
}      
.kyokan_area td{
 border-bottom: solid 1px #ddd;
}
.promo_1 p{
 font-size: 2.2rem;
 text-align: center;
}
.promo_1 img{
 width: 20%;        
    }
   
.taxifolin_face img{
 width: 30%;
}
    
.promo_1_exp img{
 width:auto;
 height: 2.4rem;
}      
    
.promo_2{
 margin-top: 3rem;
}

.promo_2 p{
 font-size: 1.6rem;
 text-align: center;
 line-height: 1.7;
}    

.siberia{
 position: static;
}

.siberia_exp1{
 position: static;
 padding:0 3rem;
}
    
.siberia_exp2{
 padding: 1rem 3rem 1rem;
}

    
.siberia_exp2 img{
 width:40%;
 float:right;
 margin-left: 3rem;
}        
    
.dhq_exp p{
 font-size: 1.6rem;   
}
 
.dhq_exp tr{
 font-size: 1.3rem;        
    }
    
.dhq_exp th{
 width: 25%;
}
    
    
.ganso p{
 font-size: 2.8rem;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}    
        
.ametis{
 width: 100%; 
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 0;
}    
    
.ametis p{
 font-size: 1.4rem;
 text-align: center;
}
    
.ametis ul{
 margin-top: 2rem;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
    }
    
.ametis li{
  font-size: 1.8rem;  
}    

.kenko{
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
}

.kenko p{
 font-size: 1.4rem;
}
    
.kenko img{
 width: 30%;
 margin-right: 3rem;
}    
  
.kenko ul{
 width: 100%;
 margin: 0;
 font-size: 3.6vw;
 list-style: none;
}

.kenko li{
 line-height: 1.6;
 margin-top: 1.0rem;
 color: #663300;
}
    
.faq table{
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2rem;
 font-size: 1.6rem;
}

.faq img{
 width: 40%;
}

.faq th{
 width: 18%;
}
     
.amazon_btn2{
 display: flex;
 flex-direction: column;
 width: 60%;
 margin-top: 3rem;
 margin-left: auto;
 margin-right: auto;
 padding-bottom: 2rem;
}

.amazon_btn2_l{
 padding: 0;
 font-size: 1.6rem;
 text-align: center;
 width: 100%;
}

.amazon_btn2_r{
 width: 100%;
 padding: 0;
 margin-left: auto;
 margin-right: auto;
 
}

.amazon_btn2 img{
 width: 100%;
}

.amazon_btn2 img:hover{
 opacity: 0.8;
}        
    
    
}

/*------------------------------------------------------
Tablet Size ipad
-------------------------------------------------------*/

@media screen and (max-width: 768px) {
    
.pconly_block {display: none;}
.sponly_block {display:block;}
    
.intro_1_pname img{
 width: 60%;
 padding: 0% 10%;
}
      
 .intro_1_pname img{
 width: 80%;
 padding-left: auto;
 padding-right: auto;
}   
    
.cta_1{
 display: flex;
 flex-direction: column; 
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3rem;
}
    
.cta_1_box1{
 width: 90%;
 padding-top: 0;
 padding-bottom: 0;
}

.cta_1_box2{
 width: 90%;
 padding: 1rem;
 font-weight:bold;
 margin-left: auto;
 margin-right: auto;
}

.cta_1_box2 p{
 font-size: 1.8rem;
 text-align: center;
}

.cta_1_box2 img{
 width: 60%; 
}

.cta_1_catch{
 font-size: 2.8rem;
}    
  
.pname_lavi{
 font-size: 3rem;
}
.pname_plus{
 font-size: 2.em;
}
.pname_t{   
 font-size: 3rem;   
}

.kyokan_area table{
 width: 80%;       
    }     
    
.dhq_exp th{
 width: 20%;
}

    
.ftr_wrap p{
 padding-top: 2rem;
 width: 80%;
}

.ftr_wrap img{
 padding-top: 1rem;   
 width: 20%;
 height: 20%;
}
 
    
}
    
/*------------------------------------------------------
Smart Phone Size 
-------------------------------------------------------*/

@media screen and (max-width: 480px) {

/*------------------------------------------------------
Parts
-------------------------------------------------------*/

.lead_line {
 font-size:2.0rem;
 }   
/* 下三角 */ 
.lead_line:after {
 border: 20px solid transparent;
 border-top-color: #00ced1;
 border-bottom-width: 0;
 bottom: -20px;
 content: "";
 display: block;
 left: 45%;
 position: absolute;
 width: 0;
}
 
/*------------------------------------------------------
Contents
-------------------------------------------------------*/


.intro_1 p{
 font-size: 1.0rem;
    }

    
.intro_1_pphoto img{
 position: absolute;
 top:0;
 right: 0;
 width: 13%;
}    
    
    
.cta_1_box1{
 font-size:1.2rem;
}

.cta_1_box2{
 font-size: 1.2rem;
}

.cta_1_box2 p{
 font-size: 1.4rem;
 margin-bottom: -0.7em;
}

.cta_1_box2 img{
 width: 80%; 
}

.cta_1_catch{
 font-size: 2.0rem;
}    

.pname_lavi{
 font-size: 1.6rem;
}
.pname_plus{
 font-size: 1.2rem;
}
.pname_t{
 font-size: 2rem;
}
    
.kyokan_area{
 font-size: 2.0rem;
}
.kyokan_area table{
 width: 100%;       
    }
 
.promo_1 p{
 font-size: 1.7rem;
}
.promo_1 img{
 width: 20%;        
    }
   
  
.promo_2{
 margin-top: 3rem;
}

.promo_2 p{
 font-size: 1.4rem;
}    

 
.dhq_exp p{
 font-size: 1.4rem;   
}
 

    
.dhq_exp th{
 width: 30%;
}
    
.ganso p{
 font-size: 2rem;
}    

.ametis p{
 font-size: 1.3rem;
}

.ametis ul{
 margin-top: 3rem;
    }
    
.ametis li{
  font-size: 1.4rem;  
}
 
.kenko{
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 6rem;
 margin-bottom: 3rem;
}

.kenko p{
 font-size: 1.4rem;
}
    
.kenko img{
 width: 40%;
 margin-right: 1rem;
 margin-bottom: 3rem;
}    
  
.kenko ul{
 width: 100%;
 margin: 0;
 font-size: 1.5rem;
 list-style: none;
}

.kenko li{
 line-height: 1.6;
 margin-top: 1.0rem;
 color: #663300;
}
   
.voice{
 padding-top:7rem;
}

.voice_box{
 font-size: 1.4rem;
}
    
.faq_ttl p{
 font-size: 2.0rem;
 color: #fff;
 margin: 0;
}    
    

.faq img{
 width: 60%;
}


.promo_3{
 padding-bottom: 3rem;
}
 
.promo_3 img{
width: 100%;
}


.amazon_btn2_l p{ 
 font-size: 1.3rem;
 padding-top: 0;
 margin-top:0;
}

    
    
    
footer{
margin-top: 0rem; 
font-size: 1.2rem;

}
.copyr{
 font-size: 1.0rem;
}

.ftr_wrap p{
 padding-top: 2rem;
 width: 70%;
}

.ftr_wrap img{
 width: 30%;
 height: 30%;
}
    
    
}    

@media screen and (max-width: 360px) {

.txt_2x{font-size:1.5em;}
.txt_1-5x{font-size:1.3em;}

.lead_line {
 font-size:1.5rem;
 }      

   
.siberia{
 position: static;
}

.siberia_exp1{
 position: static;
 padding:0 3rem;
}    
    
.intro_1 p{
 font-size: 1.1rem;
}    
    
.cta_1_catch{
 font-size: 1.8rem;
}  
.kyokan_area table{
 width: 90%;       
    }
.kyokan_area{
 font-size: 1.4rem;
}   
.kyokan_area img{
 width: 40%        
}       
.promo_1 p{
 font-size: 1.4rem;
}    
.dhq_exp p{
 font-size: 1.2rem;   
}    
.kenko ul{
 font-size: 1.2rem;
}    
    
.amazon_btn2{
 width: 70%;

}    
  
.amazon_btn2_l{
 font-size: 1.3rem;
}
    
footer{
font-size: 1.0rem;    
}

.ftr_wrap p{
 padding-top: 2rem;
 width: 75%;
}

.ftr_wrap img{
 padding-top: 2rem;
 width:  25%;
 height: 25%;
}
    
        
    
    
    
    
    
}