/* =========================================================
   Ciel ?????? ???
   ========================================================= */

:root {
    --sns-blue: #6cb6ff;
}

/* 1. ????????html body????????????? */
html body footer[role="contentinfo"], 
html body .gNav, 
html body header .spMenu__btn, 
html body .topNews__box { 
    background-color: #2a3a5a !important; 
    background: #2a3a5a !important; 
}

/* 2. ?????????? */
header nav.gNav, 
header nav.gNav ul, 
header nav.gNav ul li.nav-item a {
    background-color: #1b2440 !important;
    color: rgba(255,255,255,0.88) !important;
}

/* --- 3. ????????????????? --- */
@media screen and (min-width: 768px) {
    /* 1. ????????????65px??55px?????????? */
    header[role="banner"] .hContact a.hContact__btn,
    header[role="banner"] .hContact a.hContact__tel {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 55px !important;
        width: 285px !important;
        position: relative !important;
        padding: 0 0 0 55px !important; /* 10px????????????? */
        box-sizing: border-box !important;
        border: 1.5px solid var(--sns-blue) !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
        text-decoration: none !important;
        background-color: transparent !important;
    }

    /* 2. ?????40px???????????????? */
    header[role="banner"] .hContact a.hContact__btn::before,
    header[role="banner"] .hContact a.hContact__tel::before {
        content: "" !important;
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        display: block !important;
    }

    /* 3. ??????????? */
    header[role="banner"] .hContact a[href^="tel:"]::before {
        background-image: url("/theme/omotenashi2_copy/img/sns/tel.png") !important;
    }
    header[role="banner"] .hContact a[href*="/contact"]::before {
        background-image: url("/theme/omotenashi2_copy/img/sns/mail.png") !important;
    }

    /* 4. ??(span)?line-height?????????????? */
    header[role="banner"] .hContact a.hContact__btn span,
    header[role="banner"] .hContact a.hContact__tel span {
        color: var(--sns-blue) !important;
        display: block !important;
        line-height: 1.0 !important; /* ???????????????????? */
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 5. ???????????????? */
    header[role="banner"] .hContact a.hContact__tel span {
        font-size: 26px !important;
        font-weight: 900 !important;
    }
    header[role="banner"] .hContact a.hContact__btn span {
        font-size: 18px !important;
        font-weight: 900 !important;
    }
}

/* 4. ???????????? */
.topNewsList__item, 
.topNewsList_detail {
    position: relative !important;
    overflow: visible !important;
}

.topNews__box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
}

.topNews__list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

@media screen and (max-width: 767px) {
    /* 1. ??????????? */
    header[role="banner"] .hContact_item-hour,
    header[role="banner"] .hContact__item-hour {
        display: none !important;
    }

    /* 2. ????????????????????? */
    /* ??????header[role="banner"] .hContact a??????????????? */
    html body header[role="banner"] .hContact a.hContact__btn,
    html body header[role="banner"] .hContact a.hContact__tel {
        display: block !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        
        /* ? ??????????????????????????????? */
        background-color: #ffffff !important;
        background-image: none !important; 
        background: #ffffff !important; 

        /* ???????????????? */
        border: none !important;
        border-width: 0 !important;
        outline: none !important;
        box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2) !important;
        
        position: fixed !important;
        top: 10px !important;
        z-index: 9999 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- ??????????????????? --- */
    header[role="banner"] .hContact a.hContact__tel { right: 130px !important; }
    header[role="banner"] .hContact a.hContact__btn { right: 70px !important; }
    header[role="banner"] .hContact a span { display: none !important; }

    header[role="banner"] .hContact a.hContact__btn::before,
    header[role="banner"] .hContact a.hContact__tel::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 38px !important;
        height: 38px !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
    }

    header[role="banner"] .hContact a[href^="tel:"]::before {
        background-image: url("/theme/omotenashi2_copy/img/sns/tel.png") !important;
    }
    header[role="banner"] .hContact a[href*="/contact"]::before {
        background-image: url("/theme/omotenashi2_copy/img/sns/mail.png") !important;
    }
}

/* --- ????????????????????????????????? --- */

/* --- ????margin-bottom ??? --- */
html body .fContact__btn {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin-bottom: 30px !important; /* ? ???????1????? */
}

/* ???????????????????? */
html body .fContact__btn a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 285px !important;
    height: 55px !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    background: transparent !important;
    border: 1.5px solid var(--sns-blue) !important;
    border-radius: 4px !important;
    color: var(--sns-blue) !important;
    text-decoration: none !important;
    position: relative !important;
    
    /* ????????? */
    font-size: 20px !important; /* ????? */
    font-weight: 900 !important; /* ?? */
    padding-left: 45px !important; /* ???????????? */
    box-sizing: border-box !important;
}

/* ?????????????????????????? */
html body .fContact__btn a.btn::before {
    content: "" !important;
    position: absolute !important;
    
    /* 1. ????????????????? */
    left: 8px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* 2. ?????????????55px???????????? */
    width: 50px !important;
    height: 50px !important;
    
    /* 3. ???????????????100%??? */
    background-image: url("/theme/omotenashi2_copy/img/sns/mail.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% !important; /* contain??100%?????48px????? */
    
    display: block !important;
}
/* ???(>)?????? */
html body .fContact__btn a.btn .fa-chevron-right {
    color: var(--sns-blue) !important;
    margin-left: 10px !important;
}

html body .fContact__btn a.btn:hover {
    opacity: 0.7 !important;
    background-color: rgba(108, 182, 255, 0.1) !important;
}

/* --- ??????????????????? --- */

/* 1. ?????????????? */
html body .fContact__time {
    display: none !important;
}

/* 2. ??????????????????? */
html body .fContact__tel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. ????????????????????????? */
/* (????285px?????????????) */
html body .fContact__tel a {
    font-size: 32px !important;
    line-height: 1.2 !important;
}


/* --- ???????????????????? --- */

html body .fContact__tel.telLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 285px !important;
    max-width: 100% !important;
    height: 55px !important;
    margin: 0 auto !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important; /* ??????? */
}

/* ?????????????????????? */
html body .fContact__tel.telLink {
    display: flex !important;
    box-sizing: border-box !important;
}

/* ?????????????????? */
html body .fContact__tel.telLink::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 12px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    background-image: url("/theme/omotenashi2_copy/img/sns/tel.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 75% !important;
    flex-shrink: 0 !important;
}

/* ????????? */
html body .fContact__tel.telLink {
    font-size: 26px !important;
    font-weight: bold !important;
    color: var(--sns-blue) !important;
}

html body .fContact__tel.telLink:hover,
html body .fContact__tel.telLink:active {
    opacity: 0.6 !important; /* ???????????????????? */
    background-color: rgba(255,255,255,0.1) !important; /* ?????? */
    border-radius: 30px !important;
}


/* NEWS?????????(BGE)???????? */
article:has(#ciel-footer-vfinal-news) .bge-contents {
    background: none !important; /* ????????????? */
    padding: 0 !important;
    margin: 0 !important;
}

/* NEWS??????????????????? */
article:has(#ciel-footer-vfinal-news) .contentsTitle {
    /* 1. ????????????????????? */
    background: url("/img/news_header.png") no-repeat center !important;
    background-size: contain !important;
    
    /* 2. ???450px????!important??????????? */
    height: 450px !important;
    min-height: 450px !important;
    
    /* 3. ??????? */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

/* ????????????????? */
article:has(#ciel-footer-vfinal-news) .contentsTitle h2 {
    color: #ffffff !important;
    text-shadow: 0px 0px 15px rgba(0,0,0,1), 2px 2px 4px rgba(0,0,0,0.8) !important;
    font-size: 2.5rem !important;
    font-weight: bold !important;
    margin: 0 !important;
    position: relative;
    z-index: 10;
}nt; /* ??? */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* ??????????? */
    font-size: 2.5rem !important; /* ???????????????? */
    margin: 0 !important;
    z-index: 10;
}

/* ????768px??????????????? */
@media screen and (max-width: 768px) {
    article:has(#ciel-footer-vfinal-news) .contentsTitle {
        height: 120px !important;    /* ?????????????? */
        min-height: 120px !important;
    }
    
    article:has(#ciel-footer-vfinal-news) .contentsTitle h2 {
        font-size: 1.5rem !important; /* ????????????????? */
    }
}

/* ????768px???????????? */
@media screen and (max-width: 768px) {
    article:has(#ciel-footer-vfinal-news) .contentsTitle {
        height: 120px !important;     /* ???????????? */
        min-height: 120px !important; /* ???????? */
    }
}


/* --- CONTACT????????????????????? --- */

/* CONTACT?????????URL???????????
   ????????????? .contentsTitle ???????
   ????NEWS????NEWS???????????????????? */

.contentsTitle {
    background: url("/img/contact_header.png") no-repeat center !important;
    background-size: contain !important;
    height: 450px !important;
    min-height: 450px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ?????? */
@media screen and (max-width: 768px) {
    .contentsTitle {
        height: 120px !important;
        min-height: 120px !important;
    }
}

/* NEWS??????NEWS????????NEWS?ID????????? */
article:has(#ciel-footer-vfinal-news) .contentsTitle {
    background-image: url("/img/news_header.png") !important;
}