@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
/*
css reset
------------------------------------*/
body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,
table,th,td,
form,select,option,input
address,pre,strong,em,iframe,img{
	margin:0;
	padding:0;
	font-size:100%;
	border:0;
}

ul,ol{ list-style-type:none; }
table {
	border-collapse: collapse; 
	border-spacing: 0;
}
img{ border:0; }

img, input, select, textarea {
	vertical-align: middle;
}
a img{
	opacity:1;
	filter: alpha(opacity=100);
}
a:hover img{
	opacity:0.7;
	filter: alpha(opacity=75);
}


/*	clearfix
----------------------------------------------------------------*/
.clearfix:after {/*for modern browser*/
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	overflow:hidden;
}
 
* html .clearfix { zoom:1; } /*for IE6*/
*:first-child+html .clearfix { zoom:1; } /*for IE7*/


 



/*	base
----------------------------------------------------------------*/
body{
	color: #303030;
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;

	*font-size:small;
	line-height: 1.7;
}




/*------------------------------------------------------
           ヘッダー
----------------------------------------------------------------*/
header {
	width: 100%;
	height: 138px;
	background: #4acfca url(../imgs/headttl_bg.jpg) ;
	border-bottom: 15px solid #4acfca;
	position:fixed;
	z-index:3;
}

header div#logo {
	float: left;
	padding:20px 0 0 20%;
	width: 100px;
}

div#logo img {
	width: 100%;	
}


header .h_ad {
	font-size:0.8em;
	font-weight: normal;
	color: #2f9eaa;
	text-align:right;
	float:right;
	height: 380px;
	padding: 40px 20% 30px 0;
	background: url(../imgs/logo.png) no-repeat 30% 10px;
	background-size: 420px 150px;
}

header .h_ad span {
	font-size: 1.5em;
	font-weight: bold;
}

@media screen and (max-width:900px){
	header {
		height: 100px;
		background:url(../imgs/headttl_bgsmall.jpg) ;
	}

	header div#logo {
		padding-left: 5%;
	}

	

	div#logo img {
		width: 75%;
		padding-left:0;
	}

	header .h_ad {
		width: 80%;
		position: relative;
		top: -90px;
		line-height:100;
		white-space:nowrap;
		overflow:hidden;
		background: url(../imgs/logo.png) no-repeat 95% 20px;
		background-size:290px 90px;
		z-index: 10;
	}


}





/*------------------------------------------------------
           ページタイトル
----------------------------------------------------------------*/
div#pagettl {
	position:relative;
	width:100%;
	height: 160px;
	background: url(../imgs/pagettl_bg.jpg) no-repeat 0 145px;
	background-size: 100% 230px;
	padding-top: 215px;
	font-family: 'Noto Serif JP', serif;
}

div#pagettl2 {
	position:relative;
	width:100%;
	height: 90px;
	background: #E3F7EE url(../imgs/pagettl_bottom.png) no-repeat 0 0px;
	background-size: 100% 30px;
	font-family: 'Noto Serif JP', serif;
}

#pagettl h2 {

	font-size: 2.3em;
	line-height: 1em;
	text-align: center;
	color:#003953;
	font-weight: bold;
}


#pagettl h2 span {
	font-size: 0.6em;
	font-weight: normal;
	color:#29acb6;
}





section {
	margin-bottom: 30px;
	padding: 80px 0 80px;
	background: #e3f7ee url(../imgs/ling.png) no-repeat 80% top;
}


section h1 {
	font-size:1.4em;
	font-weight: bold;
	color:#dc3c3c;
	font-weight:normal;
	background:url(../imgs/ttlsmall_bg.png) no-repeat 20%;
	padding:10px 20% 10px 23%;
	margin-bottom:10px;
}

section p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding:10px 20% 10px 20%;
}
section p span.orange {
	color:#dc3c3c;
}

section#intro {
	margin-bottom: 0px;
	padding: 50px 0 30px;
	background: #fff;
}

section#intro p img{
	float: left;
	margin-right: 20px;
}


@media screen and (max-width:900px){
	div#pagettl {
		height: 110px;
		background: url(../imgs/pagettl_bg2.jpg) no-repeat 0 115px;
		background-size: 100% 150px;
		padding-top: 155px;
	}

	div#pagettl2 {
		background: #E3F7EE url(../imgs/pagettl_bottomsmall.png) no-repeat 0 0px;
		background-size: 100% 30px;
	}

	
	#pagettl h2 {
		font-size: 1.7em;
		line-height: 1.2em;
		text-align: center;
		color:#003953;
		font-weight: bold;
	}
	
	#pagettl h2 span {
		font-size: 0.6em;
		font-weight: normal;
	}



	section {
		padding: 0px 0 80px;
	}


	section h1 {
		font-size:1.2em;
		padding:10px 0 10px 13%;
		background:url(../imgs/ttlsmall_bg.png) no-repeat 5%;
	}	


	section p {
		font-size: 1em;
		line-height: 1.6em;
		padding:10px 5% 10px 5%;
	}



	section#intro p {
		font-size: 1em;
		line-height: 1.6em;
		padding:10px 0 20px;
	}
	section#intro p img{
		float:none;
		width: 100%;
		margin-bottom: 20px;	
	}
	section#intro p span {
		display: block;
		font-size: 1.0em;
		line-height: 1.6em;
		padding:10px 5% 0 5%;
	}

}	






div.info {
	margin-top: 100px;
	padding-top: 40px;
	width:100%;
	height: 205px;
	background: url(../imgs/pagettl_bg.jpg) no-repeat;
	background-size: 100% 245px;
}

div.info ul li:first-child {
	text-align: center;
	padding: 20px 0 25px; 
}

div.info ul li {
	text-align: center;
	padding: 10px ; 
}

div.info ul li a {
	color: #000;
	text-decoration: none;
}

div.info ul li img {

}




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

	div.info ul li img {
		width: 80%;
	}
		
	div.info {
		margin-top: 20px;
		padding-top: 5px;
		width:100%;
		height: 124px;
		background: url(../imgs/pagettl_bg.jpg) no-repeat center top;
		background-size: 100% 130px;
		font-size: 0.8em;
	}

	div.info ul li:first-child {
		padding: 15px 0 15px; 
	}

	div.info ul li {
		padding: 5px ; 
	}


}



/* ----------------------------
     サブメイン要素
------------------------------*/

div#submain {
    padding-top: 30px;
    background-color: #3f4c7e;
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}

div#submain ul {
    width: 60%;
    margin: 0 auto;
}
div#submain ul li {
    float: left;
    width: 40%;
    margin: 5%;
    height: 60px;
    text-align: center;
    padding-top: 20px;
	padding-bottom: 10px;
    box-shadow:1px 1px 10px rgba(0,0,0,.2);
    border-radius: 0 0 10px 0;
    background: rgb(216,220,237);
    background: linear-gradient(0deg, rgba(216,220,237,1) 30%, rgba(255,255,255,1) 100%);
}
div#submain ul li a {
    display: block;
	height: 60px;
	width: 100%;
	text-decoration: none;
	color: inherit;
}


div#submain ul li span {
    font-weight: normal;
    font-size: .8em;
    color: #4a3cd0;
}


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

    div#submain {
		font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

        padding-top: 30px;
        background-color: #28325a;
    }

    div#submain ul {
        width: 100%;
    }
	
    div#submain ul li {
        float: none;
        width: 100%;
        height: 50px;
        margin: 0;
        border-radius: 0;
        text-align: center;
        padding-top: 15px;
        background: rgb(216,220,237);
        background: linear-gradient(0deg, rgba(216,220,237,1) 30%, rgba(255,255,255,1) 100%);
		z-index: 98;
    }
    div#submain ul li a {
		text-decoration: none;
		color: inherit;
        display: inline-block;
		height: 50px;
		width: 100%;
		z-index: 99;
    }


    div#submain ul li span {
        font-weight: normal;
        font-size: .8em;
        color: #4a3cd0;
		width: 100%;
    }
}

/* ----------------------------
     フッター要素
------------------------------*/


footer {
    background-color: #28325a;
    color: #fff;
    text-align: center;

}


footer p#f1 {
    display: inline-block;
    font-size: 1.0em;
    font-weight: normal;
    padding: 20px 0 10px;
}

footer p#f2 {
    display: inline;
    padding: 0 20px 0 20px;
    font-size: 0.9em;
    font-weight: normal;
}

footer p#f3 {
    display: inline;
    font-size: 0.9em;
}
footer p#f4 {
    font-size: 0.8em;
    font-weight: normal;
    display: block;
    padding-bottom: 10px;
}

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

    footer p#f1 {
        display: block;
        font-weight: normal;
        font-size: 1em;
        padding: 30px 0 0;
    }
    footer p#f2 {
        display: block;
        padding: 0 0 5px;
        font-size: 0.7em;
    }
    footer p#f3 {
        display: block;
        font-size: 1.2em;
        padding-bottom: 20px;
    }
    footer p#f4 {
        font-size: 0.8em;
        padding-bottom: 20px;
    }

	footer p#f2 a, footer p#f3 a {
		color: #fff;
		text-decoration: none;
	}
}