@charset "UTF-8";
/* CSS Information
ガーディナルスマート用 layout.css

//memo
追加ページなどはここに記述
どのページに使用しているかコメント記述すること

2016.10
---------------------------------------------------------- */
/*==================================

index page

====================================*/

/*============================
   768px以上(タブレット・PC) 
==============================*/
@media screen and (min-width: 768px) {	

/*-------------
   aside nav
---------------*/
.sub-nav {
	position: absolute;
	left: 10%;/*2017.01.10 right→left*/
	bottom: 10px;
}

.sub-nav li {
	/*float: left;　2017.01.10 削除*/
	margin-bottom: 10px;/*2017.01.10 margin-left→margin-bottom*/
}

/*-------------
   first view
---------------*/
.section-first {
	position: relative;
	height: 100vh;
	top: 0;
}

.first-ttl-box {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding: 8% 150px 0 10%;
	background: url(../images/bg_gradation.png) repeat-y top right;
}

.ico-scroll {
	position: absolute;
	bottom: 65px;
	left: 50%;
	right: 0;
	z-index: 10;
}

.bnr-movie {
	position: absolute;
	left: 10%;
	bottom: 15%;/*2017.01.10 5%→15%*/
	z-index: 10;
}

/*slide*/
#slide > ul {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	position: relative;
}
	#slide > ul li {
		position:absolute;
		left:0;
		bottom:0;
		display: block;
		width:100%;
		height: 100vh;
		text-indent: -9999px;
		overflow: hidden;
	}
		
	#slide > ul li:nth-child(1) {
		background: url(../images/img_mv01.jpg) center center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(2) {
		background: url(../images/img_mv02.jpg) center center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(3) {
		background: url(../images/img_mv03.jpg) center center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(4) {
		background: url(../images/img_mv04.jpg) center center no-repeat; -moz-background-size: cover; background-size: cover;
	}
 
/*--------
   point
----------*/
.section-point {
	background-image: url(../images/bg_point_house.png), url(../images/bg_slanting01.png), url(../images/bg_sky.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, right bottom, 0 0;
	background-size: auto, auto, cover;
	position: relative;
	height: 820px;
}

	.point-ttl {
		position: absolute;
		top: 100px;
		left: 10%;
	}

	.point-box {
		width: 380px;
		height: 650px;
		background: rgba(255,255,255,0.8);
		-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		position: absolute;
		top: 130px;
		right: 15%;
		text-align: center;
		padding-left: 20px;
	}
	
		.point-box-inner01,
		.point-box-inner02 {
			background: url(../images/ico_arrow04.png) no-repeat 210px bottom;
			padding-bottom: 50px;
		}
		
		.point-box-inner01 {
			margin-top: 50px;
		}
		
		.point-box-inner02 {
			margin-top: 30px;
		}
		
		.point-box-inner03 {
			margin-top: 30px;
			position: relative;
			z-index: 0;
		}
		
		.point-box-inner03::after {
			content: url(../images/ico_point03_bg.png);
			position: absolute;
			top: -65px;
			left: -80px;
			z-index: -1;
		}
		
		.ttl-point {
			float: left;
		}
	
		.txt-point {
			float: left;
		}
		
/*--------
   movie
----------*/
.section-movie {
	background: #DBE3E7;
	padding: 40px 0 80px;
}

	.movie-box {
		background: #FFF;
		width: 1020px;
		height: 600px;
		margin: auto;
		padding: 35px;
	}
	
		.movie-box-inner {
			width: 676px;
			margin: auto;
		}
		
			.movie-box-inner li {
				float: left;
			}
			
			.movie-box-inner li:nth-child(1n+1) {
				margin-bottom: 35px;
			}
			
			.movie-box-inner li:nth-child(odd) {
				margin-right: 35px;
			}

/*--------
   voice
----------*/
.section-voice {
	background: url(../images/bg_slanting02.png) no-repeat 0 0 #fff;
	padding: 80px 0 80px;
}

	.voice-box-wrap {
		width: 1080px;
		margin: auto;
	}
	
		.voice-box {
			margin-bottom: 50px;
		}
		
		/*first*/
		.voice-img {
			float: left;
			position: relative;
			width: 450px;
			height: 350px;
			background: #F1D2C5;
		}
		
		.voice-img img {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 10;
			width: 450px;
			height: 350px;
		}
		
		.voice-caption {
			position: absolute;
			left: 10px;
			bottom: -20px;
		}
		
		.voice-txt {
			float: left;
			width: 590px;
			margin-left: 40px;
		}
		
		.more-voice {
			text-align: right;
		}
	
	.content-voice {
		width: 680px;
		margin: auto;
	}
		
		/*left*/
		.voice-img-l {
			float: left;
			position: relative;
			width: 300px;
			height: 238px;
			background: #F1D2C5;
		}
		
		.voice-img-l img {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 10;
			width: 300px;
			height: 238px;
		}
		
		.voice-caption-l {
			position: absolute;
			left: 10px;
			bottom: -20px;
		}
		
		
		.voice-caption-l.nigyou {
			position: absolute;
			left: 10px;
			bottom: -54px;
			line-height: 1.4;
		}
		
		
		.voice-txt-l {
			float: left;
			width: 340px;
			margin-left: 30px;
		}
		
		/*right*/
		.voice-img-r {
			float: right;
			position: relative;
			left: 20px;
			width: 300px;
			height: 238px;
			background: #BDCCD4;
		}
		
		.voice-img-r img {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
			width: 300px;
			height: 238px;
		}
		
		.voice-caption-r {
			position: absolute;
			left: 0;
			bottom: -30px;
		}
		
		.voice-txt-r {
			float: left;
			width: 360px;
			margin-right: 20px;
		}
		
		/*center01*/
		.voice-img-c {
			position: relative;
			width: 680px;
			height: 400px;
			background: #F0E781;
			padding-bottom: 50px;
		}
		
		.voice-img-c img {
			width: 680px;
			height: 400px;
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
		}
		
		.voice-caption-c {
			position: absolute;
			left: -10px;
			bottom: -30px;
		}
		
		.voice-txt-c {
		}
		
		/*center02*/
		.voice-img-c02 {
			width: 680px;
			margin: auto;
		}
		
		.voice-img-c02 img {
			margin-top: 10px;
		}
		
		.voice-txt-c02 {
			margin: 10px auto 0 auto;
		}
		
			.ttl-voice {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 3.5rem;
				color: #B38B68;
				line-height: 1.7;
				letter-spacing: -0.1rem;
			}
		
			.ttl-voice-01 {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 2.8rem;
				color: #B38B68;
				line-height: 1.5;
				letter-spacing: -0.1rem;
			}
			
			.ttl-voice-02 {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 2.5rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				margin-top: 20px;
			}
			
			.ttl-voice-03 {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.9rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				margin-top: 20px;
			}
			
			.txt-voice {
				/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
				font-size: 1.6rem;
				line-height: 2.2;
			}
			
			.txt-voice-01 {
				/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
				font-size: 1.6rem;
				line-height: 2.2;
			}
	
	/*read more*/
	.voice-box-more {
		display: none;
	}

/*----------
   column
------------*/
.section-column {
	background: #DBE3E7;
	padding: 80px 0 80px;
}

	.column-box {
		background: #FFF;
		width: 1020px;
		margin: auto;
		padding: 35px;
	}
	
		.column-box-inner {
			width: 670px;
			margin: auto;
		}
		
			.column-box-inner li {
				width: 300px;
				float: left;
				position: relative;
			}
			
			.column-box-inner li:nth-child(1n+1) {
				margin-bottom: 35px;
			}
			
			.column-box-inner li:nth-child(odd) {
				margin-right: 70px;
			}
									
				/*new icon*/
				.ico-new {
					position: absolute;
					top: -30px;
					left: -30px;
					z-index: 10;
				}
				
				.column-time {
					text-align: right;
				}
				
				.column-figure img {
					-webkit-border-radius: 10px;  
					-moz-border-radius: 10px;
					border-radius: 10px;
				}
				
				.column-caption {
					margin-top: 5px;
				}


/*==================================

point page

====================================*/
.content-point-ttl {
	text-align: center;
	margin: 50px 0 0 -50%;
}

.contents-point {
	background-image: url(../images/bg_point_house.png), url(../images/bg_slanting01.png), url(../images/bg_sky.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, right bottom, 0 0;
	background-size: auto, auto, cover;
	background-attachment: fixed, fixed, fixed;
	height: 100%;
	padding: 80px 0 80px 0;
}

.content-point-box {
	width: 1080px;
	background: rgba(255,255,255,0.9);
	-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	margin: 40px auto;
	padding: 50px;
}

	.content-point-box-inner {
		width: 750px;
		margin: auto;
	}

		.content-ttl-point {
				margin: 0 auto 20px;
				display: inline-block;
			}
		
			.content-ttl-point h4,
			.content-ttl-point h4 + p {
				display: inline-block;
			}
			
			.content-ttl-point h4 + p {
				margin: 0 0 0 10px;
			}
		
		.content-point-txt {
			font-size: 1.8rem;
			line-height: 1.75;
		}
		
		.content-point-small {
			font-size: 1.2rem;
			line-height: 1.3;
		}
		
		
		/*center*/
		.content-point-img-c {
			margin-bottom: 20px;
		}		
		
		/*left*/
		.content-point-left {
		}
		
			.content-point-left .left-img {
				float: left;
			}
			
			.content-point-left .left-txt {
				width: 360px;
				float: right;
				margin-left: 30px;
			}
		
		.content-point-caption-l {
			text-align: left;
		}
		
		.content-point-caption-l small {
			font-size: 1.0rem;
		}
		
		/*right*/
		.content-point-right {
		}
		
			.content-point-right .right-img {
				float: right;
			}
			
			.content-point-right .right-txt {
				width: 360px;
				float: left;
				margin-right: 30px;
			}
		
		.content-point-caption-r {
			text-align: right;
		}
		
		.content-point-caption-r small,
		figcaption small{
			font-size: 1.0rem;
		}
		
		/*chart*/
		[class^=content-point-chart]  {
		}
		
			[class^=content-point-chart] .chart-img {
				float: left;
			}
			
			[class^=content-point-chart] .chart-txt {
				font-size: 1.8rem;
				font-weight: bold;
				color: #fff;
				line-height: 1.2;
				width: 514px;
				float: right;
				background: #70B3C6;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
				display: inline-block;
				position: relative;
				padding: 7px;
			}
			
			[class^=content-point-chart] .chart-txt::before {
				content: "";
				border: solid transparent;
				display: inline-block;
				position: absolute;
				border-width: 15px;
				border-right-color: #70B3C6;
				margin-top: -15px;
				left: -30px;
				top: 50%;			
			}
			
			.content-point-chart01,
			.content-point-chart02 {
				background: url(../images/ico_arrow04.png) no-repeat 95px 90%;
				padding-bottom: 50px;
			}
			
			[class^=content-point-chart] .chart-txt > p {
				float: left;
			}
			
			[class^=content-point-chart] .chart-txt-note {
				width: 300px;
				padding: 20px 20px;
			}
			
			.content-point-chart02 .chart-txt-note {
				padding: 25px 20px;
			}
				
		[class^=content-point-chart] small {
			font-size: 1.2rem;
			font-weight: normal;
		}
			
			.ttl-point-01 {
				font-size: 2.8rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
			}
			
			.ttl-point-02 {
				font-size: 2.3rem;
				line-height: 1.7;
				letter-spacing: -0.1rem;
			}
						
			.bg-point-01 {
				background: #70B3C6;
				color: #FFF;
				font-size: 1.6rem;
				line-height: 1.5;
				padding: 15px;
			}
	      
	        .box1 {
				padding-left: 30px;
                padding-top: 5px;
                padding-bottom: 5px;
                margin: 1em 0;
                font-weight: bold;
                color: #FFFFFF;/*文字色*/
                background: #CC5252;
                border: solid 3px ;/*線*/
                border-radius: 10px;/*角の丸み*/
				margin-top:30px;
				width: 300px;
				float: left;
				margin-right: 30px;
                 }
	        .box2 {
				padding: 0.5em 1em;
                margin: 1em 0;
                font-weight: bold;
                color: #FFFFFF;/*文字色*/
                background: #00bfff;
                border: solid 3px ;/*線*/
                border-radius: 10px;/*角の丸み*/
				width: 74%;
                 }

/*==================================

movie page

====================================*/
.movie-wrapper {
	width: 100%;
	background: #BDCCD4;
}

.movie-bg {
	padding: 20px 0;
}

.movie-frame {
	text-align: center;
}

.movie-frame iframe {
	display: inline-block;
	border: solid 20px #FFF;
}

/*==================================

voice page

====================================*/
	.content-voice-box-wrap {
		width: 1080px;
		margin: 0 auto 150px;
	}	

/*==================================

column page

====================================*/
.content-column {
	background: #DBE3E7;
	padding: 140px 0 80px 0;
}

	.content-column-box {
		width: 1080px;
		background: #FFF;
		margin: auto;
		padding: 35px;
	}
	
		.content-column-box-inner {
			width: 670px;
			margin: auto;
			padding-bottom: 50px;
		}
		
		.content-column-box-inner p {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.6rem;
				line-height: 2.2;
			}
		
		.content-column-ttl01 {
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 2.8rem;
				color: #B38B68;
				line-height: 1.5;
				letter-spacing: -0.1rem;
		}
		
		.bg-column-01 {
			border: 2px dashed #70B3C6;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 15px;
		}
		
		.bg-column-01 p {
			font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
			font-size: 1.6rem;
			line-height: 1.5;
		}
		
		.column-caption-txt {
			line-height: 1.0 !important;
		}
		
		.column-caption-txt small {
			font-size: 1.0rem;
			line-height: 1.0;
		}
	.content-column-right .right-txt {
		float: left;
		width: 49%;
	}
	.content-column-right .right-img {
		float: right;
		width: 49%;
	}
	
	.content-column-left .left-txt {
		float: right;
		width: 49%;
	}
	.content-column-left .left-img {
		float: left;
		width: 49%;
	}
	
	.content-column-left02 .left-txt {
		float: right;
		width: 59%;
	}
	.content-column-left02 .left-img {
		float: left;
		width: 39%;
	}
	
	.table-style {
		width: 100%;
	}
	.table-style tr {
		border-bottom: 1px solid #fff;
	}
	.table-style th,
	.table-style td {
		padding: 10px;
		text-align: left;
		font-size: 1.3rem;
		line-height: 1.5;
	}
	.table-style th {
		background-color: #DBEEEC;
		font-weight: normal;
		width: 45%;
	}
	.table-style td {
		background-color: rgba(238,247,246,0.9);
	}

	.txt-column-indent {
		text-indent: -2.3em;
		padding-left: 2.3em;
}
	.content-2column {	
	}
	.content-2column .unit-column {
		float: left;
		width: calc((100% - 5%) / 2);
		margin-left: 5%;
	}
	.content-2column .unit-column:nth-child(2n+1) {
		margin-left: 0;
	}
	.content-2column .unit-column img {
		width: 100%;
	}
	.content-3column {
		width: 80%;
	}
	.content-3column .unit-column {
		float: left;
		width: calc((100% - 10%) / 3);
		margin-left: 5%;
	}
	.content-3column .unit-column:nth-child(3n+1) {
		margin-left: 0;
	}
	.content-3column .unit-column img {
		width: 100%;
	}
	
	.ico-blue {
		font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
		background-color: #3C5D8A;
		padding: 0.2em 0.3em;
		color: #ffffff;
	}
	.ico-red {
		font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
		background-color: #AB0F00;
		padding: 0.2em 0.3em;
		color: #ffffff;
	}
	.ico-green {
		font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
		background-color: #70B3C6;
		padding: 0.2em 0.3em;
		color: #ffffff;
	}
/*==================================

floating bnr

====================================*/


	.bnr-float {
		position: fixed;
		right: 20px;
		bottom: 20px;
		width: 200px;
		z-index: 999;
		box-shadow: 3px 3px 10px rgba(0,0,0,0.4);
	}
	.bg_bnr-float {
		background: rgba(255,255,255,1.0);
		border: 3px solid;
		padding: 10px 10px 0;
		position: relative;
	}
	.bnr-float-yellow {
		border-color: #fccf00;
	}
	.bnr-float-red {
		border-color: #e50012;
	}
	.bnr-float_box {
		background: url(../images/bnr_floating01.png) no-repeat center bottom -30px; 
		background-size: 160px;
		height: 120px;
		position: relative;
	}
	.bnr-float_txt {
		background: #fccf00;
		color: #e50012;
		padding: 12px 10px 10px 20px;
		text-align: center;
	}
	.bnr-float_txt span {
		font-weight: bold;
	}
	.bnr-float_img {
	}
	.bnr-float_img img {
		width: 30vw;
	}
	.btn-close {
		position: absolute;
		top: -16px;
		right: -16px;
		background: #e50012;
		border: 3px solid #fccf00;
		border-radius: 50%;
		width: 29px;
		height: 29px;
		padding: 3px 2px 2px 2px;
		cursor: pointer;
		text-align: center;
	}
		.btn-close img {
			width: 100%;
		}

}

/*==============================
   414px以下(大 縦iphone6+) 
================================*/
@media only screen and (max-width: 414px){
.bnr-movie {
	position: absolute;
	left: 0;
	bottom: 10%;
	z-index: 20;
	padding-left: 5%; 
	width: 140px;
}
 .box1 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #CC5252;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/

}
	
.box2 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #00bfff;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/
    width: 100%;
                 }		
}

/*=============================
   415px～738px(～横iphone6+) 
===============================*/
@media only screen and (min-width: 415px) and (max-width: 736px){
.bnr-movie {
	position: absolute;
	right: 10px;
	bottom: 10%;
	z-index: 20;
	width: 140px;
}
	
.box1 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #CC5252;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/
}
	
.box2 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #00bfff;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/
    width: 80%;
                 }	
}

/*============================
   767px以下(スマートフォン) 
==============================*/
@media screen and (max-width: 767px) {
/*-------------
   aside nav
---------------*/
.sub-nav {
	display: none;
}
	
.box1 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #CC5252;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/
}
	
.box2 {
	padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #FFFFFF;/*文字色*/
    background: #00bfff;
    border: solid 3px ;/*線*/
    border-radius: 10px;/*角の丸み*/
    width: 100%;
                 }		

/*-------------
   first view
---------------*/
.section-first {
	position: relative;
	height: 100vh;
	top: 0;
}

.first-ttl-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 100%;
	padding: 50px 5% 0 5%;
	background: rgba(255, 255, 255, 0.5);
}

.ico-scroll {
	position: absolute;
	bottom: 3%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	z-index: 10;
}

/*slide*/
#slide > ul {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	position: relative;
}
	#slide > ul li {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 100vh;
		text-indent: -9999px;
		overflow: hidden;
	}
		
	#slide > ul li:nth-child(1) {
		background: url(../images/img_mv01.jpg) 60% center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(2) {
		background: url(../images/img_mv02.jpg) center center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(3) {
		background: url(../images/img_mv03.jpg) 70% center no-repeat; -moz-background-size: cover; background-size: cover;
	}
	#slide > ul li:nth-child(4) {
		background: url(../images/img_mv04.jpg) 60% center no-repeat; -moz-background-size: cover; background-size: cover;
	}


/*--------
   point
----------*/
.section-point {
	background-image: url(../images/bg_point_house.png), url(../images/bg_slanting01.png), url(../images/bg_sky.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, right bottom, center top;
	background-size: 90% auto, 90% auto, auto 100%;
	position: relative;
	height: 850px;
	padding-top: 100px;
}

	.point-ttl {
		position: absolute;
		top: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 180px;
	}

	.point-box {
		width: 300px;
		height: 480px;
		background: rgba(255,255,255,0.8);
		-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
		position: absolute;
		top: 170px;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
	}
	
		.point-box-inner01,
		.point-box-inner02,
		.point-box-inner03 {
			margin: auto;
			width: 290px;
			margin-left: 10px;
		}
		
		.point-box-inner01,
		.point-box-inner02 {
			background: url(../images/ico_arrow04.png) no-repeat 170px bottom;
			padding-bottom: 25px;
		}
		
		.point-box-inner01 {
			margin-top: 25px;
		}
		
		.point-box-inner02 {
			margin-top: 15px;
		}
		
		.point-box-inner03 {
			margin-top: 15px;
			position: relative;
			z-index: 0;
		}
		
		.point-box-inner03::after {
			content: " ";
			width: 107px;
			height: 100px;
			background: url(../images/ico_point03_bg.png) no-repeat 0 0;
			background-size: contain;
			position: absolute;
			top: -35px;
			left: -20px;
			z-index: -1;
		}
		
		.ttl-point {
			float: left;
			width: 80px;
			margin-top: 10px;
		}
	
		.txt-point {
			float: left;
			width: 180px;
			margin-left: 10px;
		}
		
/*--------
   movie
----------*/
.section-movie {
	background: #DBE3E7;
	padding: 60px 5% 40px;
}

	.movie-ttl img {
		width: 180px;
	}

	.movie-box {
		background: #FFF;
		margin: auto;
		padding: 35px;
	}
	
		.movie-box-inner {
			max-width: 300px;
			margin: auto;
		}
		
			.movie-box-inner li:not(:last-child) {
				margin-bottom: 15px;
			}

/*--------
   voice
----------*/
.section-voice {
	background: url(../images/bg_slanting02.png) no-repeat 0 0 #fff;
	background-size: 80% auto;
	padding: 60px 5% 0;
}

	.voice-ttl img {
		width: 250px;
	}

	.voice-box-wrap {
		margin: auto;
	}
	
		.voice-box {
			position: relative;
		}
		
		/*first*/
		.voice-img {
			position: relative;
			top: 0;
			bottom: 0;
			left: -10px;
			right: 0;
			margin: 80px auto 0;
			width: 238px;
			height: 185px;
			background: #F1D2C5;
		}
		
		.voice-img img {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 10;
		}
		
		.voice-caption {
			position: absolute;
			left: 10px;
			bottom: -20px;
		}
		
		.voice-txt {
			margin: 40px auto 40px;
		}
		
		.more-voice {
			text-align: center;
		}
	
	.content-voice {
		margin: auto;
	}
		
		/*left*/
		.voice-img-l {
			position: relative;
			top: 0;
			bottom: 0;
			left: -10px;
			right: 0;
			margin: 20px auto 0;
			width: 238px;
			height: 185px;
			background: #F1D2C5;
		}
		
		.voice-img-l img {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 10;
		}
		
		.voice-caption-l {
			position: absolute;
			left: 10px;
			bottom: -20px;
		}
		
		.voice-caption-l.nigyou {
			position: absolute;
			left: 10px;
			bottom: -38px;
			line-height: 1.2;
		}
		
		.voice-txt-l {
			margin-top: 40px;
		}
		
		/*right*/
		.voice-img-r {
			position: relative;
			top: 0;
			bottom: 0;
			left: 0;
			right: -10px;
			margin: 20px auto 0;
			width: 238px;
			height: 185px;
			background: #BDCCD4;
		}
		
		.voice-img-r img {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
		}
		
		.voice-caption-r {
			position: absolute;
			left: 0;
			bottom: -30px;
		}
		
		.voice-txt-r {
			margin-top: 40px;
		}
		
		/*center01*/
		.voice-img-c {
			position: relative;
			top: 0;
			bottom: 0;
			left: 0;
			right: -10px;
			margin: auto;
			width: 288px;
			height: 172px;
			background: #F0E781;
			padding-bottom: 50px;
		}
		
		.voice-img-c img {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 10;
		}
		
		.voice-caption-c {
			position: absolute;
			left: -10px;
			bottom: -30px;
		}
		
		.voice-txt-c {
		}
		
		/*center02*/
		.voice-img-c02 {
			width: 100%;
			margin: auto;
		}
		
		.voice-img-c02 img {
			margin-top: 10px;
		}
		
		.voice-txt-c02 {
			margin: 10px auto 0 auto;
		}
		
			.ttl-voice {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.7rem;
				color: #B38B68;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				position: absolute;
				top: -80px;
				z-index: 10;
			}
			
			.ttl-voice.sangyou{
				top: -95px !important;
			}
		
			.ttl-voice-01 {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.7rem;
				color: #B38B68;
				line-height: 1.5;
				letter-spacing: -0.1rem;
			}
			
			.ttl-voice-02 {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.7rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				margin-top: 20px;
			}
			
			.ttl-voice-03 {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.6rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				margin-top: 20px;
			}
			
			[class^=voice-caption] {
				font-size: 1.4rem;
			}
			
			.txt-voice {
				font-size: 1.2rem;
				line-height: 1.8;
			}
			
			.txt-voice-01 {
				font-size: 1.2rem;
				line-height: 2.2;
			}
	
	/*read more*/
	.voice-box-more {
		display: none;
		margin-bottom: 40px;
	}

/*----------
   column
------------*/
.section-column {
	background: #DBE3E7;
	padding: 80px 5% 40px;
	position: relative;
}

	.column-ttl {
		height: 75px;
		position: absolute;
		top: 120px;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	
	.column-ttl img {
		max-width: 320px;
	}

	.column-box {
		background: #FFF;
		margin: auto;
		padding: 35px;
	}
	
		.column-box-inner {
			max-width: 300px;
			margin: 120px auto 0;
		}
		
			.column-box-inner li {
				position: relative;
			}
			
			.column-box-inner li {
				margin-bottom: 35px;
			}
			
			/*.column-box-inner li:last-child {
				margin-bottom: 75px;
			}*/
			
			.content-voice .voice-box-more {
			margin-bottom: 0;
		}

			/*記事が１つしかないとき*/
			.column-box-inner li:only-child {
				margin-bottom: 35px;
			}
												
				/*new icon*/
				.ico-new {
					width: 70px;
					position: absolute;
					top: -20px;
					left: -30px;
					z-index: 10;
				}
				
				.column-time {
					text-align: right;
				}
				
				.column-figure img {
					-webkit-border-radius: 10px;  
					-moz-border-radius: 10px;
					border-radius: 10px;
				}
				
				.column-caption {
					margin-top: 5px;
				}

.more-column {
	position: absolute;
	bottom: 75px;
	left: 0;
	right: 0;
	z-index: -0;
}


/*==================================

point page

====================================*/
.contents-point {
	background-image: url(../images/bg_point_house.png), url(../images/bg_slanting01.png), url(../images/bg_sky.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, right bottom, center top;
	background-size: 90% auto, 90% auto, auto 100%;
	background-attachment: fixed, fixed, fixed;
	height: 100%;
	padding: 80px 5% 80px 5%;
}

.content-point-ttl {
	margin: auto;
	width: 180px;
}

.content-point-box {
	background: rgba(255,255,255,0.9);
	-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	margin: 20px auto 40px;
	padding: 10px;
}

	.content-point-box-inner {
		margin: auto;
		max-width: 300px;
	}

		.content-ttl-point {
			margin: 20px auto 10px;
			display: inline-block;
		}
		
			.content-ttl-point h4,
			.content-ttl-point h4 + p {
				display: inline-block;
			}
			
			.content-ttl-point h4 {
				width: 60px;
			}
			
			.content-ttl-point h4 + p {
				margin: 0 0 0 10px;
				width: 180px;
			}
		
		/*center*/
		.content-point-img-c {
			margin-bottom: 10px;
		}
		
		.content-point-txt {
			font-size: 1.3rem;
			line-height: 1.75;
		}
		
		.content-point-small {
			font-size: 1.1rem;
			line-height: 1.2;
		}
		
		/*left*/
		.content-point-left {
		}
		
			.content-point-left .left-img {
				margin-bottom: 10px;
			}
			
			.content-point-left .left-txt {
				margin-top: 10px;
			}
		
		.content-point-caption-l {
			text-align: left;
		}
		
		.content-point-caption-l small {
			font-size: 0.9rem;
		}
		
		/*right*/
		.content-point-right {
		}
		
			.content-point-right .right-img {
				margin-bottom: 10px;
			}
			
			.content-point-right .right-txt {
				margin-top: 10px;
			}
		
		.content-point-caption-r {
			text-align: right;
		}
		
		.content-point-caption-r small {
			font-size: 0.9rem;
		}
			
		
		/*chart*/
		[class^=content-point-chart]  {
		}
		
			[class^=content-point-chart] .chart-img {
				margin-bottom: 20px;
			}
			
			[class^=content-point-chart] .chart-txt {
				font-size: 1.2rem;
				font-weight: bold;
				color: #fff;
				line-height: 1.2;
				background: #70B3C6;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
				display: inline-block;
				position: relative;
				padding: 10px;
				padding-right: none;
				width: 100%;
			}
			
			[class^=content-point-chart] .chart-txt::before {
				content: "";
				border: solid transparent;
				display: inline-block;
				position: absolute;
				border-width: 15px;
				border-bottom-color: #70B3C6;
				margin-left: -15px;
				left: 50%;
				top: -30px;			
			}
			
			.content-point-chart01,
			.content-point-chart02 {
				background: url(../images/ico_arrow04.png) no-repeat 50% 95%;
				padding-bottom: 50px;
			}
			
			[class^=content-point-chart] .chart-txt > p {
				float: left;
			}
			
			[class^=content-point-chart] .chart-txt > p:nth-child(2) {
				width: 130px;
				float: right;
			}
			
			[class^=content-point-chart] .chart-txt-note {
				width: 115px;
				padding-right: 10px;
			}
			
			.content-point-chart02 .chart-txt-note,
			.content-point-chart03 .chart-txt-note{
				padding: 10px 10px 0 0;
			}
				
			[class^=content-point-chart] small {
				font-size: 0.9rem;
				font-weight: normal;
			}
			
			.ttl-point-01 {
				font-size: 2.0rem;
				color: #3C5D8A;
				line-height: 1.7;
				letter-spacing: -0.1rem;
				text-align: center;
			}
			
			.bg-point-01 {
				background: #70B3C6;
				color: #FFF;
				font-size: 1.5rem;
				line-height: 1.5;
				/*-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;*/
				padding: 15px;
			}

/*==================================

movie page

====================================*/
.movie-body {
	background: #BDCCD4;
}

.movie-wrapper {
	width: 100%;
	background: #BDCCD4;
}

.movie-bg {
	padding: 20px 0;
}

.movie-frame {
	text-align: center;
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 62.878%;
}

	.movie-frame iframe {
		display: inline-block;
		border: solid 20px #FFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
/*==================================

voice page

====================================*/
	.content-voice-box-wrap {
		margin: auto;
	}

/*==================================

column page

====================================*/
.content-column {
	background: #DBE3E7;
	padding: 80px 5% 40px;
	position: relative;
}

	.content-column-box {
		background: #FFF;
		margin: auto;
		padding: 40px 5%;
	}
	
		.content-column-box-inner {
			margin: 20px auto 40px;
			padding: 80px 0 0;
			max-width: 300px;
		}
		
		.content-column-box-inner p {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 1.3rem;
				line-height: 1.7;
			}
			
		.content-column-ttl01 {
				font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
				font-size: 2.0rem;
				color: #B38B68;
				line-height: 1.7;
				letter-spacing: -0.1rem;
		}
		
		.bg-column-01 {
			border: 2px dashed #70B3C6;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			padding: 15px;
		}
		
		.bg-column-01 p {
			font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
			font-size: 1.3rem;
			line-height: 1.5;
		}
		
		.column-caption-txt {
			line-height: 1.0 !important;
		}
		
		.column-caption-txt small {
			font-size: 1.0rem;
			line-height: 1.0;
		}
	
	.table-style {
		width: 100%;
		margin-bottom: 15px;
	}
	.table-style tr {
		border-bottom: 1px solid #fff;
	}
	.table-style th,
	.table-style td {
		padding: 10px;
		text-align: left;
		font-size: 1.3rem;
		line-height: 1.5;
	}
	.table-style th {
		background-color: #DBEEEC;
		font-weight: normal;
		width: 45%;
	}
	.table-style td {
		background-color: rgba(238,247,246,0.9);
	}
	
	.txt-column-indent {
		text-indent: -2.5em;
		padding-left: 2.5em;
}
	.content-2column {	
	}
	.content-2column .unit-column {
		margin-bottom: 20px;
	}
	.content-3column {	
	}
	.content-3column .unit-column {
		margin-bottom: 20px;
	}
	
	.ico-blue {
		background-color: #3C5D8A;
		padding: 0 0.3em;
		color: #ffffff;
	}
	.ico-red {
		background-color: #AB0F00;
		padding: 0 0.3em;
		color: #ffffff;
	}
	.ico-green {
		background-color: #70B3C6;
		padding: 0 0.3em;
		color: #ffffff;
	}

/*==================================

floating bnr

====================================*/

	.bnr-float {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
	}
	.bg_bnr-float {
		background: rgba(255,255,255,0.90);
		border: 2px solid;
		padding: 10px 10px 0;
	}
	.bnr-float-yellow {
		border-color: #fccf00;
	}
	.bnr-float-red {
		border-color: #e50012;
	}
	.bnr-float_box {
		background: url(../images/bnr_floating01.png) no-repeat right 5px bottom -10px;
		background-size: auto 55px; 
		height: 46px;
		position: relative;
	}
	.bnr-float_txt {
		background: #fccf00;
		color: #fff;
		width: 64vw;
		padding: 12px 8px;
		text-align: center;
	}
	.bnr-float_txt span {
		font-size: 1.8rem;
	}
	.bnr-float_img {
	}
	.bnr-float_img img {
		width: 30vw;
	}
	.btn-close {
		position: absolute;
		top: -15px;
		right: 0;
		background: #e50012;
		border: 3px solid #fccf00;
		border-radius: 50%;
		width: 29px;
		height: 29px;
	}

}