@charset "utf-8";
body {
    font-family: 'Noto Sans JP', sans-serif;
}

a {
    text-decoration: none;
}
.pc-none,
.tab-none,
.for_sp {
    display: none;
}
.sp-none {
    display: inline;
}
@media (max-width: 1279px) {
    .pc-none {
        display: block;
    }
}
@media (max-width: 768px) {
    .tab-none {
        display: block;
    }
}
@media (max-width: 480px) {
    .sp-none {
        display: none;
    }
    .for_sp {
        display: block;
        line-height: 20px !important;
        margin: 0 !important;
    }
}
/*------------------------------------------------------------------------------------------------------------*/
/* Header */
header a {
    color: #ffffff;
    font-weight: bold;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 85px;
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
}


@keyframes head_display{
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.header-logo {
    width: auto;
    height: 30px;
    margin-left: 42px;
    position: relative;
}
.header-logo a,
.header-logo a img {
    display: block;
    height: 100%;
}
.header-logo::after {
    position: absolute;
    top: 0;
    right: -90px;
    content: "";
    display: block;
    width: 70px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-image: url('../img/logo-white.svg');
}
.header-menu {
    z-index: 1500;
}
.header-menu,
.ham-menu {
    display: flex;
    height: 100%;
    align-items: center;
}
@media (max-width: 480px) {
    .header-logo {
        width: 150px;
        height: auto;
        margin-left: 20px;
    }
    .header-logo a,
    .header-logo a img {
        display: block;
        width: 100%;
        height: auto;
    }
}
/* ------------------------ */
/* グローバルナビゲーション */
.gnavi {
    display: flex;
    gap: 40px;
    margin-right: 40px;
}
.nav-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
}
/* 共通スタイル */
.nav-link::before,
.nav-link::after,
.nav-link span::before,
.nav-link span::after {
    content: "";
    position: absolute;
    background: #ffffff;
    transition: transform 0.3s ease;
}
/* 上下の線 */
.nav-link::before,
.nav-link::after {
    height: 1px;
    width: 100%;
}
.nav-link::before { top: 0; left: 0; transform: scaleX(0); transform-origin: left center; }
.nav-link::after  { bottom: 0; right: 0; transform: scaleX(0); transform-origin: right center; }
    @media (max-width: 1279px) {
        /* 上下の線 */
        .nav-link::before,
        .nav-link::after {
            display: none;
        }
    }
/* 左右の線 */
.nav-link span::before,
.nav-link span::after {
    width: 1px;
    height: 100%;
}
.nav-link span::before { left: 0; top: 0; transform: scaleY(0); transform-origin: top center; }
.nav-link span::after  { right: 0; bottom: 0; transform: scaleY(0); transform-origin: bottom center; }
/* ホバー時に表示 */
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link:hover span::before,
.nav-link:hover span::after {
    transform: scale(1);
}
/* ------------------------ */
/* header CTAボタン */
.header-btn-wrap {
    display: flex;
    height: 100%;
}
    @media (max-width: 1279px) {
        .header-btn-wrap {
            flex-direction: column;
            height: auto;
            gap: 20px;
        }
    }
.header-btn , .header-btn a {
    display: block;
    height: 100%;
}
.header-btn a {
    padding: 0 40px;
    line-height: 85px;
    text-align: center;
}
.header-btn {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
/* ホバーエフェクト
.header-btn::after {
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}
.header-btn:hover::after {
    transform: scale(1, 1);
} */

/* 斜めエフェクト */
.header-btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    width: 120%;
    height: 0;
    border-radius: 6px;
    background-color: #ffffff;
    content: '';
    z-index: -1;
    transition: height .4s ease;
}
.header-btn:hover::before {
    height: 350%;
}
@media (max-width: 1279px) {
    .header-btn:hover::before {
        height: 800%;
    }
}
.header-btn a:hover {
    color: #00325E;
}
.btn-inquiry {
    background: linear-gradient(150deg,#00325E 0%, #0068C4 50%, #00325E 100%);
    background-size: 200% 200%;
    animation: bggradient 13s linear infinite;
}
@keyframes bggradient{
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}
/* ------------------------ */
/* ハンバーガーメニュー */
.noscroll {
    overflow: hidden;
    height: 100vh;
}  
.hamburger {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 40px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 100px;
    background: #ffffff;
    transition: 0.3s;
    transform-origin: center center;
}
@media (max-width: 1279px) {
    .hamburger {
        display: flex;
    }
    .ham-menu {
        position: absolute;
        top: 85px;
        right: -100%;
        width: 100%;
        height: 100vh;
        padding: 50px 65px 150px;
        background-color: rgba(26, 26, 26, 0.8);
        -webkit-backdrop-filter: blur(10px); /* Safari, 古いChrome用 */
        backdrop-filter: blur(10px);
        transition: all 0.3s;
        z-index: 99;
    }
    .gnavi {
        flex-direction: column;
        padding: 10px 0;
        gap: 0;
        overflow-y: auto;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .gnavi li {
        text-align: center;
        border-top: solid 0.5px #ffffff;
        text-align: left;
        padding: 0;
    }
    .gnavi li:last-child {
        border-bottom: solid 0.5px #ffffff;
    }
    .nav-link {
        padding: 30px 0 30px 20px;
        font-size: 16px;
        display: block;
    }
    .nav-link:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }
    /* メニューが開いたときの表示 */
    .ham-menu.open {
        display: block;
        overflow-y: auto;
        padding-bottom: 250px;
        right: 0;
    }
    /* ハンバーガーアニメーション */
    .hamburger.open span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
        background: #ffffff;
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-15px) rotate(-45deg);
        background: #ffffff;
    }
    .blur-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(26,26,26,0.2);
        z-index: 900;
        display: none;
    }
    .blur-overlay.active {
        display: block;
    }
}

/*------------------------------------------------------------------------------------------------------------*/
/* Main Visual */
.main_visual_wrap{
    padding-bottom:0;
    position: relative;
    background-color: #1A1A1A;
}
.main_visual_wrap .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.main_visual .slick-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    margin: 0;
}
.main_visual .img01 { background-image: url(../../images/tileimage01.webp); position: relative; }
.main_visual .img02 { background-image: url(../../images/tileimage02.webp); position: relative; }
.main_visual .img03 { background-image: url(../../images/tileimage03.webp); position: relative; }
.main_visual .img04 { background-image: url(../../images/tileimage04.webp); position: relative; }
.main_visual .img05 { background-image: url(../../images/tileimage05.webp); position: relative; }

/* オーバーレイを作成 */
.main_visual .img01::before,
.main_visual .img02::before,
.main_visual .img03::before,
.main_visual .img04::before,
.main_visual .img05::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3));
}

/*--------- ズームアウト用アニメーション ---------*/
/* 1枚目 */
@keyframes zoom01 {
  from {
    transform: scale(4);
    transform-origin: 80% 40%;
  }
  to {
    transform: scale(1);
    transform-origin: 80% center;
  }
}
/* 2枚目 */
@keyframes zoom02 {
  from {
    background-position: left 70%;
  }
  to {
    background-position: left 20%;
  }
}
/* 3枚目 */
@keyframes zoom03 {
  from {
    transform: scale(2);
    transform-origin: 45% 40%;
  }
  to {
    transform: scale(1);
    transform-origin: 45% center;
  }
}
/* 4枚目 */
@keyframes zoom04 {
  from {
    transform: scale(1);
    transform-origin: 55% 40%;
  }
  to {
    transform: scale(3);
    transform-origin: 55% 45%;
  }
}
/* 5枚目 */
@keyframes zoom05 {
  from {
    transform: scale(1);
    transform-origin: 30% 40%;
  }
  to {
    transform: scale(3);
    transform-origin: 25% 30%;
  }
}
/*--------- クラス適用 ---------*/
/* 1枚目 */
.zoom-1st {
  animation: zoom01 8s ease-out forwards;
}
/* 2枚目 */
.zoom-2nd {
  animation: zoom02 10s ease-in-out forwards;
}
/* 3枚目 */
.zoom-3rd {
    animation: zoom03 10s ease-out forwards;
}
/* 4枚目 */
.zoom-4th {
    transform: scale(1);
    animation: zoom04 11s ease-in-out forwards;
}
/* 5枚目 */
.zoom-5th {
    transform: scale(1);
    animation: zoom05 11s ease-in-out forwards;
}
.main_visual .img01 {
    transform: scale(4);
    transform-origin: 80% 40%;
}
.main_visual .img02 {
    background-position: left 70%;
}
.main_visual .img03 {
    transform: scale(2);
    transform-origin: 45% 40%;
}
.main_visual .img04 {
    transform: scale(1);
    transform-origin: 55% 40%;
}
.main_visual .img05 {
    transform: scale(1);
    transform-origin: 30% 40%;
}


/* ------------------------ */
/*FV テキスト*/
.mvtxt-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;

    & .copy,
    & .copy span {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 3px;
    }

    & h1 {
        font-size: 96px;
        font-weight: bolder;
        margin-top: 40px;
        margin-bottom: 50px;
        transform: translateY(30px);
        opacity: 0;
        animation: txt_display 1.5s linear forwards;
        animation-delay: 2.5s;

        & span {
            display: block;
            font-size: 32px;
            margin-top: -14px;
        }
    }

    & .subcopy,
    & .subcopy span {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3px;
        line-height: 40px;
        white-space: nowrap;
    }
}

@keyframes txt_display{
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* @media (max-width: 1279px) {
    .mvtxt-wrap {
        min-width: 500px;
    }
    .mvtxt-wrap .copy,
    .mvtxt-wrap .copy span {
        font-size: 28px;
        white-space: nowrap;
    }
    .mvtxt-wrap h1 img {
        max-width: 600px;
    }
    .mvtxt-wrap .subcopy,
    .mvtxt-wrap .subcopy span {
        font-size: 16px;
        white-space: nowrap;
    }
} */
/* ------------------------ */
/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .mvtxt-wrap .copy,
    .mvtxt-wrap .copy span { 
        font-size: 3.5vw; 
        letter-spacing: 0.2vw;
        white-space: nowrap;
        margin-bottom: 30px;
    }
    .mvtxt-wrap .subcopy:nth-child(1) {
        margin-top: 30px;
    }
}
@media (max-width: 1024px) {
    .mvtxt-wrap h1 { 
        font-size: 10vw; 
        margin-top: 1vw; 
        margin-bottom: 6vw; 
    }
    .mvtxt-wrap h1 span { 
        font-size: 4vw; 
        margin-top: -2vw; 
    }
    .mvtxt-wrap .subcopy { 
        font-size: 3.2vw; 
        line-height: 5vw; 
        letter-spacing: 0.2vw; 
    }
}

@media (max-width: 768px) {
    
    .scrolldown1 { bottom: 8vw; }
    .mvtxt-wrap h1 img { 
        width: 80%;
    }
}

@media (max-width: 480px) {
    .mvtxt-wrap .copy,
    .mvtxt-wrap .copy span { 
        font-size: 4.5vw; 
        letter-spacing: 0.2vw; 
    }
    .mvtxt-wrap h1 { 
        font-size: 12vw; 
        margin-top: 3vw; 
        margin-bottom: 5vw; 
    }
    .mvtxt-wrap h1 span { 
        font-size: 5vw; 
    }
    .mvtxt-wrap .subcopy,
    .mvtxt-wrap .subcopy span { 
        font-size: 3.2vw; 
        line-height: 5.5vw; 
        letter-spacing: 0.2vw; 
        white-space: wrap;
    }
    .scrolldown1 { bottom: 10vw; }
}

/* ------------------------ */
/*スクロールダウン*/
.scrolldown1{
	position:absolute;
	left:50%;
	bottom:10px;
	height:50px;
}
.scrolldown1 span{
	position: absolute;
	left:-25px;
	top: -15px;
	color: #ffffff;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
}
.scrolldown1::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: #ffffff;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
/* ------------------------------------------------ */
/* section 共通スタイル */
section:not(.main_visual_wrap) {
    padding: 150px 120px;
    width: 100%;
}
.sec-title {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
    text-align: center;

    & h2,
    & h2 span {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 14px;
    }

    & p {
        font-size: 24px;
        font-weight: bold;
    }
}
.sec-text {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 64px;

    & h3 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 24px;
        line-height: 1.3em;
    }
}
@media (max-width: 768px) {
    section:not(.main_visual_wrap) {
        padding: 100px 50px;
    }
    .sec-title h2,
    .sec-title h2 span {
        font-size: 36px;
        line-height: 1.4em;
    }
}
@media (max-width: 480px) {
    .sec-title h2,
    .sec-title h2 span {
        font-size: 32px;
        margin-bottom: 5px;
    }
    .sec-text {
        & h3 {
            font-size: 20px;
        }
    }
}
/* ------------------------ */
/* section グラムールとは */
#Features {
    background: url(../img/features_bg.png) no-repeat center center / cover;
    padding-bottom: 170px;

    & .features-item {
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: center;

        & .features-left {
            width: 40%;
            overflow: hidden;

            & img {
                width: 100%;
                height: auto;
                border: solid 3px #ffffff;
            }
        }

        & .features-right {
            width: 50%;
            z-index: 10;

            & .image-wrap {
                position: relative;
                width: 20%;
                margin-left: -20px;
                min-width: 100px;
                z-index: 10;

                & img {
                    width: 100%;
                    height: auto;
                }
            }

            & .image-wrap::before {
                content: "";
                position: absolute;
                left: 20%;
                top: 50%;
                transform: translateY(-50%);
                width: 7.5vw;
                height: 6.5vw;
                border-radius: 50% / 50%;
                background: transparent;
                box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.95);
                z-index: -1;
                min-width: 90px;
                min-height: 80px;
            }

            /* & .image-wrap::after {
                position: absolute;
                right: -90px;
                top: -60px;
                content: "";
                display: inline-block;
                width: 300px;
                height: 250px;
                background-image: url('../img/ellipse.png');
                background-position: center;
                background-size: contain;
                z-index: -1;
            } */

            & h3 {
                font-size: 24px;
                font-weight: bold;
                margin-top: 28px;
                margin-bottom: 28px;
                line-height: 1.3em;
            }
        }
    }
}

.features-item .imagetxt::after {
    content: "※ 画像はイメージ図です";
    font-size: 14px;
    text-align: right;
    display: block;
    margin-right: 10px;
}
.features-item:last-child .features-left img {
    transform: scale(1.5);
    object-position: 0px 0px;
}

.features-item:nth-child(2n) {
    margin-top: 100px;
    margin-bottom: 100px;
}
@media (max-width: 768px) {
    #Features .features-item {
        flex-direction: column-reverse;
        gap: 30px;

        & .features-right {
            width: 100%;

            & .image-wrap {
                margin: auto;
            }
        }

        & .features-left {
            width: 100%;
        }
    }
    .features-item:nth-child(2n) {
        margin-top: 70px;
        margin-bottom: 70px;
    }
}
@media (max-width: 480px) {
    #Features {
        & .features-item {
            & .features-right {
                & h3 {
                    font-size: 20px;
                    font-weight: bold;
                    margin-top: 28px;
                    margin-bottom: 28px;
                    line-height: 1.3em;
                }
            }
        }
    }
}
/* ------------------------ */
/* section ラインナップ */
#Lineup {
    background-color: #ffffff;
}
.lineup-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 50px;
    justify-content: start;
}

@media (max-width: 480px) {
    .lineup-container {
        display: block;
        width: 100%;
    }
}

.lineup-slide {
    width: 310px;
    margin: auto;
}
@media (max-width: 480px) {
    .lineup-slide {
        width: 100%;
        max-width: 100%;
        margin: 0;
        margin-bottom: 70px;
    }
    .lineup-slide:last-child {
        margin-bottom: 0;
    }
}
.slider-for .slick-track {
    height: 310px;
}
@media (max-width: 480px) {
    .slider-for .slick-track {
        height: 200px;
    }
}
.slider-for img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slider-for {
    position: relative;
}
.slider-for::after {
    position: absolute;
    right: 10px;
    bottom: 5px;
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.lu-slide1::after { background-image: url(../img/6.0mm.jpg);}
.lu-slide2::after,
.lu-slide3::after { background-image: url(../img/4.8mm.jpg);}
.lu-slide4::after { background-image: url(../img/5.0mm.jpg);}
.lu-slide5::after { background-image: url(../img/5.5mm.jpg);}
.lu-slide6::after { background-image: url(../img/3.0mm.jpg);}
.p-num {
    position: absolute;
    left: 20px;
    bottom: 14px;
    font-size: 14px;
    padding: 2px 5px;
}
.color-black {
    color: #1A1A1A;
    background-color: rgba(255, 255, 255, 0.8);
}
.color-white {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.8);
}
/* 薄暗いオーバーレイ */
.example::before {
    content: "";
    position: absolute;
    inset: 0; /* top, right, bottom, left 全て0 */
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
/* アイコン配置 */
.example::after {
    content: "zoom_in";
    font-family: "Material Symbols Outlined";
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48; /* 大きさ調整 */
    font-size: 48px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.example::before,
.example::after {
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}
.example:hover::before,
.example:hover::after {
    opacity: 1;
}
.slider-for .slick-prev, 
.slider-for .slick-next{
    z-index: 1;
}
.slider-for .slick-prev {
    left: 10px;
}
.slider-for .slick-next {
    right: 10px;
}

.slider-nav {
    margin-top: 10px;
}
.slider-nav .slick-track {
    /* height: 62px; */
    height: 50px;
    margin: 0;
    display: flex;
    gap: 5px;
}
.slider-nav .slick-slide {
    height: 100%;
}
.slider-nav img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s;
}
/* .slider-nav .slick-current img {
    border: solid 1px #1a1a1a;
} */


/* toggle */
.toggle-area {
    display: flex;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}
.label-text {
    margin-left: 10px;
    font-weight: bold;
    color: #5a1d0f;
}
/* トグルボタン */
.toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}
.toggle input {
    display: none;
}
span.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #cccccc;
    transition: .4s;
    border-radius: 25px;
}
span.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 3.5px;
    background-color: #ffffff;
    transition: .4s;
    border-radius: 50%;
}
.toggle input:checked + .slider {
    background-color: #7b2e14;
}
.toggle input:checked + .slider:before {
    transform: translateX(24px);
}


/* モーダル背景 */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding: 40px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    box-sizing: border-box;
}

.modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal-slider img {
    max-width: 70%;
    max-height: 80vh;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

.image-modal .slick-prev, 
.image-modal  .slick-next{
    z-index: 9999;
}
.image-modal .slick-prev{
    left: 30px;
}
.image-modal  .slick-next{
    right: 30px;
}
.image-modal .slick-prev:before, 
.image-modal .slick-next:before{
    font-size: 30px;
}
.close {
    position: absolute;
    top: 15px; right: 25px;
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    transition: .3s;
}
.close:hover,
.modal-close:hover {
    color: #ff6b6b !important;
}
/* --------------------------- */
.Lineup-name {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    margin: 14px 0;
}
@media (max-width: 480px) {
    .Lineup-name {
        font-size: 16px;
        margin: 10px 0;
    }
}
.facemodal {
    text-align: center;
}
.facemodal button {
    font-weight: 500;
    padding: 10px 20px;
    background-color: #00325E;
    border: solid 1px #00325E;
    border-radius: 100px;
    color: #ffffff;
    transition: .3s;
}
.facemodal button:hover {
    background-color: #ffffff;
    color: #00325E;
}
.facemodal .modal-content {
    height: 80vh;
    width: 80%;
    margin: auto;
    top: 10%;
    left: 0;
    transform: none;
}
.facemodal iframe {
    width: 100%;
    height: 100%;
}

body.modal-open {
    overflow: hidden;
}

/* ------------------------ */
/* section パララックス */
section.parallax {
    position: relative;
    text-align: center;
    color: #ffffff;
    height: 400px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-attachment: fixed;

    & .parallax-text {
        margin-bottom: 50px;
        position: relative;
        z-index: 2;
    }

    & p {
        font-size: 24px;
        font-weight: bold;
    }
}
@media (max-width: 480px) {
    section.parallax {
        padding: 25px;
        height: 300px;
        & p {
            font-size: 18px;
        }
    }
}
.parallax-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.parallax01 .parallax-bg {
  background-image: url("../img/parallax01.jpg");
}

.parallax02 .parallax-bg {
  background-image: url("../img/project/upper/pjimg09.jpg");
}

/* .parallax01 { background: url(../img/parallax01.jpg) no-repeat center / cover; }
.parallax02 { background: url(../img/project/upper/pjimg09.jpg) no-repeat center / cover; } */

.parallax01::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(31,31,31,0.7);
    z-index: 1;
}

.rounded-btn a {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    margin:0 auto;
    padding: 20px 56px;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 100px;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    transition: .4s;
}
.rounded-btn a:hover {
    background-color: transparent;
    color: #1A1A1A;
    box-shadow: 0 0 20px #ffffff;
}
.rounded-btn a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #ffffff;
    content: '';
    transition: width .3s ease;
}
.rounded-btn a:hover::before {
    width: 100%;
}
@media (max-width: 480px) {
    .rounded-btn a {
        padding: 20px 56px;
        font-size: 16px;
    }
}
/* ------------------------ */
/* section 施工例 */
#Projects {
    background: url(../img/projects_bg.jpeg) no-repeat center 0 / cover;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 170px;
    overflow: hidden;

    & .sec-title {
        color: #ffffff;
    }
}

#Projects .sec-title h2 {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#Projects .sec-title h2::after {
    position: absolute;
    top: 10px;
    right: -380px;
    content: "※施工例の一部にはイメージ画像も含まれます。";
    font-size: 16px;
    color: #ffffff;
}
@media (max-width: 1024px) {
    #Projects .sec-title {
        margin-bottom: 50px;
    }
    #Projects .sec-title h2::after {
        display: none;
    }
    .project-slider-wrapper::before {
        position: absolute;
        top: -40px;
        left: 20px;
        content: "※施工例の一部にはイメージ画像も含まれます。";
        font-size: 16px;
        color: #ffffff;
    }
}
@media (max-width: 480px) {
    .upper-wrapper::before {
        font-size: 13px;
    }
}

.project-slider-wrapper {
    position: relative;
    padding-top: 20px;
}
.slider-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 40px 0;
}
.lower-wrapper {
    margin-top: 50px;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
    will-change: transform;
}

.swiper-slide {
    width: 270px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #ccc;
    flex: 0 0 auto;
    margin-right: 0px;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .swiper-slide {
        width: 220px;
        height: 150px;
    }
}
@media (max-width: 480px) {
    .swiper-slide {
        width: 170px;
        height: 100px;
    }
}
.swiper > .swiper-wrapper {
    -webkit-transition-timing-function: linear!important;
    -o-transition-timing-function: linear!important;
    transition-timing-function: linear!important;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .4s;
}
.swiper-slide img:hover {
    transform: scale(1.2);
    cursor: pointer;
}
.slide-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
}

.swiper-slide:hover .slide-text {
    opacity: 1;
}

.toggle-switch {
    display: block;
    margin: auto;
    width: fit-content;
    padding: 15px 20px;
    border: none;
    background: #ffffff;
    color: #1A1A1A;
    cursor: pointer;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    position: relative;
}
.toggle-switch:hover {
    animation: anima-button-30 1s ease-out;
}

@keyframes anima-button-30 {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 1em rgb(0 0 0 / 0%);
    }
}

.pj-modal {
    display: none;
    position: fixed;
    z-index: 9000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.9);
}
.pj-modal-inner {
    position: relative;
    width: 100%;
    height: 95%;
    margin: auto;

}
.pj-modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    max-width: 80%;
    max-height: 80%;
    object-fit: cover;
}

.pj-modal #modal-caption {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    /* background-color: rgba(0, 0, 0, 0.4); */
    font-size: 16px;
}

.pj-modal .modal-close {
    position: absolute;
    top: 5%;
    right: 5%;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: .3s;
}


/* ------------------------ */
/* section 施工方法 */
#Method {
    background-color: #ffffff;
    margin-bottom: 200px;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 480px) {
    #Method {
        margin-bottom: 50px;
    }
}
#Method .sec-title,
#Method .sec-text {
    padding-left: 150px;
    padding-right: 150px;
}
.methodarea {
    overflow: hidden;
}
.method-item {
    display: flex;
    align-items: center;
    width: 90%;
    float: right;
}
.method-item:nth-child(2n) {
    margin: 150px 0;
}

.method-item.reverse {
    flex-direction: row-reverse;
    float: left;
}

/* 画像スライダー部分 */
.method-img {
    position: relative;
    width: 50%;
    overflow: hidden;
    height: 500px;
}
.method-img::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
    width: 250px;
    height: 200px;
    background-position: center;
    background-size: contain;
    z-index: 999;
}
.Adhesive::before { background-image: url('../img/adhesive.png');}
.dr::before { background-image: url('../img/d.r.png');}
.magcera::before { background-image: url('../img/magcera.png');}
@media (max-width: 480px) {
    .method-item {
        width: 100%;
    }
    .method-img::before {
        width: 200px;
        height: 150px;
        left: -6px;
    }
}
.method-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.method-img img.active {
    opacity: 1;
}

/* テキスト部分 */
.method-txtwrap {
    width: 50%;
    height: 500px;
    background-color: #F8F5F0;
    padding: 50px;
    align-content: center;
}
.method-text {
    width: 100%;
    max-width: 80%;
    margin: auto;
}
.method-text-title {
    text-align: center;
}
.method-text h3 {
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
.method-text p {
    font-size: 16px;
    margin-bottom: 15px;
}

.manual-link {
    width: 100%;
    display: block;
    background: #ffffff;
    color: #551100;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    text-align: center;
    margin-top: 30px;
}
.manual-link span {
    padding: 10px 20px;
    display: block;
}
.manual-link::before,
.manual-link::after,
.manual-link span::before,
.manual-link span::after {
    content: "";
    position: absolute;
    background: #551100;
    transition: transform 0.3s ease;
}
/* 上下の線 */
.manual-link::before,
.manual-link::after {
    height: 1px;
    width: 100%;
}
.manual-link::before { top: 0; left: 0; transform: scaleX(0); transform-origin: left center; }
.manual-link::after  { bottom: 0; right: 0; transform: scaleX(0); transform-origin: right center; }

/* 左右の線 */
.manual-link span::before,
.manual-link span::after {
    width: 1px;
    height: 100%;
}
.manual-link span::before { left: 0; top: 0; transform: scaleY(0); transform-origin: top center; }
.manual-link span::after  { right: 0; bottom: 0; transform: scaleY(0); transform-origin: bottom center; }
/* ホバー時に表示 */
.manual-link:hover::before,
.manual-link:hover::after,
.manual-link:hover span::before,
.manual-link:hover span::after {
    transform: scale(1);
}
@media screen and (max-width: 1024px) {
    .method-text p {
        font-size: 14px;
    }
}
/* レスポンシブ対応（スマホでは縦並び） */
@media screen and (max-width: 870px) {
    #Method .sec-title,
    #Method .sec-text {
        padding-left: 50px;
        padding-right: 50px;
    }
    .method-item {
        flex-direction: column !important;
    }
    .method-img,
    .method-txtwrap {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .method-img {
        height: 300px;
    }
    .method-txtwrap {
        padding: 20px;
    }
    .method-text {
        max-width: 90%;
    }
}
/* ------------------------ */
/* サンプル請求/お問い合わせ */
#Inquiry {
    background: linear-gradient(90deg,#5A1A17 0%, #C00000 100%);
    color: #ffffff;

    & .sec-title {
        margin-bottom: 50px;
    }
}
.inquirytxt {
    text-align: center;
    margin-bottom: 70px;

    & p {
        font-size: 24px;
        font-weight: bold;
        line-height: 150%;
    }
}
#Inquiry .rounded-btn a:hover {
    color: #C00000;
}
@media (max-width: 480px) {
    .inquirytxt {
        & p {
            font-size: 20px;
        }
    }
    .rounded-btn a {
        padding: 10px 25px;
    }
}
/* ------------------------ */
/* pagetopリンク */
#pagetop {
    background-color: rgba(90, 26, 23, 0.8);
    backdrop-filter: blur(10px);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: solid 3px #999999;
    color: #ffffff;
    transition: .3s;

    & .icon_arrowUp {
        position: relative;
        width: 100%;
        height: 100%;
    }

    & .icon_arrowUp::after {
        position: absolute;
        line-height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: .3s;
    }
}
#pagetop:hover {
    background-color: #5A1A17;
    
    & .icon_arrowUp::after {
        position: absolute;
        top: 30%;
    }
}
@media (max-width: 480px) {
    #pagetop {
        right: 20px;
    }
}
/* ------------------------ */
/* Footer */
footer {
    text-align: center;
    padding: 70px 10px 30px;
    background-color: #ffffff;
}
footer p {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}
@media (max-width: 480px) {
    footer p {
        font-size: 16px;
    }
}
.company {
    width: auto;
    height: 80px;
    margin-bottom: 70px;

    & a {
        display: block;
        width: 100%;
        height: 100%;

        & img {
            width: 100%;
            height: 100%;
        }
    }
}
/*------------------------------------------------------------------------------------------------------------*/
/* スクロールフェードイン */
.fadein {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-out;
}

.fadein.show {
    opacity: 1;
    transform: none;
}
/*------------------------------------------------------------------------------------------------------------*/
/* テキストアニメーション */
/* ------------------------------------ */
/* 光りながら出現 */
/* JSが処理するまで非表示 */
.glowAnime {
    visibility: hidden;
}

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

/* ------------------------------------ */
/* 背景色が伸びてから出現 */
.reveal-text {
    position: relative;
    overflow: hidden;
}

/* 背景の覆い */
.reveal-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #ffffff;
    animation: slideCover .5s ease forwards;
    animation-delay: 3.5s;
}

.reveal-text span {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    animation: textFadeUp 0.8s ease forwards;
    animation-delay: 3.8s;
}

@keyframes slideCover {
    0% { width: 0; left: 0; }
    50% { width: 100%; left: 0; }   /* 全面覆う */
    100% { width: 0; left: 100%; }  /* 右へ抜けて消える */
}

@keyframes textFadeUp {
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
/* ===================================================================================================== */
/* ===================================================================================================== */
/* form */
.form-wrapper {
    padding-top: 85px;
    background: linear-gradient(120deg,#000000 0%, #434343 50%, #000000 100%);
}
#sec-form {
    background: url(../img/project/upper/pjimg14.jpg) no-repeat center center / cover;
    padding: 0;
    height: 200px;
    text-align: center;
}
#sec-form h2 {
    color: #ffffff;
    width: 100%;
    height: 100%;
    display: block;
    line-height: 200px;
    background-color: rgba(26,26,26,0.5);
}
@media (max-width: 480px) {
    #sec-form {
        height: 100px;
    }
    #sec-form h2 {
        font-size: 20px;
        line-height: 100px;
    }
    .form-wrapper form {
        width: 80%;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}
.form-wrapper footer {
    background-color: transparent;
    color: #ffffff;
}
.form-wrapper form {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 50px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    box-shadow: 0 0 10px #ffffff;
}
.formimgbox {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.formimgbox img {
    height: 100%;
}

.form-group {
    margin: 0;
    padding: 24px 0;
}

.form-group label.title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1A1A1A;
}

.form-group .required {
    margin-left: 4px;
    white-space: nowrap;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 99%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    transition: .1s;
    background: #ffffff;
    margin-left: 1%;
}
.companyname input[type="text"],
.phone-num input[type="text"],
.yubinbango input[type="text"],
.todofuken select,
.form-group input[type="email"] {
    width: 40%;
}
@media (max-width: 480px) {
    .companyname input[type="text"],
    .phone-num input[type="text"],
    .todofuken select,
    .form-group input[type="email"] {
        width: 100%;
    }
    .yubinbango input[type="text"] {
        width: 70%;
    }
}
.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #0087ff;
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: solid 3px #0087ff;
}
.form-group textarea {
    min-height: 160px;
    resize: vertical;
}

.form-group .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-direction: column;
}

.form-group .radio-group label {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 0;
    color: #1A1A1A;
}

.form-group .radio-group input[type="radio"] {
    margin-right: 6px;
}

.form-submit {
    text-align: center;
    margin-top: 32px;
    border-bottom: none;
}

.form-submit button {
    background-color: #0063b1;
    color: #fff;
    font-size: 18px;
    padding: 12px 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit button:hover {
    background-color: #004a83;
}
.two-column .namecolumn {
    display: flex;
    align-items: center;
}
.two-column .column p {
    color: #666666;
}
div.mailaddress {
    flex-direction: column;
}
div.address input:nth-child(2n+1) {
    margin-top: 8px;
    margin-bottom: 8px;
}
.reflection {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid #0087ff;
    color: #0087ff;
    background-color: #ffffff;
    font-weight: bold;
    transition: .4s;
    white-space: nowrap;
}
.reflection:hover {
    background-color: #0087ff;
    color: #ffffff;
}
.reflection::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #0087ff;
    content: '';
    transition: width .3s ease;
}
.reflection:hover::before {
    width: 100%;
}
@media (min-width: 768px) {
    .two-column {
        display: flex;
        gap: 16px;
    }
}
@media (max-width: 767px) {
    .two-column {
        display: flex;
        gap: 16px;
        flex-direction: column;
    }
    .companyname input[type="text"],
    .form-group input[type="email"] {
        width: 99%;
    }
}
.error-summary {
    border: none;
}
/* ------------------------ */
/* Thanks */
.form-thanks {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}
.thanks {
    height: 100%;
    align-content: center;
}
.thanks-inner {
    color: #ffffff;
    text-align: center;
}
.thanks-inner p {
    margin: 50px 0;
    line-height: 150%;
}
@media (max-width: 480px) {
    section.thanks {
        padding: 100px 25px;
    }
    .thanks-inner h2 {
        font-size: 24px;
    }
    .form-thanks footer {
        padding-top: 80px;
    }
}