@charset "UTF-8";

body{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1.0rem;
	line-height:1.75em;
	font-weight:300;
	
	background-color:#f0f0f0;
	color:#000;
}

a{
	color:#f00;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

img{
	max-width: 100%;
	max-height: 100%;
}

.noto-sans-jp {
	font-family: 'Noto Sans JP', sans-serif;
}

.noto-serif-jp {
	font-family: 'Noto Serif JP', serif;
}

/*/////-----HEADER-----/////*/

#header{
	width:100%;
	
	background-color:#fff;
	color:#000;
}

#header div.content{
	width:100%;
	margin:0 auto;
	max-width: 960px;
}

#header h1{
	width:240px;
}

#header h1 a{
	display:block;
}

#header h1 img{
	width:100%;
	vertical-align: bottom;
}

#header nav.navigation{
	display:none;
}

#header div.contactus{
	display:none;
}

@media only screen and (min-width: 720px){
	
	#header div.content{
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
	}
	
	#header div.contactus{
		display:block;
		width:calc(100% - 240px);
		
		box-sizing: border-box;
		padding-right:80px;
	}
	
	#header div.contactus div.inner{
		display:flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-end;
		
		width:100%;
		height:100%;
	}
	
	#header div.contactus div.inner p.phone{
		width:calc(100% - 80px);
		
		box-sizing: border-box;
		padding:10px;
		
		text-align: right;
	}
	
	#header div.contactus div.inner p.phone a{
		display:block;
		color:#f80;
		
		transition:0.25s;
	}
	
	#header div.contactus div.inner p.phone a:hover{
		opacity: 0.8;
		text-decoration: none;
	}
	
	#header div.contactus div.inner p.phone span.number{
		display:inline-block;
		
		font-size:1.25rem;
		line-height:30px;
		
		position: relative;
		
		box-sizing: border-box;
		padding-left:30px;
	}
	
	#header div.contactus div.inner p.phone span.number:before{
		display:block;
		content:"";
		
		width:30px;
		height:30px;
		
		/*background-color:#f0f0f0;*/
		
		position: absolute;
		top:0;
		left:0;
		
		background-image: url("../images/icon_phone-color.webp");
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: center;
	}
	
	#header div.contactus div.inner p.phone span.note{
		display:block;
		
		font-size:0.6rem;
		line-height:10px;
		
		color:#000;
	}
	
	#header div.contactus div.inner p.email{
		width:80px;
		
		box-sizing: border-box;
		padding:10px;
	}
	
	#header div.contactus div.inner p.email a{
		display:block;
		
		background-color:#f80;
		color:#fff;
		
		font-size:0.6rem;
		font-weight:bold;
		line-height:10px;
		
		text-align: center;
		
		box-sizing: border-box;
		padding-top:35px;
		padding-bottom:15px;
		
		border-radius:2.5px;
		
		background-image: url("../images/icon_mail-white.webp");
		background-repeat: no-repeat;
		background-size:20px;
		background-position: center top 10px;
		
		transition:0.25s;
	}
	
	#header div.contactus div.inner p.email a:hover{
		opacity: 0.8;
		text-decoration: none;
	}
	
}

@media only screen and (min-width: 960px){
	
	#header h1{
		width:240px;
	}
	
	#header nav.navigation{
		display:block;
		width:calc(100% - 500px);
	}
	
	#header nav.navigation ul{
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: center;
		
		width:100%;
	}
	
	#header nav.navigation ul li{
		width:calc(100%/3);
		
		box-sizing: border-box;
		padding:0 2.5px;
		
		text-align: center;
	}
	
	#header nav.navigation ul li a{
		display:block;
		
		background-color:#000;
		color:#fff;
		
		box-sizing: border-box;
		padding:20px 0;
		
		transform: skewX(-15deg);
		
		transition:0.25s;
	}
	
	#header nav.navigation ul li a:hover{
		opacity: 0.8;
		text-decoration: none;
	}
	
	#header nav.navigation ul li.aboutus a{
		background-color:#f00;
	}
	
	#header nav.navigation ul li.business a{
		background-color:#094;
	}
	
	#header nav.navigation ul li.recruit a{
		background-color:#f80;
	}
	
	#header nav.navigation ul li span.note-ja{
		display:block;
		
		font-size:1.0rem;
		line-height:20px;
		font-weight:500;
		
		transform: skewX(15deg);
	}
	
	#header nav.navigation ul li span.note-en{
		display:inline-block;
		
		font-size:0.8rem;
		line-height:20px;
		font-weight:300;
		
		box-sizing: border-box;
		padding:0 10px;
		
		position: relative;
		
		transform: skewX(15deg);
	}
	
	#header nav.navigation ul li span.note-en:before{
		display:block;
		content:"";
		
		width:5px;
		height:1px;
		
		background-color:#fff;
		
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		
		margin:auto 0;
	}
	
	#header nav.navigation ul li span.note-en:after{
		display:block;
		content:"";
		
		width:5px;
		height:1px;
		
		background-color:#fff;
		
		position: absolute;
		top:0;
		bottom:0;
		right:0;
		
		margin:auto 0;
	}
	
	#header div.contactus{
		width:260px;
		padding-right:0;
	}
	
}

/*/////-----FOOTER-----/////*/

#footer{
	width:100%;
	
	background-color:#f00;
	color:#fff;
}

#footer div.content{
	width:100%;
	margin:0 auto;
	max-width: 960px;
}

#footer div.siteinfo{
	width:100%;
	
	box-sizing: border-box;
	padding:20px;
}

#footer div.siteinfo p.logo{
	margin-bottom:10px;
}

#footer div.siteinfo p.logo a{
	display:block;
	
	text-align: center;
}

#footer div.siteinfo p.logo img{
	width:240px;
	vertical-align: bottom;
}

#footer div.siteinfo div.contactus{
	width:180px;
	margin:0 auto 20px;
}

#footer div.siteinfo div.contactus p.leadto{
	font-size:0.6rem;
	line-height:15px;
	font-weight:500;
	
	text-align: center;
	
	background-color:#fff;
	color:#f00;
	
	margin-bottom:5px;
}

#footer div.siteinfo div.contactus p.phone{
	width:100%;
	margin-bottom:10px;
}

#footer div.siteinfo div.contactus p.phone a{
	display:block;
	color:#fff;
}

#footer div.siteinfo div.contactus p.phone a:hover{
	text-decoration: none;
}

#footer div.siteinfo div.contactus p.phone span.number{
	display:inline-block;
	
	font-size:1.25rem;
	line-height:30px;
	
	position: relative;
	box-sizing: border-box;
	padding-left:30px;
}

#footer div.siteinfo div.contactus p.phone span.number:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	left:0;
	
	background-image: url("../images/icon_phone-white.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}

#footer div.siteinfo div.contactus p.phone span.note{
	display:block;
	
	font-size:0.6rem;
	line-height:10px;
	
	color:#fff;
	
	text-align: center;
}

#footer div.siteinfo div.contactus p.email{
	width:100%;
	margin:0 auto;
}

#footer div.siteinfo div.contactus p.email a{
	display:block;
	
	font-size:0.8rem;
	line-height:40px;
	font-weight:500;
	
	color:#fff;
	
	text-align: center;
	
	box-sizing: border-box;
	border:solid 1px #fff;
	
	transition: 0.25s;
}

#footer div.siteinfo div.contactus p.email a:hover{
	opacity: 0.8;
	text-decoration: none;
}

#footer div.siteinfo div.contactus p.email span.note{
	display:inline-block;
	
	box-sizing: border-box;
	padding-left:20px;
	
	position: relative;
}

#footer div.siteinfo div.contactus p.email span.note:before{
	display:block;
	content:"";
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	bottom:0;
	left:-5px;
	
	margin:auto 0;
	
	background-image: url("../images/icon_mail-white.webp");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: center;
}

#footer nav.navigation{
	width:100%;
	margin:0 auto 20px;
}

#footer nav.navigation ul{
	font-size:0.8rem;
	line-height:50px;
}

#footer nav.navigation ul li{
	box-sizing: border-box;
	border-bottom:solid 1px #fff;
}

#footer nav.navigation ul li:first-child{
	border-top:solid 1px #fff;
}

#footer nav.navigation ul li a{
	display:block;
	color:#fff;
	
	box-sizing: border-box;
	padding:0 20px;
	
	transition:0.25s;
}

#footer nav.navigation ul li a:hover{
	opacity: 0.8;
	text-decoration: none;
}

#footer nav.navigation ul li span.note{
	display:inline-block;
	
	box-sizing: border-box;
	padding-left:20px;
	
	position: relative;
}

#footer nav.navigation ul li span.note:before{
	display:block;
	content:"";
	
	width:20px;
	height:20px;
	
	/*background-color:#f69;*/
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	
	margin:auto 0;
	
	background-image: url("../images/icon-arrow-right-white.png");
	background-repeat: no-repeat;
	background-size:7.5px;
	background-position: center;
}

#footer div.extra{
	width:100%
}


#footer div.nintei{
	display:flex;
	flex-flow:row wrap;
	align-items:stretch;
	justify-content:flex-start;
	
	width:100%;
}

#footer div.nintei p{
	width:50%;
	
	box-sizing:border-box;
	padding:10px;
}

#footer div.extra ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
}

#footer div.extra ul li{
	margin:0 2.5px;
}

#footer div.extra ul li a{
	display:block;
	
	width:35px;
	height:35px;
	
	font-size:0;
	line-height:40px;
	
	background-color:#fff;
	
	position: relative;
	
	border-radius:2.5px;
}

#footer div.extra ul li a:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	background-image: url("../images/icon_tx-color.png");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}

#footer div.extra ul li.fb a:before{
	background-image: url("../images/icon_fb-color.png");
}

#footer div.extra ul li.ig a:before{
	background-image: url("../images/icon_ig-color.png");
}

#footer div.extra ul li.yt a:before{
	background-image: url("../images/icon_yt-color.png");
}

#footer address{
	font-size:0.6rem;
	line-height:80px;
	
	text-align: center;
}

@media only screen and (min-width: 720px){
	
	#footer div.content{
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
		
		box-sizing: border-box;
		padding:20px 0;
	}
	
	#footer div.content div.siteinfo{
		width:240px;
	}
	
	#footer div.content nav.navigation{
		width:calc(100% - 480px);
		
		box-sizing: border-box;
		padding:20px;
	}
	
	#footer nav.navigation ul{
		line-height:35px;
	}
	
	#footer nav.navigation ul li{
		border:none;
	}
	
	#footer nav.navigation ul li:first-child{
		border:none;
	}
	
	#footer nav.navigation ul li a{
		padding:0;
		
		transition:0;
	}
	
	#footer nav.navigation ul li a:hover{
		opacity: 1;
	}
	
	#footer div.content div.extra{
		width:240px;
		
		box-sizing: border-box;
		padding:20px;
	}
	
}

@media only screen and (min-width: 960px){
	
	#footer nav.navigation ul{
		display:flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width:100%;
		
		box-sizing: border-box;
		padding:0 40px;
	}
	
	#footer nav.navigation ul li{
		width:50%;
	}
	
}

/*//////////----- PAGETOP -----//////////*/

#pagetop{
	position: fixed;
	bottom:70px;
	right:10px;
	
	z-index: 20;
}

#pagetop p.btn{
	width:60px;
	height:60px;
	
	font-size:0.8rem;
	line-height:30px;
	font-weight:500;
	
	text-align: center;
}

#pagetop p.btn a{
	display:block;
	
	box-sizing: border-box;
	padding-top:30px;
	
	background-color:#f44;
	color:#fff;
	
	position: relative;
	border-radius:5px;
	
	transition: 0.25s;
}

#pagetop p.btn a:before{
	display:block;
	content:"";
	
	width:40px;
	height:40px;
	
	position: absolute;
	top:0;
	left:0;
	right:0;
	
	margin:0 auto;
	
	background-image: url("../images/icon-pagetop-white.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}

#pagetop p.btn a:hover{
	text-decoration: none;
	opacity: 0.8;
}

@media only screen and (min-width: 480px){
	
	#pagetop{
		bottom:20px;
		right:20px;
	}
	
}

/*/////-----DRAWER-----/////*/

#drawer{
	position: fixed;
	top:0;
	right:-375px;
	
	width:375px;
	height:100%;
	
	z-index: 20;
}

#drawer input[type="checkbox"]{
	display:none;
}

#drawer label{
	display:block;
	
	width:80px;
	height:80px;
	
	position: absolute;
	top:0;
	right:375px;
	
	/*background-color:#000;*/
	
	z-index: 30;
}

#drawer label:hover{
	cursor: pointer;
}

#drawer p.btn-toggle{
	width:60px;
	height:60px;
	
	background-color:#f00;
	color:#fff;
	
	position: absolute;
	top:10px;
	right:385px;
	
	border-radius:2.5px;
	
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	
	transition: 0.25s;
	
	z-index: 10;
}

#drawer p.btn-toggle:hover{
	cursor: pointer;
	opacity: 0.6;
}

#drawer p.btn-toggle span.note{
	display:block;
	
	width:30px;
	height:2.5px;
	
	background-color:#fff;
	
	position: relative;
	
	transition: 0.25s;
}

#drawer input[type="checkbox"]:checked ~ p.btn-toggle span.note{
	background-color:transparent;
}

#drawer p.btn-toggle span.note:before{
	display:block;
	content:"";
	
	width:30px;
	height:2.5px;
	
	background-color:#fff;
	
	position: absolute;
	top:-10px;
	left:0;
	
	transition: 0.25s;
}

#drawer input[type="checkbox"]:checked ~ p.btn-toggle span.note:before{
	transform: rotate(45deg);
	top:0;
	
	height:1.5px;
}

#drawer p.btn-toggle span.note:after{
	display:block;
	content:"";
	
	width:30px;
	height:2.5px;
	
	background-color:#fff;
	
	position: absolute;
	top:10px;
	left:0;
	
	transition: 0.25s;
}

#drawer input[type="checkbox"]:checked ~ p.btn-toggle span.note:after{
	transform: rotate(-45deg);
	top:0;
	
	height:1.5px;
}

.drawer-content{
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	right:0;
	
	background-color:#f44;
	color:#fff;
	
	transition: 0.25s;
	
	overflow-y: scroll;
}

#drawer input[type="checkbox"]:checked ~ .drawer-content{
	right:375px;
}

.drawer-content div.siteinfo{
	width:240px;
	margin:0 auto;
	
	box-sizing: border-box;
	padding:20px;
}

.drawer-content div.siteinfo p.logo{
	margin-bottom:10px;
}

.drawer-content div.siteinfo p.logo a{
	display:block;
	
	text-align: center;
}

.drawer-content div.siteinfo p.logo img{
	width:100%;
	vertical-align: bottom;
}

.drawer-content div.siteinfo div.contactus{
	width:180px;
	margin:0 auto 20px;
}

.drawer-content div.siteinfo div.contactus p.leadto{
	font-size:0.6rem;
	line-height:15px;
	font-weight:500;
	
	text-align: center;
	
	background-color:#fff;
	color:#f00;
	
	margin-bottom:5px;
}

.drawer-content div.siteinfo div.contactus p.phone{
	width:100%;
	margin-bottom:10px;
}

.drawer-content div.siteinfo div.contactus p.phone a{
	display:block;
	color:#fff;
}

.drawer-content div.siteinfo div.contactus p.phone a:hover{
	text-decoration: none;
}

.drawer-content div.siteinfo div.contactus p.phone span.number{
	display:inline-block;
	
	font-size:1.25rem;
	line-height:30px;
	
	position: relative;
	box-sizing: border-box;
	padding-left:30px;
}

.drawer-content div.siteinfo div.contactus p.phone span.number:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	left:0;
	
	background-image: url("../images/icon_phone-white.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}

.drawer-content div.siteinfo div.contactus p.phone span.note{
	display:block;
	
	font-size:0.6rem;
	line-height:10px;
	
	color:#fff;
	
	text-align: center;
}

.drawer-content div.siteinfo div.contactus p.email{
	width:100%;
	margin:0 auto;
}

.drawer-content div.siteinfo div.contactus p.email a{
	display:block;
	
	font-size:0.8rem;
	line-height:40px;
	font-weight:500;
	
	color:#fff;
	
	text-align: center;
	
	box-sizing: border-box;
	border:solid 1px #fff;
	
	transition: 0.25s;
}

.drawer-content div.siteinfo div.contactus p.email a:hover{
	opacity: 0.8;
	text-decoration: none;
}

.drawer-content div.siteinfo div.contactus p.email span.note{
	display:inline-block;
	
	box-sizing: border-box;
	padding-left:20px;
	
	position: relative;
}

.drawer-content div.siteinfo div.contactus p.email span.note:before{
	display:block;
	content:"";
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	bottom:0;
	left:-5px;
	
	margin:auto 0;
	
	background-image: url("../images/icon_mail-white.webp");
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: center;
}

.drawer-content nav.navigation{
	width:100%;
	margin:0 auto 20px;
}

.drawer-content nav.navigation ul{
	font-size:0.8rem;
	line-height:50px;
}

.drawer-content nav.navigation ul li{
	box-sizing: border-box;
	border-bottom:solid 1px #fff;
}

.drawer-content nav.navigation ul li:first-child{
	border-top:solid 1px #fff;
}

.drawer-content nav.navigation ul li a{
	display:block;
	color:#fff;
	
	box-sizing: border-box;
	padding:0 20px;
	
	transition:0.25s;
}

.drawer-content nav.navigation ul li a:hover{
	opacity: 0.8;
	text-decoration: none;
}

.drawer-content nav.navigation ul li span.note{
	display:inline-block;
	
	box-sizing: border-box;
	padding-left:20px;
	
	position: relative;
}

.drawer-content nav.navigation ul li span.note:before{
	display:block;
	content:"";
	
	width:20px;
	height:20px;
	
	/*background-color:#f69;*/
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	
	margin:auto 0;
	
	background-image: url("../images/icon-arrow-right-white.png");
	background-repeat: no-repeat;
	background-size:7.5px;
	background-position: center;
}

.drawer-content div.extra{
	width:100%
}

.drawer-content div.extra ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
}

.drawer-content div.extra ul li{
	margin:0 2.5px;
}

.drawer-content div.extra ul li a{
	display:block;
	
	width:35px;
	height:35px;
	
	font-size:0;
	line-height:40px;
	
	background-color:#fff;
	
	position: relative;
	
	border-radius:2.5px;
}

.drawer-content div.extra ul li a:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	background-image: url("../images/icon_tx-color.png");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}

.drawer-content div.extra ul li.fb a:before{
	background-image: url("../images/icon_fb-color.png");
}

.drawer-content div.extra ul li.ig a:before{
	background-image: url("../images/icon_ig-color.png");
}

.drawer-content div.extra ul li.yt a:before{
	background-image: url("../images/icon_yt-color.png");
}

.drawer-content div.extra address{
	font-size:0.6rem;
	line-height:80px;
	
	text-align: center;
}

@media only screen and (min-width: 960px){
	
	#drawer{
		display:none;
	}
	
}

.organization{
	width:100%;
	margin:0 auto;
	max-width:960px;
	
	box-sizing:border-box;
	padding:0 20px;
}

.organization h6{
	font-size:0.8rem;
	line-height:30px;
	font-weight:bold;
	
	margin-bottom:10px;
}

.organization ul{
	display:flex;
	flex-flow:row wrap;
	align-items:stretch;
	justify-content:flex-start;
	
	width:100%;
}

.organization ul li{
	display:block;
	width:100%;
	
	box-sizing:border-box;
	padding-left:20px;
	position:relative;
	
	font-size:0.8rem;
	line-height:30px;
}

.organization ul li a{
	display:block;
	color:#fff;
}

.organization ul li::before{
	display:block;
	content:"→";
	
	position:absolute;
	top:0;
	left:0;
}

@media only screen and (min-width: 960px){
	
	.organization ul li{
		display:inline-block;
		width:auto;
		
		padding-right:20px;
	}
	
}