@charset "utf-8";

@font-face{
	font-family:'Noto Serif JP';
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url('font/NotoSerifJP-Medium.woff2') format('woff2'),url('font/NotoSerifJP-Medium.woff') format('woff'); 
	}
@font-face{
	font-family:'EB Garamond';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('font/EBGaramond-Regular.woff2') format('woff2'),url('font/EBGaramond-Regular.woff') format('woff'); 
	}
@font-face{
	font-family:'EB Garamond';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url('font/EBGaramond-SemiBold.woff2') format('woff2'),url('font/EBGaramond-SemiBold.woff') format('woff'); 
	}

body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,
table,th,td,
blockquote,pre,address,form,fieldset,legend{
	margin:0;
	padding:0;
	color:#192337;
	line-height:1.4;
	font-family:"Noto Serif JP",Helvetica,Lucida Grande,Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	font-size:17px;
	font-weight:500;
	letter-spacing:0.05em;
	border:none;
	}
body{
	font-family:"Noto Serif JP",Helvetica,Lucida Grande,Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	font-size:17px;
	font-weight:500;
	line-height:1.4;
	-webkit-text-size-adjust:100%;
	}
table{
	border-collapse:collapse;
	border-spacing:0;
	}
img{
	border:0;
	display:block;
	font-size:0;
	line-height:0;
	max-width:100%;
	height:auto;
	}
a:hover img{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	}
li{
	list-style-type:none;
	}
p{
	line-height:2.4;
	font-size:17px;
	font-weight:500;
	text-align:justify;
	text-justify:inter-ideograph;
	}
a{
	text-decoration:none;
	color:#192337;
	}
a:hover{
	text-decoration:underline;
	color:#5E6573;
	}
/* RESET HTML5 */
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;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

#allbg{
	position:relative;
	}
#allbg:after{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:#FFF;
	z-index:-5;
	}
header{
	position:absolute;
	width:100%;
	height:100vh;
	mix-blend-mode:difference;
	z-index:100;
	top:0;
	left:0;
	}
header:after{
	content:"";
	display:block;
	width:100%;
	height:300px;
	position:absolute;
	left:0;
	top:0;
	background-color:#FFF;
	z-index:50;
	}
header h1{
	position:absolute;
	left:6%;
	top:60px;
	z-index:100;
	}
header nav{
	position:fixed;
	right:4%;
	bottom:60px;
	z-index:60;
	}
header nav ul li{
	font-size:18px;
	font-family:'EB Garamond';
	font-weight:400;
	margin-top:10px;
	letter-spacing:0.09em;
	}
header nav ul li a{
	color:#787878;
	position:relative;
	padding-left:25px;
	transition:0.3s;
	}
header nav ul li.active a{
	color:#F0F0F0;
	}
header nav ul li a:hover{
	text-decoration:none;
	color:#F0F0F0;
	}
header nav ul li a:after{
	content:"";
	display:block;
	width:9px;
	height:1px;
	background-color:#787878;
	position:absolute;
	left:0;
	top:12px;
	transition:0.3s;
	}
header nav ul li.active a:after{
	background-color:#F0F0F0;
	width:16px;
	}
header nav ul li a:hover:after{
	background-color:#F0F0F0;
	width:16px;
	}
#headbg{
	height:500px;
	overflow:hidden;
	zoom:1;
	background-position:center center;
	background-repeat:no-repeat;
	margin-top:300px;
	position:relative;
	}
#headbg h2{
	position:absolute;
	bottom:80px;
	left:6%;
	}
#headbg h2 span{
	font-size:46px;
	font-family:'EB Garamond';
	font-weight:600;
	color:#FAFAFA;
	display:block;
	letter-spacing:0.05em;
	}
#headbg h2 strong{
	font-size:15px;
	color:#E6E6E6;
	font-weight:500;
	display:block;
	padding-top:5px;
	}
#headbgno{
	width:88%;
	margin:300px auto 0 auto;
	border-top:1px solid #D7D7D7;
	}
.menu{
	position:fixed;
	top:38px;
	right:5%;
	width:45px;
	height:45px;
	display:block;
	cursor:pointer;
	z-index:2000;
	transition:0.4s;
	mix-blend-mode:difference;
	}
.menu:hover{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
	}
.menu1{
	width:45px;
	height:1px;
	background-color:#F0F0F0;
	position:absolute;
	top:13px;
	left:0;
	transition:0.6s;
	}
.menu2{
	width:35px;
	height:1px;
	background-color:#F0F0F0;
	position:absolute;
	top:22px;
	left:0px;
	transition:0.6s;
	}
.menu3{
	width:25px;
	height:1px;
	background-color:#F0F0F0;
	position:absolute;
	top:31px;
	left:0px;
	transition:0.6s;
	}
.menu1,.menu3{
	transition:all 0.5s ease-out;
	-o-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out;
	-webkit-transition:all 0.5s ease-out;
	-ms-transition:all 0.5s ease-out;
	}
.menuclick1{
	width:34px;
	top:22px;
	left:5px;
	-moz-transform:rotate(405deg);
	-webkit-transform:rotate(405deg);
	-o-transform:rotate(405deg);
	-ms-transform:rotate(405deg);
	transform:rotate(405deg);
	}
.menuclick2{
	display:none;
	}
.menuclick3{
	width:34px;
	top:22px;
	left:5px;
	-moz-transform:rotate(-405deg);
	-webkit-transform:rotate(-405deg);
	-o-transform:rotate(-405deg);
	-ms-transform:rotate(-405deg);
	transform:rotate(-405deg);
	}
.titleb span{
	font-size:44px;
	font-family:'EB Garamond';
	font-weight:600;
	display:block;
	letter-spacing:0.05em;
	}
.titleb strong{
	font-size:13px;
	font-weight:500;
	display:block;
	padding-top:5px;
	}
.linkto{
	text-align:left;
	line-height:1.3;
	font-family:'EB Garamond';
	font-weight:400;
	font-size:18px;
	letter-spacing:0.08em;
	}
.linkto a{
	background-color:#2D374B;
	color:#FAFAFA;
	display:inline-block;
	padding:20px 105px 20px 26px;
	position:relative;
	transition:0.3s;
	}
.linkto a:hover{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	text-decoration:none;
	}
.linkto a:after{
	content:"";
	display:block;
	position:absolute;
	right:30px;
	top:50%;
	margin-top:-4px;
	width:8px;
	height:8px;
	border-top:1px solid #FAFAFA;
	border-right:1px solid #FAFAFA;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	transition:0.3s;
	}
.linkto a:before{
	content:"";
	width:22px;
	height:1px;
	position:absolute;
	right:29px;
	top:50%;
	background-color:#FAFAFA;
	transition:0.3s;
	}
.linkto a:hover:after{
	right:26px;
	}
.linkto a:hover:before{
	right:25px;
	}
footer{
	padding:90px 8% 90px 430px;
	overflow:hidden;
	zoom:1;
	background-color:#323741;
	position:relative;
	z-index:200;
	text-align:right;
	min-height:410px;
	}
footer h2{
	position:absolute;
	text-align:left;
	left:8%;
	top:90px;
	font-size:15px;
	color:#D6D7D9;
	line-height:1.8;
	letter-spacing:0.1em;
	}
footer h2 a:first-of-type{
	width:150px;
	display:block;
	margin-bottom:50px;
	}
footer h2 a:last-of-type{
	width:30px;
	display:block;
	margin-top:25px;
	}
footer h2 span:nth-of-type(2){
	display:block;
	margin:20px 0 0 -8px;
	}
footer h2 span:nth-of-type(2) strong{
	font-weight:500;
	width:105px;
	display:inline-block;
	text-align:justify;
	text-align-last:justify;
	}
footer nav{
	max-width:100%;
	display:inline-block;
	text-align:left;
	width:580px;
	padding-top:15px;
	}
footer nav ul{
	display:flex;
	justify-content:space-between;
	}
footer nav ul li{
	font-size:18px;
	font-family:'EB Garamond';
	font-weight:600;
	}
footer nav ul li a{
	color:#D6D7D9;
	transition:0.3s;
	letter-spacing:0.1em;
	}
footer nav ul li a:hover{
	text-decoration:none;
	color:#D6D7D9;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
	}
footer small{
	font-size:16px;
	font-family:'EB Garamond';
	font-weight:400;
	display:block;
	color:#ADAFB3;
	letter-spacing:0.12em;
	position:absolute;
	right:8%;
	bottom:100px;
	line-height:1.9;
	}
footer small a{
	color:#ADAFB3;
	}
#spbg{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#323741;
	z-index:1000;
	filter: alpha(opacity=96);
	-moz-opacity:0.96;
	opacity:0.96;
	display:none;
	}
#header2{
	position:fixed;
	right:-540px;
	background-color:#DFE1E6;
	width:540px;
	height:100%;
	z-index:1500;
	top:0;
	overflow-y:scroll;
	-ms-overflow-style:none;
	scrollbar-width:none;
	padding:70px 110px 110px 80px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	}
#header2::-webkit-scrollbar{
	display:none;
	-webkit-appearance:none;
	}
#header2 h2 a{
	display:block;
	width:130px;
	}
#header2 nav ul{
	overflow:hidden;
	zoom:1;
	margin-top:35px;
	}
#header2 nav ul li{
	font-size:22px;
	font-weight:600;
	margin-top:1px;
	line-height:1.2;
	font-family:'EB Garamond';
	}
#header2 nav ul li a{
	display:block;
	background-color:#FAFAFA;
	color:#2D374B;
	padding:19px 30px 19px 28px;
	position:relative;
	}
#header2 nav ul li a:hover{
	text-decoration:none;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	}
#header2 nav ul li a:after{
	content:"";
	display:block;
	position:absolute;
	right:30px;
	top:50%;
	margin-top:-3px;
	width:6px;
	height:6px;
	border-top:1px solid #2D374B;
	border-right:1px solid #2D374B;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	}
#header2 h3{
	font-size:24px;
	font-family:'EB Garamond';
	font-weight:400;
	padding-top:32px;
	text-align:center;
	}
#header2 h3 a:hover{
	text-decoration:none;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	}
#header2 h3 a img{
	display:inline-block;
	margin-left:12px;
	vertical-align:-9px;
	}
@media screen and (max-width:900px){
body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,
table,th,td,
blockquote,pre,address,form,fieldset,legend{
	letter-spacing:0.03em;
	}
p{
	line-height:2.2;
	text-align:start;
	text-justify:auto;
	}
header{
	height:auto;
	}
header:after{
	height:160px;
	}
header h1{
	width:110px;
	top:35px;
	left:7%;
	}
header nav{
	display:none;
	}
#headbg{
	height:240px;
	margin-top:160px;
	}
#headbg h2{
	bottom:30px;
	left:7%;
	}
#headbg h2 span{
	font-size:36px;
	}
#headbg h2 strong{
	padding-top:2px;
	font-size:13px;
	}
#headbgno{
	width:86%;
	margin:160px auto 0 auto;
	}
.menu{
	top:25px;
	right:6%;
	width:35px;
	height:35px;
	}
.menu:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	}
.menu1{
	width:35px;
	top:10px;
	}
.menu2{
	width:25px;
	top:18px;
	}
.menu3{
	width:15px;
	top:26px;
	}
.menuclick1{
	width:27px;
	top:17px;
	left:4px;
	}
.menuclick3{
	width:27px;
	top:17px;
	left:4px;
	}
.titleb span{
	font-size:38px;
	}
.linkto{
	font-size:17px;
	}
.linkto a{
	padding:19px 100px 19px 24px;
	}
.linkto a:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	}
.linkto a:before{
	width:20px;
	}
footer{
	padding:80px 7% 60px 7%;
	text-align:center;
	min-height:auto;
	}
footer h2{
	position:relative;
	text-align:left;
	display:inline-block;
	left:auto;
	top:auto;
	letter-spacing:0.02em;
	}
footer h2 a{
	color:#D6D7D9;
	}
footer h2 a:first-of-type{
	width:130px;
	display:block;
	margin:0 auto 30px auto;
	}
footer h2 a:last-of-type{
	width:36px;
	display:block;
	margin:30px auto 0 auto;
	}
footer h2 a:last-of-type img{
	width:36px;
	}
footer nav{
	display:block;
	width:auto;
	padding-top:40px;
	}
footer nav ul{
	display:block;
	justify-content:normal;
	border-top:1px solid #70737A;
	}
footer nav ul li{
	font-size:17px;
	border-bottom:1px solid #70737A;
	}
footer nav ul li a{
	display:block;
	padding:17px 30px 17px 20px;
	position:relative;
	}
footer nav ul li a:after{
	content:"";
	display:block;
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-2px;
	width:4px;
	height:4px;
	border-top:1px solid #ADAFB3;
	border-right:1px solid #ADAFB3;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	}
footer nav ul li a:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	}
footer small{
	font-size:14px;
	letter-spacing:0.05em;
	position:relative;
	right:auto;
	bottom:auto;
	padding-top:60px;
	}
#header2{
	right:-90%;
	width:90%;
	padding:50px 9% 60px 8%;
	}
#header2 h2 a{
	width:120px;
	}
#header2 nav ul{
	margin-top:30px;
	}
#header2 nav ul li{
	font-size:20px;
	}
#header2 nav ul li a{
	padding:17px 30px 17px 22px;
	}
#header2 nav ul li a:after{
	margin-top:-2px;
	width:4px;
	height:4px;
	right:26px;
	}
#header2 h3{
	font-size:22px;
	padding-top:30px;
	}
#header2 h3 a:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	}
#header2 h3 a img{
	width:27px;
	margin-left:10px;
	vertical-align:-8px;
	}
}