/* ===================================================
  File:        common.css
  Description: ページ共通部分のスタイルシート
  Author:      H.Y
  Version:     1.0.0
  Last Update: 2025-10-12 : H.Y
  Log:
    - 2025-10-12: 初版　: H.Y
==================================================== */

@charset "UTF-8";
/* =============================
common
===============================*/

/* 変数 */
:root {
    --primary-white: #FFF;
    --primary-black: #161616;
    --primary-lightblack: #343939;
    --primary-gray: #C6D1D1;
    --primary-darkgray: #A8B7B7;
    --primary-blue: #007E8E;
    --primary-yellow: #CFD14A;

}

html {
    font-size: 62.5%;
}

body {
    font-family: 
        "Zen Kaku Gothic Antique",
        "Playfair Display",
        'Noto Sans JP';
    font-style: normal;
    color: var(--primary-black,#313131);
    background-color: var(--primary-white);
    line-height: 1.6;

}

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


/* =============================
header
===============================*/

.header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 5%;
}

.header.fixed{
    position: fixed;
    z-index: 999;/*最前面へ*/
    top:0;
    right:0;
}

.nav {
    display:flex;
    position: fixed;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* 一番手前 */
    z-index: 1000;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(49, 49, 49, 0.85) 37.98%, rgba(94, 94, 94, 0.85) 70.67%, rgba(130, 130, 130, 0.85) 100%);
    backdrop-filter: blur(7.5px);
    transform: translateX(110%);
    transition: transform 0.4s;
}

/* .nav.activeメニュー */
.nav.active {
    transform: translateX(0);
}

.nav__list {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:  auto 0;
    gap:50px
}

.header__btn {
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2000;
    width: 44px;
    height: 27px;
    cursor: pointer;
}

.btn__line {
    display: inline-block;
    width: 44px;
    height: 14px;
    /* 楕円 */
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--primary-black); /* 内側に枠線 */
    transition:
        height 0.4s ease,
        transform 0.4s ease,
        opacity 0.4s ease,
        box-shadow 0.4s ease
    ;
}

/* ハンバーガーボタン */
/* 楕円2つ目 */
.btn__line:nth-of-type(2) {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    transition: 
        top 0.4s ease,
        width 0.4s ease,
        transform 0.4s ease 0.4s,
    ;
}

/* 楕円2つ目疑似要素 */
.btn__line:nth-of-type(2)::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 7px;
    width: 3.6px;
    height: 3.6px;
    background-color: var(--primary-blue);
    border-radius: 50%;
}

/* 楕円2つ目疑似要素 */
.btn__line:nth-of-type(2)::before {
    position: absolute;
    top: 0;
    left: 7px;
    width: 3.6px;
    height: 3.6px;
    background-color: var(--primary-black);
    border-radius: 50%;
    content: "";
}

/* ハンバーガーボタンが押されたとき */
/* 楕円1つ目 */
.header__btn.active .btn__line:nth-last-of-type(1)  {
    height: 1.2px;
    transform: translateY(-7px) rotate(135deg) scaleX(0.8);
    box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
    transition: 
        height 0.4s ease,
        transform 0.4s ease 0.4s,
        box-shadow 0.4s ease;
    ;
}

/* 楕円2つ目 */
.header__btn.active .btn__line:nth-last-of-type(2) {
    height: 1.2px;
    opacity: 0;
    box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
    transition: 
        height 0.4s ease,
        opacity 0.4s ease
        box-shadow 0.4s ease,
    ;
}

/* 楕円3つ目 */
.header__btn.active .btn__line:nth-last-of-type(3) {
    height: 1.2px;
    transform: translateY(19.5px) rotate(-135deg) scaleX(0.8);
    box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
        transition: 
        height 0.4s ease,
        transform 0.4s ease 0.4s,
        box-shadow 0.4s ease;
    ;
}

.nav__item {
    display: flex;
    align-items: center;
    color: var(--primary-white);
    font-size: 2rem;
    font-family: "Playfair Display";
    font-weight: 400;
}

.nav__item::before {
    /* 初期表示は非表示 */
    width: 0; 
    height: 0;
    background-color: transparent;
    border-radius: 50%;
    transition: 0.3s;
    transform: translateY(50%);
    content: "";
}

.nav__item:hover::before {
    width: 6px;
    height: 6px;
    margin-right: 20px;
    background-color: var(--primary-blue);
}

.header_logo {
    width: 35px;
    height: auto;
}


/* header pc */
@media screen and (min-width:769px){
    .header {
        padding: 20px 30px 5px 30px;
    }

    .header_logo {
        width: 64px;
        height: auto;
    }

    .header__btn {
        width: 64px;
        height: 39px;
    }

    .btn__line {
        display: inline-block;
        width: 64px;
        height: 20px;
        border-radius: 50%; /* これで楕円になる */
        box-shadow: inset 0 0 0 1px var(--primary-black); /* 内側に枠線 */
        transition:
            height 0.4s ease,
            /* width 0.4s ease, */
            transform 0.4s ease,
            opacity 0.4s ease,
            box-shadow 0.4s ease
        ;
    }

    .btn__line:nth-of-type(2) {
        position: absolute;
        top:50%;
        transform: translateY(-50%);        
        transition: 
            top 0.4s ease,
            width 0.4s ease,
            transform 0.4s ease 0.4s,
        ;
    }

    .btn__line:nth-of-type(2)::after {
        position: absolute;
        bottom: 0;
        right: 9px;
        width: 5px;
        height: 5px;
        background-color: var(--primary-blue);
        border-radius: 50%;
        content: "";
    }

    .btn__line:nth-of-type(2)::before {
        position: absolute;
        top: 0;
        left: 9px;
        width: 5px;
        height: 5px;
        background-color: var(--primary-black);
        border-radius: 50%;
        content: "";
    }

    .header__btn.active .btn__line:nth-last-of-type(1)  {
        height: 1.2px;
        transform: translateY(-19.5px) rotate(135deg) scaleX(0.8);
        box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
        transition: 
            height 0.4s ease,
            transform 0.4s ease 0.4s,
            box-shadow 0.4s ease;
        ;
    }

    .header__btn.active .btn__line:nth-last-of-type(2) {
        height: 1.2px;
        opacity: 0;
        box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
        transition: 
            height 0.4s ease,
            opacity 0.4s ease
            box-shadow 0.4s ease,
        ;
    }

    .header__btn.active .btn__line:nth-last-of-type(3) {
        height: 1.2px;
        transform: translateY(19.5px) rotate(-135deg) scaleX(0.8);
        box-shadow: inset 0 0 0 1px white; /* 内側に枠線 */
        transition: 
            height 0.4s ease,
            transform 0.4s ease 0.4s,
            box-shadow 0.4s ease;
        ;
    }

    .nav {
        justify-content: center;
        align-items: center;
        display:flex;
        flex-direction: column;
        right: 0;
        /* 一番手前 */
        z-index: 1000;
        width: 20%;
        height: 100vh;
        background: linear-gradient(180deg, rgba(49, 49, 49, 0.85) 37.98%, rgba(94, 94, 94, 0.85) 70.67%, rgba(130, 130, 130, 0.85) 100%);
        backdrop-filter: blur(7.5px);
        transition: transform 0.4s;
    }
}/* pc 769px */



/* =============================
footer
===============================*/
.footer {
    justify-content: center;
    align-items: center;
    padding: 35px 39px 0px 39px;
    background-color: var(--primary-lightblack);
}

.footerNav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 31px;
    margin-bottom: 70px;
}

.footerNav__item {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: calc(100% / 3);
    max-width: 90px;
    color: var(--primary-white);
    font-family: "Playfair Display";
    font-size: 1.8rem;
    font-weight: 400;
    line-height: normal;
}

.footerNav__item:not(:last-of-type)::after {
    position: absolute;
    right: -15px;
    height: 100%;
    border-left: 1px solid var(--primary-white); 
    content: "";
}

.copy {
    text-align: right;
    color: var(--primary-white);
    font-size: 1rem;
    font-weight: 400;
}


/* footer pc */
@media screen and (min-width:769px){

    .footer {
        padding: 15px 6%;
    }

    .footerNav__list {
        justify-content: flex-start;
        align-items: center;
        gap: 31px;
        margin-bottom: 50px;
    }

    .footerNav__item {
        font-size: 2rem;
    }

    .copy {
        font-size: 1.2rem;
    }
}


/* =============================
Contact
===============================*/

.section--contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    /* padding: 35px 39px 15px 39px; */
    /* padding: 35px 10% 30px 10%; */
    padding: 40px 10% 80px 10%;
    background: var(--primary-lightblack);
    position: relative;
}

.section--contact .topic {
    color: var(--primary-white);
}

.contact__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
}

.contact__text {
    text-align: center;
    color: var(--primary-white);
    font-size: 1.2rem;
    font-weight: 300;
}

.contact__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 3px 47px;
    gap: 18px;
    max-width: 400px;
    border-radius: 50px;
    border: 1px solid var(--primary-white);
}

.contact__mail {
    color: var(--primary-white);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}


.topBtn--pc {
    display: none;
}


.topBtn--sp {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    top:40px;
    right:15px;
    height: 49px;
    width: 65px;
}
    
.topBtn--sp .topBtn__circle {
    position: absolute;
    bottom: 0;
    z-index: 10;
}


.topBtn__text {
    position: absolute;
    z-index: 100;
    bottom: 0;
    background-color: var(--primary-lightblack);
    
}

.contact__illust {
    position: absolute;
    width: 45px;
    opacity: 0;
}


.contact__illust:nth-last-of-type(1) {
    top: 200px;
    /* left: 100px; */
    left: 7%;
    /* width: 20px; */
    width: 1.4%;
    animation: fadeIn1 8s ease-in-out infinite ;
}

.contact__illust:nth-last-of-type(2) {
    top: 170px;
    /* left: 180px; */
    left: 12.5%;
    /* width: 30px; */
    width: 2%;
    animation: fadeIn2 8s ease-in-out infinite ;
}

.contact__illust:nth-last-of-type(3) {
    top: 90px;
    /* left: 250px; */
    left: 17%;
    /* width: 45px; */
    width: 2.5%;
    animation: fadeIn3 8s ease-in-out infinite ;
}

@keyframes fadeIn1 {
  0%   { opacity: 0; }
  11.11%  { opacity: 1; }   /* フェードイン 1s */
  22.22%  { opacity: 1; }   /* 表示保持 1s */
  33.33%  { opacity: 0; }   /* フェードアウト 1s */
  100% { opacity: 0; }      /* 停止 6s */
}

@keyframes fadeIn2 {
  0%   { opacity: 0; }
  33.33%  { opacity: 0; }
  44.44%  { opacity: 1; }   /* 2番目フェードイン */
  55.55%  { opacity: 1; }   /* 表示保持 */
  66.66%  { opacity: 0; }   /* フェードアウト */
  100% { opacity: 0; }
}

@keyframes fadeIn3 {
  0%   { opacity: 0; }
  66.66%  { opacity: 0; }
  77.77%  { opacity: 1; }   /* 3番目フェードイン */
  88.88%  { opacity: 1; }   /* 表示保持 */
  100% { opacity: 0; }
}



/* contact pc */
@media screen and (min-width:769px){
    .section--contact {
        position: relative;
        /* padding: 100px 90px 50px 90px; */
        padding: 80px 6% 80px 6%;
        gap: 50px;
    }

    .contact__content {
        /* gap: 30px; */
        gap: 24px;
    }

    .spBr {
        display: none;
    }

    .contact__text {
        font-size: 1.6rem;
    }

    .contact__btn {
        padding: 8px 100px;
        gap: 20px;
    }

    .contact__btn:hover img {
        animation: flyaway 1.2s ease  forwards;
        animation-timing-function: linear
    }

    .topBtn {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top:80px;
        right:70px;
        height: 72px;
        width: 101px;
    }
    
    .topBtn__circle {
        position: absolute;
        z-index: 10;
        bottom: 0;
        transition: 0.7s ease-out;
    }

    .topBtn:hover .topBtn__circle {
        transform: translateY(-65%);
    }

    .topBtn__text {
        position: absolute;
        z-index: 100;
        bottom: 0;
        background-color: var(--primary-lightblack);
    }

    .topBtn--sp {
        display: none;
    }

    /* 紙飛行機アニメーション（PCのみ） */
    @keyframes flyaway {
        0% {
            transform: translate(0, 0) rotate(0deg);
        }
        25% {
            transform: translate(25px, -4px) rotate(0deg);
        }
        50% {
            /* transform: translate(30px, -5px) rotate(0deg); */
            transform: translate(50px, -14px) rotate(0deg);
        }
        75% {
            transform: translate(75px, -24px) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translate(100px, -35px) rotate(0deg);
            opacity: 0;
        }
    }

    .contact__mail {
        font-size: 2.2rem;
    }

}

/* =============================
slider
===============================*/

/* 非アクティブなドット */
.slick-dots li button:before {
    font-size: 11px;          /* ドットの大きさ */
    color: #fff;              /* ドットの色 */
    opacity: 1;               /* デフォルトは0.25なので見づらい場合は1に */
}


/* =============================
loading
===============================*/



.loading {
    position: fixed;
    text-align:center;
    z-index: 3000;
    width: 100%;
    height: 100%;
    /* background:var(--primary-lightblack); */

      opacity: 1;
  visibility: visible;

  background-color: #FFF;
  transition: all 1.5s;
    
}

.loading.is-active {

  opacity: 0;
  visibility: hidden;

}



.loading__animation {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;


    background:var(--primary-lightblack);
  opacity: 0;
  visibility: hidden;

}

.loading__animation.is-active {
  opacity: 1;
  visibility: visible;
}

.drop {
    position: absolute;
    top: calc(50% + 10px);
    width: 5px;
    height: 5px;
    background-color: var(--primary-white);
    border-radius: 50%;
    box-shadow: 0 0 3.2px rgba(255, 255, 255, 0.8);
    animation: dropIn 1.2s ease forwards ;
}

@keyframes dropIn {
    0% {
        opacity: 1;
        transform: translateY(-200px);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.water__small {
    position: absolute;
    top: 50%;
    width: 80px;       /* 横幅 */
    height: 16px;      /* 縦幅 */
    transform: translateY(8px);
    border-radius: 50%; /* ←これで楕円になる */
    border: 1px solid var(--primary-white);
    animation: waterIn_small 1.2s ease-out forwards ;
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes waterIn_small {
    0% {
        opacity: 0;
        box-shadow: 0 0 2.5px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.8;
        /* transform: scale(1.1); */
    }
    100% {
        opacity: 0;
        transform: translateY(8px) scale(1.1, 1.1); 
    }
}

.water__medium {
    position: absolute;
    top: 50%;
    width: 160px;       /* 横幅 */
    height: 32px;      /* 縦幅 */
    border-radius: 50%;
    border: 1px solid var(--primary-white);
    animation: waterIn_medium 1.2s ease-out forwards ;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes waterIn_medium {
    0% {
        opacity: 0;
        box-shadow: 0 0 2.5px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.8;
        /* transform: scale(1.1); */
    }
    100% {
        opacity: 0;
        transform: scale(1.1, 1.1); 
    }
}

.water__large {
    position: absolute;
    top: 50%;
    width: 240px;       /* 横幅 */
    height: 48px;      /* 縦幅 */
    border-radius: 50%;
    border: 1px solid var(--primary-white);
    transform: translateY(-8px);
    /* box-shadow: 0 0 2.5px rgba(255, 255, 255, 0.8); */
    animation: waterIn_large 1.2s ease-out forwards ;
    animation-delay: 1.5s;
    opacity: 0;
}

@keyframes waterIn_large {
    0% {
        opacity: 0;
        box-shadow: 0 0 2.5px rgba(255, 255, 255, 0.8);
    }
    50% {
        opacity: 0.8;
        /* transform: scale(1.1); */
    }100% {
        opacity: 0;
        transform: translateY(-8px) scale(1.1, 1.1); 
    }
}

.loading__animation p {
    position: absolute;
    top: 60%;
    color: var(--primary-white);
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 4px;
    animation: text_fadeIn 2.5s ease-in-out forwards ;
    /* 少し早めにだす */
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes text_fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

/* =============================
loading
===============================*/
/* SPでは非表示 */
#stalker {
    display: none;
}


@media screen and (min-width:769px){
    #stalker {
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        position: fixed;
        top: -25px;
        left: -25px;
        z-index: 10000;
        width: 40px;
        height: 40px;
        background: var(--primary-yellow);
        opacity: 0.5;
        filter: blur(4px);
        border-radius: 50%;
        transform: translate(0,0);
        transition: transform 0.2s;
        transition-timing-function: ease-out;
    }
    
    #stalker span {
        display: none;
        font-size: 13px;
        font-family: "Playfair Display";
        color: var(--primary-white);
        transition: 0.2s;
    }
    
    #stalker.viewmore .stalker__viewmore {
        display: block;
        transition: 0.2s;
    }

    #stalker.menu .stalker__menu {
        display: block;
    } 
    
    #stalker.viewmore {
        width: 80px;
        height: 80px;
        filter: blur(0px);
        opacity: 0.8;
    }

    #stalker.menu {
        width: 75px;
        height: 75px;
        background: var(--primary-blue);
        filter: blur(0px);
        transition: 0.2s;
        opacity: 0.8;
    }

    #stalker.hover {
        width: 50px;
        height: 50px;
        background: var(--primary-yellow);
        filter: blur(0px);
        opacity: 0.8;
    }

}