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

/* ----------------------------
reset
------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
legend,
pre,
blockquote {
    margin: 0px;
    padding: 0px;
}

ul,
li {
    list-style: none;
}

img {
    margin: 0px;
    padding: 0px;
    border: 0px;
    vertical-align: top;
}

html {
    font-size: 62.5%;
   
}

body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Meiryo",
        sans-serif;
    font-size: 1.8rem;
    color: #000000;
    -webkit-text-size-adjust: 100%;
    background-color: #f3f4ef;
    text-align: left;
    box-sizing: border-box;
    margin: 0;
}

a img {
    margin: 0;
    padding: 0;
    border-style: none;
}

a,
a:link {
    text-decoration: none;
}

/* バナー */

.banner img:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
}


/* 共通 */
.inner {
    width: 960px;
    margin: 0 auto;
}

.inner2 {
    width: 1000px;
    margin: 0 auto;
}

.banner_pc {
    display: block;
}

.banner_sp {
    display: none;
}

.pc-tab-only {
    display: inline;
}

.tab-only {
    display: none;
}

.sp-only{
    display:none;
}

.pcbr {
    display: inline;
}

.tb-only{
    display: none;
}

.tbbr {
    display: none;
}

.spbr {
    display: none;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    font-family: 'Noto Serif JP', sans-serif;
}

#wrapper2 {
    width: 100%;
    margin: 0 auto;
    font-family: 'Noto Serif JP', sans-serif;
    background-color: #f3f4ef;
}

/* ヘッダー */
#header_pc {
    width: 100%;
    margin: 0 auto;
    z-index: 100;
}

.head_top{
	padding: 0;
	width: 100%;
	display:flex;
	justify-content: space-between;
	margin: 0 auto;
	}

#header_pc1 {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0); /* 透明の背景 */
  color: #ffffff;
  z-index: 100;
}

.head_top1{
    padding: 0;
    width: 100%;
    display:flex;
    justify-content: space-between;
    margin: 0 auto;
    }

.head_top1 h1 {
    width: 50%;
    padding: 10px 0;
}        
    
.head_top1 h1 img {
    width: 100%;
    padding: 5px 0 0 8vw;
}    

.right{
	display:flex;
	}

.menu{
    width: 35vw;
    display: flex;
    justify-content: space-between;
    padding: 3vw 10vw 0 0;
    color: #fff;
    font-size: 0.9vw;
}

.menu a{
    color: #fff;
}

.menu li {
    position: relative;
    list-style: none;
  }
  .menu li a {
    color: #fff;
    text-decoration: none;
    position: relative;
  }
   
  .menu a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 0.8px;
    background: #fff;
    bottom: -5px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;   
    }
    
.menu a:hover::after {
transform: scale(1, 1); 
}

.menu1{
width: 35vw;
display: flex;
justify-content: space-between;
padding: 1.5vw 10vw 1vw 0;
color: #333;
font-size: 0.9vw;
}

.menu1 a{
color: #333;
}

.menu1 li {
position: relative;
list-style: none;
}
.menu1 li a {
color: #333;
text-decoration: none;
position: relative;
}

.menu1 a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 0.8px;
background: #333;
bottom: -5px;
transform: scale(0, 1);
transform-origin: center top;
transition: transform 0.3s;   
}

.menu1 a:hover::after {
transform: scale(1, 1); 
}    

.head_top h1{
    width: 50%;
    padding: 10px 0;
} 

#header_pc {
    display: block;
    position: relative;
}

#header_sp {
    display: none;
}

button {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    border: 0;
    background: transparent;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
  }

  button {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: rgb(116, 116, 117, 0.2);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}  
  
  button:hover {
    cursor: pointer;
  }

  .btn {
    /* ボタンの配置位置  */
    position: fixed;
    top: 20px;
    right: 20px;
    /* ボタンの大きさ  */
    width: 58px;
    height: 58px;
    /* バーガーの線をボタン範囲の中心に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 最前面に */
    z-index: 1000;
  }
  
  /***** 真ん中のバーガー線 *****/
  .btn-line {
    /* 線の長さと高さ */
    width: 100%;
    height: 3px;
    /* バーガー線の色 */
    background-color: #fff;
    /* バーガー線の位置基準として設定 */
    position: relative;
    transition: .2s;
  }
  
  /***** 上下のバーガー線 *****/
  .btn-line::before,
  .btn-line::after {
    /* 基準線と同じ大きさと色 */
    position: absolute;
    transition: .5s;
  }

  .btn-line1::before,
  .btn-line1::after {
    /* 基準線と同じ大きさと色 */
    position: absolute;
    transition: .5s;
  }

  /***** 真ん中のバーガー線 *****/
  .btn-line1 {
    /* 線の長さと高さ */
    width: 100%;
    height: 3px;
    /* バーガー線の色 */
    background-color: #fff;
    /* バーガー線の位置基準として設定 */
    position: relative;
    transition: .2s;
  }
  
  
  .btn-line::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* 上の線の位置 */
    
    transform: translateY(-16px);
      }
  
.btn-line1::before {
content: "";
width: 100%;
height: 100%;
background-color: #fff;
/* 上の線の位置 */
transform: translateY(-16px);
    }     
  
  .btn-line::after {
    content: "menu";
    /* 下の線の位置 */
    display: block;
    width: 100%;
    text-align: center;
    transform: translateY(8px);
    color: #fff;
  }

  .btn-line1::after {
    content: "menu";
    /* 下の線の位置 */
    display: block;
    width: 100%;
    text-align: center;
    transform: translateY(8px);
    color: #fff;
  }
  
  /***** メニューオープン時 *****/
  .btn-line.open {
    transition: .5s;
  }
  
  .btn-line.open::before {
    content: "";
    transform: translateY(0);
  }
  
  .btn-line.open::after {
    content: "close";
    color: #fff;
  }  

  .btn-line1.open {
    transition: .5s;
  }
  
  .btn-line1.open::before {
    content: "";
    transform: translateY(0);
  }
  
  .btn-line1.open::after {
    content: "close";
    color: #333;
  }  
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: -40vw;
    width: 40vw;
    height: 100%;
    background-color: #182649;    
    transition: 0.6s;
    z-index: 999;
  }  

  .nav-menu ul{
    width: 70%;
    margin: 80px auto 0;
  }

  .nav-menu li {
    padding: 10px 0;
    font-size: 1.4em;
  }

  .nav-menu li a{
    color: #fff;
  }
  
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 998;
  }
  
  .nav-open .nav-menu{
    right: 0;
  }
 
  .nav-open .overlay {
    display: block;
  }

/* MAIN */
.contents_main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.vertical-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 106px;
    height: 100%;
    background-color: #182649;
  }

.vertical-stripe2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 106px;
    height: 100%;
    background-color: #182649;
  }  
  
  .content {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #ffffff;
    width: 100%;
  }

  .content h1 {
    font-size: 3vw;
    font-weight: normal;
    text-align: center;
    transform: translateX(10px);
    padding-bottom: 20px;
  }

  .fv_title {
    text-align: center;    
  }

  .head_top h1 img{
    width: 100%;
    padding: 5px 0 0 8vw;
}

  /* .follow-image {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 100;
    transition: opacity 0.3s ease;
  }
  
  .follow-image.hidden {
    opacity: 0;
    pointer-events: none;
  } */

  .scroll-arrow {
    display: flex;
    position: absolute;
    top: 45%;
    left: 40px;
    height: 100%;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
    line-height: 1.4;
  }
  
  .arrow-text {
    font-size: 14px;
    margin-bottom: 5px;
    color: #ffffff;
  }
  
  .left_arrow {
    width: 1px;
    height: 5px;
    background-color: #fff;
    position: relative;
    animation: arrowExtend 2.5s ease-in-out infinite;
  }
  
  .left_arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translateX(-50%) rotate(45deg);
  }
  
  @keyframes arrowExtend {
    0%, 100% {
      height: 25px;
    }
    50% {
      height: 45px;
    }
  }

  .left_arrow{
    will-change: transform;
  }

  .left_arrow {
    transform: translateZ(0);
  }
  
  
.slideshow {    
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
  }
  
  .slide {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: slideshow 21s linear infinite;
  }

  .slide img {
    overflow: hidden;  
  }
  
  .slide:nth-child(1) {
    animation-delay: 0s;
  }
  
  .slide:nth-child(2) {
    animation-delay: 5.25s;
  }
  
  .slide:nth-child(3) {
    animation-delay: 10.5s;
  }

  .slide:nth-child(4) {
    animation-delay: 15.75s;
  }
  
  @keyframes slideshow {
    0% {
      opacity: 0;
      transform: scale(1);
    }
     5% {
      opacity: 1;
    }
    33% {
      opacity: 1;
    }
    38% {
      opacity: 0;
      transform: scale(1.1);
    }
    100% {
      opacity: 0;
      transform: scale(1.1);
    }
  }


/* brand_main */

.brand_main {
    background-image: url(../images/brand_main_back_pc.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 1078px;
    background-size: cover;
    position: relative;
}

.brand_main_in{
    width: 1460px;
    margin: auto;
    text-align: left;
    padding: 90px 0;
}

.brand_main_title h3{
     font-size: 2.7em;     
     color: #fff;
     font-weight: normal;
     padding-top: 20px;
}

.brand_main_title p{    
     padding: 25px 0 0;
     font-size: 1.1em;
     text-align: left;
     color: #fff;
     font-weight: normal;
}

.uline{
     padding: 30px 0 0;
     width: 100%;
}

.uline img{
    width: 100%;
}

.brand_main_text p{
     padding: 15px 0 0;
     font-size: 1em;
     text-align: left;
     color: #fff;
}

.brand_next_area {
    display: flex;
    align-items: center;
    padding: 55px 0 40px;
}

.brand_next{
    position: relative;
}

.brand_next a{    
     padding: 25px 0 0;
     font-size: 1em;
     text-align: left;
     color: #fff;
}

.brand_next a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 0.8px;
    background: #fff;
    bottom: -5px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;   
    }
    
.brand_next a:hover::after {
transform: scale(1, 1); 
}

.next_btn{
    padding-left: 10px;
    margin-top: -5px;
}

.brand_main_text2 p{
     padding: 25px 0 0;
     font-size: 1em;
     text-align: left;
     color: #fff;
}

.round-button {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    color: #182649;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .next_arrow{
    display: block;
    font-weight: bold;
    -webkit-text-stroke: 2px #182649;
  }  
  

  .round-button:hover {
    background-color: #ababab;
  }


/* voice_cat */

.voice_cat {
    background-image: url(../images/voice_back_pc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1261px;
    position: relative;
}

.voice_cat_in{
    width: 1460px;
    margin: 0 auto;
    text-align: left;
    padding: 90px 0 0;
}

.voice_top{
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}

.voice_left{
    line-height: 1.8;
}

.voice_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 2.2em;
}

.voice_left p{
    font-size: 1em;
    color: #990006;
}

.voice_right{
    font-family: 'Noto Sans JP';
    padding-right: 40px;
    line-height: 1.2;
    align-self: center;
}

.voice_uline{
    padding: 10px 0 0 0;
}

.voice_uline img{
    width: 100%;
}

.voice_bottom{
    width: 100%;
}
 
 .slider-container {    
    max-width: 1720px;
    margin: 40px auto 0;
  }
  
  .slider1 {
    position: relative;
    height: 800px;
    overflow: hidden;
  }
  
  .slide1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  
  .slide1.active {
    opacity: 1;
  }
  
  .prev-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #182649;
    color: #ffffff;
    -webkit-text-stroke: 2px #ffffff;
    border-radius: 50%;
    border: none;
    padding: 11px 15px;
    cursor: pointer;
    z-index:100;
  }

  .next-button {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #182649;
    color: #ffffff;
    -webkit-text-stroke: 2px #ffffff;
    border-radius: 50%;
    border: none;
    padding: 11px 15px;
    cursor: pointer;
    z-index: 1000;
  }
  
  .prev-button {
    left: 10px;
  }
  
  .next-button {
    right: 10px;
  }

  .case{
    position: relative;
    }  

  .case_text{
    width: 730px;
    position: absolute;
    top: 23%;
    left: 46%;
  }

  .case_num{
    font-size: 4em;
  }

  .case_owner{
    padding-top: 15px;
    font-size: 1.8em;
  }

  .case_voice{
    padding-top: 30px;
    font-size: 1em;
    line-height: 1.6;
  }

  .wrapper_voice {
    overflow: hidden;
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 1%;
  }


/* works_cat */
.works_cat{
    background-color: #eaeaea;
    color: #181818;
    position: relative;
}

.uline4{
     padding: 0 0 0;
     width: 100%;
}

.uline4 img{
    width: 100%;
}

.wrapper_works {
    overflow: hidden;
    width: 100%;
    display: flex;
    margin-top: -43px;
  }
  
  .loop-text {
    white-space: nowrap;
    animation: loop-animation 186.67s linear infinite;
  }
  
  .loop-text span {
    display: inline-block;
    font-size: 12vw;
    color: #e1e1e3;
    line-height: 1;
    padding-right: 50px; /* テキスト間のスペース */
  }
  
  @keyframes loop-animation {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

.works_cat_in{
    width: 1460px;
    padding: 100px 0 0;
    margin: 0 auto;
    text-align: left;
}

.works_img{
    width: 100%;
}

.works_top{
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}

.works_left{
    width: 44%;
    line-height: 1.8;
    padding-bottom: 20px;
}

.works_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 2.2em;
}

.works_left p{
    font-size: 1em;
    color: #990006;
}

.works_right{
    font-family: 'Noto Sans JP';
    padding-right: 40px;
    line-height: 1.2;
    align-self: center;
    box-sizing: border-box;
}

.works_inner{
    width: 1460px;
    padding-bottom: 40px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  gap: 20px;
}

.works_box{
    width: calc(33.33% - 20px);
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.works_text{
    text-align: left;
    padding: 30px 30px 60px;
}

.works_box img {
    max-width: 100%;
    height: auto;
  }

.img-container {
width: auto; /* 任意の幅 */
height: auto; /* 任意の高さ */
overflow: hidden; /* はみ出た部分を隠す */
border: 6px solid #ffffff;
box-shadow: 2px 5px 4px #717171;
}

.img-container img {
width: 100%;
height: 100%;
object-fit: cover; /* 画像を枠内に収める */
transition: transform 0.5s ease; /* アニメーション効果 */
}

.img-container:hover img {
transform: scale(1.1); /* ホバー時に1.1倍に拡大 */
}

.works_text_01{
    font-size: 0.9em;
    font-family: 'Noto Sans JP';
}

.works_text_02{
    font-size: 1.4em;
    padding: 20px 0;
}

.works_text_03{
    font-size: 0.85em;
    font-family: 'Noto Sans JP';
}


/* about_us_cat */
.about_us_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.about_us_inner{
    width: 1460px;
    padding: 90px 0;
    margin: 0 auto;
    text-align: left;
}

.about_us_top{
    display: flex;
    padding: 0 130px 0 0;
    font-size: 0.9em;
}

.about_us_left{
    width: 44%;
    line-height: 1.8;
}

.about_us_left h2{
    color: #ffffff; 
    letter-spacing: 0.2em;
    font-size: 2.2em;
    font-weight: normal;
}

.about_us_left p{
    font-size: 1em;
    color: #ffffff;
}

.uline2{
    width: 100%;
    padding: 20px 0 0 0;
}

.uline2 img{
    width: 100%;
}

.about_us_center{
    width: 1240px;
    margin: auto;
}

.about_us_text{
    color: #ffffff;
    line-height: 2.2;
    font-size: 0.85em;
    padding: 40px 0 60px;
}

.about_us_text_box{
    background-color: #fff;
    display: flex;
    position: relative;
    margin-bottom: 60px;
}

.about_us_img{
    width: 50%;
}

.about_us_text_cat{
    width: 40%;
    background-color: #fff;
    text-align: left;
    line-height: 2.4;
    padding: 40px 0 40px 60px;
    color: #182649;
    font-weight: bold;
}

.about_us_text_cat h3{
    font-size: 2.4em;
}

.about_us_text_cat p{
    font-family: 'Noto Sans JP';
}

.next_btn2{
    position: absolute;
    top: 45%;
    right: 5%; 
}

.round-button2 {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #182649;
    color: #fff;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .next_arrow2{
    display: block;
    font-weight: bold;
    -webkit-text-stroke: 1px #ffffff;
  }    

  .round-button2:hover {
    background-color: #ababab;
  }


/* contact_cat */
.contact_cat{
    background-image: url(../images/contact_back_pc.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    padding: 100px 0;
    position: relative;
}

.contact_cat_in{
    width: 1460px;
    margin: auto;
    position: relative;
}

.uline3{
    padding-top: 35px;
    width: 100%;
}

.uline3 img{
    width: 100%;
}

.contact_cnt{
    padding: 10px 0 50px;
    text-align: center;
    color: #fff;
}

.contact_cat_title{
    padding: 110px 0 0 0;
    color: #fff;
    text-align: center;
}

.contact_cat_title h4{    
    font-size: 2.2em;  
    letter-spacing: 0.1em;
    font-weight: normal;
    padding-bottom: 20px;  
}

.contact_text{
   font-size: 1em;
   line-height: 1.6;
   padding: 10px 0 30px;
}

.gothic{
    font-family: 'Noto Sans JP';
}

.contact_cat_tel{
    color: #fff;
    padding: 10px 0;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.contact_cat_tel a[href^="tel:"]{
    color: #fff !important;
    text-decoration: none;
    pointer-events: none;
}

.contact_cat_two span{
    border-bottom: 1px solid #ffffff; 
    padding-bottom: 12px;
}

.contact_cat_mail{
    margin-top: 60px;
}

.contact_cat_mail a{
    padding: 25px 80px;
    background-color: #84161c;
    display: inline-block;
    color: #fff;
    font-family: 'Noto Sans JP';
    font-size: 1.2em;
    font-weight: bold;
    }

.contact_cat_mail a:hover {
    opacity: 0.7;
}

/* BRAND_MAIN */
.brand_story_cat{
    background-image: url(../images/brand_story_back_pc.jpg);
    background-repeat: no-repeat;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 51.6145%;
    background-size: 100% auto;
    position: relative;
}

.brand_story_title {
    position: absolute;
    top: 18%;
    left: 11%; 
    width: 58%;   
}

.brand_story_title h1 img{
    width: 100%;
}

.brand_story_title2 {
    position: absolute;
    top: 35%;
    left: 11%;        
}

.brand_story_title2 h2{
    font-size: 2.5vw;
    font-weight: normal;
    color: #fff; 
}

.brand_s_uline {
    position: absolute;
    top: 45%;
    left: 11%;
    width: 44.5%;
}

.brand_s_uline img{
    width: 100%;
}

.brand_story_text{
    position: absolute;
    top: 48%;
    left: 11%;
}

.brand_story_text p{
    font-size: 0.95vw;
    color: #fff; 
}

.b_f_l{
    font-size: 1.9vw;
}

.c_y{
    color: #feffca;
    font-size: 1.2vw;
}

/* b_S_construction */

.b_S_construction{
    background-image: url(../images/b_s_construction_pc.png);
    background-repeat: no-repeat;
    background-color: #f3f4ef;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 45.625%;
    background-size: 100% auto;
    position: relative;
}

.b_S_c_title{
    position: absolute;
    top: 8%;
    left: 12%;
}

.b_S_c_title h3{
    font-size: 1.85vw;
    font-weight: normal;
}

.b_S_c_text{
    position: absolute;
    top: 17.5%;
    left: 12%;
    font-size: 0.95vw;
}

.b_S_c_text span{
    font-weight: bold;
}

.b_S_c_textbox{
    font-size: 1.15vw;
}

.b_S_c_textbox span{
    font-weight: bold;
    font-size: 1.2vw;
}

.b_S_c_textbox_title{
    color: #fff;
    font-size: 1.2vw;
    position: absolute;
    top: 32.5%;
    left: 13.8%;
    letter-spacing: 0.1em;
}

.b_S_c_textbox_01{
    position: absolute;
    top: 41%;
    left: 15.5%;
    line-height: 1.8;
}

.b_S_c_textbox_02{
    position: absolute;
    top: 53.5%;
    left: 15.5%;
    line-height: 1.8;
}

.b_S_c_textbox_03{
    position: absolute;
    top: 66%;
    left: 15.5%;
    line-height: 1.8;
}

.b_S_c_textbox_04{
    position: absolute;
    top: 79%;
    left: 15.5%;
    line-height: 1.8;
    font-size: 1.25vw;
}

/* b_S_plan */

.b_S_plan{
    background-image: url(../images/b_S_plan_pc.jpg);
    background-repeat: no-repeat;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 44.270%;
    background-size: 100% auto;
    position: relative;
}

.b_S_p_title{
    position: absolute;
    top: 8%;
    left: 12%;    
}

.b_S_p_title h3{
    font-size: 1.85vw;
    font-weight: normal;
}

.b_S_p_text{
    position: absolute;
    top: 26%;
    left: 12%;
    font-size: 0.9vw;
    line-height: 1.4;
}

/* greeting_cat */

.greeting_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.greeting_inner{
    width: 1491px;
    padding: 90px 0;
    margin: 0 auto;
    text-align: left;
}

.greeting_box{
    position: relative;
}

.greeting_title{
    padding-bottom: 30px;
}

.greeting_title h2{
    font-size: 3.6em;
    color: #fff;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.c_blu{
    color: #212f50;
}

.c_re{
    color: #b81c24;
}

.greeting_box_title h3{
    position: absolute;
    top: 4%;
    left: 3%;
    font-size: 2em;
    letter-spacing: 0.2em;
}

.greeting_box_title p{
    position: absolute;
    top: 14%;
    left: 3%;
    font-size: 1em;
}

.greeting_box_title2 h3{
    position: absolute;
    top: 56%;
    left: 47%;
    font-size: 2em;
    letter-spacing: 0.2em;
}

.greeting_box_title2 p{
    position: absolute;
    top: 68%;
    left: 47%;
}

.c_g{
    color: #70788b;
}

.f_l{
    font-size: 1.25em;
    font-weight: bold;
}

.g_sub{
    font-size: 3.4em;
    color: #fff;
    text-align: center;
}

/* thanks_cat */

.thanks_cat{
    background-image: url(../images/thanks_back_pc.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.thanks_inner{
    width: 1100px;
    padding: 90px 0;
    margin: 0 auto;
    text-align: center;
}

.thanks_box{
    background-color: rgb(243, 244, 239, 0.9);
    padding: 60px;
    color: #0c0b10;
}

.thanks_title h2{
    font-size: 2.4vw;
    font-weight: normal;
    letter-spacing: 0.2em;
}

.thanks_hr{
    color: #333333;
}

.thanks_text span{
    line-height: 1.2;
}

.thanks_text p{
    line-height: 1.8;
    padding-top: 30px;
}

.thanks_text span{
    font-weight: bold;
}


.thanks_bt{
    padding-top: 30px;
}

.thanks_bt a{
    padding: 10px 150px 12px;
    background-color: #182649;
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    font-size: 1.2em;
    }

.thanks_bt a:hover {
    opacity: 0.7;
}


/* privacy_cat */

.privacy_title_img{
    width: 100%;
}

.privacy_title_img img{
    width: 100%;
}

.privacy_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 2.4vw;
    font-weight: normal;
    padding: 30px 0;
}

.privacy_inner{
    width: 1100px;
    padding: 0 0 90px;
    margin: 0 auto;
    text-align: left;
}

/* contact_form_cat */

.contact_form_img{
    width: 100%;
}

.contact_form_img img{
    width: 100%;
}
.contact_note{
    font-family: 'Noto Sans JP';
    padding: 0.8vw 8vw 0 0;
}

.contact_form_cat{
    padding: 0 0 30px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    background-color: #fff;
}

.contact_form_inner{
    width: 1460px;
    margin: auto;
}

.container {
    width: 800px;
    max-width: 600px;
    margin: 30px auto;
    padding: 2rem;
    color: #333;
    line-height: 1;
}

.form_text {
    padding: 0;
    line-height: 1.6;
}

.form_text h3 {
    text-align: center;
    font-weight: normal;
    font-size: 1.8em;
    padding: 30px 0 20px;
    color: #333;
}

.form_text p{
    text-align: center;
    font-weight: normal;
    color: #333;
    font-size: 1em;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-top: 12px;
}

input, textarea {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.submit-wrapper {
    text-align: center;
  }
  
  .submit-btn {
    display: inline-block;
    background-color: #182649;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
  }
  
  .submit-btn:hover {
    background-color: #3d5184;
  }


/* company_cat */

.company_title_img{
    width: 100%;
}

.company_title_img img{
    width: 100%;
}

.company_inner{
    width: 1100px;
    padding: 0 0 90px;
    margin: 0 auto;
}

.company_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 2.4vw;
    font-weight: normal;
    padding: 30px 0;
}

.company-info {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .company-info th,
  .company-info td {
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .company-info th {
    background-color: #565656;
    color: #ffffff;
    font-weight: bold;
    width: 30%;
    text-align: center;
  }

  /* privacy_cat */

  .privacy_text{
    font-size: 0.9em;
  }

  .p_l{
    font-size: 1.3em;
    font-weight: bold;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.table th {
    background-color: #565656;
    border: 1px solid #ccc;
    color: #fff; 
    width: 30%; 
    padding: 1.25em 1em; 
    text-align: center; 
}

.table td {
    background: #fff;
    padding: 1.25em 1em;
    border: 1px solid #ccc;
    vertical-align: top;
    width: 70%;
}



/* footer */
footer{
    background-color: #565656;
	padding:40px 0 20px;
	text-align: center;
	width:100%;
    line-height: 1.3;
    color: #fff;
    font-family: 'Noto Serif JP', sans-serif;
    position: relative;
}

.footer_inner{
    width: 95%;
    display: flex;
    justify-content: space-between;
}

footer h2{
width: 220px;
padding-left: 40px;
}
footer h2 img{
width: 100%;
}

.f_navi{
margin: 35px 0;
font-size: 0.8em;
padding-left: 3vw;
letter-spacing: 0.1em;
}

.copy{
text-align: center;
font-size: 0.8em;
margin: 40px 0 0;
}

footer a,
footer a:link,
footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	color: #ccc;
	text-decoration:none;
}

/* fix_button */

.fix_button {
    position: fixed;
    z-index: 99999; 
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #01325d;
  }

  .fix_button img {
    max-width: 100%;
  }

  .fix_button a img{
    position:relative;
	top:0;
  }

  .fix_button a img:hover {
    top:10px;
	transition:0.3s;
  }

  .pagetop {
    display: none;
    position: fixed;
    bottom: 200px;
    right: 15px;
  }
  .pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #04325b;
    font-size: 15px;
    text-decoration: none;
    padding: 15px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }
  .pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    padding:15px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }

/*ここからpc（1241px～1860px）環境の設定
---------------------------------------------------------------------------*/
@media (min-width:1241px) and (max-width:1860px) {
    body {
        font-size: 1.8rem;
        background-image: none;
    }

    .head_top1 h1 img {
        padding: 5px 0 0 9vw;
    }

    .follow-image {
        width: 80%;
      }

    .follow-image img{
        width: 100%;
      }  

    .brand_main_in {
        width: 85%;
    }

    .voice_cat{
        height: 75vw;
    }

    .voice_cat_in {
        width: 85%;
    }

    .voice_uline{
        padding: 10px 0 0 0;
    }
    
    .voice_uline img{
        width: 100%;
    }

    .voice_left{
        line-height: 1.4;
    }

    .slider-container {
        margin: auto;
    }
    .case{
        width: 100%;
        margin: auto;
    }

    .case img{
        width: 100%;
    }

    .case_text {
        width: 47%;
        position: absolute;
        top: 20%;
        left: 44%;
    }
    
    .case_num{
        font-size: 3vw;
    }
    
    .case_owner{
        font-size: 2.4vw;
    }
    
    .case_voice {
        padding-top: 2vw;
        font-size: 1.2vw;
    }

    .prev-button, .next-button {
        position: absolute;
        top: 40%;
        padding: 4px 8px;
    }

    .works_cat_in {
        width: 85%;
        padding: 100px 0 0;
        margin: 0 auto;
        text-align: left;
    }

    .works_inner{
        width: 85%;
    }

    .works_text_02 {
        font-size: 1.2em;
        padding: 20px 0;
    }

    .about_us_inner {
        width: 85%;
        padding: 90px 0;
    }

    .about_us_center {
        width: 100%;
        margin: auto;
    }

    .about_us_img {
        width: 48%;
    }

    .about_us_text_cat {
        width: 40%;
        background-color: #fff;
        text-align: left;
        line-height: 2.4;
        padding: 40px 0 40px 40px;
        font-size: 0.9em;
        color: #182649;
        font-weight: bold;
    }

    .next_btn2 {
        position: absolute;
        top: 45%;
        right: 3%;
    }

    .greeting_inner {
        width: 100%;
        padding: 90px 0;
        margin: 0 auto;
        text-align: left;
    }

    .greeting_box{
        width: 95%;
        margin: auto;
    }

    .greeting_box_img img{
        width: 100%;
    }

    .greeting_box_title h3 {
        position: absolute;
        top: 3%;
        left: 3%;
        font-size: 2.6vw;
        letter-spacing: 0.2em;
    }

    .greeting_box_title p {
        position: absolute;
        top: 15%;
        left: 3%;
        font-size: 1.2vw;
    }

    .greeting_box_title2 h3 {
        position: absolute;
        top: 55.5%;
        left: 47%;
        font-size: 2.6vw;
        letter-spacing: 0.2em;
    }

    .f_l {
        font-size: 1.25vw;
        font-weight: bold;
    }

    .greeting_box_title2 p {
        position: absolute;
        top: 67%;
        left: 47%;
        font-size: 1.2vw;
    }

    .contact_cat_in {
        width: 85%;
        margin: auto;
        position: relative;
    }

    .f_navi {
        margin: 35px 0;
        font-size: 0.65em;
        padding-left: 2.5vw;
        letter-spacing: 0.1em;
    }

    .copy {
        text-align: center;
        font-size: 0.65em;
        margin: 40px 0 0;
    }

} 


/*ここから調整用（901px～1240px）環境の設定
---------------------------------------------------------------------------*/
 @media (min-width:901px) and (max-width:1240px) {

    /* 共通 */
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }

    .banner_pc {
        display: none;
    }

    .banner_sp {
        display: block;
    }

    .pc-tab-only {
        display: inline;
    }

    .tab-only {
        display: block;
    }

    .sp-only{
        display: none;
    }

    .pcbr {
        display: none;
    }

    .tb-only{
        display: inline;
    }

    .tbbr {
        display: inline;
    }

    .spbr {
        display: none;
    }

 /* ヘッダー */

 #header_sp {
    width: 100%;
    margin: 0 auto;
    z-index: 10;
}

.logo_sp{
    width: 25%;
    margin-top: 0;
    display: block;
}

.logo_sp h1{
    padding: 10px 0 10px 20px;
    margin: auto;
}

.logo_sp img{
    width: 100%;
    padding: 0;
}

#header_pc{
    display: none;
}

#header_sp {
    display: block;
}  

.nav-menu {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    height: 100%;
    background-color: #182649;    
    transition: 0.6s;
    z-index: 999;
  }

 .btn {
    position: fixed;
    top: 15px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}  


/* MAIN */
.contents_main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* .follow-image {
    position: absolute;
    top: 50%;
    left: 50%;
} */

.vertical-stripe {
    background-color: unset;
  }

.vertical-stripe2 {
    background-color: unset;
  }  
  
  .content {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #ffffff;
  }

  .content h1 {
    font-size: 2.4em;
    font-weight: normal;
    text-align: center;
    transform: translateX(10px);
  }

  .fv_title {
    text-align: center;    
  }

  .follow-image {
    width: 80%;
  }
  
   .scroll-arrow {
    display: flex;
    position: absolute;
    top: 65%;
    left: 20px;
    height: 100%;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
  }
  
  .arrow-text {
    font-size: 14px;
    margin-bottom: 5px;
    color: #ffffff;
  }

/* brand_main */  

  .brand_main {
    background-image: url(../images/brand_main_back_sp.jpg);
    background-repeat: no-repeat;
    width: 100%;
    background-position: top right 20%;
    background-size: cover;
    height: auto;
    position: relative;
}

.brand_main_in{
    width: 85%;
    margin: auto;
    text-align: left;
    padding: 70px 0;
}

.brand_next_area {
    display: flex;
}

.brand_next a{    
    padding: 25px 0 0;
    font-size: 1.2em;
    text-align: left;
    color: #fff;
}

.next_btn {
    padding-left: 10px;
    margin-top: -5px;
}
  
.uline {
    width: 100%;
} 

.uline img {
    width: 100%;
}

.brand_main_title p{
    font-size: 1em;
}

.brand_main_title h3{
     font-size: 1.8em;
     padding-top: 0;     
}

.brand_main_text p,.brand_main_text2 p{
    font-size: 1.2em;
}


/* voice_cat */  
  
.voice_cat {
    background-image: url(../images/voice_back_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    height: 142vw;
}

.voice_cat_in {
    width: 90%;
    padding: 10vw 0 0;
}

.voice_top{
    display: flex;
    font-size: 0.9em;
}

.voice_left{
    line-height: 1.6;
    width: 35%;
}

.voice_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 1.8em;
}

.voice_left p{
    font-size: 0.9em;
    color: #990006;
}

.voice_right{
    font-family: 'Noto Sans JP';
    padding: 2px 0 0 1vw;
    line-height: 1.3;
    font-size: 1.1em;
    width: 65%;
}

.slider-container {
    max-width: 1720px;
    margin: 0 auto 0;    
}

.slider1 {
    position: relative;
    overflow: hidden;
    height: 110vw;
  }

.case{
    width: 80%;
    margin: auto;
}

.case img{
    width: 90%;
    margin: auto;
}

.case_text {
    width: 80%;
    position: absolute;
    top: 55%;
    left: 11%;
}

.case_num{
    font-size: 5vw;
}

.case_owner{
    font-size: 3vw;
    padding-top: 0;
}

.case_voice {
    padding-top: 2.2vw;
    font-size: 1em;
}

.voice_bottom{
    width: 90%;
    margin: auto;
}

.prev-button, .next-button {
    position: absolute;
    top: 15%;
    padding: 3px 8px;
}

/* works_cat */
.works_cat_in{
    width: 90%;
    padding: 70px 0 0;
}

.works_top{
    display: flex;
    font-size: 0.9em;
}

.works_left{
    width: 30%;
    line-height: 1.6;
}

.works_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 1.8em;
}

.works_left p{
    font-size: 0.9em;
    color: #990006;
}

.works_right{
    font-family: 'Noto Sans JP';
    padding: 2px 0 0 1vw;
    line-height: 1.3;
    font-size: 1.1em;
    width: 70%;
}

.uline4{
     padding: 15px 0 10px;
}

.uline4 img{
    width: 100%;
}

.works_inner{
    width: 90%;
    padding: 0 0 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.works_box {
    width: calc(50% - 20px);
    display: flex;
    justify-content: center;
    text-align: center;
}

.works_text {
    text-align: left;
    padding: 30px 0;
}

.works_text_02 {
    font-size: 1.4em;
    padding: 15px 0;
}

.works_text_03 {
    font-size: 1.1em;
    padding: 15px 0;
}


/* about_us_cat */
.about_us_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
}

.about_us_inner {
    width: 90%;
    padding: 40px 0;
}
 
.about_us_top{
    padding: 0 0 0 0;
}

.about_us_text{
    padding: 0 0 30px;
    font-size: 1.2em;
}

.about_us_left {
    line-height: 1.8;
}

.about_us_left h2{
    font-size: 1.8em;
}

.uline2{
    margin: auto;
}

.uline2 img{
    width: 100%;
}

.about_us_center {
    width: 100%;
    margin: auto;
}

.about_us_text_box{
    background-color: #fff;
    display: flex;
    position: relative;
    margin-bottom: 30px;
}

.about_us_img{
    width: 45%;
}

.about_us_img img{
    width: 100%;
}

.about_us_text_cat{
    width: 55%;
    background-color: #fff;
    text-align: left;
    line-height: 1.8;
    padding: 30px 0 0 30px;
    color: #182649;
    font-weight: bold;
    box-sizing: border-box;
}

.about_us_text_cat h3{
    font-size: 3vw;
}

.about_us_text_cat p{
    font-family: 'Noto Sans JP';
    font-size: 1.6vw;
}

.next_btn2{
    position: absolute;
    top: 45%;
    right: 2%; 
}

.round-button2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #182649;
    color: #fff;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .next_arrow2{
    display: block;
    font-weight: bold;
    -webkit-text-stroke: 1px #ffffff;
  }  
  

  .round-button2:hover {
    background-color: #ababab;
  }

/* contact_cat */

.contact_cat{
    padding: 30px 0;
}

.contact_cat_in{
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
}

.contact_cnt{
    display: block;
    padding: 20px 0 50px;
}

.contact_cat_img{
    position: absolute;
    bottom: 0;
    left: 0;
}

.contact_cat_title{
    padding: 0;
}

.contact_text{
    padding: 0 0 30px;
    font-size: 1em;
    line-height: 1.6;
}

.contact_cat_title h4{
    color: #fff;
    padding: 30px 0 10px;
    font-size: 1.8em;
    text-align: center;
    font-weight: normal;
}

.contact_cat_tel{
    color: #fff;
    padding: 0 0 0 0;
    font-size: 3em;
    letter-spacing: .2rem;
    font-weight: bold;
}

.contact_cat_tel a{
    text-decoration: none;
}

.contact_cat_tel img{
    padding-top: 2px;
}

/* BRAND_MAIN */
.brand_story_cat{
    background-image: url(../images/brand_story_back_sp.jpg);
    background-repeat: no-repeat;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 156.470%;
    background-size: 100% auto;
    position: relative;
}

.brand_story_title {
    position: absolute;
    top: 10%;
    left: 5%; 
    width: 90%;   
}

.brand_story_title h1 img{
    width: 100%;
}

.brand_story_title2 {
    position: absolute;
    top: 18%;
    left: 6%;        
}

.brand_story_title2 h2{
    font-size: 5vw;
    font-weight: normal;
    color: #fff; 
}

.brand_s_uline {
    position: absolute;
    top: 30%;
    left: 6%;
    width: 80%;
}

.brand_s_uline img{
    width: 100%;
}

.brand_story_text{
    position: absolute;
    top: 33%;
    left: 6%;
}

.brand_story_text p{
    font-size: 2.7vw;
    color: #fff; 
}

.b_f_l{
    font-size: 4.4vw;
}

.c_y{
    color: #feffca;
    font-size: 3vw;
}

/* b_S_construction */

.b_S_construction{
    background-image: url(../images/b_s_construction_sp_01.png);
    background-repeat: no-repeat;
    background-color: #f3f4ef;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 89.565%;
    background-size: 100% auto;
    position: relative;
}

.b_S_c_title{
    position: absolute;
    top: 5%;
    left: 5%;
}

.uline5{
    position: absolute;
    top: 10%;
    left: 5%;
     padding: 25px 0 0;
     width: 90%;
}

.uline5 img{
    width: 100%;
}

.b_S_c_title h3{
    font-size: 3.8vw;
    font-weight: normal;
}

.b_S_c_text{
    position: absolute;
    top: 15.5%;
    left: 5%;
    font-size: 2.2vw;
    line-height: 1.4;
    width: 90%;
}

.b_S_c_text span{
    font-weight: bold;
}

.b_S_c_textbox{
    font-size: 2.6vw;
}

.b_S_c_textbox span{
    font-weight: bold;
    font-size: 3vw;
}

.b_S_c_textbox_title{
    color: #fff;
    font-size: 2.6vw;
    position: absolute;
    top: 32.5%;
    left: 8%;
    letter-spacing: 0.1em;
}

.b_S_c_textbox_01{
    position: absolute;
    top: 40.5%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_02{
    position: absolute;
    top: 54%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_03{
    position: absolute;
    top: 67.5%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_04{
    position: absolute;
    top: 80%;
    left: 12%;
    line-height: 1.8;
    font-size: 2.8vw;
}

.b_S_c_under{
    background-color: #f3f4ef;
    padding-bottom: 30px;
}

.b_S_c_under img{
    width: 100%;
}

/* b_S_plan */

.b_S_plan{
    background-image: none;
    background-color: #dce2de;
    height: 70vw;
}

.b_S_p_title{
    position: absolute;
    top: 7%;
    left: 5%;    
}

.uline6{
    position: absolute;
    top: 16%;
    left: 5%;
     padding: 25px 0 0;
     width: 90%;
}

.uline6 img{
    width: 100%;
}

.b_S_p_title h3{
    font-size: 3.8vw;
    font-weight: normal;
}

.b_S_p_text{
    position: absolute;
    top: 25%;
    left: 5%;
    font-size: 2.4vw;
    line-height: 1.4;
    width: 90%;
}

.b_S_p_under{
    background-color: #dce2de;
}

.b_S_p_under img{
    width: 100%;
}

/* greeting_cat */

.greeting_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.greeting_inner{
    width: 90%;
    padding: 90px 0;
    margin: 0 auto;
    text-align: left;
}

.greeting_box{
    position: relative;
}

.greeting_box_img{
    width: 80%;
    margin: auto;
}

.greeting_box_img img{
    width: 100%;
    margin-bottom: 30px;
}

.greeting_title{
    padding-bottom: 30px;
}

.greeting_title h2{
    font-size: 5vw;
    color: #fff;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.greeting_box_title h3{
    position: absolute;
    top: 3%;
    left: 13%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.uline_greeting {
    position: absolute;
    top: 8%;
    left: 13%;
    width: 73%;
}

.uline_greeting img {
    width: 100%;
}

.greeting_box_title p{
    position: absolute;
    top: 10%;
    left: 13%;
    font-size: 2.3vw;
}

.greeting_box_title2 h3{
    position: absolute;
    top: 53%;
    left: 13%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.uline_greeting2 {
    position: absolute;
    top: 58%;
    left: 13%;
    width: 73%;
}

.uline_greeting2 img {
   width: 100%;
}

.greeting_box_title2 p{
    position: absolute;
    top: 60.5%;
    left: 13%;
    font-size: 2.3vw;
}

.f_l{
    font-size: 2.6vw;
    font-weight: bold;
}

.g_sub{
    font-size: 4.6vw;
    color: #fff;
    text-align: center;
}

/* thanks_cat */

.thanks_cat{
    background-image: url(../images/thanks_back_pc.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.thanks_inner{
    width: 90%;
    padding: 90px 0;
    margin: 0 auto;
    text-align: center;
}

.thanks_box{
    background-color: rgb(243, 244, 239, 0.9);
    padding: 60px;
    color: #0c0b10;
}

.thanks_title h2{
    font-size: 3.4vw;
    font-weight: normal;
    letter-spacing: 0.2em;
}

.thanks_hr{
    color: #333333;
}

.thanks_text span{
    line-height: 1.2;
}

.thanks_text p{
    line-height: 1.8;
    padding-top: 30px;
    font-size: 2vw;
}

.thanks_text span{
    font-weight: bold;
}


.thanks_bt{
    padding-top: 30px;
}

.thanks_bt a{
    padding: 10px 150px 12px;
    background-color: #182649;
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    font-size: 2vw;
    }

.thanks_bt a:hover {
    opacity: 0.7;
}

/* privacy_cat */

.privacy_title_img{
    width: 100%;
}

.privacy_title_img img{
    width: 100%;
}

.privacy_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 4vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.privacy_inner{
    width: 90%;
    padding: 0 0 90px;
    margin: 0 auto;
    text-align: left;
}

/* contact_form_cat */

.contact_note{
    font-family: 'Noto Sans JP';
    padding: 0.8vw 8vw 0 0;
}

.contact_form_cat{
    padding: 0 0 30px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    background-color: #fff;
}

.contact_form_inner{
    width: 100%;
}

.container {
    width: 90%;
    max-width: 600px;
    margin: 30px auto;
    padding: 2rem;
    color: #333;
    line-height: 1;
}

.form_text {
    padding: 0 0 0;
    line-height: 1.6;
}

.form_text h3 {
    text-align: center;
    font-weight: normal;
    font-size: 1.8em;
    padding-bottom: 20px;
    color: #333;
}

.form_text p{
    text-align: center;
    font-weight: normal;
    color: #333;
    font-size: 0.9em;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-top: 12px;
}

input, textarea {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.submit-wrapper {
    text-align: center;
  }
  

/* company_cat */

.company_title_img{
    width: 100%;
}

.company_title_img img{
    width: 100%;
}

.company_inner{
    width: 90%;
    padding: 0 0 50px;
    margin: 0 auto;
}

.company_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 4vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.company-info {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .company-info th,
  .company-info td {
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .company-info th {
    background-color: #565656;
    color: #ffffff;
    font-weight: bold;
    width: 30%;
    text-align: center;
  }

/* footer */
footer{
	padding:40px 0 20px;
	text-align: left;
	width:100%;
    line-height: 1.3;
    color: #fff;
}

.footer_inner{
    width: 94%;
	margin:0 auto;
    display: block;
    text-align: center;
}

footer h2{
width: 200px;
}
footer h2 img{
width: 100%;
}

.f_navi{
margin: 45px 0;
font-size: 0.8em;
padding: 0;
line-height: 1.8;
}

.copy{
text-align: center;
font-size: 0.65em;
margin: 40px 0 0;
}

footer a,
footer a:link,
footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	color: #ccc;
	text-decoration:none;
}


}



/*ここからタブレット用（600px～900px）環境の設定
---------------------------------------------------------------------------*/
@media (min-width:600px) and (max-width:900px) {
    body {
        font-size: 1.6rem;
        line-height: 1.7;
        background-image: none;
    }

    /* 共通 */
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }

    .banner_pc {
        display: none;
    }

    .banner_sp {
        display: block;
    }

    .pc-tab-only {
        display: inline;
    }

    .tab-only {
        display: block;
    }

    .sp-only{
        display: none;
    }

    .pcbr {
        display: none;
    }

    .tb-only{
        display: inline;
    }

    .tbbr {
        display: inline;
    }

    .spbr {
        display: none;
    }

/* ヘッダー */

 #header_sp {
    width: 100%;
    margin: 0 auto;
    z-index: 10;
}

.logo_sp{
    width: 25%;
    margin-top: 0;
    display: block;
}

.logo_sp h1{
    padding: 10px 0 10px 20px;
    margin: auto;
}

.logo_sp img{
    width: 100%;
    padding: 0;
}

#header_pc{
    display: none;
}

#header_sp {
    display: block;
}  

.nav-menu {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    height: 100%;
    background-color: #182649;    
    transition: 0.6s;
    z-index: 999;
  }

 .btn {
    position: fixed;
    top: 15px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}  


/* MAIN */
.contents_main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* .follow-image {
    position: absolute;
    top: 50%;
    left: 50%;
} */

.vertical-stripe {
    background-color: unset;
  }

.vertical-stripe2 {
    background-color: unset;
  }  
  
  .content {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #ffffff;
  }

  .content h1 {
    font-size: 2.4em;
    font-weight: normal;
    text-align: center;
    transform: translateX(10px);
  }

  .fv_title {
    text-align: center;    
  }

  .follow-image {
    width: 80%;
  }
  
  .scroll-arrow {
    display: flex;
    position: absolute;
    top: 65%;
    left: 20px;
    height: 100%;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
  }
  
  .arrow-text {
    font-size: 14px;
    margin-bottom: 5px;
    color: #ffffff;
  }

/* brand_main */  

  .brand_main {
    background-image: url(../images/brand_main_back_sp.jpg);
    background-repeat: no-repeat;
    width: 100%;
    background-position: top right 20%;
    background-size: cover;
    height: auto;
    position: relative;
}

.brand_main_in{
    width: 85%;
    margin: auto;
    text-align: left;
    padding: 70px 0;
}

.brand_next_area {
    display: flex;
}

.brand_next a{    
    padding: 25px 0 0;
    font-size: 1.2em;
    text-align: left;
    color: #fff;
}

.next_btn {
    padding-left: 10px;
    margin-top: -5px;
}
  
.uline {
    width: 100%;
} 

.uline img {
    width: 100%;
}

.brand_main_title p{
    font-size: 1em;
}

.brand_main_title h3{
     font-size: 1.8em;
     padding-top: 0;     
}

.brand_main_text p,.brand_main_text2 p{
    font-size: 1.2em;
}


/* voice_cat */  
  
.voice_cat {
    background-image: url(../images/voice_back_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    height: 206vw;
}

.voice_cat_in {
    width: 90%;
    padding: 10vw 0 0;
}

.voice_top{
    display: flex;
    font-size: 0.9em;
}

.voice_left{
    line-height: 1.6;
    width: 35%;
}

.voice_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 1.8em;
}

.voice_left p{
    font-size: 0.9em;
    color: #990006;
}

.voice_right{
    font-family: 'Noto Sans JP';
    padding: 2px 0 0 1vw;
    line-height: 1.3;
    font-size: 1.1em;
    width: 65%;
}

.slider-container {
    max-width: 1720px;
    margin: 0 auto 0;    
}

.slider1 {
    position: relative;
    overflow: hidden;
    height: 160vw;
  }

.case{
    width: 90%;
    margin: auto;
}

.case img{
    width: 95%;
    margin: auto;
}

.case_text {
    width: 85%;
    position: absolute;
    top: 51%;
    left: 8%;
}

.case_num{
    font-size: 7vw;
}

.case_owner{
    font-size: 3.8vw;
    padding-top: 0;
}

.case_voice {
    padding-top: 1.1em;
    font-size: 1em;
}

.voice_bottom{
    width: 100%;
    margin: auto;
}

.prev-button, .next-button {
    position: absolute;
    top: 15%;
    padding: 3px 8px;
}

.voice_cat {
    background-image: url(../images/voice_back_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    height: 160vw;
}

.voice_cat_in {
    width: 90%;
    padding: 10vw 0 0;
}

.voice_top{
    display: flex;
    font-size: 0.9em;
}

.voice_left{
    line-height: 1.6;
    width: 35%;
}

.voice_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 1.8em;
}

.voice_left p{
    font-size: 0.9em;
    color: #990006;
}

.voice_right{
    font-family: 'Noto Sans JP';
    padding: 2px 0 0 1vw;
    line-height: 1.3;
    font-size: 1.1em;
    width: 65%;
}

.slider-container {
    max-width: 1720px;
    margin: 0 auto 0;    
}

.slider1 {
    position: relative;
    overflow: hidden;
    height: 110vw;
  }

.case{
    width: 90%;
    margin: auto;
}

.case img{
    width: 90%;
    margin: auto;
}

.case_text {
    width: 80%;
    position: absolute;
    top: 55%;
    left: 11%;
}

.case_num{
    font-size: 5vw;
}

.case_owner{
    font-size: 3vw;
    padding-top: 0;
}

.case_voice {
    padding-top: 2.2vw;
    font-size: 1.9vw;
}

.voice_bottom{
    width: 90%;
    margin: -20px auto 0;
}

.prev-button, .next-button {
    position: absolute;
    top: 15%;
    padding: 3px 8px;
}

/* works_cat */
.works_cat_in{
    width: 90%;
    padding: 70px 0 0;
}

.works_top{
    display: flex;
    font-size: 0.9em;
}

.works_left{
    width: 30%;
    line-height: 1.6;
}

.works_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 1.8em;
}

.works_left p{
    font-size: 0.9em;
    color: #990006;
}

.works_right{
    font-family: 'Noto Sans JP';
    padding: 2px 0 0 1vw;
    line-height: 1.3;
    font-size: 1.1em;
    width: 70%;
}

.uline4{
     padding: 15px 0 10px;
}

.uline4 img{
    width: 100%;
}

.works_inner{
    width: 90%;
    padding: 0 0 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.works_box {
    width: calc(50% - 20px);
    display: flex;
    justify-content: center;
    text-align: center;
}

.works_text {
    text-align: left;
    padding: 30px 0;
}

.works_text_02 {
    font-size: 3.3vw;
    padding: 15px 0;
}

.works_text_03 {
    font-size: 1.1em;
    padding: 15px 0;
}


/* about_us_cat */
.about_us_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
}

.about_us_inner {
    width: 90%;
    padding: 40px 0;
}
 
.about_us_top{
    padding: 0 0 0 0;
}

.about_us_text{
    padding: 0 0 30px;
    font-size: 1.2em;
}

.about_us_left {
    line-height: 1.8;
}

.about_us_left h2{
    font-size: 1.8em;
}

.uline2{
    margin: auto;
}

.uline2 img{
    width: 100%;
}

.about_us_center {
    width: 100%;
    margin: auto;
}

.about_us_text_box{
    background-color: #fff;
    display: block;
    position: relative;
    margin-bottom: 30px;
}

.about_us_img{
    width: 100%;
}

.about_us_img img{
    width: 100%;
}

.about_us_text_cat{
    width: 100%;
    background-color: #fff;
    text-align: left;
    line-height: 1.8;
    padding: 10px 0 0 10px;
    color: #182649;
    font-weight: bold;
    box-sizing: border-box;
}

.about_us_text_cat {
    width: 100%;
    background-color: #fff;
    text-align: left;
    line-height: 2.4;
    padding: 30px 20px 40px 40px;
    font-size: 3.4vw;
    box-sizing: border-box;
}

.next_btn2 {
    position: absolute;
    top: 75%;
    right: 5%;
}

.about_us_text_cat h3{
    font-size: 5vw;
}

.about_us_text_cat p{
    font-family: 'Noto Sans JP';
    font-size: 2.8vw;
}

.round-button2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #182649;
    color: #fff;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .next_arrow2{
    display: block;
    font-weight: bold;
    -webkit-text-stroke: 1px #ffffff;
  }  
  

  .round-button2:hover {
    background-color: #ababab;
  }

/* contact_cat */

.contact_cat{
    padding: 30px 0;
}

.contact_cat_in{
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
}

.contact_cnt{
    display: block;
    padding: 20px 0 50px;
}

.contact_cat_img{
    position: absolute;
    bottom: 0;
    left: 0;
}

.contact_cat_title{
    padding: 0;
}

.contact_text{
    padding: 0 0 30px;
    font-size: 1em;
    line-height: 1.6;
}

.contact_cat_title h4{
    color: #fff;
    padding: 30px 0 10px;
    font-size: 1.8em;
    text-align: center;
    font-weight: normal;
}

.contact_cat_tel{
    color: #fff;
    padding: 0 0 0 0;
    font-size: 3em;
    letter-spacing: .2rem;
    font-weight: bold;
}

.contact_cat_tel a{
    text-decoration: none;
}

.contact_cat_tel img{
    padding-top: 2px;
}

/* BRAND_MAIN */
.brand_story_cat{
    background-image: url(../images/brand_story_back_sp.jpg);
    background-repeat: no-repeat;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 156.470%;
    background-size: 100% auto;
    position: relative;
}

.brand_story_title {
    position: absolute;
    top: 10%;
    left: 5%; 
    width: 90%;   
}

.brand_story_title h1 img{
    width: 100%;
}

.brand_story_title2 {
    position: absolute;
    top: 18%;
    left: 6%;        
}

.brand_story_title2 h2{
    font-size: 5vw;
    font-weight: normal;
    color: #fff; 
}

.brand_s_uline {
    position: absolute;
    top: 30%;
    left: 6%;
    width: 80%;
}

.brand_s_uline img{
    width: 100%;
}

.brand_story_text{
    position: absolute;
    top: 33%;
    left: 6%;
}

.brand_story_text p{
    font-size: 2.6vw;
    color: #fff; 
}

.b_f_l{
    font-size: 4.4vw;
}

.c_y{
    color: #feffca;
    font-size: 3vw;
}

/* b_S_construction */

.b_S_construction{
    background-image: url(../images/b_s_construction_sp_01.png);
    background-repeat: no-repeat;
    background-color: #f3f4ef;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 89.565%;
    background-size: 100% auto;
    position: relative;
}

.b_S_c_title{
    position: absolute;
    top: 6%;
    left: 5%;
}

.uline5{
    position: absolute;
    top: 10%;
    left: 5%;
     padding: 25px 0 0;
     width: 90%;
}

.uline5 img{
    width: 100%;
}

.b_S_c_title h3{
    font-size: 3.8vw;
    font-weight: normal;
}

.b_S_c_text{
    position: absolute;
    top: 15.5%;
    left: 5%;
    font-size: 2.2vw;
    line-height: 1.4;
    width: 90%;
}

.b_S_c_text span{
    font-weight: bold;
}

.b_S_c_textbox{
    font-size: 2.6vw;
}

.b_S_c_textbox span{
    font-weight: bold;
    font-size: 3vw;
}

.b_S_c_textbox_title{
    color: #fff;
    font-size: 2.6vw;
    position: absolute;
    top: 32%;
    left: 8%;
    letter-spacing: 0.1em;
}

.b_S_c_textbox_01{
    position: absolute;
    top: 40.5%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_02{
    position: absolute;
    top: 54%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_03{
    position: absolute;
    top: 67.5%;
    left: 12%;
    line-height: 1.8;
}

.b_S_c_textbox_04 {
    position: absolute;
    top: 80%;
    left: 12%;
    line-height: 1.8;
    font-size: 2.8vw;
}

.b_S_c_under{
    background-color: #f3f4ef;
    padding-bottom: 30px;
}

.b_S_c_under img{
    width: 100%;
}

/* b_S_plan */

.b_S_plan{
    background-image: none;
    background-color: #dce2de;
    height: 70vw;
}

.b_S_p_title{
    position: absolute;
    top: 7%;
    left: 5%;    
}

.uline6{
    position: absolute;
    top: 16%;
    left: 5%;
     padding: 25px 0 0;
     width: 90%;
}

.uline6 img{
    width: 100%;
}

.b_S_p_title h3{
    font-size: 3.8vw;
    font-weight: normal;
}

.b_S_p_text{
    position: absolute;
    top: 25%;
    left: 5%;
    font-size: 2.4vw;
    line-height: 1.4;
    width: 90%;
}

.b_S_p_under{
    background-color: #dce2de;
}

.b_S_p_under img{
    width: 100%;
}

/* greeting_cat */

.greeting_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.greeting_inner{
    width: 100%;
    padding: 90px 0;
    margin: 0 auto;
    text-align: left;
}

.greeting_box{
    position: relative;
}

.greeting_box_img{
    width: 90%;
    margin: auto;
}

.greeting_box_img img{
    width: 100%;
    margin-bottom: 30px;
}

.greeting_title{
    padding-bottom: 30px;
}

.greeting_title h2{
    font-size: 5vw;
    color: #fff;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.greeting_box_title h3{
    position: absolute;
    top: 3%;
    left: 14%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.uline_greeting {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
}

.uline_greeting img {
    width: 100%;
}

.greeting_box_title p{
    position: absolute;
    top: 10%;
    left: 14%;
    font-size: 2.6vw;
}

.greeting_box_title2 h3{
    position: absolute;
    top: 53%;
    left: 14%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.uline_greeting2 {
    position: absolute;
    top: 58%;
    left: 10%;
    width: 80%;
}

.uline_greeting2 img {
   width: 100%;
}

.greeting_box_title2 p{
    position: absolute;
    top: 60.5%;
    left: 14%;
    font-size: 2.6vw;
}

.f_l{
    font-size: 2.8vw;
    font-weight: bold;
}

.g_sub{
    font-size: 4.6vw;
    color: #fff;
    text-align: center;
}

/* thanks_cat */

.thanks_cat{
    background-image: url(../images/thanks_back_pc.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.thanks_inner{
    width: 90%;
    padding: 90px 0;
    margin: 0 auto;
    text-align: center;
}

.thanks_box{
    background-color: rgb(243, 244, 239, 0.9);
    padding: 60px;
    color: #0c0b10;
}

.thanks_title h2{
    font-size: 3.4vw;
    font-weight: normal;
    letter-spacing: 0.2em;
}

.thanks_hr{
    color: #333333;
}

.thanks_text span{
    line-height: 1.2;
}

.thanks_text p{
    line-height: 1.8;
    padding-top: 30px;
    font-size: 2vw;
}

.thanks_text span{
    font-weight: bold;
}


.thanks_bt{
    padding-top: 30px;
}

.thanks_bt a{
    padding: 10px 150px 12px;
    background-color: #182649;
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    font-size: 2vw;
    }

.thanks_bt a:hover {
    opacity: 0.7;
}

/* privacy_cat */

.privacy_title_img{
    width: 100%;
}

.privacy_title_img img{
    width: 100%;
}

.privacy_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 4vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.privacy_inner{
    width: 90%;
    padding: 0 0 90px;
    margin: 0 auto;
    text-align: left;
}

/* contact_form_cat */

.contact_note{
    font-family: 'Noto Sans JP';
    padding: 0.8vw 8vw 0 0;
}

.contact_form_cat{
    padding: 0 0 30px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    background-color: #fff;
}

.contact_form_inner{
    width: 100%;
}

.container {
    width: 90%;
    max-width: 600px;
    margin: 30px auto;
    padding: 2rem;
    color: #333;
    line-height: 1;
}

.form_text {
    padding: 0 0 0;
    line-height: 1.6;
}

.form_text h3 {
    text-align: center;
    font-weight: normal;
    font-size: 1.8em;
    padding-bottom: 20px;
    color: #333;
}

.form_text p{
    text-align: center;
    font-weight: normal;
    color: #333;
    font-size: 0.9em;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-top: 12px;
}

input, textarea {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.submit-wrapper {
    text-align: center;
  }
  

/* company_cat */

.company_title_img{
    width: 100%;
}

.company_title_img img{
    width: 100%;
}

.company_inner{
    width: 90%;
    padding: 0 0 50px;
    margin: 0 auto;
}

.company_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 4vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.company-info {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .company-info th,
  .company-info td {
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .company-info th {
    background-color: #565656;
    color: #ffffff;
    font-weight: bold;
    width: 30%;
    text-align: center;
  }

/* footer */
footer{
	padding:40px 0 20px;
	text-align: left;
	width:100%;
    line-height: 1.3;
    color: #fff;
}

.footer_inner{
    width: 94%;
	margin:0 auto;
    display: block;
    text-align: center;
}

footer h2{
width: 200px;
}
footer h2 img{
width: 100%;
}

.f_navi{
margin: 45px 0;
font-size: 0.8em;
padding: 0;
line-height: 1.8;
}

.copy{
text-align: center;
font-size: 0.65em;
margin: 40px 0 0;
}

footer a,
footer a:link,
footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	color: #ccc;
	text-decoration:none;
}

  
}

/*ここからスマートフォン用（599px以下）環境の設定
---------------------------------------------------------------------------*/
@media only screen and (max-width:599px) {
    body {
        font-size: 1.4rem;
        background-image: none;
        line-height: 1.7;
        margin: 0 auto 0;
    }

    /* 共通 */
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }

    .banner_pc {
        display: none;
    }

    .banner_sp {
        display: block;
    }

    .pc-tab-only {
        display: none;
    }

    .tab-only {
        display: none;
    }    

    .sp-only{
        display: block;
    }

    .pcbr {
        display: none;
    }

    .tb-only{
        display: none;
    }

    .tbbr {
        display: inline;
    }

    .spbr {
        display: inline;
    }

    .btn-line1::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #fff;
        transform: translateY(-10px);
    }

    .btn-line1::after {
        content: "menu";
        display: block;
        width: 100%;
        text-align: center;
        transform: translateY(6px);
        color: #fff;
    }

    #header_pc1 {
        padding: 0; 
    }
    
    .logo_sp{
        width: 30%;
        margin-top: 0;
        display: block;
    }
    
    .logo_sp h1{
        padding: 10px 0 10px 20px;
        margin: auto;
    }
    
    .logo_sp img{
        width: 100%;
        padding: 0;
    }

    .btn {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        font-size: 2vw;
    }
    
      /***** 真ん中のバーガー線 *****/
  .btn-line {
    /* 線の長さと高さ */
    width: 100%;
    height: 3px;
    /* バーガー線の色 */
    background-color: #fff;
    /* バーガー線の位置基準として設定 */
    position: relative;
    transition: .2s;
  }
  
  /***** 上下のバーガー線 *****/
  .btn-line::before,
  .btn-line::after {
    /* 基準線と同じ大きさと色 */
    position: absolute;
    transition: .5s;
  }
  
  
  .btn-line::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* 上の線の位置 */
    
    transform: translateY(-12px);
      }
  
  
  .btn-line::after {
    content: "menu";
    /* 下の線の位置 */
    display: block;
    width: 100%;
    text-align: center;
    transform: translateY(6px);
    color: #fff;
  }
  
  /***** メニューオープン時 *****/
  .btn-line.open {
    transition: .5s;
  }
  
  .btn-line.open::before {
    content: "";
    transform: translateY(0);
  }
  
  .btn-line.open::after {
    content: "close";
    color: #fff;
  }
    
    #header_pc {
        display: none;
    }
    
    #header_sp {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -70vw;
        width: 70vw;
        height: 100%;
        background-color: #182649;
        transition: 0.6s;
        z-index:999;
    }

    .nav-menu li {
        padding: 10px 0;
        font-size: 4vw;
    }

    /* SPナビ */
    #top_fix {
        display: block;
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 1000;
    }

    #nav_sp li {
        float: left;
        width: 20%;
    }

    #nav_sp li img {
        width: 100%;
    }

    
/* MAIN */
.contents_main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.vertical-stripe {
    background-color: unset;
  }

.vertical-stripe2 {
    background-color: unset;
  } 
  
  /* .follow-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 100;
    transition: opacity 0.3s ease;
  } */
  
  .content {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #ffffff;
    width: 100%;
  }

  .content h1 {
    font-size: 7.6vw;
    font-weight: normal;
    text-align: center;
    transform: translateX(10px);
    line-height: 1.4;
  }

  .fv_title {
    text-align: center;    
  }

  .follow-image {
    width: 90%;
  }
  
  .follow-image.hidden {
    opacity: 0;
    pointer-events: none;
  }

  .scroll-arrow {
    display: flex;
    position: absolute;
    top: 70%;
    left: 20px;
    height: 100%;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
  }
  
  .arrow-text {
    font-size: 2vw;
    margin-bottom: 5px;
    color: #ffffff;
  }

/* brand_main */  

 .brand_main {
    background-image: url(../images/brand_main_back_sp.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 280vw;
    background-position: top right;
    background-size: cover;
    position: relative;
} 

.brand_main_in{
    width: 85%;
    padding: 12vw 0;
} 

.brand_main_title h3{
    padding: 0 0;
     font-size: 4.8vw;     
}

.brand_main_title p{
    font-size: 2.4vw;
    letter-spacing: 0.1em;
    padding: 2vw 0 0;
}

.uline {
    width: 100%;
    padding: 3vw 0 0;
} 

.uline img {
    width: 100%;
}

.brand_main_text p,.brand_main_text2 p{
    padding: 0 0;
    font-size: 3.4vw;
    line-height: 2;
}

.brand_next_area {
    display: flex;
    padding: 6vw 0;
}

.brand_next a{    
    padding: 4vw 0 0;
    font-size: 3.4vw;
    text-align: left;
    color: #fff;
}

.round-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    color: #182649;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.next_btn {
    padding-left: 10px;
    margin-top: -5px;
}
  
/* voice_cat */  
  
.voice_cat {
    background-image: url(../images/voice_back_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250vw;
    position: relative;
}

.voice_uline{
    padding: 10px 0 0 0;
}

.voice_uline img{
    width: 100%;
}

.voice_cat_in {
    width: 90%;
    padding: 40px 0 0;
}

.voice_top{
    display: block;
    justify-content: center;
    font-size: 0.9em;
}

.voice_left{
    line-height: 1.6;
    width: 100%;
}

.voice_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 5vw;
}

.voice_left p{
    font-size: 2.4vw;
    color: #990006;
}

.voice_right{
    font-family: 'Noto Sans JP';
    padding: 10px 0 0 1vw;
    line-height: 1.3;
    font-size: 3.1vw;
    width: 94%;
}

.slider-container {    
    max-width: 1720px;
    margin: 0 auto 0;
  }
  
  .slider1 {
    position: relative;
    height: 180vw;
    overflow: hidden;
  }
  
  .slide1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  
  .slide1.active {
    opacity: 1;
  }

.case{
    width: 90%;
    margin: auto;
}

.case img{
    width: 100%;
}

.case_text {
    width: 85%;
    position: absolute;
    top: 42%;
    left: 7%;
}

.case_num{
    font-size: 8vw;
}

.case_owner{
    font-size: 5vw;
    padding-top: 0;
}

.case_voice {
    padding-top: 2vw;
    font-size: 3.4vw;
}

.voice_bottom{
    width: 100%;
    /* position: absolute;
    top: 13%; */
}

.prev-button, .next-button {
    position: absolute;
    top: 35%;
    padding: 3px 8px;
}

/* works_cat */

.works_cat_in{
    width: 90%;
    padding: 40px 0 5px;
}

.works_inner{
    width: 94%;
}

.uline4{
     padding: 5px 0 10px;
     width: 100%;
}

.uline4 img{
    width: 100%;
}

.works_top{
    display: block;
    font-size: 0.9em;
}

.works_left{
    width: 100%;
    line-height: 1.8;
    padding-bottom: 0;
}

.works_left h2{
    color: #182649; 
    letter-spacing: 0.2em;
    font-size: 5vw;
}

.works_left p{
    font-size: 2.4vw;
    color: #990006;
}

.works_right{
    width: 56%;
    font-family: 'Noto Sans JP';
    line-height: 1.2;
    align-self: center;
    padding: 10px 0;
    font-size: 3.1vw;
    width: 94%;
}

.works_box {
    width: 90vw;
  margin: auto;
}

.img-container {
    margin: 0 30px;
}

.works_text{
    text-align: left;
    padding: 10px 30px 10px;
}

.works_text_01{
    font-size: 3.6vw;
    font-family: 'Noto Sans JP';
}

.works_text_02{
    font-size: 4.6vw;
    padding: 10px 0;
}

.works_text_03{
    font-size: 3.4vw;
    font-family: 'Noto Sans JP';
}

/* about_us_cat */
.about_us_cat{
    background-image: url(../images/about_us_cat_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
}

.about_us_inner {
    width: 100%;
    padding: 40px 0;
}

.about_us_center {
    width: 90%;
    margin: auto;
}

.about_us_top{
    padding: 0 0 0 5vw;
}

.about_us_text_cat h3{
    font-size: 6vw;
}

.about_us_text{
    padding: 0 0 30px;
    font-size: 3.4vw;
    line-height: 1.7;
}

.about_us_left {
    width: 100%;
}

.about_us_left h2{
    line-height: 1.6;
    font-size: 5vw;
}

.round-button2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #182649;
    color: #fff;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.uline2{
    width: 90%;
    margin: auto;
    padding: 2vw 0 0 0;
}

.uline2 img{
    width: 100%;
}

.about_us_center {
    width: 90%;
    margin: auto;
}

.about_us_text_box{
    background-color: #fff;
    display: flex;
    position: relative;
    margin-bottom: 60px;
}

.about_us_text_box {
    display: block;
    position: relative;
    margin-bottom: 30px;
}

.about_us_img {
    width: 100%;
}

.about_us_img img{
    width: 100%;
}

.about_us_text_cat {
    width: 100%;
    background-color: #fff;
    text-align: left;
    line-height: 2.4;
    padding: 30px 20px 40px 40px;
    font-size: 3.4vw;
    box-sizing: border-box;
}

.next_btn2 {
    position: absolute;
    top: 75%;
    right: 5%;
}


/* contact_cat */
.contact_cat{
    background-image: url(../images/contact_back_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    padding: 0;
    position: relative;
}

.contact_cat_in{
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
}

.uline3 {
    width: 100%;
    padding-top: 20px;
}

.contact_text{
   font-size: 2.6vw;
   padding: 0 0 20px 0;
}

.contact_cnt{
    display: block;
    padding: 0 0 50px;
}

.contact_cat_img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
}

.contact_cat_img img{
    width: 100%;
}

.contact_cat_title{
    padding: 10vw 0 0 0;
}

.contact_cat_title h4{
    color: #fff;
    padding: 10px 0;
    margin-right: 0;
    font-size: 5vw;
    line-height: 1.4;
    text-align: center;
    font-weight: normal;
}

.contact_cat_tel{
    color: #fff;
    padding: 0;
    font-size: 7vw;
    letter-spacing: .2rem;
    font-weight: bold;
    width: 100%;
    padding: 0;
    text-decoration: none;
    line-height: 1.6;
}

.contact_cat_tel a{
    text-decoration: none;
}

.contact_cat_mail a {
    padding: 20px 40px;
    background-color: #84161c;
    display: inline-block;
    color: #fff;
    font-family: 'Noto Sans JP';
    font-size: 3vw;
    font-weight: bold;
}


/* BRAND_MAIN */
.brand_story_cat{
    background-image: url(../images/brand_story_back_sp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: unset;
    margin: auto;
    width: 100%;
    height: 180vw;
    padding: 12vw 0 10vw;
}

.brand_story_title {
    position: unset;
    width: 90%; 
    margin: auto;
    padding: 40px 0 0;  
}

.brand_story_title h1 img{
    width: 100%;
}

.brand_story_title2 {
    position: unset;
    width: 90%;
    text-align: left;
    margin: auto;
    padding-top: 20px;
}

.brand_story_title2 h2{
    font-size: 6vw;
    font-weight: normal;
    color: #fff; 
}

.brand_s_uline {
    position: unset;
    width: 90%;
    margin: auto;
    padding-top: 20px;
}

.brand_s_uline img{
    width: 100%;
}

.brand_story_text{
    position: unset;
    width: 90%;
    margin: auto;
    padding-top: 0;
    text-align: left;
}

.brand_story_text p{
    font-size: 3.4vw;
    color: #fff; 
}

.b_f_l{
    font-size: 6vw;
}

.c_y{
    color: #feffca;
    font-size: 3.6vw;
}

/* b_S_construction */

.b_S_construction{
    background-image: none;
    margin: auto;
    padding: unset;
    width: 90%;
    position: unset;
}

.b_S_c_title{
    position: unset;

}

.uline5{
    position: unset;
}

.uline5 img{
    width: 100%;
}

.b_S_c_title h3{
    font-size: 5vw;
    font-weight: normal;
    padding: 50px 0 10px 0;
}

.b_S_c_text{
    position: unset;
    font-size: 3.4vw;
    line-height: 1.6;
    padding: 0 0 25px 0;
}

.b_S_c_text span{
    font-weight: bold;
}

.b_S_c_textbox{
    font-size: 3.4vw;
    position: relative;
}

.b_S_c_textbox img{
    width: 100%;
}

.b_S_c_textbox span{
    font-weight: bold;
    font-size: 3.8vw;
}

.b_S_c_textbox_title{
    color: #fff;
    font-size: 4vw;
    position: absolute;
    top: 1%;
    left: 6%;
    letter-spacing: 0.1em;
}

.b_S_c_textbox_01{
    position: absolute;
    top: 16.5%;
    left: 12%;
    line-height: 1.4;
}

.b_S_c_textbox_02{
    position: absolute;
    top: 35.5%;
    left: 12%;
    line-height: 1.4;
}

.b_S_c_textbox_03{
    position: absolute;
    top: 54.7%;
    left: 12%;
    line-height: 1.4;
}

.b_S_c_textbox_04{
    position: absolute;
    top: 75%;
    left: 12%;
    line-height: 1.6;
    font-size: 3.8vw;
}

.b_S_c_under{
    background-color: #f3f4ef;
    padding-bottom: 30px;
}

.b_S_c_under img{
    width: 100%;
}

/* b_S_plan */

.b_S_plan{
    background-image: none;
    background-color: #dce2de;
    height: 160vw;
    position: relative;
}

.b_S_p_title{
    position: absolute;
    top: 5%;
    left: 5%;    
}

.uline6{
    position: absolute;
    top: 13%;
    left: 5%;
     padding: 25px 0 0;
     width: 90%;
}

.uline6 img{
    width: 100%;
}

.b_S_p_title h3{
    font-size: 5vw;
    font-weight: normal;
}

.b_S_p_text{
    position: absolute;
    top: 18%;
    left: 5%;
    font-size: 3.4vw;
    line-height: 1.6;
    padding-right: 20px;
}

.b_S_p_under{
    background-color: #dce2de;
}

.b_S_p_under img{
    width: 100%;
}

/* greeting_cat */

.greeting_cat{
    background-image: url(../images/about_us_cat.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.greeting_inner{
    width: 100%;
    padding: 50px 0 40px;
    margin: 0 auto;
    text-align: left;
}

.greeting_box{
    position: relative;
}

.greeting_box_img{
    width: 90%;
    margin: auto;
}

.greeting_box_img img{
    width: 100%;
    margin-bottom: 30px;
}

.greeting_title{
    padding-bottom: 30px;
}

.greeting_title h2{
    font-size: 5vw;
    color: #fff;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.uline_greeting{
    position: absolute;
    top: 7%;
    left: 10%;
    width: 80%;
}

.uline_greeting img{
    width: 100%
}

.greeting_box_title h3{
    position: absolute;
    top: 2%;
    left: 10%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.greeting_box_title p{
    position: absolute;
    top: 8.5%;
    left: 9%;
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.greeting_box_title2 h3{
    position: absolute;
    top: 52.5%;
    left: 10%;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.uline_greeting2{
    position: absolute;
    top: 57.5%;
    left: 10%;
    width: 80%;
}

.uline_greeting2 img{
    width: 100%
}

.greeting_box_title2 p{
    position: absolute;
    top: 59%;
    left: 9%;
    font-size: 3.3vw;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.f_l{
    font-size: 3.3vw;
    font-weight: bold;
}

.g_sub{
    font-size: 4.6vw;
    color: #fff;
    text-align: center;
}

/* thanks_cat */

.thanks_cat{
    background-image: url(../images/thanks_back_pc.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.thanks_inner{
    width: 90%;
    padding: 90px 0 50px;
    margin: 0 auto;
    text-align: center;
}

.thanks_box{
    background-color: rgb(243, 244, 239, 0.9);
    padding: 20px;
    color: #0c0b10;
}

.thanks_title h2{
    font-size: 3.4vw;
    font-weight: normal;
    letter-spacing: 0.2em;
}

.thanks_hr{
    color: #333333;
}

.thanks_text span{
    line-height: 1.2;
}

.thanks_text p{
    line-height: 1.8;
    padding-top: 20px;
    font-size: 2.6vw;
}

.thanks_text span{
    font-weight: bold;
}


.thanks_bt{
    padding: 20px 0 10px;
}

.thanks_bt a{
    padding: 10px 20vw 12px;
    background-color: #182649;
    display: inline-block;
    border-radius: 20px;
    color: #fff;
    font-size: 2.6vw;
    }

.thanks_bt a:hover {
    opacity: 0.7;
}

/* privacy_cat */

.privacy_title_img{
    width: 100%;
}

.privacy_title_img img{
    width: 100%;
}

.privacy_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 5vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.privacy_inner{
    width: 90%;
    padding: 0 0 90px;
    margin: 0 auto;
    text-align: left;
}

/* contact_form_cat */

.contact_note{
    font-family: 'Noto Sans JP';
    padding: 0.8vw 8vw 0 0;
}

.contact_form_cat{
    padding: 0 0 30px;
    font-family: 'Noto Sans JP';
    font-weight: normal;
    background-color: #fff;
}

.contact_form_inner{
    width: 100%;
}

.container {
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
    padding: 2rem;
    color: #333;
    line-height: 1;
}

.form_text {
    padding: 0 0 0;
    line-height: 1.6;
}

.form_text h3 {
    text-align: center;
    font-weight: normal;
    font-size: 5vw;
    padding-bottom: 20px;
    color: #333;
}

.form_text p{
    text-align: center;
    font-weight: normal;
    color: #333;
    font-size: 2.4vw;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-top: 12px;
}

input, textarea {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.submit-wrapper {
    text-align: center;
  }
  

/* company_cat */

.company_title_img{
    width: 100%;
}

.company_title_img img{
    width: 100%;
}

.company_inner{
    width: 90%;
    padding: 0 0 40px;
    margin: 0 auto;
}

.company_title h3{
    text-align: center;
    color: #0c0b10;
    font-size: 5vw;
    font-weight: normal;
    margin-top: 0;
    padding-bottom: 30px;
}

.company-info {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .company-info th,
  .company-info td {
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .company-info th {
    background-color: #565656;
    color: #ffffff;
    font-weight: bold;
    width: 30%;
    text-align: center;
  }

/* footer */
footer{
	padding:40px 0;
	text-align: left;
	width:100%;
    line-height: 1.3;
    color: #fff;
}

.footer_inner{
    width: 94%;
	margin:0 auto;
    display: block;
    text-align: center;
}

footer h2{
width: 30%;
padding-left: 30px;
}
footer h2 img{
width: 100%;
}

.f_navi{
margin: 30px 0;
font-size: 2.2vw;
padding: 0;
line-height: 2;
}

.copy{
text-align: center;
font-size: 2vw;margin: 40px 0 0;
}

footer a,
footer a:link,
footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	color: #ccc;
	text-decoration:none;
}

    /* fix_button */

.fix_button {
    position: fixed;
    z-index: 99999; 
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .fix_button img {
    max-width: 100%;
  }

  .fix_button a img{
    position:relative;
	top:0;
  }

  .fix_button a img:hover {
    top:10px;
	transition:0.3s;
  }

  .pagetop {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 15px;
  }
  .pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #3a59a0;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 12px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }
  .pagetop a:hover {
    display: block;
    background-color: #3a59a0;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 12px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }
}

@media (orientation: landscape) and (max-width: 1200px){
    /* .contents_main {
        height: 50vw;
        position: relative;
        overflow: hidden;
    }

    .follow-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 100;
        transition: opacity 0.3s ease;
    } */
    }

/*==================================================
スライダーのためのcss
===================================*/

.slider img {
    height:auto;
}

.slider .slick-slide {
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
    height: auto !important;
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

.slider .slick-track {
    display: flex;
  }


/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slider .slick-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #04325b;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 0;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  }
  .slider .slick-arrow::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #ffffff;
    border-width: 3px 3px 0 0;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
  }
  .slider .slick-next {
    right: 0;
  }
  .slider .slick-prev {
    left: 0;
  }
  .slider .slick-next::before {
    left: 10px;
  }
  .slider .slick-prev::before {
    border-width: 0 0 3px 3px;
    right: 9px;
  }
  

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	padding-bottom:20px;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px;
    font-size: 0;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    background: #bcbcbc;
    border-radius: 50%;
}

.slick-dots .slick-active button{
    background:#0a467d;/*ドットボタンの現在地表示の色*/
}


/* CLEAR FIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/* End hide from IE-mac */




/* ==================================================
   ミライエ住建 TOPページ リニューアル（2026）
================================================== */

/* /////共通///// */
.sp_br{
	display:none;
}

/* ヘッダー */
#header_pc1 {
	position: absolute;
	top: 0;
	left: 106px;
	width: calc(100% - 212px);
	padding: 0;
	background: #fff;
	color: #182649;
	z-index: 100;
    display: block;
}

.top_header_inner {
	width: 100%;
	min-height: 100px;
	display: grid;
	grid-template-columns: 280px minmax(430px, 1fr) auto;
	align-items: center;
	box-sizing: border-box;
	padding: 15px 30px 15px 55px;
	gap: 5px;
}

.top_header_logo h1 {
	width: auto;
	padding: 0;
}

.top_header_logo h1 img {
	display: block;
	width: 150px;
	max-width: 100%;
	padding: 0;
}

.top_header_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 3px;
}

.top_header_nav li {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	line-height: 1;
	white-space: nowrap;
}

.top_header_nav li::after {
	content: "";
	display: block;
	width: 1px;
	height: 20px;
	margin: 0 14px;
	background-color: #333;
}

.top_header_nav li:nth-child(4)::after,
.top_header_nav li:last-child::after {
	display: none;
}

.top_header_nav li:nth-child(5) {
	flex-basis: auto;
}

.top_header_nav a {
	position: relative;
	color: #333;
	text-decoration: none;
}

.top_header_nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 1px;
	background-color: #182649;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s;
}

.top_header_nav a:hover::after {
	transform: scaleX(1);
}

.top_header_contact {
	display: flex;
	align-items: center;
	gap: 28px;
}

.top_header_tel img {
	display: block;
	width: 180px;
	height: auto;
}

.top_header_estimate a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 56px;
	border-radius: 40px;
	background-color: #c51620;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	white-space: nowrap;
	transition: opacity 0.3s;
}

.top_header_estimate a:hover {
	opacity: 0.8;
}

/* ナビ4項目目の後で強制改行 */
.top_header_nav .menu_break {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

.top_header_nav .menu_break::after {
	display: none;
}

/*フロートボタン*/
.floating {
display: none;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background:rgba(255,255,255,.90);
  z-index:99999;
}

.sp_fixed_contact{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:12px;
	padding:15px 17px;
	box-shadow:0 -3px 12px rgba(0,0,0,.12);
	transition:bottom .45s ease;
    z-index:2147483647;
}

.sp_fixed_contact.show{
	bottom:0;
}

.sp_fixed_contact .top_fv_btn{
	flex:1;
	max-width:340px;
	margin:0;
}

.sp_fixed_contact .top_fv_btn{
	height:45px;
	font-size:1.4rem;
}

.sp_fixed_contact .top_fv_mail_icon,
.sp_fixed_contact .top_fv_phone_icon{
	width:22px;
}

/*FV*/
.top_fv {
	position: relative;
	width: 100%;
	min-height: clamp(620px, 45vw, 850px);
	overflow: hidden;
	background-image: url("../images/top_fv_bg_pc.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* ヘッダーをFV背景の上に重ねる */
#header_pc1 {
	background: transparent;
}

.top_header_inner {
	background: transparent;
}

.top_fv_inner{
	position: relative;
	z-index: 2;
	box-sizing: border-box;

	/* 左右の紺帯106pxを避ける */
	margin: 0 106px;

	/* 左右の余白 */
	padding:
		170px
		60px
		60px;

	min-height: 850px;
    
}

.top_fv_content {
	position: relative;
	z-index: 2;
	width: min(48vw, 760px);
}

.top_fv_copy {
	margin: 0;
	color: #182649;
	font-family: serif;
	font-size: clamp(2.8rem, 3vw, 4.8rem);
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: 0.04em;
}

.top_fv_copy span {
	display: block;
	white-space: nowrap;
}

.top_fv_copy strong {
	color: #c04b24;
	font-weight: 500;
}

.top_fv_title {
	margin: clamp(20px, 2vw, 38px) 0 0;
	color: #182649;
	font-family: serif;
	font-size: clamp(4.8rem, 5.2vw, 8rem);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.top_fv_title strong {
	color: #8d0c13;
	font-weight: 500;
}

.top_fv_buttons {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 24px);
	margin-top: clamp(32px, 3vw, 58px);
}

.top_fv_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 0.8vw, 16px);
	height: clamp(56px, 4vw, 74px);
	box-sizing: border-box;
	border-radius: 999px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(1.5rem, 1.25vw, 2.4rem);
	font-weight: 700;
	white-space: nowrap;
	transition: opacity 0.3s;
}

.top_fv_btn:hover {
	opacity: 0.8;
}

.top_fv_btn_contact {
	width: clamp(260px, 19vw, 380px);
	background-color: #c91720;
	color: #fff;
}

.top_fv_btn_tel {
	width: clamp(280px, 20vw, 400px);
	border: 3px solid #182649;
	background-color: #fff;
	color: #111;
    pointer-events:none;
	cursor:default;
}

.top_fv_mail_icon,
.top_fv_phone_icon {
	font-size: 1.3em;
	line-height: 1;
}

.top_fv_points {
	display: flex;
	align-items: stretch;
	margin-top: clamp(32px, 3vw, 58px);
}

.top_fv_points li {
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 0.8vw, 15px);
	min-width: 0;
	padding: 0 clamp(22px, 2vw, 40px);
	border-right: 1px solid #b6bec9;
	color: #111;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(1.5rem, 1.3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.5;
}

.top_fv_points li:first-child {
	padding-left: 0;
}

.top_fv_points li:last-child {
	padding-right: 0;
	border-right: none;
}

.top_fv_check {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(26px, 2vw, 38px);
	height: clamp(26px, 2vw, 38px);
	margin-top: 0.15em;
	border-radius: 50%;
	background-color: #182649;
	color: #fff;
	font-size: clamp(1.4rem, 1vw, 2rem);
	line-height: 1;
}

.top_fv_mail_icon,
.top_fv_phone_icon{
	width:28px;
	height:auto;
	flex-shrink:0;
}

/* =======
   ワイドモニター対応（1920pxで固定）
====== */

.top_visual_wrap{
	position:relative;
	width:100%;
	max-width:1920px;
	margin:0 auto;
	background:#182649;
	overflow:hidden;
}

@media (min-width:1921px){

	body{
		background:#182649;
	}

	#header_pc1{
		width:calc(100% - 212px);
		left:106px;
	}

	.top_fv{
		width:100%;
	}
}


/* フッター */
.top_footer{
	width:100%;
	box-sizing:border-box;
	padding:45px 0 15px;
	background-color:#565656;
	color:#fff;
	font-family:'Noto Sans JP', sans-serif;
	text-align:left;
}

.top_footer_inner{
	display:grid;
	grid-template-columns:360px minmax(0, 1fr);
	gap:80px;
	width:min(1600px, 88%);
	margin:0 auto;
}

.top_footer_company{
	min-width:0;
}

.top_footer_logo{
	width:240px;
	margin:0;
	padding:0;
}

.top_footer_logo img{
	display:block;
	width:100%;
	height:auto;
}

.top_footer_license{
	margin-top:28px;
	font-size:1.7rem;
	font-weight:500;
	line-height:1.65;
}

.top_footer_license p{
	margin:0 0 28px;
}

.top_footer_nav{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:45px;
}

.top_footer_nav_column h3{
	margin:0 0 20px;
	color:#c8c8c8;
	font-size:2.2rem;
	font-weight:700;
	line-height:1.4;
}

.top_footer_nav_column li{
	margin-bottom:11px;
	font-size:1.8rem;
	font-weight:500;
	line-height:1.5;
}

.top_footer a,
.top_footer a:link,
.top_footer a:visited{
	color:#fff;
	text-decoration:none;
	transition:opacity .3s;
}

.top_footer a:hover{
	opacity:.65;
}

.top_footer_copy{
	margin:15px 0 0;
	color:#d4d4d4;
	font-family:'Noto Serif JP', serif;
	font-size:1.3rem;
	text-align:center;
	letter-spacing:.02em;
}

/* サービス */

.top_service{
	width:100%;
	padding:90px 0 100px;
	background-color:#f7f7f7;
	box-sizing:border-box;
}

.top_service_inner{
	width:min(1460px, 85%);
	margin:0 auto;
}

.top_service_heading{
	line-height:1.5;
}

.top_service_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.06em;
}

.top_service_heading p{
	margin-top:3px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.6rem, 1.25vw, 2.2rem);
	font-weight:500;
	letter-spacing:.08em;
}

/* 赤から紺へつながるタイトル下線 */
.top_service_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:15px;
	background-color:#182649;
}

.top_service_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}

.top_service_list{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:24px;
	margin-top:48px;
}

.top_service_card{
	min-width:0;
	background-color:#fff;
	border:2px solid;
	box-sizing:border-box;
}

.top_service_card_link{
	display:flex;
	flex-direction:column;
	height:100%;
	color:#111;
	overflow:hidden;
}

.top_service_image{
	width:100%;
	aspect-ratio:1.48 / 1;
	overflow:hidden;
	background-color:#ddd;
}

.top_service_image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.top_service_card_link:hover .top_service_image img{
	transform:scale(1.05);
}

.top_service_content{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:20px 20px 24px;
	box-sizing:border-box;
}

.top_service_label{
	align-self:flex-start;
	padding:1px 7px 2px;
	border:1px solid currentColor;
	font-family:'Noto Sans JP', sans-serif;
	font-size:1.6rem;
	font-weight:700;
	line-height:1.35;
	letter-spacing:.05em;
}

.top_service_content h3{
	margin-top:10px;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.8rem, 1.45vw, 2.6rem);
	font-weight:700;
	line-height:1.45;
}

.top_service_text{
	margin:42px 0 25px;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.4rem, 1.05vw, 1.9rem);
	font-weight:500;
	line-height:1.65;
}

.top_service_button{
	position:relative;   /* ←追加 */
	display:flex;
	align-items:center;
	justify-content:center;

	width:100%;
	min-height:60px;
	margin-top:auto;
	padding:10px 25px;
	border-radius:999px;
	box-sizing:border-box;

	color:#fff;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.5rem, 1.15vw, 2rem);
	font-weight:700;
	transition:opacity .3s;
}

.top_service_card_link:hover .top_service_button{
	opacity:.8;
}

.top_service_arrow{
	margin-left:auto;
	font-size:.8em;
}

/* 各サービスの色 */
.top_service_card_roof{
	border-color:#c64d29;
}

.top_service_card_roof .top_service_label{
	color:#b92d1d;
}

.top_service_card_roof .top_service_button{
	background-color:#c64d29;
}

.top_service_card_wall{
	border-color:#182649;
}

.top_service_card_wall .top_service_label{
	color:#182649;
}

.top_service_card_wall .top_service_button{
	background-color:#182649;
}

.top_service_card_solar{
	border-color:#c79827;
}

.top_service_card_solar .top_service_label{
	color:#c08d1d;
}

.top_service_card_solar .top_service_button{
	background-color:#c79827;
}

.top_service_card_others{
	border-color:#356948;
}

.top_service_card_others .top_service_label{
	color:#356948;
}

.top_service_card_others .top_service_button{
	background-color:#356948;
}

.top_service_button{
	position:relative;
	justify-content:center;
}

.top_service_button .top_service_arrow{
	position:absolute;
	right:28px;
	margin-left:0 !important;
}

.top_service_button > span:first-child{
	margin:0;
}

/* 選ばれる3つの理由*/

.top_reason{
	position:relative;
	width:100%;
	padding:100px 0 110px;
	box-sizing:border-box;
	background-image:url("../images/top_reason_bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

.top_reason_inner{
	position:relative;
	z-index:2;
	width:min(1460px, 85%);
	margin:0 auto;
}

.top_reason_heading{
	line-height:1.5;
}

.top_reason_heading h2{
	margin:0;
	color:#fff;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.06em;
	text-shadow:0 2px 8px rgba(0,0,0,.15);
}

.top_reason_heading p{
	margin-top:8px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.6rem, 1.25vw, 2.2rem);
	font-weight:600;
	letter-spacing:.08em;
}

.top_reason_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:24px;
	background-color:#182649;
}

.top_reason_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}

.top_reason_list{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:50px;
	margin-top:78px;
	padding:0 20px;
}

.top_reason_card{
	position:relative;
	min-height:425px;
	padding:46px 48px 45px;
	border-radius:15px;
	background-color:#fff;
	box-sizing:border-box;
	box-shadow:0 5px 18px rgba(0,0,0,.12);
}

.top_reason_number{
	position:absolute;
	top:-32px;
	left:-20px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:104px;
	height:104px;
	border-radius:50%;
	background-color:#0d2b64;
	color:#fff;
	font-family:'Noto Serif JP', serif;
	font-size:4rem;
	font-weight:600;
	line-height:1;
	letter-spacing:.05em;
}

.top_reason_card h3{
	margin:0;
    padding-left:55px; /* 追加 */
	color:#102a61;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(2rem, 1.55vw, 2.8rem);
	font-weight:700;
	line-height:1.7;
	letter-spacing:.02em;
}

.top_reason_card_line{
	width:92px;
	height:4px;
	margin-top:27px;
	background-color:#d9dde4;
}

.top_reason_text{
	margin-top:38px;
	color:#222;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.4rem, 1.08vw, 1.9rem);
	font-weight:500;
	line-height:2.15;
}

.reason_pc_br{
	display:block;
}

/* 施工事例 */

.top_works{
	width:100%;
	padding:90px 0 105px;
	background-color:#fff;
	box-sizing:border-box;
}

.top_works_inner{
	width:min(1460px, 85%);
	margin:0 auto;
}

.top_works_heading{
	line-height:1.5;
}

.top_works_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.06em;
}

.top_works_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.6rem, 1.25vw, 2.2rem);
	font-weight:600;
	letter-spacing:.08em;
}

/* タイトル下線 */
.top_works_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:20px;
	background-color:#182649;
}

.top_works_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}

/* カテゴリーボタン */
.top_works_category{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:40px;
	margin-top:28px;
	padding:0 28px;
	box-sizing:border-box;
}

.top_works_category_btn{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:60px;
	padding:10px 48px 10px 25px;
	border-radius:999px;
	box-sizing:border-box;
	color:#fff;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.6rem, 1.25vw, 2.1rem);
	font-weight:700;
	line-height:1.4;
	text-align:center;
	transition:
		opacity .3s,
		transform .3s;
}

.top_works_category_btn:hover{
	opacity:.82;
	transform:translateY(-2px);
}

.top_works_category_arrow{
	position:absolute;
	top:50%;
	right:27px;
	transform:translateY(-50%);
	font-size:.8em;
}

.top_works_category_roof{
	background-color:#c4512e;
}

.top_works_category_wall{
	background-color:#152e68;
}

.top_works_category_solar{
	background-color:#c4962e;
}

.top_works_category_others{
	background-color:#3d7152;
}

/* 施工事例カード */
.top_works_list{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:42px;
	margin-top:18px;
}

.top_works_card{
	min-width:0;
	border:2px solid #dce1e8;
	border-radius:15px;
	background-color:#fff;
	box-sizing:border-box;
	overflow:hidden;
}

.top_works_card_link{
	display:flex;
	flex-direction:column;
	height:100%;
	padding:25px;
	box-sizing:border-box;
	color:#111;
}

.top_works_image{
	width:100%;
	aspect-ratio:1.55 / 1;
	overflow:hidden;
	background-color:#eee;
}

.top_works_image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.top_works_card_link:hover .top_works_image img{
	transform:scale(1.04);
}

.top_works_content{
	flex:1;
	padding-top:18px;
	font-family:'Noto Sans JP', sans-serif;
}

.top_works_label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:82px;
	margin:0;
	padding:5px 14px 6px;
	border-radius:4px;
	box-sizing:border-box;
	color:#fff;
	font-size:clamp(1.4rem, 1.1vw, 1.9rem);
	font-weight:700;
	line-height:1.2;
}

.top_works_label_roof{
	background-color:#c4512e;
}

.top_works_label_wall{
	background-color:#152e68;
}

.top_works_label_solar{
	background-color:#c4962e;
}

.top_works_content h3{
	margin-top:17px;
	color:#111;
	font-size:clamp(1.8rem, 1.5vw, 2.6rem);
	font-weight:700;
	line-height:1.55;
	letter-spacing:.01em;
}

.top_works_detail{
	margin-top:24px;
	color:#222;
	font-size:clamp(1.5rem, 1.25vw, 2.1rem);
	font-weight:500;
	line-height:1.9;
}

/* 対応エリア */

.top_area{
	position:relative;
	width:100%;
	padding:80px 0 100px;
	box-sizing:border-box;
	background-image:url("../images/top_area_bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

.top_area::before{
	content:"";
	position:absolute;
	inset:0;
	background-color:rgba(255,255,255,.18);
	pointer-events:none;
}

.top_area_inner{
	position:relative;
	z-index:2;
	width:min(1460px, 85%);
	margin:0 auto;
}

.top_area_heading{
	line-height:1.5;
}

.top_area_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.06em;
}

.top_area_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.6rem, 1.25vw, 2.2rem);
	font-weight:600;
	letter-spacing:.08em;
}

.top_area_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:20px;
	background-color:#182649;
}

.top_area_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}

.top_area_box{
	margin-top:45px;
	padding:35px 45px;
	box-sizing:border-box;
	background-color:#fff;
	box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.top_area_content{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(420px, .95fr);
	gap:55px;
	align-items:center;
}

.top_area_text{
	min-width:0;
	font-family:'Noto Sans JP', sans-serif;
}

.top_area_text h3{
	position:relative;
	margin:0;
	padding:5px 0 5px 28px;
	color:#102a61;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.4rem, 2vw, 3.6rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.05em;
}

.top_area_text h3::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:6px;
	height:100%;
	background-color:#b3151b;
}

.top_area_description{
	margin-top:30px;
	color:#222;
	font-size:clamp(1.5rem, 1.25vw, 2.1rem);
	font-weight:500;
	line-height:1.75;
}

.top_area_note{
	margin-top:75px;
	color:#777;
	font-size:clamp(1.3rem, 1.05vw, 1.8rem);
	font-weight:400;
	line-height:1.8;
}

.top_area_map{
	width:100%;
	text-align:center;
}

.top_area_map img{
	display:block;
	width:100%;
	max-width:600px;
	height:auto;
	margin:0 auto;
}

/* よくある質問 */

.top_faq{
	width:100%;
	padding:85px 0 100px;
	background-color:#fff;
	box-sizing:border-box;
}

.top_faq_inner{
	width:min(1460px, 85%);
	margin:0 auto;
}

.top_faq_heading{
	line-height:1.5;
}

.top_faq_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.06em;
}

.top_faq_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.6rem, 1.25vw, 2.2rem);
	font-weight:600;
	letter-spacing:.08em;
}

.top_faq_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:20px;
	background-color:#182649;
}

.top_faq_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}

/* CTA */

.top_cta{
	padding:90px 0;
	background:#fff;
    font-family:'Noto Sans JP', sans-serif;
}

.top_cta_inner{
	width:min(1600px,85%);
	margin:0 auto;
	text-align:center;
}

.top_cta_border{
	display:block;
	width:110px;
	height:5px;
	margin:0 auto 35px;
	background:#b30000;
}

.top_cta h2{
	margin:0;
	color:#152e68;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.8rem, 2vw, 3.8rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.05em;
}

.top_cta_text{
	margin:35px auto 0;
	color:#222;
	font-size:clamp(1.7rem,1.2vw,2.2rem);
	font-weight:500;
	line-height:1.9;
}

.top_cta_btn{
	display:flex;
	justify-content:center;
	gap:45px;
	margin-top:65px;
}

.top_cta_btn a{
	display:flex;
	align-items:center;
	justify-content:center;
	height:92px;
	border-radius:999px;
	text-decoration:none;
	box-sizing:border-box;
	transition:.3s;
}

.top_cta_btn a:hover{
	transform:translateY(-3px);
}

.top_cta_mail{
	width:700px;
	background:#bc1c22;
	color:#fff;
}

.top_cta_mail img{
	width:36px;
	margin-right:24px;
}

.top_cta_mail span{
	font-size:2rem;
	font-weight:700;
}

.top_cta_tel{
	width:700px;
	border:4px solid #152e68;
	color:#111;
	background:#fff;
}

.top_cta_tel img{
	width:30px;
	margin-right:20px;
}

.tel_number{
	font-size:3.2rem;
	font-weight:700;
}

.tel_time{
	margin-left:12px;
	font-size:2rem;
	font-weight:700;
}


/*ここからpc（1241px～1860px）環境の設定
------------------------------------------------------------*/
@media (min-width:1241px) and (max-width:1860px) {

/* ヘッダー */
	.top_header_inner {
		grid-template-columns: 230px minmax(400px, 1fr) auto;
		padding: 12px 25px 12px 30px;
		gap: 5px;
	}

	.top_header_logo h1 img {
		width: 150px;
	}

	.top_header_nav li {
		font-size: clamp(1.3rem, 1vw, 1.4rem);
        line-height: 1.2;
	}

	.top_header_nav li::after {
		margin: 0 10px;
	}

	.top_header_contact {
		gap: 18px;
	}

	.top_header_tel img {
		width: clamp(180px, 15vw, 180px);
	}

	.top_header_estimate a {
		width: clamp(150px, 11vw, 160px);
		height: 56px;
		font-size: clamp(1.4rem, 1.2vw, 1.6rem);
	}
    
/*FV*/
	.top_fv {
		min-height: clamp(580px, 66vw, 760px);
	}

	.top_fv::before {
		left: 0;
		right: 0;
		background-position: 58% center;
	}

	.top_fv_inner {
	width: 100%;
    min-height: clamp(580px, 66vw, 760px);
    padding: clamp(190px, 10vh, 180px) 40px 50px;
	}
    


	.top_fv_content {
		width: 53%;
	}

	.top_fv_copy {
		font-size: clamp(2.6rem, 3.5vw, 4.2rem);
	}

	.top_fv_title {
		font-size: clamp(4.2rem, 6vw, 7.2rem);
	}

.top_fv_buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

	.top_fv_btn {
		width: min(100%, 340px);
	}

	.top_fv_points li {
		padding: 0 14px;
		font-size: clamp(1.3rem, 1.5vw, 1.8rem);
	}
    
/*フッター*/
	.top_footer_inner{
		grid-template-columns:300px minmax(0, 1fr);
		gap:55px;
		width:90%;
	}

	.top_footer_logo{
		width:210px;
	}

	.top_footer_license{
		font-size:clamp(1.3rem, 1.1vw, 1.3rem);
	}

	.top_footer_nav{
		gap:30px;
	}

	.top_footer_nav_column h3{
		font-size:clamp(1.3rem, 1.5vw, 1.3rem);
	}

	.top_footer_nav_column li{
		font-size:clamp(1.3rem, 1.2vw, 1.3rem);
	}
    
/* サービス */
	.top_service{
		padding:75px 0 85px;
	}

	.top_service_inner{
		width:85%;
	}

	.top_service_list{
		gap:18px;
		margin-top:40px;
	}

	.top_service_content{
		padding:17px 16px 20px;
	}

	.top_service_label{
		font-size:clamp(1.3rem, 1.1vw, 1.7rem);
	}

	.top_service_content h3{
		font-size:clamp(1.6rem, 1.55vw, 2.2rem);
	}

	.top_service_text{
		margin:32px 0 22px;
		font-size:clamp(1.3rem, 1.15vw, 1.7rem);
	}

	.top_service_button{
		min-height:54px;
		padding:9px 18px;
		font-size:clamp(1.3rem, 1.15vw, 1.8rem);
	}
    
/* 選ばれる3つの理由 */
	.top_reason{
		padding:80px 0 90px;
		background-position:center center;
	}

	.top_reason_inner{
		width:85%;
	}

	.top_reason_list{
		gap:38px;
		margin-top:68px;
		padding:0 15px;
	}

	.top_reason_card{
		min-height:390px;
		padding:42px 35px 38px;
	}

	.top_reason_number{
		top:-30px;
		left:-18px;
		width:92px;
		height:92px;
		font-size:3.5rem;
	}

	.top_reason_card h3{
    padding-left:45px;
		font-size:clamp(1.8rem, 1.7vw, 2.5rem);
	}

	.top_reason_card_line{
		width:80px;
		height:4px;
		margin-top:23px;
	}

	.top_reason_text{
		margin-top:32px;
		font-size:clamp(1.3rem, 1.15vw, 1.7rem);
		line-height:2;
	}
    
/* 施工事例 */
	.top_works{
		padding:75px 0 90px;
	}

	.top_works_inner{
		width:85%;
	}

	.top_works_category{
		gap:32px;
		padding:0 20px;
	}

	.top_works_category_btn{
		min-height:56px;
		font-size:clamp(1.5rem, 1.3vw, 1.9rem);
	}

	.top_works_list{
		gap:34px;
	}

	.top_works_card_link{
		padding:22px;
	}

	.top_works_content h3{
		font-size:clamp(1.7rem, 1.6vw, 2.3rem);
	}

	.top_works_detail{
		font-size:clamp(1.4rem, 1.3vw, 1.9rem);
	}
    
/* 対応エリア */
	.top_area{
		padding:75px 0 90px;
	}

	.top_area_inner{
		width:85%;
	}

	.top_area_box{
		margin-top:38px;
		padding:32px 40px;
	}

	.top_area_content{
		grid-template-columns:minmax(0, 1fr) minmax(380px, .9fr);
		gap:45px;
	}

	.top_area_text h3{
		padding-left:25px;
		font-size:clamp(2.2rem, 2.1vw, 3.2rem);
	}

	.top_area_description{
		margin-top:25px;
		font-size:clamp(1.4rem, 1.3vw, 1.9rem);
	}

	.top_area_note{
		margin-top:60px;
		font-size:clamp(1.3rem, 1.1vw, 1.6rem);
	}

	.top_area_map img{
		max-width:520px;
	}
    
/* よくある質問 */
	.top_faq{
		padding:75px 0 90px;
	}

	.top_faq_inner{
		width:85%;
	}
    
/* CTA */

.top_cta{
	padding:80px 0;
}

.top_cta_inner{
	width:85%;
}

.top_cta_btn{
	gap:35px;
}

.top_cta_btn a{
	height:82px;
}

.top_cta_mail,
.top_cta_tel{
	width:48%;
}

.tel_number{
	font-size:2.8rem;
}

.tel_time{
	font-size:1.8rem;
}
    
}


/*ここから調整用（901px～1240px）環境の設定
---------------------------------------------------------------------------*/
@media (min-width:901px) and (max-width:1240px){

/* ヘッダー */
	/* ヘッダーのナビ・電話・見積りを非表示 */
	.top_header_nav,
	.top_header_contact{
		display:none;
	}

	#header_pc1{
		left:0;
		width:100%;
	}

	.top_header_inner{
		display:block;
		min-height:auto;
		padding:25px 90px 20px 30px;
	}

	.top_header_logo h1 img{
		width:190px;
	}

/* FV */
	.top_fv_inner{
		margin:0;
		padding:170px 40px 50px;
	}

	.top_fv_content{
		width:620px;
		max-width:calc(100% - 40px);
	}

	.top_fv_copy{
		font-size:3.2rem;
	}

	.top_fv_title{
		font-size:6.2rem;
	}

	.top_fv_buttons{
		flex-direction:row;
		flex-wrap:nowrap;
		gap:15px;
	}

	.top_fv_btn_contact,
	.top_fv_btn_tel{
		width:280px;
	}

	.top_fv_points{
		width:620px;
		max-width:100%;
	}

	.top_fv_points li{
		flex:1;
		padding:0 15px;
		font-size:1.5rem;
	}

	.top_fv_points li:first-child{
		padding-left:0;
	}

	.top_fv_points li:last-child{
		padding-right:0;
	}
    
/*フッター*/
	.top_footer{
		padding:55px 0 25px;
	}

	.top_footer_inner{
		display:block;
		width:88%;
	}

	.top_footer_company{
		display:flex;
		align-items:flex-start;
		gap:50px;
	}

	.top_footer_logo{
		flex:0 0 210px;
	}

	.top_footer_license{
		display:flex;
		flex-wrap:wrap;
		gap:15px 40px;
		margin-top:0;
		font-size:1.3rem;
	}

	.top_footer_license p{
		margin:0;
	}

	.top_footer_nav{
		grid-template-columns:repeat(4, 1fr);
		gap:25px;
		margin-top:50px;
	}

	.top_footer_nav_column h3{
		font-size:1.3rem;
	}

	.top_footer_nav_column li{
		font-size:1.3rem;
	}
    
/* サービス */
	.top_service{
		padding:70px 0 80px;
	}

	.top_service_inner{
		width:90%;
	}

	.top_service_heading h2{
		font-size:3.2rem;
	}

	.top_service_heading p{
		font-size:1.8rem;
	}

	.top_service_line{
		margin-top:18px;
	}

	.top_service_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:28px 24px;
		margin-top:38px;
	}

	.top_service_content{
		padding:20px 20px 24px;
	}

	.top_service_label{
		font-size:1.6rem;
	}

	.top_service_content h3{
		font-size:2.2rem;
	}

	.top_service_text{
		margin:30px 0 24px;
		font-size:1.6rem;
	}

	.top_service_button{
		min-height:56px;
		font-size:1.7rem;
	}

/* 選ばれる3つの理由 */
	.top_reason{
		padding:70px 0 80px;
		background-position:center center;
	}

	.top_reason_inner{
		width:90%;
	}

	.top_reason_heading h2{
		font-size:3rem;
	}

	.top_reason_heading p{
		font-size:1.6rem;
	}

	.top_reason_line{
		margin-top:18px;
	}

	.top_reason_list{
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:28px;
		margin-top:65px;
		padding:0 10px;
	}

	.top_reason_card{
		min-height:365px;
		padding:40px 25px 32px;
		border-radius:13px;
	}

	.top_reason_number{
		top:-28px;
		left:-14px;
		width:80px;
		height:80px;
		font-size:3rem;
	}

	.top_reason_card h3{
    padding-left:45px;
		font-size:1.9rem;
		line-height:1.65;
	}

	.top_reason_card_line{
		width:65px;
		height:3px;
		margin-top:20px;
	}

	.top_reason_text{
		margin-top:27px;
		font-size:1.4rem;
		line-height:1.9;
	}

	.reason_pc_br{
		display:none;
	}
    
/* 施工事例 */
	.top_works{
		padding:70px 0 80px;
	}

	.top_works_inner{
		width:85%;
	}

	.top_works_heading h2{
		font-size:3rem;
	}

	.top_works_heading p{
		font-size:1.6rem;
	}

	.top_works_line{
		margin-top:18px;
	}

	.top_works_category{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:16px 24px;
		margin-top:26px;
		padding:0;
	}

	.top_works_category_btn{
		min-height:54px;
		font-size:1.7rem;
	}

	.top_works_list{
		gap:24px;
		margin-top:28px;
	}

	.top_works_card_link{
		padding:18px;
	}

	.top_works_label{
		min-width:70px;
		font-size:1.4rem;
	}

	.top_works_content h3{
		font-size:1.8rem;
	}

	.top_works_detail{
		margin-top:20px;
		font-size:1.4rem;
		line-height:1.8;
	}
    
/* 対応エリア */
	.top_area{
		padding:70px 0 80px;
	}

	.top_area_inner{
		width:90%;
	}

	.top_area_heading h2{
		font-size:3rem;
	}

	.top_area_heading p{
		font-size:1.6rem;
	}

	.top_area_line{
		margin-top:18px;
	}

	.top_area_box{
		margin-top:35px;
		padding:30px 32px;
	}

	.top_area_content{
		grid-template-columns:minmax(0, 1fr) 42%;
		gap:32px;
	}

	.top_area_text h3{
		padding-left:22px;
		font-size:2.5rem;
	}

	.top_area_text h3::before{
		width:5px;
	}

	.top_area_description{
		margin-top:24px;
		font-size:1.5rem;
		line-height:1.75;
	}

	.top_area_note{
		margin-top:45px;
		font-size:1.3rem;
	}

	.top_area_map img{
		max-width:430px;
	}

	.area_pc_br{
		display:none;
	}
    
/* よくある質問 */
	.top_faq{
		padding:70px 0 80px;
	}

	.top_faq_inner{
		width:90%;
	}

	.top_faq_heading h2{
		font-size:3rem;
	}

	.top_faq_heading p{
		font-size:1.6rem;
	}

	.top_faq_line{
		margin-top:18px;
	}
    
/* CTA */

.top_cta{
	padding:70px 0;
}

.top_cta_inner{
	width:90%;
}

.top_cta h2{
	font-size:3rem;
}

.top_cta_text{
	font-size:1.7rem;
}

.top_cta_btn{
	flex-direction:column;
	align-items:center;
	gap:22px;
	margin-top:45px;
}

.top_cta_btn a{
	width:100%;
	max-width:760px;
	height:78px;
}

.tel_number{
	font-size:2.6rem;
}

.tel_time{
	font-size:1.6rem;
}
    
}


/*ここからタブレット用（600px～900px）環境の設定
---------------------------------------------------------------------------*/
@media (min-width:600px) and (max-width:900px){

	/* ヘッダー */
	.top_header_nav,
	.top_header_contact{
		display:none;
	}

	#header_pc1{
		left:0;
		width:100%;
		background:transparent;
	}

	.top_header_inner{
		display:block;
		min-height:auto;
		padding:25px 90px 20px 35px;
	}

	.top_header_logo h1 img{
		width:190px;
	}

/* FV */
	.top_fv{
		min-height:850px;
	}

	.top_fv::before{
		left:0;
		right:0;
		background-position:60% bottom;
		background-size:cover;
	}

	.top_fv_inner{
		min-height:850px;
		margin:0;
		padding:170px 45px 50px;
	}

	.top_fv_content{
		width:620px;
		max-width:100%;
	}

	.top_fv_copy{
		font-size:3.2rem;
		line-height:1.6;
	}

	.top_fv_title{
		margin-top:25px;
		font-size:6rem;
	}

	.top_fv_buttons{
		flex-direction:row;
		flex-wrap:nowrap;
		gap:14px;
		margin-top:35px;
	}

	.top_fv_btn{
		height:62px;
		font-size:1.7rem;
	}

	.top_fv_btn_contact{
		width:290px;
	}

	.top_fv_btn_tel{
		width:290px;
	}

	.top_fv_mail_icon,
	.top_fv_phone_icon{
		width:25px;
	}

	.top_fv_points{
		margin-top:35px;
	}

	.top_fv_points li{
		padding:0 18px;
		font-size:1.55rem;
		line-height:1.45;
	}

	.top_fv_check{
		width:29px;
		height:29px;
		font-size:1.5rem;
	}
    
/*フッター*/
	.top_footer{
		padding:50px 0 25px;
	}

	.top_footer_inner{
		display:block;
		width:88%;
	}

	.top_footer_company{
		display:flex;
		gap:40px;
		align-items:flex-start;
	}

	.top_footer_logo{
		flex:0 0 190px;
	}

	.top_footer_license{
		margin-top:0;
		font-size:1.3rem;
	}

	.top_footer_license p{
		margin-bottom:18px;
	}

	.top_footer_nav{
		grid-template-columns:repeat(2, 1fr);
		gap:35px 50px;
		margin-top:35px;
	}

	.top_footer_nav_column h3{
		margin-bottom:14px;
		font-size:1.8rem;
	}

	.top_footer_nav_column li{
		margin-bottom:8px;
		font-size:1.4rem;
	}

	.top_footer_copy{
		margin-top:45px;
		font-size:1.3rem;
	}

/* サービス */
	.top_service{
		padding:60px 0 70px;
	}

	.top_service_inner{
		width:90%;
	}

	.top_service_heading h2{
		font-size:3rem;
	}

	.top_service_heading p{
		font-size:1.7rem;
	}

	.top_service_line{
		height:3px;
		margin-top:16px;
	}

	.top_service_line::before{
		width:28%;
	}

	.top_service_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:24px 20px;
		margin-top:34px;
	}

	.top_service_content{
		padding:18px 16px 20px;
	}

	.top_service_label{
		font-size:1.4rem;
	}

	.top_service_content h3{
		font-size:2rem;
	}

	.top_service_text{
		margin:25px 0 20px;
		font-size:1.4rem;
	}

	.top_service_button{
		min-height:52px;
		padding:8px 16px;
		font-size:1.5rem;
	}
    
/* 選ばれる3つの理由 */
	.top_reason{
		padding:60px 0 70px;
		background-position:center center;
	}

	.top_reason_inner{
		width:90%;
	}

	.top_reason_heading h2{
		font-size:2.8rem;
		line-height:1.5;
	}

	.top_reason_heading p{
		font-size:1.5rem;
	}

	.top_reason_line{
		height:3px;
		margin-top:16px;
	}

	.top_reason_line::before{
		width:28%;
	}

	.top_reason_list{
		grid-template-columns:1fr;
		gap:55px;
		width:85%;
		margin:65px auto 0;
		padding:0;
	}

	.top_reason_card{
		min-height:auto;
		padding:42px 42px 40px;
		border-radius:14px;
	}

	.top_reason_number{
		top:-27px;
		left:-20px;
		width:82px;
		height:82px;
		font-size:3.1rem;
	}

	.top_reason_card h3{
    padding-left:45px;
		font-size:2.2rem;
		line-height:1.65;
	}

	.top_reason_card_line{
		width:70px;
		height:3px;
		margin-top:20px;
	}

	.top_reason_text{
		margin-top:27px;
		font-size:1.6rem;
		line-height:2;
	}

	.reason_pc_br{
		display:none;
	}
    
/* 施工事例 */
	.top_works{
		padding:60px 0 70px;
	}

	.top_works_inner{
		width:85%;
	}

	.top_works_heading h2{
		font-size:2.8rem;
	}

	.top_works_heading p{
		font-size:1.5rem;
	}

	.top_works_line{
		margin-top:16px;
	}

	.top_works_line::before{
		width:28%;
	}

	.top_works_category{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:15px 18px;
		margin-top:24px;
		padding:0;
	}

	.top_works_category_btn{
		min-height:52px;
		padding-right:42px;
		font-size:1.6rem;
	}

	.top_works_category_arrow{
		right:20px;
	}

	.top_works_list{
		grid-template-columns:1fr;
		gap:25px;
		width:90%;
		margin:30px auto 0;
	}

	.top_works_card_link{
		padding:22px;
	}

	.top_works_image{
		aspect-ratio:1.7 / 1;
	}

	.top_works_label{
		min-width:75px;
		font-size:1.5rem;
	}

	.top_works_content h3{
		font-size:2.1rem;
	}

	.top_works_detail{
		margin-top:20px;
		font-size:1.6rem;
		line-height:1.8;
	}
    
/* 対応エリア */
	.top_area{
		padding:60px 0 70px;
		background-position:center center;
	}

	.top_area_inner{
		width:90%;
	}

	.top_area_heading h2{
		font-size:2.8rem;
	}

	.top_area_heading p{
		font-size:1.5rem;
	}

	.top_area_line{
		margin-top:16px;
	}

	.top_area_line::before{
		width:28%;
	}

	.top_area_box{
		margin-top:32px;
		padding:32px 35px 38px;
	}

	.top_area_content{
		display:flex;
		flex-direction:column;
		gap:30px;
		align-items:stretch;
	}

	.top_area_text h3{
		padding-left:22px;
		font-size:2.5rem;
	}

	.top_area_description{
		margin-top:24px;
		font-size:1.6rem;
		line-height:1.8;
	}

	.top_area_note{
		margin-top:35px;
		font-size:1.4rem;
	}

	.top_area_map{
		width:80%;
		margin:0 auto;
	}

	.top_area_map img{
		max-width:500px;
	}

	.area_pc_br{
		display:none;
	}

/* よくある質問 */
	.top_faq{
		padding:60px 0 70px;
	}

	.top_faq_inner{
		width:90%;
	}

	.top_faq_heading h2{
		font-size:2.8rem;
	}

	.top_faq_heading p{
		font-size:1.5rem;
	}

	.top_faq_line{
		margin-top:16px;
	}

	.top_faq_line::before{
		width:28%;
	}
    
/* CTA */

.top_cta{
	padding:60px 0;
}

.top_cta_inner{
	width:90%;
}

.top_cta_border{
	margin-bottom:28px;
}

.top_cta h2{
	font-size:2.8rem;
}

.top_cta_text{
	font-size:1.6rem;
	line-height:1.8;
}

.top_cta_btn{
	display:flex;
	flex-direction:column;
	gap:20px;
	margin-top:40px;
}

.top_cta_btn a{
	width:100%;
	height:74px;
}

.top_cta_mail span{
	font-size:1.8rem;
}

.tel_number{
	font-size:2.4rem;
}

.tel_time{
	font-size:1.5rem;
}

}



/*ここからスマートフォン用（599px以下）環境の設定
---------------------------------------------------------------------------*/
@media only screen and (max-width:599px){

.sp_br{
		display:block;
	}

/* ヘッダー */
	.top_header_nav,
	.top_header_contact{
		display:none;
	}

	#header_pc1{
		left:0;
		width:100%;
		background:transparent;
	}

	.top_header_inner{
		display:block;
		min-height:auto;
		padding:18px 70px 15px 20px;
	}

	.top_header_logo h1{
		margin:0;
	}

	.top_header_logo h1 img{
		width:130px;
	}

/* FV */
    .contents_main.top_fv{
		height:auto;
		min-height:auto;
	}
	.top_fv{
		min-height:auto;
        background-image:url("../images/top_fv_bg_sp.jpg");
        background-position:center bottom;
		background-size:cover;
	}

	.top_fv_inner{
		min-height:auto;
		margin:0;
		padding:115px 20px 55px;
	}

	.top_fv_content{
		width:100%;
		max-width:none;
	}

	.top_fv_copy{
		font-size:clamp(2.5rem, 8vw, 3.4rem);
		line-height:1.55;
		letter-spacing:0;
        font-weight:600;
	}

	.top_fv_copy span{
		white-space:normal;
	}
	.top_fv_copy strong{
		 font-weight:600;
         
	}

	.top_fv_title{
		margin-top:22px;
		font-size:clamp(3.0rem, 8vw, 3.2rem);
		line-height:1.05;
		white-space:nowrap;
        font-weight:600;
	}

.top_fv_buttons{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:12px;
		margin-top:30px;
	}

	.top_fv_btn{
		width:90%;
		max-width:310px;
		height:58px;
		font-size:1.6rem;
	}

	.top_fv_mail_icon,
	.top_fv_phone_icon{
		width:23px;
	}

	.top_fv_points{
		flex-direction:column;
		align-items:flex-start;
		gap:13px;
		margin-top:28px;
	}

	.top_fv_points li{
		width:100%;
		padding:0;
		border-right:none;
		font-size:1.3rem;
        font-weight:500;
text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,.9),
    0 0 18px rgba(255,255,255,.6);
        align-items:center;
	}

	.top_fv_points li br{
		display:none;
	}

	.top_fv_check{
		width:20px;
		height:20px;
		font-size:1.1rem;
	}
    
    .top_fv_title strong {
	text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,.9),
    0 0 18px rgba(255,255,255,.6);
        align-items:center;
}

.top_fv_btn_tel{
	pointer-events:auto;
	cursor:pointer;
}

	/* 左右の紺帯はスマホでは非表示 */
	.top_fv .vertical-stripe,
	.top_fv .vertical-stripe2{
		display:none;
	}

/*フロートボタン*/
.floating {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background:rgba(255,255,255,.90);
  z-index:99999;
}

.sp_fixed_contact{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:12px;
	padding:15px 17px;
	box-shadow:0 -3px 12px rgba(0,0,0,.12);
	transition:bottom .45s ease;
    z-index:2147483647;
}

.sp_fixed_contact.show{
	bottom:0;
}

.sp_fixed_contact .top_fv_btn{
	flex:1;
	max-width:340px;
	margin:0;
}

.sp_fixed_contact .top_fv_btn{
	height:45px;
	font-size:1.4rem;
}

.sp_fixed_contact .top_fv_mail_icon,
.sp_fixed_contact .top_fv_phone_icon{
	width:22px;
}

/* フッター */
	.top_footer{
		padding:42px 0 45px;
	}

	.top_footer_inner{
		display:block;
		width:88%;
	}

	.top_footer_company{
		display:block;
	}

	.top_footer_logo{
		width:180px;
	}

	.top_footer_license{
		margin-top:24px;
		font-size:1.0rem;
		line-height:1.65;
	}

	.top_footer_license p{
		margin-bottom:22px;
	}

	.top_footer_nav{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:32px 25px;
		margin-top:38px;
	}

	.top_footer_nav_column h3{
		margin-bottom:14px;
		font-size:1.3rem;
	}

	.top_footer_nav_column li{
		margin-bottom:8px;
		font-size:1.25rem;
		line-height:1.55;
	}

	.top_footer_copy{
		margin-top:42px;
		padding:0 15px;
		font-size:1.15rem;
		line-height:1.5;
	}

/* サービス */
	.top_service{
		padding:45px 0 55px;
	}

	.top_service_inner{
		width:90%;
	}

	.top_service_heading h2{
		font-size:5.4vw;
		line-height:1.5;
		letter-spacing:.03em;
	}

	.top_service_heading p{
		margin-top:3px;
		font-size:2.8vw;
	}

	.top_service_line{
		height:3px;
		margin-top:12px;
	}

	.top_service_line::before{
		width:30%;
	}

	.top_service_list{
		grid-template-columns:1fr;
		gap:25px;
		margin-top:28px;
	}

	.top_service_image{
		aspect-ratio:1.6 / 1;
	}

	.top_service_content{
		padding:18px 18px 20px;
	}

	.top_service_label{
		font-size:1.4rem;
	}

	.top_service_content h3{
		margin-top:8px;
		font-size:2rem;
		line-height:1.45;
	}

	.top_service_text{
		margin:22px 0 20px;
		font-size:1.4rem;
		line-height:1.7;
	}

	.top_service_button{
		width:100%;
		min-height:50px;
		padding:8px 20px;
		font-size:1.5rem;
	}

	.service_pc_br{
		display:none;
	}

/* 選ばれる3つの理由 */
	.top_reason{
		padding:48px 0 60px;
		background-position:center center;
		background-size:cover;
	}

	.top_reason_inner{
		width:90%;
	}

	.top_reason_heading h2{
		font-size:5vw;
		line-height:1.55;
		letter-spacing:.03em;
	}

	.top_reason_heading p{
		margin-top:3px;
		font-size:2.6vw;
	}

	.top_reason_line{
		height:3px;
		margin-top:12px;
	}

	.top_reason_line::before{
		width:30%;
	}

	.top_reason_list{
		grid-template-columns:1fr;
		gap:48px;
		width:92%;
		margin:55px auto 0;
		padding:0;
	}

	.top_reason_card{
		min-height:auto;
		padding:28px 25px 30px;
		border-radius:12px;
	}

	.top_reason_number{
		top:-24px;
		left:-16px;
		width:70px;
		height:70px;
		font-size:2.7rem;
	}

	.top_reason_card h3{
    padding-left:35px;
		font-size:1.8rem;
		line-height:1.65;
	}

	.top_reason_card_line{
		width:58px;
		height:3px;
		margin-top:17px;
	}

	.top_reason_text{
		margin-top:23px;
		font-size:1.3rem;
		line-height:1.9;
	}

	.reason_pc_br{
		display:none;
	}
    
/* 施工事例 */
	.top_works{
		padding:48px 0 58px;
	}

	.top_works_inner{
		width:90%;
	}

	.top_works_heading h2{
		font-size:5vw;
		line-height:1.55;
		letter-spacing:.03em;
	}

	.top_works_heading p{
		margin-top:3px;
		font-size:2.6vw;
	}

	.top_works_line{
		height:3px;
		margin-top:12px;
	}

	.top_works_line::before{
		width:30%;
	}

	.top_works_category{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:11px 10px;
		margin-top:22px;
		padding:0;
	}

	.top_works_category_btn{
		min-height:46px;
		padding:7px 24px;
		font-size:1.25rem;
		line-height:1.3;
	}

	.top_works_category_arrow{
		right:13px;
		font-size:.7em;
	}

	.top_works_list{
		grid-template-columns:1fr;
		gap:22px;
		margin-top:25px;
	}

	.top_works_card{
		border-width:1px;
		border-radius:10px;
	}

	.top_works_card_link{
		padding:15px;
	}

	.top_works_image{
		aspect-ratio:1.55 / 1;
	}

	.top_works_content{
		padding-top:14px;
	}

	.top_works_label{
		min-width:62px;
		padding:4px 11px 5px;
		font-size:1.25rem;
	}

	.top_works_content h3{
		margin-top:12px;
		font-size:1.65rem;
		line-height:1.55;
	}

	.top_works_detail{
		margin-top:16px;
		font-size:1.3rem;
		line-height:1.8;
	}
    
/* 対応エリア */
	.top_area{
		padding:48px 0 58px;
		background-position:center center;
	}

	.top_area_inner{
		width:90%;
	}

	.top_area_heading h2{
		font-size:5vw;
		line-height:1.55;
		letter-spacing:.03em;
	}

	.top_area_heading p{
		margin-top:3px;
		font-size:2.6vw;
	}

	.top_area_line{
		height:3px;
		margin-top:12px;
	}

	.top_area_line::before{
		width:30%;
	}

	.top_area_box{
		margin-top:25px;
		padding:25px 20px 28px;
	}

	.top_area_content{
		display:flex;
		flex-direction:column;
		gap:25px;
	}

	.top_area_text h3{
		padding:3px 0 3px 17px;
		font-size:1.9rem;
		line-height:1.55;
		letter-spacing:.02em;
	}

	.top_area_text h3::before{
		width:4px;
	}

	.top_area_description{
		margin-top:20px;
		font-size:1.3rem;
		line-height:1.85;
	}

	.top_area_note{
		margin-top:25px;
		font-size:1.15rem;
		line-height:1.75;
	}

	.top_area_map{
		width:100%;
	}

	.top_area_map img{
		width:100%;
		max-width:380px;
	}

	.area_pc_br{
		display:none;
	}
    
/* よくある質問 */
	.top_faq{
		padding:48px 0 58px;
	}

	.top_faq_inner{
		width:90%;
	}

	.top_faq_heading h2{
		font-size:5vw;
		line-height:1.55;
		letter-spacing:.03em;
	}

	.top_faq_heading p{
		margin-top:3px;
		font-size:2.6vw;
	}

	.top_faq_line{
		height:3px;
		margin-top:12px;
	}

	.top_faq_line::before{
		width:30%;
	}
    
/* CTA */

.top_cta{
	padding:50px 0;
}

.top_cta_inner{
	width:90%;
}

.top_cta_border{
	width:70px;
	height:4px;
	margin-bottom:22px;
}

.top_cta h2{
	font-size:2.2rem;
	line-height:1.6;
    font-weight: bold;
}

.top_cta_text{
	margin-top:22px;
	font-size:1.4rem;
	line-height:1.8;
}

.top_cta_btn{
	display:flex;
	flex-direction:column;
	gap:18px;
	margin-top:35px;
}

.top_cta_btn a{
	width:100%;
	height:64px;
	padding:0 18px;
}

.top_cta_mail img{
	width:26px;
	margin-right:12px;
}

.top_cta_mail span{
	font-size:1.6rem;
}

.top_cta_tel{
	border-width:3px;
}

.top_cta_tel img{
	width:24px;
	margin-right:10px;
}

.tel_number{
	font-size:2rem;
}

.tel_time{
	margin-left:6px;
	font-size:1.2rem;
}

}


/*共通・よくある質問 */
.mts{
margin-top: 40px;
}
.qa{
font-size: 20px;
line-height: 36px;
font-family: 'Noto Sans JP', sans-serif;
}
.qa-list dl {
    position: relative;
    margin: 20px 0 0;
    cursor: pointer;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 30px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: normal;
    background: #ffffff;
    border: 1px solid #ddd;
}
.qa-list dl dt::before {
    font-size: 30px;
    line-height: 36px;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #132556;
}
.qa-list dl dd::before {
    font-size: 30px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #951D12;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    background: #ffffff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media (min-width:600px) and (max-width:1024px){
.mts{
margin-top: 30px;
}

.qa{
font-size: 18px;
line-height: 28px;
}

 .qa-list dl {
    margin: 10px 0 0;
    line-height: 160%;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 10px 40px 10px 45px;
    font-size: 18px;
}
.qa-list dl dt::before {
    font-size: 14px;
    top: 12px;
    left: 20px;
}
.qa-list dl dt::before {
    font-size: 18px;
    line-height: 28px;
    position: absolute;
    top: 10px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #132556;
}
.qa-list dl dd::before {
    font-size: 18px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #951D12;
}
.qa-list dl dd {
    margin: 0;
    padding: 10px 10px 10px 45px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}

@media only screen and (max-width:599px){
.mts{
margin-top: 20px;
}

.qa{
font-size: 14px;
line-height: 24px;
}

 .qa-list dl {
    margin: 10px 0 0;
    line-height: 160%;
}


.qa-list dl:after {
    top: 15px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 10px 40px 10px 35px;
    font-size: 16px;
}
.qa-list dl dt::before {
    font-size: 16px;
    top: 12px;
    left: 20px;
}

.qa-list dl dt::before {
    font-size: 16px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    content: 'Q.';
    color: #132556;
}
.qa-list dl dd::before {
    font-size: 16px;
    line-height: 20px;
    position: absolute;
    left: 10px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #951D12;
}

.qa-list dl dd {
    margin: 0;
    padding: 10px 10px 10px 35px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}






/* ==================================================
   ミライエ住建 下層サービスページ（2026）
================================================== */

/* 共通・PC */
/* ==================================================
   下層ページ 共通設定
================================================== */

/* アクセントカラー */
.service_main.roof{
	--service-accent:#c4512e;
}

.service_main.wall{
	--service-accent:#152e68;
}

.service_main.solar{
	--service-accent:#c49a2d;
}

.service_main.others{
	--service-accent:#3d7152;
}

/* 下層サービスページ FV */

/* 下層ページでは画面幅いっぱいにFVのグラデーションを表示 */
.service_page .top_visual_wrap{
	position:relative;
	width:100%;
	max-width:none;
	margin:0;
	overflow:hidden;
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#ffffff 43%,
			#edf5fd 100%
		);
}

/* 下層ページではヘッダーを白背景にする */
.service_page #header_pc1{
	background:#fff;
}

.service_page .top_header_inner{
	background:#fff;
}


/* FV全体 */
.service_fv{
	position:relative;
	width:100%;
	max-width:1920px;
	height:auto;
	min-height:720px;
	margin:0 auto;
	padding-top:100px;
	box-sizing:border-box;
	overflow:hidden;
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#ffffff 43%,
			#edf5fd 100%
		);
}


/* FV内側 */
.service_fv_inner{
	width:min(1620px, 85%);
	margin:0 auto;
	padding:25px 0 70px;
	box-sizing:border-box;
}


/* パンくず */
.service_breadcrumb{
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.3rem, 1.05vw, 1.8rem);
	font-weight:400;
	line-height:1.5;
}

.service_breadcrumb ol{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	padding:0;
}

.service_breadcrumb li{
	display:flex;
	align-items:center;
	color:#aaa;
}

.service_breadcrumb li + li::before{
	content:">";
	margin-right:8px;
	color:#aaa;
}

.service_breadcrumb a{
	color:#aaa;
	transition:opacity .3s;
}

.service_breadcrumb a:hover{
	opacity:.6;
}


/* 左テキスト・右画像 */
.service_fv_content{
	display:grid;
	grid-template-columns:
		minmax(0, .95fr)
		minmax(500px, 1.05fr);
	gap:75px;
	align-items:center;
	margin-top:70px;
}

.service_fv_text{
	min-width:0;
	padding-left:10px;
}


/* タイトル */
.service_fv_title{
	margin:0;
	color:#182649;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(3.8rem, 3.3vw, 6rem);
	font-weight:600;
	line-height:1.4;
	letter-spacing:.04em;
}

.service_fv_title_solar{
  font-size: clamp(3.4rem, 2.9vw, 5.2rem);
}


/* 説明文 */
.service_fv_description{
	margin-top:70px;
	color:#111;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.5rem, 1.25vw, 2rem);
	font-weight:500;
	line-height:1.75;
	letter-spacing:.01em;
}


/* 画像 */
.service_fv_image{
	width:100%;
	overflow:hidden;
}

.service_fv_image img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1.58 / 1;
	object-fit:cover;
}


/* ボタン */
.service_fv_buttons{
	display:flex;
	align-items:center;
	gap:15px;
	margin-top:105px;
}

.service_fv_btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15px;
	height:68px;
	border-radius:999px;
	box-sizing:border-box;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.6rem, 1.25vw, 2rem);
	font-weight:700;
	white-space:nowrap;
	transition:
		opacity .3s,
		transform .3s;
}

.service_fv_btn:hover{
	opacity:.82;
	transform:translateY(-2px);
}

.service_fv_btn_contact{
	width:min(360px, 48%);
	background-color:#c91720;
	color:#fff;
}

.service_fv_btn_tel{
	width:min(360px, 48%);
	border:3px solid #111;
	background-color:#fff;
	color:#333;
	pointer-events:none;
	cursor:default;
}

.service_fv_mail_icon,
.service_fv_phone_icon{
	display:block;
	width:28px;
	height:auto;
	flex-shrink:0;
}

/* 下層サービスページ屋根リフォームでできること */
.roof_service{
	width:100%;
	padding:80px 0 90px;
	background-color:#fff;
	box-sizing:border-box;
}

.roof_service_inner{
	width:min(1460px, 85%);
	margin:0 auto;
}


/* タイトル */
.roof_service_heading{
	line-height:1.5;
}

.roof_service_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.6rem, 2vw, 3.8rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.04em;
}

.roof_service_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.5rem, 1.15vw, 2rem);
	font-weight:500;
	letter-spacing:.08em;
}


/* 赤から紺へつながるライン */
.roof_service_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:18px;
	background-color:#182649;
}

.roof_service_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}


/* 導入文 */
.roof_service_lead{
	margin-top:25px;
	color:#222;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.5rem, 1.15vw, 1.9rem);
	font-weight:500;
	line-height:1.8;
}


/* 4つの工事カード */
.roof_service_list{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:24px;
	margin-top:28px;
}

.roof_service_card{
	min-width:0;
	border:1px solid #333;
	background-color:#fff;
	box-sizing:border-box;
}

.roof_service_image{
	width:100%;
	aspect-ratio:1.5 / 1;
	overflow:hidden;
	background-color:#ddd;
}

.roof_service_image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.roof_service_card:hover .roof_service_image img{
	transform:scale(1.04);
}

.roof_service_card_content{
	padding:12px 20px 24px;
	box-sizing:border-box;
	font-family:'Noto Sans JP', sans-serif;
}

.roof_service_card_content h3{
	margin:0;
	color:#c4512e;
	font-size:clamp(1.8rem, 1.45vw, 2.4rem);
	font-weight:700;
	line-height:1.45;
	letter-spacing:.01em;
}

.roof_service_card_content p{
	margin-top:10px;
	color:#222;
	font-size:clamp(1.4rem, 1.05vw, 1.75rem);
	font-weight:500;
	line-height:1.75;
}


/* 点検サイン */
.roof_sign{
	margin-top:36px;
	padding:26px 27px 35px;
	border:1px solid #333;
	border-radius:10px;
	box-sizing:border-box;
	background-color:#fff;
}

.roof_sign > h3{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.2rem, 1.8vw, 3rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.04em;
}

.roof_sign_list{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	margin-top:20px;
	padding:20px 0;
	border:1px solid #333;
	border-radius:8px;
	box-sizing:border-box;
}

.roof_sign_item{
	min-width:0;
	padding:0 26px;
	box-sizing:border-box;
	border-right:1px dashed #555;
	font-family:'Noto Sans JP', sans-serif;
}

.roof_sign_item:last-child{
	border-right:none;
}

.roof_sign_item h4{
	display:flex;
	align-items: flex-start;
	gap:9px;
	margin:0;
	color:#c4512e;
	font-size:clamp(1.7rem, 1.35vw, 2.2rem);
	font-weight:700;
	line-height:1.45;
	white-space:nowrap;
}

.roof_sign_check{
	display:flex;
	flex:0 0 auto;
	align-items:center;
	justify-content:center;
	width:25px;
	height:25px;
	border:2px solid #c4512e;
	box-sizing:border-box;
	color:#c4512e;
	font-size:2.5rem;
	font-weight:500;
	line-height:1;
    margin-top: 4px;
}

.roof_sign_item p{
	margin-top:16px;
	color:#222;
	font-size:clamp(1.35rem, 1vw, 1.65rem);
	font-weight:500;
	line-height:1.75;
}

/* ==================================================
   事業説明｜サービスページ別アクセントカラー
================================================== */

/* 各工事カードのタイトル */
.service_main .roof_service_card_content h3{
	color:var(--service-accent);
}

/* 点検サインの項目タイトル */
.service_main .roof_sign_item h4{
	color:var(--service-accent);
}

/* 点検サインのチェックマーク */
.service_main .roof_sign_check{
	color:var(--service-accent);
	border-color:var(--service-accent);
}

/* メリット・デメリット */

.service_merit{
	position:relative;
	width:100%;
	padding:75px 0 85px;
	box-sizing:border-box;
	background-image:url("../images/service_merit_bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

.service_merit_inner{
	position:relative;
	z-index:2;
	width:min(1460px, 85%);
	margin:0 auto;
}


/* 見出し */
.service_merit_heading{
	line-height:1.5;
}

.service_merit_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.6rem, 2vw, 3.8rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.04em;
}

.service_merit_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.5rem, 1.15vw, 2rem);
	font-weight:500;
	letter-spacing:.08em;
}


/* 見出し下ライン */
.service_merit_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:18px;
	background-color:#182649;
}

.service_merit_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}


/* 2カラム */
.service_merit_columns{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:28px;
	margin-top:52px;
}


/* 共通ボックス */
.service_merit_box{
	min-width:0;
	padding:30px 26px 18px;
	border:2px solid;
	border-radius:10px;
	box-sizing:border-box;
	background-color:rgba(255,255,255,.95);
}

.service_merit_box_merit{
	border-color:#c51620;
	color:#c51620;
}

.service_merit_box_demerit{
	border-color:#182649;
	color:#182649;
}


/* メリット・デメリットのラベル */
.service_merit_label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-width:200px;
	margin:0 0 18px;
	padding:8px 22px 10px;
	border-radius:999px;
	box-sizing:border-box;
	color:#fff;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(2rem, 1.5vw, 2.6rem);
	font-weight:700;
	line-height:1.2;
}

.service_merit_box_merit .service_merit_label{
	background-color:#c51620;
}

.service_merit_box_demerit .service_merit_label{
	background-color:#182649;
}

.service_merit_label span{
	font-size:.95em;
}


/* 項目 */
.service_merit_list{
	margin:0;
	padding:0;
}

.service_merit_item{
	display:grid;
	grid-template-columns:82px minmax(0, 1fr);
	gap:22px;
	align-items:center;
	padding:25px 0;
	border-bottom:1px solid #666;
}

.service_merit_item:last-child{
	border-bottom:none;
}


/* 番号 */
.service_merit_number{
	display:flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	border-radius:50%;
	color:#fff;
	font-family:'Noto Serif JP', serif;
	font-size:3.1rem;
	font-weight:600;
	line-height:1;
}

.service_merit_box_merit .service_merit_number{
	background-color:#c51620;
}

.service_merit_box_demerit .service_merit_number{
	background-color:#182649;
}


/* テキスト */
.service_merit_text{
	min-width:0;
	padding-left:25px;
	border-left:1px solid #777;
	font-family:'Noto Sans JP', sans-serif;
}

.service_merit_text h4{
	margin:0;
	font-size:clamp(1.8rem, 1.35vw, 2.3rem);
	font-weight:700;
	line-height:1.5;
	letter-spacing:.01em;
}

.service_merit_box_merit .service_merit_text h4{
	color:#c51620;
}

.service_merit_box_demerit .service_merit_text h4{
	color:#182649;
}

.service_merit_text p{
	margin-top:8px;
	color:#182649;
	font-size:clamp(1.4rem, 1.05vw, 1.75rem);
	font-weight:500;
	line-height:1.65;
}

/* 費用目安 */

.service_price{
	width:100%;
	padding:55px 0 65px;
	background-color:#fff;
	box-sizing:border-box;
}

.service_price_inner{
	width:min(1360px, 82%);
	margin:0 auto;
}


/* 見出し */
.service_price_heading{
	position:relative;
	padding-left:24px;
}

.service_price_heading::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:6px;
	height:100%;
	background-color:#182649;
}

.service_price_heading h2{
	margin:0;
	color:#182649;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(2rem, 1.7vw, 2.8rem);
	font-weight:700;
	line-height:1.5;
	letter-spacing:.04em;
}


/* 表 */
.service_price_table_wrap{
	margin-top:22px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

.service_price_table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	table-layout:fixed;
	font-family:'Noto Sans JP', sans-serif;
	background-color:#fff;
}

.service_price_table th,
.service_price_table td{
	padding:28px 38px;
	border:1px solid #cfd4da;
	box-sizing:border-box;
	color:#111;
	font-size:clamp(1.5rem, 1.2vw, 2rem);
	font-weight:500;
	line-height:1.6;
	text-align:left;
	vertical-align:middle;
}

.service_price_table th{
	background-color:#fafafa;
	font-weight:600;
}

.service_price_table th:nth-child(1),
.service_price_table td:nth-child(1){
	width:32%;
}

.service_price_table th:nth-child(2),
.service_price_table td:nth-child(2){
	width:36%;
}

.service_price_table th:nth-child(3),
.service_price_table td:nth-child(3){
	width:32%;
}


/* 注釈 */
.service_price_note{
	margin-top:14px;
	color:#777;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.25rem, .95vw, 1.6rem);
	font-weight:400;
	line-height:1.65;
}

/* 工事の流れ */

.service_flow{
	position:relative;
	width:100%;
	padding:65px 0 70px;
	box-sizing:border-box;
	background-image:url("../images/service_flow_bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

/* 背景を少し白くして文字を読みやすく */
.service_flow::before{
	content:"";
	position:absolute;
	inset:0;
	background-color:rgba(255,255,255,.22);
	pointer-events:none;
}

.service_flow_inner{
	position:relative;
	z-index:2;
	width:min(1600px, 86%);
	margin:0 auto;
}


/* タイトル */
.service_flow_heading{
	position:relative;
	padding-left:30px;
}

.service_flow_heading::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:8px;
	height:100%;
	background-color:var(--service-accent);
}

.service_flow_heading h2{
	margin:0;
	color:#182649;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.6rem, 2vw, 3.8rem);
	font-weight:700;
	line-height:1.4;
	letter-spacing:.04em;
	text-shadow:
		-2px -2px 0 #fff,
		2px -2px 0 #fff,
		-2px 2px 0 #fff,
		2px 2px 0 #fff,
		0 3px 5px rgba(0,0,0,.2);
}


/* 工程全体 */
.service_flow_list{
	display:grid;
	grid-template-columns:
		minmax(0, 1fr) 28px
		minmax(0, 1fr) 28px
		minmax(0, 1fr) 28px
		minmax(0, 1fr) 28px
		minmax(0, 1fr) 28px
		minmax(0, 1fr) 28px
		minmax(0, 1fr);
	align-items:center;
	margin-top:45px;
}


/* 各工程カード */
.service_flow_item{
	display:flex;
	flex-direction:column;
	align-items:center;
	min-width:0;
	min-height:500px;
	padding:28px 12px 25px;
	box-sizing:border-box;
	border:1px solid rgba(24,38,73,.18);
	background-color:rgba(255,255,255,.94);
	font-family:'Noto Sans JP', sans-serif;
	text-align:center;
}


/* 番号 */
.service_flow_number{
	display:flex;
	align-items:center;
	justify-content:center;
	width:68px;
	height:68px;
	border-radius:50%;
	background-color:var(--service-accent);
	color:#fff;
	font-family:'Noto Serif JP', serif;
	font-size:2.8rem;
	font-weight:700;
	line-height:1;
}


/* イラスト */
.service_flow_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:145px;
	margin-top:25px;
}

.service_flow_icon img{
	display:block;
	width:auto;
	max-width:90px;
	max-height:105px;
	height:auto;
}


/* 工程タイトル */
.service_flow_item h3{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:65px;
	margin:15px 0 0;
	color:#182649;
	font-size:clamp(1.5rem, 1.15vw, 2rem);
	font-weight:700;
	line-height:1.5;
}


/* タイトル下の短いライン */
.service_flow_short_line{
	display:block;
	width:38px;
	height:3px;
	margin-top:14px;
	background-color:var(--service-accent);
}


/* 説明文 */
.service_flow_item p{
	margin-top:30px;
	color:#182649;
	font-size:clamp(1.35rem, 1vw, 1.7rem);
	font-weight:500;
	line-height:1.75;
}


/* カード間の矢印 */
.service_flow_arrow{
	display:block;
	width:0;
	height:0;
	margin:0 auto;
	border-top:18px solid transparent;
	border-bottom:18px solid transparent;
	border-left:18px solid #182649;
}


/* 注釈 */
.service_flow_note{
	margin-top:26px;
	color:#182649;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.3rem, 1vw, 1.7rem);
	font-weight:500;
	line-height:1.7;
	text-shadow:
		0 0 5px rgba(255,255,255,1),
		0 0 10px rgba(255,255,255,.9);
}

/* 施工事例 */

/* 下層ページの施工事例 */
.service_works{
	padding-top:70px;
	padding-bottom:80px;
}

/* 導入文 */
.service_works_lead{
	margin-top:28px;
	color:#222;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.4rem, 1.1vw, 1.8rem);
	font-weight:500;
	line-height:1.7;
}

/* カテゴリラベルはページごとのアクセントカラー */
.service_main .service_works_label{
	background-color:var(--service-accent);
}

/* 施工内容の説明 */
.service_works_text{
	margin-top:24px;
	color:#222;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.4rem, 1.05vw, 1.75rem);
	font-weight:500;
	line-height:1.8;
}

/* 工期・費用 */
.service_works_price{
	margin-top:10px;
	color:var(--service-accent);
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.5rem, 1.15vw, 1.9rem);
	font-weight:700;
	line-height:1.6;
}

/* 下層ページではリンクではないためカーソル・ホバー演出を抑える */
.service_works .top_works_card_link{
	color:#111;
	cursor:default;
}

.service_works .top_works_card_link:hover .top_works_image img{
	transform:none;
}

/* 下層・お客様の声 */

.service_voice{
	position:relative;
	width:100%;
	padding:70px 0 85px;
	box-sizing:border-box;
	background-image:url("../images/service_voice_bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

/* 背景を少し明るく */
.service_voice::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(255,255,255,.28);
	pointer-events:none;
}

.service_voice_inner{
	position:relative;
	z-index:2;
	width:min(1460px, 85%);
	margin:0 auto;
}


/* 見出し */
.service_voice_heading{
	line-height:1.5;
}

.service_voice_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.6rem, 2vw, 3.8rem);
	font-weight:600;
	letter-spacing:.04em;
	text-shadow:
		0 0 5px rgba(255,255,255,.9);
}

.service_voice_heading p{
	margin-top:5px;
	color:#b3151b;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(1.5rem, 1.15vw, 2rem);
	font-weight:500;
	letter-spacing:.08em;
}


/* 見出し下ライン */
.service_voice_line{
	position:relative;
	width:100%;
	height:3px;
	margin-top:18px;
	background-color:#182649;
}

.service_voice_line::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:24%;
	height:100%;
	background-color:#b3151b;
}


/* カード一覧 */
.service_voice_list{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:55px;
	margin-top:65px;
}


/* カード */
.service_voice_card{
	min-height:320px;
	padding:48px 55px;
	border:1px solid #182649;
	border-radius:10px;
	box-sizing:border-box;
	background-color:rgba(255,255,255,.96);
	font-family:'Noto Sans JP', sans-serif;
}


/* 星 */
.service_voice_stars{
	margin:0;
	color:#e5c300;
	font-size:2.6rem;
	font-weight:700;
	line-height:1;
	letter-spacing:.08em;
}


/* お客様名・施工内容 */
.service_voice_card h3{
	margin-top:24px;
	color:#111;
	font-size:clamp(1.8rem, 1.4vw, 2.3rem);
	font-weight:700;
	line-height:1.5;
}


/* 本文 */
.service_voice_text{
	margin-top:28px;
	color:#111;
	font-size:clamp(1.5rem, 1.15vw, 1.9rem);
	font-weight:500;
	line-height:1.8;
}

/* 下層・CTA */

.service_cta{
	padding:80px 0;
	background-color:var(--service-accent);
}

/* 白いCTAボックス */
.service_cta .top_cta_inner{
	width:min(1600px, 86%);
	padding:55px 70px 65px;
	box-sizing:border-box;
	background:#fff;
}

/* 上の短いライン */
.service_cta .top_cta_border{
	width:100px;
	height:4px;
	margin-bottom:38px;
	background:#c51620;
}

/* 見出し */
.service_cta h2{
	color:#111;
	font-size:clamp(2.8rem, 2.3vw, 4rem);
}

/* 説明文 */
.service_cta .top_cta_text{
	margin-top:30px;
	color:#222;
}

/* ボタン間隔 */
.service_cta .top_cta_btn{
	margin-top:55px;
}


/* 他の事業もあわせてご検討ください */

.service_other{
	width:100%;
	padding:70px 0 85px;
	background:#fff;
	box-sizing:border-box;
}

.service_other_inner{
	width:min(1460px, 85%);
	margin:0 auto;
}


/* 見出し */
.service_other_heading{
	text-align:center;
}

.service_other_heading h2{
	margin:0;
	color:#111;
	font-family:'Noto Serif JP', serif;
	font-size:clamp(2.6rem, 2.1vw, 3.8rem);
	font-weight:600;
	line-height:1.5;
	letter-spacing:.04em;
}

.service_other_heading p{
	margin-top:18px;
	color:#222;
	font-family:'Noto Sans JP', sans-serif;
	font-size:clamp(1.4rem, 1.05vw, 1.7rem);
	font-weight:500;
	line-height:1.7;
}


/* 3枚表示 */
.service_other_list{
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:42px;
	margin-top:55px;
}


/* カード高さを揃える */
.service_other .top_service_card,
.service_other .top_service_card_link{
	height:100%;
}

.service_other .top_service_card_link{
	display:flex;
	flex-direction:column;
}

.service_other .top_service_content{
	display:flex;
	flex:1;
	flex-direction:column;
}

.service_other .top_service_text{
	margin-bottom:25px;
}

.service_other .top_service_button{
	margin-top:auto;
}



/* ==================================================
   PC調整 1241px～1860px（下層サービスページ)
================================================== */

@media (min-width:1241px) and (max-width:1860px){

/* FV */
	.service_fv{
		min-height:650px;
	}

	.service_fv_inner{
		width:85%;
		padding-bottom:60px;
	}

	.service_fv_content{
		grid-template-columns:
			minmax(0, .95fr)
			minmax(460px, 1.05fr);
		gap:55px;
		margin-top:60px;
	}

	.service_fv_description{
		margin-top:55px;
		font-size:clamp(1.4rem, 1.3vw, 1.8rem);
	}

	.service_fv_buttons{
		gap:12px;
		margin-top:80px;
	}

	.service_fv_btn{
		height:62px;
		font-size:clamp(1.4rem, 1.25vw, 1.8rem);
	}

	.service_fv_btn_contact,
	.service_fv_btn_tel{
		width:48%;
	}

	.service_fv_mail_icon,
	.service_fv_phone_icon{
		width:25px;
	}
    
/* 下層サービスページ屋根リフォームでできること */
.roof_service{
		padding:70px 0 80px;
	}

	.roof_service_inner{
		width:85%;
	}

	.roof_service_list{
		gap:20px;
	}

	.roof_service_card_content{
		padding:12px 16px 22px;
	}

	.roof_sign{
		padding:24px 24px 32px;
	}

	.roof_sign_item{
		padding:0 20px;
	}

/* メリット・デメリット */
	.service_merit{
		padding:70px 0 80px;
	}

	.service_merit_inner{
		width:85%;
	}

	.service_merit_columns{
		gap:24px;
		margin-top:45px;
	}

	.service_merit_box{
		padding:28px 22px 15px;
	}

	.service_merit_label{
		min-width:185px;
	}

	.service_merit_item{
		grid-template-columns:74px minmax(0, 1fr);
		gap:18px;
		padding:22px 0;
	}

	.service_merit_number{
		width:66px;
		height:66px;
		font-size:2.8rem;
	}

	.service_merit_text{
		padding-left:20px;
	}

/* 費用目安 */
	.service_price{
		padding:50px 0 60px;
	}

	.service_price_inner{
		width:82%;
	}

	.service_price_table th,
	.service_price_table td{
		padding:24px 32px;
	}

/* 工事の流れ */
	.service_flow{
		padding:60px 0 65px;
	}

	.service_flow_inner{
		width:86%;
	}

	.service_flow_list{
		grid-template-columns:
			minmax(0, 1fr) 24px
			minmax(0, 1fr) 24px
			minmax(0, 1fr) 24px
			minmax(0, 1fr) 24px
			minmax(0, 1fr) 24px
			minmax(0, 1fr) 24px
			minmax(0, 1fr);
		margin-top:40px;
	}

	.service_flow_item{
		min-height:465px;
		padding:25px 10px 22px;
	}

	.service_flow_number{
		width:62px;
		height:62px;
		font-size:2.5rem;
	}

	.service_flow_icon{
		height:130px;
		margin-top:20px;
	}

	.service_flow_icon img{
		max-width:82px;
		max-height:95px;
	}

	.service_flow_item h3{
		font-size:clamp(1.4rem, 1.15vw, 1.8rem);
	}

	.service_flow_item p{
		font-size:clamp(1.25rem, 1vw, 1.55rem);
	}
    
/* 施工事例 */
	.service_works{
		padding-top:65px;
		padding-bottom:75px;
	}

	.service_works_lead{
		margin-top:24px;
	}

	.service_works_text{
		margin-top:20px;
		font-size:clamp(1.3rem, 1.05vw, 1.6rem);
	}

	.service_works_price{
		font-size:clamp(1.4rem, 1.1vw, 1.7rem);
	}
    
/* 下層・お客様の声 */
	.service_voice{
		padding:65px 0 75px;
	}

	.service_voice_inner{
		width:85%;
	}

	.service_voice_list{
		gap:45px;
		margin-top:55px;
	}

	.service_voice_card{
		min-height:300px;
		padding:42px 45px;
	}

	.service_voice_stars{
		font-size:2.4rem;
	}

	.service_voice_text{
		margin-top:24px;
	}
    
/* 下層・CTA */
	.service_cta{
		padding:70px 0;
	}

	.service_cta .top_cta_inner{
		width:86%;
		padding:50px 60px 58px;
	}
    
/* 他の事業もあわせてご検討ください */
	.service_other{
		padding:65px 0 75px;
	}

	.service_other_inner{
		width:85%;
	}

	.service_other_list{
		gap:34px;
		margin-top:48px;
	}

}


/* ==================================================
   901px～1240px（下層サービスページ)
================================================== */

@media (min-width:901px) and (max-width:1240px){


/* FV*/
	.service_page #header_pc1{
		left:0;
		width:100%;
	}

	.service_fv{
		min-height:auto;
		padding-top:100px;
	}

	.service_fv_inner{
		width:90%;
		padding:25px 0 60px;
	}

	.service_fv_content{
		grid-template-columns:
			minmax(0, 1fr)
			minmax(390px, .95fr);
		gap:40px;
		margin-top:55px;
	}

	.service_fv_text{
		padding-left:0;
	}

	.service_fv_title{
		font-size:4rem;
	}

	.service_fv_description{
		margin-top:45px;
		font-size:1.5rem;
	}

	.service_fv_pc_br{
		display:none;
	}

	.service_fv_buttons{
		flex-direction:column;
		align-items:flex-start;
		gap:12px;
		margin-top:55px;
	}

	.service_fv_btn_contact,
	.service_fv_btn_tel{
		width:100%;
		max-width:360px;
	}

	.service_fv_btn{
		height:58px;
		font-size:1.6rem;
	}

/* 下層サービスページ屋根リフォームでできること */
	.roof_service{
		padding:65px 0 75px;
	}

	.roof_service_inner{
		width:90%;
	}

	.roof_service_heading h2{
		font-size:3rem;
	}

	.roof_service_heading p{
		font-size:1.6rem;
	}

	.roof_service_lead{
		font-size:1.5rem;
	}

	.roof_service_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:24px;
	}

	.roof_service_card_content h3{
		font-size:2.1rem;
	}

	.roof_service_card_content p{
		font-size:1.5rem;
	}

	.roof_sign_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		padding:0;
	}

	.roof_sign_item{
		padding:22px 25px;
		border-right:1px dashed #555;
		border-bottom:1px dashed #555;
	}

	.roof_sign_item:nth-child(2n){
		border-right:none;
	}

	.roof_sign_item:nth-last-child(-n+2){
		border-bottom:none;
	}

	.roof_sign_item h4{
		font-size:1.9rem;
	}

	.roof_sign_item p{
		font-size:1.4rem;
	}

/* メリット・デメリット */
	.service_merit{
		padding:65px 0 75px;
	}

	.service_merit_inner{
		width:90%;
	}

	.service_merit_columns{
		gap:20px;
		margin-top:40px;
	}

	.service_merit_box{
		padding:25px 20px 12px;
	}

	.service_merit_label{
		min-width:170px;
		font-size:2rem;
	}

	.service_merit_item{
		grid-template-columns:62px minmax(0, 1fr);
		gap:14px;
		padding:20px 0;
	}

	.service_merit_number{
		width:58px;
		height:58px;
		font-size:2.4rem;
	}

	.service_merit_text{
		padding-left:15px;
	}

	.service_merit_text h4{
		font-size:1.7rem;
	}

	.service_merit_text p{
		font-size:1.35rem;
	}

	.service_merit_text p br{
		display:none;
	}
    
/* 費用目安 */
	.service_price{
		padding:50px 0 60px;
	}

	.service_price_inner{
		width:88%;
	}

	.service_price_heading h2{
		font-size:2.4rem;
	}

	.service_price_table th,
	.service_price_table td{
		padding:22px 26px;
		font-size:1.6rem;
	}

	.service_price_note{
		font-size:1.3rem;
	}
    
/* 工事の流れ */
	.service_flow{
		padding:55px 0 60px;
	}

	.service_flow_inner{
		width:90%;
	}

	.service_flow_heading h2{
		font-size:3rem;
	}

	.service_flow_list{
		grid-template-columns:repeat(4, minmax(0, 1fr));
		gap:25px 18px;
		align-items:stretch;
		margin-top:35px;
	}

	.service_flow_arrow{
		display:none;
	}

	.service_flow_item{
		min-height:400px;
		padding:24px 12px 20px;
	}

	.service_flow_number{
		width:58px;
		height:58px;
		font-size:2.3rem;
	}

	.service_flow_icon{
		height:110px;
		margin-top:18px;
	}

	.service_flow_icon img{
		max-width:75px;
		max-height:85px;
	}

	.service_flow_item h3{
		min-height:55px;
		font-size:1.7rem;
	}

	.service_flow_item p{
		margin-top:22px;
		font-size:1.35rem;
	}
    
/* 施工事例 */
	.service_works{
		padding-top:60px;
		padding-bottom:70px;
	}

	.service_works_lead{
		margin-top:22px;
		font-size:1.5rem;
	}

	.service_works_text{
		margin-top:18px;
		font-size:1.4rem;
		line-height:1.75;
	}

	.service_works_price{
		font-size:1.5rem;
	}
    
/* 下層・お客様の声 */
	.service_voice{
		padding:60px 0 70px;
	}

	.service_voice_inner{
		width:90%;
	}

	.service_voice_heading h2{
		font-size:3rem;
	}

	.service_voice_heading p{
		font-size:1.6rem;
	}

	.service_voice_list{
		gap:30px;
		margin-top:45px;
	}

	.service_voice_card{
		min-height:280px;
		padding:35px 32px;
	}

	.service_voice_stars{
		font-size:2.2rem;
	}

	.service_voice_card h3{
		font-size:1.8rem;
	}

	.service_voice_text{
		margin-top:22px;
		font-size:1.5rem;
	}
    
/* 下層・CTA */
	.service_cta{
		padding:60px 0;
	}

	.service_cta .top_cta_inner{
		width:90%;
		padding:45px 50px 50px;
	}

	.service_cta h2{
		font-size:3rem;
	}
    
/* 他の事業もあわせてご検討ください */
	.service_other{
		padding:60px 0 70px;
	}

	.service_other_inner{
		width:90%;
	}

	.service_other_heading h2{
		font-size:3rem;
	}

	.service_other_heading p{
		font-size:1.45rem;
	}

	.service_other_list{
		gap:24px;
		margin-top:42px;
	}

}


/* ==================================================
   タブレット 600px～900px（下層サービスページ)
================================================== */

@media (min-width:600px) and (max-width:900px){

/* FV */
	.service_page #header_pc1{
		left:0;
		width:100%;
	}

	.service_fv{
		min-height:auto;
		padding-top:95px;
	}

	.service_fv_inner{
		width:90%;
		padding:20px 0 60px;
	}

	.service_breadcrumb{
		font-size:1.4rem;
	}

	.service_fv_content{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:35px;
		margin-top:45px;
	}

	.service_fv_text{
		display:contents;
	}

	.service_fv_title{
		order:1;
		font-size:4rem;
	}

	.service_fv_image{
		order:2;
	}

	.service_fv_description{
		order:3;
		margin-top:0;
		font-size:1.6rem;
		line-height:1.8;
	}

	.service_fv_buttons{
		order:4;
		display:flex;
		flex-direction:row;
		gap:14px;
		margin-top:5px;
	}

	.service_fv_btn{
		width:50%;
		height:60px;
		font-size:1.6rem;
	}

	.service_fv_btn_tel{
		pointer-events:auto;
		cursor:pointer;
	}

	.service_fv_pc_br{
		display:none;
	}
    
/* 下層サービスページ屋根リフォームでできること */
	.roof_service{
		padding:55px 0 65px;
	}

	.roof_service_inner{
		width:90%;
	}

	.roof_service_heading h2{
		font-size:2.8rem;
	}

	.roof_service_heading p{
		font-size:1.5rem;
	}

	.roof_service_line::before{
		width:28%;
	}

	.roof_service_lead{
		margin-top:22px;
		font-size:1.5rem;
	}

	.roof_service_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:22px 18px;
	}

	.roof_service_card_content{
		padding:12px 16px 20px;
	}

	.roof_service_card_content h3{
		font-size:1.9rem;
	}

	.roof_service_card_content p{
		font-size:1.4rem;
	}

	.roof_sign{
		margin-top:32px;
		padding:24px 22px 28px;
	}

	.roof_sign > h3{
		font-size:2.3rem;
	}

	.roof_sign_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		padding:0;
	}

	.roof_sign_item{
		padding:20px;
		border-bottom:1px dashed #555;
	}

	.roof_sign_item:nth-child(2n){
		border-right:none;
	}

	.roof_sign_item:nth-last-child(-n+2){
		border-bottom:none;
	}

	.roof_sign_item h4{
		font-size:1.7rem;
		white-space:normal;
	}

	.roof_sign_item p{
		font-size:1.35rem;
	}

/* メリット・デメリット */
	.service_merit{
		padding:55px 0 65px;
		background-position:center center;
	}

	.service_merit_inner{
		width:90%;
	}

	.service_merit_heading h2{
		font-size:2.8rem;
	}

	.service_merit_heading p{
		font-size:1.5rem;
	}

	.service_merit_line::before{
		width:28%;
	}

	.service_merit_columns{
		grid-template-columns:1fr;
		gap:30px;
		margin-top:35px;
	}

	.service_merit_box{
		padding:26px 25px 15px;
	}

	.service_merit_item{
		grid-template-columns:68px minmax(0, 1fr);
		gap:18px;
	}

	.service_merit_number{
		width:62px;
		height:62px;
		font-size:2.6rem;
	}

	.service_merit_text h4{
		font-size:1.9rem;
	}

	.service_merit_text p{
		font-size:1.45rem;
	}

/* 費用目安 */
	.service_price{
		padding:45px 0 55px;
	}

	.service_price_inner{
		width:90%;
	}

	.service_price_heading{
		padding-left:20px;
	}

	.service_price_heading h2{
		font-size:2.2rem;
	}

	.service_price_table th,
	.service_price_table td{
		padding:20px 22px;
		font-size:1.5rem;
	}

	.service_price_note{
		font-size:1.25rem;
	}
    
/* 工事の流れ */
	.service_flow{
		padding:50px 0 55px;
	}

	.service_flow_inner{
		width:90%;
	}

	.service_flow_heading{
		padding-left:24px;
	}

	.service_flow_heading::before{
		width:6px;
	}

	.service_flow_heading h2{
		font-size:2.8rem;
	}

	.service_flow_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:22px;
		margin-top:32px;
	}

	.service_flow_arrow{
		display:none;
	}

	.service_flow_item{
		min-height:350px;
		padding:22px 15px 20px;
        width:100%;
	box-sizing:border-box;
	}

	.service_flow_number{
		width:56px;
		height:56px;
		font-size:2.2rem;
	}

	.service_flow_icon{
		height:100px;
		margin-top:16px;
	}

	.service_flow_icon img{
		max-width:70px;
		max-height:80px;
	}

	.service_flow_item h3{
		min-height:auto;
		font-size:1.8rem;
	}

	.service_flow_item p{
		margin-top:20px;
		font-size:1.4rem;
	}

	.service_flow_note{
		font-size:1.3rem;
	}
    
/* 施工事例 */
	.service_works{
		padding-top:55px;
		padding-bottom:65px;
	}

	.service_works_lead{
		margin-top:20px;
		font-size:1.45rem;
	}

	.service_works_text{
		margin-top:17px;
		font-size:1.4rem;
		line-height:1.75;
	}

	.service_works_price{
		margin-top:9px;
		font-size:1.5rem;
	}
    
/* 下層・お客様の声 */
	.service_voice{
		padding:55px 0 65px;
	}

	.service_voice_inner{
		width:90%;
	}

	.service_voice_heading h2{
		font-size:2.8rem;
	}

	.service_voice_heading p{
		font-size:1.5rem;
	}

	.service_voice_line::before{
		width:28%;
	}

	.service_voice_list{
		grid-template-columns:1fr;
		gap:25px;
		margin-top:38px;
	}

	.service_voice_card{
		min-height:auto;
		padding:32px 35px;
	}

	.service_voice_card h3{
		font-size:1.8rem;
	}

	.service_voice_text{
		font-size:1.45rem;
	}
    
/* 下層・CTA */
	.service_cta{
		padding:55px 0;
	}

	.service_cta .top_cta_inner{
		width:90%;
		padding:40px 35px 45px;
	}

	.service_cta h2{
		font-size:2.8rem;
	}

	.service_cta .top_cta_btn{
		margin-top:40px;
	}
    
/* 他の事業もあわせてご検討ください */
	.service_other{
		padding:55px 0 65px;
	}

	.service_other_inner{
		width:90%;
	}

	.service_other_heading h2{
		font-size:2.7rem;
	}

	.service_other_heading p{
		margin-top:14px;
		font-size:1.4rem;
	}

	.service_other_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:24px;
		margin-top:38px;
	}

	.service_other .top_service_card:last-child{
		grid-column:1 / -1;
		width:calc(50% - 12px);
		margin:0 auto;
	}
    
}


/* ==================================================
   スマートフォン 599px以下（下層サービスページ)
================================================== */

@media only screen and (max-width:599px){

/* FV */
	.service_page #header_pc1{
		left:0;
		width:100%;
		background:#fff;
	}

	.service_page .top_header_inner{
		background:#fff;
	}

	.service_fv{
		height:auto;
		min-height:auto;
		padding-top:80px;
		background:
			linear-gradient(
				180deg,
				#ffffff 0%,
				#ffffff 35%,
				#edf5fd 100%
			);
	}

	.service_fv_inner{
		width:90%;
		padding:10px 0 45px;
	}

	.service_breadcrumb{
		font-size:1.2rem;
	}

	.service_breadcrumb ol{
		gap:5px;
	}

	.service_breadcrumb li + li::before{
		margin-right:5px;
	}

	.service_fv_content{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:25px;
		margin-top:25px;
	}

	.service_fv_text{
		display:contents;
	}

	.service_fv_title{
		order:1;
		font-size:clamp(2.8rem, 8vw, 3rem);
		line-height:1.4;
		letter-spacing:.03em;
	}
    
.service_fv_title_solar{
  font-size: clamp(2.6rem, 7vw, 2.8rem);
}

	.service_fv_image{
		order:2;
		width:100%;
	}

	.service_fv_image img{
		aspect-ratio:1.45 / 1;
	}

	.service_fv_description{
		order:3;
		margin-top:0;
		font-size:1.4rem;
		font-weight:500;
		line-height:1.8;
	}

	.service_fv_pc_br{
		display:none;
	}

	.service_fv_buttons{
		order:4;
		flex-direction:column;
		align-items:center;
		gap:12px;
		width:100%;
		margin-top:10px;
	}

	.service_fv_btn{
		width:100%;
		max-width:330px;
		height:56px;
		font-size:1.5rem;
	}

	.service_fv_btn_tel{
		pointer-events:auto;
		cursor:pointer;
	}

	.service_fv_mail_icon,
	.service_fv_phone_icon{
		width:23px;
	}
/* 下層サービスページ屋根リフォームでできること */
	.roof_service{
		padding:45px 0 55px;
	}

	.roof_service_inner{
		width:90%;
	}

	.roof_service_heading h2{
		font-size:5.2vw;
		line-height:1.55;
		letter-spacing:.02em;
	}

	.roof_service_heading p{
		margin-top:3px;
		font-size:2.8vw;
	}

	.roof_service_line{
		margin-top:12px;
	}

	.roof_service_line::before{
		width:30%;
	}

	.roof_service_lead{
		margin-top:18px;
		font-size:1.35rem;
		line-height:1.75;
	}

	.roof_service_list{
		grid-template-columns:1fr;
		gap:20px;
		margin-top:24px;
	}

	.roof_service_image{
		aspect-ratio:1.65 / 1;
	}

	.roof_service_card_content{
		padding:12px 16px 18px;
	}

	.roof_service_card_content h3{
		font-size:1.9rem;
	}

	.roof_service_card_content p{
		margin-top:8px;
		font-size:1.35rem;
		line-height:1.7;
	}

	.roof_sign{
		margin-top:28px;
		padding:20px 15px 22px;
		border-radius:8px;
	}

	.roof_sign > h3{
		font-size:1.9rem;
		line-height:1.55;
	}

	.roof_sign_list{
		grid-template-columns:1fr;
		margin-top:16px;
		padding:0 15px;
	}

	.roof_sign_item{
		padding:20px 0;
		border-right:none;
		border-bottom:1px dashed #555;
	}

	.roof_sign_item:last-child{
		border-bottom:none;
	}

	.roof_sign_item h4{
		gap:8px;
		font-size:1.7rem;
		white-space:normal;
	}

	.roof_sign_check{
		width:23px;
		height:23px;
		font-size:2.2rem;
        margin: 0 0 0;
	}

	.roof_sign_item p{
		margin-top:12px;
		font-size:1.3rem;
		line-height:1.7;
	}

	.roof_sign_item p br{
		display:none;
	}
    
/* メリット・デメリット */
	.service_merit{
		padding:45px 0 55px;
		background-position:center center;
	}

	.service_merit_inner{
		width:90%;
	}

	.service_merit_heading h2{
		font-size:5.2vw;
		line-height:1.55;
	}

	.service_merit_heading p{
		margin-top:3px;
		font-size:2.8vw;
	}

	.service_merit_line{
		margin-top:12px;
	}

	.service_merit_line::before{
		width:30%;
	}

	.service_merit_columns{
		grid-template-columns:1fr;
		gap:25px;
		margin-top:28px;
	}

	.service_merit_box{
		padding:22px 15px 10px;
		border-radius:8px;
	}

	.service_merit_label{
		min-width:160px;
		margin-bottom:10px;
		padding:7px 18px 8px;
		font-size:1.9rem;
	}

	.service_merit_item{
		grid-template-columns:52px minmax(0, 1fr);
		gap:10px;
		padding:18px 0;
	}

	.service_merit_number{
		width:48px;
		height:48px;
		font-size:2rem;
	}

	.service_merit_text{
		padding-left:12px;
	}

	.service_merit_text h4{
		font-size:1.6rem;
		line-height:1.5;
	}

	.service_merit_text p{
		margin-top:7px;
		font-size:1.3rem;
		line-height:1.65;
	}

	.service_merit_text p br{
		display:none;
	}

/* 費用目安 */
	.service_price{
		padding:38px 0 45px;
	}

	.service_price_inner{
		width:90%;
	}

	.service_price_heading{
		padding-left:16px;
	}

	.service_price_heading::before{
		width:5px;
	}

	.service_price_heading h2{
		font-size:1.8rem;
		line-height:1.55;
	}

	.service_price_table_wrap{
		margin-top:18px;
	}

	.service_price{
		padding:38px 0 45px;
	}

	.service_price_inner{
		width:94%;
	}

	.service_price_heading{
		padding-left:14px;
	}

	.service_price_heading::before{
		width:4px;
	}

	.service_price_heading h2{
		font-size:1.75rem;
		line-height:1.55;
	}

	.service_price_table_wrap{
		margin-top:18px;
		overflow:visible;
	}

	.service_price_table{
		width:100%;
		min-width:0;
		table-layout:fixed;
	}

	.service_price_table th,
	.service_price_table td{
		padding:13px 8px;
		font-size:1.2rem;
		line-height:1.55;
		white-space:normal;
		overflow-wrap:anywhere;
		word-break:normal;
	}

	.service_price_table th:nth-child(1),
	.service_price_table td:nth-child(1){
		width:30%;
	}

	.service_price_table th:nth-child(2),
	.service_price_table td:nth-child(2){
		width:37%;
	}

	.service_price_table th:nth-child(3),
	.service_price_table td:nth-child(3){
		width:33%;
	}

	.service_price_note{
		margin-top:12px;
		font-size:1.15rem;
		line-height:1.65;
	}

	.service_price_note br{
		display:none;
	}

	.service_price_note{
		margin-top:12px;
		font-size:1.2rem;
		line-height:1.65;
	}

	.service_price_note br{
		display:none;
	}
    
/* 工事の流れ */
	.service_flow{
		padding:42px 0 48px;
		background-position:center center;
	}

	.service_flow_inner{
		width:90%;
	}

	.service_flow_heading{
		padding-left:18px;
	}

	.service_flow_heading::before{
		width:5px;
	}

	.service_flow_heading h2{
		font-size:2.3rem;
	line-height:1.4;
	}

	.service_flow_list{
		display:flex;
		flex-direction:column;
		gap:14px;
		margin-top:28px;
	}

	/* スマホでは矢印を下向きに */
	.service_flow_arrow{
		display:block;
		width:0;
		height:0;
		margin:0 auto;
		border-top:15px solid #182649;
		border-right:15px solid transparent;
		border-bottom:0;
		border-left:15px solid transparent;
	}

	/* スマホでは横長カード */
	.service_flow_item{
		display:grid;
		grid-template-columns:52px 68px minmax(0, 1fr);
		grid-template-rows:auto auto;
		column-gap:12px;
		min-height:auto;
		padding:15px;
		text-align:left;
        width:98%;
	box-sizing:border-box;
	}

	.service_flow_number{
		grid-column:1;
		grid-row:1 / 3;
		align-self:center;
		width:48px;
		height:48px;
		font-size:1.9rem;
	}

	.service_flow_icon{
		grid-column:2;
		grid-row:1 / 3;
		align-self:center;
		width:68px;
		height:68px;
		margin:0;
	}

	.service_flow_icon img{
		max-width:54px;
		max-height:58px;
	}

	.service_flow_item h3{
		grid-column:3;
		grid-row:1;
		display:block;
		min-height:auto;
		margin:1px 0 0;
		font-size:1.55rem;
		line-height:1.45;
		text-align:left;
	}

	.service_flow_short_line{
		display:none;
	}

	.service_flow_item p{
		grid-column:3;
		grid-row:2;
		margin-top:5px;
		font-size:1.2rem;
		line-height:1.6;
		text-align:left;
	}

	.service_flow_item p br{
		display:none;
	}

	.service_flow_note{
		margin-top:20px;
		font-size:1.2rem;
		line-height:1.65;
	}
    
/* 施工事例 */
	.service_works{
		padding-top:45px;
		padding-bottom:55px;
	}

	.service_works_lead{
		margin-top:16px;
		font-size:1.3rem;
		line-height:1.7;
	}

	.service_works .top_works_list{
		margin-top:24px;
	}

	.service_works .top_works_card_link{
		padding:18px;
	}

	.service_works_text{
		margin-top:15px;
		font-size:1.3rem;
		line-height:1.7;
	}

	.service_works_price{
		margin-top:8px;
		font-size:1.4rem;
		line-height:1.55;
	}
    
/* 下層・お客様の声 */
	.service_voice{
		padding:45px 0 55px;
		background-position:center center;
	}

	.service_voice_inner{
		width:90%;
	}

	.service_voice_heading h2{
		font-size:5.2vw;
		line-height:1.5;
	}

	.service_voice_heading p{
		margin-top:3px;
		font-size:2.8vw;
	}

	.service_voice_line{
		margin-top:12px;
	}

	.service_voice_line::before{
		width:30%;
	}

	.service_voice_list{
		grid-template-columns:1fr;
		gap:20px;
		margin-top:30px;
	}

	.service_voice_card{
		min-height:auto;
		padding:25px 22px;
		border-radius:8px;
	}

	.service_voice_stars{
		font-size:2rem;
	}

	.service_voice_card h3{
		margin-top:18px;
		font-size:1.6rem;
		line-height:1.5;
	}

	.service_voice_text{
		margin-top:18px;
		font-size:1.3rem;
		line-height:1.75;
	}

	.service_voice_text br{
		display:none;
	}
    
/* 下層・CTA */
	.service_cta{
		padding:35px 0;
	}

	.service_cta .top_cta_inner{
		width:90%;
		padding:32px 20px 35px;
	}

	.service_cta .top_cta_border{
		width:65px;
		height:3px;
		margin-bottom:25px;
	}

	.service_cta h2{
		font-size:2.2rem;
		line-height:1.5;
	}

	.service_cta .top_cta_text{
		margin-top:20px;
		font-size:1.35rem;
		line-height:1.75;
	}

	.service_cta .top_cta_text br{
		display:none;
	}

	.service_cta .top_cta_btn{
		margin-top:30px;
	}
    
    .service_cta .top_cta_mail{
		padding:0 18px;
	}

	.service_cta .top_cta_mail span{
		font-size:1.45rem;
		white-space:nowrap;
	}

	.service_cta .top_cta_mail img{
		width:28px;
		margin-right:14px;
	}
    
/* 他の事業もあわせてご検討ください */
	.service_other{
		padding:45px 0 55px;
	}

	.service_other_inner{
		width:90%;
	}

	.service_other_heading h2{
		font-size:2.3rem;
		line-height:1.5;
	}

	.service_other_heading p{
		margin-top:12px;
		font-size:1.3rem;
		line-height:1.7;
	}

	.service_other_list{
		grid-template-columns:1fr;
		gap:22px;
		margin-top:30px;
	}

	.service_other .top_service_card:last-child{
		grid-column:auto;
		width:100%;
	}

	.service_other .top_service_text{
		margin-bottom:20px;
	}
    
    
}

/* ==================================================
   既存6ページ：リニューアル共通ヘッダー
================================================== */
.legacy_page #header_pc1 {
	position: relative;
	background: #fff;
}

.legacy_page .top_header_inner {
	background: #fff;
}

@media (min-width: 1241px) {

	.legacy_page #header_pc1::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -106px;
		right: -106px;
		background: #fff;
		z-index: -1;
	}

}