@charset "utf-8";
/* CSS Document */
/* ------------------------------------------------------------------------ */

/*  Reset

/* ------------------------------------------------------------------------ */

html {
	overflow-y	: scroll;
	height		: 100%;
	font-size	: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote {
	margin 	: 0;
	padding : 0;
}

fieldset {
	display	: inline;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style : normal;
}

body/**/table {
	line-height	: 1.5;
}

q:before,
q:after {
	content : '';
}

object,embed {
	vertical-align : top;
}

legend	{
	display : none;
}

h1,h2,h3,h4,h5,h6 {
	font-size : 100%;
}

img,abbr,acronym,fieldset {
	border : 0;
}

li {
	list-style-type : none;
}

img[usemap] {
	border		: none;
	height		: auto;
	max-width	: 100%;
	width		: auto;
}

img {
	border		: 0;
	max-width	: 100%;
}

i {
	padding	: 5px 5px 2px 0;
}

p {
	word-break	: break-all;
}

/* Flexible Images */
img{
    max-width	: 100%;
    height		: auto;
    width /***/	: auto;
	backface-visibility: hidden;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: auto;
}

submit	{ -webkit-appearance : none;}

/* ------------------------------------------------------------------------ */

/*  Basic Style

/* ------------------------------------------------------------------------ */

body {
	margin		: 0;
	padding		: 0;
	height		: 100%;
	font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size	: 1.8rem;
	font-size	: 18px;
	font-weight	: 500;
	line-height	: 1.5;
	text-align	: center;
	color		: #282730;
	-webkit-text-size-adjust	: 100%;
	font-smoothing	: auto;
	word-break: break-word;
}

body *,
body *:before,
body *:after {
    box-sizing: border-box;
}

body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
}

#wrap{
	margin		: 0 auto;
	text-align	: center;
}

body > #wrap { height : auto; overflow: hidden; position: relative;}

.spStyle{
	display: none;
}

.contents{
	max-width: 1200px;
	width: calc(100% - 40px);
	margin: 0 auto;
}

.indent{
	padding-left: 1em;
	text-indent: -1em;
}

sub{
	font-size: 0.7em;
}

.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 767px){
	body{
		font-size: 1.4rem;
	}
	.pcStyle{
		display: none;
	}
	.spStyle{
		display: inherit;
	}
}

/* Link
--------------------------------------------------------------------------- */

.opacity a:hover img{
	opacity: 0.85;
}

a{
	text-decoration	: none;
	color			: #4c4398;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}

a.tel{
	color: inherit;
	text-decoration: none;
	cursor: auto;
}

a:hover{
	color: #d96297;
}

a.com-btn{
	display: block;
	max-width: 400px;
	line-height: 62px;
	color: #4c4398;
	border: solid 1px #4c4398;
	background: #fff;
	margin: 64px auto 0;
	position: relative;
	padding-right: 39px;
	letter-spacing: 0.06em;
	font-size: 1.6rem;
}
a.com-btn::after{
	content: "";
	display: block;
	width: 36px;
	height: 6px;
	background: url("/common/img/icon_arrow_pur.png") no-repeat center / contain;
	position: absolute;
	top: calc(100% / 2 - 3px);
	right: 19px;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}
a.com-btn:hover{
	background: #4c4398;
	color: #fff;
}
a.com-btn:hover::after{
	background-image: url("/common/img/icon_arrow36.png");
}

.com-btn.pdf span{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
	.com-btn.pdf span::after{
		content: "";
		display: block;
		width: 18px;
		height: 20px;
		background: url("/common/img/icon_pdf.png") no-repeat center / contain;
		margin-left: 8px;
	}

a.link{
	border-bottom: solid 1px;
}

@media screen and (min-width: 768px){
	a.tel{
		pointer-events: none;
	}
}


/* ------------------------------------------------------------------------ */

/* Hedaer

/* ------------------------------------------------------------------------ */

header{
	background: #fff;
	width: 100%;
	height: 110px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}

header > .inner.flex{
	align-items: stretch;
	margin: 0 auto;
	max-width: 1600px;
	padding-left: 20px;
	width: 100%;
	height: 100%;
}

header .logo{
	max-width: 260px;
	width: 30%;
}
header .logo img{
	width: 100%;
}

.headerSearch{
	background: #fff;
	border: solid 1px #001655;
	border-radius: 4px;
	overflow: hidden;
	max-width: 250px;
}
	.headerSearch .s-box{
		font-family: "Noto Sans JP", sans-serif;
		font-size: 1em;
		font-weight: 400;
		padding: 6px 16px;
		border: none;
		width: 100%;
		height: 40px;
	}

	.headerSearch button{
		background: none;
		border: none;
		padding: 6px;
		padding-right: 16px;
	}
		.headerSearch button::before{
			content: "\f002";
			font-family: 'FontAwesome';
			font-size: 2.5rem;
			background: #fff;
			border: none;
			color: #001655;
		}

header .telBox{
	text-align: left;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	margin-left: 24px;
}
	header .telBox a{
		color: #001655;
		font-family: "Roboto", sans-serif;
		font-weight: 500;
		font-size: 3.4rem;
	}

header .telBox a::before{
	content: "\f095";
	font-family: 'FontAwesome';
	font-size: 0.941177em;
	margin-right: 5px;
}

header .consultBtn{
	font-size: 1.8rem;
	font-weight: 500;
	flex-shrink: 0;
	width: 182px;
	height: 100%;
	margin-left: 24px;
}
	header .consultBtn a{
		background: #eb88b4;
		color: #fff;
		letter-spacing: 0.04em;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	header .consultBtn a:hover{
		background: #001655;
	}
	header .consultBtn a::after{
		content: "";
		display: block;
		background: url("/common/img/icon_mail.svg") no-repeat center / contain;
		width: 29px;
		height: 20px;
		margin: 13px auto 0;
	}

.hg_menu_btn{
	background: #6c6cd9;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	flex-shrink: 0;
	position: relative;
	top: inherit;
	z-index: 9999;
	width: 110px;
	height: 100%;
	overflow: hidden;
	padding-top: 8px;
	margin-left: 2px;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.hg_menu_btn:hover{
	background: #001655;
}
.hg_menu_btn span {
	position: relative;
	display: inline-block;
	width: calc(100% - 50px);
	height: 3px;
	background: #fff;
	transition: 0.4s ease;
	margin: 22px 0;
	border-radius: 2px;
}
	.hg_menu_btn span::before,
	.hg_menu_btn span::after {
		content: "";
		position: absolute;
		background: #fff;
		display: block;
		height: 3px;
		width: 100%;
		transition: .4s;
		border-radius: 2px;
	}
		.hg_menu_btn span::before {
			bottom: 15px;
		}
		.hg_menu_btn span::after {
			top: 15px;
		}

.hg_menu_btn.active span{
	transform: rotate(180deg);
	background: none;
}
	.hg_menu_btn.active span::before,
	.hg_menu_btn.active span::after{
		background: #fff;
	}
	.hg_menu_btn.active span::before{
		top: 50%;
		transform: translateY(-50%) rotate(25deg);
	}
	.hg_menu_btn.active span::after{
		top: 50%;
		transform: translateY(-50%) rotate(-25deg);
	}

.hg_menu_btn .txt{
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.16em;
}


header nav {
	display: block;
	padding: 30px 40px 100px;
	visibility: hidden;
	overscroll-behavior: auto;
	overflow-y: auto;
	transition: 0.3s;
	max-width: 840px;
	width: 100%;
	height: calc(100vh - 110px);
	position: absolute;
	top: 100%;
	right: 0;
	opacity: 0;
	background: rgba(77,68,151,0.9);
	z-index: -1;
}

header nav .nav-inner > .flex{
	align-items: flex-start;
	justify-content: flex-start;
	gap: 40px;
}

header .nav-inner .page-nav{
	width: 50%;
}
	header .page-nav li{
		text-align: left;
	}
		header .page-nav li a{
			color: #fff;
			display: inline-block;
			padding: 10px 0;
			text-indent: -1em;
			padding-left: 1em;
		}
		header .page-nav li a::before{
			content: "\f105";
			color: #fff;
			font-family: 'FontAwesome';
			font-size: 1.6rem;
			margin-right: 10px;
		}
		header .page-nav li a::after{
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background: #fff;
			opacity: 0;
			transform: translateY(10px);
			transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
		}
		header .page-nav li a:hover::after{
			transform: translateY(5px);
			opacity: 1;
		}

header nav .js-close{
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(3,104,55,0.5);
	position: absolute;
	top: 0;
}
header.navIn nav {
	opacity: 1;
	visibility: visible;
	right: 0;
	z-index: 8888;
}

header .nav-inner .telBox,
header .nav-inner .headerSearch{
	display: none;
}

.nav_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 998;
}

.nav_overlay.active {
	opacity: 1;
	visibility: visible;
}


@media screen and (min-width: 1201px){
	/* スクロール時の挙動 */
	header.hide{
		height: 60px;
	}
		header.hide .logo{
			width: 11%;
		}
		header.hide .telBox,
		header.hide .consultBtn{
			font-size: 1.4rem;
		}
		header.hide .telBox a{
			font-size: 2.2rem;
		}
		header.hide .consultBtn a::after{
			width: 19px;
			height: 13px;
			margin: 5px auto 0;
		}

	header.hide .hg_menu_btn{
		padding-top: 5px;
	}
		header.hide .hg_menu_btn span{
			margin: 10px 0;
			width: calc(100% - 76px);
		}
			header.hide .hg_menu_btn span::before {
				bottom: 9px;
			}
			header.hide .hg_menu_btn span::after {
				top: 9px;
			}
			header.hide .hg_menu_btn.active span::after{
				top: 2px;
			}

		header.hide .hg_menu_btn .txt{
			font-size: 1.4rem;
		}

	header.hide nav{
		height: calc(100vh - 60px);
	}
}

@media screen and (max-width: 1200px){
	header{
		height: 70px;
	}
		header .logo{
			width: 170px;
		}
	
	.hg_menu_btn{
		width: 70px;
	}
		header .hg_menu_btn span{
			margin: 10px 0;
			height: 1px;
			width: calc(100% - 30px);
		}
			.hg_menu_btn span::before,
			.hg_menu_btn span::after{
				height: 1px;
			}
			header .hg_menu_btn span::before {
				bottom: 9px;
			}
			header .hg_menu_btn span::after {
				top: 9px;
			}
			header .hg_menu_btn.active span::after{
				top: 2px;
			}
	
	.hg_menu_btn .txt{
		font-size: 1.4rem;
	}
	
	header nav{
		height: calc(100vh - 70px);
	}

	header .consultBtn,
	header .telBox,
	header .headerSearch{
		display: none;
	}
	
	header .nav-inner .telBox,
	header .nav-inner .headerSearch{
		display: block;
	}
	
	header .nav-inner .headerSearch{
		margin-top: 40px;
		max-width: inherit;
		width: 100%;
	}
	
	header .nav-inner .telBox{
		margin: 40px auto 0;
		text-align: center;
		background: #fff;
		padding: 10px 30px;
		border-radius: 4px;
		border: solid 1px #001655;
		max-width: fit-content;
	}
}

@media screen and (max-width: 767px){
	header > .inner.flex{
		padding-left: 10px;
	}
	header nav{
		padding: 20px 20px 100px;
	}
	header nav .nav-inner > .flex{
		display: block;
		gap: 20px;
	}
	header .nav-inner .page-nav{
		width: 100%;
	}
	
	header .telBox a{
		font-size: clamp(1.6rem,8.5vw,3.4rem);
	}
}

/* ------------------------------------------------------------------------ */

/* Contents

/* ------------------------------------------------------------------------ */

#mainBlock {
	padding-top: 110px;
	min-height: calc(100vh - 405px);
	clear : both;
}


/* 追従バナー */
#bnrBox{
	position: fixed;
	top: 160px;
	right: 0;
	z-index: 100;
}
	#bnrBox li{
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-top: solid 2px #fff;
		border-bottom: solid 2px #fff;
		border-left: solid 2px #fff;
		overflow: hidden;
		width: 70px;
		height: 220px;
	}

	#bnrBox li + li{
		margin-top: 10px;
	}

	#bnrBox li a{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.6rem;
		width: 100%;
		height: 100%;
		writing-mode: vertical-rl;
		color: #fff;
	}

	#bnrBox li.kuge a{
		background: #b48fcc;
	}
		#bnrBox li.kuge a:hover{
			background: #001655;
		}

	#bnrBox li.midori a{
		background: #73bfbf;
	}
		#bnrBox li.midori a:hover{
			background: #001655;
		}

@media screen and (max-width: 1200px){
	#mainBlock {
		padding-top: 70px;
	}
}


/* ------------------------------------------------------------------------ */

/* Footer

/* ------------------------------------------------------------------------ */

#pageTop{
	background: #4c4398;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	color: #fff;
	font-size: 1.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: fixed;
	right: 20px;
	bottom: 20px;
	transition: none;
	z-index: 99;
}
#pageTop::before{
	content: "\f106";
	font-family: 'FontAwesome';
	font-size: 1.6rem;
	line-height: 1;
}

footer {
	background: #efedfa;
	clear : both;
	padding: 60px 0;
	position: relative;
}

footer > .inner{
	max-width: 1000px;
	width: calc(100% - 40px);
	margin: 0 auto;
}

footer .logo{
	max-width: 322px;
	width: 100%;
	margin: 0 auto 54px;
}
footer .logo img{
	width: 100%;
}

footer .navBox{
	align-items: flex-start;
}

footer .navBox li{
	text-align: left;
}

footer .navBox .mainLink + .mainLink{
	margin-top: 17px;
}

footer .navBox .mainLink > a::before{
	content: "\f105";
	color: #4c4398;
	font-family: 'FontAwesome';
	font-size: 1.6rem;
	font-weight: solid;
	margin-right: 10px;
	transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}
footer .navBox .mainLink > a:hover::before{
	color: #d96297;
}


footer .subLink{
	margin-top: 15px;
}
	footer .subLink > li{
		padding-left: 1em;
	}
		footer .subLink > li a{
			font-size: 1.4rem;
		}


footer .planList .subLink > li + li{
	margin-top: 15px;
}
footer .planList .subLink > li a::before{
	content: "";
	display: inline-block;
	width: 10px;
	height: 1px;
	background: #4c4398;
	margin-left: -1em;
	margin-right: 9px;
	transform: translateY(-5px);
	transition: background 0.3s cubic-bezier(0.4, 0, 1, 1);
}
footer .planList .subLink > li a:hover::before{
	background: #d96297;
}
footer .navBox .box > ul + ul{
	margin-top: 25px;
}

footer .copy{
	font-size: 1.2rem;
	color: rgba(40 39 48 / 70%);
	margin-top: 80px;
}

footer .navBox a{
	color: #28272B;
}
footer .navBox a:hover{
	color: #d96297;
}

@media screen and (max-width: 1300px){
	#bnrBox{
		display: flex;
		justify-content: center;
		align-items: stretch;
		top: auto;
		bottom: 0;
		left: 0;
		width: calc(100% - 20px);
		margin: 0 auto;
	}
	#bnrBox li{
		border-bottom: none;
		line-height: 55px;
		width: 50%;
		height: auto;
	}
	#bnrBox li.kuge{
		border-top-left-radius: 8px;
		border-bottom-left-radius: 0;
	}
	#bnrBox li.midori{
		border-top-left-radius: 0;
		border-top-right-radius: 8px;
		border-bottom-left-radius: 0;
		border-right: solid 2px #fff;
		margin-top: 0;
	}
	#bnrBox li a{
		font-size: clamp(1rem,3.5vw,1.6rem);
		writing-mode: inherit;
	}
	
	footer{
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
@media screen and (max-width: 767px){
	#pageTop{
		font-size: 1.4rem;
		line-height: 1.2;
		width: 80px;
		height: 80px;
	}
	
	footer .logo{
		width: 65%;
	}
	
	footer .navBox{
		flex-direction: column;
	}
	
	footer .navBox .box{
		width: 100%;
	}
	footer .navBox .box + .box{
		margin-top: 25px;
	}
	
	footer .navBox a{
		display: block;
	}
	footer .navBox .mainLink > a{
		border-bottom: solid 1px #d9d9d9;
		padding-bottom: 17px;
	}
	
	footer .navBox a br{
		display: none;
	}
	
	footer .copy{
		margin-top: 40px;
	}
}


