@charset "utf-8";

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


.pc{display: none;}

header{background-image: url("../image/top_image_sp.png");width: 100%;height: 300px;
background-position: center;background-size: cover;background-repeat: no-repeat;padding-top: 20px;}
.logo{position: absolute;width: 120px;height: auto; margin: 10px 0 0 20px;}
.logo img{width: 100%;}
.box{position: absolute;width: 100%;text-align: center;}
h1{display: none;}

h2{font-size: 4.6vw; padding: 0 0 0 8px; color: #494949;background: #fafafa;border-left: solid 5px #649db6; margin: 8x 0;}
h3{border-bottom: double 5px #ccc; font-size: 3.9vw; margin: 10px 20px;}    
.lead{padding: 6px 20px; font-size: 3.6vw; line-height: 1.4;}
.lead p{margin-bottom: 6px;}
.need{margin: 10px auto; padding:6px 0 6px 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2; width: 80%;}
.need ul{padding: 6x 5px 6px 8px; font-size: 3vw; line-height: 1.5;}
.need p{ font-size: 3vw; line-height: 1.5;}   
#wrapper{width: 96%; margin: 30px auto;}
.sub{margin-left: 10px;}

article{width: 100%; margin: 0 auto;}
 
.red{color: #F00;font-weight: bold;}
.chui{color: #f00; font-weight: normal;font-size: 0.9em;}
.lead_img{margin: 6x auto;width: 98%;height: auto;}
.lead_img img{width: 100%;height: auto;}
.arrow{font-size: 2em;margin-left: 20%;color: #749fb3;}
.lead_img_s{margin: 10px auto;width: 60%;}
.lead_img_s img{width: 100%;}
.lead_img_m{margin: 10px auto;width: 80%;}
.lead_img_m img{width: 100%;}
.lead table {width: 96%; margin: 30px auto;border-collapse: collapse;table-layout:fixed}
.lead table th {background: #649db6; color: #fff;border: solid 1px #888;padding: 5px;}
.lead table td {background: #eee;border: solid 1px #888;padding: 5px;word-wrap:break-word;}
.lead table tr:nth-child(odd) td {background: #fff;}
.lead caption {width: 96%;}
.fit{max-width: 96%;}
.link{margin: 10px auto; padding: 20px; background-color: #ECF1F4;}
.link a{border-bottom: thin solid #0D76B2; color: #0D76B2;}
.link a:hover{border-bottom: thin solid #0D76B2; color: #0D76B2; font-weight: bold;}
.sage{margin-left: 20px;}
.mb20{margin-bottom: 30px;}
.this_down{padding-bottom: 6px;}
.lead_product{padding: 6px 20px; line-height: 1.4;display: flex;flex-direction: column;}
.youtube{width: 90%; height: 220px; margin: 20px auto;}
.youtube iframe{width: 100%; height: 220px;}
.p_box{margin: 10px; padding: 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2;width: 80%;margin: 0 auto 20px;}
.p_photo{width: auto; height: 160px; margin-right: 10px;text-align: center;}
.p_photo img{width: auto;height: 100%;}
.p_youto{background-color: #0D76B2;color: #fff;font-weight: bold;text-align: center;padding: 5px 0;margin-bottom: 10px;}
.speck_ss{font-size: 0.8em; border-bottom: thin solid #333;line-height: 1.8em;margin-bottom: 10px;}
footer{width: 100%; height: 40px; background-color: #333;text-align: center; padding-top: 16px;}
small{color: #fff;}

/* トップにもどるボタン -----------------*/
#page-top {position: fixed;bottom: 20px;right: 20px;transition: 0.6s}
#page-top a:hover {opacity: 0.5;}

    
}/* Tablet---------------------------------------------------*/
@media (min-width: 481px) and (max-width: 1023px) {


.pc{display: none;}

header{background-image: url("../image/top_image.png");width: 100%;
height: 426px;background-position: center;background-repeat: no-repeat;}

.logo{position: absolute;width: 160px;height: auto; margin: 10px 0 0 20px;}
.logo img{width: 100%;}
.box{position: absolute;width: 100%;text-align: center;}
h1{display: none;}


#wrapper{width: 96%; margin: 30px auto;}
.sub{margin-left: 10px;}

nav{width: 90%; margin: 30px auto;}
nav ul{list-style: none; border:2px solid #71a2b8; padding: 10px;font-size: 0.9em;position: sticky;top: 20px;left: 0; }
nav li{line-height: 1.4em; margin-bottom: 10px;}

article{width: 100%; margin: 0 auto;}

.lead{padding: 10px 20px;}
.lead p{margin-bottom: 10px;}
.red{color: #F00;font-weight: bold;}
.chui{color: #f00; font-weight: normal;font-size: 0.9em;}
.lead_img{margin: 10px auto;width: 98%;height: auto;}
.lead_img img{width: 100%;height: auto;}
.arrow{font-size: 2em;margin-left: 20%;color: #749fb3;}

.lead_img_s{margin: 10px auto;width: 60%;}
.lead_img_s img{width: 100%;}

.lead_img_m{margin: 10px auto;width: 80%;}
.lead_img_m img{width: 100%;}


.lead table {width: 96%; margin: 30px auto;border-collapse: collapse;table-layout:fixed}
.lead table th {background: #649db6; color: #fff;border: solid 1px #888;padding: 5px;}
.lead table td {background: #eee;border: solid 1px #888;padding: 5px;word-wrap:break-word;}
.lead table tr:nth-child(odd) td {background: #fff;}
.lead caption {width: 96%;}



.fit{max-width: 96%;}
.link{margin: 10px auto; padding: 20px; background-color: #ECF1F4;}
.link a{border-bottom: thin solid #0D76B2; color: #0D76B2;}
.link a:hover{border-bottom: thin solid #0D76B2; color: #0D76B2; font-weight: bold;}

.need{margin: 10px auto; padding: 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2;width: 90%;}
.need ul{padding: 10px 40px;}
.sage{margin-left: 20px;}
.mb20{margin-bottom: 30px;}
h2{ padding: 0.5em;color: #494949;background: #fafafa;border-left: solid 5px #649db6; margin: 20px 0;}
h3{border-bottom: double 5px #ccc;font-size: 1.3em; margin: 10px 20px;}
.this_down{padding-bottom: 6px;}
.flex{display: flex;}
.lead_product{padding: 6px 20px; line-height: 1.4;display: flex;}
.youtube{width: 90%; height: 400px; margin: 20px auto;}
.youtube iframe{width: 100%; height: 400px;}
.p_box{margin: 10px; padding: 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2;width: 90%;}
.p_photo{width: auto; height: 160px; margin-right: 10px;}
.p_photo img{width: auto;height: 100%;}
.p_youto{background-color: #0D76B2;color: #fff;font-weight: bold;text-align: center;}
.speck_ss{font-size: 0.8em; border-bottom: thin solid #333;line-height: 1.8em;margin-top: 20px;}
footer{width: 100%; height: 40px; background-color: #333;text-align: center; padding-top: 16px;}
small{color: #fff;}


/* トップにもどるボタン -----------------*/
#page-top {position: fixed;bottom: 20px;right: 20px;transition: 0.6s}
#page-top a:hover {opacity: 0.5;}



}/* PC-------------------------------------------------------*/
@media screen and (min-width: 1024px) {

    .top_attention li{list-style-type: none;}
.sp{display: none;}
.navToggle{display: none;}

header{background-image: url("../image/top_image.png");width: 100%;
height: 426px;background-position: center;background-repeat: no-repeat;}

.logo{position: absolute;width: 160px;height: auto; margin: 10px 0 0 20px;}
.logo img{width: 100%;}
.box{position: absolute;width: 100%;text-align: center;}
h1{display: none;}


#wrapper{width: 1080px; margin: 30px auto; display: flex;flex-direction: row-reverse; justify-content: space-between;}
nav{width: 23%;}
nav ul{list-style: none; border:2px solid #71a2b8; padding: 10px;font-size: 0.9em;position: sticky;top: 20px;left: 0; }
nav li{line-height: 1.4em; margin-bottom: 10px;}
.sub{margin-left: 10px;}

article{width: 74%;}
    
h2{ padding: 0.5em;color: #494949;background: #fafafa;border-left: solid 5px #649db6; margin: 20px 0;
    font-size: 23px;}    

.lead{padding: 10px 20px;}
.lead p{margin-bottom: 10px;}
.red{color: #F00;font-weight: bold;}
.lead_img{margin: 10px auto; width: 90%;}
.lead_img img{width: 100%;}    
.arrow{font-size: 2em;margin-left: 20%;color: #749fb3;}    
.lead_img_m{margin: 10px auto;width: 60%;}
.lead_img_m img{width: 100%;}    
.need{margin: 10px auto; padding: 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2;width: 90%;}    
h3{border-bottom: double 5px #ccc;font-size: 1.3em; margin: 10px 20px;} 
.chui{color: #f00; font-weight: normal;font-size: 0.8em;}    
.lead_img_s{margin: 10px auto;width: 30%;}
.lead_img_s img{width: 100%;}    
.need ul{padding: 10px 40px;}    
.mb20{margin-bottom: 30px;}    
.sage{margin-left: 20px;}    
.lead table {width: 90%; margin: 30px auto;border-collapse: collapse;}
.lead table th {background: #649db6; color: #fff;border: solid 1px #888;padding: 5px;}
.lead table td {background: #eee;border: solid 1px #888;padding: 5px;}
.lead table tr:nth-child(odd) td {background: #fff;}
.link{margin: 10px auto; padding: 20px; background-color: #ECF1F4; font-size: 18px;}
.link a{border-bottom: thin solid #0D76B2; color: #0D76B2;}
.link a:hover{border-bottom: thin solid #0D76B2; color: #0D76B2; font-weight: bold;}
.this_down{padding-bottom: 6px;}
.flex{display: flex;}
.lead_product{padding: 6px 20px; line-height: 1.4;display: flex;}
.youtube{width: 90%; height: 400px; margin: 20px auto;}
.youtube iframe{width: 100%; height: 400px;}
.p_box{margin: 10px; padding: 20px; background-color: #FCFEFF; 
	border:thin solid #0D76B2;width: 90%;}
.p_photo{width: auto; height: 160px; margin-right: 10px;}
.p_photo img{width: auto;height: 100%;}
.p_youto{background-color: #0D76B2;color: #fff;font-weight: bold;text-align: center;}
.speck_ss{font-size: 0.8em; border-bottom: thin solid #333;line-height: 1.8em;margin-top: 20px;}
footer{width: 100%; height: 40px; background-color: #333;text-align: center; padding-top: 16px;}
small{color: #fff;}

/* トップにもどるボタン -----------------*/
#page-top {position: fixed;bottom: 20px;right: 20px;transition: 0.6s}
#page-top a:hover {opacity: 0.5;}
}