@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Staatliches&display=swap');


/* ===================================================
共通
=====================================================*/
html {
    font-family: Noto Sans JP, sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%;/* 10px */
    color:#333333;
}

/* Fluid-img----------------------------------- */
img {max-width : 100%; border: 0}

/* clearfix----------------------------------- */
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}

/* ===================================================
for SP
=====================================================*/
body { font-size: 1.6rem; } /* 16px */
.wrap{margin: auto; padding:60px 4%}
footer .wrap{padding:0 4%}
#business .wrap.none_pad{padding-top:10px; padding-bottom: 0}
h2#second .wrap{padding:0.6em 4%}
a.under{text-decoration: underline}

h1, h2, h3{font-weight: 700; line-height: 1.4;}
h2, h3{color: #000000;}
h2{font-size: 3.3rem; margin-bottom: 1em}
h2 span{font-weight: normal; color: #dbbe00; font-size: 45%; display: block;}
h3{font-size: 2.2rem; margin-bottom: 0.8em;}

p{font-size: 1.6rem; line-height: 1.8}
p.sec{margin-top: 1.5em}

h2#second{background-color: #faf5d9; margin-bottom: 0; background-image: linear-gradient(.25turn, #faf5d9, 60%, #e1cc46)}
h3.second{border-left: 5px #dbbe00 solid; padding-left: 0.3em; font-size: 2.4rem}
h3.second.sec{margin-top: 3em}


/*--------------------------------------------
header
---------------------------------------------*/
header .wrap{
background-repeat: repeat;
background-image: url(../images/header_bk.png);
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}

header .wrap{
  position: relative;
  z-index: 4;
  opacity: 0;
  padding: 0 0px 0 4%;
  animation: fadeInNav 1s ease 2s forwards;
}
header.second .wrap{
animation: fadeInNav 1s ease 0.1s forwards;
}

header #logo, header nav{width: 50%;}
header #logo img{width: 130px}

header nav.globalMenuSp{
    display:none;
	font-size:1.8rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    color: #000;
    text-align: left;
    width: 100%;
	height: 100%;
	z-index: 1000;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	box-sizing: border-box;
}

header nav.globalMenuSp.active{
	display:block;
	height: 100%;
	width: 100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	z-index: 1000;
}

header nav.globalMenuSp ol{display: block; width:100%; position: absolute; top:10%}
header nav.globalMenuSp li{
	display: block;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	height: auto;
	text-align:center;
	margin-bottom: 1em;
}
header nav li#btn_contact{margin-top: 2em}
	
header nav.globalMenuSp li a{border-bottom:none; margin:0px; padding:1.2em 0; display: block; }
header nav li a:hover{text-decoration: none}

header nav li#btn_contact a{
width: 80%;
background-color: #dbbe00;
border-radius: 50px;
padding: 1.2em 1.5em;
text-align: center;
color: #FFFFFF;
font-weight: 600;
margin:0 auto;
}

header nav li#btn_contact a span.en{display: none}


/*ハンバーガーメニュー
------------------------------------------------------------------------------*/
.navToggle {
    display: block;
    position: relative;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1001;
    text-align: center;
	top:0;
	right:4%;
	}


/*三本線*/
.navToggle span {
    display: block;
    position: absolute; /* .navToggleに対して */
    width: 25px;
    border-bottom: solid 2px #000000;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
 
.navToggle span:nth-child(1) {top: 5px;}
.navToggle span:nth-child(2) {top: 12px;}
.navToggle span:nth-child(3) {top: 19px;}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

#hero_container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  color: #000000;
  top:-50px;
}
.hero_logo {
  position: absolute;
  z-index: 3;
  opacity: 1;
  animation: fadeOutLogo 0.4s ease 1s forwards;
  width: 100%;
  text-align: center;
}

.hero_logo img {
  width: 100px;
  height: auto;
}

.gradient-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #000000 0%, #000000 100%);
  transform: translateY(100%);
  z-index: 1;
  animation: rollUp 0.5s ease 1s forwards;
}

.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
  animation: fadeInImage 1s ease 2s forwards;
}

.content{
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeInContent 1s ease 2.5s forwards;
  text-align: left;
  padding: 0 4%;
}

h1.main-title {
font-size: 8.8vw;
font-weight: 800;
text-shadow: 1px 0px #FFFFFF;
}

p.sub-title {
line-height: 2;
font-size: 4.3vw;
margin-top: 1em;
text-shadow: 1px 0px #FFFFFF;
font-weight: 600;
}

.scroll-hint {
  position: absolute;
  bottom: 100px;
  left: 44%;
  /*transform: translateX(-50%);*/
  z-index: 2;
  opacity: 0;
  animation: fadeInContent 1s ease 4s forwards;
}

.scroll-hint::before {
  content: "";
  display: block;
  width: 1px;
  height:40px;
  background: #000000;
  margin: 0 auto 10px;
  animation: scrollLine 1.5s ease-in-out infinite;
}

.scroll-text {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

@keyframes fadeOutLogo {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rollUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes fadeInNav {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInContent {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollLine {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: 50px;
    opacity: 1;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}



/*--------------------------------------------
#business
---------------------------------------------*/
#business h2{text-align: center}
#business .col2_box{background-color: #f7f7f7; border-radius: 15px; padding:2.5em 1.5em 1.5em 1.5em}
#business .col2_box.sec{margin-top: 40px;}
#business .col2_box .photo{margin-top: 20px}

#business .wrap.zu_wrap p.b{font-weight: 700; font-size: 1.8rem; color: #000000}

.btn_more{text-align: center; margin-top: 2.5em; margin-bottom: 3.5em}
.btn_more a{
background-color: #dbbe00;
color: #FFFFFF;
border-radius: 50px;
box-sizing: border-box;
padding:0.5em 4.5em 0.5em 3.5em;
text-align: center;
}
.btn_more a span{position: relative}
.btn_more a span:after{
content: '';
width: 16px;
height: 16px;
border: 0px;
position: absolute;
top:50%;
transform: translateY(-50%);
right: -20px;
background-repeat: no-repeat;
background-image: url(../images/btn_next_red.png);
background-size: 16px 16px;
}

/*下層-------------------------------------*/
.achiev{border-collapse: collapse; width: 100%; margin-top: 2em}
.achiev th, .achiev td{border:1px solid #CCCCCC; padding: 0.5em; line-height: 1.4}
.achiev th{background-color: #f0e5a6; text-align: center}
.achiev tr:nth-child(odd){background-color: #f1f1f1;}
.achiev .b{font-weight: 600; white-space: nowrap}

.products{display: flex; justify-content: space-between; flex-wrap: wrap;}
.products figure{width: 48.5%; margin-bottom: 3%; border: 4px solid #f0f0f0; }
.products figcaption{line-height: 1.4; font-size: 1.4rem; padding: 7px;}
.products img{border: 1px solid #ffffff;}

.zu{margin-top: 2em}


/*--------------------------------------------
#equipment
---------------------------------------------*/
#equipment{background-color: #f7f7f7;}
#equipment .box{background-color: #484848; padding: 2em 1.2em 1.2em 1.2em; border-radius: 15px; margin-top:20px; color: #FFFFFF;}
#equipment h3{ color: #dbbe00; margin-bottom: 1em}
#equipment h3 span{position: relative; padding-left: 45px}
#equipment h3 span::before{
display: inline-block;
position: absolute;
content: "";
width: 35px;
height: 35px;
background-repeat: no-repeat;
background-size: 35px 35px;
top:50%;
transform: translateY(-50%);
left: 0;
}
#equipment h3#bari span::before{background-image: url(../images/icon_bari.png);}
#equipment h3#air span::before{background-image: url(../images/icon_air.png);}
#equipment h3#survey span::before{background-image: url(../images/icon_survey.png);}
#equipment h3#senjyou span::before{background-image: url(../images/icon_senjyou.png);}

ol.products{display: flex; justify-content: space-between; flex-wrap:wrap}
ol.products.air{display: block}

ol.products > li{width: 47.5%;}
ol.products.air > li{width: 100%}

ol.products .p_photo{margin-bottom: 1em}
ol.products .p_name{font-weight: bold; font-size: 1.4rem;line-height: 1.4; margin-bottom: 0.3em}
ol.products .p_name span{display: block}

ol.products.air .p_text{display: inline-block;}
ol.products.air .p_photo{display: inline-block; width: 47.5%}

ol.survey > li{margin-top: 30px}
ol.survey > li:nth-child(1),
ol.survey > li:nth-child(2){margin-top: 0}

ol.spec{font-size: 1.2rem; line-height: 1.4}
ol.spec li{margin-top: 0.3em}

/*--------------------------------------------
#company
---------------------------------------------*/
#company table{border-top: 1px solid #f7f7f7; width: 100%}
#company table th{padding-right: 1.5em; white-space: nowrap; font-weight: 600}
#company table th, #company table td{
padding-bottom: 0.5em;
padding-top: 0.5em;
line-height: 1.6;
border-bottom: 1px solid #f7f7f7;
}

.greeting p, 
#privacy p{margin-bottom: 1.5em}
.greeting div{text-align: right}

#gmap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 80%; /* 比率 */
}
 
#gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#gmap, #shaoku{margin-top: 2em;}

.col3_box img{margin-top: 2em}

.f_cap{margin-top: 0.5em; line-height: 1.6; font-size: 1.4rem}

/*--------------------------------------------
#contact
---------------------------------------------*/
#contact{background-color: #dbbe00}
#contact h2{text-align: center}
#contact h2 span{color: #ffffff;}
.contact_box{
background-color: #FFFFFF;
border-radius: 15px;
padding: 1.5em 1em;
margin-top: 2em;
text-align: center;
}
.mail{font-weight: 800; font-size: 2.4rem; margin-bottom: 0.3em}
.contact_box.mail_hover a{ color: #000000;}
.number{font-weight: 800; color: #000000; font-size: 3.6rem; margin-bottom: 0.2em;}
.number span{position: relative; padding-left:1.2em}
.mail span{position: relative; padding-left:1.8em}

.number span::before, 
.mail span::before{
position: absolute;
content: "";
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-size: 36px 36px;
top:50%;
transform: translateY(-50%);
left: 0;
}
.number span::before{background-image: url(../images/icon_tel.png);}
.mail span::before{background-image: url(../images/icon_mail.png);}

#contact .b{font-weight: 600; margin-top: 0.5em}
.time, #contact .b{color: #000000;}

footer{
background-color: #dbbe00;
font-size: 12px;
text-align: center;
padding-bottom:1em;
margin-top: -1px;
}
footer div{padding-bottom:1em}
footer a{text-decoration: underline}
footer.contact{padding-top: 2em}

/*--------------------------------------------
.to-top
---------------------------------------------*/
.to-top{
position: fixed;
right: 3%;
bottom: 50px;
cursor: pointer;
width: 50px;
height: 50px;
transition: all 0.3s;
box-sizing: border-box;
}
.to-top:hover{opacity: 1;}
.to-top span{display: block; text-align: center; margin-left: auto;margin-right: auto}
.to-top span.arrow{
width: 50px;
height: 50px;
background-image: url(../images/pagetop_arrow.png);
background-size: 18px 10px;
background-position: center 48%;
background-repeat: no-repeat;
transition: all 0.3s;
border-radius: 100px;
background-color: #000000;
}

/*--------------------------------------------
表示演出
---------------------------------------------*/
.sa {
  opacity: 0;
  transition: all .5s ease;
}

.sa.show {
  opacity: 1;
  transform: none;
}

.sa--lr {
  transform: translate(-100px, 0);
}
.sa--rl {
  transform: translate(100px, 0);
}
.sa--up {
  transform: translate(0, 100px);
}
 

/* ===================================================
for Tablet　768〜
=====================================================*/
@media screen and (min-width: 768px) { 
a[href^="tel:"]{pointer-events: none;}

.wrap{padding:100px 4%}
#business .wrap{padding-top:50px}

h2{font-size: 5.8vw;}
#business h3{font-size: 3.2vw;}
#equipment h3{font-size: 4.6vw; margin-bottom: 1em}
h3.second{font-size:4rem;}

/*--------------------------------------------
header
---------------------------------------------*/
header::after{opacity: 1;}
header #logo{width: 30%}
header #logo img{width: 130px}

.hero_logo img {width: 150px;}
h1.main-title {text-shadow: 2px 0px #FFFFFF;}
p.sub-title {font-size: 2.8vw; font-weight: normal}
p.sub-title span.pre, 
p.sub-title span.line{display: block}
.scroll-hint {left: 46.5%; transform: translateX(-50%); bottom: 90px;}


/*--------------------------------------------
#business
---------------------------------------------*/
#business .col2_box{border-radius: 24px; padding:2em; display: flex; justify-content: space-between}
#business .col2_box.sec{margin-top: 50px;}
#business .col2_box .photo{margin-top:0; width: 45%}
#business .col2_box .text{width: 50%}
#business .wrap.zu_wrap p.b{font-size: 2.4rem;}

.btn_more{margin-bottom: 0}

/*下層-------------------------------------*/
.achiev th, .achiev td{padding: 1em 1em; font-size: 1.8rem}
.products figure{border: 5px solid #f0f0f0;}
.products figcaption{font-size: 1.8rem; padding: 10px}
#sec_business p{font-size: 1.8rem}

/*--------------------------------------------
#equipment
---------------------------------------------*/
#equipment .box{padding: 2.5em; border-radius: 24px; margin-top:50px;}
#equipment h3 span{padding-left: 65px}
#equipment h3 span::before{
width: 50px;
height: 50px;
background-size: 50px 50px;
}

ol.products .p_photo{margin-bottom: 1em}
ol.products .p_name{font-size: 2.4rem; margin-bottom: 0.5em}
ol.products .p_name span{display: inline}
ol.products.air .p_text{width: 47.5%; padding-left: 4%; vertical-align: top}
ol.spec{font-size: 1.6rem;}

/*--------------------------------------------
#company
---------------------------------------------*/
#company table th{width: 20%}
#gmap {padding-top: 50%; /* 比率 */}

.col3_box{flex-wrap: wrap; display: flex; justify-content: space-between; align-items: center}
.col3_box img{margin-top: 2.5em; width: 47%}


/*--------------------------------------------
#contact
---------------------------------------------*/
#contact p { text-align: center; line-height: 1.8; font-size: 1.8rem}
#contact p span{display:block;}
.flex_contact{
text-align: center;
}
.contact_box{
border-radius: 24px;
padding: 2em;
margin-top: 2.5em;
width: 80%;
margin-right: auto;
margin-left: auto;
}
.number{font-size: 4.5rem; margin-bottom: 0.2em;}
.mail{font-size: 3.5rem; margin-bottom: 0.2em;}
.number span{padding-left:1.3em}
.mail span{padding-left:1.7em}
.number span::before, 
.mail span::before{
width: 50px;
height: 50px;
background-size: 50px 50px;
}
#contact span.pre{display: block}
#contact .b{margin-top: 0.8em}
.time, #contact .b{font-size: 2rem}

footer{
font-size: 14px;
margin-top: 0;
}


}/*768px〜*/

/* ===================================================
for PC　1025〜
=====================================================*/
@media screen and (min-width: 1025px) { 

.wrap{margin: auto; padding:130px 8%;}
#business .wrap{padding-top:70px;}
h2#second .wrap{padding:0.6em 8%}

h2{font-size: 6rem;}
h2 span{font-size: 35%;}
h2#second{font-size: 6rem;}

#business h3, 
#equipment h3, 
#company h3{font-size:2.4vw;}

h3.second{border-left: 7px #dbbe00 solid; font-size: 5rem}
h3.second.sec{margin-top: 3em}

/*--------------------------------------------
header
---------------------------------------------*/
header::after{opacity: .6; height: 70px;}
header .wrap{height: 70px; padding: 0 2%}
header #logo a{transition: all .2s;}
header #logo a:hover{opacity: .7}
header #logo img{width: 200px}
.navToggle{display: none}
header nav li.sp_none{display: block}

header nav.globalMenuSp{
    display:block;
	font-size:1.6rem;
    position: inherit;
    top: 0;
    left: 0;
    background-color:transparent;
    color: #000;
    text-align: left;
	height: auto;
	width: 70%
}

header nav.globalMenuSp ol{width:auto; position: inherit; align-items: center; display: flex; justify-content: flex-end}
header nav.globalMenuSp li{
	margin-bottom: 0;
	margin-left: 1em;
	width: inherit;
}

header nav.globalMenuSp li a{
    /*背景色の基点とするためrelativeを指定*/
	position: relative;
	padding: 0.6em 1.4em;
	border-bottom:none;
	color: #000000;
}

header nav.globalMenuSp li a:hover{text-decoration: none}

header nav li a::after {
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
    /*背景の形状*/
	width: 0;
	height:100%;
	background:#000000;
    /*アニメーションの指定*/
	transition:all .5s;
	opacity: 0;/*はじめは透過0*/
}

/*現在地とhoverの設定*/
header nav li a:hover::after {
    /*背景の形状*/
	width: 100%;/*横幅を伸ばす*/
	opacity: 1;/*不透明に*/
}

header nav li a:hover{color: #fff;}

header nav li#btn_contact{margin-top: 0}
header nav li#btn_contact a{padding: 1.2em 2em; font-size: 1.8rem; display: inline-block; min-width: 9em; width: auto; margin:0 auto;}
header nav li#btn_contact a::after {display: none}

header nav li#btn_contact a:hover{
  background:#000000;
  color:#fff;
}

header nav li#btn_contact a span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
header nav li#btn_contact a span:nth-child(2){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
header nav li#btn_contact a:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

header nav li#btn_contact a:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}
header nav li#btn_contact a span.en{display: inline}


#hero_container{top:-70px;}
.content{padding: 0; padding: 0 6%; }
h1.main-title {font-size: 8.2rem; text-shadow:none; line-height: 1.4;}
p.sub-title {font-size: 20px; font-weight: normal}
p.sub-title span.line{display: inline}
.scroll-hint {left: 48.5%; bottom: 40px;}


/*--------------------------------------------
#business
---------------------------------------------*/
#business h2{margin-left: 6%}
#business .wrap.none_pad{padding:5% 0}
#business .col2_box{padding:0; display: flex; align-items: center; background-color: transparent}
#business .col2_box.sec{margin-top: 80px;}
#business .col2_box .photo{margin-top:0; width: 43%; z-index: 1; position: absolute}
#business .col2_box h3{padding-top: 5%}
#business .col2_box.sec h3{padding-top: 0}
#business .col2_box.sec .photo{right: 0}
#business .col2_box .text{
width: 100%;
background-color: #f7f7f7;
border-radius: 24px;
padding: 6% 4% 6% 41%;
box-sizing: border-box;
margin:0 6%;
display: inline-block;
}
#business .col2_box.sec .text{padding: 11% 41% 11% 4%;/*padding: 9% 41% 9% 4%;詳しく見るボタン設置用*/}
#business .col2_box .text p{font-size: 1.56vw; line-height: 2}

#business .wrap.zu_wrap p{font-size: 1.6rem; text-align: center}
#business .wrap.zu_wrap p.b span{display: block}
#business .wrap.zu_wrap p.b{font-size: 2.3vw;}

.btn_more{text-align: right; font-size: 1.56vw;}
.btn_more a{transition: all 0.3s;}
.btn_more a:hover{background-color: #000000; color: #dbbe00}
.btn_more a span:after{
width: 26px;
height: 26px;
right: -32px;
background-size: 26px 26px;
transition: all 0.3s;
}

.btn_more a:hover span:after{
right: -38px;
background-image: url(../images/btn_next_red_on.png);
}
/*下層-------------------------------------*/
.achiev th, .achiev td{padding: 1em 1em; font-size: 2rem}

.products figure{width: 32%}
.products figcaption{font-size: 2rem}

.zu{margin: 3em auto 0 auto; width: 100%; text-align: center;}
.zu img{width: 85%;}


/*--------------------------------------------
#equipment
---------------------------------------------*/
#equipment .fex_box{display: flex; justify-content: space-between; flex-wrap: wrap}
#equipment .box.block1{width: 100%}
#equipment .box.block2{width: 48%; margin-top: 0}

#equipment h3 span{padding-left: 95px}
#equipment h3 span::before{
width: 75px;
height: 75px;
background-size: 75px 75px;
}

ol.products.survey{justify-content: flex-start}
ol.products.survey > li{width: 31%; margin-right: 3.5%}
ol.products.survey > li:nth-child(3n){margin-right: 0}
ol.survey > li{margin-top: 50px}
ol.survey > li:nth-child(3){margin-top: 0}

ol.products .p_name{font-size: 1.8vw;}
ol.products.air .p_photo{width: auto}
ol.products.air .p_text{width: auto; padding-left: 4%; vertical-align: top}
ol.spec{font-size: 1vw;}

/*--------------------------------------------
#company
---------------------------------------------*/
#company table{border-top:none; width: auto}
#company table th{padding-right: 1.5em; white-space: nowrap}
#company table th, #company table td{
padding-bottom: 0.5em;
padding-top: 0.5em;
border-bottom:none;
}

#company .col2_box{display: flex; justify-content: space-between; align-items: center}
#company .col2_box.sec{margin-top: 80px}
#gmap, #shaoku{width: 45%; margin-top: 0}
.t_box{width: 50%; margin-top: 0}
#gmap {padding-top: 35%; /* 比率 */}

.greeting p, 
#privacy p{line-height: 2.4}

.f_cap{text-align: center; font-size: 1.5rem}


/*--------------------------------------------
#contact
---------------------------------------------*/
#contact .wrap{padding:130px 6%}
#contact p {font-size: 2rem}
.flex_contact{display: flex; justify-content: space-between; align-items: center;}
.contact_box{
padding: 2em 1em;
margin-top: 2.5em;
width: 45%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
border-radius: 16px;
}
.contact_box.mail_hover a{transition: all 0.3s;}
.contact_box.mail_hover:hover{background-color: #ac9500;}

.number{font-size: 4rem; margin-bottom: 0.1em;}
.mail{font-size: 3rem; margin-top: 0.2em}
.mail span, 
.number span{padding-left: 70px}
.number span::before, 
.mail span::before{
width:60px;
height: 60px;
background-size: 60px 60px;
}
.time, #contact .b{font-size: 3rem}
.time{font-size: 1.8rem; margin-top: 1em}

footer .wrap{display: flex; justify-content: space-between;}


/*--------------------------------------------
.to-top
---------------------------------------------*/
.to-top{
width: 80px;
height: 80px;
z-index: 2;
bottom: 80px;
}
.to-top:hover span.arrow{background-color: #dbbe00; background-position: center 40%; border: 1px solid #ffffff;}
.to-top span.arrow{
background-size: 24px 13px;
width: 80px;
height: 80px;
}

}/*1025px〜*/

/* ===================================================¥
for PC　1500〜
=====================================================*/
@media screen and (min-width: 1500px) { 

h1.main-title {font-size: 5.4vw;}
p.sub-title{font-size: 1.4vw; }

.greeting p, 
.greeting div,
#company table{font-size: 1.2vw}

}/*1025px〜*/