/*=========================汎用=============================*/
:root {
    --background-color: #111111;
    --text-color: #FFFFFF;
    --accent-color: #00AEEF;
    --font-primary: serif,'Bebas Neue', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

html.glossy-metal {
    background: linear-gradient(
        135deg,
        #3f3f3f 0%,
        #898989 20%,
        #f0f0f0 35%,
        #7a7a7a 50%,
        #f0f0f0 70%,
        #848484 100%
    );
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.4);
}
.background{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-primary);
    font-size: 25vw;
    color: rgb(0 0 0 / 5%);
    z-index: -1;
    user-select: none;
}
.section-title { font-size: clamp(24px, calc(24px + 4 * ((100vw - 771px) / 253)) ,28px);font-family: serif;margin-bottom: 64px;}
.section-sub-title { font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px); font-weight: bold;}
.carousel__text__wrap p{ font-size: clamp(21px, calc(21px + 3 * ((100vw - 771px) / 253)) ,24px);}

.cta-text span { font-size: 18px;}
.cta-text strong { font-size: 21px;font-style: italic;color: red;}

.re-img{ max-width: 360px;}
.case-img img{ width: 100%; height: auto;}
/*=========================================================*/
.index-container{ overflow: hidden; margin-top: 55px;}
/*=================トップビュースライダー=====================*/
.hero-viewer { overflow: hidden;}
.hero-viewer .hero-wrap { padding: 0; }
.carousel__img__wrap{ width: 100vw; height: 79dvh; overflow: hidden;}
.carousel__img{ width:100%; height: 100%;transition: all 4s; object-fit: cover; object-position: center;}
.carousel__viewport { position: relative; height: 79dvh;}
.carousel__slide { position: absolute; inset:0; display:none; padding-bottom: 0;  pointer-events: none;}
.carousel__slide.active{ display: block;}
.carousel__slide.zoom-out img{
  animation: carouselZoomOut var(--zoom-duration, 6000ms) linear forwards;
}
.carousel__slide.zoom-in img{
  animation: carouselZoomIn var(--zoom-duration, 12000ms) linear forwards;
}

/* 現在 → 消える */
@keyframes carouselZoomOut {
  from {
    transform: scale(1.13);
    opacity: 1;
  }
  to {
    transform: scale(1.13);
    opacity: 0;
  }
}

/* 次 → 現れる */
@keyframes carouselZoomIn {
  from {
    transform: scale(1);
    opacity: 0;
  }
  to {
    transform: scale(1.15);
    opacity: 1;
  }
}

.carousel__text__wrap {
    position: absolute;
    width: 100%;
    margin-bottom: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.carousel__text__wrap p{
    display: inline-block;
    padding: 0px 24px;
    background: white;
}
.panel-2 .carousel__text__wrap { margin-top: 36px;}
.carousel__slide.zoom-out .carousel__text__wrap{ animation: textZoomOut var(--zoom-duration, 5000ms) linear forwards;}
.carousel__slide.zoom-in .carousel__text__wrap{ animation: textZoomIn var(--zoom-duration, 7000ms) linear forwards;}
/* 現在 → 消える */
@keyframes textZoomOut {
  from { opacity: 1;}
  to { opacity: 0;}
}
/* 次 → 現れる */
@keyframes textZoomIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

.carousel__text__wrap p {
    font-family: serif;
    font-style: italic;
    font-weight: bold;
    transform: translateY(-4rem);
    text-shadow: 3px 0px 5px #ffffff;
    font-size: clamp(16px, calc(16px + 36 * ((100vw - 771px) / 253)) ,52px);
}
/*=========================================================*/
/*=================NEWS=====================*/

.section-content.newstopic {
    background: url(../img/background/27065460.png) no-repeat;
    background-size: cover;
    padding-bottom: 0!important;
    color: white;
    padding-bottom: 100px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0 90%);
}
.newstopic .section-container{ 
    display: grid;
    align-items: center;
    padding-left: calc(2% - 12px);
    padding-right: calc(2% - 12px);
    grid-template-columns: 1.5fr 2fr 1.5fr;
    grid-template-rows: 1fr auto;
}
.newstopic .section-container > *{ margin: 0;}
.newstopic .section-title{ display: inline-block;margin:0; padding: 0 12px;grid-column: 1 / 3;}
.newstopic .newscategory > ul { display: flex;}
.newstopic .newslist { grid-row: 2 / 3; grid-column: 1 / 4; text-align: center;padding: 14px 0; position: relative; overflow: hidden;perspective: 800px;}
.newstopic .newslist .news-panels { transform-style: preserve-3d; position: absolute; top: 0; left: 0; right: 0;}
.newstopic .panel { position: absolute; top: 0; left: 0; right: 0;}
.newstopic .news-item {
    font-size: clamp(14px, calc(14px + 4 * ((100vw - 771px) / 253)), 18px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(30px) translateZ(-80px);
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
}
.newstopic .news-item.is-current {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    z-index: 2;
}
.newstopic .news-item.is-exit {
    opacity: 0;
    transform: translateY(-20px) translateZ(-120px);
    z-index: 1;
}
.newstopic .news-item a{ color:white; transition: all .5s;}
.newstopic .news-item a:hover{ opacity: .5;} 
.newstopic .newslink{ font-size: clamp(14px, calc(14px + 4 * ((100vw - 771px) / 253)), 18px); text-align: center;}
.newstopic .newslink a{ color: white;}
@media screen and (min-width:771px){
    .newstopic .section-container{ grid-template-columns: 1fr 2fr 1fr;}
    .newstopic .section-title{ grid-column: 1 / 2;}
    .newstopic .newslist { grid-row: 1 / 2; grid-column: 2 / 3; border-left: 1px solid; border-right: 1px solid;}
}
/*=================代表挨拶( 企業理念 )=====================*/
.companyPolicy .section-sub-title{
    padding-bottom: 8px;
    font-size: clamp(18px, calc(18px + 12 * ((100vw - 771px) / 253)), 30px);
    color: crimson;
    font-family: 'KouzanBrush';
    text-shadow: 1px 2px #ffd5d5;
    border-bottom: 1px solid;
}
.companyPolicy .section-sub-container a{ display: flex;}
.companyPolicy .image-container{
    display: flex;
    gap: 20px;
    flex-direction: column;
    overflow: hidden;
}
.companyPolicy .staffname {
    margin-left: 20px;
    font-family: serif;
    color: black;
}
.companyPolicy .staffname span {
    font-size: 24px;
    font-weight: bold;
}
.companyPolicy .text-container {
    padding: 24px;
    background: #ffffff;
    transition: all .5s;
    font-style: italic;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.companyPolicy .fake-link{ text-align: end;}
.companyPolicy .re-img{ max-width: 640px; transition: all .5s;}
.companyPolicy .section-sub-container a:hover .text-container {
    background: #bababa;
}
.companyPolicy .section-sub-container a:hover img {
    transform: scale(1.2); opacity: 0.8;
}
/*=================選ばれる理由=====================*/
.reasonDetail { display: flex; overflow: hidden;}
.reasonDetail > div{ flex:0 0 100%;}
.reasonDetail {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: clamp(280px, 40vw, 520px);
}
.reason img{ border-radius: 99%;}
.strengths{ max-width: 1440px;margin: auto;}

.strengths .section-sub-title { margin-top: 12px;font-family: NotoSansJP-bold; text-align: center;}

.reason { display: flex; margin-bottom: 56px;}
.reasonDetail dt{ display: flex;column-gap: 36px;}
.reasonDetail dt > span{ font-size: 24px;font-style: italic;font-family: serif;}
.reasonDetail-item { padding: 24px;}
.reasonDetail-title { margin-bottom: 12px;}
.reasonDetail-title span { font-style: italic; color: #ffffff;font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px);padding: 8px 12px;background: #111111;box-shadow:0 0 0 4px #1825c4;}
.reasonDetail-wrap { max-width: 620px;}
.reasonNoteven .reasonDetail-wrap p{ display: inline-block;}

/* 共通の左カラム幅（必要なら数値だけ変えてOK） */
.strengthspointlist { --left-w: 360px; } /* 320/360/400などで調整 */
.strengthspointlist .reason { display: flex;}
.reason.reason2, .reason.reason4{ flex-direction: row-reverse;}
.strengthspointlist .reason > div:first-of-type {
  max-width: var(--left-w);
  width: 31vw;
}
.strengthspointlist .reason .reasonDetail-item {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
/* 画像は枠にフィットさせる（任意） */
.strengthspointlist .reason figure { margin: 0; }
.strengthspointlist .reason figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* モバイルは縦積みに（任意） */
@media screen and (min-width: 771px) {
    .reasonDetail-wrap { margin-left: 52px;}
    .reason.reasonNoteven .reasonDetail-wrap{ text-align: end;}
    .strengthspointlist .reason .reasonDetail-item{ width: 69%;}
    .strengthspointlist .reason .reasonDetail-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/decoration/e1169_3.png) no-repeat;
        background-size: cover;
        transform-origin: center; /* 中心で反転させる */
        z-index: -1; /* 必要に応じて調整 */
    }
    .reason.reasoneven .reasonDetail-item::before{ transform: scaleX(-1); /* ★ 左右反転 */}
}
@media (max-width: 640px) {
  .strengthspointlist { --left-w: 40vw; } /* もしくは縦積み */
  .strengthspointlist .reason { flex-direction: column; }
  .strengthspointlist .reason > div:first-of-type {
    flex-basis: auto; max-width: none; width: 100%;
  }
}


/*-----------------口コミ------------------*/
.g-reviews__list{ display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0;padding:0;list-style:none;transition: all 1s;}
.g-reviews__item{ border:1px solid #eee;border-radius:12px;padding:16px;background:#fff;position: relative; font-size: 16px;}
.g-reviews__author{ font-weight:600;margin-bottom:4px}
.g-reviews__rating{ letter-spacing:2px;color: gold;}
.g-reviews__time{ color:#666;font-size:12px;}
.g-reviews__text{ margin-top:8px;white-space:pre-wrap;transition: all .5s;}
.g-reviews__head{ display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.g-attribution{ margin-top:8px;font-size:.85em;color:#666}
.g-reviews__item::after {
    content: url(../assets/svg/icons/google-brands-solid.svg);
    display: inline-block;
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
    margin-right: .4em;
    position: absolute;
    right: 16px;
    top: 16px;
}
.g-reviews__usericon img { width: 50px;}
/*=================事業紹介=====================*/
.service .section-sub-title{ font-weight: bold;}
.vslider { display: flex;flex-wrap: wrap;}
.service .service-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}
.service .service-item {
    text-align: center;
    position: relative;
    transition: all .5s;
}
.service .service-item img{ transition: all .5s;}

.service .service-item a::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #0000003b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: x-large;
    text-shadow: 0 0 5px black;
}
.service .service-item a:hover::after { content: "詳細→";}
.service .service-item:hover img{ transform: scale(1.3);}

.service .service-wrap{ width: 100%; padding: 4px 0;background: white;}
.service .service-wrap a {
    display: flex;
    justify-content: center;
    transition: all .3s;
}
.service .service-wrap a > p {
    border: 1px solid #f5f5f5;;
    padding: 6px 12px;
    box-shadow: 5px 5px 0 0 rgb(255 255 255);
    font-family: serif;
}
.service .service-wrap a:hover {
    transform: translateY(4px) scale(1.1);
    opacity: 0.6;
}
.service .service-wrap a:hover > p {
    background: black;
    color: white;
}
.service .service-img{ line-height: 0; overflow: hidden;}
/*=================施工実績=====================*/
.section-content.works { padding: 0;}
.works .section-container { max-width: none;}
.works .section-title{ margin-bottom: 12px;text-align: center;}

.works .workcase {
    position: relative;
    max-width: 100%;
    overflow: hidden;      /* 額縁からはみ出す部分を隠す */   /* お好みで */
    margin: 0 auto;
    box-sizing: border-box;
}
/* スライドのトラック */
.casedetail-item {
    position: relative;
    overflow: hidden;
    padding-bottom: 57.14%;
}
.casedetail-item::after {
    content: "";
    position: absolute;
    width: 17%;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid white;
    background: #ffffff59;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.workcase-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;          /* ★ 背景より前 */
    pointer-events: none;
    text-align: center;
    color: #ffffff;
    font-family: var(--font-secondary, 'Montserrat', sans-serif);
}

.workcase-indicator__num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25em;
    font-weight: 700;
}
.workcase-indicator__num span{
    font-style: italic;
    color: black;
    text-shadow: 7px 5px 2px #efefefcf;
}
.workcase-indicator__current {
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1;
}

.workcase-indicator__sep,
.workcase-indicator__total {
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.2;
}
/* 1枚のスライド */
.casedetail-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1.5s;
}

/* 表示中のスライド */
.casedetail-wrap.is-active {
    opacity: 1;
    transform: translateX(0);
}
/* 画像とテキストのレイアウトはお好みで */
/*
    .casedetail-img-wrap { flex: 0 0 40%;}
*/
.casedetail-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* スマホなど幅が狭いときは縦積みに */
@media (max-width: 768px) {
    .casedetail-wrap {
        flex-direction: column;
    }
    .casedetail-img-wrap {
        flex-basis: auto;
    }
}
/* 矢印ボタンのスタイル */
.workcase-arrow {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 50%;
    text-indent: -9999px;
    transition: background-color .3s ease;
}
.workcase-prev {
    left: 8px;
}
.workcase-next {
    right: 8px;
}
.works .workcase-arrow:before,.works .workcase-arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: #000000;
}
.works .workcase-prev:before{ transform: translate(-50%, -50%) rotate(50deg); margin-top: 4.5px;}
.works .workcase-prev:after{  transform: translate(-50%, -50%) rotate(-50deg); margin-top: -4.5px;}
.works .workcase-next:before{ transform: translate(-50%, -50%) rotate(50deg); margin-top: -4.5px;}
.works .workcase-next:after{ transform: translate(-50%, -50%) rotate(-50deg); margin-top: 4.5px;}

/* js-workcase-slider 全体をグリッチの土台にする */
.js-workcase-slider {
  position: relative;
  overflow: hidden;
}

/* スライダー全体の土台 */
.js-workcase-slider {
  position: relative;
  overflow: hidden;
}

/* 施工事例スライダー全体 */
.js-workcase-slider {
  position: relative;
  overflow: hidden;
}

/* p5 が自動で生成するキャンバスをスライダー全面に固定 */
.js-workcase-slider canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
}

/* 黒背景のグリッチオーバーレイ */
.glitch {
  position: absolute;
  inset: 0;
  background: #0000005a;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
}

.glitch.is-active {
  opacity: 1;
}

/* 横に走るバー（1本） */
.glitch-line {
  position: absolute;
  /* height は JS 側でランダム設定するのでここでは固定しない */
  width: 100%;
  background: #ffffff;
  opacity: 0;
  mix-blend-mode: screen;
  transform-origin: left center;
  /* steps でカクカクさせる */
  animation: glitch-line 0.45s steps(3, end) forwards;
}
.glitch-line.cyan { background: #00fff7; }
.glitch-line.red  { background: #ff004c; }


/* バーの伸び縮みアニメーション */
@keyframes glitch-line {
  0% {
    opacity: 0;
    transform: translateX(-15%) scaleX(0);
  }
  8% {
    opacity: 1;
    transform: translateX(10%) scaleX(1.6);
  }
  25% {
    opacity: 0.9;
    transform: translateX(-20%) scaleX(0.7);
  }
  45% {
    opacity: 1;
    transform: translateX(15%) scaleX(1.3);
  }
  70% {
    opacity: 0.6;
    transform: translateX(-8%) scaleX(1.1);
  }
  100% {
    opacity: 0;
    transform: translateX(0) scaleX(0);
  }
}


/* ============================
   RGBずれっぽいフルスクリーンレイヤー
   ============================ */
.glitch-rgb {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(0, 255, 255, 0.25),
      transparent 30%,
      rgba(255, 0, 80, 0.3)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 2px,
      transparent 2px,
      transparent 4px
    );
}

/* .is-rgb が付いたときだけ動く */
.glitch.is-rgb .glitch-rgb {
  animation: glitch-rgb 0.4s steps(2, end) forwards;
}

@keyframes glitch-rgb {
  0% {
    opacity: 0;
    transform: translate(-4px, -2px);
  }
  25% {
    opacity: 1;
    transform: translate(4px, 2px);
  }
  60% {
    opacity: 0.8;
    transform: translate(-3px, 1px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

.worklink {
    display: block;
    width: 360px;
    text-align: center;
    border: 1px solid #b6b6b6;
    background: white;
    cursor: pointer;
    box-shadow: 0px 4px 5px 0 rgb(222 222 222);
    transition: all .5s;
    margin-top: 24px;
}
.worklink:hover {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    background: black;
    color: white;
}
.worklink p{ padding: 24px; font-family: var(--font-primary);}
/*=================施工の流れ=====================*/
    .flowcontent-item p { margin-left: 32px; font-size: clamp(12px, calc(12px + 4 * ((100vw - 771px) / 346)), 16px);}
    .flow-step-list{
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-top: 12px;
        margin-top: 18px;
    }

    .flow .section-title-wrap strong{
        font-size: 2.1rem;
        color: red;
        font-weight: bold;
        font-style: italic;
        padding: 0 8px;
    } 

    .flow-step-list li{
        float: left;
        margin-right: .1em;
        flex: 0 0 auto;
    }
    
    .flow-step-list p{
        background: #ddd;
        padding: .7em 1em;
        float: left;
        text-decoration: none;
        color: #444;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        position: relative;
        font-size: clamp(10.5px, calc(10.5px + 5.5 * ((100vw - 771px) / 346)), 16px);
    }
    
    .flow-step.active p{
        background: #96bbff;
        font-weight: bold;
    }
    
    .flow-step-list .current,
    .flow-step-list .current:hover{
    font-weight: bold;
    background: none;
    }
    
    .flow-step-list .current::after,
    .flow-step-list .current::before{
    content: normal;
    }

    .flow-step-detail { background: aliceblue;}

    .flowcontent-item .toc-label{
        margin: 0;
        padding: 12px;
        background: #96bcff;
        font-weight: bold;
    }

    .flow-step-detail .acc-panel-inner > div {
        padding: 8px 24px;
        margin: 24px 0;
    }
    /*アコーディオン*/
    /* アコーディオンの見出し（クリック対象） */
    .flow-step-detail .toc-label{
        font-size: 16px;
        position: relative;
        display: flex;
        align-items: center;
        gap: .6em;
        margin: 0;
        padding: .85em 1em;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
        outline: none;
    }

    /* アコーディオンのアイコン（＋／−） */
    .flow-step-detail .toc-label::after{
        content: "";
        margin-left: auto;
        width: 1.1em; height: 1.1em;
        position: relative;
    }

    .flow-step-detail .toc-label::after{
        /* draw + with two bars */
        --bar: currentColor;
        background:
            linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
            linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
        border-radius: 2px;
    }
    .flow-step-detail .flowcontent-item.active > .toc-label::after{
        /* minus (縦バー消す) */
        background:
            linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;
    }

    /* パネル：JSで .acc-panel（中に .acc-panel-inner）が作られます */
    .flow-step-detail .acc-panel{
        display: grid;
        grid-template-rows: 0fr;             /* 閉 */
        transition: grid-template-rows .28s ease;
    }
    .flow-step-detail .acc-panel-inner{
        overflow: hidden;
    }

    /* 開状態（.active） */
    .flow-step-detail .flowcontent-item.active > .acc-panel{
        grid-template-rows: 1fr;             /* 開 */
    }

    /* キーボードフォーカス見やすく */
    .flow-step-detail .toc-label:focus-visible{
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

/*=================施工実績=====================*/
.contact .formWrap{ max-width: 960px;}

/*=================企業情報=====================*/
.companyInfomation .companyInfomation_detail{
    display: flex;
    margin-right: 0;
    margin-left: auto;
    width: 100%;
    gap:8px;
    overflow-x: auto;
    padding-bottom: 24px;
}

.companyInfomation .CI_detail{
    position: relative;
    background: #d4d4d4;
    aspect-ratio: 9 / 16;
    max-width: 360px;
    flex: 0 0 auto;
}
.companyInfomation .companyInfomation_detail:hover .CI_detail{ opacity: .5;}
.companyInfomation .CI_detail:hover { opacity: 1 !important;}
.companyInfomation .CI_detail a{
    display: flex;
    flex-direction: column-reverse;
}
.companyInfomation .CI_detail:hover h3 {
    padding: 42px 0;
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.companyInfomation .CI_detail figure{ line-height: 0; overflow: hidden;aspect-ratio: 9 / 16;}
.companyInfomation .detail_ttl{
    position: absolute;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #000000;
    color: white;
    transition: all 1s;
    padding: 12px 0;
}
.companyInfomation .re-img{
    max-width: 100vw;   
    width: auto;
    height: 100%;
}

/*=================施工エリア=====================*/
.section-content.area{
    background: url(../img/background/matsuyama.jpg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    position: relative;
}
.section-content.area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1190ffa3;
    z-index: 0;
}
.section-content.area .section-title{ text-shadow: 0 0 8px #ffffff;}
.section-content.area .section-container{ position: relative;}
.areadetail{ display: flex;padding: 32px;background: #f0f8ffd4;border-radius: 16px;gap: 8px;}
.design-line {
    width: 2px;
    background: #c4c4c4;
}
/*=================FAQ=====================*/
.faq-item{ margin-bottom: 32px;}
.icon-title{ position: relative;display: inline-block;}
.icon-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #7d92ff;
    left: 0;
    padding: 0 8px;
}
.icon-title h3{ display: inline-block; transform: translateY(-5px);}
.faq-detail { margin-top: 8px;}
.faq-detail dt {
    padding: 12px;
    background: #d3d3d3;
}
.faq-detail dd {
    border: 1px solid #d3d3d3;
    padding: 12px;
}
/*=================匠PAINTの展望=====================*/
.section-content.future {
    background: black;
    color: white;
    margin-bottom: 0;
}
.future .section-title {
    text-align: center;
    font-style: italic;
}
.future .timeline-Img { text-align: center;}

.future .timeline-Img video{
    max-width: 100%;
    height: auto;
}
.future .link{ text-align: center; margin-top: 32px;}
.future .link a { display: inline-block; padding: 12px 8px; border: 1px solid; background:rgb(0, 0, 0);color:white; transition: all .3s;}
.future .link a:hover{ background:rgba(0, 0, 0, 0);box-shadow: 2px 4px 0 0 rgb(255, 255, 255);}
/*=================レスポンシブ=====================*/
@media screen and (min-width:771px){
    .index-container{ margin-top: 135px;}
    .cta-linkitem { width: 32%;}
    .strengthspointlist{ gap: 2rem;}

    .companyInfomation .companyInfomation_detail{ width: 70%;}

    .future .timeline-Img video{ max-width: 640px;}
}
@media screen and (max-width:770px) {
    .reasonDetail dt{ flex-direction: column; margin-bottom: 12px;}
    .carousel__slide img{
        height: auto;
    }
    .re-img{ width: 100%;height: auto;}

    .newstopic .newscategory > ul > li{ padding: 8px;}

    .menuDetail-container { gap:8px;}

    .companyPolicy .section-sub-container a{ flex-direction: column;}

    .companyInfomation .CI_detail figure{ max-width: calc(100vw / 3 - 16px);min-width: 190px;}

    .g-reviews__list{ display: flex;overflow-x: auto;padding: 16px 0;}
    .g-reviews__text{ width: 300px;}
    
    .areadetail{ flex-direction: column;}
}