@charset "utf-8";
/* CSS Document */

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, 
b, i, dl, dt, dd, ol, ul, li, 
footer, header {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ul,ol { list-style-type: none;}
p { margin: 0;} 
img { border: 0; vertical-align: bottom;}

/* common
---------------------------------------- */
body {
	background: #fdf6eb;
}
.media_contents {
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", Helvetica, "游ゴシック", YuGothic, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Verdana;
	line-height: 2em;
	font-size: 16px;	
	background: #fff;
	width: 720px;
	margin: 30px auto;
}
.media_contents a { color: #333; text-decoration: underline; font-weight: bold; }
.media_contents a:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; text-decoration: none;}

.media_contents h2 {
	background: #681e15;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	height: 60px;
	line-height: 60px;
	text-indent: 90px;
	position: relative;
}
.media_contents h2:before { font-family: "Material Icons"; content: "\ef42"; font-size: 30px; position: absolute; top: 0px; left: 50px; font-weight: normal; text-indent: 0;}
.media_contents .media { padding: 30px 50px 30px 80px; border-bottom: 1px dotted #ccc; position: relative;}
.media_contents .media:before { font-family: "Material Icons"; content: "\e1c4"; font-size: 24px; position: absolute; top: 28px; left: 50px;}
.media_contents .media:last-child { border-bottom: none;}
.media ul { padding: 10px 0;}
.media li { padding-left: 25px; text-indent: -25px;}
.media li:before { font-family: "Material Icons"; content: "\e037"; margin-right: 5px;}


@media screen and (max-width:767px) {
.media_contents h2 {
	text-indent: 60px;
}
.media_contents h2:before { left: 20px;}
.media_contents {
	width: 100%;
	margin: 0 auto 20px;
}
.media_contents .media { padding: 30px 30px 30px 50px;}
.media_contents .media:before { font-family: "Material Icons"; content: "\e1c4"; font-size: 24px; position: absolute; top: 28px; left: 20px;}	
}

/* FOOTER
---------------------*/
#footer { 
	width: 100%; 
	background: #fff; 
	padding: 30px 0 5px;
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 14px;
	color: #000;
}
.footerCnt {
    max-width: 920px;
    margin: 0 auto;
	overflow: hidden;
}
.footerLink {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
} 
.footerLink ul {
	position: relative;
	left: 50%;
	float: left;
}
.footerLink ul li {
	position: relative;
	left: -50%;
	float: left;
}
.footerLink ul li a {
	display: block;
	border-right: 1px solid #000;
	padding: 0 10px;
	line-height: 1em;
	text-align: center;
}
.footerLink ul li:first-child a { border-left: 1px solid #000;}
.footerLink p { clear: both; text-align: center; padding: 10px 0 0;}
.footerBtm { overflow: hidden; position: relative;}
.footerBtm img { width: 100%;}
.footerBtm .logo { width: 254px; float: left;}
.footerBtm .jadma { width: 156px; position: absolute; right: 0; bottom: 5px;}
.footerBtm .copyright { font-size: 12px; text-align: center; position: absolute; bottom: 5px; left: 0; width: 920px;}

#footer a { color:#000; text-decoration: underline;}
#footer a:hover { color:#b84500; text-decoration: none;}

@media screen and (max-width:767px) {
.footerCnt {
    width: 100%;
}
.footerLink {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	font-size: clamp(8px, 3.2vw, 14px);
} 
.footerLink ul { width: 80%; margin: 0 auto;}
.footerLink ul li { width: 50%; margin: 10px 0;}
.footerLink ul li:first-child { width: 100%;}
.footerLink ul li:nth-child(2) a, .footerLink ul li:nth-child(4) a { border-left: 1px solid #000;}	
.footerBtm .logo { width: 60%; float: none; margin: 0 auto 20px; text-align: center;}
.footerBtm .jadma { width: 60%; position: relative; margin: 0 auto; text-align: center;}
.footerBtm .copyright { font-size: 10px; text-align: center; position:relative; width: 100%;}
}