@charset "utf-8";

html, body{
	width:100%;
	height:100%;
	font-family: 'Hiragino Kaku Gothic ProN',"Hiragino Sans",Meiryo,sans-serif;
	-webkit-font-smoothing: antialiased;
}
html{overflow-y: scroll;font-size: 625%;}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*ﾂ･*//*/
	height: auto;
	overflow: hidden;
	/**/
}

a:link {color: #000000;text-decoration: none;}
a:visited {color: #000000;text-decoration: none;}
a:hover, .btn:hover{color: #6e7ddc !important;cursor: pointer; text-decoration: none; transition: all .3s ease-out;}

.both{clear:both;}
.block{display: block;}
.nodisp{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 0;
}
.flexbox{
	position: relative;
	margin: 0 auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flexbetween{justify-content: space-between;}
.flexaround{justify-content: space-around;}
.flexend{justify-content: flex-end;}
.flexcenter{justify-content:center;}
.flexaligncenter{align-items: center;}
.flexbox .box{
	position: relative;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}
img{
	max-width: 100%;
	height: auto;
    display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

iframe[name="google_conversion_frame"] { position: absolute; top: 0; }


/* 共通パーツ */
body{
	position: relative;
	width: 100%;
	color: #000000;
	background-color: #ffffff;
	font-size: .13em;
	line-height: 1.8em;
	font-weight: 600; 
	font-feature-settings: "halt" 1;
	word-wrap: break-word;
}

section{
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
#wrap{position: relative;width: 100% !important; margin:0 auto; padding:0;overflow: hidden;opacity: 0; transition: all .3s ease-out;}
#wrap.disp{opacity: 1;}

.contetsWrap{
	position: relative;
	margin: 0 auto; 
	opacity: 0;
}
.contetsWrap.disp{animation: dispCont 1.2s ease 0s 1 forwards;}
@keyframes dispCont {
    0% {transform: translateY(40px);opacity: 0;}
    100% {transform: translateY(0);opacity: 1;}
}

/* bound */
@keyframes contTxtanimation{
	0%{
		transform: translate(0,12px);
		opacity: 0;
	}
	100% {
		transform: translate(0,0);
		opacity: 1;
	}
}
.textbound span{
	display: inline-block;
	white-space: pre;
	opacity: 0;
}

.catchSVG svg{width: 100% !important; height: auto !important;vertical-align: bottom;}
.catchSVG path {
    fill:transparent;
}
@keyframes textDisp {
  0% {fill:transparent;transform: translate(0,-50px);}
  50% {fill:transparent;}
  100% {fill:#ffffff;transform: translate(0,0);}
}
@keyframes textDispD {
  0% {fill:transparent;transform: translate(0,50px);}
  50% {fill:transparent;}
  100% {fill:#ffffff;transform: translate(0,0);}
}

.contentsInner{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}

h2{
	position: relative;
	border: solid 6px #1d2087;
	padding: 8px 13px;
	width: auto;
	display: inline-block;
	font-size: .13rem;
	min-width: 100px;
	text-align: center;
}

footer{
	position: relative;
	margin:  0 auto;
    padding:20px 0 0 0;
    text-align: center;
	background-color: #6e7ddc;
	color: #ffffff;
	font-size: .10rem;
}
footer a.logo img{
	position: relative;
	margin: 0 auto;
	height: 40px;
	width: auto;
}
footer p.lead{padding: 10px 20px;}
footer .caution{
	position: relative;
	margin: 10px auto;
	padding: 10px 20px;
	border-top:solid 1px #ffffff;
	font-size: .11rem;
}
footer .caution .ttl{
	padding-bottom: 5px;
	text-decoration: underline;
	width: auto;
	display: inline-block;
	font-size: .13rem;
}
footer .copyright{
	position: relative;
	margin: 10px auto 0 auto;
	background-color: #3c3c3c;
	color: #969696;
	padding: 5px 0;
}

.bg{
	position: fixed;
	z-index: -2;
	top:0;
	left: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	width: 100%;
	height: 0;
}
.bg.active{z-index: -1;}

#totop{
	position: fixed;
	bottom:-20px;
	right: 20px;
	width: 30px;
	height: 30px;
	opacity: 0;
	transition: all .3s ease-out;
	z-index: 80;
}
#totop.Disp{bottom:20px;opacity: 1;}


/* navigation */
#menu{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 10000;
	transition: all .3s ease-out;
}
#menu.white{background-color: #ffffff;}
#menu .navBtn{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 50px;
}
#menu .navBtn .logo{
	position: relative;
	margin: 0;
	width: calc(100% - 180px);
	height: 30px;
	padding: 10px;
	z-index: 102;
}
#menu .navBtn .logo img{height: 100%; width: auto;}

.btn_contact, .btn_menu{
	position: relative;
	display: block;
	padding: 10px 0 5px 0;
	width: 80px;
	height: 35px;
    z-index: 101;
    transition: all .3s ease-out;
	background-color: #5661c3;
	color: #ffffff;
}
.btn_contact a{
	position: absolute;
	display: block;
	top:0;
	left: 0;
	width: 100%;
	height: calc(100% - 15px);
	padding: 10px 0;
}
.btn_contact a img, .btn_menu img{height:35px; width: auto;margin: 0 auto;display: block;transition: all .3s ease-out;}
.btn_menu{
    z-index: 100;
	background-color: #363da1;
}
.closeBtn{display:none !important;opacity: 0;}
.closeBtn.active{display:block !important;opacity: 1;}
.openBtn.active{display:none !important;opacity: 0;}

nav{
	position: fixed;
	top:calc(-100% - 290px);
	left: -10px;
	padding: 90px 0 0 0;
	height: 100vh;
	width: calc(100% + 20px);
	overflow-y: auto;
	z-index: 90;
	transition: all .3s ease-out;
	background-color: #ffffff;
}
.dispMenu{top: 0;}
nav ul{
	position: relative;
	margin: 0 auto;
}
nav ul li{
	position: relative;
	padding: 5px 0;
	text-align: center;
}
nav ul li.sns{
	position: relative;
	margin: 20px auto 0 auto;
}
.contact{width: 100%;}
.BtnSNS{width: 40px;margin: 5px 10px;}
nav ul li.policy{width: 100%;font-weight: 500;text-decoration: underline;}
.contact a{
	position: relative;
	margin: 0 auto;
	display: block;
	color: #ffffff;
	background-color: #1d2087;
	border-radius: 100px;
	width: calc(10em + 30px);
	padding: 12px 30px;
	line-height: 1em;
}
.contact a img{
	width: 16px;
	display: inline;
	padding-right: 10px;
	line-height: 1em;
}

.sp{ display: block; }
.pc{ display: none; }


/* ----- pc ----- */
@media screen and (min-width: 768px) {
		
	.sp{ display: none; }
	.pc{ display: block; }
    
    body{font-size: .18em;}
	
	header{min-width: 1200px;}
	
	#wrap{min-width: 1200px;overflow: auto;}
	
	.contentsInner{width: 1100px;}

	h2{
		border: solid 8px #1d2087;
		padding: 20px 30px;
		font-size: .20rem;
		min-width: 210px;
	}

	footer{
		padding:30px 0 0 0;
		text-align: center;
		font-size: .15rem;
	}
	footer a.logo img{height: 50px;}
	footer p.lead{padding: 20px;}
	footer .caution{
		margin: 30px auto;
		padding: 15px 30px;
		border-top:solid 1px #ffffff;
		font-size: .15rem;
		width: 740px;
	}
	footer .caution .ttl{
		padding-bottom: 20px;
		font-size: .16rem;
	}
	footer .copyright{
		margin: 20px auto 0 auto;
		padding: 20px 0;
		font-size: .13rem;
	}

	#totop{
		width: 60px;
		height: 60px;
	}


	/* navigation */
	#menu{height: 90px;}
	#menu .navBtn{height: 90px;}
	#menu .navBtn .logo{
		width: 180px;
		height: 50px;
		padding: 20px 60px;
	}
	#menu .nav{
		position: relative;
		margin: 0;
		width: calc(100% - 540px);
	}
	#menu .nav ul{
		position: relative;
		padding: 0;
	}
	#menu .nav ul li{
		position: relative;
		padding: 0 60px 0 0;
	}
	#menu .nav ul li a{color: #231815;font-size: .13rem;}
	#menu .nav ul li a.color{color: #231815;}
	#menu .nav ul li a::after{
		position: absolute;
		right:45px;
		top:50%;
		transform: translateY(-50%);
		content: '\025b6';
		font-size: .10rem;
	}
	
	.btn_contact, .btn_menu{
		padding: 20px 0 10px 0;
		width: 120px;
		height: 60px;
		cursor: pointer;
	}
	.btn_contact a{
		height: 60px;
		padding: 20px 0;
	}
	.btn_contact a img, .btn_menu img{height:60px;}

	nav{
		top:calc(-100% - 120px);
		padding: 120px 0 0 0;
	}
	nav ul li{padding: 8px 0;}
	nav ul li.sns{margin: 30px auto 0 auto;transform: translateX(70px);}
	.BtnSNS{width: 50px;margin: 0 10px;}
	footer 	.BtnSNS{width: 55px;margin: 20px 10px 0 10px;}
	nav .contact{width: calc(10em + 170px);}
	.contact a{
		width: calc(10em + 50px);
		padding: 10px 50px;
		font-size: .16rem;
	}
	.contact a img{
		width: 24px;
		padding-bottom: 3px;
	}

	footer .contact a{
		padding: 15px 50px 20px 50px;
		font-size: .18rem;
	}
	footer .contact a img{width: 32px;padding-bottom: 0;transform: translateY(2px);}

}