@charset "utf-8";

/*===============================================
●共通
===============================================*/
body {
	color:#5c272e;
	box-sizing:border-box;
	font-size:87.5%; /* 1em=14pxに設定 */
	background:url(../images/mainframe/tex_white.gif) repeat center center / 500px 500px;
}
body,
th,
td {
	font-family:"メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height:1.3em;
}
p {
	text-align:justify;
	text-justify:distribute;
}
img {
	width:100%;
	max-width:100%;
	height:auto;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic; 
}
a:link { color:#5c272e;}
a:visited { color:#5c272e;}
a:hover {
	color:#666;
	text-decoration:none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
a:active { color:#5c272e;}
a:hover img {
	filter:alpha(opacity=8);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

/* bodyWrapper
---------------------------------------- */
#bodyWrapper {
	position:relative;
}

/* header
---------------------------------------- */
#headerWrapper {
	background-image:url(../images/mainframe/sky02.png), url(../images/mainframe/sky.jpg);
	background-position:center center, center center;
	background-repeat:no-repeat, repeat;
}
#mainImage {
	background-image:url(../images/mainframe/liner.png), url(../images/mainframe/liner02.png);
	background-position:center bottom, left bottom;
	background-repeat:no-repeat, repeat-x;
}
#header #mainMenu ul li a {
	display:block;
	text-decoration:none;
	font-family: "Kosugi Maru", sans-serif;
	font-weight: 400;
}

/* title
---------------------------------------- */
.tit01,
.tit04 h2 {
	color:#954f19;
	text-align:center;
	letter-spacing:-5px;
	font-family: "RocknRoll One", sans-serif;
	letter-spacing: 0.01em;
	font-weight: 400;
}
.tit02 {
	color:#954f19;
	line-height:1.3em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
}
.tit03 {
	color:#954f19;
	text-align:center;
	line-height:1.2em;
	padding:0.5em 0;
	border:#954f19 2px dotted;
	background-color:#fff;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
}
.tit04 {
	text-align:center;
}
.tit04 h2 span {
	display:block;
	font-size:0.7em;
	line-height:0.7em;
}

/* button
---------------------------------------- */
.btn01, .btn02 {
	text-align:center;
}
.btn01 a,
.btn02 a {
	display:inline-block;
	min-width:280px;
	font-weight:bold;
	color:#fff;
	padding:0.8em 3em 0.5em 1em;
	text-decoration:none;
	margin:0 auto 5px;
	background:url(../images/mainframe/arrow_brown.png) no-repeat 95% center / 24px 24px #954f19;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 5px 0px #6a3710;
	-moz-box-shadow:0px 5px 0px #6a3710;
	-webkit-box-shadow:0px 5px 0px #6a3710;
	transition:all 0.25s ease;
	position:relative;
	box-sizing:border-box;
}
.btn02 a {
	text-align:center;
	padding:0.8em 1em 0.5em 3em;
	background:url(../images/mainframe/arrow_brown03.png) no-repeat 5% center / 24px 24px #954f19;
}
.btn01 a:hover,
.btn02 a:hover {
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	position:relative;
	margin:5px auto 0;
}

/* pageTop
---------------------------------------------- */
#pageTop {
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:1000;
	display:none;
}

/* footer
---------------------------------------- */
#footer {
	background:url(../images/mainframe/footer_sky.png) repeat-x center top;
}
#footer address {
	text-align:center;
}
#footer #copy {
	font-size:0.86em;
	color:#196014;
	text-align:center;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* 全般
	---------------------------------------- */
	body {
		min-width:320px;
		line-height:1.4em;
		-webkit-text-size-adjust: none;
	}
	#roadnav,
	#footerMenu,
	.spNone {
		display:none;
	}
	.inner {
		padding:0 1em;
	}
	
	/* header
	---------------------------------------- */
	#headerWrapper {
		background-size:500px auto, 500px 374px;
		padding-top:6em;
	}
	#header {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding-top:0.5em;
		z-index:1001;
	}
	.bgWhite {
		background-color:rgba(255, 255, 255, 0.95);
	}
	#header #headerLogo {
		width:240px;
		float:left;
		margin-left:0.5em;
	}
	#header #menuBtn {
		width:50px;
		height:64px;
		float:right;
		margin-right:1em;
	}
	#header #mainMenu {
		display:none;
	}
	#header #mainMenu ul li a {
		padding:0.7em;
		line-height:20px;
		border-top:#e4cdab 1px solid;
	}
	#header #mainMenu ul li a img {
		width:20px;
		height:20px;
		display:inline-block;
		margin-right:0.5em;
		vertical-align:middle;
	}
	#header #mainMenu #subMenu li a {
		padding-left:4em;
		background:url(../images/mainframe/arrow_green.png) no-repeat 2em center / 20px 20px;
	}

	/* title
	---------------------------------------- */
	.tit01,
	.tit04 h2 {
		font-size:2.1em;
		line-height:1.2em;
		margin-bottom:0.5em;
	}
	.tit01 img {
		width:2em;
		display:block;
		margin:0 auto 0.3em;
	}
	.tit02 {
		font-size:1.28em;
		margin-bottom:0.5em;
	}
	.tit03 {
		font-size:1.28em;
		margin-bottom:0.7em;
	}
	.tit04 img {
		width:4.3em;
		display:block;
		margin:0 auto 0.3em;
	}
	
	/* pageTop
	---------------------------------------------- */
	#pageTop {
		width:50px;
	}
	
	/* footer
	---------------------------------------- */
	#footer {
		background-size:250px auto!important;
	}
	#footer .inner {
		padding-top:1em;
		padding-bottom:6em;
		background:url(../images/mainframe/footer_tex.png) no-repeat center bottom / contain;
	}
	#footer h3 {
		width:75%;
		margin:0 auto 0.5em;
	}
	#footer #footerBtn {
		width:80%;
		max-width:300px;
		margin:0.7em auto;
	}
	#footer #footerBottom {
		padding-bottom:1.3em;
		margin-top:-1.5em;
		background-color:#4cae45;
	}
	#footer #copy {
		line-height:1.7em;
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* 全般
	---------------------------------------- */
	body {
		overflow-y:scroll;
		font-size:75%;
		line-height:1.7em;
	}
	#header #menuBtn,
	.pcNone {
		display:none!important;
	}
	#headerInner,
	#mainMenu,
	.inner {
		width:100%;
		max-width:960px;
		padding:0 10px;
		margin:0 auto;
		box-sizing:border-box;
	}
	
	/* header
	---------------------------------------- */
	#headerWrapper {
		padding-top:1em;
		background-position:center 70%, center center;
		background-size:contain, 500px 374px;
	}
	#header #headerLogo {
		width:45%;
		margin:0 auto 1em;
	}
	#header #mainMenu {
		margin-bottom:2.5em;
	}
	#header #mainMenu ul {
		display:table;
		margin:0 auto;
		border-right:#dbccc1 1px solid;
	}
	#header #mainMenu ul li {
		display:table-cell;
		white-space:nowrap;
		font-size:1.15em;
		line-height:1.2em;
		vertical-align:top;
		border-left:#dbccc1 1px solid;
	}
	#header #mainMenu ul li a {
		display:inline-block;
		text-align:center;
		padding:0 0.7em;
	}
	body.about		#header #mainMenu ul li.about a,
	body.service	#header #mainMenu ul li.service a,
	body.topics		#header #mainMenu ul li.topics a,
	body.disaster	#header #mainMenu ul li.disaster a,
	body.member		#header #mainMenu ul li.member a,
	body.insurance	#header #mainMenu ul li.insurance a,
	#header #mainMenu ul li a:hover {
		color:#4cae45;
	}
	#header #mainMenu ul li img {
		display:block;
		width:32px;
		margin:0 auto 0.5em;
	}
	#header #mainMenu ul li.about img {
		margin-bottom:0.9em;
	}
	#header #mainMenu ul li.topics {
		position:relative;
	}
	#header #mainMenu #subMenu {
		display:none;
		position:absolute;
		top:120%;
		left:-3em;
		border:#954f19 2px solid;
		background-color:#fff;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		z-index:1000;
	}
	#header #mainMenu #subMenu:before {
		content:"";
		display:block;
		width:0;
		height:0;
		position:absolute;
		top:-1em;
		left:50%;
		margin-left:-0.5em;
		border-left:0.5em solid transparent;
		border-right:0.5em solid transparent;
		border-bottom:1em solid #954f19;
	}
	#header #mainMenu #subMenu li {
		display:block!important;
		font-size:0.875em!important;
		line-height:1.2em;
		vertical-align:top;
		white-space:nowrap;
		border-left:#dbccc1 1px solid;
	}
	#header #mainMenu #subMenu li a {
		color:#5c272e;
		width:100%;
		box-sizing:border-box;
		text-align:left;
		padding:0.7em 2em;
		border-bottom:#954f19 1px solid;
		background:url(../images/mainframe/arrow_green.png) no-repeat 0.5em center / 16px 16px; 
	}
	#header #mainMenu #subMenu li:last-child a {
		border-bottom:none;
	}
	
	/* title
	---------------------------------------- */
	.tit01,
	.tit04 h2 {
		font-size:3.1em;
		line-height:1em;
		margin-bottom:1em;
	}
	.tit01 img {
		display:inline-block;
		width:1.5em;
		height:1.5em;
		margin-right:0.5em;
		margin-left:-2em;
		vertical-align:-0.35em;
	}
	.tit02 {
		font-size:1.7em;
		margin-bottom:0.6em;
	}
	.tit03 {
		font-size:1.7em;
		margin-bottom:1em;
	}
	.tit04 h2 {
		display:inline-block;
	}
	.tit04 h2 span {
		text-align:left;
	}
	.tit04 img {
		display:inline-block;
		width:4.6em;
		height:4.6em;
		margin-right:0.5em;
		margin-left:-2em;
		vertical-align:-0.2em;
	}
	
	/* button
	---------------------------------------- */
	.btn01 a,
	.btn02 a {
		width:360px;
		font-size:1.28em;
	}
	
	/* pageTop
	---------------------------------------- */
	#pageTop {
		width:77px;
	}
	
	/* footer
	---------------------------------------- */
	#footer {
		padding-top:8.5em;
		margin-top:-5em;
	}
	#footer h3 {
		width:45%;
		margin:0 auto 1em;
	}
	#footer #footerBtn {
		width:280px;
		margin:1em auto;
	}
	#footer #footerBottom {
		padding-top:7.8em;
		background-image:url(../images/mainframe/footer_tex.png), url(../images/mainframe/footer_tex02.png);
		background-position:center top, left bottom;
		background-repeat:no-repeat, repeat-x;
		background-size:contain, contain;
	}
	#footer #footerMenu  {
		text-align:center;
		color:#fff;
	}
	#footer #footerBottom p a {
		color:#fff;
		text-decoration:none;
	}
	#footer #copy {
		line-height:3.3em;
	}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 860px){
	
	/* 全般
	---------------------------------------- */
	body {
		overflow-y:scroll;
		font-size:87.5%;
	}
}