@charset "utf-8";
/* CSS Document -----------------------------

 2024.01.09

--------------------------------------------*/
/* DIN 2014 */
@import url("https://use.typekit.net/fuz1wbk.css");
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #111;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .3s ease;
}
input,
input[type="submit"],
input[type="button"],
button {
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	font-style: normal;
	font-weight: 400;
	font-family: 'Noto Sans JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
   -webkit-appearance: none;
   appearance: none;
}
select {
	font-family: 'Noto Sans JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family: 'Noto Sans JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	display: none;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #111;
	font-style: normal;
	font-weight: 500;
	font-size: 62.5%;
	line-height: 1.8;
	font-family: 'Noto Sans JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-style: normal;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
}
body {font-size: calc(13px + 3 * ((100vw - 375px) / 1605));line-height: 1.8;}
h2,h3,h4,h5 {line-height: 1.5;}
p {font-size: calc(13px + 3 * ((100vw - 375px) / 1605));line-height: 1.8;}
ul,li,th,td,dt,dd,figcaption {line-height: 1.8;}
main {position: relative;z-index: 10;background: #fff;}
.DIN2014Demi {font-family: "din-2014", sans-serif;font-weight: 600;font-style: normal;}
.inner {width: 90%;max-width: calc(1060px + 2 * ((100vw - 375px) / 1605));margin: 0 auto;}
.blank {padding-top: calc(50px + 50 * ((100vw - 375px) / 1605));padding-bottom: calc(50px + 50 * ((100vw - 375px) / 1605));}
.blank2 {padding-top: calc(50px + 50 * ((100vw - 375px) / 1605));}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
h2.title {
	margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));
	color: #006CFF;
	font-weight: 700;
	font-size: calc(18px + 12 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
}
.link {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	padding: 10px 0;
	border: 1px solid #323232;
	background: #fff;
	color: #323232;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	text-align: center;
	transition: .3s;
}
.link:hover {background-position: 99% 50%;color: #fff;}
.link::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #323232;
	transition: transform .3s;
}
.link:hover::before {transform-origin: left top;transform: scale(1, 1);}
.link::after {
	content: '';
	position: absolute;
	right: 20px;
	bottom: 50%;
	transform: translateY(50%);
	width: 12%;
	height: 100%;
	background: url(img/arrowR.svg) no-repeat right / 100%;
	transition: .3s;
}
.link:hover::after {background-image: url(img/arrowR-wht.svg);}
a[href^="tel:"] {pointer-events: none;}
.pc,.pc2 {display: block;}
.sp,.sp2 {display: none;}
@media only screen and ( max-width : 1024px ) {
	.pc2 {display: none;}
	.sp2 {display: block;}
}
@media only screen and ( max-width : 768px ) {
	.title_container p.subttl {line-height: 1.8;}
	a[href^="tel:"] {pointer-events: visible;}
	.pc {display: none;}
	.sp {display: block;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	top: 0;
	right: 0;
    z-index: 5;
	width: 100%;
}
header .entry_container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(85px + 65 * ((100vw - 375px) / 1605));
	height: calc(60px + 40 * ((100vw - 375px) / 1605));
	background: #F5FF02;
	color: #006CFF;
	font-weight: 700;
	font-size: calc(14px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
	text-align: center;
}
header ul.tab li {position: relative;}
header ul.tab .nav_button {
	position: relative;
	width: calc(85px + 65 * ((100vw - 375px) / 1605));
	height: calc(60px + 40 * ((100vw - 375px) / 1605));
	background: #fff;
	cursor: pointer;
	transition: .3s;
}
header ul.tab .nav_button span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: calc(30px + 15 * ((100vw - 375px) / 1605));
	height: 3px;
	background: #006CFF;
	transition: all .4s;
}
header ul.tab .nav_button span:nth-child(1) {top: calc(24px + 17 * ((100vw - 375px) / 1605));}
header ul.tab .nav_button span:nth-child(2) {bottom: calc(24px + 17 * ((100vw - 375px) / 1605));}
header ul.tab .nav_button.active span:nth-child(1) {transform: translate(-50%, 7px) rotateZ(45deg);}
header ul.tab .nav_button.active span:nth-child(2) {transform: translate(-50%, -7px) rotateZ(-45deg);}
header ul.tab li.has-child ul {
	opacity: 0;
	position: absolute;
	top: calc(60px + 40 * ((100vw - 375px) / 1605));
	right: 0;
	z-index: 4;
	width: calc(170px + 130 * ((100vw - 375px) / 1605));
	padding: calc(40px + 40 * ((100vw - 375px) / 1605));
	padding-right: calc(20px + 30 * ((100vw - 375px) / 1605));
	padding-left: calc(20px + 30 * ((100vw - 375px) / 1605));
	background: rgba(255, 255, 255, 95%);
	visibility: hidden;
	transition: all .3s;
}
header ul.tab li.has-child ul li {margin-bottom: calc(15px + 10 * ((100vw - 375px) / 1605));text-align: right;}
header ul.tab li.has-child ul li:last-child {margin-bottom: 0;}
header ul.tab li.has-child ul li a {
	position: relative;
	padding-bottom: 10px;
	font-weight: 700;
	font-size: calc(14px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
}
header ul.tab li.has-child ul li a::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #9BC6FF, #006CFF);
	transition: all .3s;
}
header ul.tab li.has-child ul li a:hover::before {width: 100%;}
header ul.tab li.has-child:hover > ul,
header ul.tab li.has-child ul li:hover > ul,
header ul.tab li.has-child:active > ul,
header ul.tab li.has-child ul li:active > ul {visibility: visible;opacity: 1;}
header ul.tab li.has-child ul li:last-child a {border-bottom: none;}
/*side nav*/
.layout-double {position: sticky;top: 0;}
.layout-double > #g-nav {
	float: left;
	position: sticky;
    top: 0;
    width: calc(150px + 150 * ((100vw - 375px) / 1605));
	padding: calc(20px + 20 * ((100vw - 375px) / 1605));
	padding-top: calc(50px + 50 * ((100vw - 375px) / 1605));
	text-align: right;
}
.layout-double > #g-nav .logo {max-width: 240px;margin: 0 auto calc(50px + 50 * ((100vw - 375px) / 1605));}
.layout-double > #g-nav ul li {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));text-align: right;}
.layout-double > #g-nav ul li a {
	position: relative;
	padding-left: calc(20px + 10 * ((100vw - 375px) / 1605));
	color: #888;
	font-weight: 700;
	font-size: calc(14px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
}
.layout-double > #g-nav ul li a.current {color: #111;}
.layout-double > #g-nav ul li a::before {
	content: '';
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: calc(13px + 2 * ((100vw - 375px) / 1605));
	height: calc(13px + 2 * ((100vw - 375px) / 1605));
	border-radius: 50%;
	background: #006CFF;
	transition: .6s cubic-bezier(.34,1.56,.64,1);
}
.layout-double > #g-nav ul li a.current::before {opacity: 1;}
.layout-double > #g-nav .entry {
	width: 100%;
	max-width: 180px;
	padding: 20px 0;
	border-radius: 2em;
	background: #006CFF;
	color: #fff;
	font-weight: 700;
	font-size: calc(14px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
	text-align: center;
}
.layout-double > #g-nav .entry:hover {background: #9BC6FF;color: #006CFF;}
.layout-double > .layout-container {margin-left: calc(150px + 150 * ((100vw - 375px) / 1605));}
@media only screen and ( max-width : 768px ) {
	header {z-index: 20;}
	.layout-double > #g-nav {display: none;}
	.layout-double > .layout-container {margin-left: 0;}
}
/*--------------------------------------------------

    footer

--------------------------------------------------*/
footer {position: relative;padding: 55px 0;background: #002B65;}
footer p.logo {display: flex;justify-content: center;align-items: center;}
footer p.logo small {margin-right: 15px;color: #fff;letter-spacing: .1em;}
footer p.logo a {max-width: 300px;}
@media only screen and ( max-width : 768px ){
	footer p.logo {
    display: block;
    text-align: center;
}
footer p.logo small {
    display: block;
margin-right: 0;
    text-align: center;
}
}

/*--------------------------------------------------

　   back top

--------------------------------------------------*/
#page-top a {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition:all .3s;
	background: #006CFF;
	border-radius: 50%;
	color: #fff;
}
#page-top a img {
	width: 30px;
	transform: rotate(-90deg) scale(1, -1);
}
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 99;
	opacity: 0;
	transform: translateY(100px);
}
#page-top.UpMove {animation: UpAnime .5s forwards;}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.DownMove {animation: DownAnime .5s forwards;}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}
@media only screen and ( max-width : 991px ) {
	#page-top {right: 0;bottom: 0;}
	#page-top a {width: 60px;height: 60px;border-radius: 0;}
}