@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');
@import url("animation.css");
@import url("inview.css");


@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

html,body {
	margin: 0;padding: 0;
	height: 100%;
	font-size: 13px;
	scroll-behavior: smooth;
}


body {
	font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	
	color: #555;		
	line-height: 2;		
	overflow-x: hidden;
}

figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

ul, ol {margin-bottom: 30px;}

a {
	color: #fff;	
	transition: 0.3s;
}

a:hover {
	opacity: 0.8;	
}

section,
main > article {
	margin: 60px 0 20px 0;
	max-width: 1300px;	
	padding: 2% 5%;		
}


#container {
	height: 100%;
	display: flex;					
	flex-direction: column;			
	justify-content: space-between;	
}

header {
	display: flex;				
	align-items: center;		
	justify-content: flex-end;	
	background: #FFFF;			
	color: #fff;				
	position: relative; z-index: 1;
}

header a {
	color: #111;
	font-size: 18px;
}

header #logo img {
	display: block;
}

header #logo {
	margin: 0;
	background-color: #FFFF;
	width: 200px;
	padding: 20px 0 0 0 ;
	position: absolute;
	left: 3%;	
	top: 0px;	
}

#menubar ul {list-style: none;margin: 0;padding: 0 20px 0 0 ;}

#menubar {display: none;}

#menubar.db {display: block;}
#menubar.dn {display: none;}

#menubar a {
	display: block;text-decoration: none;
	text-align: center;		
	letter-spacing: 0.1em;	
	font-weight: bold;
}

.s #menubar.db li.inline,
.s #menubar.db li.inline a {
	display: inline-block;
}

.s #menubar.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 0;	
	background: rgba(0,0,0,0.9);		
	color: #FFFF;						
	animation: animation1 0.2s both;	
	text-align: center;
}

.s #menubar.db a {
	color: #FFFF;	
	padding: 20px;	
}

#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

#menubar_hdr {
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3%;			
	top: 0px;			
	padding: 16px 14px;	
	width: 52px;		
	height: 52px;		
	display: flex;					
	flex-direction: column;			
	justify-content: space-between;	
	order: 0;							
	background: rgba(0,0,0,0.5);	
}

#menubar_hdr span {
	display: block;
	transition: 0.3s;	
	border-top: 2px solid #fff;	
}

#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	
	width: 26px;						
}

#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(6px, 7px);	}

#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(6px, -7px);	
}

#menubar_hdr.ham span:nth-of-type(2){
	display: none;	
}

main {	
	flex: 1;
	margin: 0 auto;
}

body:not(.home) main {
	padding-top: 80px;
}

main h2 {
	margin-bottom: 30px;	
	position: relative;		
	letter-spacing: 0.1em;	
	text-align: center;
}

main h2 .uline {
	display: inline-block;position: relative;
	padding: 10px 20px;	
	bottom: -3px;		
}

main h2 .uline::before {
	content: "";position: absolute;bottom: 0px;left: 0px;width: 100%;
	height: 3px;	
	background: #920a00;		
	transition: 1s 0.5s;		
	transform: scaleX(0);		
}

main h2.linestyle .uline::before {
	transform: scaleX(1);
}

main h3 {
	margin-bottom: 20px;	
}

main p {
	margin: 0 20px 30px;	
}

.list-container {
	text-align: center;
}

/* footer */

.footer_small {
	font-size: 100%;
	text-align: center;
	color: #fff;			
	padding-bottom: 20px;
}

#footermenu {
	font-size: 0.7rem;		
	text-align: center;		
	padding: 50px 50px 0;	
	color: #fff;	
	margin-top: -10px;		
}
.footer_wrapper {
	background-color: #111;
	color: #fff;			

}

footer a {
	text-decoration: none;
	color: #fff;
	font-size: 1rem;
}

footer .pr {display: block; text-align: center;}

#footermenu li {
	display: inline-block;	
	padding: 0 10px;		
}

/* FV */

h1 {
	font-size: 0;
}

#first_block {
	padding-top: 30px;
}
.Fv {
	position: relative;
	margin-top: 56px;
	
}
.mv-text{
	text-align: center;
	position: absolute;
	top: 39%;
	left: 30%;
	font-size: 26px;
	letter-spacing: 1.4px;
	color: #fff;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	/* text-shadow: 5px 3px 6px #666; */
}

.Pc_h1 {
	line-height: 2;
	font-size: 43px;
	border-bottom: solid 2px #fff;
	text-align: initial;
	margin-bottom: .8em;
}
.Fv_box {
	position: absolute;
}

.Fv img {
	width: 100svw;
	height: 100svh;
}
.FV_image {
	background-image: url(../images/PC-FV.png);
	height: 100vh;
	width: 100vw;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	max-height: 1090px;
}

#characteristic {
	margin-bottom: 100px;
	display: flex;
	flex-direction: column;
}

.box {
	border: #f5f5f5 2px solid;
	border-radius: 10px;
	box-shadow: #e4e2d7 30px 15px 10px;
	margin-top: 90px;
	position: relative;
	width: calc(100% / 2 );
}
.box:nth-of-type(2),.box:nth-of-type(4) {
	align-self: flex-end;
	box-shadow: #e4e2d7 -30px 15px 10px;
}
.box::after {
	bottom: -85px;
	height: 70px;
	content: '';
	position: absolute;
}
.box:nth-of-type(1)::before, .box:nth-of-type(3)::before {
	right: -.1%;
	border-bottom: #920a00 3px solid;
	transform: rotate(45deg);
}

.box:nth-of-type(1)::after, .box:nth-of-type(3)::after {
	right: 0%;
	border-right: 3px #920a00 solid;

}

.box:nth-of-type(2)::after{
	border-left: #920a00 3px solid;
	left: 0%;
}
.box h2 {
	text-align: left;
	font-size: 25px;
	color: #920a00;
}

.box_wrapper {
	display: flex;
	align-items: center;
}

.box_wrapper h3 {
	padding-left: 15px;
}
/* .clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #a29276 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #666; color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: #ffcc00 !important;}
.small {font-size: 0.6em;} */


@media screen and (min-width:600px) {
	.list {
		display: flex;					
		justify-content: space-between;	
	}

	.list figure {
		width: 30%;
		margin-right: 5%;
	}

	.list .text {
		flex: 1;
		margin-right: 5%;
	}
}


@media screen and (min-width:900px) {
	html, body {
		font-size: 15px;	
	}

	header {
		position: fixed;	
		width: 100%;
	}

	#menubar {
		font-size: 0.85em;	
	}
	#menubar ul {
		display: flex;	
	}

	#menubar a {
		padding: 10px 15px;	
	}

	.ws {
		width: 48%;
		display: inline;
}

}

@media screen and (max-width:1125px) {
	.Pc_h1 {
		font-size: 35px;
		top: 12%;
	}
	.mv-text {
		font-size: 28px;
		top: 23%;
		left: 38%;
	}
	.FV_image {
		background-image: url(../images/MB-FV.png);
		max-height: initial;
	}
}

@media screen and (max-width:800px) {
	.mv-text{
		font-size: 23px;
	}
	.Pc_h1 {
		font-size: 29px;
	}
}


@media screen and (max-width:600px) {
	.Pc_h1  {
		font-size: 15px;
	}
	.Fv_wrapper p {
		font-size: 14px;
	}
	
	.box {
		width: auto;
	}

	.box:nth-of-type(2),.box:nth-of-type(4) {
		box-shadow: #e4e2d7 30px 15px 10px;
	}

	.box:nth-of-type(1)::after, .box:nth-of-type(3)::after {
		right: 50%;
	}
	
	.box:nth-of-type(2)::after{
		left: 50%;
	}
}