@charset "utf-8";

html{ font-size: 62.5%;}


body{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	color:#515151;
	font-size: 1.6em;
	line-height:1.8;
	}

header { text-align:center;}

h1{ font-size:80%; color:#515151; padding-bottom:5px}
h2{ text-align:left;}

.header_box { padding:0 12% 0; text-align:left;}

#smart_bg, #smart_visual_read{display:none;}	


#main_visual{ background:#fdd000; margin-bottom:50px;}
#main_visual_read{width:40%; margin:0; padding:80px 0 80px 12%; float:left;}
#main_photo{ width:48%; float:right; text-align:right; height:400px;}
#main_photo img {height:100%; width:100%; max-height:400px; }


h2.main_visua_tt{
    font-size: 3.5rem;
    font-weight: bold;
	}
	
.wrapper {
    width: 80%;
    margin: 0 auto 30px;
    padding: 0 0;}
	
.top_navi{ padding-bottom:60px;}	
	
.top_navi_photo{ width:50%; float:left;}	
.top_navi_photo img{ width:100%;}	

.top_navi_read{
	width: 40%;
	float:left;
	margin-top:50px;
	padding:5%;
	background: #fff9db;
	}

.top_navi_read h1{
	color:#515151;
	font-size: 3.0rem;
    font-weight: bold;
    margin: 0 0 20px;}
	
.top_navi_read h2{
	background:url(../img/top_navi_tt.png) no-repeat;
	color: #4CA6C2;
    font-size: 2.0rem;
    margin: 0 0 20px;
    padding: 0 0 0 60px;}
	
.top_navi_read h2 a{color: #65AF53;}		
/*.top_navi_read h2 a{color: #4CA6C2;}	*/
	
.top_navi_read h3{
	font-size: 1.6rem;
	line-height:1.8;
	}
	
.top_navi_btn a:link, .top_navi_btn a:visited, .top_navi_btn a:active{
    background-color: #333;
    border-radius: 25px;
    color: #fff;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 50vw;
	margin-top:30px;}

.top_navi_btn a:hover {
    background-color: #fdd000;
    border-radius: 25px;
    color: #000;
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 50vw;
	}
	
.main_title{background:#fdd000; margin-top:20px; padding:60px; text-align:center;}	

.main_title h1{
	color:#515151;
	font-size: 3.0rem;
    font-weight: bold;}
	
.main_read { background:url(../img/title_ya.png) no-repeat top; margin-top:20px}
.main_read h2{color: #65AF53; text-align:center; padding-top:80px; font-weight:bold; font-size: 2.6rem; }	
.main_read h3{color: #65AF53; text-align:center; margin-bottom:50px; font-size: 2.0rem;}	
	

h4{  font-size: 2.2rem; font-weight:bold; padding-bottom:8px; margin-bottom:20px; border-bottom:1px solid #CCC;}	
	
	
a:link, a:visited, a:active { color: #65AF53;}

a:hover {opacity: 0.6;}

p{ padding-bottom:1.6em;}
	
	
/**/


.life{ margin-bottom:40px;}	
.life_box{ padding:0 40px;}

/* footer
---------------------------------------------*/	

#footerWrapper{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 0;
	background:#343434;
	color:#fff;
	}
	
#footerWrapper .wrapper{ margin-bottom:0;}

#footerWrapper a:link, #footerWrapper a:visited, #footerWrapper a:active { color: #281F00;}

#footerWrapper .gly{color:#999;}


#footerWrapper dl{
	margin:0 auto;
	}


#footerWrapper dt, #footerWrapper dd{
	float:left;
	text-align:left;
	padding:0 0 20px;
	line-height:160%;
	 }
	 
#footerWrapper dt{
	width:20%;
	color:#999;
	}
	
#footerWrapper dd{
	width:80%;
	}
	
#footerWrapper a {display:inline;}

/*#footerWrapper .company{ padding-bottom:14px; margin-bottom:24px; border-bottom:1px solid #ccc;}*/
#footerWrapper .company a.tel { color:#fff; }


#footerWrapper ul.profile { margin-top:16px;padding-bottom:10px;}
#footerWrapper ul.profile li{ margin-bottom:16px;}

footer .linkBox {
	border-top: 1px solid #281F00;
    margin: 0 auto;
    padding: 20px 0;
	text-align:center;
	}	

footer .linkBox li{
	flex-grow: 1;
	flex-basis:auto;
	}
footer .linkBox .flex {	display: flex; text-align:center;}

#copy { text-align:center; font-size:80%; padding:8px;}
#copy a{display:inline;}


/*
---------------------------------------------*/	
	



/* ここから上がPC向け
---------------------------------------------------- */

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

/* ここから下がスマホ向け
---------------------------------------------------- */

body{
	line-height:2;
	
	}
	
.header_box { padding:0; margin:0; text-align:center;}

header{ width:80%; margin:auto;}		
header img{ height:auto; max-width: 300px; margin:50px auto 40px;}	
	
header h1{font-size:80%; color:#CCC; }	
header h2 img { width:100%; text-align:center; padding:0; margin:18px 0 0;}
h2.main_visua_tt{font-size: 1.6em; line-height:2.5}

#main_visual, #main_photo{display:none;}

#smart_bg, #smart_visual_read{display:block;}

#smart_bg{ background:url(../img/main_bg.jpg) no-repeat; height:100%; padding:30px; margin-bottom:40px;}	
#smart_visual_read{width:80%; color:#fff;}

.life_box{ padding:0;}

.top_navi_photo{ width:100%; float:none; margin:0;	background: #fff9db;}	
.top_navi_photo img{ width:100%;}	

.top_navi_read{
	width: 86%;
	float:none;
	margin:0px;
	padding:7%;
	background: #fff9db;
	}

.top_navi_btn a{ text-align:center; margin:auto;}
	
.top_navi_read_sp{
		top:200px;
	}		

.top_navi_read h1{
	color:#515151;
	font-size: 2.0rem;
    font-weight: bold;
    margin: 0 0 20px;}
	
.top_navi_read h2{
	color: #4CA6C2;
    font-size: 1.8rem;}
	
	
.top_navi_read h3{
	font-size: 1.6rem;
	line-height:1.8;
	}
		

p{ margin-bottom:0px;}


#footerWrapper{ text-align:left;}	

	
#footerWrapper dt {
	color:#999;
	width: 100%;
    padding: 10px 0;}
		
#footerWrapper dd {
    width: 100%;
	padding-left: 0;
	margin-left: 0;}

#footerWrapper span{ font-size:140%;}



footer .linkBox li {
        flex-grow: 1;
        flex-basis: auto;
        border-bottom: 1px solid #c0c0c0;
        padding: 1rem 0;
    }
	
footer .linkBox li: first-child {
        border-top: 1px solid #c0c0c0;
    }

footer .linkBox .flex {display: block;}

footer .linkBox {
    padding: 0;
	}


	
/*** adjust parts ***/
				
	.flex{display:block;}
	
	
}


.clearfix::after {
	
	display: block;
	content: "";
	clear:both;
	}


/* その他
---------------------------------------------------- */
.pt20{ padding-top:20px;}
.pt40{ padding-top:40px;}
.pt60{ padding-top:60px;}

.pb40{ padding-bottom:40px;}
.pb100{ padding-bottom:100px;}

.mb05{	margin-bottom:05px;}	
.mb10{	margin-bottom:10px;}	
.mb15{	margin-bottom:15px;}	
.mb20{	margin-bottom:20px;}
.mb40{	margin-bottom:30px;}
.mb40{	margin-bottom:40px;}
.mb50{	margin-bottom:50px;}
.mb60{	margin-bottom:60px;}
.mb80{	margin-bottom:80px;}
	
.mt05{	margin-top:5px;}
.mt08{	margin-top:8px;}
.mt10{	margin-top:10px;}
.mt15{	margin-top:15px;}
.mt20{	margin-top:20px;}
.mt30{	margin-top:30px;}
.mt40{	margin-top:40px;}
.mt50{	margin-top:50px;}
.mt60{	margin-top:60px;}
.mt100{	margin-top:100px;}

.mr10{ margin-right:10px;}
.mr20{ margin-right:20px;}
.mr30{ margin-right:30px;}