@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */

html {
    font-size: 62.5%;
}

body {
    font-size: 1.5rem;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
    font-weight: normal;
    max-width: 100%;
}

object {
    pointer-events: none;
}

.sp {
    display: block !important;
}

.pc {
    display: none !important;
}

a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    /*スマホ時url改行されるように*/
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
  ★BASE
--------------------------------------------------------------------------- */
a.anchor01 {
  padding-top: 110px;
  margin-top: -110px;
}

#message{
    scroll-margin-top: 90px;
}
#philosophy{
    scroll-margin-top: 20px;
}
#organization{
    scroll-margin-top: 25px;
}
#overview,
#access{
    scroll-margin-top: 60px;
}
.bor{
  border: 1px solid #999;
}



/* ---------------------------------------------------------------------------
  ★header
--------------------------------------------------------------------------- */
#header {
  height: 60px;
  }
#header.active {
     box-shadow: 0 0 10px rgba(0,0,0,0.2);   
}
.header__inner {
    height: 60px;
    margin: auto;
    padding: 7.773px 0;
    width: 92%;
}
.header__inner.is-fixed .inner_in{
    position: relative;
    width: 92%;
    margin: 0 auto;
}
h1.header__logo {
    display: block;
    position: relative;
    padding-top: 0.5rem;
    z-index: 99;
}
h1.header__logo a{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
h1.header__logo img{
    width: 7rem;
    margin-right: 0.5rem;
}
h1.header__logo span{
    font-size: 1.2rem;
}

.header__trigger {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 56px;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 0;
    width: 60px;
    z-index: 99;
}
.header__trigger-menu {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}
.header__trigger-menu span.close {
    display: none;
}
.header__trigger-menu.is-active span.open {
    display: none;
}
.header__trigger-menu.is-active span.close {
    display: block;
    color: #fff;
}

.header__trigger-inner {
    display: inline-block;
    height: 20px;
    position: relative;
    transition: all 0.4s;
    width: 30px;
    margin-bottom: 3px;
}
.header__trigger-line {
    background-color: #fff;
    border-radius: 2.5px;
    display: inline-block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: 0.5s;
    transition-property: transform, -webkit-transform;
    width: 100%;
}
.header__trigger-line:nth-of-type(1) {
    top: 0;
}
.header__trigger-line:nth-of-type(2) {
    top: 9.2px;
}
.header__trigger-line:nth-of-type(3) {
    bottom: 0;
}
.header__trigger-line:nth-of-type(1).is-active {
    transform: translateY(12px) rotate(45deg);
}
.header__trigger-line:nth-of-type(2).is-active {
    display: none;
}
.header__trigger-line:nth-of-type(3).is-active {
    transform: translateY(-6px) rotate(-45deg);
}



/* =======================================
  nav
========================================== */
body.is-open .navi {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    background-color:#3a3a3a;
    /*background-color: rgba(26, 26, 26, 0.95);*/
    padding-bottom: 3rem;
}
.inner_in{
    width: 84%;
    margin: 0 auto;
}
.navi {
    bottom: 0;
    display: block;
    opacity: 0;
    overflow: auto;
    padding-top: 8rem;
    position: fixed;
    right: 0;
    top: 0;
    transition: 0.5s;
    visibility: hidden;
    width: 100%;
    z-index: 50;
}
.navi__menu {
    gap: 0.9rem 0;
    border-top: none;
    flex-direction: column;
    margin: 0 auto;
    padding-right: 0;
    width: 100%;
}
.nav_tit{
    color: #fff;
}
.navi__menu-link {
    border-bottom: 0.5px solid #fff;
    position: relative;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 0 1.1rem 0.8rem;
}

.navi_arrow::before{
    content: "";
    position: absolute;
    background: url(../img/arrow_viewmore_w.webp) no-repeat;
    background-size: contain;
    width:12px;
    height: 15px;
    right: 5px;
    /*width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    right: 20px;*/
    /*transform: rotate(45deg);*/
    transition: .3s;
}
.navi_arrow::before{
    top: calc(50% - 7px);
}

/* プラス/マイナスアイコンの土台 */
.navi__plus {
  position: absolute;
  display: inline-block;
  width: 14px;
  height: 14px;
  right: 0.5rem;
  vertical-align: middle;
}

/* 横棒（常に表示＝マイナスの線） */
.navi__plus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.5px;
  background: #fff;
  transform: translateY(-50%);
}

/* 縦棒（閉じている時だけ表示＝これがあると＋になる） */
.navi__plus::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.5px;
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

/* 開いている時は縦棒を消してマイナスにする（SP：タップでis-open付与） */
.navi__menu-item.has-sub.is-open .navi__plus::after {
  opacity: 0;
}




ul.navi__child_sp,
ul.navi__child_sp03 {
    display: block; 
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 1.5rem;
    transform: translateY(-8px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.navi__menu-item.has-sub.is-open .navi__child {
    max-height: 500px; 
    opacity: 1;
    flex-wrap: wrap;
    border-bottom: 0.5px solid #fff;
    padding-bottom: 2rem;
    transform: translateY(0);
}
.navi__menu-item.has-sub.is-open .navi__menu-link{
    border-bottom: none;
    padding: 0 0 0.7rem 0.8rem;
}


li.has-sub02{
    border-bottom: none;
}

li.has-sub02 a span{
    color: #fff;
}
li.has-sub02 .navi__menu-link{
    border-bottom: none;
    padding-bottom: 0.5rem;
}


ul.navi__child_sp a{
    gap: 5px;
    gap: 0.5rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px 15px;
    width: 100%;
    padding: 0.5rem 1.5rem 0.5rem 2.3rem;
}

ul.navi__child_sp02{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    gap: 1.5rem 5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
ul.navi__child_sp li{
    position: relative;
}
ul.navi__child_sp li:not(:last-child) a{
    margin-bottom: 1.5rem;
}
ul.navi__child_sp li:nth-child(-n+2){
    width: calc(50% - 7px);
}
ul.navi__child_sp02 li:nth-child(2) a{
    margin-left: 0;
}
ul.navi__child_sp li a,
ul.navi__child_sp02 li a{
    position: relative;
    border-bottom: 0.5px solid #fff;
    padding: 0;
}
ul.navi__child_sp li a::before,
ul.navi__child_sp02 li a::before{
    content: "";
    position: absolute;
    background: url(../img/arrow_viewmore_w.webp) no-repeat;
    background-size: contain;
    width:10px;
    height: 13px;
    top: 60%;
    right: 2px;
    transform: translateY(-50%);
}
ul.navi__child_sp li{
    margin-right: 2rem;
}
ul.navi__child_sp li a{
    width: 250px;
}
ul.navi__child_sp02 li a{
    display: block;
    width: 110px;
    margin-left: 0.8rem;
}



.header__right_in{
    width: 90%;
    justify-content: center;
    margin: 1rem auto 0 auto;
}
.header__right_in .tel_wrap{
    line-height: 1.1;
    margin-bottom: 2.5rem;
}


.header__bn_wrap{
    width: 100%;
    margin-top: 2rem;
    gap: 1.5rem;
}
a.header__contact{
    width: 100%;
}
.header__recruit_wrap{
    width: 100%;
}
a.header__contact,
.header__recruit{
    text-align: left;
    height: 42px;
    padding: 0.6rem 0 0.7rem 1.5rem;
}

.header__recruit .navi__plus{
    top: 1.3rem;
    right: 1.5rem;
}
.header__recruit_wrap .navi__child{
    background: #141414;
}
.header__recruit_wrap.has-sub.is-open .navi__child {
    max-height: 500px; 
    opacity: 1;
    flex-wrap: wrap;
    border-bottom: none;
    padding-bottom: 2rem;
    padding-right: 1.5rem;
    transform: translateY(0);
}


.recruit_link{
    gap: 3rem;
    margin-top: 1rem;
    font-size: 1.4rem;
}
.recruit_link a{
    color: #fff;
    border-bottom: 0.5px solid #fff;
    gap: 1rem;
}

ul.navi__child_sp03{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
}

ul.navi__child_sp03 li{
    width: 100%;
}
ul.navi__child_sp03 li:nth-child(2){
    width: 50%;
}
ul.navi__child_sp03 li:last-child{
    width: 44%;
}

ul.navi__child_sp03 li:first-child{
    margin-bottom: 1.5rem;
}
ul.navi__child_sp03 li a{
    display: flex;
    flex-wrap: nowrap;
    color: #fff;
    border-bottom: 0.5px solid #fff;
    gap: 1rem;
    position: relative;
    font-size: 1.4rem;
    padding-right: 1.5rem;
}
ul.navi__child_sp03 li a::before {
        content: "";
        position: absolute;
        background: url(../img/arrow_viewmore_w.webp) no-repeat;
        background-size: contain;
        width: 10px;
        height: 13px;
        top: 60%;
        right: 5px;
        transform: translateY(-50%);
}


.header__right_in .tel_wrap{
    width: 100%;
    margin-bottom: 2.5rem;
}
.header__right_in .tel_wrap a{
    justify-content: center;
}
.tel_wrap a img{
    width: 1.2rem;
}
.tel_wrap a span.out{
    font-size: 2.8rem;
    margin-left: 0.5rem;
    margin-top: 1.5rem;
}
.tel_wrap a span.time{
    font-size: 1.4rem;
    display: block;
    padding: 0.7rem 0 0 1rem;
}
.tel_wrap a span.noto{
    font-size: 1.2rem;
}

.header__right_in .cases_wrap{
    margin-top: 0.5rem;
}
.header__right_in .cases_wrap a img{
    width: 1.8rem;
    object-fit: contain;
}
.header__right_in .cases_wrap a span{
    font-size: 1.4rem;
    margin-left: 0.5rem;
}

#contact .popup-inner {
    padding: 40px 20px;
}


.inner,.inner_700,.inner_800,.inner_900,.inner_1000,.inner_1050,.inner_1100,.inner_1200{
    width: 90%;
}


/* ---------------------------------------------------------------------------
  ★トップページ
--------------------------------------------------------------------------- */
.hero__img{
    height: 110vw;
}
h2.hero_txt{
    background-position: center 5.5rem;
    width: 40vw;
    top: 28vw;
}
h2.hero_txt img{
   width: 20vw;
}

#home h3{
    font-size: 2.2rem;
    line-height: 1.6;
}

/* =================================
   top_About
================================= */
.top_About {
  padding-top: 2rem;
  min-height: 980px;
}
#home .top_About h3{
    font-size: 5.55vw;
}

.top__title {
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.top__title .en {
    font-size: 2rem;
    padding-bottom: 0.5rem;
}

.top__title .en .sm{
  font-size: 1.4rem;
}

.top__title .slash {
    width: 0.5px;
    height: 70px;
}

.top__title .jp {
    font-size: 1.2rem;
}

.top_About h3 {
    margin: 8rem 0 13rem 0;
}

.top_About .txtBox{
  margin-left: 14rem;
}
.top_About .txtBox p {
    max-width: 400px;
    line-height: 2;
}

.p_Mbt{
  margin-bottom: 2rem;
}

.top_About a.cta_01{
    margin-top: 3rem;
}
a.cta_01 {
  width: 100%;
  max-width: 300px;
  height: 45px;
    gap: 14px;
    padding: 10px 20px;
  }

a.cta_01 img{
  width: 50px;
  margin-left: 1rem;
}

.img-tower {
    right: 0;
    top: 100px;
    width: 51vw;
    height: 290px;
  } 
.img-tanks {
    left: 0;
    top: 42.5rem;
    width: 133px;
    height: 243px;
  }
 
.img-city {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 200px;
    height: 120px;
}

/* =================================
   top_Service
================================= */
.top_Service {
    padding: 4rem 0;
}
.top_Service_box{}
.service__grid{
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}
.service__card {
    padding: 3rem;
}
.top_Service h3{
    margin-bottom: 2rem;
}
.top_Service h3 span.number{
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}
.viewmore{
    font-size: 1.4rem;
    gap: 1rem;
    justify-content: end;
}
.view_bk{
    margin-top: 3rem;
}
.viewmore::after{
    right: 12.5rem;
    width: 100%;
}
.viewmore img{
    width: 10px;
    object-fit: contain;
}

.service__banner {
    display: block;
    padding: 2rem;   
}
.service__banner .label {
    width: 100%;
    margin-bottom: 2rem;
    padding: 0 0.5rem 2rem 0.5rem;
}
.service__banner .label::after {
    bottom: 0;
    width: 100%;
    height: 0.5px;
}
.top_Service .Box_r {
    padding: 0 0.5rem;
}
.top_Service .Box_r h3 {
    margin-bottom: 1rem;
}
.viewBox{
    width: 20rem;
    margin: 0 0 0 auto;
}
.view_wh{
    margin-top: 2.5rem;
}


/* =================================
   top_Company
================================= */
.top_Company {
    padding: 3rem 0 4rem 0;
}
.top_Company h3 {
    margin: 0 0 2rem 0;
}
.top_Company .txtBox{
    margin-bottom: 4rem;
}
.top_Company .txtBox p {
    line-height: 2;
}

.top_Company .Box_r{
    margin: 3rem 0 0 auto;
}
.top_Company .Box_r .Mgb{
    margin-bottom: 2rem;
}
.top_Company .imgBox{
    height: 220px;
}
.top_Company .imgBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top_Company a.cta_01{
    width: 240px;
    justify-content: space-between;
}

/* =================================
   top_Recruit
================================= */
.top_Recruit{
    padding: 5rem 0 4rem;
}
.bg_txt{
    width: 70vw;
    max-width: 600px;
    top: -11vw;
    left: 8px;
}
.panel_out{
    width: 90%;
    margin: 0 auto;
}
.panel{
    padding: 2rem;
}

.top_Recruit .imgBox{
    width: 20vw;
    max-width: 100px;
    top: -2rem;
    right: 3vw;
}

.panel-copy{
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

/* =================================
   top_Info
================================= */
@media screen and (max-width: 390px) {
    .top_Info .top__title .jp{
        font-size: 3vw;
    }
}

.top_Info .topBox{
    margin-bottom: 2rem;
}
.top_Info .instaBox{
    margin:3rem 0 0 3rem;
}
.top_Info .instaBox::before,
.top_Info .instaBox::after{
    width: 0.8rem;
    height: 5rem;
}
.top_Info .instaBox::before {
    right: -2.5rem;
}
.top_Info .instaBox::after {
  left: -2.5rem;
}
.top_Info .instaBox .imgBox{
    width: 46px;
    margin-right: 2rem;
}

.info__links-grid{
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 3rem;
}
.info__card {
    padding: 4rem 1rem;
}
.info__card h3{
    margin-bottom: 1.5rem;
}
.top_Info .bor_top{
  border-bottom: 0.5px solid #aaa;
}
.top_Info a.view_bk{
    margin-top: 2rem;
}

/* =================================
   top_News
================================= */
.bg_gray{
    padding: 4rem 0;
}
ul.post-list {
    border: 1px solid #999;
}


/* =================================
   top_Contact
================================= */
.top_Contact{
    padding: 4rem 0;
}
.top_Contact h2.en{
    font-size: 7.1rem;
    line-height: 1;
}
.top_Contact h3.lead {
  margin-left: 2.2rem;
  margin-bottom: 1rem;
}
.top_Contact p.sub-lead{
    margin-left: 2.2rem;
}

.contact__grid{
    gap: 3rem;
    margin-top: 3rem;
}
a.Box_wh{
    padding: 1.3rem;
    width: 100%;
    height: 95px;
}
.top_Contact .Box_l .tel_wrap span.tit{
    margin-bottom: 1rem;
}
.top_Contact .Box_l .tel_wrap{
    margin-bottom: 1rem;
}
.top_Contact .Box_l span.out{
  line-height: 0.7;
  padding-left: 1.2rem;
}
.top_Contact .Box_l span.out::before {
    width: 12px;
    height: 22px;
    top: 1.3rem;
    left: -0.5rem;
}
.top_Contact .Box_l span.time{
  font-size: 1.5rem;
}

.top_Contact .Box_l .mail_wrap span.tit{
    margin-bottom: 0.5rem;
}
.top_Contact .Box_l .mail_wrap .tit02{
    font-size: 2rem;
    padding-left: 2rem;
}
.top_Contact .Box_l .mail_wrap .tit02::before {
    width: 20px;
    height: 24px;
    top: 0.4rem;
    left: -0.7rem;
}
.top_Contact .Box_l .qa_wrap{
    margin-top: 1rem;
}
.top_Contact .Box_l .qa_wrap p{
    margin-bottom: 1.5rem;
}
a.cta_w_sp{
    width: 230px;
}

.top_Contact .Box_r{
    gap: 3rem;
}
.top_Contact .Box_r .txtBox{
    font-size: 1.8rem;
    width: 100%;
}
.top_Contact .Box_r .tit{
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
}

.mapBox a{
    padding: 1.2rem 2rem 1.5rem 2rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}
.mapBox a::before {
    width: 20px;
    height: 20px;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}
.Box_r .mapBox img{
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}


/* =================================
   footer
================================= */
footer{
    padding: 5rem 0 2.5rem 0;
}
a.footer_logo{
    width: 180px;
    margin-bottom: 3rem;
}
a.footer_logo img{
    width: 100%;
}
footer address{
    line-height: 1.7;
    margin-bottom: 1rem;
}
footer .tel_wrap a span.time{
    padding-left: 0;
}

.footer_right{
    margin-top: 3rem;
}
.footer_nav-wrap{
  gap:3.5rem;
}
.footer_li-item{
  margin-bottom: 3rem;
}
.footer__link{
  font-size: 1.5rem;
}
.footer_right .spacer{
    width: 100%;
}
.footer_li , 
.footer_nav-wrap div{
    width: 14em;
    text-align: left;
    display: inline-block;
}

.footer_li-item,.footer_li-item a{
  margin-bottom: 15px;
}
.footer_nav{
    width: 100%;
}
.footer_nav-wrap{
    gap: 0 3.5rem;
    /*justify-content: center;*/
    margin-bottom: 2rem;
}
.footer_nav-wrap div ul.footer_li{
    width: 100%;
}

.footer_recruit{
    padding: 2rem 2rem 2.5rem 2rem;
    margin-top: 3rem;
    position: relative;
}
.footer_recruit .top_txt .txt_img{
    top: -2rem;
    left: -1.7rem;
    width: 160px;
}
.footer__links{
    gap: 3rem 2rem;
    margin-top: 2rem;
}
.footer__links a{
    gap: 1rem;
}
.footer__links a img {
    width: 10px;
    object-fit: contain;
}

.footer_recruit .top__title{
    position: absolute;
    top: 2rem;
    right: 1rem;
}
.footer_recruit .top_txt p{
    margin-top: 5rem;
}

footer .Box{
    margin-top: 2.5rem;
    text-align: center;
}
footer .Box_bt{
    margin: 1.5rem 0 2rem 0;
}
footer .Box .imgBox_1{
    width: 89%;
    margin: 0 auto;
}
footer .Box .imgBox_2{
    width: 89%;
    margin: 0.6rem auto 0.8rem auto;
}
footer .link_wrap{
    margin-bottom: 3rem;
}
footer .link_wrap a:first-child{
    margin-bottom: 1rem;
}
footer .osakagas_link{
    padding: 1.1rem 0.5rem 0 1rem;
    margin-bottom: 1rem;
    gap: 2rem;
}

footer a.insta{
    position: absolute;
    right: 0.5rem;
    bottom: 30rem;
}

.footer__copy{
    margin-top: 4rem;
}

/* =======================================
    パンくず
========================================== */
ul.pankuzu {
    font-size: 1.2rem;
    margin: 1rem auto 4rem auto;
}
ul.pankuzu a{
    margin-right: 1.5rem;
}
ul.pankuzu a::before{
  width: 4px;
  height: 4px;
  top: 0.1rem;
  right: -9px;
}

.pankuzu li {
  white-space: nowrap;    /* 各項目内でのみ折り返し禁止 */
  flex-shrink: 0;         /* HOME・新着情報・カテゴリーは縮めない */
}
/* 最後の項目(記事タイトル)だけ、幅が足りない分を縮めて省略表示 */
.pankuzu li:last-child {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------------------------------------------------------------------------
  ★下層ページ
--------------------------------------------------------------------------- */
.subTop{
  background: url(../img/sub_topimg_sp.webp) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  height: 250px;
}

.subTop h2,
#recruit h2{
    font-size: 2.2rem;
    line-height: 1.2;
}
.subTop h2{
    padding-top: 12rem;
}
#recruit h2{
    padding-top: 9rem;
}

.subTop h2 span.en,
#recruit h2 span.en{
    font-size: 1.3rem;;
}
.subTop h2 span.en span,
#recruit h2 span.en span{
    font-size: 1.8rem;
}

#sub h3{
    font-size: 2.2rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
}
#sub h4{
    font-size: 1.8rem;
    line-height: 1.5;
}
#sub h5{
    font-size: 1.6rem;
}
#sub .Mgt{
    margin-top: 4rem;
}
#sub .bg_black{
    padding: 4rem 1rem;
}
.bor_bt{
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}

/* =================================
   会社案内
================================= */
#company .link_wrap_top{
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 5rem;
}
#company .link_wrap_top{
    gap: 1rem;
}
.messageBox h3{
    margin-bottom: 1.5rem;
}
#sub .messageBox h4{
    font-size: 2.5rem;
    margin: 1.5rem 0;
    letter-spacing: 0.02em;
}
#company a.cta_01{
    width: 160px;
    height: 45px;
    padding: 0.3rem 1.2rem 0.5rem 1.2rem;
    font-size: 1.3rem;
    gap: 0.5rem;
}
#company a.cta_01:nth-child(4) {
        line-height: 1.3;
}
#company a.cta_01 img{
    width: 40px;
    margin-left: 0;
}

.message_sign{
    margin-top: 2rem;
}
.message_sign img{
  width: 125px;
}
.messageBox h4{
    margin-bottom: 2rem;
}

.philosophy{
    background: url(../img/bg_philosophy.webp) no-repeat;
    background-size: cover;
    background-position: 90% center;
}
.philosophy .en{
    font-size: 6rem;
    line-height: 1;
    margin: 2rem 0;
}

.overview h3{
    margin-bottom: 2.5rem;
}
.overview table.c-table th{
    width: 100%;
}
table.c-table th {
        border: 1px solid #f5f5f5;
        background: #e9e8e8;
        vertical-align: top;
        padding: 12px 13px;
        font-weight: 600;
        display: block;
        word-break: break-all;
}
table.c-table_sp td {
        border-right: 1px solid #f5f5f5;
        border-left: 1px solid #f5f5f5;
        border-top: none;
        border-bottom: none;
        vertical-align: top;
        padding: 12px 13px;
        word-break: break-all;
        width: 100%;
        display: block;
}
table.c-table_sp td:last-child{
    border-bottom: 1px solid #f5f5f5;
}

.osaka_gas p.tit{
    font-size: 1.9rem;
    margin-bottom: 1rem;
}
.osaka_gas_wrap{
    margin-bottom: 5rem;
}
.osaka_gas_wrap .txtBox{
    margin-bottom: 1rem;
}
.osaka_gas p.tit02 span{
    font-size: 1.7rem;
    margin-bottom: 0.3rem;
}

.osakagas_link,
.osaka_gas .link_wrap{
    grid-template-columns: repeat(2, 1fr);
    width: 300px;
    margin: 0 auto;
    gap: 4rem;
    padding: 2rem 0;
}
.osaka_gas .link_wrap img{
    width: 200px;
    margin: 0 auto;
}
#company .osaka_gas .grid_4{
    padding: 2rem 0 0 0;
    gap: 4rem 1.5rem;
}
#company .osaka_gas .grid_4 img{
    width: 170px;
    margin: 0 auto;
}

h5.team{
    margin-bottom: 0.5rem;
}
.organization .figureBox{
    margin: 2rem 0;
}
.organization .Box{
    padding: 2.5rem 2rem;
    margin-top: 2rem;
}
.organization .Box h4{
    margin-bottom: 1.5rem;
}
.organization .Box .imgBox{
    width: 100%;
    max-width: 400px;
}
.organization .Box .imgBox p{
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.organization .Box .txtBox{
    margin-top: 1rem;
}
.organization .name_wrap{
    gap: 1rem;
    line-height: 1.7;
}
.organization .Box span.en{
    font-size: 1.2rem;
    padding-top: 0.3rem;
}
.organization .Box span.ja_name{
    font-size: 2rem;
}
.organization .Box p.licence span{
    margin: 1rem 0 0 0;
}
.organization .Box h5{
    font-size: 1.8rem;
}
.organization .teamBox{
    margin-top: 2rem;
}
.organization .teamBox .imgBox{
    width: 100%;
    max-width: 600px;
}
.organization .teamBox02 .Box{
    gap: 2rem;
}
.organization .teamBox02 .Box .imgBox{
    width: 100%;
}
.teamBox02 h4 span.sm{
  font-size: 1.6rem;
}

.access{
    padding: 0rem 0 5rem;
}
#sub .access h3{
    font-size: 6rem;
    line-height: 0.7;
}
#sub .access .tit{
    font-size: 1.7rem;
}
.access iframe{
    height: 300px;
    margin: 1rem 0;
}

/* =================================
   ESGへの取り組み
================================= */
#sub .topBox h3{
    margin-bottom: 1rem;
}

#esg .topBox .figureBox{
    width: 290px;
    margin: 3rem auto; 
}

#esg .Box03{
    margin-bottom: 4rem;
}
#esg .Box03 .Mgb_wrap{
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
#esg .Box03 h3{
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
#esg .Box03 img.mark{
    width: 50px;
    height: 50px;
}
#esg .Box03 .titBox{
    align-items: center;
    margin-bottom: 2rem;
}
#esg .Box03 .titBox .tit{
    width: 100%;
    margin: 2.5rem 0 1.5rem 0;
}
#esg .Box03 .titBox span.en{
    font-size: 7rem;
    line-height: 0.2;
}
#esg .Box03 .titBox span.sm{
    font-size: 3rem;
}
#esg .Box03 .titBox span.ja{
    font-size: 1.8rem;
    display: inline-block;
    margin-left: 1.5rem;
}

#esg .Box03 .Box_in .imgBox{
    width: 100%;
    max-width: 400px;
    margin: 0 0 2rem 0;
}

#esg h4{
    margin-bottom: 0.5rem;
}
#esg .Mgb{
    margin-bottom: 2.7rem;
}

/* =================================
   ニシダガスセンターの強み
================================= */
#strengths .topBox .imgBox{
    margin-top: 2rem;
}
#strengths .Box_l h3{
    margin-bottom: 1.5rem;
}
#strengths .Box01 .Box_r{
    width: 100%;
    max-width: 400px;
    margin-top: 3rem;
}
#strengths .Box01 .Box_r .link_wrap{
    padding: 1rem 0 2rem 0;
}
#strengths .Box01 .Box_r_in{
    margin-bottom: 4rem;
}
#strengths .Box01 h4{
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

#strengths .Box01 .Box_r .gss{
    margin-bottom: 0.5rem;
}
#strengths .Box01 .Box_r .gss .tit{
    font-size: 1.8rem;
}
#strengths .Box01 .Box_r .gss img{
    width: 30px;
    margin-right: 0.5rem;
}

.Box_award{
    width: 100%;
}
.Box_award .imgBox{
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}
#sub .Mgt02{
    margin-top: 4rem;
}
#strengths .bg_gray{
    padding: 4rem 0;
}

#strengths .Box02 .Box_r,
#strengths .Box03 .Box_r,
#strengths .Box04 .Box_r{
    width: 100%;
    max-width: 400px;
    margin-top: 2rem;
}
#strengths .Box_r .Mgb{
    margin-bottom: 2rem;
}
#strengths .Box02 .Box_r p{
    padding-top: 0.5rem;
}
#strengths .Box04{
    padding-bottom: 6rem;
}
p.p_Mgt{
    margin-top: 0.3rem;
}


/* =================================
   事業案内 共通
================================= */
.gas_link_wrap{
    gap: 1rem;
    padding-bottom: 4rem;
}
.gas_link_wrap a.cta_01{
        height: 32px;
        padding: 0.3rem 1.5rem 0.5rem 1.5rem;
        font-size: 1.3rem;
        gap: 0.5rem;
}
.gas_link_wrap a.cta_01 span{
    line-height: 1.3;
}
#city_gas .gas_link_wrap a.cta_01{
    width: 250px;
}

#gasEquipment01,
#lpgasConstruction{
    scroll-margin-top: 60px;
}
#gasEquipment02,
#acu24,
#price,
#Supported_services,
#flow{
    scroll-margin-top: 50px;
}
#area{
    scroll-margin-top: 60px;
}
#SafetySecurity01,
#top{
    scroll-margin-top: 60px;
}
#SafetySecurity02{
    scroll-margin-top: 20px;
}


/* =================================
   都市ガス事業
================================= */
#city_gas .topBox .txtBox{
    margin-bottom: 3rem;
}
.gas_topBox .link_wrap{
    margin-top: 3rem;
    justify-content: center;
}
.gas_topBox .link_wrap a{
}

#city_gas .Box01{
    padding-top: 5rem;
}
#city_gas .Box02{
    padding: 4rem 0;
}
#city_gas .Box02 h3{
    margin-bottom: 2rem;
}
#city_gas .Box02 .Box_in{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}
#city_gas .Box02 .Box_in .imgBox img{
    margin: 0 auto;
    width: 80px;
    height: 105px;
}
#city_gas .Box02 .Box_in .img_size01 img{
    width: 100px;
    height: 85px;
}
#city_gas .Box02 .Box_in .img_size02 img{
    width: 60px;
    height: 105px;
}
#city_gas .Box02 .Box_in .img_size04 img{
    width: 52px;
}
#city_gas .Box02 .Box_in .img_size05{
    margin-top: 1rem;
}

#city_gas .Box03{
    padding: 3rem 0;

}
#city_gas .Box03 h3{
    margin-bottom: 2rem;
}
#city_gas .Box03 p.txt{
    margin: 0 auto 2rem auto;
}
#city_gas .Box03 .Box_in{
    margin: 0 auto;
}
#city_gas .Box03 .Box_l{
    width: 100%;
    margin: 0 auto;
}
#city_gas .Box03 .Box_l ul li{
    padding: 1.5rem;
    font-size: 1.6rem;
}
#city_gas .Box03 .Box_l ul li:first-child{
    margin-bottom: 1.5rem;
}
#city_gas .Box03 .Box_l ul li span{
    font-size: 3rem;
}
#city_gas .Box03 .Box_r{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.txt_line{
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

#city_gas .Box04{
    padding-bottom: 3rem;
}


/* =================================
   LPガス事業
================================= */
.gas_topBox h3{
    margin-bottom: 2rem;
}
.gas_topBox .txtBox{
    margin-bottom: 3rem;
}

.Box_gas h3{
    margin-bottom: 2rem;
}
.Box_gas .txtBox{
    margin-bottom: 2rem;
}
.Box_gas .Box_in{
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}
.Box_gas .Box_in p{
    text-align: center;
}

#lp_gas .Box02{
    padding: 4rem 0 0 0;
}
#lp_gas .Box02 .top{
    margin-bottom: 3rem;
}
#lp_gas .Box02 .top img{
    width: 130px;
}
#lp_gas .Box02 h4{
    margin: 2rem 0 1rem 0;
}
#lp_gas .Box02 .acu_wrap{
    margin-bottom: 4rem;
    gap: 2rem;
}
#lp_gas .Box02 .acu_wrap .Box_l{
    border: 1px solid #999;
    padding: 2rem;
    margin-bottom: 2rem;
}
#lp_gas .Box02 .acu_wrap .Box_l img{
    width: 100px;
    margin: 2rem auto 2.5rem auto;  
}

#lp_gas .Box02 .bg_gray{
    padding: 2rem 1.5rem;
}
#lp_gas .Box02 .bg_gray h4{
    width: 180px;
    margin: 0 auto 2rem auto;
    padding-bottom: 0.3rem;
}

#lp_gas .Box02 ul.grid{
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem; 
}
#lp_gas .Box02 ul.grid li{
    padding: 2.5rem 1.5rem;
}
#lp_gas .Box02 ul.grid li img{
    width: 90px;
    margin: 0 auto 2.5rem auto;
}
#lp_gas .Box02 ul.grid li h5{
    margin-bottom: 2rem;
}
#lp_gas .Box02 ul.grid li h5 span{
    padding-bottom: 1rem;
}

.Box_system h3{
    margin-bottom: 3rem;
}
.Box_system .Box_in{
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
}
.Box_system .Box_in h4{
    margin-bottom: 0.5rem;
}
.Box_system .Box_in p{
    margin-bottom: 1.5rem;
}

#lp_gas .Box_out{
    padding: 4rem 0 0 0;
}
#lp_gas .Box_out h3{
    margin-bottom: 2rem;
}
#lp_gas .Box h4{
    margin-bottom: 2rem;
}
.price-table tr {
    border-bottom: 1px solid #999;
}
.price-table tr:nth-child(2) {
    border-bottom: 1px solid #d4d2d2;
}
.price-table tr:first-child {
    border-top: 1px solid #999;
}
.price-table td {
    padding: 1.2rem 0.7rem;
    vertical-align: middle;
}
.price-table td.txt_red{
    font-size: 1.7rem;
    line-height: 1.4;
}
.label {
    width: 20%;
    white-space: nowrap;
}
.range {
    width: 85px;
}
.unit-label {
    width: 25%;
}

#lp_gas .Box04,
#lp_gas .Box05{
    padding: 3rem 1rem 2rem 1rem;
  border: 1px solid #999;
}
#lp_gas .Box04 .Box_in{
    margin-top: 4rem;
}
#lp_gas .Box04 .calc{
    justify-content: center;
}
#lp_gas .bor_Box{
    border: 1px solid #999;
    padding: 1rem 2rem 1.2rem 2rem;
    text-align: center;
}
#lp_gas .Box_a{
    width: 100%;
}
#lp_gas .Box_b{
    width: 100%;
}
#lp_gas .Box04 h5{
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
#lp_gas .Box04 h6{
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}
#lp_gas .plus{
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}
p.kome{
    font-size: 1.2rem;
    margin-top: 0.8rem;
    line-height: 1.5;
}

#lp_gas .Box05{
    margin: 3rem auto 4rem auto;
}
#lp_gas .Box05 p.txt{
    margin-bottom: 2rem;
}


/* =================================
   住まいのガス
================================= */
#home_gas .topBox h3{
    letter-spacing: 0.05em;
}
#home_gas .topBox h3 span{
    font-size: 1.7rem;
}
#home_gas .Box01{
    margin-top: 4rem;
    padding: 4rem 0;
}
#home_gas .Box01::before{
    border: 22px solid transparent;
    border-top: 22px solid #2a2a2a;
    bottom: -6rem;   
}
#home_gas .Box01 .Box_in{
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
}
#home_gas .Box01 .Box_in p{
    margin-bottom: 1rem;
}

#home_gas .Box01 .Box_in .imgBox{
    width: 120px;
    height: 120px;
}
#home_gas .Box01 .Box_in .imgBox img{
    width: 50px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto;
}
#home_gas .Box01 .Box_in .img_size02 img{
    width: 80px;
}
#home_gas .Box01 .Box_in .img_size03 img{
    width: 65px;
    padding-top: 1rem;
}




#home_gas .Box02{
    margin-bottom: 3rem;
}
#home_gas .Box02 h3{
    margin-bottom: 2rem;
    margin-top: 5rem;
}

#home_gas .Box03 .Box{
    border: 1px solid #999;
}
#home_gas .Box03 .Box_in{
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;   
}
#home_gas .cate_wrap{
    justify-content: center;
    gap: 1rem;
}
#home_gas .cate_wrap p{
    font-size: 1.4rem;
    width: 80px;
    padding: 0 1rem;
}
#home_gas .txt_line:before,
#home_gas .txt_line:after{
    display: none;
}
#home_gas .txt_line_02{
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 2rem 0 1rem 0;
}
#home_gas .txt_line_02 span{
    display: inline-block;
    position: relative;
    padding: 0 2rem;
}
#home_gas .txt_line_02 span:before,
#home_gas .txt_line_02 span:after {
    position: absolute;
    content: "";
    background: #000;
    width: 0.5px;
    height: 3rem;
    bottom: 0.3rem;
}
#home_gas .txt_line_02 span:before{
    transform: rotate(-35deg);
    left: 0;
}
#home_gas .txt_line_02 span:after{
    transform: rotate(35deg);
    right: 0;
}
#home_gas .txt_line_02 span:before,
#home_gas .txt_line_02 span:after{
    height: 2rem;
}

#home_gas .Box03 h4{
    margin-bottom: 1rem;
}
#home_gas .Box03 .Box{
    padding: 2rem;
}
#home_gas .Box03 .imgBox{
    margin-top: 1.5rem;
}
#home_gas .Box03 p.tit{
    font-size: 2rem;
    padding: 3rem 0 1rem 0;
}
#home_gas .Box03 p.Mgt_p{
    margin-top: 1rem;
}

#home_gas .Box04{
    margin-bottom: 4rem;
}
#home_gas .Box04 h3{
    margin-bottom: 3rem;
}
#home_gas .Box04 .bg_black{
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
}
#home_gas .Box04 .label{
    width: 100%;
        margin-bottom: 1.5rem;
        padding: 0 0.5rem 1.5rem 0.5rem;
}
#home_gas .Box04 .label::after {
        bottom: 0;
        width: 100%;
        height: 0.5px;
}
#home_gas .Box04 .label p{
    line-height: 1.1;
}
#home_gas .Box04 .label span.step{
    font-size: 1.3rem;
}
#home_gas .Box04 .label span.number{
    font-size: 3rem;
    padding-left: 0.2rem;
}
#home_gas .Box04 h4{
    margin-bottom: 1rem;
    line-height: 1.5;
}
#home_gas .Box04 .Box_r{
    padding-bottom: 0.7rem;
}
#home_gas .Box04 .Mgb{
    margin-bottom: 3rem;
}
.cta_wrap span.out {
        font-size: 2.8rem;
        line-height: 0.7;
        margin-top: 0.5rem;
        padding-left: 1.2rem;
        display: inline-block;
}
.cta_wrap span.time {
    font-size: 1.5rem;
    padding: 0.7rem 0 0 1rem;
}
.cta_wrap span.out::before {
    width: 12px;
        height: 22px;
        top: 0.2rem;
        left: -0.5rem;
}
.cta_wrap{
    gap: 2rem;
    margin-top: 2rem;
}
.cta_wrap a{
    height: auto;
    padding: 0.8rem 1.5rem;
}

.cta_wrap .mail_wrap .tit02{
    font-size: 1.7rem;
    line-height: 3;
    padding-left: 3.4rem;
}
.cta_wrap .mail_wrap .tit02::before {
        width: 20px;
        height: 24px;
        top: 0.2rem;
        left: 0.7rem;
}
#home_gas .Box04 .arrow_bt::before{
    bottom: -3.5rem;
    border: 13px solid transparent;
    border-top: 13px solid #2a2a2a;    
}


/* =================================
   採用情報
================================= */
#recruit .recruit__topimg{
  background: url(../img/topimg_recruit_sp.webp) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  height: 90vw;
}
#recruit h3.en{
    font-size: 7rem;
}
#recruit .topTxt{
  top: 28vw;
  font-size: 2.2rem;
}
#recruit .topBox h3{
    text-align: center;
}
#recruit .topBox p{
    text-align: justify;
}

#recruit .Box01 p.tit{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
}
#recruit .Box01 .Box_in{
    grid-template-columns: repeat(1, 1fr);   
}
#recruit .Box01 .bor_bt_sp{
    border-bottom: 0.5px solid #000;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
}
#recruit .Box01 .imgBox{
    margin: 1rem 0;
}

#recruit .Box03 h3,
#recruit .Box04 h3,
#recruit .Box05 h3,
#recruit .Box06 h3,
.ctaBox h3{
    margin-bottom: 3rem;
}
#recruit .Box03 .Box_in{
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;  
}
#recruit .Box03 .maru{
    width: 180px;
    height: 180px;
    margin: 0 auto 1rem auto;
}
#recruit .Box03 .maru p{
    font-size: 1.8rem;
    padding-top: 6rem;
}
#recruit .Box03 .maru p.adjust{
    padding-top: 5rem;
}

#recruit .Box04 .Box_l{
    margin-bottom: 3rem;
}
#recruit .Box04 h4{
    font-size: 1.8rem;
    margin-bottom: 3rem;
}
#recruit .Box04 h4 span{
    font-size: 2.2rem;
}
#recruit .Box04 p,
#recruit .Box05 p{
    margin-bottom: 2rem;
}

#recruit .Box05 .flex_wrap{
    gap: 3rem;
}
#recruit a.cta_w_sp{
    width: 260px;
}
#recruit .Box05 h4{
    margin-bottom: 2rem;
}

#recruit .Box06 p.Mgb{
    margin-bottom: 1rem;
}

#recruit .Box07{
    margin-bottom: 4rem;
}
#recruit .Box07 h3{
    margin-bottom: 2rem;
}
#recruit .Box07 .txt_line_02{
    margin: 0.5rem 0 0.5rem 0;
}
.o_flowBox01 .txt_line_02{
    font-size: 1.4rem;
}
.o_flowBox01 .txt_line_02 span:before,
.o_flowBox01 .txt_line_02 span:after{
    height: 2rem;
}
.o_flowBox01 li{
    width: 100%;
    position: relative;
}
.o_flowBox01 li p.wrap{
    font-size: 1.6rem;
    padding: 0.9rem 0 1.2rem 0;
}
.o_flowBox01 li:not(:last-child) p.wrap{
  margin-bottom: 3rem;
}
.o_flowBox01 li::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    border-width: 10px 7.5px 0 7.5px;
border-color: #000 transparent transparent transparent;
}

.ctaBox{
    padding-bottom: 2rem;
}
.ctaBox .txt_line_02{
    font-size: 1.6rem;
    margin: 1.5rem 0 2rem 0;
}
.ctaBox .txt_line_02 span:before,
.ctaBox .txt_line_02 span:after{
    height: 3rem;
}
.ctaBox .Box{
    width: 100%;
}
.ctaBox .txt{
    text-align: center;
}
.ctaBox .tit{
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
}
.ctaBox .cta_wrap{
    gap: 3rem;
    margin-top: 3rem;
}
.ctaBox .cta_wrap a{
    width: 100%;
    padding: 0.7rem 1rem 1.2rem 1rem;
}
.ctaBox .cta_wrap span.out{
    margin-top: 1.3rem;
}
.ctaBox .cta_wrap .mail_wrap .tit02{
    line-height: 2.5;
}
.ctaBox .txt02{
    padding-bottom: 0.3rem;
}
.ctaBox a.mail_wrap_other{
    padding: 1rem 1rem 1.2rem 1rem;
}

/* =================================
   社員インタビュー
================================= */
#interview a.cta_01{
    width: 65%;
}
#anchor01{
    scroll-margin-top: 80px;
}
#anchor02,
#anchor04{
    scroll-margin-top: 90px;
}
#anchor03{
    scroll-margin-top: 20px;
}

#interview h3.top{
    margin-bottom: 3rem;
}
#interview .imgBox{
    margin-bottom: 2rem;
}
#interview .Box_01 h4{
    margin-bottom: 2rem;
}
.occupation{
    border: 1px solid #999;
    width: 90px;
    padding: 0 1rem 0.2rem 1rem;
    margin-bottom: 0.5rem;
}
#interview .name{
    font-size: 2.5rem;
}
#interview .year{
    margin-left: 0.2rem;
}
#interview .Box_02{
    border: 1px solid #999;
    padding: 2.5rem 2rem;
    gap: 3rem;
    margin-top: 3rem;
}

#interview .Box_02 .tit{
    font-size: rem;
    margin-bottom: 1rem;
    padding: 0 0 0.2rem 1.5rem;
}
#interview .Box_02 .Mgb{
    margin-bottom: 3rem;
}
#interview .bg_gray{
    margin: 4rem auto;
}
#interview .Box_bt{
    margin-bottom: 4rem;
}
#interview .Box_bt .occupation{
    width: 140px;
}


/* =================================
   働く環境
================================= */
#environment h3{
    margin-bottom: 3rem;
}
#environment .Box01 .tit{
    font-size: 1.8rem;
    margin-bottom: 3rem;
}
#environment .Box01 h4{
    margin: 1.5rem 0 0.8rem 0;
}
#environment .Box01 .Box_in .flex_nowrap{
    gap: 1rem;
    margin: 1rem auto;
}
#environment .Box01 .Box_in .flex_nowrap img{
    width: 48.5%;
}
#environment .Box01 .content_wrap .bk_Box{
    font-size: 1.4rem;
    width: 150px;
    margin: 2rem 0 0.5rem 0;
    padding: 0 1rem 0.2rem 1rem;
}
#environment .Box01 .grid{
    grid-template-columns: repeat(2, 2fr);
    gap: 1rem;
    margin: 2rem auto 0 auto;
}
#environment .Box01 .grid .maru{
    width: 160px;
    height: 160px;
    margin: 0 auto;
}
#environment .Box01 .grid .maru p{
    padding-top: 5.5rem;
}

#environment .Box02 ul {
        margin-top: 2rem;
        gap: 2rem;
}
#environment .Box02 ul li{
    width: 100%;
    text-align: center;
    padding: 1.3rem 2rem 1.5rem 2rem;
}
#environment .Box02 h4{
    margin-bottom: 0.5rem;
}

#environment .Box03 .gym_wrap{
    margin-top: 2rem;
}
#environment .Box03 .txt_line{
    margin-bottom: 0.5rem;
}
#environment .Box03 .gym_wrap,
#environment .Box03 .other_wrap{
    gap: 3rem;
}
#environment .Box03 h4{
    margin-bottom: 1.5rem;
}
#environment .Box03 .imgBox img{
    margin-bottom: 1rem;
}

#environment .Box03 .Mgb{
    margin-bottom: 4rem;
}
#environment .Box03{
    padding-bottom: 1rem;
}

#environment .Box04{
    padding: 4rem 0;
}
#environment .Box04 h3{
    font-size: 2rem;
    margin: 1rem 0 2rem 0;
}
#environment .Box04 .tit{
    font-size: 1.6rem;
    margin-bottom: 2rem;
    text-align: center;
}
#environment .Box04 .txt_line:before, 
#environment .Box04 .txt_line:after {
        height: 2.5rem;
}
#environment .Box04 .grid {
        grid-template-columns: repeat(2, auto);
        gap: 1rem;
        margin: 1rem auto 0 auto;
        justify-content: center;
}
#environment .Box04 .grid .maru {
        width: 150px;
        height: 150px;
        margin: 0 auto;
}
#environment .Box04 .grid .maru p {
        padding-top: 5.5rem;
}

ul.slide{
    margin: 3rem 0 1rem 0;
}
ul.slide li {
  flex: 0 0 auto;
  width: 280px;
  height: auto;

}



/* =================================
   新着情報
================================= */
#news,
#news-post{
    margin-bottom: 5rem;
}
#news h3 {
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin: 1rem 0;
}

ul.tab-nav{
    gap: 1rem;
    padding-bottom: 4rem;
    justify-content: center;
}
ul.tab-nav li.tab-nav__item{
    width: 156px;
    height: 35px;
    padding: 0.5rem 1.2rem;
}

ul.tab-nav li.tab-nav__item a{
    font-size: 1.3rem;
}
ul.tab-nav li.tab-nav__item:nth-child(n+2) a{
    gap: 0.5rem;
}

ul.tab-nav li.tab-nav__item:nth-child(2),
ul.tab-nav li.tab-nav__item:nth-child(3){
    margin-bottom: 0.5rem;
}


/* 各liに表示順を指定 */
.tab-nav__item:nth-child(1) { order: 1; }
.tab-nav__item:nth-child(2) { order: 3; }
.tab-nav__item:nth-child(3) { order: 4; }
.tab-nav__item:nth-child(4) { order: 5; }
.tab-nav__item:nth-child(5) { order: 6; }

/* ulの直接の子として改行用疑似要素を追加 */
.tab-nav::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
}

li.tab-nav__item img{
    width: 40px;
}
li.tab-nav__item {
    transition: .3s;
    position: relative;
    z-index: 1;
}


li.post-list__item{
  padding: 2.2rem 2rem 2rem 2rem;
}
li.post-list__item a{
    gap: 1.5rem;
}
li.post-list__item--pdf,
li.post-list__item--pdf a{
    gap: 1.5rem;
}
#news li.post-list__item--pdf h3{
    margin-bottom: 0.5rem;
}
.post-list__item--pdf .post-list__pdf-icon{
    margin: 0 0 0 auto;
}
.post-list__meta,
span.post-list__pdf-link{
    gap: 0.5rem 2rem;
}
#news span.post-list__pdf-link h3{
    margin-top: 0.5rem;
}
.post-list__date{
    font-size: 1.7rem;
}
.post-list__cats{
    font-size: 1.8rem;
}
.post-list__title{
    margin-top: 2rem;
}
.post-list__body .view_bk{
    margin-top: 2rem;
}


#news-post h3{
    margin: 1.5rem 0 2rem 0;
}
.post-single__thumb{
    margin-bottom: 2rem;
}
.post-single__content img{
    width: 100%;
        margin-top: 2rem;
    margin-bottom: 2rem; 
}


#news-post a.cta_01{
    width: 230px;
    margin: 0 auto;
}
#news-post .pager {
  margin: 4rem auto;
}
.pagerin img {
    width: 30px;
}

div#pager{
    margin-top: 3rem;
}


/* =================================
   お問い合わせ
================================= */
#contact .topBox p.tit{
    font-size: 1.6rem;
    text-align: justify;
    margin-bottom: 2rem;
}
#contact .topBox p.kome{
}
#contact h3{
    font-size: 2rem;
}
#contact h3{
    margin-bottom: 1rem;
}
#contact .Box01{
    margin: 4rem auto;
}
#contact .Box01 span.out::before {
        width: 18px;
        height: 30px;
        top: 0.3rem;
        left: -1rem;
}

#recruit table.c-table th,
#contact table.c-table th{
    border: 1px solid #999;
}
#recruit table.c-table_sp td,
#contact table.c-table_sp td{
    background: #fff;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
}
#recruit table.c-table_sp tbody,
#contact table.c-table_sp tbody {
    border-bottom: 1px solid #999;
}

.hissu {
font-size: 1.3rem;
  margin-top: 0.3rem;
  padding: 0 0.5rem;
  height: 22px;
}

#contact label.c_b {
        font-size: 1.4rem;
        display: block;
        padding-left: 1.5em;
        text-indent: -1.5em;
        margin-top: 1rem;
}
form#mailformpro label {
  white-space: normal !important; /*警告の位置調整*/
}
div.mfp_err {
  text-indent: 0; /*警告のインデントなし*/
}

.submit_wrap{
    width: 250px;
    height: 60px;
    margin: 3rem 0 5rem 0;
}
.submit_wrap:before {
    right: 2.7rem;
    width: 50px;
    height: 3px;
}
.submit_wrap .btn01{
    padding-right: 7rem;
}

.popup-inner .title{
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 3rem;
}

#thanks{
  margin-bottom: 6rem;
}