@charset "utf-8";
@import "setting";
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*                reset (デフォルト設定の打ち消し)
======================================================= */
@include reset;

/*                 基本レイアウト
======================================================= */
#main_area{
    font-family: $fontNoto;
}

/*                共通パーツ
======================================================= */
//上スライド
.slide_anime{
    animation: slideInUp 1s 1s forwards;
    transform: translateY(30px);
    opacity: 0;
}
//右からスライド
.slide_inRight{
    animation: slideInRight 1s 1s forwards;
}

/*moveがついたら*/
/*.aniは最初左に隠れていてmoveがついたらスライドで出てくる*/

  .move .background-slide {
    transform: translateX(0); /* スクロール時に元の位置に戻す */
  }
  
  .move .sec3_1_pic {
    opacity: 1; /* スクロール時にフェードイン */
  }
  

.ani {
    transform: translateX(-100%); /* 初期状態を左にオフセット */
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* アニメーションの速度とイージング設定 */
  }
  
  .move {
    transform: translateX(0); /* スクロール時に元の位置に戻す */
    opacity: 1; /* スクロール時に表示 */
  }
  
/*下から出てくる*/
.ani_1 {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; // アニメーションの速度とイージング設定
}

.ani_1.move {
    transform: translateY(0);
    opacity: 1;
}

.ani_2 {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; // アニメーションの速度とイージング設定
}

.ani_2.move {
    transform: translateX(0);
    opacity: 1;
}

/*ani_3は右から出てくる*/
.ani_3 {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; // アニメーションの速度とイージング設定
}
.ani_3.move {
    transform: translateX(0);
    opacity: 1;
}

.ani_4 {
    transform: translateX(100% -50%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; // アニメーションの速度とイージング設定
}
.ani_4.move {
    transform: translate(-19%,-50%);
    opacity: 1;
}


/*                ヘッダー
======================================================= */
/*headerは幅253px、縦90pxの横並びの箱 背景色　透けている　vhで表示　liタグは幅120px、高さ58px　上下パディング16px　ホバーで文字サイズ大きく*/
header{
    #header{
    /*3秒後にヘッダーが表示されるようにする*/
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,0.4);
    opacity: 2;
    .logo img{
        width: 14vw;
        height: 90px;
        object-fit: cover;
        float: left;
    }
   
    ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        li{
            width: 14vw;
            height: 90px;
            padding: 16px 0;
            text-align: center;
            font-size: 20px;
            line-height: 0.5em;
            transition: font-size 0.3s;
            &:hover{
                cursor: pointer;
                transform: scale(1.2);
            }
            @media screen and (max-width: 768px){
                &:hover{
                    display: none;
                }
                
            }
        }
        li+li{
            height: 90px;
            border-left: 1px solid  #ffffff;
        }
        a{
            font-weight: 700;
            margin-top: 5px;
            color: #F5F5F5;
        }
        p{
            margin-top: 25px;
            color: #F5F5F5;
            font-size: 15px;
            font-weight: 400;
        }
    }
        /*ヘッダー高さは80px　ロゴは幅200px　ulタグ部分は表示させない*/
        @include media768{
            background-color: rgba(0,0,0,0);
            height: 80px;
            .logo img{
                width: 200px;
                height: 80px;
            }
            ul{
                display: none;
            }
        }
        @include media480{
            height: 60px;
            .logo img{
                width: 180px;
                height: 60px;
            }
        }
    }
}   
.menu-icon{
    display: none;
}

/*                スマフォメニューボタン    
======================================================= */
/*ハンバーガーのラインは幅50px　縦5px　間隔10px*/
@include media768{
    .menu-icon{
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        @include media480{
            top: 10px;
            right: 10px;
        }
        .line{
            width: 50px;
            height: 5px;
            background-color: #1F2840;
            margin: 10px 0;
            @include media480{
                width: 40px;
                height: 4px;
                margin: 8px 0;
            }
        }
        //ハンバーガーをクリックした時のスタイル
        &.active .line:nth-child(1) {
            height: 1px;
            width: 40px;
            transform: translateY(13px) rotate(45deg);
            @include media480{
                height: 1px;
                width: 30px;
                transform: translateY(10px) rotate(45deg);
            }
        }
        &.active .line:nth-child(2) {
            opacity: 0;
        }
        &.active .line:nth-child(3) {
            height: 1px;
            width: 40px;
            transform: translateY(-13px) rotate(-45deg);
            @include media480{
                height: 1px;
                width: 30px;
                transform: translateY(-10px) rotate(-45deg);
            }
        }
    }
}
/*               スマフォメニュー
======================================================= */
@include media768 {
    #sp_menu {
        z-index: 100;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 1000px;
        background-color: #ffffff;
        color: #000000;
        transition: 0.3s ease;
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        &.active {
            right: 0;
        }
        .nav-menu {
            margin-top: 80px;
            right: 0;
            ul {
                color: #1F2840;
                list-style: none;
                padding: 0;
                .nav-item {
                    font-size: 29px;
                    font-weight: 700;
                    padding: 10px 0;
                }
                .sub-item{
                    font-size: 18px;
                    padding: 10px 0;
                }
            }
        }
    }
}
@include media769{
    #sp_menu {
        display: none;
    }
}

/*                フッター
======================================================= */
/*フッターは幅100％　高さ430px　左右にbox leftは幅1/3 文字は20px　rightは幅2/3　enは文字30px　太さ700　jpは18px　太さ400*/

#footer {
    bottom: 0;
    width: 100%;
    .foot_inner {
        width: 100%;
        height: 430px;
        background: linear-gradient(90deg, #001E6BE0 40%, #46A9E1);
        display: flex;

        .footer-left {
            width: 33.3333%;
            height: 100%;
            padding: 50px 0;
            text-align: center;
            color: white;
            text-align: left;
            font-size: 20px;
            font-weight: 400;
            margin-left: 60px;
            img {
                margin-bottom: 20px;
            }
            h4{
                margin: 50px 0;
            }
            p
            {
                line-height: 2.5em;
            }
        }
         //span enは3つずつ2行に並べる
        .footer-right {
            width: 66.6666%;
            height: 100%;
            padding: 50px 100px;
            ul {
                display: flex;
                list-style: none;
                padding: 0;
                //1.2.4.5番目のリストはmargin-right50pxをつける
                li {
                    margin-bottom: 20px;
                    margin-right: 8%;
                    a {
                        line-height: 3.5em;
                        text-decoration: none;
                        color: white;
                      .en {
                            font-size: 29px;
                            font-weight: 700;
                            margin-bottom: 5px;
                        }

                        .jp {
                            display: block;
                            font-size: 16px;
                            font-weight: 400;
                            width: 230px;
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 768px) {
        height: 300px;
        flex-direction: column;
        align-items: center;

        .footer-left, .footer-right {
            width: 100%;
            padding: 30px 0;
            text-align: center;

            p {
                font-size: 16px;
            }

            .en {
                font-size: 20px;
            }
        }

        .footer-right {
            ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;

                li {
                    width: 50%;
                    margin-bottom: 10px;

                    a .en {
                        font-size: 18px;
                    }

                    a .jp {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}