@charset "UTF-8";
/*
* > img{
	display: none;
}
*/

/* 共通reset + style */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	line-height: 1em;
}
* img, * iframe{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;	
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	opacity: .5;
    -webkit-transition: all ease 0.65s;
    transition: all ease 0.65s;
    
}
li{
	list-style: none;
}
h3,h4{
	text-align: center;
}
h3{
    position: relative;
    display: block;
    margin-bottom: 1em;
	font-size: 2.5vw;
    text-align: center;
}
h3::after{
    content: "";
    position: absolute; 
    left: 50%;
    top: 1.8em;
    width: 1em;
    height: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #f18000;
}
footer h3{
	font-size: 1.85vw; 
}
h4{
	color:#f18000;
	font-size: 1.4vw;
	padding: 1em 0;
}
p, td, li{
	line-height: 1.5em
}
/* ふわっとeffect */
.fadein {
  opacity: 0;
}
.fadein.is-active {
  opacity: 1;
  transition: all ease 0.65s;
}

/* page top */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 13px;
  bottom: 13px;
  background: #f18000;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


nav li a{
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    font-weight: 500;
}

.gmap{
    vertical-align: bottom;
    height: 0;
    overflow: hidden;
    padding-bottom: 33.33%;
    position: relative;
}
.gmap iframe{
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
}

/* SP widthが767px以下の場合 */
@media screen and (max-width: 767px){
:root {
    font-size: 14px;  /*above 768px */
 }

.br_pc{
    display: none;
}
.br_sp{
    display: block;    
}
h3{
    font-size: 20px;
}
h4{
	color:#f18000;
	font-size: 18px;
	padding: 1em 0;
}

/* SP gridlayout */
body{
	display: grid;
	grid-template-columns: 8% 1fr 8%;
	grid-template-rows:
		[head] 70px
		[hero] 587px
		[cont01] auto
		[cont02] auto
		[cont03] auto
		[cont04] auto
		[foot] auto;
}
body > *{
	grid-column: 2/-2;
}

/* SP header */
header{
    position: -webkit-sticky;
	position: sticky;
	top: 0;	
	z-index: 1000;
	grid-row: head;
	grid-column: 1/-1;
	height: 70px;
	background: #FFF;
}
header h1{
	padding-top: 13px;
	padding-left: 8%;
}
header h1 img{
	max-width: 200px;
}

.tel{
    display: inline-block;
}
.tel a{
	font-size: 30px;
	font-family: acumin-pro-semi-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #f18000;
}
.tel a::before{
    content: "";
    display: inline-block;
	background-image: url(../img/nav_tel.png);
    width: .75em;
    height: .75em;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: -.15em;
}
.tel span{
	color: #000;
	position: relative;
	top:-15px;
	font-size: 13px;
}


/* PCメニュー非表示 */
nav.globalMenuPc{
		display: none
}

/* SP　グローバルメニュー */
nav.globalMenuSp{
	position: fixed;
	z-index: 2;
	top: 0;
	left:0;
	text-align: center;
	transform: translateY(-100%);
	transition: all 0.6s;
	width: 100%;
}
nav.globalMenuSp ul{
	background: rgba(256,256,256, .8);
	margin:0 auto;
	padding: 0;
	width: 100%;
}
nav.globalMenuSp ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px dotted #fff;
}
nav.globalMenuSp ul li:last-child{
	padding-bottom: 0;
	border-bottom: none;
}
nav.globalMenuSp ul li a{
	display: block;
	padding: 1em 0;
}
nav.globalMenuSp ul li.tel a{
	padding: 0 0;
	padding-top: 0.25em;
}

/* jQueryで付与・削除するクラス */
nav.globalMenuSp.active{
	top: 70px;
	transform: translateY(0);
}

/* SP ハンバーガー */
.navToggle{
	display: block;
	position: fixed;
	right: 13px;
	top: 13px;
	width: 42px;
	height: 42px;
	cursor:pointer;
	z-index: 3;
	background-color: inherit;
	text-align: center;
}
.navToggle span{
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #f18000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 6px;
}
.navToggle span:nth-child(1){
	top: 9px;
}
.navToggle span:nth-child(2){
	top: 18px;
}
.navToggle span:nth-child(3){
	top: 27px
}
/*
.navToggle span:nth-child(4){
	border: none;
	color: #eee;
	font-size: 9px;
	font-weight: bold;
	top: 34px;
}
*/

/* タップ後の動作 */
.navToggle.active span:nth-child(1) {
	top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* SP heroimage */

.hero{
	grid-row: hero;
	grid-column: 1/-1;
	}
.hero img{
	height: 100%;
	object-fit:cover;
	object-position: 5% 0;
}
div.hero{
	grid-column: 2;
	align-self: center;
}
.hero h2{
	font-size: 55px;
	padding-bottom: 0.5em;
	color: #fff;	font-family: quatro-slab, serif;
    font-weight: 200;
    font-style: normal;
	line-height: 1.6em;
}
.hero p{
    color: #fff;	
	font-size: 26px;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    font-weight: 500;
}

/* SP greeting */
.cont01{
	grid-row: cont01;
	text-align: center;
    padding: 10% 0;
}
/* SPのみ改行するため */
.cont01 h3::after{
    top: 2.8em;
}
.cont01 p{
	padding-top: 4%;
}

/* SP servies */
.cont02{
	grid-row: cont02;
	grid-column: 1/-1;
	background-color:#f1f6fa;
	padding-top: 10%;
}
.cont02 > p{
	padding: 4% 8% 8%;
	}
.cont02 ul{
	background-color: #C8EBF0;
	background-image: url(../img/cont02_bg_sp.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 10%;
    padding-bottom: 10%;

}
.cont02 li{
    width: 56%;
    margin: 0 auto 6%;
}
.cont02 li:last-child{
    margin-bottom: 0;
}

/* SP projects */
.cont03{
	grid-row: cont03;
	grid-column: 1/-1;
    padding-top: 10%;
	padding-bottom: 10%;
	background-color:#f1f6fa ;
}
.cont03 ul{
	width: 84%;
	margin: 4% auto 0;
    padding-bottom: 10%;
}
.cont03 li{
    padding-top: 8%;
}
.cont03 >p a{
    width:12em;
    margin:0 auto;
    background-color:#f18000;
    text-align:center;
    color:#fff;
    font-weight: bold;
    display: block;
    padding:2% 0;
}

/* SP company */
.cont04{
    grid-row: cont04;
    padding-top: 10%;
    padding-bottom: 10%;
}
.cont04 table{
    border-collapse: collapse;
    margin: 10% auto 10%;
}
.cont04 tr{
    border-bottom: solid 1px #000;
}
.cont04 tr:first-child{
    border-top: solid 1px #000;
}
.cont04 th{
    width:12%;
    padding: 1.25em 0;
}
.cont04 td{
    width:48%;
    padding: 1.25em 0;
}
/* SP googlemap */
.gmap{
    margin:0 auto;
    padding-bottom: 75%;
}

/* SP footer */
footer{
	grid-row: foot;	
	grid-column: 1/-1;
	padding-top: 10%;
    text-align: center;
    background-color:#333;
    color: #fff;
}
footer h3{
	font-size: 18px; 
}
footer .tel{
	padding-top: 3%;
}
footer .tel a{
	color: #fff;
	font-size: 46px;
}
footer .tel a::before{
	background-image: url(../img/foot-tel.png);
}
footer .tel span{
	color: #fff;
    font-size: 20px;
    top:10px;
}
footer small{
    display: block;
    margin-top: 10%;
	padding-top: 20px;
    padding-bottom: 20px;
    background-color:#f0f0f0;
    color: #f18000;
    }
}

/* widthが768px以上の場合 */
@media screen and (min-width: 768px){
:root {
    font-size: 16px;  /*above 768px */
  }

.br_pc{
    display: block;
}
.br_sp{
    display: none;    
}

/* PC gridlayout */
body{
	display: grid;
	grid-template-columns: 8% 84% 8%;
	grid-template-rows:
		[head] 100px
		[hero] auto
		[cont01] auto
		[cont02] auto
		[cont03] auto
		[cont04] auto
		[foot] auto;
}
body > *{
	grid-column: 2/-2;
}

/* PC header */
header{
	grid-row: head;
	grid-column: 1/-1;
	padding: 30px 2%;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
header h1 img{
	max-width: 180px;
    vertical-align: baseline;
}

/* SP　グローバルメニュー非表示 */
nav.globalMenuSp{
	display: none;
	max-height: 0;
}

/* PC flexメニュー */
nav.globalMenuPc ul{
	display: flex;
	align-items: baseline;
}
nav.globalMenuPc ul li{
	padding-right: 13px;
	text-align: center;
}
nav.globalMenuPc ul li:last-child{
	padding-right: 0;
}
.tel{
    display: inline-block;
}
.tel a{
	/*    font-size: 42px;*/
	font-size: 30px;
	font-family: acumin-pro-semi-condensed, sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #f18000;
}
.tel a::before{
    content: "";
    display: inline-block;
	background-image: url(../img/nav_tel.png);
    width: .75em;
    height: .75em;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: -.15em;
}
.tel span{
	color: #000;
	position: relative;
	top:-15px;
	font-size: 13px;
}

/* PC heroimage */
.hero{
	grid-row: hero;
	grid-column: 1/-1;
}
div.hero{
	grid-column: 2/-2;
}
.hero h2{
	padding-top: 4%;
	padding-bottom: 1em;
	color: #fff;
	font-size: 4.01vw;
	font-family: quatro-slab, serif;
    font-weight: 200;
    font-style: normal;
	line-height: 1.6em;
}
.hero p{
	color: #fff;
	font-size: 2.15vw;
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    font-weight: 500;
}
/* PC greeting */
.cont01{
	grid-row: cont01;
	padding:7%;
	text-align: center;
}
.cont01 p{
	padding:5% 0 0;
}
/* PC servies */
.cont02{
	grid-row: cont02;
	grid-column: 1/-1;
	background-color:#f1f6fa;
	padding:7% 0 0;
}
.cont02 > p{
    padding: 3% 18% 7%;
}
.cont02 ul{
	display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:1fr 1fr;
    grid-gap: 2% 8%;
    padding:10% 13% 18%;
    background-color:#b9e5ea;
    background-image: url(../img/cont02_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}
.cont02 li:nth-child(2){
    grid-column: 2/-2;
    grid-row: 1/span2;
    align-self:center;
}
/* PC projects */
.cont03{
	grid-row: cont03;
	grid-column: 1/-1;
	background-color:#f1f6fa ;
    padding:7% 0;
}
.cont03 ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-flow:row;
    align-items: end;
    gap: 2% 8%;
    padding: 2% 10% 7%;
}
.cont03 >p a{
    width:12em;
    margin:0 auto;
    background-color:#f18000;
    text-align:center;
    color:#fff;
    font-weight: bold;
    display: block;
    padding:2% 0;
}
/* PC company */
.cont04{
	grid-row: cont04;
	grid-column: 1/-1;
    padding:7% 0;
}
.cont04 table{
	border-collapse: collapse;
	width:60%;
    margin:6% auto 6%;
}
.cont04 tr{
    padding:1.25em 0;
    border-bottom: solid 1px #000;
}
.cont04 tr:first-child{
    border-top: solid 1px #000;
}
.cont04 tr,.cont04 td{
	padding: 1em 0;
}
.cont04 tr{
	vertical-align: text-top;
}
.cont04 td{
	width: 75%;
}
.cont04 ol li{
    display: list-item;
    list-style-type: decimal;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

/* PC footer */
footer{
    grid-row: footer;
	grid-column: 1/-1;
    background-color:#333;
    padding:7% 0 0;
    color:#fff;
    text-align:center;
}
footer .tel{
	padding-top: 2%;
}
footer .tel a{
	color: #fff;
	font-size: 5.2vw;
}
footer .tel a::before{
	background-image: url(../img/foot-tel.png);
}
footer .tel span{
	color: #fff;
	top:0;
}
footer small{
    display: block;
    margin-top: 6%;
	padding-top: 20px;
    padding-bottom: 20px;
    background-color:#f0f0f0;
    color: #f18000;
    }
}

@media screen and (min-width: 1024px){
header h1 img{
    max-width: 260px;
    }  
nav.globalMenuPc ul li{
    margin-right: 30px;
}
nav.globalMenuPc ul li:last-child{
    margin-right: 0;
}
}

@media screen and (min-width: 1366px){
:root {
    font-size: 24px;  /*above 768px */
  }
/* PC gridlayout */
body{
	display: grid;
	grid-template-columns: 8% 84% 8%;
	grid-template-rows:
		[head] 150px
		[hero] auto
		[cont01] auto
		[cont02] auto
		[cont03] auto
		[cont04] auto
		[foot] auto;
}
header h1 img{
	max-width: 300px;
    vertical-align: middle;
}
nav.globalMenuPc ul li {
    padding-right: 30px;
}
.tel a{
    font-size: 48px;
}
.tel span{
	top:-21px;
	font-size: 20px;
}

}