@charset "utf-8";

/*pageTtl*/
.pageTtl{
	background-image: url(../imgs/img-mv.jpg);
}

/*------------
area
------------*/
.area {
}
.area .clmBox.clm2pa{
	margin-top: 60px;
}
.area .area-name{
	font-size: 43px;
	letter-spacing: 0.4em;
}
.area .area-name .en{
	font-size: 15px;
	letter-spacing: 0.2em;
	margin-left: 13px;
}
.area .area-ttl{
	font-size: 18px;
	margin-top: 10px;
}
.area .textsmall{
	margin-top: 20px;
}
.area .clm .text{
	text-align: left;
	margin-top: 20px;
}
.area .area-ph{
	margin-top: 30px;
}
.area .area-ph.ph2clm .clm{
	width:47.82608695652174%;
}
.area .area-ph.ph2clm .clm:nth-child(n+2){
	width:50%;
}
.area .area-ph.ph3clm .clm:first-child{
	width: 56.52173913043478%;	
}
.area .area-ph.ph3clm .clm:nth-child(2){
	width:41.30434782608695%;
}
.area .area-ph .clm:nth-child(n+2){
	margin-left: 2.1739130434782608%;
}
.area .area-ph ul li:nth-child(n+2){
	margin-top: 10px;
}
@media only screen and (max-width:736px) {
	.area .scrollBox{
		position: relative;
	}
	.area .scrollBox:before{
		content: '〈';
		font-size: 25px;
		background: rgba(0,0,0,.7);
		padding-right: 12px;
		padding-left: 3px;
		position: absolute;
		left:5px;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		z-index: 2;
	}
	.area .scrollBox:after{
		content: '〉';
		font-size: 25px;
		background: rgba(0,0,0,.7);
		padding-left: 15px;
		position: absolute;
		right:5px;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		z-index: 2;
	}
	.area .image{
		position: relative;
		overflow-x:scroll;
	}
	.area .image .scroll{
		width:800px;
	}
	.area .area-name{
		font-size: 28px;
	}
	.area .area-name .en{
		font-size: 13px;
	}
	.area .area-ttl{
		font-size: 16px;
	}
	.area .clm .text{
		font-size: 12px;
	}
	.area .area-ph,
	.area .area-ph ul{
		display: -webkit-flex; /* Safari */
		display: flex;
		-webkit-justify-content: center; /* Safari */
		justify-content: center;
		-webkit-flex-wrap: wrap; /* Safari */
		flex-wrap: wrap;	
	}
	.area .area-ph.clmBox .clm:nth-child(n+2){
		margin-top: 0;
	}
	.area .area-ph.clmBox.ph3clm .clm{
		width:100%;
	}
	.area .area-ph.clmBox.ph3clm .clm:nth-child(n+2){
		margin-left: 0;
		margin-top: 10px;
	}
	.area .area-ph ul li{
		width:49%;
	}
	.area .area-ph ul li:nth-child(n+2){
		margin-top: 0;
		margin-left: 2%;
	}
}

/*------------
fujisawa
------------*/
.fujisawa .headline.headline-04{
	margin-top: 70px;
}
.pa2Box .clm:nth-child(n+2){
	margin-left:2px;
}
@media only screen and (max-width:736px) {
	.pa2Box .clm:nth-child(n+2){
		margin-left:0;
	}
}

/*------------
lank
------------*/
.lank{
	background: #073350;
	padding: 90px 0;
}
.lankBox{
	border:solid 2px #d8bd27;
	background: #fff;
	color:#333333;
	-webkit-align-items: center; /* Safari */
	align-items: center;
}
.lankBox:nth-child(n+2){
	margin-top: 30px;
}
.lankBox-ph{
	width: 31%;
}
.lankBox-ph img{
	opacity: 0;
}
.lankBox:nth-child(2) .lankBox-ph{
	background: url(../imgs/img-lank01.jpg) no-repeat center;
	background-size:cover;
}
.lankBox:nth-child(3) .lankBox-ph{
	background: url(../imgs/img-lank02.jpg) no-repeat center;
	background-size:cover;
}
.lankBox:nth-child(4) .lankBox-ph{
	background: url(../imgs/img-lank03.jpg) no-repeat center;
	background-size:cover;
}
.lankBox:nth-child(5) .lankBox-ph{
	background: url(../imgs/img-lank04.jpg) no-repeat center;
	background-size:cover;
}
.lankBox-txt{
	width: 69%;
	padding:10px 40px;
	box-sizing: border-box;
}
.lankBox-ttl{
	font-size: 22px;
	line-height: 36px;
	margin-bottom: 20px;

	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-align-items: flex-end; /* Safari */
	align-items: flex-end;
}
.lankBox-ttl dt{
	line-height: 1.4;
	white-space: nowrap;
}
.lankBox-ttl dt small{
	font-size:18px;
}
.lankBox-ttl dd{
	font-size: 36px;
	font-weight:300;
	margin-left: 6px;
	letter-spacing: 0.05em;
}
.lankBox-ttl dd b{
	font-size: 62px;
	font-family: 'Crimson Text', serif;
	font-weight: 600;
	font-style: italic;
	color:#a40000;
	padding: 0 5px;
}
.lankBox-txt .text{
	text-align: left;
	margin-top: 20px;
}
.lankBox-txt .lank-table{
	margin: 15px 0;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content: flex-start;	
	-webkit-align-items: flex-end; /* Safari */
	align-items: flex-end;
}
.lankBox-txt .lank-table table{
	border:solid 1px #cccccc;
	line-height: 1;
	margin-right: 20px;
	font-size:13px;
}
.lankBox-txt .lank-table table th{
	background: #666666;
	color:#fff;
	padding: 5px 16px;
	text-align: center;
	font-weight: 300;
}
.lankBox-txt .lank-table table td{
	padding: 5px 16px;
	text-align: center;

}
.lankBox-txt .lank-table table td.color{
	background: #ececec;
}
.lankBox-txt .lank-table table td.red{
	color: #a40000;
	font-weight: 700;
}
.lankBox-txt .lank-table .cap{
	color:#666666;
}

@media only screen and (max-width:736px) {
	.lankBox-ph{
		width: 100%;
		height:200px;
	}
	.lankBox:nth-child(2) .lankBox-ph{
		background: url(../imgs/img-lank01.jpg) no-repeat center 20%;
		background-size:100%;
	}
	.lankBox-txt{
		width: 100%;
		padding:30px 20px;
	}
	.lankBox-ttl{
		display: block;
		font-size: 18px;
		line-height: 1;
	}	
	.lankBox-ttl dt{
		white-space: normal;
	}
	.lankBox-ttl dt small{
		font-size:16px;
	}
	.lankBox-ttl dd{
		font-size: 30px;
		font-weight:300;
		margin-left: 6px;
	}
	.lankBox-ttl dd b{
		font-size: 50px;
	}
	.lankBox-txt .lank-table table{
		width: 100%;
		font-size: 10px;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.lankBox-txt .lank-table table th,
	.lankBox-txt .lank-table table td{
		padding:5px;
	}
}

/*------------
charmBox
------------*/
.charm{
	background: #073350;	
	padding-bottom: 120px;
}
.charmBox .charmBox-ph{

}
.charmBox .charmBox-ttl{
	font-size:18px;
	margin: 20px 0;
	line-height: 1.5;
}
.charmBox .text{
	text-align: left;
	margin-top: 20px;
}
.charmBox:nth-child(n+2){
	margin-top: 50px;
}
@media only screen and (max-width:736px) {

}

/*------------
lifeinfo
------------*/

.ChangeElem_Panel{
  display: none;
}
.ChangeElem_Btn_Content{
	display: -webkit-flex; /* Safari */
	display: flex;
}
.ChangeElem_Btn{
	width: 19.6%;
}
.ChangeElem_Btn:nth-child(n+2){
	margin-left: 0.5%;
}

/*ChangeElem_Btn_Content*/
.ChangeElem_Btn_Content button{
	height: 40px;
	color:#fff;
	font-size: 13px;
	letter-spacing: 0.25em;
	line-height: 1;
	padding:8px 0;
	outline: none;
	position: relative;
	transition: .4s;
}
.ChangeElem_Btn_Content button i{
	font-size: 40px;
	position: absolute;
	left: -10px;
	top: 0;
}
.ChangeElem_Btn_Content button:hover,
.ChangeElem_Btn_Content button.is-active{
	height: 45px;
}
.ChangeElem_Btn_Content button:nth-child(1){
	background: #4c5a74;
	border:solid 1px #b69ca4;
}
.ChangeElem_Btn_Content button:hover:nth-child(1),
.ChangeElem_Btn_Content button.is-active:nth-child(1){
	background: #b07184;
	border:none;
}
.ChangeElem_Btn_Content button:nth-child(2){
	background: #3c557d;
	border:solid 1px #aa97b2;
}
.ChangeElem_Btn_Content button:hover:nth-child(2),
.ChangeElem_Btn_Content button.is-active:nth-child(2){
	background: #896399;
	border:none;
}
.ChangeElem_Btn_Content button:nth-child(3){
	background: #2f6886;
	border:solid 1px #9cb0bd;
}
.ChangeElem_Btn_Content button:hover:nth-child(3),
.ChangeElem_Btn_Content button.is-active:nth-child(3){
	background: #6794b1;
	border:none;
}
.ChangeElem_Btn_Content button:nth-child(4){
	background: #2f6a67;
	border:solid 1px #aabba9;
}
.ChangeElem_Btn_Content button:hover:nth-child(4),
.ChangeElem_Btn_Content button.is-active:nth-child(4){
	background: #689963;
	border:none;
}
.ChangeElem_Btn_Content button:nth-child(5){
	background: #57756e;
	border:solid 1px #b8b79b;
}
.ChangeElem_Btn_Content button:hover:nth-child(5),
.ChangeElem_Btn_Content button.is-active:nth-child(5){
	background: #999863;
	border:none;
}
@media only screen and (max-width:736px) {
	.ChangeElem_Btn_Content{
		flex-wrap: wrap;
		-webkit-flex-wrap:wrap;
		margin-bottom: 10px;
	}
	.ChangeElem_Btn{
		width: 49.5%;
	}
	.ChangeElem_Btn:nth-child(n+2){
		margin-left: 0;
	}
	.ChangeElem_Btn:nth-child(n+3){
		margin-top: 5px;
	}
	.ChangeElem_Btn:nth-child(even){
		margin-left: 1%;
	}
	.ChangeElem_Btn_Content button{
		font-size: 10px;		
	}
	.ChangeElem_Btn_Content button.is-active{
		height: 40px;
	}
}
/*ChangeElem_Panel*/
.ChangeElem_Panel{
	padding:50px 0 0;
}
.ChangeElem_Panel:nth-child(1){
	border-top:solid 3px #b07184;
}
.ChangeElem_Panel:nth-child(2){
	border-top:solid 3px #896399;
}
.ChangeElem_Panel:nth-child(3){
	border-top:solid 3px #6794b1;
}
.ChangeElem_Panel:nth-child(4){
	border-top:solid 3px #689963;
}
.ChangeElem_Panel:nth-child(5){
	border-top:solid 3px #999863;
}
@media only screen and (max-width:736px) {
	.ChangeElem_Panel{
		padding:0;
		border:none !important;
	}

}

/*lifeinfo-map*/
.lifeinfo-map{
	width:65.5%;
}
.lifeinfo-map iframe{
	height: 740px;
}
/*lifeinfo-info*/
.lifeinfo-info{
	width: 31.5%;
	margin-left: 3%;
}
.lifeinfo-info .lifeinfo-ttl{
	font-size: 16px;
	line-height: 1;
	border-left: solid 6px #fff;
	padding-left: 15px;
	margin-bottom: 30px;
}
.lifeinfo-info dl{
	font-size:13px;
}
.lifeinfo-info dl dd{
	margin-left: 2em;
}
.ChangeElem_Panel .num{
	width: 1.4em;
    height: 1.4em;
    display: inline-block;
	color:#fff;
	border-radius: 50%;
    text-align: center;
    letter-spacing: -0.1em;
    padding-right: 0.1em;
    line-height: 1.4em;
    margin-right: 5px;
    font-family: 'Cinzel', serif;
}
.ChangeElem_Panel:nth-child(1) .num{
	background: #b07184;
}
.ChangeElem_Panel:nth-child(2) .num{
	background: #896399;
}
.ChangeElem_Panel:nth-child(3) .num{
	background: #6794b1;
}
.ChangeElem_Panel:nth-child(4) .num{
	background: #689963;
}
.ChangeElem_Panel:nth-child(5) .num{
	background: #999863;
}

@media only screen and (max-width:736px) {
	.lifeinfo-info .lifeinfo-ttl{
		font-size: 14px;
	}
	.lifeinfo-info dl{
		font-size:10px;
	}
	/*lifeinfo-map*/
	.lifeinfo-map{
		width:100%;
		height: 400px;
		box-sizing: border-box;
	}
	.lifeinfo-map iframe{
		height: 100%;
		height: 100%;
	}
	.ChangeElem_Panel:nth-child(1) .lifeinfo-map{
		border:solid 3px #b07184;
	}
	.ChangeElem_Panel:nth-child(2) .lifeinfo-map{
		border:solid 3px #896399;
	}
	.ChangeElem_Panel:nth-child(3) .lifeinfo-map{
		border:solid 3px #6794b1;
	}
	.ChangeElem_Panel:nth-child(4) .lifeinfo-map{
		border:solid 3px #689963;
	}
	.ChangeElem_Panel:nth-child(5) .lifeinfo-map{
		border:solid 3px #999863;
	}
	/*lifeinfo-info*/
	.lifeinfo-info{
		width: 100%;
		margin-left: 0;
		margin-top: 30px;
	}

}