@charset "utf-8";



/* structure
----------------------------------------------------------- */

body{
	background:fixed url(../img/top/visual.webp) no-repeat center top / cover;
}
@media screen and (max-width:1054px){
	body{
		background-image:url(../img/top/visual960.webp);
	}
}
@media screen and (max-width:620px){
	body{
		background-image:url(../img/top/visual540.webp);
	}
}

/* visual
----------------------------------------------------------- */
div#contents{
	overflow:hidden;
}
div#contents h1.ttl{
	max-width:960px;
	position:relative;
	margin:calc(300px + 30px) auto 150px;
	padding:0 0 3px;
	color:#fff;
	font-family: "Zen Maru Gothic", serif;
	font-size:36px;
	font-weight:700;
	font-feature-settings: "palt";
	text-align:center;
	background-color:#ff7f17;
	overflow:visible;
}
div#contents h1.ttl span{
	letter-spacing:-0.15em;
}
div#contents h1.ttl:before{
	width:100%;
	position:absolute;
	top:-200px;
	content:"";
	display:block;
	padding-top:22.57% ;
	background:url(../img/top/ttl_main.png) no-repeat center top / 100% auto;
}
@media screen and (max-width:1054px){
	div#contents h1.ttl{
		width:auto;
		margin-top:calc(20vw + 150px);
		margin:calc(20vw + 150px) auto 150px;
		font-size:32px;
	}
	div#contents h1.ttl:before{
		top:-20vw;
		padding-top:20vw;
	}
}
@media screen and (max-width:760px){
	div#contents h1.ttl{
		font-size:30px;
	}
}
@media screen and (max-width:620px){
	div#contents h1.ttl{
		font-size:28px;
	}
}
@media screen and (max-width:540px){
	div#contents h1.ttl{
		padding:5px 0;
		font-size:24px;
		line-height:1.4;
	}
}
@media screen and (max-width:420px){
	div#contents h1.ttl{
		font-size:22px;
	}
}

/* profile
----------------------------------------------------------- */
div#profile{
	padding:30px;
	background-color:#fff;
}
div#profile h1.ttl{
	width:calc(100% + 60px);
	max-width:none;
	margin:-30px auto 30px -30px;
	padding:15px 0 10px;
	color:#ff7f17;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	font-feature-settings: "palt";
	background-color:#000;
}
div#profile h1.ttl:before{
	display:none;
}
div#profile h2.ttl{
	margin-bottom:30px;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:24px;
	font-weight:bold;
	font-feature-settings: "palt";
}
p strong{
	color:#007dff;
	font-weight:bold;
}
@media screen and (max-width:540px){
	div#profile{
		padding:20px;
	}
	div#profile h1.ttl{
		font-size:22px;
		padding-top:10px;
	}
}
@media screen and (max-width:420px){
	div#profile h1.ttl{
		font-size:20px;
	}
}


/* tab
----------------------------------------------------------- */
div#profile ul.tab{
	margin-bottom:60px;
}
div#profile ul.tab li{
	width:calc(25% - 33.75px);
	position:relative;
	margin-right:45px;
	padding:0;
	text-align:center;
	background-color:#e1e1e1;
	cursor:pointer;
	transition:all 0.3s linear;
}
div#profile ul.tab li:nth-child(4n){
	margin-right:0;
}
div#profile ul.tab li a.act:before{
	content:"";
	position:absolute;
	left:calc(50% - 15px);
	bottom:-20px;
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-top: 20px solid #ff6400;
	border-bottom: 0;
	transition:all 0.3s linear;
}
div#profile ul.tab li a.act:hover:before{
	border-top: 20px solid orange;
}
div#profile ul.tab li a{
	width:calc(100% - 30px);
	display:block;
	padding: 20px 15px 22px;
	text-align:center;
	transition:all 0.3s linear;
}
div#profile ul.tab li a.act{
	color:#fff;
	background-color:#ff6400;
}
div#profile ul.tab li a:hover{
	color:#fff;
	background-color:orange;
}
div#profile div.box{
	width:100%;
}
/* transform */
div#profile.transform ul.tab{
	width: calc(90% - 60px);
	position: fixed;
	top: 100px;
	z-index:5;
	transition:all 0.3s linear;
}
div#profile.transform ul.tab li a{
	padding:5px 15px 7px;
}
div#profile.transform #reason,
div#profile.transform #flow,
div#profile.transform #message,
div#profile.transform #company{
	margin-top:calc(1em + 135px);
}
@media screen and (max-width:1024px){
	div#profile ul.tab li{
		width:calc(25% - 11.25px);
		margin-right:15px;
	}
}
@media screen and (max-width:900px){
	div#profile ul.tab li:nth-child(4) a{
		padding:calc(20px - 0.75em) 15px;
	}
}
@media screen and (max-width:540px){
	div#profile ul.tab,
	div#profile.transform ul.tab{
		width: calc(88.89vw - 10px + 25px);
		margin-left:-25px;
	}
	div#profile ul.tab li {
		width: calc(50% - 2.5px);
		margin-right: 5px;
		margin-bottom:5px;
	}
	div#profile.transform ul.tab li {
		width: calc(50% - 2.5px);
		margin-right:5px;
		margin-bottom:5px;
	}
	div#profile ul.tab li:nth-child(2n) {
		margin-right: 0;
	}
	div#profile ul.tab li a {
		width: calc(100% - 30px);
	}
	div#profile ul.tab li:nth-child(4) a{
		padding:20px 15px 22px;
	}
	div#profile.transform ul.tab li:nth-child(4) a{
		padding:5px 15px 7px;
	}
	div#profile ul.tab li a.act::before{
		display:none;
	}
}

/* reason
----------------------------------------------------------- */
div#reason{
	background:url(../img/top/profile_ill.gif) no-repeat right top / 225px auto;
}
div#reason h2.ttl + p{
	width:calc(100% - 90px - 225px);
	min-height:260px;
	margin-bottom:30px;
	padding-right:calc(90px + 220px);
}
ul#merit{}
ul#merit li{
	width:calc(33.33% - 40px);
	margin:0 60px 30px 0;
}
ul#merit li:nth-child(3n){
	margin-right:0;
}

ul#merit li:before{
	width:100%;
	display:block;
	margin-bottom:15px;
	color:#ff7f17;
	font-family: 'Akrobat Bold', sans-serif;
	font-size:100px;
	text-align:center;
	line-height:1;
}
	
ul#merit li:nth-child(1):before{content:"1";}
ul#merit li:nth-child(2):before{content:"2";}
ul#merit li:nth-child(3):before{content:"3";}
ul#merit li:nth-child(4):before{content:"4";}
ul#merit li:nth-child(5):before{content:"5";}
ul#merit li:nth-child(6):before{content:"6";}

ul#merit li h3.ttl{
	margin-bottom:30px;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:24px;
	font-weight:bold;
}

@media screen and (max-width:1054px){
	ul#merit li{
		width:calc(33.33% - 11.25px);
		margin:0 15px 30px 0;
	}
}
@media screen and (max-width:760px){
	div#reason {
		background:none;
	}
	div#reason h2.ttl + p{
		width:100%;
		min-height:0;
		padding-right:0;
		padding-bottom:calc(263px + 30px);
		background: url(../img/top/profile_ill.gif) no-repeat center bottom / 225px auto;
	}
	ul#merit li{
		width:calc(50% - 15px);
		margin:0 30px 30px 0;
	}
	ul#merit li:nth-child(3n){margin-right:30px;}
	ul#merit li:nth-child(2n){margin-right:0;}
}
@media screen and (max-width:680px){
	ul#merit li h3.ttl{
		font-size:22px;
	}
}
@media screen and (max-width:600px){
	ul#merit li h3.ttl{
		font-size:20px;
	}
}
@media screen and (max-width:540px){
	ul#merit li{
		width:100%;
		margin:0 0 30px 0;
	}
	ul#merit li:nth-child(3n){margin-right:0;}
	ul#merit li:nth-child(2n){margin-right:0;}
	ul#merit li h3.ttl{
		font-size:24px;
	}
}
@media screen and (max-width:420px){
	ul#merit li h3.ttl{
		font-size:20px;
	}
}

/* flow
----------------------------------------------------------- */
div#flow{
}
div#flow dl{
}
div#flow dl dt{
	width:calc(40% - 6em);
	min-height:3.2em;
	position:relative;
	padding-top:30px;
	padding-bottom:30px;
	padding-left:6em;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:24px;
	font-weight:bold;
	border-top:1px #ccc solid;
}
div#flow dl dd{
	width:60%;
	padding-top:30px;
	padding-bottom:30px;
	border-top:1px #ccc solid;
}
div#flow dl dt:nth-child(1),
div#flow dl dd:nth-child(2){
	border-top:none;
}

div#flow dt:before{
	width:30%;
	position:absolute;
	top:10px;
	left:0;
	display:block;
	color:#ff7f17;
	font-family: 'Akrobat Bold', sans-serif;
	font-size:100px;
	text-align:center;
	line-height:1;
}
div#flow dt:nth-child(1):before{content:"1";}
div#flow dt:nth-child(3):before{content:"2";}
div#flow dt:nth-child(5):before{content:"3";}
div#flow dt:nth-child(7):before{content:"4";}
div#flow dt:nth-child(9):before{content:"5";}
div#flow dt:nth-child(11):before{content:"6";}


@media screen and (max-width:1054px){
	div#flow dl{
		margin:-30px 0 0;
	}
	div#flow dl dt{
		width:calc(100% - 4em);
		min-height:0;
		padding-left:4em;
		padding-bottom:0;
	}
	div#flow dl dd{
		width:calc(100% - 6em);
		padding-top:0;
		padding-left:6em;
		padding-bottom:30px;
		border-top:none;
	}
	div#flow dt:before{
		width:0.5em;
		top:18px;
	}
}
@media screen and (max-width:540px){
	div#flow dl dt{
		width:100%;
		padding-top:4em;
		padding-left:0;
		text-align:center;
	}
	div#flow dl dd{
		width:100%;
		padding-top:0;
		padding-left:0;
	}
	div#flow dt:before{
		width:100%;
		top:0;
	}
}
@media screen and (max-width:420px){
	div#flow dl dt{
		padding-top:4.5em;
		font-size:20px;
	}
}

/* company
----------------------------------------------------------- */
div#flow,
div#message,
div#company{
	display:none;
}
div#company p.message{
	min-height:266px;
	margin-bottom:30px;
	padding-left:390px;
	background:url(../img/top/entrance.webp) no-repeat left top / 360px auto;
}
div#company p.message strong{
	display:block;
	margin-bottom:20px;
	padding-bottom:15px;
	font-size:20px;
	border-bottom:5px #e1e1e1 solid;
}
div#company dl#company_profile{}

div#company dl#company_profile dt,
div#company dl#company_profile dd{
	padding:15px 0;
	border-top:1px #ccc solid;
}
div#company dl#company_profile dt{
	width:20%;
	padding-right:5%;
}
div#company dl#company_profile dd{
	width:75%;
}
div#company dl#company_profile dt:nth-child(23),
div#company dl#company_profile dd:last-child{
	width:100%;
	padding-right:0;
}
div#company dl#company_profile dd:last-child{
	padding-top:0;
	border-top:0;
}

@media screen and (max-width:960px){
	div#company p.message {
	  min-height: 0;
	  padding-left: 0;
	  padding-bottom:calc(401px + 30px);
	  background-position:center bottom;
	  background-size:541px auto;
	}
}
@media screen and (max-width:660px){
	div#company p.message {
	  padding-bottom:calc(100vw*0.741219 - 120px*0.741219 + 30px);
	  background-size:100% auto;
	}
}
@media screen and (max-width:660px){
	div#company dl#company_profile dt,
	div#company dl#company_profile dd{
		width:100%;
		padding:15px 0;
	}
	div#company dl#company_profile dt{
		padding-bottom:0;
	}
	div#company dl#company_profile dt:before{
		content:"■";
	}
	div#company dl#company_profile dd{
		padding-top:0;
		border-top:none;
	}
}
@media screen and (max-width:540px){
	div#company p.message {
	  padding-bottom:calc(100vw*0.741219 - 90px*0.741219 + 30px);
	}
}