@charset "UTF-8";

/*==================================================================================================

       ヘッダー

===================================================================================================*/


/*=================================================
        mainHead
==================================================*/
header.mainHead {
    display: block;
    width: 100%;
    }

    .naviWrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        column-gap: 2.4rem;
        line-height: 1;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        position: absolute;
        padding: 1rem;
        box-sizing: border-box;
        z-index: +1;
        }

        .naviLogo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1 1 0;
            width: 290px;
            aspect-ratio: 145 / 16;
            color: #fff;
            padding: 0;
            margin: 0;
            -webkit-transition:  all .3s ease;
                -moz-transition: all .3s ease;
                -o-transition:   all .3s ease;
                -ms-transition : all .3s ease;
                   transition  : all .3s ease;
            }
            .naviLogo a {
                display: flex;
                align-items: center;
                line-height: 1;
                }
                .naviLogo img {
                    width: 100%;
                    line-height: 1;
                    }

        .h-menu {
            display: flex;
            flex: 2 2 0;
            align-items: center;
            justify-content: right;
            column-gap: 2rem;
            }
            .h-menu .naviList {
                display: flex;
                column-gap: 2.4rem;
                }
                .h-menu .naviList a {
                    position: relative;
                    display: inline-block;
                    transition: .3s;
                    padding-bottom:4px;

                    line-height:135%;
                    font-size:15px;
                    letter-spacing: .1em;
                    text-align: center;
                        padding:0;
                        color:#FFF;
                        -webkit-transition:  all .3s ease;
                            -moz-transition: all .3s ease;
                            -o-transition:   all .3s ease;
                            -ms-transition : all .3s ease;
                               transition  : all .3s ease;
                    text-decoration: none;
                    }
                    .h-menu .naviList a:after {
                    position:absolute;
                    bottom:0px;
                    left:50%;
                    content:'';
                    width:0;
                    height:2px;
                    background-color:#F0A3B5;
                    transition:.3s;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%); 
                    }
                    .h-menu .naviList a:hover:after {
                    width:100%;
                    }
                    .h-menu .naviList a:hover {
                    color:#FFF;
                    }


                .h-menu .naviRes {
                    margin-left: auto;
                    margin-right: 0;
                    }
                    .naviRes a {
                        display: inline-block !important;
                        margin-left: auto;
                        width: 160px;
                        font-size:16px;
                        line-height:40px;
                        color: #FFFFFF;
                        text-align: center;
                        margin-right: 0;
                        padding: 0 1.4rem;
                        box-sizing: border-box;
                        background-image: url("../../rakuten2/img/frame-btn_bg.jpg");
                        white-space: nowrap;
                        text-decoration:none;
                        border-radius: 50px;
                        -webkit-transition:  all 0.3s ease;
                            -moz-transition: all 0.3s ease;
                            -o-transition:   all 0.3s ease;
                        }
                        .naviRes a:hover {
                        opacity:.6;
                        filter: alpha(opacity=60);
                        -ms-filter: "alpha( opacity=60 )";
                        }


/*=================================================
		fastview
 ==================================================*/
.fastview {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 4;
    text-align: center;
    z-index: 0;
    }

    .fastview:before {
        content: "";
        position: absolute;
        display: block;
        padding-top: 57%;
        }
        .fastviewText {
            position: absolute;
            top:53%;
            left:50%;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
            z-index: +1;
            text-align: center;
            }
            .fastviewLogos img {
            width:100%;
            max-width: 240px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom: 1.4rem;
            filter: drop-shadow(.1em .1em .25em rgba(0,0,0,.45));
            }
            .fastviewRes {
                width:100%;
                max-width: 240px;
                }
                .fastviewRes a {
                display: block;
                margin-left: auto;
                margin-right: 0;
                padding: 0 1.4rem;
                box-sizing: border-box;
                font-size:18px;
                line-height:50px;
                color: #FFFFFF;
                background-image: url("../../rakuten2/img/frame-btn_bg.jpg");
                white-space: nowrap;
                text-align: center;
                text-decoration:none;
                border-radius: 50px;
                -webkit-transition:  all 0.3s ease;
                    -moz-transition: all 0.3s ease;
                    -o-transition:   all 0.3s ease;
                }

            .fastviewRes.whiteC {
                width:100%;
                max-width: 240px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 1.5em;
                }
                .fastviewRes.whiteC a {
                margin-left: auto;
                margin-right: auto;
                background-image: url("../../rakuten2/img/frame-btn_bg.jpg");
                /*background-image: url("../../rakuten2/img/frame-btn_bg-white.jpg");
                color: #222222;*/
                }


/*=================================================
		mainHead
 ==================================================*/
.mainHead{
    display: block;
    width: 100%;
    height: 633.33px;
    }
.mainHead iframe{
    width: 100%;
    height: 100%;
    }


/*=================================================
		mainHead_slider
 ==================================================*/
.mainHead_slider{
    display: block;
    width: 100%;
    aspect-ratio: 6 / 4;
    overflow: hidden;
    position: relative;
    z-index: 0;
    }
    .mainHead_slider img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: auto;
        aspect-ratio: 6 / 4;
        object-fit: cover;
        opacity: 0;
        z-index: 11;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        }
        /*headarスライダー　7枚 */
        .mainHead_slider img{
          animation-duration: 21s;
          animation-name: fade;
        }

        @keyframes fade {
          0%{
            opacity: 0;
          }
          10%{
            opacity: 1;
          }
          90%{
            opacity: 0;
          }
          100%{
            z-index: 0;
            opacity: 0;
          }
        }
        /* 2枚目のスライド */
        .mainHead_slider img:nth-of-type(2){
          animation-delay: 3s;
        }
        /* 3枚目のスライド */
        .mainHead_slider img:nth-of-type(3){
          animation-delay: 6s;
        }
        /* 4枚目のスライド */
        .mainHead_slider img:nth-of-type(4){
          animation-delay: 9s;
        }
        /* 5枚目のスライド */
        .mainHead_slider img:nth-of-type(5){
          animation-delay: 12s;
        }
        /* 6枚目のスライド */
        .mainHead_slider img:nth-of-type(6){
          animation-delay: 15s;
        }
        /* 7枚目のスライド */
        .mainHead_slider img:nth-of-type(7){
          animation-delay: 18s;
        }


/*=================================================

		ページトップ

 ==================================================*/

#totop { display: flex; justify-content: flex-end; position: sticky; left: auto; bottom: 0; pointer-events: none; z-index: 999; margin-top: -96px; padding: 10px 27px 10px 0; }
#totop a.totop { pointer-events: auto; /* リンクエリアだけ「実体」を戻す */ }

/* リンクと画像：クリックを有効にする */
a.totop { background:rgba(0,0,0,.5); width:76px;height:76px; border-radius: 50%; display:block; cursor:pointer; text-align: center; color:#FFF; font-size:13px; line-height: 125%; position: relative;}
a.totop p { position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
a.totop:hover{ background-position:center bottom;}