@charset "UTF-8";
/* CSS Document */

html {
    font-size: 62.5%; /* 16px * 62.5% = 10px */
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;

  }
  :root{
    --black:#2d2d2d;
  }

  body {
    color: var(--black); /* RGB */
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    font-size: 1.6em;
    line-height: 2.4rem;
    letter-spacing: 0.19rem;
  }
  

  a{
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  section h2 {
    font-size: 2.4rem;
  }
  a:hover {
    opacity: 0.5;
  }
  .none {
    display:none;
  }

*, *:before, *:after {
  box-sizing: border-box;
}



/* header */

.header{
    display: flex;
    z-index: 9;
    position:fixed;
    top:0px;
    background-color: rgba(255, 255, 255, 0.4); 
    width: 100%;
    height: 70px;
  }

  .header-main-area{
    display: flex;
    justify-content: space-between;
    width: 94%;
    margin: 10px auto 0;
    align-items: center;

  }
        @media(min-width:1020px){
            .header{
                height: 145px;

            }

            .header-main-area{
               max-width: 1440px;
               padding-inline: 35px;
                margin: 0 auto;
              }
        }
        


  .logo-img{
    width: 50px;
    display: block;

  }

        @media(min-width:1020px){
            
            .logo-img{
                width: 96px;
                margin-top: 25px;
                margin-left: 3%;
            }
            
        }


.logo-txt{
    font-size: 1.6rem;
    margin-left: 5px;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    }

        @media(min-width:1020px){
            .logo-txt{
                font-size: 2.4rem;
                margin-top: 35px;
                margin-left: 10px;
                line-height: 1.7;
            }
            
        }



.header-logo{
    display: flex;
}

img,.video iframe,.map iframe{
    width: 100%;
    height: auto;
}
.nav{
    width: 100%;
    height: 100%;
    background-color: #3d527d;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(100%);
    opacity: 0;
    transition: 0.5s;
    overflow-y: scroll;
}

.nav.active{
    transform: translate(0);
    opacity: 1;
}

.header-nav{
    display: none;
}


        @media(min-width:1020px){
            .nav__tell-and-contact{
                display: flex;
            }
            .header-nav{
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                width: 70%;
            }
            .header-nav p,.header-nav a,.header-nav span,.header-nav-menu{
                font-size: 1.8rem;
                font-family: "Zen Maru Gothic", serif;
                font-weight: 600;
                font-style: normal;
            }
            .nav-contact-link{
                margin-left: 10px;
            }
            .nav-contact-link::after{
                content: "";
                display: block;
                width: 6px;
                height: 12px;
                background-image: url(../img/SVG/arrow-black.svg);
                background-repeat: no-repeat;
                position: absolute;
                top:20px;
                left: 190px;
            }

            .nav-contact-link{
                font-size: 1.6rem;
                padding: 15px 80px 15px 40px;
                border-radius: 35px;
                border: 1px solid #2d2d2d;
                background-color: #fff;
                position: relative;
            }
            .header-nav span{
                font-size: 1.6rem;
                font-weight: 400;
            }
            .nav-tell-area{
                text-align: center;
            }
            .header-nav-menu{
                display: flex;
                margin-top: 15px;
                text-transform: uppercase;
                letter-spacing: 0.3rem;
                gap: 4.5%;
                width: 100%;
                justify-content: flex-end;
            }
            .header-nav-menu li{
                font-size: 1.8rem;
                font-weight: 600;
                /* margin-right: 45px; */
            }

        }
.nav__menu-button{
    position: relative;
}

.nav__icon_mb-top{
    position: absolute;
    top: 22px;
    right: calc(4% + 42px);
}

.tell_img_mb-top{
    display: inline-block;
    width: 31px;
    height: 31px;
}
.form_mb-top{
    display: inline-block;
    width: 31px;
    height: 31px;
    margin-left: 10px;
}

        @media(min-width:1020px){
            .nav__icon_mb-top{
                display: none;
            }

            
        }




.nav__menu-button{
    display: block;
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    background: transparent;
    z-index: 10;
    right: 0%;
    top: 38px;
    max-width: 200px;
    margin-inline: auto;
    position: fixed;
    transform: translateY(-50%) translateX(-48%);
}

.nav__menu-button.active span{
    background-color: #fff;
    transition: 0.5s;
}

.nav__menu-button.active span:nth-of-type(1){
    transform: rotate(-45deg);
    top: 15px;
}

.nav__menu-button.active span:nth-of-type(2){
    transform: rotate(45deg);
    top: 16px;
}

.nav__menu-button span{
    display: inline-block;
    width: 22px;
    height: 1px;
    background-color: #2d2d2d;
    position: absolute;
    left: 6px;
    transition: 0.5s;
}

.nav__menu-button span:nth-of-type(1){
    top: 12px;
}
.nav__menu-button span:nth-of-type(2){
    top: 20px;
}



.nav-menu-list{
    margin: 164px auto 0;
    width: 80%;
}

        @media(min-width:1020px){
            .nav-menu-list{
            width: 400px;
            margin: 164px 0 0 10% ;
        }
            .nav__menu-button{
                right: 5px;
                top: 54px;
                max-width: 200px;
        }

        
        }
        @media(min-width:1555px){
            .nav__menu-button{
                right: 0;
                position: fixed;
                left: 1500px;
            }
        }


.nav__summary{
    border-bottom: solid 0.5px #FFF;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    margin-top: 50px;
}

/* ドロップダウンしたい時は下記を表示
details div p{
    width: fit-content;
    display: inline-block;
    font-weight: 400;
    margin-top: 22px;
    margin-left: 46%;
    position: relative;
    text-transform: uppercase;
}

details div p img{
    width: 26px;
    height: 26px;
    transform: translate(-3px, 4px);
}

detailsdiv p::before{
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: -18px;
} */





.page div p{
    width: fit-content;
    display: inline-block;
    font-weight: 400;
    display: block;
    padding-top: 22px;
    padding-left: 36%;
    /* margin-top: 22px;
    margin-left: 46%; */
    position: relative;
    text-transform: uppercase;
}

.page div p img{
    width: 26px;
    height: 26px;
    transform: translate(-3px, 4px);
}

.page div p::before{
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 73%;
    transform: translateY(-50%) translateX(-206%);
}

.nav-menu-list details summary{
    display: block;
}
.nav__icon{
    position: absolute;
    top: 22px;
    right: calc(4% + 42px);
}

.tell_img{
    display: inline-block;
    width: 31px;
    height: 31px;
}
.form{
    display: inline-block;
    width: 26px;
    height: 31px;
    margin-left: 10px;
}

.nav-logo-txt{
    text-transform: uppercase;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-size: 2rem;
    margin: 90px 0 76px auto;
    display: block;
    width: fit-content;
    line-height: 1.7;
    letter-spacing: 0.3rem;
}


        @media(min-width:1020px){
            .nav-logo-txt{
                font-size: 3.6rem;
            }
         
            .nav__icon{
                top: 39px;
                right: calc(4% + 26px);
            }

            .form{
                margin-left: 20px;
            }
        }
        @media(min-width:1555px){
            .nav__icon{
                right: 0;
                width: 100px;
                height: 50px;
                position: fixed;
                top: 65px;
                left: 1424px;
                margin-inline: auto;
                transform: translateY(-50%) translateX(-48%);
            }
        }




/* ----------topに戻る-btn------------------ */

.top-btn{
    opacity: 0;
    transition: 0.5s;
    width: 83px;
    height: 83px;
    padding: 25px 12px 0 19px;
    background: #fff;
    border: 1px solid #2d2d2d;
    border-radius: 100%;
    line-height: 1.5;

    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 10;
    box-sizing: border-box;
}

.top-btn.on{
    opacity: 1;
    transition: 0.5s;
}


.top-btn:hover{
    opacity: 0.5;
}

.top-btn span{
    display: block;
    position: relative;
    padding-left: 7px;
}

.top-btn span::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-image: url(../img/SVG/arrow_upward_22dp_2D2D2D_FILL0_wght400_GRAD0_opsz24.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    left: 12px;
    top: -21px;
}




/* -----------footer------------------------ */


.footer-section{

    position: relative;
    z-index: 2;
}
.white-area{
    background-color: #fff;
    border-top: 1px solid #2d2d2d;
    border-radius: 0;
}
.footer-logo-img{
    width: 131px;
    margin: 80px auto 0;
    display:block;
}
.footer-logo-txt{
    font-size: 1.8rem;
    margin-top: 20px;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
}
.white-area .boat{
    width: 67px;
    height: auto;
    margin: 76px 0 -6px 73%;
    display:block;

}
.blue-area{
    background-color: #3d527d;
    border-radius: 0;
    position: relative;
    z-index: 1;
    height: 435px;

}
.footer-menu-area{
    padding-top: 40px ;
    padding-left: 12%;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    margin-bottom: 60px;
    text-transform: uppercase;
}
.footer-menu-area li{
    margin-bottom: 18px;

}
.copy-wright{
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    display: block;
    margin-bottom: 55px;
}


        @media(min-width:1020px){
            .white-area{
                display: flex;
                position: relative;
            }
            .footer-logo-img_and_txt{
                display: flex;
                margin: 80px auto;
            }
            .footer-logo-img{
                width: 220px;
                margin: 0;
            }
            .footer-logo-txt{
                text-align: left;
                font-size: 3.6rem;
                line-height: 1.7;
                margin: 48px 0 49px 60px;
            }
            .white-area .boat{
                position: absolute;
                width: 144px;
                height: 71px;
                margin: 320px 0 0 73%;
                display:block;
            }
            .blue-area{
                height: 395px;
            
            }
            .footer-menu-area{
                display: flex;
                margin-bottom: 0;
                padding-top: 100px;
                font-size: 1.8rem;
                padding-left: 0;
                margin-inline: auto;
                width: 695px;
            }

            .footer-menu-txt{
                margin-inline: auto;
            }
            .footer-menu-area li {
                margin-right: 55px;
                margin-bottom: 165px;
            }
            .footer-menu-area .li-last{
                margin-right: 0;
            }
            .copy-wright{
                margin-bottom: 85px;
                font-size: 1.8rem;
            }
        }

    /* fadein */

    .fade-in{
        opacity: 0;
        transform: translateY(150px);
        /* transform: scale(0.5); */
        transition: 0.8s;
    }

    .fade-in.animated{
        opacity: 1;
        transform: translateY(0);
        /* transform: scale(1); */
    }