@charset "utf-8";

/* topMain */
.topMain .topImg { z-index: 100; }
.topMain .topImg img { width: 100%; vertical-align: bottom; }

/* topBanner */
.topBanner { text-align:center; padding: 30px 0 50px;}
.topBanner1 { text-align:center; padding: 0; background: #59493f; }
.topBanner1 img { vertical-align: bottom; }

/* update */
.topUpdate  {padding:50px 0;}
.topUpdate .topicsLeft {float:left;clear:both;width: 30%;}
.topUpdate .topicsLeft h3 {text-align:center;padding:0;}
.topUpdate .topicsRight {float: right; width:66%; margin-bottom:30px;padding:0;font-size:13px;line-height:1.3;height: 250px; overflow-y: scroll; }
.topicsRight .info {width:95%;border-bottom:1px solid #e5e5e5; clear: both;}
.topicsRight .info .date {float:left;margin:0 40px 0 0;padding:10px 0; color: #486a00; }
.topicsRight .info .text {margin:0;padding:5px 0;overflow:hidden;line-height:1.8;}

/* point */
.point { padding: 0;}
.point .wrap { background: url(../img/top/photo01.jpg) no-repeat right bottom;}
.point ul { margin-bottom: 50px; }
.point h3 { font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;color: #005982; font-size: 34px; font-weight: normal; line-height: 1.5; margin-bottom: 20px; }
.point p { font-size: 16px; letter-spacing: 1px; line-height: 1.5; padding-bottom: 50px; }

/* case */
.case { padding: 50px 0 100px; background: #eef5f5; }
.case h3 { margin-bottom: 10px; }
.case p.btn { margin-bottom: 2px; }
.case p.btn1 { margin-bottom: 10px; }
.case p.text { line-height: 1.3; font-size: 15px; margin-bottom: 20px; }
.caseLeft{ width: 25%; float: left; }
.caseRight{ width: 75%; float: right; }
.caseRight .example { width: 239px; height: 230px; float: left; margin-left: 18px; position: relative; }
.case .example .square { position: relative; left: 20px; z-index: 10; }
.case .example .circle { position: relative; top: -65px; z-index: 100; }
.case .example p.name { display: block; font-size: 14px; line-height: 1.3; text-align: right;position: relative; top: -110px; right: 25px; }
.case p.jisseki { margin: 50px 0 0 280px; line-height: 1.8; }

/* Q&A */
.qa { padding: 50px 0; background: #fbfaef; }
.qaLeft{ width: 25%; float: left; }
.qaRight{ width: 75%; float: right; }
.qa p.btn { margin-bottom: 2px; }
.qa p.btn1 { margin-bottom: 10px; }
.qaArea { float: right; background: #fff; border-radius: 20px; padding: 30px; }
.qaArea dl { line-height: 1.8; border-bottom: 1px solid #000; margin-bottom: 20px; overflow: hidden; }
.qaArea dt { font-size: 18px; font-weight: bold; padding-top: 10px; margin-bottom: 20px; }
.qaArea dd { font-size: 14px; padding-top: 10px; margin-bottom: 20px; overflow: hidden; }
.qaArea img { float: left; margin-right: 10px; }

/* possession */
.possession { margin: 0 0 20px; padding: 0; color: #fff; }
.possession .window { width: 1600px; margin: 0 auto; height: 650px; background: url(../img/top/possession.png) no-repeat; position: relative; }
.possession h3 {font-size: 30px;position: absolute;top: 250px;left: 601px;}
.possession p {font-size: 14px;line-height: 1.8;position: absolute;top: 301px;left: 501px; }

/* access */
.access { padding: 40px 0; background: url(../img/top/acc_bg.jpg) no-repeat; background-size: cover; }
.mapArea { padding: 10px; background: rgba(255,255,255,0.7); }
.mapAreaLeft { width: 67%; float: left; }
.mapAreaLeft iframe { width: 100%; height: 380px; margin-bottom: 20px; }
.mapAreaRight { width: 32%; float: right; height: 380px; }
.mapAreaRight img { float: right; }
.mapArea .left { width: 45%; float: left; }
.mapArea .right { width: 50%; float: left; margin-left: 5%;}
.mapArea address { font-size: 13px; font-style: normal; line-height: 1.8; }
.mapArea p { font-size: 13px; line-height: 1.8; }







@media screen and (max-width: 667px){
	
	/* topMain */
	.topMain {padding:0;}
	.topMain .topImg {width:100%;float:none;}
	
	/* topBanner */
	.topBanner { padding: 0; }
	
	/*topics info*/
	.topUpdate {padding:0 10px;}
	.topUpdate .topicsLeft {float:none;width:100%;height:auto;}
	.topUpdate .topicsLeft h3 {padding:0; z-index: 10;}
	.topUpdate .topicsRight {float:none;width:66%;font-size:12px;margin:0 auto;padding:0;height:250px; position: relative; top: -30px; z-index: 100; overflow: scroll; }
	.topicsRight .info {width:100%;}
	
	/* point */
	.point { padding: 50px 10px; }
	.point h3 { font-size: 20px;margin-bottom:10px; letter-spacing: 0; }
	.point .wrap { background: none; }
	
	/* case */
	.case { padding: 50px 10px; }
	.case .caseRight .example { width: 30%; margin-left: 2%; }
	.case p.jisseki { clear: both; margin: 50px 0 0 0; }
	.case .caseRight .example p.name { font-size: 13px; top: -50px; right: 0;}
	
	/* Q&A */
	.qa { padding: 50px 10px; }
	
	/* possession */
	.possession .window { padding: 20px; width: 100%; height: 404px; background:url(../img/sp/possession.png); background-size: 667px 404px; }	
	.possession { padding: 10px 10px 40px; margin: 0; height: auto; }
	.possession h3 { position: relative; top: 100px; left: 25% }
	.possession p { font-size: 13px; line-height: 1.5; position: relative; top: 150px; left: 5%; }
	

	.topUpdate .topicsLeft h3	{
		text-align: left;
	}
	.topUpdate .topicsLeft h3 img	{
		width:70%;
	}
	
	.topUpdate .topicsRight	{
		width:100%;
	}
	
	
}


@media screen and (max-width: 375px){
	
	/* case */
	.case .caseLeft { width: 100%; float: none;}
	.case .caseRight { width: 100%; float: none;}
	.case .caseRight .example { width: 48%; margin-left: 0; }
	.case .caseRight .example:nth-of-type(2n) { margin-left: 4%; }
	.case .caseRight .example:nth-of-type(2n+1) { clear: both; }	
	.case p.name { font-size: 13px; top: -50px; right: 0px; }
	
	/* Q&A */
	.qaLeft{ width: 100%; float: none; }
	.qaRight{ width: 100%; float: none; }
	.qaArea { float: none; padding: 10px; }
	.qaArea dl {}
	.qaArea dt { font-size: 16px; }
	.qaArea dd { font-size: 13px; }	
	
	/* possession */
	.possession .window { height: 224px; background-size: 375px 224px; }
	.possession h3 { font-size: 20px; top: 0; left: 0; }
	.possession p { font-size: 11px; top: 10px; left: 0; }
	
	/* access */
	.access { padding: 40px 10px; background: url(../img/sp/access.png) no-repeat; background-size: cover; }
	.mapAreaLeft { width: 100%; float: none; }
	.mapAreaLeft iframe { width: 100%; height: 250px; margin-bottom: 20px; }
	.mapAreaRight { width: 100%; float: none; }
	.mapAreaRight img { float: none;margin-bottom: 20px; }
	.mapArea .left { display: none;}
	.mapArea .right { width: 100%; float: none; margin-left: 0;}
	.mapArea address { padding-bottom: 20px; }
	.mapArea p { padding-bottom: 20px; }	


	.point p { font-size: 12px; letter-spacing: 0px; line-height: 1.5; padding-bottom: 50px; }

}