@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@600;900&display=swap');
html,body,h1,h2,h3,h4,h5,h6,p,span,div,object,iframe,em,ul,ol,li,label,dl,dt,dd,form,label,table,tbody,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-family:inherit; list-style-type:none; list-style-image:none; } html { font-size:62.5%; overflow-y:scroll; } img { border:none; vertical-align:bottom; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } body { background: #fff; margin:0 !important; letter-spacing: 0; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; } *html .clearfix{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

.nopc { display: none; }
.nosp { display: inline-block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

@media screen and (max-width:768px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
}

/* --------------------------------------------------------------------------
   header / footer
-------------------------------------------------------------------------- */

header {
	display: flex; width: 100%; height: 90px; padding: 0 30px; justify-content: space-between;
	align-items: center; box-sizing: border-box; z-index: 9999;
}
header a { display: block; width: 250px; }
header h1 {
	display: block; width: 100%; height: 0; padding: 0 0 13%;
	background: center/cover no-repeat url(../image/logo.svg);
	text-indent: 200%; white-space: nowrap; overflow: hidden;
}
header p { width: 180px; }
header p i {
	display: block; width: 100%; height: 0; padding: 0 0 18%;
	background: 0 0/auto 300% no-repeat url(../image/h2.svg);
	text-indent: 200%; white-space: nowrap; overflow: hidden;
}
footer {
	position: relative; width: 100%; padding: 20px 0; background: #f8f8f8;
	font: 600 1.3rem/1.6 'Zen Old Mincho'; text-align: center;
}
footer .totop {
	display: block; position: fixed; bottom: 70px; right: 20px; width: 50px; height: 50px;
	background: #f2f2f2; border-radius: 40px; z-index: 99;
}
footer .totop i {
	display: block; position: absolute; top: 60%; left: 50%; width: 16px; height: 16px;
	border: solid 3px #000; border-width: 3px 3px 0 0; text-indent: 100%; white-space: nowrap;
	overflow: hidden; transform: translate(-50%,-50%) rotate(-45deg);
}
footer .totop:hover { filter: brightness(80%); transition: all 0.2s ease 0s; }

@media screen and (max-width: 768px) {
	header { height: 60px; padding: 0 4%; }
	header a { width: 50%; }
	header p { width: 31%; }
	footer .totop { bottom: 90px; right: 5%; }
}

/* --------------------------------------------------------------------------
   common
-------------------------------------------------------------------------- */

section { width: 100%; min-width: 1200px; padding: 60px 0; }
section:nth-of-type(odd) { background: linear-gradient(#f8f8f8,#fff 5%,#fff 95%,#f8f8f8); }
section * img { width: 100%; }
article { width: 1100px; margin: 0 auto; }
section h2 { width: 300px; font: 600 4.8rem/1.6 'Zen Old Mincho'; }
section h2 i {
	display: block; width: 100%; height: 0; padding: 0 0 18%;
	background: 0 0/auto 300% no-repeat url(../image/h2.svg);
	text-indent: 200%; white-space: nowrap; overflow: hidden;
}
section h3 { font: 600 2.4rem/2.0 'Zen Old Mincho'; }
section h4 { font: 600 6.4rem/1.6 'Zen Old Mincho'; }
section p { font: 600 1.6rem/1.8 'Zen Old Mincho'; }

@media screen and (max-width: 768px) {
	section { min-width: 100%; padding: 40px 0; }
	article { width: 90%; }
	section h2 { width: 60%; font-size: 3.2rem; }
	section h3 { font-size: 2.0rem; }
	section h4 { font-size: 3.0rem; }
}

/* --------------------------------------------------------------------------
   lead
-------------------------------------------------------------------------- */

#lead { text-align: center; }
#lead p { font: 900 2.2rem/1.8 'Zen Old Mincho'; }

@media screen and (max-width: 768px) {
	#lead p { font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   philosophy
-------------------------------------------------------------------------- */

#philosophy article {
	display: flex; padding: 0 0 240px; justify-content: space-between;
	background: bottom left/70% auto no-repeat url(../image/philosophy.jpg);
}
#philosophy h2 { width: auto; }
#philosophy p { width: 520px; }
#philosophy p span { display: block; margin: 1.0em 0 0; }

@media screen and (max-width: 768px) {
	#philosophy article { display: block; padding: 0 0 60vw; background-size: 100% auto; }
	#philosophy h2 { margin: 0 0 24px; }
	#philosophy p { width: 100%; }
}

/* --------------------------------------------------------------------------
   purpose
-------------------------------------------------------------------------- */

#purpose .book { display: flex; align-items: center; }
#purpose .book li { width: 50%; }
#purpose h4 { margin: 0 0 24px; }

@media screen and (max-width: 768px) {
	#purpose .book { display: block; }
	#purpose .book li { width: 100%; }
	#purpose h4 { margin: 16px 0; }
	#purpose p { margin: 0 0 20px; }
}

/* --------------------------------------------------------------------------
   vision
-------------------------------------------------------------------------- */

#vision article { display: flex; justify-content: space-between; align-items: center; }
#vision h2 i { background-position: 0 50%; }
#vision .title { width: 500px; }
#vision .title .ill { position: relative; top: -30px; display: block; }
#vision .text { width: 540px; }
#vision h4 { margin: 0 0 1.0em; }

@media screen and (max-width: 768px) {
	#vision article { display: block; }
	#vision .title, #vision .text { width: 100%; }
	#vision h4 { margin: 0 0 .6em; }
}

/* --------------------------------------------------------------------------
   action
-------------------------------------------------------------------------- */

#action article { display: flex; justify-content: space-between; }
#action h2 i { background-position: 0 100%; }
#action p { width: 450px; }
#action .ill { display: block; width: 850px; margin: 0 auto; }

@media screen and (max-width: 768px) {
	#action article { display: block; }
	#action p { width: 100%; margin: 24px 0; }
	#action .ill { width: 100%; }
}

/* --------------------------------------------------------------------------
   message
-------------------------------------------------------------------------- */

#message { text-align: center; }
#message h2 { width: auto; margin: 0 0 36px; font-size: 3.6rem; }
#message p span { display: block; margin: 1.0em 0 0; }
#message .date { margin: 36px 0 0; }
#message .sign { width: 204px; margin: 0 auto; }
#message .sign i {
	display: block; width: 100%; height: 0; padding: 0 0 28.125%;
	background: center/cover no-repeat url(../image/sign.png);
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}

@media screen and (max-width: 768px) {
	#message { padding: 40px 0 60px; text-align: left; }
	#message h2 { margin: 0 0 24px; font-size: 2.4rem; text-align: center; }
	#message .date { margin: 24px 0 0; text-align: center; }
	#message .sign { width: 40%; }
}

/* --------------------------------------------------------------------------
   animation
-------------------------------------------------------------------------- */

.di { opacity: 0; transform: translateY(-30px); }
.di.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}