@import url("reset.css");
@import url("common.css");


/*	.video-overlay
============================== */
div.video-overlay {
	background-color:#fff;
	position: fixed;
	z-index: 20;
	top: 0;
	right:0;
	left:0;
	bottom:0;
	/*
	height:100vh;
	height:100dvh;
	*/
	height:100%;
	overflow: hidden;
}
div.video-overlay video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-width: 100%;
	min-height: 100%;
}
div.video-overlay:before,
div.video-overlay:after {
	content:"";
	display:block;
	background-repeat:no-repeat;
	position: fixed;
	z-index: 21;
	top: 0;
	right:0;
	left:0;
	bottom:0;
	/*
	height:100vh;
	height:100dvh;
	*/
	height:100%;
	overflow: hidden;
}
div.video-overlay:before {
	background-image:url(../img/logo.svg?0);
	background-position:center 40%;
}
div.video-overlay:after {
	background-image:url(../img/scroll.gif?0);
	background-position:center 94%;
	background-size:91px 156px;
}
@media all and (min-width: 992px) {
div.video-overlay:before {
	background-size:40%;
}
}
@media all and (max-width: 991.98px) {
div.video-overlay:before {
	background-size:60%;
}
div.video-overlay:after {
	background-size:75px 128px;
}
}


/*	.header
============================== */
div.header {
}
div.header header {
	text-align:left;
}
div.header header > h1 {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
	background-size:cover;
	background-image:url(../img/top_header.jpg?0);
	background-position:center center;
	background-repeat:no-repeat;
	background-color:#eaeaea;
}
div.header header h1 span {
	display:block;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-size:60%;
	background-image:url(../img/logo_w.svg?0);
	background-position:center center;
	background-repeat:no-repeat;
	background-color:hsla(0,0%,0%,0.4);
}
@media all and (min-width: 992px) {
div.header {
/*	padding-top:100px; */
	margin-bottom:80px;
}
div.header header {
	max-width:800px;
	margin:0 auto 80px;
}
}
@media all and (max-width: 991.98px) {
div.header {
/*	padding-top:50px; */
	margin-bottom:40px;
}
div.header header {
	padding:0 7.4vw;
}
}


/*	.header .copy
============================== */
div.header div.copy {
	position:relative;
	background-repeat:no-repeat;
	background-position:center bottom;
}
div.header div.copy p {
	text-align:center;
	line-height:1.5;
	font-weight:500;
}
/*
div.header div.copy:before {
	position:absolute;
	content:"";
	display:block;
	background-image:url(../img/idx_copy.jpg);
	background-size:cover;
} */
@media all and (min-width: 1200px) {
div.header div.copy {
	max-width:1200px;
	margin:0 auto;
}
}
@media all and (min-width: 992px) {
div.header div.copy {
	background-image:url(../img/idx_copy_bg_pc.jpg?1);
	background-size:contain;
	padding-bottom:200px;
}
/*
div.header div.copy:before {
	width:200px;
	height:200px;
	right:60px;
	top:-120px;
} */
div.header div.copy p {
	font-size:150%;
}
}
@media all and (max-width: 991.98px) {
div.header div.copy {
	background-image:url(../img/idx_copy_bg_smp.jpg?1);
	background-size:contain;
	padding-top:8vw;
	padding-bottom:34vw;
}
/*
div.header div.copy:before {
	width:25vw;
	height:25vw;
	right:-3vw;
	top:-5vw;
} */
div.header div.copy p {
	font-size:3.5vw;
	padding:0 12vw;
}
}




/*	.unit section
============================== */
main > div.unit {
	position:relative;
	text-align:left;
}
main > div.unit:after {
	position:absolute;
	z-index:0;
	right:0;
	bottom:0;
	content:"";
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0.2;
}
main > div.unit.news:after {
	background-image:url(../img/idx_bg_news.jpg);
}
main > div.unit.profile:after {
	background-image:url(../img/idx_bg_profile.jpg);
}
main > div.unit.service:after {
	background-image:url(../img/idx_bg_service.jpg);
}
main > div.unit > section > header {
	border-style:solid;
	border-color:#ffa500;
	padding-bottom:1.25em;
	/**/
	display:flex;
	align:items:center;
}
main > div.unit > section > header:before {
	content: "";
	display:block;
	background-image:url(../img/logo_icon.svg);
	background-position:center center;
	background-repeat:no-repeat;
}
main > div.unit > section > header h2 {
	letter-spacing:0.1em;
}
main > div.unit > section h2:before {
	display:block;
	color:#001d6e;
	line-height:1.25;
}
main > div.unit.news > section h2:before {
	content:"NEWS";
}
main > div.unit.profile > section h2:before {
	content:"PROFILE";
}
main > div.unit.service > section h2:before {
	content:"SERVICE";
}
main > div.unit > section h2:first-letter {
/*	color:#7fb5ff; */
}
main > div.unit > section h2 span {
	display:inline-block;
	line-height:1.5;
}
main > div.unit > section > div.inner {
	position:relative;
	z-index:1;
}
@media all and (min-width: 992px) {
main > div.unit > section {
	max-width:980px;
	margin:0 auto;
}
main > div.unit:not(:last-child) {
	margin-bottom:120px;
}
main > div.unit:after {
	width:40%;
	height:120px;
	bottom:-60px;
}
main > div.unit > section > header {
	gap:20px;
	border-bottom-width:3px;
	margin-bottom:40px;
}
main > div.unit > section > header:before {
	width:60px;
	height:60px
	background-size:60px 60px;
}
main > div.unit > section h2:before {
	font-size:300%;
}
main > div.unit > section h2 span {
	font-size:112.5%;
}
main > div.unit > section > div.inner {
	padding-left:80px;
}
}
@media all and (max-width: 991.98px) {
main > div.unit {
	padding:0 5vw;
}
main > div.unit:not(:last-child) {
	margin-bottom:60px;
}
main > div.unit:after {
	width:60%;
	height:80px;
	bottom:-30px;
}
main > div.unit > section > header {
	gap:10px;
	border-bottom-width:3px;
}
main > div.unit > section > header:before {
	width:50px;
	height:50px
	background-size:50px 50px;
}
main > div.unit > section > header {
	/* margin-right:-5vw; */
	margin-bottom:20px;
}
main > div.unit > section h2:before {
	font-size:175%;
}
main > div.unit > section h2 span {
	font-size:100%;
}
}


/*	.news
============================== */
div.news > section > div.inner dl dt {
	display:inline-block;
	background-color:#ffdc96;
	padding:0.1em 1em;
	margin-bottom:1em;
	border-radius:40px;
}
div.news > section > div.inner dl dd:not(:last-child) {
	border-bottom:1px solid #ccc;
}
@media all and (min-width: 992px) {
div.news > section > div.inner dl dt {
	font-size:87.5%;
}
div.news > section > div.inner dl dd:not(:last-child) {
	padding-bottom:40px;
	margin-bottom:40px;
}
}
@media all and (max-width: 991.98px) {
div.news > section > div.inner dl dt {
	font-size:75%;
}
div.news > section > div.inner dl dd:not(:last-child) {
	padding-bottom:20px;
	margin-bottom:20px;
}
}


/*	.profile
============================== */
@media all and (min-width: 992px) {
div.profile > section > div.inner {
	display:flex;
	gap:30px;
}
div.profile > section > div.inner > div {
	width: -webkit-calc(100% - 350px);
	width: calc(100% - 350px);
}
}

/*	text
============================== */
section > div.inner p,
section > div.inner dl,
section > div.inner ol {
	line-height:1.5;
}
section > div.inner dl dt,
section > div.inner ul li:not(:last-child),
section > div.inner ol li:not(:last-child) {
	margin-bottom:0.5em;
}
section > div.inner p {
	text-align:justify;
	text-justify:inter-ideograph;
}
section > div.inner p:not(:last-child) {
	margin-bottom:1.5em;
}
/*
section > div.inner ol {
	list-style-type:decimal;
	margin-left:1.5em;
}
section > div.inner ol li::marker {
	color: #ffa500;
}*/
@media all and (min-width: 1080px) {
section > div.inner p,
section > div.inner dl dd,
section > div.inner ul li {
	font-size:112.5%;
}
section > div.inner dl dd:not(:last-child) {
	margin-bottom:60px;
}
}
@media all and (max-width: 1079px) {
section > div.inner p,
section > div.inner dl dd,
section > div.inner ul li {
	font-size:87.5%;
}
section > div.inner dl dd:not(:last-child) {
	margin-bottom:30px;
}
}


div.service > section > div.inner ol {
}
div.service > section > div.inner ol li {
	display: flex;
	align-items: center;
	font-weight:700;
}
div.service > section > div.inner ol li::before {
	content: "";
	background-color:#ededed;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
div.service > section > div.inner ol li > span::before {
	color:#ffa500;
}
div.service > section > div.inner ol li:nth-child(1)::before {background-image:url(../img/icon_service_1.png);}
div.service > section > div.inner ol li:nth-child(2)::before {background-image:url(../img/icon_service_2.png);}
div.service > section > div.inner ol li:nth-child(3)::before {background-image:url(../img/icon_service_3.png);}
div.service > section > div.inner ol li:nth-child(4)::before {background-image:url(../img/icon_service_4.png);}
div.service > section > div.inner ol li:nth-child(5)::before {background-image:url(../img/icon_service_5.png);}

div.service > section > div.inner ol li:nth-child(1) > span::before { content: "1. "; }
div.service > section > div.inner ol li:nth-child(2) > span::before { content: "2. "; }
div.service > section > div.inner ol li:nth-child(3) > span::before { content: "3. "; }
div.service > section > div.inner ol li:nth-child(4) > span::before { content: "4. "; }
div.service > section > div.inner ol li:nth-child(5) > span::before { content: "5. "; }

div.service > section > div.inner ol li span span {
	font-weight:400;
}

@media all and (min-width: 992px) {
div.service > section > div.inner > ol > li {
	font-size:125%;
	gap: 20px;
}
div.service > section > div.inner ol li::before {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
}
}
@media all and (max-width: 991.98px) {
div.service > section > div.inner > ol > li {
	font-size:100%;
	gap: 14px;
}
div.service > section > div.inner ol li::before {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
}
}
/*	figure.pic
============================== */
figure span, figure img {
	display:block;
}
figure span {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
figure img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.profile figure span {
	background-image:url(../img/idx_profile.jpg?1);
	padding-top: -webkit-calc(1080 / 754 * 100%);
	padding-top: calc(1080 / 754 * 100%);
}
@media all and (min-width: 992px) {
div.profile figure {
	width:300px;
}
}
@media all and (max-width: 991.98px) {
div.profile figure {
	width:50%;
	margin:0 auto 30px;
}
div.news > section > div.inner dl dt {
	font-size:75%;
}
}


/*	.vision
============================== */
div.vision {
	text-align:left;
	background-image:url(../img/idx_bg_vision_2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
	background-color:hsla(38,100%,50%,0.1);
	box-shadow:5px 5px 0 hsla(38,100%,50%,0.04);
}
div.vision section > h2 {
	color:#001d6e;
	letter-spacing:0.25em;
	line-height:1.25;
	margin-bottom:1em;
}
div.vision section > h2 > span {
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.6, transparent), color-stop(0.6, hsla(214,100%,74%,0.4)), to(hsla(214,100%,74%,0.4)));
	background-image: linear-gradient(transparent 60%, hsla(214,100%,74%,0.4) 60%);
}
div.vision section > p {
	line-height:1.5;
	margin-bottom:1.25em;
}
@media all and (min-width: 992px) {
div.vision {
	max-width:980px;
	margin:0 auto;
}
div.vision > section {
	padding:40px;
}
div.vision section > h2 {
	font-size:150%;
}
div.vision section > p {
	font-size:150%;
}
}
@media all and (max-width: 991.98px) {
div.vision {
	margin:0 5vw;
}
div.vision > section {
	padding:20px;
}
div.vision section > h2 {
	font-size:112.5%;
}
div.vision section > p {
	font-size:112.5%;
}
}

div.btn-line {
	text-align:right;
}
div.btn-line a {
	display:inline-block;
	position:relative;
	padding-bottom:0.5em;
	text-decoration:none;
	font-weight:500;
	letter-spacing:0.1em;
	line-height:1.25;
	text-decoration:none;
}
div.btn-line a::before,
div.btn-line a::after {
	content:"";
	position:absolute;
	right:0;
	bottom:0;
}
div.btn-line a::before {
	left:0;
	height:2px;
	background:#001d6e;
}
div.btn-line a::after {
	width:16px;
	height:2px;
	background:#001d6e;
	transform-origin:right bottom;
	transform:rotate(45deg);
}
div.btn-line a span {
	display:inline-block;
	padding-left:1em;
	padding-right:2em;
}
@media all and (min-width: 992px) {
div.btn-line a span {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
div.btn-line a span {
	font-size:87.5%;
}
}





@media all and (min-width: 992px) {
div.fb {
	margin-bottom: 60px;
}
}
@media all and (max-width: 991.98px) {
div.fb {
	padding: 0 5vw;
	margin-bottom: 30px;
}
div.fb iframe {
	width: 100%;
	max-width: 500px;
	border: 0;
}
}