@charset "utf-8";
:root {
	--f64: clamp(2rem, 5vw, 4rem); /*1280px以上は64px、640px以下は32px、その間は可変*/
	--f48: clamp(1.5rem, 3.75vw, 3rem); /*1280px以上は48px、640px以下は24px、その間は可変*/
	--f36: clamp(1.13rem, 2.81vw, 2.25rem);/*1280px以上は36px、640px以下は18px、その間は可変*/
	--f30: clamp(1rem, 0.125rem + 2.188vw, 1.875rem);/*1280px以上は30px、640px以下は16px、その間は可変*/
	--f28: clamp(0.938rem, 0.221rem + 1.91vw, 1.75rem);/*1280px以上は28px、640px以下は15px、その間は可変*/
	--f24: clamp(0.9rem, 1.875vw, 1.5rem);/*1280px以上は24px、640px以下は14.4px、その間は可変*/
	--f20: clamp(0.75rem, 1.563vw, 1.25rem);/*1280px以上は20px、640px以下は12px、その間は可変*/
	--f18: clamp(0.75rem, 1.427vw, 1.125rem);/*1280px以上は18px、640px以下は12px、その間は可変*/
	--f16: clamp(0.625rem, 1.25vw, 1rem);/*1280px以上は16px、640px以下は10px、その間は可変*/
	--f14: clamp(0.625rem, 1.09vw, 0.875rem);/*1280px以上は14px、640px以下は10px、その間は可変*/
	--f12: clamp(0.56rem, 0.94vw, 0.75rem);/*1280px以上は14px、640px以下は9px、その間は可変*/
	
	--main: #00a4ff;
	--sub: #003399;
	--grad: linear-gradient(135deg, rgba(50, 218, 255, 1), rgba(123, 64, 188, 1));
	
	--font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
html {
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 40px;
}
body {
	line-height: 1.8;
	font-family: var(--font);
	font-weight: 400;
	font-size: var(--f18);
	color: #333;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ul, ol {
	  list-style: none;
}
a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}
p {
	margin-bottom: 1em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input, select {
	vertical-align: middle;
}
address {
	font-style: normal;
}

header #header_menu {
	  background-color: #FFF;
	  color: var(--main);
	  width: 100vw;
	  height: 40px;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 999;
	  padding: 10px 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
}
header.active #header_menu {
	box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}
header h1 {
	margin-left: 10px;
	flex-grow: 1;
}
header h1 a {
	display: block;
}
header h1 img {
	  display: block;
	  width: auto;
	  height: 40px;
}
header .head_btn {
	background: var(--sub);
	border-radius: 9999px;
	color: #FFF;
	display: block;
	font-family: var(--udp);
	font-weight: 700;
	height: 30px;
	line-height: 30px;
	padding: 0 1.5em;
}
.header__nav {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	transform: translateX(100%);
	background-color: #FFF;
	transition: ease .4s;
}
.nav-items {
	padding-top: 40px;
	text-align: center;
}
.nav-items__item {
}

.nav-items__item a {
	color: var(--main);
	display: block;
	margin: 5px 15px 0;
	padding-bottom: 15px;
	font-size: var(--f18);
	font-weight: 600;
	line-height: 1.2;
	transition: all .3s;
}
.nav-items__item a:hover {
	color: var(--sub);
}
.nav-items__item a.current {
	color: #CCC;
}
.nav-items__item a.btn {
	background: var(--sub);
	border-radius: 9999px;
	color: #FFF;
	display: block;
	font-weight: 600;
	height: 2.4em;
	line-height: 2.4em;
	margin: auto;
	padding: 0 2em;
	width: fit-content;
}
.dropdown__lists {
	margin: -5px 15px 10px;
	display: flex;
	flex-wrap: wrap;
	
}
.dropdown__list {
}
.dropdown__list a {
	background-color: #333;
	padding: 1em;
	margin: 0 10px 10px 0;

}
.header__hamburger {
	width: 40px;
	height: 100%;
}
.hamburger {
	background-color: transparent;
	border-color: transparent;
	z-index: 9999;
}
.hamburger span {
	width: 100%;
	height: 2px;
	background-color: var(--main);
	position: relative;
	transition: ease .4s;
	display: block;
}
.hamburger span:nth-child(1) {
	top: 0;
}
.hamburger span:nth-child(2) {
	margin: 6px 0;
}
.hamburger span:nth-child(3) {
	top: 0;
}
.header__nav.active {
	transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
	top: 5px;
	transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	top: -11px;
	transform: rotate(-45deg);
}
.nav-items__item a.yoyaku, .nav-items__item a.line {
	display: none;
}

.bl {
	background-color: #edf8ff;
}
.w1400 {
	display: block;
	width: calc(100% - 2rem);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.w1200 {
	display: block;
	width: calc(100% - 2rem);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.w1000 {
	display: block;
	width: calc(100% - 2rem);
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
section {
	padding: 60px 0 3em 0;
}
section > section {
	padding: 3em 0;
}
article {
	padding: 3em 0;
}
article:first-child {
	padding-top: 0;
}
article:last-child {
	padding-bottom: 0;
}

h2, h3 {
	color: var(--sub);
	font-weight: 700;
	text-align: center;
}
h2 span, h3 span {
	display: inline-block;
}
h2 {
	font-size: var(--f36);
}
h2#title {
	background: linear-gradient(180deg, #f6faff, #edf8ff);
	padding: 2em 0;
}
h3 {
	font-size: var(--f30);
	margin-bottom: 2em;
}
h3.line:after {
	content: '';
	display: block;
	background: var(--grad);
	height: 3px;
	margin: 0.3em auto;
	width: 2em;
}
h4 {
	color: var(--main);
	font-size: var(--f20);
	font-weight: 700;
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
}
nav .breadcrumb {
	font-size: var(--f16);
 	display: flex;
	margin-top: 0.5em;
 	padding: 0;
}
nav .breadcrumb li:not(:last-child)::after {
 	content: '>';
 	margin: 0 0.5em;
}
nav .breadcrumb a {
 	color: var(--main);
}
nav .breadcrumb li.home {
	background: url("../img/icon/home.svg") no-repeat left center / 1em 1em;
	padding-left: 1.5em;
}

nav.contact ul {
	text-align: center;
	padding: 2em 0;
}
nav.contact ul li {
	font-size: var(--f36);
	font-weight: 600;
	width: 100%;
}
nav.contact ul li a {
	border-radius: 10px;
	color: #fff;
	display: block;
	width: 100%;
	height: 3.6em;
	line-height: 3.6em;
}
nav.contact ul li a.est {
	background: var(--grad);
	margin-bottom: 1em;
}
nav.contact ul li a.cont {
	background-color: var(--sub);
}

footer {
	background-color: var(--sub);
	color: #fff;
	padding: 2em 2em 0.5em;
	text-align: center;
}
footer a {
	color: #fff;
}
footer p.corp {
	font-size: 1.2em;
	margin-bottom: 0.5em !important;
}
footer p.mirai a img {
	height: 2em;
	width: auto;
	vertical-align: text-bottom;
}
footer small {
	font-size: var(--f14);
}
footer nav {
	display: none;
}

@media screen and (min-width: 768px) {
	nav.contact ul {
		display: flex;
		justify-content: space-around;
	}
	nav.contact ul li {
		width: calc(50% - 2em);
		max-width: 600px;
	}
	nav.contact ul li a.est {
		margin-bottom: 0;
	}
	.ce {
		text-align: center;
	}
	
	footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	footer #corp {
		text-align: left;
		width: fit-content;
	}
	footer p.corp {
		border-bottom: solid 1px #fff;
		padding-right: 1em;
	}
	footer #sitemap {
		width: calc(100% - 25em);
	}
	footer nav {
		display: block;
		margin-bottom: 2em;
	}
	footer nav ul {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 0.5em 1em;
	}
	footer p.mirai {
		margin-bottom: 4em;
	}
	footer small {
		width: 100%;
	}
}

@media screen and (min-width: 960px) {
	html {
		scroll-padding-top: 80px;
	}
	header #header_menu {
		height: 80px;
		width: auto;
	}
	header h1 {
		flex-grow: 0;
	}
	header h1 img {
		height: 80px;
	}
	header .head_btn {
		display: none;
	}
	.header__nav {
		background-color: transparent;
		position: static;
    	transform: initial;
    	height: 49px;
    	display: flex;
		width: auto;
		order: 2;
	}
	.header__nav.active {
		position: static;
		padding-top: 0;
	}
    .nav__items {
    	width: 100%;
    	display: flex;
    	align-items: center;
    	height: initial;
		margin-right: 1em;
		padding: 0;
  	}
	.nav-items__item {
  		margin: 0 0 0 1em;
		position: relative;
  	}
	.nav-items__item.sp {
		display: none;
	}
	.nav-items__item a {
    	margin-bottom: 0;
		font-weight: 600;
		margin: 0;
		padding-bottom: 0;
		height: 30px;
		line-height: 30px;
  	}
	.nav-items__item a.current {
		border-bottom: solid 2px var(--main);
		color: var(--main);
	}
	.nav-items__item span {
		cursor: pointer;
	}
	.nav-items__item:hover {
	}
	.nav-items__item.btm img {
		display: inline-block;
		vertical-align: middle;
	}
	.nav-items__item.btm .w12 {
		display: none;
	}
	.nav-items__item.btm a {
		color: #FFF;
		margin-top: 0;
		letter-spacing: 0.2em;
	}
	.nav-items__item.btm :hover {
		border-bottom: none;
	}
	.nav-items__item, .dropdown__list, .dropdown__lists {
		border: none;
	}
	.dropdown__lists {
    	visibility: hidden;
    	opacity: 0;
    	transition: all .3s;
    	position: absolute;
    	top: 36px;
    	left: -1em;
		padding: 0;
    	background-color: rgba(26, 26, 26, 0.95);
		margin: 0;
	}
	.nav-items__item:hover .dropdown__lists {
    	visibility: visible;
    	opacity: 1;
	}
	.dropdown__list {
    	position: relative;
	}
	.dropdown__list a:hover {
    	background-color: #333;
		color: #FFF;
	}
	.dropdown__list a {
		display: block;
    	text-decoration: none;
    	position: relative;
		padding: 5px 1em;
		margin-top: 0;
		margin-bottom: 0;
		height: 40px;
		line-height: 40px;
		width: 16em;
		transition: all .3s;
	}
	.nav-items__item a.yoyaku, .nav-items__item a.line {
		border-radius: 9999px;
		display: block;
		height: 40px;
		line-height: 40px;
		padding: 0;
		text-align: center;
	}
	.nav-items__item a.yoyaku, .nav-items__item a.line {
		padding: 0 0.8em;
	}
	.nav-items__item a.yoyaku:hover, .nav-items__item a.line:hover {
		color: #FFF;
	}
	.nav-items__item a.yoyaku {
		background: var(--grad);
	}
	.nav-items__item a.line {
		background-color: #06C755;
	}
	.nav-items__item a.line img {
		vertical-align: middle;
	}
	.hamburger {
    	display: none;
  	}
	section {
		padding-top: 100px;
	}
	h3.line:after {
		height: 4px;
	}
	nav.contact ul {
		padding: 4em 0;
	}
	footer p.mirai {
		margin-bottom: 2em;
	}
}
@media screen and (min-width: 1280px) {
	html {
		scroll-padding-top: 120px;
	}
	header #header_menu {
		height: 120px;
	}
	header h1 img {
		height: 100px;
	}
	.nav-items__item {
  		margin: 0 0 0 2em;
  	}
	section {
		padding-top: 140px;
	}
}