@charset "UTF-8";
/* CSS Document */

/*******
 COMMON
*******/
body{
	text-align: center;
	margin: auto;
	width: 100%;
	font-size: 0px;
	height: 100%;
	
	background: url("../images/bg.png");
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
img {
	vertical-align:bottom;
}
@media screen and (min-width:787px){
	.display_tb,
	.display_sp{
		display: none!important;
	}
	.logo_tb{
		display: none!important;
	}
}
@media screen and (max-width:786px){
	.logo_pc{
		display: none!important;
	}
	.display_pc,
	.display_sp{
		display: none!important;
	}
}
@media screen and (max-width:600px){
	.display_tb,
	.display_pc{
		display: none!important;
	}
	.display_sp{
		display: block!important;
	}
}

@media screen and (min-width:601px){
	.sp{
		display: none !important;
		}
}
@media screen and (max-width:600px){
	.pc,
	.nbo_header{
		display: none !important;
	}
}
.mb0{
	margin-bottom: 0px!important;
}
.mb30{
	margin-bottom: 30px!important;
}
.mb50{
	margin-bottom: 50px!important;
}
.mb70{
	margin-bottom: 70px!important;
}
sup{
	font-size: 70%!important;
}


/*******
header
*******/
header{
	position: relative;
	width: 1366px;
	max-width: calc(100% - 0px);
	margin: auto;
	border-bottom: 5px solid #c1c1c1;
	
	opacity: 0;
	animation-name: h1_op;
	animation-duration: 1s;
	
	top: -50px;

	animation-fill-mode:forwards;
	animation-delay: 0.5s;
}

header h1{
	text-align: center;
	position: relative;
	

}

@keyframes h1_op{
    0% {
		opacity: 0;
		top: -50px;

	}
    100% {
		opacity: 1;
		top: 0px;

    }
}

header h1 img{
	max-width: calc(100% - 0px);
}
header .notice{
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 17px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	color: #ffffff;
	
  text-shadow:1px 1px 0 #555555, -1px -1px 0 #555555,
              -1px 1px 0 #555555, 1px -1px 0 #555555,
              0px 1px 0 #555555,  0-1px 0 #555555,
              -1px 0 0 #555555, 1px 0 0 #555555;
}
@media screen and (max-width:600px){
	header .notice{
		top: 20px;
   	 	left: 20px;
		right: auto;
		color: #ffffff;
		font-size: 12px;
	}
}


/*******
nav
*******/

nav{
	width: 1366px;
	margin: auto;
	display: flex;
	justify-content: space-between;

	max-width: 100%;
}
@media screen and (max-width:600px){
	nav{
		display: block;
	}
}

.number1,
.number2,
.number3,
.number4,
.number5{
	position: relative;
	opacity: 0;
	animation-name: nav_01;
	animation-duration: 1s;
	animation-delay: 1.2s;
	
	bottom: -50px;

	animation-fill-mode:forwards;
	animation-delay: 0.5s;
}

@keyframes nav_01{
    0% {
		opacity: 0;
		bottom: -50px;

	}
    100% {
		opacity: 1;
		bottom: 0px;

    }
}

.number2{
	animation-delay: 1.2s;
}

.number3{
	animation-delay: 1.4s;
}

.number4{
	animation-delay: 1.6s;
}

.number5{
	animation-delay: 1.8s;
}



.btn_wr{
	transition-duration: 0.3s;
	width:25%;
}
@media screen and (max-width:600px){
	.btn_wr{
		width:100%;
	}
}

.btn_wr:hover{
	opacity: 0.5;
}


nav a{
	display: block;
	/*
	width: 25%;*/
	padding: 20px;
	text-decoration: none!important;
	box-sizing: border-box;
	transition-duration: 0.3s;
}
@media screen and (max-width:900px){
	nav a{
		padding: 10px;
	}
}
@media screen and (max-width:600px){
	nav a{
		width: 100%;
	}
}


nav a:hover{
	opacity: 0.5;
}
nav a .inner{
	background: url("../images/navarrow.png")no-repeat left top;

	padding: 5px 0 0px 20px;
	height: 100%;
}
@media screen and (max-width:1366px){
	nav a .inner{
		background: url("../images/navarrow_sp.jpg")no-repeat left center;
	}
}


nav a .ty1,
nav .comingsoon .ty1{
	font-size: 11px;
	line-height: 1em;
	color: #1c4832;
	display: inline-block;
	background-color: #ffffff;
	padding: 6px 8px 3px 8px;
	border-radius: 5px;
	font-weight: bold;
	float: left;
	margin-right: 10px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	
}
nav a .ty2,
nav .comingsoon .ty2{
	font-size: 13px;
	line-height: 1em;
	color: #ffffff;
	float: left;
	margin-top: 4px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	word-break: break-all;
	
}
nav a .ty3,
nav .comingsoon .ty3{
	margin-top: 6px;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;	
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:900px){
	nav a .ty3,
	nav .comingsoon .ty3{
		font-size: 14px;
	}
}

nav .comingsoon .ty3{
	opacity: 0.5;
}
@media screen and (max-width:1366px){
	nav a .ty3 br{
		display: none;
	}
}




nav .comingsoon .inner{
	background: url("../images/navarrow.png")no-repeat left top;
	padding: 5px 0 0px 20px;
	height: 100%;
}
@media screen and (max-width:1366px){
	nav .comingsoon .inner{
		background: url("../images/navarrow_sp.jpg")no-repeat left center;
	}
}
nav .comingsoon{
	display: block;
	width: 25%;
	padding: 20px;
	text-decoration: none!important;
	box-sizing: border-box;
}
@media screen and (max-width:900px){
	nav .comingsoon{
		padding: 10px;
	}
}
@media screen and (max-width:600px){
	nav .comingsoon{
		width: 100%;
	}
}




nav a:nth-child(odd){
	background-color: #1c4832;
}
nav a:nth-child(even){
	background-color: #315945;
}
.colorbg1{
	background-color: #1c4832!important;
	height: 100%
}
.colorbg2{
	background-color: #315945!important;
	height: 100%
}
.colorbg3{
	height: 100%
}

nav .comingsoon:nth-child(odd){
	background-color: #1c4832;
}
nav .comingsoon:nth-child(even){
	background-color: #315945;
}


nav a .inner{
	
}

/*******
content
*******/
.content{
	background: url("../images/content_bg.png")repeat-y top center;
	padding: 40px 0 0 0;
}
@media screen and (max-width:600px){
	.content{
		padding: 20px 0 0 0;
	}
}

.content .inner{
	width: 900px;
	margin: auto;
	padding-bottom: 60px;
	max-width: calc(100% - 40px);
}

.content .lead{
	
}
.content .lead p{
	font-size: 17px;
	line-height: 2em;
	margin-bottom: 30px;
	font-weight: bold;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:600px){
	.content .lead p{
		font-size: 15px;
	}
}


.content h2{
	background: url("../images/h2border.png"),url("../images/h2border.png");
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	padding: 20px 0 20px 0;
	
	font-size: 30px;
	text-align: center;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	color: #1c4832;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 45px;
}
@media screen and (max-width:786px){
	.content h2{
		font-size: 26px;
	}
}
@media screen and (max-width:600px){
	.content h2{
		font-size: 22px;
		margin-bottom: 25px;
	}
}



.content .txtbox{
	
}
.content .txtbox .ty1{
	float: left;
	background-color: #ffffff;

	line-height: 2em;
}
.content .txtbox .ty1.name1{
	font-weight: bold;
	color: #506d98;
	font-size: 17px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:600px){
	.content .txtbox .ty1.name1{
		font-size: 15px;
	}	
}
.content .txtbox .ty1.name2{
	color: #112740;
	font-weight: bold;
	font-size: 17px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:600px){
	.content .txtbox .ty1.name2{
		font-size: 15px;
	}
}


.content .txtbox .box.color1{
	border-left: 17px solid #f2eff9;
}
.content .txtbox .box.color2{
	border-left: 17px solid #eff1f1;
}

.content .txtbox .box p{
	color: #333333;
	font-size: 17px;
	line-height: 2em;
	margin-bottom: 30px;
	padding-left: 45px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:600px){
	.content .txtbox .box p{
		font-size: 15px;
		padding-left: 25px;
	}
}

.content .img_right{
	float: right;
	margin: 5px 0 40px 40px;
}
@media screen and (max-width:786px){
	.content .img_right{
		width: 200px;
		margin: 5px 0 20px 20px;
	}
	.content .img_right img{
		max-width: 100%;
	}
}
@media screen and (max-width:600px){
	.content .img_right{
		width: 150px;
	}
}

.content .img_right figcaption{
	font-size: 13px;
	text-align: left;
	margin-top: 10px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.content .img_left{
	float: left;
	margin: 5px 40px 20px -17px;
}
@media screen and (max-width:786px){
	.content .img_left{
		width: 200px;
		margin: 5px 20px 20px -17px;
	}
	.content .img_left img{
		max-width: 100%;
	}
}
@media screen and (max-width:600px){
	.content .img_left{
		width: 150px;
	}
}


.content .img_left figcaption{
	font-size: 13px;
	text-align: left;
	margin-top: 10px;
	margin-left: 55px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
@media screen and (max-width:600px){
	.content .img_left figcaption{
		margin-left: 45px;
	}
}

figcaption .name1{
	color: #506d98!important;
	font-weight: bold;
}
figcaption .name2{
	color: #112740!important;
	font-weight: bold;
}
.content .txtbox .img_center{
	margin-left: -17px;
	margin-bottom: 30px;
}
.content .img_center.typ2 img{
	max-width: 100%;
}
.content .txtbox .img_center img{
	max-width: 100%;
}
.content .txtbox .img_center.typ2{
	margin-left: 33px;
	margin-bottom: 30px;
}
.content .txtbox .img_center.typ2 img{
	max-width: 100%;
}
.content .txtbox .img_center2{
	margin-bottom: 30px;
	margin-left: 33px;
}
.content .txtbox .img_center2 img{
	max-width: 100%;
}

@media screen and (max-width:600px){
	.content .txtbox .img_center2{
		margin-left: 25px;
	}
}

.content .txtbox .img_center2 img{
	max-width: 100%;
}

.content .profbox{
	
}
.content .profbox .img{
	margin-bottom: 15px;
}
.content .profbox .img img{
	max-width: 100%;
}
.content .profbox .flex{
	display: flex;
	justify-content:space-between;
	
}
@media screen and (max-width:600px){
	.content .profbox .flex{
		display:block;
	}
}

.content .profbox .flex .box{
	width: 440px;
	max-width: 49%;
}
@media screen and (max-width:600px){
	.content .profbox .flex .box:first-child{
		margin-bottom: 20px;
	}
	.content .profbox .flex .box{
		max-width: 100%;
		width: 100%;
	}
}


.content .profbox .flex .box .ttl{
	font-size: 17px;
	line-height: 1em;
	padding: 12px 10px 10px 10px;
	border-bottom: 1px dotted #666666;
	margin-bottom: 10px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	
}
.content .profbox .flex .box .ttl.color1{
	background-color: #e7e8ea;
}
.content .profbox .flex .box .ttl.color2{
	background-color: #f2f0f8;
}
.content .profbox .flex .box .text{
	font-size: 13px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	color: #333333;
}

/*******
contact_box
*******/

.contact_box{
	border-top: 5px solid #d7d7d7;
	padding: 60px 0 50px 0;
	background-color: #ffffff;
	text-align: center;
}
.contact_box .ty1{
	font-size: 21px;
	text-align: center;
	color: #000000;
	margin-bottom:25px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	padding: 0 20px 0 20px;
	font-weight: bold;
}
@media screen and (max-width:786px){
	.contact_box .ty1{
		font-size: 18px;
	}
}
@media screen and (max-width:600px){
	.contact_box .ty1{
		font-size: 15px;
		line-height: 1.4em;
	}
}

.contact_box .btn{
	display: inline-block;
	background-color: #1c4832;
	font-size: 17px;
	text-align: center;
	margin: auto;
	padding: 10px 30px 10px 30px;
	border-radius: 30px;
	color: #ffffff;
	transition-duration: 0.3s;
}
@media screen and (max-width:786px){
	.contact_box .btn{
		font-size: 14px;
	}
}

.contact_box .btn:hover{
	opacity: 0.5;
}

.contact_box .btn{
}

.size_s{
	font-size: 13px!important;
}

.img_center2 .size_s{
	padding-left: 0px!important;
}