:root{
    --footer-text-color: #ffffff;
    --theme-color: #0335f6;
    --theme-color-accent:#02176f;
}
html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: black;
    animation: firstview 1.5s forwards; /* ← 1回だけ再生され、最後の状態を保持 */
    z-index: 888;
    pointer-events: none;
}

@keyframes firstview {
    0% {
        opacity: 1;
        z-index: 888;
    }
    99% {
        opacity: 1;
        z-index: 888;
    }
    100% {
        opacity: 0;
        z-index: -99999;
    }
}
html{ overflow-x: hidden;}
main{position: relative;}
main > section>:last-child{ padding-bottom: 5rem;}
.section-content { padding: 50px 0;margin-bottom: 50px; position: relative;}
main > section > :not(.hero-wrap) {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
main > section > div > *:not(h1,h2,.carousel) {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
h1{ font-size: clamp(28px, calc(28px + 4 * ((100vw - 771px) / 253)) ,32px);}
h2{ font-size: clamp(24px, calc(26px + 4 * ((100vw - 771px) / 253)) ,28px)}
h3{ font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px);}
h4{ font-size: clamp(14px, calc(14px + 4 * ((100vw - 771px) / 253)), 18px);}
p,figcaption,dt,dd,li,th{ font-size: clamp(14px, calc(14px + 2 * ((100vw - 771px) / 253)) ,16px);}

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

a{ text-decoration: none; cursor: pointer;}
img {
    user-drag: none; /* ドラッグ禁止 */
    user-select: none; /* 選択禁止 */
    -webkit-user-drag: none; /* Webkitブラウザ（ChromeやSafari）向け */
    -webkit-user-select: none;
    -moz-user-select: none; /* Firefox向け */
    -ms-user-select: none; /* IE向け */
}
/*-- loading --*/
   /* 画面全体を覆うラッパ */
    .loading-body {
        position: fixed;
        inset: 0;
        z-index: 9999;
        opacity: 1;
        transform-origin: center center;
    }

    .loading-body.loading-fadeout {
        animation: loadingFadeZoom .5s ease forwards;
    }

    
    @keyframes loadingFadeZoom {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }


    /* 元テキストは幅計測用なので非表示 */
    .loading p {
        display: inline-block;
        visibility: hidden;
        font-size: clamp(24px, calc(24px + 40 * ((100vw - 771px) / 253)) ,64px);
    }

    /* 黒背景のエリア（全画面） */
    .loading {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: black;
        --color: #F5F9FF;
        --duration: 1200ms;
        font-family: Roboto, Arial, sans-serif;
        font-size: clamp(24px, calc(24px + 40 * ((100vw - 771px) / 253)) ,64px);
        white-space: nowrap;
        user-select: none;
        color: var(--color);
    }

    /* ★ span の“塊”用ラッパ：ここを画面中央に置く */
    .loading-inner {
        position: absolute;
        inset: 0;
        margin: auto;  /* 四辺0 + margin:auto で上下左右中央 */
        /* width / height は JS で textWidth / textHeight をセット */
    }

    /* span は .loading-inner を基準に絶対配置 */
    .loading-inner span {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        text-indent: calc(var(--x) * -1);
        overflow: hidden;
        transform: translate(var(--x), 0); /* 初期位置：横だけずらす */
    }

    /* アニメ中のスタイル */
    .loading-inner.start span {
        animation: move var(--duration) ease-in-out var(--delay);
    }

    /* 縦揺れアニメーション */
    @keyframes move {
        0% {
            transform: translate(var(--x), 0);
        }
        30% {
            transform: translate(var(--x), var(--move-y));
        }
        82% {
            transform: translate(var(--x), var(--move-y-s));
        }
        100% {
            transform: translate(var(--x), 0);
        }
    }
/*=============================================================*/
@media screen and (max-width:770px){
    .hero-pc,.pc{ display: none !important;}
    
}
@media screen and (min-width:771px){
    .hero-sp,.sp{ display: none !important;}
    
}
/*-------ヘッダー------*/
.homelink{
    text-decoration: none;
}
.homelink > figure{
    display: flex; 
    align-items: center;
}
.homelink .logo-img{
    width: 230px;
    height: auto;
}
.homelink figcaption{
    color: black;
}
.btobpage{
    height: 85px;
    min-width: 1024px;
    position: fixed;
    right: 0;
    left: 0;
    background: #ffffff;
    z-index: 100;
}
.siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    max-width: calc(100vw - 16px);
    margin: auto;
    padding: 0 8px;
    background: linear-gradient(135deg, #7f848c 0%, #7f848c 7%, #b9b9b9 33%, #7f848c 80%, #7f848c 100%);
}
.siteHeader.pcStyle{ min-width: 770px;}
.siteHeader.spStyle { width: 100%; height: 56px;}

.siteHeader.spStyle .logo { padding: 16px 8px;}
header .logo{ padding: 24px;position: absolute;}
/*-- ナビボタン --*/
.contactnavmain{
    display: flex;
    gap:20px;
    max-width: 770px;
    margin-left: auto;
    justify-content: flex-end;
    padding-top: 24px;
    padding-right: 24px;
}
.contactnavbody {
    padding: 12px 21px;
    background: #ffffff;
    transition:all .5s;
    border: 1px solid;
}
.contactnavbody:hover {
    transform: scale(1.1);
    background: black;
}
.contactnavbody:hover p{ color:white;}
.contactnavbody a{ text-decoration: none;}

/*-- ナビリスト --*/
header .pc .navlist-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding-top: 26px;
}
header .navlist-contents {
    padding: 8px 12px;
}
header .navlist-contents::after {
  content: '';
  display: block;
  width: 0;
  border-bottom: solid 2px #dadada;
}
header .navlist-contents:hover::after {
  animation: border_anim .1s linear forwards;
}
@keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}
header .navlist-contents > p ,.contactnavbody p{
    font-family: serif;
    text-shadow: 0px 3px 10px #c0c0c0;
}
header .contactnavbody p{ color:rgb(0, 0, 0);}
/*-- 非表示部分 --*/
header .navilist-box { 
    position: absolute;
    width: 100%;
    left: 0;
    top: 136px;
    display: none;
    padding-top: 1%;
    padding-bottom: 1%;
    background: #b6b6b7;
    z-index: -1;
}
header .navilist-box > ul {
    width: 61%;
    float: right;
    border-left: 1px solid;
    padding: 0 1%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header .navilist-item { padding: 12px 0;padding-left: 1.5%;}
header .navlist-contents:not(:first-child):hover .navilist-box{ display: block;}
header .menu-name-label { font-size: clamp(21px, calc(21px + 3 * ((100vw - 771px) / 253)) ,24px);margin-left: 3%;padding: 12px 0; font-family: 'SoukouMincho';}
header .navilist-box > ul:hover > li {
    opacity: .5;
}

header .navilist-box > ul > li:hover {
    opacity: 1 !important;
}

header .menubtn {
    position: relative;
    cursor: pointer;
    display: flex;
    width: auto;
    height: 40px;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    justify-content: space-around;
    float: right;
    align-items: center;
}
header .menubtn span{
    display: block;
    width: 100%;
    height: 2px;
    background: black;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
header .navilist-box .label::before {
    content: "→";
    padding-right: 4px;
}
/* header モーダルレイアウト */
/* SPナビ（モーダル）の基本スタイル */
/* header ハンバーガーナビレイアウト */
header .btobnav.sp{
    width: calc(100vw - 16px);
    height: 56px;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 32px;
}
header .humbgermenu {
    display: flex;
    align-items: center;
    height: 55px;
    justify-content: flex-end;
    position:relative;
    transition: all .3s ease;
}
header .humbgermenu.is-open { z-index: 110;}
header .humbgermenu::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, #66e0ff, #0077ff);
    filter: blur(10px);               /* エッジをさらに柔らかく */
    transform-origin: 50% 50%;
    animation: amoebaBlob 8s ease-in-out infinite alternate;
    /* ここがポイント：polygonではなく path() */
    clip-path: path("M 50% 0% C 75% 0%, 100% 20%, 100% 45% C 100% 75%, 75% 100%, 50% 100% C 20% 100%, 0% 80%, 0% 50% C 0% 20%, 25% 0%, 50% 0% Z");
    z-index: -1;
    aspect-ratio: 1 / 1;
    width: 120%;
    transition: all .3s ease;
    border-radius: 12px;
}
@keyframes amoebaBlob {
    0% {
        clip-path: path("M 50% 0% C 78% 0%, 100% 20%, 100% 46% C 100% 78%, 76% 100%, 50% 100% C 22% 100%, 0% 80%, 0% 50% C 0% 20%, 24% 0%, 50% 0% Z");
        transform: scale(1.4) rotate(0deg);
    }

    25% {
        clip-path: path("M 52% -4% C 85% 2%, 104% 24%, 100% 50% C 96% 84%, 70% 106%, 46% 100% C 18% 94%, -4% 80%, 0% 48% C 4% 20%, 24% -4%, 52% -4% Z");
        transform: scale(1.78) rotate(3deg);
    }

    50% {
        clip-path: path("M 48% -2% C 72% -4%, 104% 16%, 102% 46% C 100% 84%, 74% 104%, 50% 104% C 24% 104%, -4% 82%, -2% 50% C 0% 18%, 26% -2%, 48% -2% Z");
        transform: scale(1.3) rotate(-4deg);
    }

    75% {
        clip-path: path("M 50% -6% C 80% -4%, 106% 18%, 104% 48% C 102% 80%, 78% 104%, 48% 104% C 18% 104%, -6% 80%, -4% 48% C -2% 20%, 22% -6%, 50% -6% Z");
        transform: scale(1.6) rotate(4deg);
    }

    100% {
        clip-path: path("M 50% 0% C 78% 0%, 100% 20%, 100% 46% C 100% 78%, 76% 100%, 50% 100% C 22% 100%, 0% 80%, 0% 50% C 0% 20%, 24% 0%, 50% 0% Z");
        transform: scale(1.4) rotate(0deg);
    }
}
header .menubtn.is-open .line1 { transform: translate(3px,12px) rotate(45deg);}
header .menubtn.is-open .line2 { opacity: 0;}
header .menubtn.is-open .line3 { transform: translate(2px,-14px) rotate(-45deg);}
header .spnavlist{
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
    width: 100dvw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    transform: translateX(100%);  /* 初期は右に隠す */
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 100; /* header(99)より前に出す */
    margin-top:56px;
}
header .background-design {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}
header .spnavlist ul {
    list-style: none;
    margin: 0;
    width: 100%;
    padding-top: 0%;
    transition:all .42s;
}
header .spnavlist .is-hide{
    transform: translate(-100%);
}
header .spnavlistbody {
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e0e0e0;
}
header .spnavlistbody:last-child {
    border-bottom: none;
}
header .spnavlistbody p,header .spnavlistbody a,header .spnav-sublist p {
    margin: 0;
    position: relative;
    color: white;
}
header .spnavlistbody p::after {
    content: ">";
    float: right;
}
header .spcontactnavbody { display: flex; gap: 16px; justify-content: center;}
header .spcontactnavbody a{
    text-decoration: none;
    padding: 16px;
    border-radius: 16px;
    width: 40%;
}
header .spcontactnavbody .sitemap {
    color: #ffffff;
    font-weight: bold;
    background: #46dbf2;
    background: linear-gradient(135deg, rgba(70, 219, 242, 1) 25%, rgba(72, 102, 250, 1) 100%);
}
header .spcontactnavbody .contact {
    color: #ffffff;
    font-weight: bold;
    background: #ff0f0f;
    background: linear-gradient(305deg, rgba(255, 15, 15, 1) 0%, rgba(255, 183, 0, 1) 100%);
}
header .spnavlist.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
header .panel-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
header .panel-stage.is-active{
    z-index: 1;
}
header .spnav-sublist {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 48px);
    height: 100%;
    transform: translateX(100vw);
    transition: all .42s ease;
}
header .spnav-sublist.is-active{
    transform: translateX(24px);
}
header .spnav-sublist li{
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e0e0e0;
}
header .botton-back {
    transform: translateX(calc(50% - 30px));
    margin-top: 32px;
}
header .botton-back p {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid;
}
/*=============================================================*/

/*=============================================================*/
.section-content.contact { background: white; margin-bottom: 0px;}
.section-content.contact .section-title { text-align: center;}
.section-content.contact .form-description{  margin-bottom: 32px;}
.formWrap { padding: 52px;background: aliceblue;border-radius: 16px; padding-left: 40px;}
.formWrap > * { font-weight: bold;}
.contactForm > dl > * { margin-bottom: 21px;}
.formWrap dt{ font-size: 18px;}
.formWrap .required{
    background: #00d800;
    font-size: 1.2rem;
    color: #fff;
    font-weight: normal;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    padding: 0 15px;
    margin-right: 10px;
    position: relative;
    top: -2px;
}
.formWrap .any {
    background: #999;
    font-size: 1.2rem;
    color: #fff;
    font-weight: normal;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    padding: 0 15px;
    margin-right: 10px;
    position: relative;
    top: -2px;
}
.formWrap dd > input{
    border: 1px solid #ddd;
    background: #fff;
    height: 40px;
    padding-left: 15px;
    width: 100%;
    font-size: 16px;
}
.formWrap dd > textarea {
    height: 15em;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background: #fff;
    width: 100%;
    font-size: 16px;
}
.formBtn {
    background: #00d800;
    padding: 8px 16px;
    color: white;
    border: 1px solid #d3d3d3;
    transition: all .3s ease;
}
.formBtn:hover {
    transform: translateY(10px);
    opacity: .5;
}

/*=====================フッター==============================*/
footer{ background: #7f848c; padding-top: 5rem; padding-left: 5%; padding-right: 5%;}
footer a { text-decoration: none; color:var(--footer-text-color);font-family: serif;}
footer .logo{
    display: flex;
    gap: 32px;
    align-items: center;
    transform: skewX(-10deg);
    font-family: math;
    margin-bottom: 5rem;
}
footer .line-design {
    width: 1px;
    height: 64px;
    background: black;
}
footer .logo img{ width: 320px;height: auto;}
.siteFooterOuterA{ padding-bottom: 48px;}
.siteFooterOuterB {
	background:#151515;
	text-align:center;
	padding:30px 0;
    width: 100dvw;
    transform: translateX(-5%);
}
.footSns {
	font-size:0;
}
.footSns li {
	display:inline-block;
	margin-right:20px;
	margin-bottom:20px;
}
.footSns li:last-child{
	margin-right:0;
}
.footSns svg{
	fill:white;
}
footer .siteFooterOuterB address {
    color:var(--footer-text-color);
	font-size:1.2rem;
}

footer .navlist { display: flex; justify-content: space-around;}
footer .footer-navtitle { display: flex; gap:8px;align-items: center; border-bottom: 1px solid white; padding-bottom: 8px;font-size: 21px; color:var(--footer-text-color);}
footer .footer-navtitle::before{ content:""; width: 21px;height: auto;aspect-ratio:1/1;background:  url(../img/logo_small.png) no-repeat; background-size: contain;filter: invert(100%);}
footer .footer-navitem { 
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
footer .footer-navitem::before {
    content: "";
    width: 3px;
    height: auto;
    aspect-ratio: 1/1;
    background: #ffffff;
    border-radius: 99%;
}
footer .footer-navitem::after{
    content:"";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
    background: #ffffff;
}
footer .footer-navitem:hover::after{ transform-origin: left top;transform: scale(1, 1);}

/*-- リンクパーツ --*/
    /*- single-about -*/
        .about-link-container {
            display: flex;
            flex-wrap: wrap;
            margin-top: 52px;
            border-top: 1px solid #838383;
        }
        .about-link { margin: 1%; flex: 0 0 360px; border-bottom: 1px solid;}
        .about-link p { padding: 12px 8px;position: relative;}
        .about-link p::before{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            transform-origin: right top;
            transform: scale(0, 1);
            transition: transform .3s;
            background: #000000;
            z-index: -1;
        }
        .about-link a:hover{
            color:white;
        }
        .about-link a:hover p::before{
            transform-origin: left top;
            transform: scale(1, 1);
        }
        .about-link p::after { content: "→"; margin-left: 16px;}
    /*=========================レスポンシブ==============================*/
@media screen and (max-width:770px){
    footer .navlist{ flex-direction: column;}
    footer .footer-navtitle{ width: 100%;}
    footer .logo{ flex-direction: column;}
}