*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-feature-settings: "palt";
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;  
  letter-spacing: 0.08em;
}

img {
  width: 100%;
  vertical-align: bottom;
}
:root {
    --bg: #F2F2EA;
    --font: #527752;
    --yama: #B4C4B6;
    --til: #ACBAA7;    
    --accent: #DD9D6B;      
  }

p, h1, h2, h3, h4, h5 {
  font-family: "Noto Sans JP", sans-serif;
}
a {
  font-family: "Noto Sans JP", sans-serif;  
  text-decoration: none;
  list-style: none; 
}
ul, ol, li {
  font-family: "Noto Sans JP", sans-serif;   
  list-style: none;
}
.txt_c {
  text-align: center;
}
#page_inr {
  padding: 40px 0 80px;
  background: var(--bg);
}
#page_inr > div {
  width: calc(100% - 40px);
  margin: 0 auto 80px;
  max-width: 1200px;
}
.page_til {
    padding: 40px 0 80px;
    font-family: "Noto Serif JP", serif;
    font-size: 1.7rem;
    font-weight: 300;
    text-align: center;
    color: var(--font);
}
.page_til_s {
  margin: 20px 0;
  padding: 5px 20px;
  border-radius: 0 20px 20px 0;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  background: var(--yama);
  color: #fff;
}
.article_til {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}
.sp_br {
  display: none;
}
.txt_b {
  font-weight: 500;
  color: var(--accent);
}
@media (max-width: 428px) {
  #page_inr > div {
    width: calc(100% - 20px);
  }  
  .page_til {
    padding: 20px 0 40px;    
    font-size: 1.3rem;
  }
  .page_til_s {
    margin: 20px 0 10px -10px;
    padding: 5px 10px; 
  }  
  .sp_br {
    display: block;
  }
}
.page_txt {
  font-size: 0.9rem;
  line-height: 2em;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}
.txt_l {
  text-align: left;
}
 @media (max-width: 428px) {
    html {
      font-size: 14px;
    } 
  }

/* ==================
スクロールアニメーション
===================== */
.js-scroll-animation {
 /* 透過・非表示 */
  opacity: 0;
  visibility: hidden;
  
  /* 要素の位置指定・アニメーション */
  translate: 0 50px;
  transition: .8s;
}

/* クラス付与で表示する */
.is-active{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
/* 
font-family: "Noto Sans JP", sans-serif;
font-family: "Noto Serif JP", serif;
font-family: "Zen Old Mincho", serif;
 */

/* ==================
header
===================== */
header {
    display: flex;
    justify-content: space-between;
    background: var(--bg);
}
.header__logo {
    width: 100%;
    padding: 10px 40px;
    max-width: 400px;
}
.hamburger-morph {
    display: none;
}
.nav-morph {
  padding-right: 20px;
}
.nav-morph__list {
    display: flex;
}
.nav-morph__list > li:first-of-type {
  display: none;
}
.nav-morph__item a {
    margin: 0 10px;
    padding: 15px 0;
    display: block;
    font-family: "Noto Sans JP", sans-serif;    
    font-size: 0.9em;
    font-weight: medium;
    color: #333;
}

@media (max-width: 768px) {
  .header__logo {
    width: 100%;
    padding: 10px;
    max-width: 300px;
}  
.hamburger-morph {
  display: block;        
  position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999;
        width: 50px;
        height: 50px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
      }
      
      .hamburger-morph__icon {
        width: 100%;
        height: 100%;
      }
      
      .hamburger-morph__line {
        fill: none;
        stroke: #222;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 60 207;
      }
      
      .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 60 60;
      }
      
      .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 60 207;
      }
      
      .hamburger-morph.active .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
      }
      
      .hamburger-morph.active .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
      }
      
      .hamburger-morph.active .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
      }
      
      .nav-morph {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #777E73;
        clip-path: circle(0% at calc(100% - 35px) 35px);
        transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 8888;
      }
      
   .nav-morph.active {
  clip-path: circle(150% at calc(100% - 44px) 44px);
}

      
      .nav-morph__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
      
      .nav-morph__list {
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
      }
      .nav-morph__item a {
        padding: 15px 0;
        display: block;
        font-size: 1rem;
        color: #fff;
    }      
      .nav-morph__list > li:first-of-type {
        display: block;
      }      
       
    }  
/* navの下線*/    
.move-line a {
      text-decoration: none; 
      position: relative; 
      padding-bottom: 3px
    }
    
.move-line a::before {
      content: ""; 
      position: absolute; 
      left: 50%; 
      bottom: 0; 
      width: 0; 
      height: 1px; 
      background: #008000;
      transition: all 0.4s ease; 
    }

.move-line a:hover::before {
	width: 100%;
	left: 0; 
}

 @media (max-width: 428px) {
    .header__logo {
      max-width: 250px;
    } 
  }
/* ==================
front-page
===================== */
main {
  background: var(--bg);
}
#top {
  position: relative;
}
.main_img {
  width: 100%;
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.main_txt_yoko {
  display: none;
}
/* スライダー */
.side_img {
  width: 30%;
  position: relative;
  top: 5px
}
.side_img img {
  width: 100%;
  padding-bottom: 200px;
  height: auto;
}
.side_img_txt_tate  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(0) translateX(-50%);
  letter-spacing: 0.3em;
  line-height: 2.5;  
  writing-mode: vertical-rl;  
  font-family: "Zen Old Mincho", serif; 
  font-weight: 500;
  overflow-wrap: break-word;   
  color: #333;
}

#slider {
  width: 60%;
  position: relative;  
}
#slider img {
  width: 100%;
  padding-top: 130px;
  height: auto;
}
.splide__slide_txt {
    position: relative;
  letter-spacing: 0.2em;
  line-height: 2.5;  
  writing-mode: vertical-rl;  
  font-family: "Zen Old Mincho", serif; 
  overflow-wrap: break-word;  
}
.splide__slide_txt {
  position: absolute;
  top: 0;
  right: 5%; 
  z-index: 1000;  
}
.splide__slide_txt > p {
  writing-mode: vertical-rl;
  font-size: 1.5rem;
  color: var(--font);
  letter-spacing: 0.5em;
  line-height: 2;
  font-feature-settings: "palt";  
  writing-mode: vertical-rl;  
  font-family: "Zen Old Mincho", serif;    
}
.splide__slide_txt > p > span {
  background: #fff;  
}

.nomal {
  padding: 1em 10px 0.5em; 
  position: relative;
  top: 0;  
}
.ten_maru {
  padding: 1em 10px 0;  
  position: relative;
}
.last {
  top: 100px;
}
.last_under {
  top: 220px;
}

@media (max-width: 768px) {

  /* スライダー */
  .side_img_txt_tate, .side_img  {
    display: none;
  }
  #slider {
    width: 100%;    
    top: 0    
  }
  #slider img {
    width: 100%;
    height: 450px;
    object-fit: cover;    
    padding-top: 60px;
  }
  .splide__slide_txt > p {
    font-size: 1rem;
    color: var(--font);     
  }
  .nomal {
  padding: 1em 5px 0.5em; 
}
.ten_maru {
  padding: 1em 5px 0;  
}
  .last {
    top: 40px;
  } 
  .last_under {
  top: 170px;
}
  .main_txt_yoko {
    width: 100%;
    margin: 30px 0;
    display: block;
    font-size: 0.8rem;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2;
    font-feature-settings: "palt";  
    font-family: "Zen Old Mincho", serif;    
    position: relative;
    z-index: 100;  
  }   
} 

  
/* ==================
トップ:ニュース
===================== */
#section_wrap {
  background: var(--yama);
}
#news {
  padding-bottom: 100px;  
}
#news > div{
  width: calc(100% - 40px);
  margin: 0 auto;
  max-width: 900px;
 }
 .Article_Item_Link {
  transition: .3s;
 } 
 .Article_Item_Link:hover {
  opacity: .7;
 }
 .Article_Item_Body,.Article_Item_Meta {
  display: flex;
  align-items: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #fff;
 }
 .Article_Item_Body {
  padding: 10px 0;
  flex-wrap: wrap;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;  
 }
 .Article_Item_Categor {
  margin-right: 10px;
  padding: 3px 15px;
  border-radius: 20px;
  border: solid 1px #fff;
  font-size: 0.9rem;
 }
 .Article_Item_Date {
  margin-right: 20px; 
  padding: 5px 0;   
 }
 .Article_Item_Title {
  padding: 5px 0;
  font-size: 1rem;
 }
 @media (max-width: 428px) {
  .Article_Item_Title {
    padding: 5px 0 0;
    font-size: 1rem;
  }  
 }
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.new_mark {
  padding: 1px 5px 2px;
  font-size: 0.8rem;
  letter-spacing: 0;  
  background: var(--accent);
  animation: blink 1s linear infinite;
}
/* ==================
トップ:インフォメーション
===================== */

.top_til {
  padding: 50px 0;
  font-family: "Noto Serif JP", serif;  
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;;
}
.info_fl {
  width: calc(100% - 40px);
  height:auto;
  margin: 0 auto;
  max-width: 1280px;
  display:flex;
  justify-content:space-between;
  padding:20px;
 }
 .info_box{
  width: calc((100% / 3) - 10px);
  height:auto;
  padding: 20px 30px;
  max-width: 350px;
  background: #F8F8F5;  
 }
 .info_box-title{
  margin-bottom: 20px;
  padding: 20px 10px;
  border-bottom: solid 1px var(--font);
  font-size: 1.2em;
  text-align: center;
  color: var(--font); 
  font-family: "Noto Serif JP", serif;  
 }

/* ボタンのスタイル */
.arrowbtn a {
  margin-bottom: 10px;
  padding: 10px 45px 10px 20px;   
  display: block; 
  border: 1px solid var(--yama); 
  color: var(--font); 
  transition: .3s all; 
  position: relative;
}

.arrowbtn a:after {
  content: '';
  border-bottom: 1px solid var(--font); 
  border-right: 1px solid var(--font);   
  width: 15px; 
  height: 3px;
  transform: skewX(45deg); 
  position: absolute;
  right: 30px;
  bottom: 50%; 
  transition: .3s all;
}

.arrowbtn a:hover {
  background-color: var(--yama); /* 背景色を変更 */
  border-color: var(--yama); /* 枠線色を変更 */
  color: #fff; /* 文字色を白に */
}

.arrowbtn a:hover:after {
  border-color: #fff; 
  right: 15px; 
}
 @media (max-width: 768px) {
  .info_fl {
    width: 100%;
    flex-wrap: wrap;
   }  
  .info_box{
    width: 48%;
    margin: 0 auto 20px;  
    padding: 10px 20px;         
   }     
 }
 @media (max-width: 428px) {
  .info_fl {
    width: 100%;    
    flex-direction: column;
   }
   .info_box{
    width: 100%;
    margin: 0 auto 20px; 
   }   
  }
 /* ==================
トップ:冨士プロのサービス一覧
===================== */
#service {
  padding: 100px 0 50px;
}
#service > div{
  width: calc(100% - 40px);
  margin: 0 auto;
 }
 #service > div:first-of-type{
  margin: 20px auto 0;
 }
 .service_bnr > a {
  width: calc(100% - 40px);
  height:auto;
  margin: 0 auto 30px;
  display: flex;  
  align-items: center;
  max-width: 800px;  
  background: #fff;
 }
 .service_bnr > a > p {
  width: 50%;
 }
 .service_bnr > a > div {
  width: 50%;  
text-align: center;
  padding: 20px; 
 } 

 .arrow_r {
  padding-right: 20px;  
  display: inline-block;  
  position: relative;  
  text-align: center;
  font-weight: 500;
  color: var(--font);
  font-family: "Noto Serif JP", serif;  
}
.arrow_r::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 1px var(--font);
  border-right: solid 1px var(--font);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.service_bnr a:hover {
  transition: .5s;
  opacity: .7;
}
 @media (max-width: 428px) {
  .service_bnr > a {
    width: 100%;
    margin: 0 auto 20px;    
   }
   .service_bnr > a > div {
    padding: 10px;
}   
   .arrow_r{
    padding: 10px 15px;    
    font-size: 0.8em;
}   
  }


 /* ==================
トップ:冨士プロについて
===================== */
.about_btn a {
  background: #658B63 ;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 150px auto 0;
  max-width: 280px;
  padding: 20px 25px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "Noto Serif JP", serif;    
}
.about_btn a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 8px;
height: 8px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}
.about_btn a:hover {
background: #777E73;
}
.about_btn a:hover:after {
right: 1.4rem;
}

 /* トップ:嘉麻市について */
#kamacity {
  padding: 100px 0;
}
#kamacity > div {
  margin: 0 auto;
  max-width: 900px;
}
.image_link{
  display:block; 
  position:relative;
 }
 .image_link img{
   display: block;
   width:100%;
   transition:0.3s;
 }
 .image_link:before{
   content:"冨士プロのある「嘉麻市」について";
   display:block;
   color:#fff;
   text-align:center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   font-size: 1.4rem;
   opacity:0;
   z-index:3;
   transition:0.3s;
   font-family: "Noto Serif JP", serif;  
    text-shadow: 1px 2px 3px #000;       
 }
 .image_link:hover img{
   filter:blur(5px);
 }
 .image_link:hover:before{
   opacity:1;
 }
  @media (max-width: 428px) {
  .image_link:before{
    font-size: 1rem;
    opacity: 1; 
  }
}
/* 「コラッサ福岡」を応援してます */
.sponsor {
  width: 100%;
  margin: 150px auto 40px;
  max-width: 800px;
  display: flex;
  align-items: center;
}
.team_photo {
  width: 35%;
}
.team_txt {
  width: 65%;
  padding: 15px 5px 20px;
  text-align: center;
  background: var(--accent);    
  border-radius: 0 10px 10px 0;
}
.team_photo > img {
   border-radius: 10px;    
}  
.team_txt > p {
  font-size: 1.1rem;
  line-height: 2.5em;
  font-weight: 800;  
  font-family: "Noto Sans JP", sans-serif;  
  color: #fff;
}
.team_txt > p > span {
  margin-right: 5px;
  padding: 2px 10px 3px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  background: #fff;
  border-radius: 3px;
}

.insta a {
  font-weight: 500;		
	color: #fff;
}
.fa-instagram {
	font-size:2rem;
	padding-right: 10px;
	vertical-align: middle;
}
@media (max-width: 768px) {
	.team_photo {
	  width: 30%;
	}
	.team_txt {
	  width: 70%;
	  padding: 10px 5px 15px;
	}	
	.team_txt > p {
	  font-size: 1rem;
	}
	.team_txt > p > span {
	  font-size: 1.3rem;
	}	
}
 @media (max-width: 428px) {
    .sponsor {
      display: block;
    }
  .team_photo {
    width: 100%;
  }
  .team_txt {
    width: 100%;
    padding: 5px 10px 12px;
    border-radius: 0 0 10px 10px;
  }    
  .team_photo > img {
    border-radius: 10px 10px 0 0;    
  }   
}
/* 動画 */
#fujipro_movie > div {
  padding-bottom: 100px;
  text-align: center;
}
video {
  width: 100%;
  max-width: 900px; 
}
  /* ==================
トップ:footer
===================== */
footer {
  padding: 20px;  
  background: #777E73;
}
.footer_fl {
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
}
.footer_fl > a {
  min-width: 400px;
}
.footer_fl > a:hover {
  transition: .3s;
  opacity: .7;
}
.link_list_fl {
  width: 450px;
  display: flex;
  justify-content: space-between;  
}
.link_list_fl > ul{
  width: 50%;
  padding: 0 10px;
}
.link_list > li {
  margin: 5px 0;
  padding: 5px;
}
.link_list > li > a {
  display: block;
  font-family: "Noto Sans JP", sans-serif;  
  font-size: 0.8em;
  color: #fff;
}
.link_list > li > a:hover {
  transition: .3s;
  opacity: .7;
}
.link_list__item > a {
  padding-left: 8px;  
  border-left: solid 1px #fff;
}
@media (max-width: 768px) {
  .footer_fl {
    width: 100%;
    flex-direction: column;
  }  
  
  .footer_fl > a {
    min-width: 200px;  
    margin: 0 auto 30px;      
  }

  .link_list_fl {
    width: 100%;
    margin:  0 auto;
  }

}
@media (max-width: 428px) {
  .link_list_fl > ul {
    padding: 0;
  }
}
  /* ==================
page共通
===================== */
.page_top_fl {
  display: flex;
  margin-bottom: 100px;
}
.page_topimg {
  width: 40%;
  padding-right: 20px;
}
.pagetop_txt {
  width: 60%;  
  font-size: 0.9rem;
  line-height: 2em;
  font-family: "Noto Sans JP", sans-serif; 
  color: var(--font);
}
.pagetop_txt > p,.pagetop_txt > h3 {
  color: var(--font);
 }

@media (max-width: 768px) {
  .page_top_fl {
    display: block;
    flex-direction:row;
  }
  .page_topimg {
    width: 100%;
    padding-right: 0;
    margin-bottom: 10px;
  }
  .pagetop_txt {
    width: 100%;  
  }  
}
  /* ==================
page-about 冨士プロについて
===================== */

.about_fl {
  display: flex;
}
.about_img {
	width: 45%;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
}
.about_img > p:last-of-type {
	width: 70%;
	margin: 0 auto;
	padding: 50px;
}

.about_txt, .about_year, .about_txt > a {
  font-size: 0.9rem;
  line-height: 2em;
  font-family: "Noto Sans JP", sans-serif; 
  color: #333;
}
.mapbtn a {
  margin-left: 5px;
  padding: 2px 5px 3px;
  border-radius: 3px;
  font-size: 0.9em;;
  background: var(--font);
  color: #fff;
  transition: .3s;
}
.mapbtn a:hover {
  opacity: .7;
}
/* 沿革 */
.history {
  margin: 0 0 80px; 
}
.history > li {
  margin-bottom: 20px;  
  display: flex;
}
.history > li > .about_year {
  width: 200px;
}
.history > li > .about_txt {
  width: calc(100% - 200px);
  font-size: 0.9rem;
  line-height: 2em;
}
/* 資本金・取引会社・取引銀行 */
.page_about_til {
    padding: 40px 0 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}
.capital {
  width: 65%;
  margin: 20px 0 80px;  
}
.capital > li {
  margin-bottom: 20px;
  display: flex;
}
.capital > li > h4 {
  width: 130px;
  font-size: 0.9rem;
  line-height: 2em;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif; 
  color: #333;  
}
.capital > li > .about_txt {
  width: calc(100% - 130px);
  font-size: 0.9rem;
  line-height: 2em;  
  font-family: "Noto Sans JP", sans-serif; 
  color: #333;    
}
/* プロフィール */
.prof_box {
  margin: 0 auto 100px;
  max-width: 1000px;
  display: flex;
  align-items: stretch;
  background: #fff;    
}
.prof_photo {
  width: 30%;
}
.prof_txt {
  width: 70%;
  padding: 30px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;    
}
.prof_txt > div {
  width: 100%;  
}
.job {
  margin-right: 8px;
  padding-right: 10px;
  display: inline-block;
  border-right: solid 1px #333;
  font-size: 0.9rem;
}
.name {
  margin-bottom: 10px;
  display: inline-block;  
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif;  
}
.comment {
  margin: 10px 0 20px;
  font-size: 0.9rem;  
  line-height: 2em;
}
.from_hobby {
  font-size: 0.9rem;  
  line-height: 2em;
}
@media (max-width: 768px) {
  .about_fl {
    flex-wrap: wrap-reverse;
  }
  .about_img {
    width: 100%;
    padding-left: 0;
  }
  .capital {
    width: 100%;
  }
}
@media (max-width: 428px) {
  .history > li, .capital > li  {
    display: block;
  } 
  .history > li > .about_year {
    width: 100%;  
    display: inline;
    border-bottom: solid 1px #333;  
  }
  .history > li > .about_txt {
    width: 100%;
  } 
  .capital > li > h4 {
    width: 100%;
    display: inline;
    font-size: 1rem;
    border-bottom: solid 1px #333;
  }
  .capital > li > .about_txt {
      width: 100%;
  }
  .prof_box {
 
    display: block;
  }
  .prof_photo {
    width: 150px;
    margin: 0 auto;
    padding-top: 40px;
  }
  .prof_txt {
    width: 100%;
  }
  .job {
    display: block;
    border-right: none;
  }
}

/* ==================
LPガスについて
===================== */
.lpgas_fl {
  padding: 0 20px 40px;  
  display: flex;
  justify-content: space-between;
}
.lpgas_fl > p:first-of-type {
  width: 60%;
}
.lpgas_img {
  width: 40%;
  padding: 5px 0 0 10px;
}
.lpgas_img_tate {
  width: 20%;
}
.lpgas_img_2clm {
  width: 40%;  
  padding: 5px 0 0 10px;  
  display: flex;
}
.lpgas_img_2clm_tate {
  width: 40%;  
  padding: 5px 0 0 10px;  
  display: flex;
  padding: 5px 0 0 10px;  
  flex-direction: column;  
}
.lpgas_img_2clm > p:first-of-type {
  padding-right: 10px;
}
@media (max-width: 768px) {
  .lpgas_img_2clm {
    width: 40%;  
    padding: 5px 0 0 10px;  
    flex-direction: column;
  }  
  .lpgas_img_2clm > p:first-of-type {
      padding-right: 0;
      padding-bottom: 10px;
  }  
  .lpgas_img_tate {
      width: 40%;
      padding: 0 0 0 10px;    
  }
}
@media (max-width: 428px) {
  .lpgas_fl  {
    padding: 0 0 40px;      
    flex-direction: column-reverse;
  }
  .lpgas_img {
    width: 100%;
    padding: 0 0 10px;
  }  
  .lpgas_fl > p:first-of-type {
    width: 100%;
  }  
  .lpgas_img_tate {
    width: 70%;
    margin: 0 auto 10px;
    padding: 0;      
  }
  .lpgas_img_2clm {
    width: 100%;  
    padding: 5px 0 10px 0;  
    display: flex;
  }  
}


.lpgas_fl_box {
  margin-bottom: 100px;
  display: flex;
}
.lpgas_fl_box > li {
  width: calc((100% / 4) - 20px);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  background: #F8F8F5;
}
.lpgas_fl_box > li > h4 {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: solid 1px var(--accent);
  font-size: 1.1rem;
  color: var(--accent);
}
@media (max-width: 768px) {
  .lpgas_fl_box {
    flex-wrap: wrap;
  }  
  .lpgas_fl_box > li {
    width: calc((100% / 2) - 20px);
    margin: 0 auto 20px;
    padding: 20px;    
  }  
}
@media (max-width: 428px) {
  .lpgas_fl_box {
      margin-bottom: 40px;
  }  
  .lpgas_fl_box > li {
    width: 100%;
    margin: 0 auto 10px;    
  }  
}

.property_fl {
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
}
.property_fl > .lpgas_img {
  width: 35%;
  padding: 0 30px 0 0;  
}
.property_fl_box > .page_til_s {
  margin: 0 0 10px;
}
.property_fl_box > .page_txt {
  margin: 0 0 10px;  
  padding: 0 20px;
}

.device_fl {
  margin: 0 auto 80px;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;  
  flex-wrap: wrap;   
}
.device_fl_box {
  width: 48%;
  margin-bottom: 35px;
  display: flex; 
  align-items: stretch;
}
.device_img {
  width: 45%;  
  display: flex;
  flex-direction: column;
}

.device_img > img {
  flex-grow: 1;  
}
.device_img > h4 {
  padding: 5px;
  font-size: 1.1rem;
  text-align: center;
  color: #fff;;
  background: var(--accent);
}

.device_list {
  width: 55%;    
  flex: 1 1 auto;
  padding: 10px 20px;
  background: #fff;  
  display: flex;
  flex-direction: column;
  flex-grow: 1;  
}

.device_list li a {
  padding: 5px 0;
	display: flex;
	align-items: center;
	position: relative;
  font-size: 0.9rem;
	color: #333;
	font-weight: 700;
	transition: 0.3s;  
}
.device_list li a:hover {
	color: #f2f2f2;
}
.device_list li a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(45deg) translateY(-50%);
	width: 8px;
	height: 8px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #333;
}

.device_list li a:hover {
	color: var(--accent);
}

.device_list li a:hover::after {
	border-color: var(--accent) var(--accent) transparent transparent;
}
@media (max-width: 768px) {
  .device_fl_box {
    width: 100%;
  }
  .device_fl_box {
    margin-bottom: 25px;
  }
}
@media (max-width: 428px) {
  .device_fl_box {
    margin-bottom: 10px;
  }  

  .property_fl > .lpgas_img {
      width: 100%;
      padding: 0 0 10px;
  }  
  .property_fl {
    display: block;
  }
  .property_fl_box > .page_til_s {
      margin: 0 0 10px -10px;
  }  
  .property_fl_box > .page_txt {
      margin: 0 0 10px;
      padding: 0 0;
  }  
}

.lpgas_full {
  width: 100%;
  padding: 0 20px 40px;
}
.lpgas_full > h4 {
  margin: 30px 0 5px;
  color: var(--accent);
}

@media (max-width: 428px) {
  .lpgas_full {
    padding: 0 0 40px;
  }  
}
  .warning01_img img {
    margin: 10px 0;
    max-width: 320px;
  }
  .warning02_img img {
    margin: 10px 0;
    max-width: 250px;
  }  
    .warning03_img img {
    margin: 10px 0;
    max-width: 80px;
  }  
.micon_img {
  margin: 10px 0;
  display: flex;
  align-items: stretch;
}
.micon_img > p {
  width: 130px;
  padding-right: 20px;
}
.micon_txt {
  max-width: 350px;
    border: solid 1px var(--accent)    
}
  .micon_txt > h5 {
    padding: 3px;
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
    background: var(--accent);
  }
  .micon_txt > ul {
    padding: 10px 20px;
  }
  .micon_txt > ul >li {
    margin-left: 1rem;
    font-size: 0.8rem;
    list-style: circle;
    font-weight: 500;
    color: var(--accent);
  }

.maicon_fukki_fl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.micon_fukki_box {
  width: calc(100% / 4);
    margin-bottom: 20px;  
}
.maicon_fukki > h4 {
  color: #333;
}
.fukki_no {
  font-size: 2rem;
  font-weight: 800;
}
.micon_fukki_box > .page_txt {
  width: 90%;
  margin: 0 auto;
}
.fukki_img1 {
  width: 260px;
  margin: 0 auto;
}
.fukki_img2 {
  width: 230px;
  margin: 0 auto;
}
.fukki_img3, .fukki_img4  {
  width: 150px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .micon_fukki_box {
    width: calc(100% / 2);
  }
}
@media (max-width: 428px) {
  .micon_fukki_box {
    width: 100%;
    margin-bottom: 40px;
  }
}
.price_img {
  margin: 20px 0;
  max-width: 340px;
}
/* ==================
よくある質問
===================== */
.faq_fl {
  margin-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
}
.faq_fl  > li {
  width: calc((100% / 3) - 20px );
  margin: 0 auto 20px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  background: #F8F8F5;
}
.faq_fl > li > h4 {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: solid 1px var(--accent);
  font-size: 1.1rem;
  color: var(--accent);
}
.faq_img {
  max-width: 250px;
  margin: 0 auto 20px;
}
@media (max-width: 768px) {
  .faq_fl  > li {
    width: calc((100% / 2) - 20px );
  }
}
@media (max-width: 428px) {
  .faq_fl  > li {
    width: 100%;
    margin-bottom: 10px;
  }
}
/* ==================
冨士プロの美味しい水
===================== */

.water_icon_fl {
  margin: 50px auto;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.water_icon_box {
  width: 200px;  
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.water_icon_box > h4, .sos_box > h4 {
  padding-bottom: 10px;
  font-size: 1rem;
  color: var(--font);
}
.water_img {
  width: 200px;
}


@media (max-width: 768px) { 
  .water_icon_box {
    width: 200px;  
  }
  .water_img {
    width: 200px;
  }  
}
@media (max-width: 428px) {
  .water_icon_box > h4, .sos_box > h4 {
    font-size: 0.8rem;
  }  
  .water_icon_box {
    width: 140px;  
    margin: 10px;    
  }
  .water_img {
    width: 140px;
  }  

}
/* ==================
お湯のSOS
===================== */
.sos_fl {
  display: flex;
  justify-content: center;
}
.sos_box {
  width: 200px;  
  margin: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.triangle {
  position: relative;
}
.triangle::after {
  content: "";
  display: inline-block;
  background: #555;
  width: 15px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: -10px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.circle_fl {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.circle {	
  width: 200px;
  height: 200px;
  margin: 10px;  
  position: relative;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  border: solid 2px var(--accent);
}

.circle p {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align:center;
  color: var(--accent);  
  font-family: "Noto Sans JP", sans-serif;  
  font-weight: 500;
  font-size: 1.2rem;  
}
.circle > p > span {
  display: block;
}
.circle > p > span:last-of-type {
  font-size: 1.8em;
}
.maintenance_box {
  width: calc(100% - 40px);
  margin: 0 auto 80px;
  padding: 30px 10px;
  max-width: 850px;
  text-align: center;  
  color: #fff;
  background: var(--accent);
}
.maintenance_box > h4 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.chack_mark::before{
    margin-right: 10px;
    content: "";
    display: inline-block;
    height: 10px;
    width: 15px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(-45deg);
    position: relative;
    bottom: 5px;
}
@media (max-width: 768px) {
  .circle {	
    width: 170px;
    height: 170px;
  }

  .circle p {
    width: 170px;
  }
}
@media (max-width: 428px) {
  .sos_fl {
    margin-bottom: 50px;
    display: block;
  }
  .sos_box {
    width: 100%;    
    margin: 10px auto;
  }
  .triangle::after {
    width: 20px;
    height: 15px;
    position: static; 
    clip-path: polygon(0 0,100% 0, 50% 100%);
  }    
  .circle {	
    width: 150px;
    height: 150px;
    margin: 5px;
  }

  .circle p {
    width: 150px;
    font-size: 1rem;
  }  
}
/* ==================
お問い合わせ
===================== */
#form > div {
  width: calc(100% - 20px);
  margin: 80px auto 20px;
  padding: 40px 20px;
  max-width: 900px;
  border-radius: 30px;
  background: #F8F8F5;
}
.formbox {
  margin: 0 auto;
  max-width: 650px;
}
.formbox > p {
  font-size: 0.9rem;
  line-height: 2em;
}
.formbox > dl > dt > p {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}
.contents_box.inquiry {
  margin: 0 auto;
  width: 600px;
}

.pagetitle.inquiry {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 140px;
  padding-bottom: 20px;
  padding-top: 80px;
}

.pagetitle.inquiry h2 {
  margin: 0 auto;
  width: 600px;
}

.contents_box.inquiry .lead {
  margin-bottom: 40px;
}

/***** progress *****/
.inquiry_progress_wrapper {
  margin: 40px auto 60px;
  position: relative;
  width: 450px;
  z-index: 1;
}

.inquiry_progress_wrapper:before {
  background-color: #d2d2d2;
  content: "";
  height: 2px;
  left: 75px;
  position: absolute;
  top: 17px;
  width: 300px;
}

.inquiry_progress {
  display: flex;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 2;
}

.inquiry_progress:before, .inquiry_progress:after {
  background-color: #333333;
  content: "";
  height: 2px;
  opacity: 0;
  position: absolute;
  top: 17px;
  transition: .8s ease;
  transform-origin: left center;
  width: 149px;
}

.inquiry_progress:before {
  left: 84px;
}

.inquiry_progress:after {
  left: 234px;
}

.inquiry_progress.second:before,
.inquiry_progress.third:after {
  animation: .8s ease 0.5s forwards progressbar;
}

@keyframes progressbar {
  0% {
    opacity: 0;
    transform: scalex(0);
  }
  100% {
    opacity: 1;
    transform-origin: left top;
    transform: scalex(1);
  }
}
.inquiry_progress.third:before {
  opacity: 1;
}

.inquiry_progress_item {
  color: #d2d2d2;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  position: relative;
  width: 150px;
  z-index: 10;
}

.inquiry_progress_item i {
  font-size: 2.0rem;
  z-index: 10;
}

.inquiry_progress_item.current,
.inquiry_progress_item.done {
  color: #333333;
}

.inquiry_progress_item.current:after {
  background-color: #e0e0e0;
  content: "";
  border-radius: 50%;
  display: block;
  height: 32px;
  left: center;
  position: absolute;
  top: 1px;
  width: 32px;
  z-index: 2;
}

.inquiry_tel {
  align-items: center;
  color: #1dc5e7;
  display: flex;
  font-size: 4.2rem;
  font-weight: bold;
  line-height: 1;
}

.inquiry_tel img {
  height: 26px;
  margin-right: 20px;
}

.formbox dl {
  margin-bottom: 40px;
}

.formbox dl dt {
  align-items: center;
  display: flex;
  font-weight: 500;
  margin-bottom: 10px;
}

.formbox dl dt .must {
  background: var(--font);
  color: #fff;
  font-size: 0.7em;
  line-height: 1;
  margin-left: 10px;
  padding: 2px 6px 3px;
}

.formbox dl dd {
  margin-bottom: 10px;
}

.formbox dl dd ul.checklist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

.formbox dl dd ul.checklist li {
  margin-right: 40px;
}

.inquiry_postcode {
  display: flex;
}

.inquiry_postcode input {
  margin-right: 20px;
  width: 50%;
}

.inquiry_postcode a {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  height: 100%;
  margin: 0;
  width: auto;
}

/* privacy */
.inquiry_privacy {
  border: solid #b5b5b6 1px;
  font-size: 1.3rem;
  height: 200px;
  margin: 20px auto;
  overflow-y: scroll;
  padding: 20px;
}

.inquiry_privacy h4 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.inquiry_privacy h5 {
  border-left: 6px double #727272;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 1em;
  margin-top: 1.5em;
  padding-left: 14px;
  padding-right: 14px;
}

.inquiry_privacy ol li {
  list-style-type: none;
  counter-increment: cnt;
  margin-left: -20px;
  padding-left: 24px;
  text-indent: -24px;
}

.inquiry_privacy p {
  margin-bottom: 1em;
}

.inquiry_privacy ul {
  margin-bottom: 1em;
}

.inquiry_privacy ul ul {
  margin-bottom: 0;
}

.inquiry_privacy ol li {
  list-style-type: none;
  counter-increment: cnt;
  margin-left: -20px;
  padding-left: 24px;
  text-indent: -24px;
}

.inquiry_privacy ol li::before {
  content: "(" counter(cnt) ") ";
}

.inquiry_btnbox {
  margin: 40px auto 20px;
}



.inquiry_privacy .kome {
  color: var(--accent);
  margin-right: 6px;
}

.inquiry_btnbox input, .inquiry_btnbox submit {
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 20px;
}

.inquiry_btnbox input:after {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  margin-left: 10px;
}

.inquiry_btnbox input:hover {
  cursor: pointer;
}

.inquiry_btnbox input#btn_confirm,
.inquiry_btnbox input#btn_send {
  color: #fff;
  background: var(--font);
}

.inquiry_btnbox input#btn_reset {
  background: #555;
}
#btn_reset {
	display: inline-block;
}

/* form */
.wpcf7 form {
  max-width: 650px;
  margin: 0 auto;
}
::placeholder {
  color: #b5b5b6;
}

input[type="text"]:focus,
textarea:focus {
  border: solid #1dc5e7 1px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  border: solid #b5b5b6 1px;
  border-radius: 6px;
  padding: 20px;
  width: 100%;
}

.wpcf7-list-item {
  margin: 0 30px 0 0;
}

/* confirm */
.confirm_table {
  width: 100%;
}

.confirm_table tr {
  border-bottom: solid #DBDBDB 1px;
}

.confirm_table th {
  padding: 10px 20px;
  text-align: left;
}

.confirm_table td {
  padding: 10px 20px 10px 20px;
}
/* 個人情報 */
.con_pri {
    width: 100%;
    margin: 0 auto 20px;
}
.con_pri .box_pri {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #b5b5b6;
    background: #fff;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 6px;
}
.box_pri > div > h3, .box_pri > div > h4 {
    margin: 20px 0;
    color: #333;;
}
.box_pri > div > p {
    font-size: 0.8rem;
    line-height: 2em;
}
/* ==================
リフォーム
===================== */
.reform_gallery {
  margin: 50px 0;
  display: flex;
  justify-content: center;
}
.reform_gallery > img {
  width: 100%;
}
.reform_category > li {
  max-width: 800px;
  margin:0 auto 30px;
  display: flex;
  align-items: center;
  color: #333;
}
.reform_category > li:last-of-type {
  margin-bottom: 80px;
}
.reform_category > li > h3 {
  width: 130px;
  padding: 5px 10px;
  border: solid 1px #333;
  text-align: center;
  font-size: 1.1rem;
}
.reform_category > li > p {
  width: calc(100% - 130px);
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 2em;
}
.reform_menu {
  max-width: 800px;
  margin: 0 auto;
}
.reform_box {
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 80px;
}


.reform_box > ul > li {
  list-style: disc;  
  margin: 10px 0 10px 2rem;
  color: #333;
}
.reform_box, .reform_box > div {
  display: flex;
}

.reform_box > div {
  width: 60%;
}
.reform_box > div > p {
  padding: 10px;
}
/* ===== 流れセクション ===== */
.reform_step {
  max-width: 800px;
  margin: 0 auto;
}
.refotm_til {
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  background: var(--yama);
  color: #fff;
}
.reform_step > .reform_step_txt:last-of-type { 
  width: 100%;
  padding: 20px 0;
  font-size: 0.9rem;
  line-height: 2em;
  color: #333; 
 }
.reform_step > .reform_step_txt:not(:last-of-type){ 
  width: 90%;
  margin-left: 10%;
  padding: 20px 0 20px 10%;  
  border-left: solid 5px #fff;
  font-size: 0.9rem;
  line-height: 2em;
  color: #333;   
 }
/* ===== 電話番号 ===== */
.contact_box {
  text-align: center;
  background: var(--accent);
  padding: 30px;
  margin: 60px auto;
  max-width: 650px;
  border-radius: 6px;
}
.contact_box h3 {
  font-size: 1.1rem;
  color:#fff;
  margin-bottom: 15px;
}
.contact_box .phone > a {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
}
@media (max-width: 768px) {
  .contact_box .phone > a{
    font-size: 2rem;
  }  
}
@media (max-width: 428px) {
  .reform_gallery {
    flex-wrap: wrap;
  }
  .reform_category > li > h3 {
      width: 100%;
      padding: 3px 0;
      margin-bottom: 10px;
  }  
  .reform_category > li > p {
      width: 100%;
      padding-left: 0;
  }  
  .reform_category > li {
    display: block;
  }  
  .reform_gallery > p {
    width: 50%;
  } 
  .reform_box > div {
    width: 100%;
  }   
  .contact_box {
    padding: 20px;
  }
  .contact_box .phone > a{
    font-size: 1.8rem;
  }  
  
}
/* ==================
投稿設定
===================== */
#article_inr {
    padding: 40px 0 80px;
    background: var(--bg);
}

#article_inr > div {
    width: calc(100% - 40px);
    margin: 40px auto;
    max-width: 1200px;  
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.article_title {
    padding: 0 0 30px;
    font-family: "Noto Serif JP", serif;
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--font);
}
.content-Meta {
  padding-bottom: 20px;
}
.widgettitle {
    font-size: 1.1rem;
    color: var(--font);  
}
.widget_categories, .widget_archive, .widget_recent_entries {
  padding: 0 0 20px;
}
.widget_categories ul li a, .widget_archive ul li a, .widget_recent_entries ul li a {
  padding: 10px 0;
  display: block;
  color: #777E73;   
}

.sidebar_area {
  width: 280px;
  height: 100%;
  margin: 0 0 0 50px;
  padding: 0 0 0 50px;  
  border-left: solid 2px var(--font);
}

@media (max-width: 768px) {
  #article_inr {
      padding: 20px 0;
  }  
  #article_inr > div {
      display: block;
  }  
  .article_title {
      padding: 0 0 20px;
  }  
  .sidebar_area {
    width: 100%;
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;  border-left: none;    
    border-top: solid 2px var(--font);  
  }
}