@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/






/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
	
	
	/*--------------------------------------
	 
	 対談ページ共通
	 
	----------------------------------------*/
	main{
		overflow: hidden;
		padding-bottom: 140px;
		position: relative;
		padding-top: 80px;
		z-index: 3;
	}
		.dec{
			position: absolute;
		}
			#theme02 .dec{
				background: url("../img/line_mg.png") no-repeat top center / cover;
				height: 164px;
				width: 164px;
				top: -110px;
				right: 1040px;
				z-index: 1;
			}
	
	.bg{
		background: url("../../common/img/bg_b.jpg") no-repeat top center / cover;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}
	.line_bg{
		background: url("../../common/img/linebg_b.png") no-repeat top center / cover;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 2;
	}
	
	
	.talk .wrap{
		position: relative;
		z-index: 5;
	}
	section{
		position: relative;
	}
	article{
		position: relative;
	}
	
	/* タイトル */
	
	.titArea{
		margin-bottom: 80px;
	}
		.titArea .wrap{
			padding-top: 80px;
		}
			.titArea .field{
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 10px;
			}
			.titArea h1{
				font-size: 32px;
				font-weight: bold;
				margin-bottom: 35px;
				font-feature-settings: "palt";
			}
				.titArea h1 span{
					display: inline-block;
					background-color: #fff;
					padding: 0 5px;
					margin-bottom: 10px;
				}
			.titArea .lead{
				line-height: 2.3;
			}
	
	/* トップ */
	#mainArea{
		position: relative;
	}
		#mainArea .imgArea{
			width: 100%;
			position: relative;
			z-index: 1;
		}
		#mainArea .imgArea img{
				width: 100%;
			}
			#profArea{
				position: relative;
				margin-top: -120px;
				z-index: 1;
			}
				#profArea .wrap{
					background-color: rgba( 255, 255, 255, 0.95);
					border: 1px solid #67aaf0;
					box-sizing: border-box;
					padding: 50px 60px;
				}
	#profArea .tit{
		width: 103px;
		margin: 0 auto 50px;
	}
	#profArea .member{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
		#profArea .member:after{
			display: none;
		}
			#profArea .member.three li{
				width: 33%;
			}
			#profArea .member.two li{
				width: 50%;
			}
			#profArea .member li{
				width: 25%;
			}
				#profArea .member li + li{
				}
					#profArea .member li .img_box{
						width: 181px;
						margin: 0 auto 20px;
					}
						#profArea .member li .img_box img{
							display: block;
							margin: 0 auto;
						}
						
					#profArea .member li .prof{
						text-align: center;
					}

						#profArea .member li .catch{
							font-weight: bold;
							font-size: 18px;
							margin-bottom: 20px;
						}
	
						#profArea .member li .catch span{
							font-size: 14px;
							line-height: 1.5;
							display: block;
							margin-bottom: 10px;
							color: #67aaf0;
						}
						#childcare #profArea .member li .catch{
							text-align: left;
						}
						#profArea .member li .name{
							font-size: 18px;
							font-weight: bold;
						}
	
	.content{
		margin-top: 120px;
		position: relative;
	}
		.content h2{
			background: url("../../common/img/theme_bg.jpg") no-repeat top center / cover;
			background: -moz-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			background: -webkit-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			background: linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			width: 810px;
			padding: 50px 0 210px calc( 50vw - 520px );
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			font-weight: bold;
			font-size: 30px;
			color: #fff;
			box-shadow: 20px 20px 20px rgba( 117, 169, 172, 0.5);
		}
			.content h2 img{
				display: block;
				width: 101px;
				margin-right: 40px;
			}
	
	.content .txt_box{
		background-color: rgba( 255, 255, 255, 0.85);
		box-sizing: border-box;
		padding: 60px;
		margin-top: -160px;
		position: relative;
	}
	.content .txt_box .catch{
		position: relative;
		font-size: 22px;
		font-weight: bold;
		color: #67aaf0;
		margin-bottom: 60px;
		padding-left: 60px;
		font-feature-settings: "palt";
    	letter-spacing: 0.1em;
	}
	.content .txt_box .catch::after{
		content: '';
		display: block;
		position: absolute;
		width: 40px;
		height: 1px;
		background-color: #67aaf0;
		background: -moz-linear-gradient( right, #67aaf0, #b3d4f8); 
		background: -webkit-linear-gradient( right, #67aaf0, #b3d4f8); 
		background: linear-gradient( right, #67aaf0, #b3d4f8); 
		left: 0;
		top: 0.8em;
	}
		.content .txt_box .talk{

		}
			.content .txt_box .talk li{
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}
				.content .txt_box .talk li + li{
					padding-top: 20px;
					margin-top: 20px;
					position: relative;
				}
					.content .txt_box .talk li + li:after{
						content: '';
						display: block;
						position: absolute;
						height: 1px;
						width: 100%;
						background: url("../../common/img/dot.png") repeat-x center left/ 8px 1px;
						top: 0;
						left: 0;
					}
						.content .txt_box .talk li > dl{
							width: 61px;
							margin-right: 39px;
							text-align: center;
						}
							.content .txt_box .talk li > dl > dt img{
								display: block;
							}
							.content .txt_box .talk li > dl > dd{
								font-weight: bold;
							}
						.content .txt_box .talk li > p{
							width: 810px;
						}
						.content .txt_box .width300{
							width: 300px!important;
							display: block;
						}
						.content .txt_box .width420{
							width: 420px!important;
							display: block;
						}
		.content .img{
			width: 500px;
			position: absolute;
			right: 60px;
			top: -150px;
		}
			#childcare .content .img{
				width: 360px;
			}
	
	#btmimg{
		margin-bottom: 60px;
	}
		#btmimg .img_box{
			width: 100%;
		}
			#btmimg .img_box img{
				width: 100%;
			}
		#btmimg .cap{
			text-align: right;
			margin-top: 10px;
		}
		#btmimg .txt_box{
			font-weight: bold;
			background-color: rgba( 103, 170, 240, 0.95);
			color: #fff;
		}
			#btmimg .txt_box dt{
				text-align: center;
				font-size: 22px;
				margin-bottom: 30px;
			}
	
	
	#schedule{
		position: relative;
		margin-bottom: 60px;
	}
	#schedule .wrap  > dl{
		width: 314px;
		margin-right: 49px;
		float: left;
	}
	#schedule .wrap  > dl:last-of-type{
		margin-right: 0;
	}
	#schedule .wrap  > dl > dt{
		font-weight: bold;
		font-size: 18px;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-bottom: 20px;
		line-height: 1.5;
		color: #67aaf0;
	}
	#schedule .wrap  > dl > dt .icon{
		width: 61px;
		margin-right: 10px;
	}
	#schedule .wrap table{
		table-layout: fixed;
		border-collapse: collapse;
	}
	#schedule .wrap table th{
		width: 23%;
		text-align: left;
		vertical-align: top;	
	}
	#schedule .wrap table th,
	#schedule .wrap table td{
		padding: 10px 0 10px;
		border-bottom: 1px solid #67aaf0;
	}
	#schedule .wrap table tr:last-of-type th,
	#schedule .wrap table tr:last-of-type td{
		border-bottom: none;
	}
	
	
	#pagenav{
		margin: 140px auto 220px;
		position: relative;
		height: 90px;
	}
	
	#pagenav .wrap{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 1000px;
		height: 100%;
	}
	#pagenav .wrap a{
		display: block;
		position: relative;
	}
		#pagenav a.index{
			width: 48px;
			height: 72px;
			transition: .4s;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 6;
			display: block;
		}
			#pagenav a.index img{
				display: block;
			}
		#pagenav .wrap a.prev,
		#pagenav .wrap a.next{
			width: 435px;
			height: 90px;
			font-weight: bold;
			color: #fff;
		}	
	
	#pagenav .wrap a dl{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		background: url("../img/nav_bg.png") no-repeat center/ cover;
		padding: 0 20px;
	}
	#pagenav .wrap a.next dl{
		padding-right: 30px;
	}
	#pagenav .wrap a.prev dl{
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		padding-left: 30px;
	}
			#pagenav .wrap a dl dt{
				width: 330px;				
				box-sizing: border-box;
				height: 90px;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				position: relative;
			}
			#pagenav .wrap a.prev dl dt{
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end;
			}
			#pagenav .wrap a dl dd{
				width: 39px;
			}
				#pagenav .wrap a dl dd img{
					display: block;
				}
	#pagenav .wrap a .arrow{
		display: block;
		position: absolute;
		width: 100%;
		height: 90px;
		left: 0;
		top: -2px;
	}
		#pagenav .wrap a.next .arrow{
			left: auto;
			right: 0;
		}
			#pagenav .wrap a .arrow.wh{
				z-index: 1;
				overflow: hidden;
			}
			#pagenav .wrap a .arrow.cl{
				z-index: 0;
			}
				#pagenav .wrap a .arrow:after{
					content: "";
					width: 30px;
					height: 5px;
					display: block;
					-webkit-transform: skew(-45deg);
					transform: skew(-45deg);
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					left: -10px;
					transition: .4s;
				}
					#pagenav .wrap a.prev:hover .arrow:after{
						left: -20px;
					}
					#pagenav a.index:hover{
						-webkit-transform: scale(1.05);
						transform: scale(1.05);
					}
					#pagenav .wrap a.next:hover .arrow:after{
						right: -20px;
					}
					#pagenav .wrap a .arrow.wh:after{
						border-bottom: 1px solid #fff;
						border-left:  1px solid #fff;
						
					}
					#pagenav .wrap a .arrow.cl:after{
						border-bottom: 1px solid #8297ed;
						border-left:  1px solid #8297ed;
					}
				#pagenav .wrap a.next .arrow:after{
					-webkit-transform: skew(45deg);
					transform: skew(45deg);
					left: auto;
					right: -10px;
					border-left: none;
				}
					#pagenav .wrap a.next .arrow.wh:after{
						
						border-bottom: 1px solid #fff;
						border-right:  1px solid #fff;
					}
					#pagenav .wrap a.next .arrow.cl:after{
						border-bottom: 1px solid #8297ed;
						border-right:  1px solid #8297ed;
					}
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
		/*--------------------------------------
	 
	 対談ページ共通
	 
	----------------------------------------*/
	main{
		overflow: hidden;
		padding-bottom: 140px;
		position: relative;
		z-index: 3;
	}
		.dec{
			position: absolute;
		}
			
	.bg{
		background: url("../../common/img/bg_b_sp.jpg") no-repeat top center / cover;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}
	.line_bg{
		display: none;
	}
	
	
	
	.talk .wrap{
		position: relative;
		z-index: 4;
	}
	section{
		position: relative;
	}
	article{
		position: relative;
	}
	
	/* タイトル */
	
	.titArea{
		margin-bottom: 40px;
	}
		.titArea .wrap{
			padding-top: 40px;
		}
			.titArea .field{
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 5px;
			}
			.titArea h1{
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 20px;
				font-feature-settings: "palt";
			}
				.titArea h1 span{
					display: inline-block;
					background-color: #fff;
					padding: 0 5px;
					margin-bottom: 10px;
				}
			.titArea .lead{
			}
	
	/* トップ */
	#mainArea{
		position: relative;
	}
		#mainArea #imgArea{
			width: 100%;
			position: relative;
			z-index: 1;
		}
			#profArea{
				position: relative;
				margin-top: -20px;
			}
				#profArea .wrap > dl{
					background-color: rgba( 255, 255, 255, 0.95);
					border: 1px solid #67aaf0;
					box-sizing: border-box;
					padding: 20px;
				}
	#profArea .tit{
		width: 103px;
		margin: 0 auto 20px;
	}
	#profArea .member{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
  		flex-wrap: wrap;
	}
	#profArea .member.two{
			display:block;
		}
		#profArea .member:after{
			display: none;
		}
			#profArea .member li{
				width: 48%;
				margin-bottom: 40px;
			}
				#profArea .member.two li,
				#profArea .member.three li{
					width: 100%;
				}
				#profArea .member li + li{
				}
					#profArea .member li .img_box{
						width: 90%;
						margin: 0 auto 10px;
					}
						#profArea .member.three li .img_box {
							width: 50%;
							margin: 0 auto 20px;
						}
						#profArea .member.two li .img_box {
							width: 50%;
							margin: 0 auto 20px;
						}
						#profArea .member li .img_box img{
							display: block;
							margin: 0 auto;
						}
					#profArea .member li .prof{
						text-align: center;
					}

						#profArea .member li .catch{
							font-weight: bold;
							font-size: 18px;
							margin-bottom: 10px;
							font-feature-settings: "palt";						
						}
						#profArea .member li .catch span{
							font-size: 14px;
							line-height: 1.5;
							display: block;
							margin-bottom: 5px;
							color: #67aaf0;
						}
						#childcare #profArea .member li .catch{
							text-align: left;
						}
						#profArea .member li .name{
							font-size: 16px;
							font-weight: bold;
						}
						#profArea .member li dd{
							font-size: 12px;
						}
	
	.content{
		margin-top: 40px;
		position: relative;
	}
		.content h2{
			background: url("../../common/img/theme_bg.jpg") no-repeat top center / cover;
			background: -moz-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			background: -webkit-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			background: linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
			width: 90vw;
			padding: 5% 5% 100px 5%;
			box-sizing: border-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			font-weight: bold;
			font-size: 20px;
			color: #fff;
			box-shadow: 20px 20px 20px rgba( 117, 169, 172, 0.5);
		}
			.content h2 img{
				display: block;
				width: 28%;
				margin-right: 20px;
			}
	
	.content .txt_box{
		background-color: rgba( 255, 255, 255, 0.85);
		box-sizing: border-box;
		padding: 20px;
		margin-top: -80px;
		position: relative;
	}
	.content .txt_box .catch{
		position: relative;
		font-size: 16px;
		font-weight: bold;
		color: #67aaf0;
		margin-bottom: 30px;
		padding-left: 30px;
		font-feature-settings: "palt";
    	letter-spacing: 0.1em;
	}
	.content .txt_box .catch::after{
		content: '';
		display: block;
		position: absolute;
		width: 20px;
		height: 1px;
		background-color: #67aaf0;
		background: -moz-linear-gradient( right, #67aaf0, #b3d4f8); 
		background: -webkit-linear-gradient( right, #67aaf0, #b3d4f8); 
		background: linear-gradient( right, #67aaf0, #b3d4f8); 
		left: 0;
		top: 0.8em;
	}
		.content .txt_box .talk{
			padding-bottom: 56vw;
		}
		#childcare .content .txt_box .talk{
			padding-bottom: 142vw;
		}
			.content .txt_box .talk li{
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
			}
				.content .txt_box .talk li + li{
					padding-top: 20px;
					margin-top: 20px;
					position: relative;
				}
					.content .txt_box .talk li + li:after{
						content: '';
						display: block;
						position: absolute;
						height: 1px;
						width: 100%;
						background: url("../../common/img/dot.png") repeat-x center left/ 8px 1px;
						top: 0;
						left: 0;
					}
						.content .txt_box .talk li > dl{
							width: 20%;
							margin-right: 10px;
							text-align: center;
						}
							.content .txt_box .talk li > dl > dt img{
								display: block;
							}
							.content .txt_box .talk li > dl > dd{
								font-weight: bold;
							}
						.content .txt_box .talk li > p{
							width: calc( 80% - 10px);
						}
						.content .txt_box .talk li .width300{
						}
		.content .img{
			position: absolute;
			bottom: 0;
			width: 100vw;
			left: -5%;
		}
	
	#btmimg{
	}
	#btmimg .wrap{
		padding: 0 0 42.67vw 0;
	}
	#btmimg .img_box{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#btmimg .txt_box{
		font-weight: bold;
		background-color: rgba( 103, 170, 240, 0.95);
		color: #fff;
		margin-top: 0;
	}
	#btmimg .txt_box dt{
		text-align: center;
		font-size: 18px;
		margin-bottom: 10px;
		line-height: 1.5;
	}
	
	#btmimg .cap{
		text-indent: -1em;
		padding-left: 1em;
		margin-top: 10px;
	}
	
	#schedule{
		position: relative;
	}
		#schedule .wrap  > dl{
			margin-bottom: 40px;
		}
		#schedule .wrap  > dl:last-of-type{
			margin-bottom: 0;
		}
		#schedule .wrap  > dl > dt{
			font-weight: bold;
			font-size: 18px;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin-bottom: 10px;
			line-height: 1.5;
			color: #67aaf0;
		}
		#schedule .wrap  > dl > dt .icon{
			width: 61px;
			margin-right: 10px;
		}
		#schedule .wrap table{
			table-layout: fixed;
			border-collapse: collapse;
		}
		#schedule .wrap table th{
			width: 5em;
			text-align: left;
			vertical-align: top;	
		}
		#schedule .wrap table th,
		#schedule .wrap table td{
			padding: 10px 0 10px;
			border-bottom: 1px solid #67aaf0;
		}
		#schedule .wrap table tr:last-of-type th,
		#schedule .wrap table tr:last-of-type td{
			border-bottom: none;
		}
	
	
	#pagenav{
		padding: 60px 0 60px;
		position: relative;
	}
	
	#pagenav .wrap{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
  		flex-wrap: wrap;
	}
	#pagenav .wrap a{
		display: block;
		position: relative;
		font-size: 12px;
		font-feature-settings: "palt";
	}
		#pagenav a.index{
			width: 10%;
			display: block;
			margin: 20px auto 0;
		}
		#pagenav .wrap a.prev,
		#pagenav .wrap a.next{
			font-weight: bold;
			color: #fff;
			width: 48%;
			
		}	
	#pagenav .wrap a dl{
		padding: 30px 10px 10px;
		background: url("../img/nav_bg.png") no-repeat center/ cover;
	}
		#pagenav .wrap a.prev dl{
			padding-left: 15px;
		}
		#pagenav .wrap a.next dl{
			padding-right: 20px;
		}

			#pagenav .wrap a dl dt{				
				box-sizing: border-box;
				letter-spacing: 0;
			}
			#pagenav .wrap a.prev dl dt{
			}
				
			#pagenav .wrap a dl dd{
				position: absolute;
				top: 15px;
				left: 20px;
				width: 39px;
			}
				#pagenav .wrap a dl dd img{
					display: block;
				}
				#pagenav .wrap a.next dl dd{
					left: 10px;
				}
	#pagenav .wrap a .arrow{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		
	}
		#pagenav .wrap a.next .arrow{
			left: auto;
			right: 0;
		}
			#pagenav .wrap a .arrow.wh{
				z-index: 1;
				overflow: hidden;
			}
			#pagenav .wrap a .arrow.cl{
				z-index: 0;
			}
				#pagenav .wrap a .arrow:after{
					content: "";
					width: 20px;
					height: 5px;
					display: block;
					-webkit-transform: skew(-45deg);
					transform: skew(-45deg);
					position: absolute;
					top: 0;
					bottom: 0;
					margin: auto;
					left: -10px;
					transition: .4s;
				}
					#pagenav .wrap a.prev:hover .arrow:after{
						left: -20px;
					}
					#pagenav .wrap a.index:hover{
						-webkit-transform: scale(1.2,1.2);
						transform: scale(1.2,1.2);
					}
					#pagenav .wrap a.next:hover .arrow:after{
						right: -20px;
					}
					#pagenav .wrap a .arrow.wh:after{
						border-bottom: 1px solid #fff;
						border-left:  1px solid #fff;
						
					}
					#pagenav .wrap a .arrow.cl:after{
						border-bottom: 1px solid #8297ed;
						border-left:  1px solid #8297ed;
					}
				#pagenav .wrap a.next .arrow:after{
					-webkit-transform: skew(45deg);
					transform: skew(45deg);
					left: auto;
					right: -10px;
					border-left: none;
				}
					#pagenav .wrap a.next .arrow.wh:after{
						
						border-bottom: 1px solid #fff;
						border-right:  1px solid #fff;
					}
					#pagenav .wrap a.next .arrow.cl:after{
						border-bottom: 1px solid #8297ed;
						border-right:  1px solid #8297ed;
					}
	

}