@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*@import url("header.css");
@import url("footer.css");*/

/* MAIN COLOR ===================
|
|	黒　 #2b3438
|	黄　 #ffdf71
|	赤　 #E62736
|
*/	

html{ overflow-x:hidden; }
body { height:100%; height:auto; background:#fff; }
body *{ /*border:1px solid #000000; background:rgba(000,000,000,0.1)*/}


/*----- フォントの指定 -----*/
html { font-size: 62.5%; }
body,input,select,textarea { 
	font-size:14px; font-size:1.4rem; 
	line-height:1.8; 
	letter-spacing:0.15em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
	color:#2B3438; }	
a {color:#2B3438; text-decoration: none; transition: 0.3; display: block;}
p {text-align:justify; text-justify:inter-ideograph; color: #2B3438;}
p a {color:#2B3438; text-decoration: underline;}
img { width: 100%; }

@media screen and (max-width:768px){
	html { font-size: 50%; }
}



/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 

/*----- レスポンシブ可変 -----*/
.showPc { }
.showSp { display: none;}
@media screen and (max-width:768px){
.showPc { display: none ; }
.showSp { display: block ; }
}

/*----- セレクト時の色指定 -----*/
::selection { background: #ffdf71; color: #2b3438; }
::-moz-selection { background: #ffdf71; color: #2b3438; }

/*----- リンク hover -----*/
a { transition: 0.3s; }
a:hover { transform: translateY(-5px); 	cursor: pointer;}

/*----- リンク hover -----*/
#content { margin-top: -3.5em; }



/* --------------------------------------------
	中ページ共通
---------------------------------------------- */ 

/* コンテンツ　*/
#contentinner { max-width: 1150px; width: 85%; margin: 30vw auto 10em; padding-bottom: 1em;}
#contentinner section { margin: 0 auto 10vw; }
#contentinner section:last-child { margin: 0 auto 8vw; }
@media screen and (max-width:768px){
#contentinner { width: 85%; margin: 38vw auto 20em;}	
}
@media screen and (max-width:499px){
#contentinner section { margin: 0 auto 15vw; }
#contentinner { margin: 38vw auto 15em;}
}



/* 中ページメインヴィジュアル */
.mainV { position: relative; margin-top: -3.5em;}
.mainV .maintitle { display: block; background: url("../../_common/img/share/titleback.png")no-repeat; background-size: cover; text-align: center; } 
.mainV .maintitle img { max-width: 360px; width: 80%; padding: 1.2em 0 2em;}
@media screen and (max-width:768px){
.mainV { position: relative; margin-top: -0em;}
.mainV .maintitle img { max-width: 280px; padding: .65em 0 2em;}
}
@media screen and (max-width:499px){
.mainV .maintitle img { max-width: 200px; padding: .65em 0 2em;}
.mainV .mainPhoto { overflow-x: hidden;  min-width: 100px; width: 100%; background-size: contain;}
}
	
/* 帯　*/
.h2Title { max-width: 835px; width: 100%; margin: 0 auto 4em; }
.h2Title img {  }
@media screen and (max-width:768px){
.h2Title { margin: 0 auto 8vw; }
}
@media screen and (max-width:499px){
.h2Title { width: 280px; overflow-x: hidden;} 
.h2Title img { width: 192%; margin-left: -129px;} 
}

/* --------------------------------------------
#header PC
---------------------------------------------- */ 

/*===========  PC  ==============*/
#Pheader { 
	display: block;
	z-index: 1000;
	width: 100%;
	position: relative;
}

/* グリーンラベル */
#Pheader .hTitle {
	width: 100%;
	padding: .6em 35px;
	background: url("../img/share/header.jpg");
	background-size: cover;
	position: relative;
	}
#Pheader .hTitle h1 {
	font-size: 18px; font-size: 1.8rem;
	vertical-align: middle;
	color: #fff;
	float: left;
}
#Pheader .hTitle .tel { 
	width: 240px;
	float: right;
	margin: 4px 170px 0 0;
}
#Pheader .hTitle a {
	position: absolute;
	display: block; content: "";
	width: 140px;
	top:0; right: 35px;
}

@media screen and (max-width:900px){
#Pheader .hTitle h1 { font-size: 14px; font-size: 1.4rem; }
#Pheader .hTitle .tel { width: 200px; margin: 4px 135px 0 0; }
#Pheader .hTitle a { width: 115px; top:-.25em; right: 35px; }
}

/*----- ナビ -----*/
#Pheader .hList {
	padding: 2.5em 2%;
	max-width: 1300px; 
	margin: 0 auto;
}
#Pheader .hList ul { 
	display: flex;
	justify-content: space-between;
}
#Pheader .hList li {
	height: 160px; 
}
#Pheader .hList li img { 
	height: 100px; width: auto;
}
#Pheader .hList .mainlogo {
	width: 535px; height: 157px;
}
#Pheader .hList .mainlogo img {
	width: 100%; height: 100%;
}

@media screen and (max-width:1150px){
	#Pheader .hList li { height: 100px; }
	#Pheader .hList li img { height: 80px;}
	#Pheader .hList .mainlogo { width: 450px; height: 135px; }
}
@media screen and (max-width:900px){
	#Pheader .hList { padding: 1.2em 2% 2.5em; }
	#Pheader .hList li img { height: 70px;}
	#Pheader .hList .mainlogo { width: 320px; height: 100px; }
}
@media screen and (max-width:768px){
#Pheader { display: none; border: solid; opacity: 0; }
}


/*===========  スマホ  ==============*/

#SPheader { display: none; }
#SPheader h1 { max-width: 380px; width: 60%; margin: 0em auto 1em; z-index: 1000; position: relative;}

#SPheader .hTitle {}
#SPheader .hList ul {  }
#SPheader .hList li {  }
#SPheader .hList li img {  }
#SPheader .hList .mainlogo {  }
#SPheader .hList .mainlogo img {  }

.pc-nav {  }
.sp-nav {  }
#hamburger {  }
#hamburger span {  }
#hamburger::before {  }
#hamburger::after {  }

/*スマホメニュー*/
.sp-nav ul {  }
.sp-nav li {  }
.sp-nav li span {  }
.sp-nav li a, .sp-nav li span {  }

/*-閉じるアイコンー*/
.sp-nav .close {  }
.sp-nav .close::before {  }
.sp-nav .close::after {  }
.toggle {  }

@media screen and (max-width:768px){
#SPheader { display: block; z-index: 50000; margin-bottom: 2em; }
#SPheader .hTitle {
	width: 100%; padding: 1em 15px 1.2em;
	background: url("../img/share/header.jpg");
	background-size: cover;
	position: relative;
	}
#SPheader .hTitle h2 {
	width: 240px;
}
	
	
/*スマホメニュー*/
.sp-nav {
	z-index: 200000;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	padding: 1em 0 1em ;
	display: block;
	background: #fff;
	transform: translateY(-100%);
	transition: all .2s ease-in-out;
}
.sp-nav ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.sp-nav li { 
	margin: 2em auto; padding: 0;
}
.sp-nav li a { 
	display: block;
	height: 10vh;
	}
.sp-nav li img { 
	height: 10vh; width: auto;
	padding: 0; margin: 0;
}
.sp-nav li span {
	font-size: 14px;
	color: #000;
}

/* ロゴ　*/
.sp-nav .mainlogo { 
	width: 300px; max-height: 20vh; 
	margin: 0 auto 1em;
	text-align: center;
}
.sp-nav .mainlogo a { 
	display: block;
	}
.sp-nav .mainlogo img { 
	width: 100%; height: auto; 
	margin: 0 auto;
}

/* ハンバーガーアイコン */
#hamburger {
	position: relative;
	display: block;
	top:-3.5em;
	right: 15px;
	width: 30px;
	height: 25px;
	margin: 0 0 0 auto;
}
#hamburger span {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 5px;
	background-color: #fff ;
	transform: translateY(-50%);
}
#hamburger::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 5px;
	background-color: #fff;
}
#hamburger::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 5px;
	background-color: #fff;
}

/*-閉じるアイコンー*/
.sp-nav .close {
	padding: 1em;
	width: 280px;
	color: #fff;
	border-radius: 30px;
	text-align: center;
	background: #00a9db;
}
.sp-nav .close span {
	color: #fff;
}
.toggle {
	transform: translateY( 0 );
	opacity: 1;
}
}


/* --------------------------------------------
#footer
---------------------------------------------- */ 

/*===========  PC  ==============*/
.Pfooter { display: block; content: ""; background: url("../img/share/footer.png")no-repeat; background-position: top center; background-size: 100% auto; margin-top: -10em; padding: 12vw 15% 5em; position: relative;}
.Pfooter .flist { margin: 0 auto; }
.Pfooter .flist ul { display: flex; justify-content: space-between; }
.Pfooter .flist li img { height: 18px; width: auto; padding: 0 5%;}

@media screen and (max-width:1150px){
.Pfooter { margin-top: -10em; padding: 12vw 8% 3em;}
.Pfooter .flist li img { height: 14px;}
}
@media screen and (max-width:768px){
.Pfooter .flist { display: none; }
}
@media screen and (max-width:499px){
.Pfooter { padding: 12vw 2% 3em; }
}


/*----- 会社概要　-----*/
.foutline { margin-top: 6em;}
.foutline__left { }
.foutline__left .flogo { float: left; width: 250px; margin-right: 30px; }
.foutline__left .ftext { padding-top: .8em; }
.foutline__left .ftext img { max-width: 255px; width: 80%; }
.foutline__left .ftext p { color: #fff; line-height: 2.8; }
.foutline__left .ftext p br { display: none; }

.foutline__right {padding-top: 2em; }
.foutline__right small {color: #fff; vertical-align: bottom; }

@media screen and (max-width:1300px){
.foutline__left .flogo { width: 200px; margin-right: 30px; }
.foutline__left .ftext p { font-size: 12px; }
}
@media screen and (max-width:1024px){
.foutline { display: block; justify-content: none; margin-top: 6vw;}
.foutline__left { margin: 0 auto; }
.foutline__left .flogo { float: none; margin-right: 0; margin:0 auto;  }
.foutline__left .ftext { float: none; padding-top: 2em; margin: 0 auto; text-align: center; }
.foutline__left .ftext p { text-align: center; padding-top: 1em;}
.foutline__right { text-align: center;}
}
@media screen and (max-width:768px){
  .foutline {padding-bottom: 100px;}
}
@media screen and (max-width:499px){
.Pfooter { background-position: top center; background-size: 180%;}
.foutline__left .flogo { margin: 1em auto .5em;  }
.foutline__left .ftext p { line-height: 1.6; margin-top: .5em; }
.foutline__left .ftext p br { display: block;}
}

/*----- 一番上に戻る　-----*/
.fpage { position: absolute; top:-5em; right: 40px; width:143px;  }

@media screen and (max-width:1150px){
.fpage { top:-8em; right: 20px; width:120px;  }
}
@media screen and (max-width:499px){
.fpage { top:-8em; width: 25%; right: 10px; }
}

a.line {position: fixed; right: 0; bottom: -10px; z-index: 9999;}
@media screen and (max-width:768px){
  a.line {bottom: 20px;}
}