@charset "UTF-8";

/*============================================
    reset
============================================*/
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
    font-family: "Noto Sans JP", BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    font-size: clamp(1.6rem, 1.375vw, 2.2rem);
    font-weight: 400;
    /* letter-spacing: 0.04em; */
    font-style: normal;
}
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, label, table, tbody, tr, th, td, figure, blockquote {
    padding: 0;
    margin: 0;
    border: 0;
    /* line-height: initial; */
    box-sizing: border-box;
    font-style: normal;
    color: #0b0b0b ;/*任意のカラー*/
}
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, label, figure, blockquote {
    vertical-align: baseline;
}
article, aside, figure, footer, header, nav, section {
    display: block;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    object-fit: cover;
}
video {
    max-width: 100%;
    height: auto;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
tr, th, td {
    font-weight: bold;
}
select,input,textarea{
    font-family: "Noto Sans JP", BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
textarea{
    resize: none;
}
small {
    font-size: inherit;
}
button{
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
::before,
::after{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
button,input{
    cursor: pointer;
}
/*======================
    追加設定
======================*/
a { transition: .3s all; }
a:hover{ opacity: .6; }
body{ line-height: 1.818; }
@media screen and ( max-width: 1200px ){
    html{ scroll-padding-top: 8rem !important; }
}
@media screen and ( max-width: 780px ){
    html{ scroll-padding-top: clamp(5rem, 10.256410256410255vw, 8rem) !important; }
    a{ transition: initial; }
    a:hover{ opacity: 1; }
}
/*======================
    フォント関連
======================*/
.impact{
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/*======================
    カラー・余白指定
======================*/
:root{
    --main-color: #001e5b;
    --accent-color: #ffff00;
    --bg-color: #efefef;
    --bg-lightBlue: #e8f1f7;
}


/*======================
    共通
======================*/
.sec_inner{
    margin: 0 auto;
    width: 90%;
}
@media screen and ( max-width: 1200px ){
    main{ padding-top: clamp(5rem, 10.256410256410255vw, 8rem); }
}


/*============================================
    header
============================================*/
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(8rem, 5.208333333333334vw, 10rem);
    z-index: 10;
    background-color: var(--main-color);
}
.header_wrap{
    padding: 0 0 0 clamp(.8rem, 2.564102564102564vw, 2rem);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
.hLogo{
    max-width: 32rem;
    width: 18%;
}
.hSP_bg, .hSP_inn, .hNav, .hNav_ul, .hNav_li{ height: 100%; }
.hNav_ul{ display: flex; }
.hNav_li{ display: block; }
.hNav_a{
    position: relative;
    padding: 0 clamp(3.2rem, 2.083333333333333vw, 4rem);
    display: flex;
    height: 100%;
    font-size: clamp(1.6rem, 1.1458333333333333vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    align-items: center;
}
.hNav_a:hover{ opacity: 1; }
.hNav_a::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: clamp(.2rem, 0.4166666666666667vw, .5rem);
    background-color: var(--accent-color);
    transition: .3s all;
    opacity: 0;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
}
.hNav_li_instagram .hNav_a::before{ background-color: #000; }
.hNav_a:hover::before, .current::before{ opacity: 1; }
.hNav_li_contact{ background-color: #000; }
.hNav_li_instagram{ background-color: var(--accent-color); }
.hNav_li_instagramSP{ display: none; }
.hNav_li_instagramIcon{
    width: 2.7rem;
    font-size: 0;
}
.hNav_li_instagram .hNav_a{
    align-items: center;
    justify-content: center;
}
@media screen and ( max-width: 1200px ){
    .hLogo{ width: clamp(13.7rem, 23.974358974358974vw, 18.7rem); }
    .hMenuBtn_bg{/*ハンバーガーメニュー*/
        position: relative;
        display: block;
        width: clamp(5rem, 10.256410256410255vw, 8rem);
        height: clamp(5rem, 10.256410256410255vw, 8rem);
        background-color: var(--accent-color);
        cursor: pointer;
        z-index: 100;
    }
    .hMenuBtn_span{
        position: absolute;
        display: block;
        right: 25%;
        width: clamp(2.5rem, 4.871794871794872vw, 3.8rem);
        height: .3rem;
        background-color: #000;
        position: absolute;
        transition: all 0.3s;
    }
    .hMenuBtn_span:nth-child(1){ top: clamp(1.3rem, 2.564102564102564vw, 2rem); }
    .hMenuBtn_span:nth-child(2){ top: clamp(2.4rem, 4.871794871794872vw, 3.8rem); }
    .hMenuBtn_span:nth-child(3){ top: clamp(3.5rem, 7.179487179487179vw, 5.6rem); }
    body.active{
        height: 100%;
        overflow: hidden;
    }
    .hSP_bg{/*メニュー背景*/
        position: fixed;
        top: clamp(5rem, 10.256410256410255vw, 8rem);
        right: -100%;
        padding: 3rem 0 12rem;
        width: 100%;
        height: 100%;
        background-color: var(--main-color);
        transition: .5s all;
        overflow: auto;
    }
    #hMenuBtn.menu_active+.hSP_bg{ right: 0; }
    .hSP_nav_logoBox{
        padding: 0 2.5%;
        display: block;
        width: fit-content;
    }
    .hSP_nav_logo{ width: clamp(20rem, 50.641025641025635vw, 39.5rem); }
    .hSP_inn{
        margin: 0 auto;
        flex-direction: column;
        max-width: 60rem;
        width: 85%;
    }
    .hNav, .hNav_li, .hNav_a{ width: 100%; }
    .hNav_ul{ flex-direction: column; }
    .hNav_a, .hBtn_a{ font-size: clamp(1.6rem, 2vw, 2.4rem); }
    .hNav_a{
        /* padding: clamp(2rem, 5.128205128205128vw, 4rem) 0; */
        padding: clamp(1.4rem, 2.564102564102564vw, 2rem) 0;
        display: block;
        width: 100%;
        text-align: center;
    }
    .hNav_a::before{ width: 25%; }
    .hNav_li_contact .hNav_a::before, .hNav_li_instagram .hNav_a::before{ width: 100%; }
    .hNav_li_contact .hNav_a, .hNav_li_instagram .hNav_a{ padding: clamp(1.6rem, 2.666666666666667vw, 3.2rem) 0; }
    .hNav_li_contact{ margin: clamp(1.6rem, 2vw, 2.4rem) auto; }
    .hNav_li_instagramPC{ display: none; }
    .hNav_li_instagramSP{ display: block; }
    .hNav_li_instagramSP .hNav_a{ color: #000; }
    .hSP_inn, .hNav, .hNav_ul, .hNav_li{ height: auto; }
}
@media screen and ( max-width: 780px ){
    header{ height: auto; }
}



/*============================================
    SNSリンク & お問い合わせ
============================================*/
/* SNSリンク */
.bcLink_box_youtube .bcLink{/*YouTubeのリンクを追加したら削除*/
    pointer-events: none;
}
.bottom_common_link{ display: flex; }
.bcLink_box{
    display: flex;
    width: 50%;
    aspect-ratio: 1 / 0.46875;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    justify-content: center;
}
.bcLink_box_youtube{ background-image: url(../img/common/footer_YouTube.jpg); }
.bcLink_box_instagram{ background-image: url(../img/common/footer_Instagram.jpg); }
.bcLink{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.bcLink:hover{ opacity: 1; }
.bcLink:hover .bcLinkBtn{ background-color: #000; }
.bcLink_title_box{ width: 100%; }
.bcLink_title{
    line-height: 1;
    font-size: clamp(5rem, 4.6875vw, 9rem);
    color: #fff;
    text-align: center;
    text-shadow: 0 0 3.5rem rgba(0, 0, 0, 0.53);
}
.bcLinkBtn{
    position: relative;
    margin: 2rem auto 0;
    padding: clamp(1rem, 1.7948717948717947vw, 1.4rem) 0;
    display: block;
    max-width: 33rem;
    width: 90%;
    line-height: 1;
    font-size: clamp(1.6rem, 1.1458333333333333vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
    background-color: var(--main-color);
    transition: .3s all;
}
.bcLinkBtn::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 2.4rem;
    background-image: url(../img/common/arrowWhite_small.png);
    width: .8rem;
    height: 1.5rem;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
/* お問い合わせ */
.bcContact_inner{
    padding: 7.2rem 0;
    max-width: 100rem;
}
.bcContact_title_box{ text-align: center; }
.bcContact_title_en{
    line-height: 1;
    font-size: clamp(5rem, 5.208333333333334vw, 10rem);
    color: var(--main-color);
}
.bcContact_title_ja{
    margin-top: clamp(1.6rem, 2.666666666666667vw, 3.2rem);
    display: block;
    line-height: 1;
    font-size: clamp(2rem, 1.5625vw, 3rem);
    font-weight: 700;
}
.bcContact_info{
    margin-top: 4rem;
    display: flex;
    gap: 3.2rem 8.4rem;
    justify-content: center;
}
.bcContact_num_box{
    display: flex;
    gap: 0 1.3rem;
    line-height: 1;
    font-size: clamp(6rem, 3.6458333333333335vw, 7rem);
    color: var(--main-color);
}
.bcContact_num_icon{
    display: flex;
    width: clamp(4.5rem, 4.666666666666667vw, 5.6rem);
    font-size: 0;
    align-items: center;
}
.bcContact_text{
    margin-top: .8rem;
    line-height: 1;
    text-align: end;
}
.bcContact_link{
    position: relative;
    padding: clamp(2rem, 3.717948717948718vw, 2.9rem) clamp(6rem, 12.82051282051282vw, 10rem) clamp(2rem, 3.717948717948718vw, 2.9rem) clamp(2rem, 8.58974358974359vw, 6.7rem);
    display: block;
    width: fit-content;
    font-size: clamp(2rem, 1.5625vw, 3rem);
    font-weight: 700;
    color: #010101;
    background-color: var(--accent-color);
}
.bcContact_link::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 4rem;
    background-image: url(../img/common/arrowBlack.png);
    width: clamp(.8rem, 1.6666666666666667vw, 1.3rem);
    height: clamp(1.477rem, 3.076923076923077vw, 2.4rem);
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
@media screen and ( max-width: 1200px ){
    /* お問い合わせ */
    .bcContact_info{
        margin: 4rem auto 0;
        flex-direction: column;
        width: fit-content;
    }
    .bcContact_text_box{
        margin: 0 auto;
        width: fit-content;
    }
    .bcContact_num_box{ font-size: clamp(5rem, 5vw, 6rem); }
    .bcContact_text{ text-align: center; }
    .bcContact_link{
        width: 100%;
        text-align: center;
    }
    .bcContact_link::before{ right: 2.4rem; }
}
@media screen and ( max-width: 780px ){
    /* SNSリンク */
    .bottom_common_link{ flex-direction: column; }
    .bcLink_box{ width: 100%; }
    .bcLink:hover .bcLinkBtn{ background-color: var(--main-color); }
    .bcLinkBtn{ transition: none; }
    .bcLink_title{ font-size: clamp(4rem, 7.6923076923076925vw, 6rem); }
    /* お問い合わせ */
    .bcContact_title_en{ font-size: clamp(4rem, 7.6923076923076925vw, 6rem); }
    .bcContact_num_box{ font-size: clamp(3.8rem, 6.41025641025641vw, 5rem); }
    .bcContact_num_icon{ width: clamp(3.2rem, 5.769230769230769vw, 4.5rem); }
    .bcContact_link{ font-size: clamp(1.8rem, 2.564102564102564vw, 2rem); }
}



/*============================================
    footer
============================================*/
footer{ background-color: #000; }
footer p, footer a, .copyright{ color: #fff; }
footer p, footer a{ font-size: clamp(1.6rem, 1.0416666666666665vw, 2rem); }
footer p{ line-height: 1.5; }
.footer_inner{
    margin: 0 auto;
    padding: 3.2rem 0 6.4rem;
    display: flex;
    max-width: 156rem;
    width: 90%;
    justify-content: space-between;
}
.f_logo{
    margin-bottom: 2rem;
    width: clamp(20rem, 32.05128205128205vw, 25rem);
}
.f_info_address_box{
    display: flex;
    gap: 0 1.6rem;
}
.f_info_tel_box{
    display: flex;
    gap: .2rem clamp(2rem, 3.125vw, 6rem);
}
.f_info_tel_noLink{
    border-bottom: none;
    pointer-events: none;
    color: #fff;
}
.f_info_tel{ position: relative; }
.f_info_tel::before{
    content: "／";
    position: absolute;
    right: -2.083333333333333vw;
}
.f_info_tel a,
.f_info_fax a{
    color: #fff;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}
.f_menu_wrap{
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fNav_ul, .fNav{ display: flex; }
.fNav_a{
    position: relative;
    padding: 0 2rem;
}
.fNav_a::before{
    content: "";
    position: absolute;
    top: 50%;
    right: .5rem;
    width: .1rem;
    height: 2rem;
    background-color: #fff;
    rotate: 45deg;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
}
.fNav_li:last-of-type .fNav_a::before{ display: none; }
.instagramLink{
    width: 2.7rem;
    font-size: 0;
}
.copyright{
    display: block;
    font-size: clamp(1.2rem, 0.9375vw, 1.8rem);
    text-align: end;
}
@media screen and ( max-width: 1500px ){
    .f_info_address_box{ flex-direction: column; }
}
@media screen and ( max-width: 1200px ){
    .footer_inner{
        padding: 6.4rem 0;
        flex-direction: column;
    }
    .f_info_box:first-of-type{ margin-bottom: 1.6rem; }
    .f_info_address_box{
        flex-direction: initial;
        flex-wrap: wrap;
    }
    .f_info_tel::before{ right: -2.3333333333333335vw; }
    .fNav_li:first-of-type .fNav_a{ padding-left: 0; }
    .copyright{ margin-top: clamp(1.6rem, 2.666666666666667vw, 3.2rem); }
}
@media screen and ( max-width: 780px ){
    .f_info_tel::before{ right: -1.85rem; }
    .fNav{ display: none; }
    .copyright{ text-align: center; }
}


/*============================================
    トップリンク
============================================*/
#pagetop{
    position: fixed;
    right: clamp(1rem, 3.6458333333333335vw, 5rem);
    bottom: clamp(1.6rem, 1.5625vw, 3rem);
    width: clamp(4rem, 5.833333333333333vw, 7rem);
    height: clamp(4rem, 5.833333333333333vw, 7rem);
    z-index: 5;
}
body.active #pagetop{ display: none; }