/*==================================================
 animation.css
 成伯住設 オリジナルテーマ
==================================================*/

/* ===========================
 共通
=========================== */

:root{

    --duration:.8s;
    --delay:.15s;
    --ease:cubic-bezier(.22,1,.36,1);

}

.anim{
    opacity:0;
    transition:all var(--duration) var(--ease);
}

.anim.show{
    opacity:1;
}


/* ===========================
 Fade Up
=========================== */

.fade-up{

    transform:translateY(60px);

}

.fade-up.show{

    transform:translateY(0);

}


/* ===========================
 Fade Down
=========================== */

.fade-down{

    transform:translateY(-60px);

}

.fade-down.show{

    transform:translateY(0);

}


/* ===========================
 Fade Left
=========================== */

.fade-left{

    transform:translateX(-60px);

}

.fade-left.show{

    transform:translateX(0);

}


/* ===========================
 Fade Right
=========================== */

.fade-right{

    transform:translateX(60px);

}

.fade-right.show{

    transform:translateX(0);

}


/* ===========================
 Zoom
=========================== */

.zoom{

    transform:scale(.9);

}

.zoom.show{

    transform:scale(1);

}


/* ===========================
 Blur
=========================== */

.blur{

    filter:blur(10px);

}

.blur.show{

    filter:blur(0);

}


/* ===========================
 Rotate
=========================== */

.rotate{

    transform:rotate(-5deg) scale(.95);

}

.rotate.show{

    transform:rotate(0) scale(1);

}


/* ===========================
 Hero Title
=========================== */

.hero h1{

    animation:heroTitle 1.2s ease forwards;

}

@keyframes heroTitle{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:none;

}

}


/* ===========================
 Hero Lead
=========================== */

.hero .lead{

animation:heroLead 1.4s .3s forwards;

opacity:0;

}

@keyframes heroLead{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}


/* ===========================
 ボタン
=========================== */

.btn-line,
.btn-mail,
.works-btn{

transition:.35s;

}

.btn-line:hover,
.btn-mail:hover,
.works-btn:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.15);

}


/* 光エフェクト */

.btn-line::before,
.btn-mail::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60px;

height:100%;

background:rgba(255,255,255,.35);

transform:skewX(-20deg);

transition:.7s;

}

.btn-line:hover::before,
.btn-mail:hover::before{

left:130%;

}


/* ===========================
 Card Hover
=========================== */

.card,
.service-card,
.trust-item{

transition:.35s;

}

.card:hover,
.service-card:hover,
.trust-item:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}


/* ===========================
 Image Zoom
=========================== */

.image-hover{

overflow:hidden;

border-radius:15px;

}

.image-hover img{

transition:.8s;

}

.image-hover:hover img{

transform:scale(1.08);

}


/* ===========================
 Under Line
=========================== */

.menu a{

position:relative;

}

.menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:50%;

width:0;

height:2px;

background:#3AA64B;

transition:.35s;

transform:translateX(-50%);

}

.menu a:hover::after{

width:100%;

}


/* ===========================
 Header
=========================== */

.header{

transition:.4s;

}

.header.scrolled{

background: rgb(255 255 255 / 60%);

backdrop-filter:blur(12px);

box-shadow:0 10px 30px rgba(0,0,0,.08);

}


/* ===========================
 Scroll Down
=========================== */

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

}

.scroll span{

display:block;

width:2px;

height:60px;

background:#fff;

animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

0%{

transform:scaleY(0);

transform-origin:top;

}

50%{

transform:scaleY(1);

transform-origin:top;

}

51%{

transform-origin:bottom;

}

100%{

transform:scaleY(0);

transform-origin:bottom;

}

}


/* ===========================
 Floating
=========================== */

.float{

animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


/* ===========================
 Counter
=========================== */

.counter{

transition:.4s;

}


/* ===========================
 Responsive
=========================== */

@media(max-width:768px){

.fade-left,
.fade-right{

transform:translateY(40px);

}

.fade-left.show,
.fade-right.show{

transform:none;

}

}

/* ==========================
   Bug Swing Animation
========================== */

.icon-bug{
    transform-origin: center;
    animation: bugIdle 3s ease-in-out infinite;
}

@keyframes bugIdle{

    0%,20%,100%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(-10deg);
    }

    35%{
        transform: rotate(10deg);
    }

    45%{
        transform: rotate(-8deg);
    }

    55%{
        transform: rotate(8deg);
    }

    65%{
        transform: rotate(0deg);
    }

}


/*=========================
TOPへ戻る
=========================*/

#pageTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:62px;

    height:62px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(135deg,#0A6ACB,#38C7FF);

    backdrop-filter:blur(15px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    inset 0 1px 2px rgba(255,255,255,.4);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.45s;

    z-index:9999;

    overflow:hidden;

}


/* 光 */

#pageTop::before{

    content:"";

    position:absolute;

    width:120%;

    height:150%;

    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.6),
    transparent);

    transform:translateX(-140%) rotate(20deg);

    transition:.8s;

}

#pageTop:hover::before{

    transform:translateX(140%) rotate(20deg);

}

#pageTop:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.35);

}

/* 表示 */

#pageTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#pageTop svg{

    width:22px;

    height:22px;

}


/* スマホ */

@media(max-width:768px){

#pageTop{

    width:56px;

    height:56px;

    right:15px;

    bottom:95px;

}

}



/* ==================================================
   LOADING SCREEN
================================================== */


#siteLoader {

    position: fixed;

    inset: 0;

    width:100%;
    height:100vh;

    background:#0b2948;

    z-index:99999;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* ==================================================
   背景
================================================== */


.loader-bg {

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(255,255,255,.08),
        transparent 45%
    ),

    #0b2948;

}



/* ==========================================
   リアルなしずく形
========================================== */

.loader-drop {

    position:absolute;

    top:-80px;
    left:50%;

    width:34px;
    height:50px;


    background:

    linear-gradient(
        145deg,
        #d9f8ff 0%,
        #59d5ff 35%,
        #008bd2 100%
    );


    /*
      上が尖る
      下が丸く膨らむ
    */
    clip-path: polygon(
        50% 0%,
        65% 25%,
        82% 48%,
        90% 65%,
        88% 78%,
        78% 90%,
        62% 98%,
        50% 100%,
        38% 98%,
        22% 90%,
        12% 78%,
        10% 65%,
        18% 48%,
        35% 25%
    );


    transform:
        translateX(-50%);


    z-index:20;


    filter:

    drop-shadow(
        0 15px 25px rgba(0,0,0,.25)
    );

}



/* 光の反射 */

.loader-drop span {

    position:absolute;


    width:8px;

    height:18px;


    top:12px;

    left:10px;


    background:

    rgba(255,255,255,.75);


    border-radius:50%;


    transform:rotate(-25deg);

}






/* ==================================================
   着水ポイント
================================================== */


.loader-water {


    position:absolute;


    top:58%;


    left:50%;


    transform:

    translate(-50%,-50%);


    width:80px;

    height:40px;


    z-index:10;


}



/* ==================================================
   波紋
================================================== */


.loader-ripple {


    position:absolute;


    left:50%;

    top:50%;


    width:60px;

    height:22px;


    border:

    2px solid rgba(120,220,255,.8);


    border-radius:50%;


    transform:

    translate(-50%,-50%)
    scale(.2);


    opacity:0;


}



/* 2個目 */

.loader-ripple.ripple02 {


    width:90px;

    height:30px;

}



/* 3個目 */

.loader-ripple.ripple03 {


    width:120px;

    height:40px;

}



/* ==================================================
   拡大する円
================================================== */


.loader-circle {


    position:absolute;


    left:50%;

    top:58%;


    width:20px;

    height:20px;


    background:#fff;


    border-radius:50%;


    transform:

    translate(-50%,-50%)
    scale(0);


    z-index:30;


}

/* ==================================================
   ロゴ
================================================== */


.loader-logo {

    position:absolute;


    left:50%;

    top:45%;


    transform:

    translate(-50%,40%)
    scale(.85);


    width:240px;


    z-index:50;


    opacity:0;


    /*filter:

    blur(15px);*/


}



.loader-logo img {


    width:100%;


    height:auto;


    display:block;


    filter:

    drop-shadow(
        0 15px 25px rgba(0,0,0,.25)
    );


}



/* ==================================================
   キャッチコピー　※必要ない
================================================== */


.loader-copy {

    position:absolute;

    left:50%;

    top:55%;

    z-index:9999;

    opacity:1;

    white-space:nowrap;

    text-align:center;

    transform:translateX(-50%);

}


.loader-copy p {

    margin:0;

    color:#0f3458;

    font-size:22px;

    font-weight:700;

    letter-spacing:.18em;

    white-space:nowrap;

}



/* ==================================================
   ローディング終了用
================================================== */


#siteLoader.hide {


    pointer-events:none;


}



/* ==================================================
   PC調整
================================================== */


@media(max-width:768px){


    .loader-logo {


        width:190px;


    }

    .loader-copy {

    top:55%;

    }


    .loader-copy p {


        font-size:16px;


        letter-spacing:.12em;


    }


}