@charset "utf-8";

/*初期化の設定
------------------------------------------------------------------------------*/
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,
cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,picture,main{display:block;}
body{line-height:1.4;}ol,ul{list-style:none;}blockquote,q{quotes:none;}

*::before,
*::after {
    box-sizing: border-box; 
}
/*レスポンシブ*/
img{
	width: 100%;
}

picture{
	width: 100%;
}

.sp{
  display: none;
}
.pc{
  display: block;
}
@media screen and (max-width: 1024px) {
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
}

/*共通*/
.contact-hero{
  position: relative;
}

.contact-hero-bg {
  height: 320px;
  width: 100%;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .contact-hero-bg {
  height: 240px;
}
}

.contact-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero-inner{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  color: #fff;
}

.contact-hero-inner .sec-en {
  color: #fff;
}

.contact-hero-title {
  color: #fff;
  text-align: left;
  font-size: 2.9rem;
  font-weight: 200;
}
@media screen and (max-width: 640px) {
    .contact-hero-title {
        font-size: 2.3rem;
        text-align: center;
    }
}

/*.local_nav*/
.local_nav{
  display: flex;
  gap: 8%;
  width: 100%;
  max-width: 1190px;
  margin: 0 auto 60px;
}

.local_nav>li{
  width: calc((100% - 8% ) / 2);
}

.local_nav>li>a{
  position: relative;
  line-height: 85px;
  color: #fff;
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.local_nav>li>a::after{
  content: '';
  position: absolute;
  right: 40px;
  margin-top: -10px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg);
}

.local_nav>li>a.clr1{
  height: 85px;
  background: rgba(18, 120, 113, 0.97);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.local_nav>li>a.clr2{
  height: 85px;
  background: rgba(1, 169, 158, 0.97);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 1024px) {
  /*.local_nav*/
  .local_nav{
    flex-direction: column;
    gap: 8%;
    width: 100%;
    gap:30px;
  }
  .local_nav>li{
    width: 100%;
  }
}


.section_wrap{
  max-width: 1320px;
  padding: 80px 20px 90px;
  margin: 0 auto;
}

.section_header{
  width: 100%;
  color: #fff;
  font-size:  24px;
  padding:20px 35px;
  margin-bottom: 50px;
  line-height: calc(64 / 42);
}

.section_header.clr1{
  background-image: linear-gradient(to right,rgba(18, 120, 113, 1) 55%, #fff 100%);
}
.section_header.clr2{
  background-image: linear-gradient(to right,rgba(1, 169, 158, 1) 55%, #fff 100%);
}
@media screen and (max-width: 1024px) {
  
  .section_contact_head{
    width: 90%;
    margin: 0 auto;
  }
  .section_wrap{
    padding: 50px 0;
  }
  .section_header {
    font-size: 24px;
    padding-right: 25px;
  }
}