@charset "utf-8";

@import url("base.css");

/***************************************************************************
 *
 * COMMON STYLE
 *
 ***************************************************************************/

.notoSans {
    font-family: "Noto Sans JP", sans-serif;
    font-display: swap;
}

.oswald {
    font-family: "Oswald", sans-serif;
    font-display: swap;
}


body {
    background-color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;
    color: #333333;
    font-weight: normal;
    font-display: swap;
}

body.fixed {
    overflow: hidden;
}

.inner {
    max-width: 1040px;
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
}

/*VALIDATE CONTACT*/
.error {
    display: block;
    font-size: 12px;
    color: red;
}

/* HEADER */
#header {
    width: 100%;
    /* position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 99; */
}

#header .wrapHeader {
    display: flex;
    justify-content: space-between;
}

#header .wrapHeader .headerBar {
    margin-right: 10px;
    width: 213px;
}

#header .wrapHeader .headerBar .logo {}

#header .wrapHeader .headerBar .logo a {
    display: block;
}

#header .wrapHeader .headerBar .logo a img {
    width: 100%;
    aspect-ratio: 213/72;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#header .wrapHeader .wrapContactHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 223px);
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 10px;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .noteHeader {
    width: 53.5px;
    margin-right: 13px;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .noteHeader img {
    width: 100%;
    height: 100%;
    aspect-ratio: 54/54;
    object-fit: cover;
    object-position: center;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader {
    position: relative;
    padding: 3px 7px 5px;
    border: 1px solid #DCDCDC;
    background: #F5F5F5;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.8px;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader:before {
    content: "";
    position: absolute;
    border-top: 7px solid transparent;
    border-right: 10px solid #f5f5f5;
    border-bottom: 7px solid transparent;
    width: 0;
    height: 0;
    top: 50%;
    transform: translateY(-50%);
    left: -8px;
    z-index: 1;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader:after {
    content: "";
    position: absolute;
    border-top: 7px solid transparent;
    border-right: 10px solid #DCDCDC;
    border-bottom: 7px solid transparent;
    width: 0;
    height: 0;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader .noteHeaderRed {
    color: #F63E28;
    font-size: 13px;
}

#header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader .noteHeaderRed .noteHead18 {
    font-size: 18px;
    line-height: 1;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .txtSupportCus {
    width: 52px;
    margin-right: 9px;
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
    background: #20297C;
    border-radius: 3px;
    padding: 4px 5px 6px;
    line-height: 1.3;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader {
    margin-right: 4px;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a {
    display: block;
    position: relative;
    font-size: 32px;
    font-weight: 500;
    color: #FF7160;
    padding-left: 31px;
    margin-top: -6px;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a:before {
    content: "";
    position: absolute;
    background: url('../images/common/icon-tel-black.svg') no-repeat;
    background-size: 100%;
    width: 26px;
    height: 26px;
    top: 56%;
    transform: translateY(-50%);
    left: 0;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .listContactHeader {
    display: flex;
    flex-wrap: wrap;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .listContactHeader li {
    font-size: 10px;
    padding: 3px 5px 5px;
    background: #F5F5F5;
    border: 1px solid #DCDCDC;
    border-radius: 3px;
    margin-right: 5px;
    line-height: 1.3;
}

#header .wrapHeader .wrapContactHeader .boxContactHeader .listContactHeader li:last-child {
    margin-right: 0;
}

/* CONTENT */
#content {
    width: 100%;
}

.wrapTitle {
    text-align: center;
}

.wrapTitle .wrapStepFuneral {
    margin-bottom: 19px;
}

.wrapTitle .wrapStepFuneral .txtStepFuneral {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    background: #0153A0;
    border-radius: 20px;
    padding: 1px 33px 4px;
    line-height: 1.3;
    letter-spacing: 2px;
}

.wrapTitle .wrapStepFuneral .txtStepFuneral .numStepFuneral {
    font-size: 27px;
}

.wrapTitle .wrapTitleSmall {
    margin-bottom: 2px;
}

.wrapTitle .wrapTitleSmall .titleSmall {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    display: inline-block;
    padding: 0 27px;
}

.titleRed {
    color: #FF4D38;
}

.wrapTitle .wrapTitleSmall .titleSmall:before {
    content: "";
    position: absolute;
    background: url('../images/common/icon-title-before.svg') no-repeat;
    background-size: 100%;
    width: 17px;
    height: 31.5px;
    top: 1px;
    left: 0;
}

.wrapTitle .wrapTitleSmall .titleSmall:after {
    content: "";
    position: absolute;
    background: url('../images/common/icon-title-after.svg') no-repeat;
    background-size: 100%;
    width: 17px;
    height: 31.5px;
    top: 1px;
    right: 0;
}

.wrapTitle .titleBig {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
}

.wrapTitle .titleBig.titleBigSize44 {
    font-size: 44px;
    margin-top: 9px;
}


/* FOOTER */
#footer {
    width: 100%;
    background: url('../images/common/bg-footer.webp') no-repeat center center/cover;
    padding: 20px 0 39px;
}


#footer .inner {
    max-width: 1044px;
}

#footer .wrapFooter {}

#footer .wrapFooter .logoFooter {
    width: 122px;
    margin-bottom: 10px;
    margin-left: -19px;
}

#footer .wrapFooter .logoFooter a {
    display: block;
}

#footer .wrapFooter .logoFooter a img {
    width: 100%;
}

#footer .wrapFooter .txtFooter {
    font-size: 12px;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 1px;
}

#footer .wrapFooter #copyright {
    font-size: 12px;
    font-weight: normal;
    color: #ffffff;
}

@media (max-width: 910px) and (min-width: 769px) {
    #header .wrapHeader .headerBar {
        width: clamp(100px, 21.4vw, 194px);
    }

    #header .wrapHeader .wrapContactHeader {
        width: calc(100% - clamp(100px, 21.4vw, 194px) - 10px);
    }

    #header .wrapHeader .wrapContactHeader .wrapNoteHeader {
        margin-right: 5px;
    }

    #header .wrapHeader .wrapContactHeader .wrapNoteHeader .noteHeader {
        width: clamp(40px, 5.5vw, 50px);
        margin-right: 11px;
    }

    #header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader {
        font-size: 10px;
    }

    #header .wrapHeader .wrapContactHeader .wrapNoteHeader .txtNoteHeader .noteHeaderRed .noteHead18 {
        font-size: 16px;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtSupportCus {
        margin-right: 5px;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a {
        font-size: clamp(22px, 3.1vw, 28px);
        padding-left: clamp(20px, 3.7vw, 34px);
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a:before {
        width: clamp(18px, 2.8vw, 25px);
        height: clamp(18px, 2.8vw, 25px);
    }
}

/* SHOW HIDE PC SP */
@media (min-width: 769px) {
    .sp {
        display: none;
    }

    .hover:hover {
        opacity: 0.8;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a,
    .sectionReview .wrapReview .wrapQuestAvail .contentQuestAvail .wrapCtaQuestAvail .boxCtaQuestRight .iframeCtaQuestRight .numCtaQuestRight a {
        pointer-events: none;
    }
}

/* STYLE MOBILE */
@media (max-width: 768px) {
    .pc {
        display: none;
    }

    .inner {
        width: 100%;
        padding: 0 4%;
    }
    .hover:hover {
        opacity: 1;
    }

    /* MENU */
    .hamburger {
        width: 50px;
        height: 50px;
        padding: 0 5px;
        z-index: 9991;
        background: #ccc;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background: #000;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        margin-bottom: 10px;
    }

    .hamburger span:nth-child(2) {
        opacity: 1
    }

    .hamburger span:nth-child(3) {
        margin-top: 10px;
    }

    .hamburger.open span:nth-child(1) {
        margin-bottom: -2px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        margin-top: -2px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #20297C;
        justify-content: center;
        z-index: 99;
        padding: 1.3vw 4vw;
        display: none;
    }

    #header.scrolled .wrapHeader .wrapContactHeader .boxContactHeader {
        display: flex;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader {
        margin-right: clamp(8px, 2.1vw, 12px);
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a {
        padding-left: clamp(28px, 7.5vw, 48px);
        margin-top: 0;
        font-size: clamp(33px, 8.8vw, 56px);
        color: #ffffff;
        letter-spacing: 0.6px;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .txtNumHeader a:before {
        width: clamp(25px, 6.6vw, 40px);
        height: clamp(25px, 6.6vw, 40px);
        filter: brightness(0) invert(1);
        left: -7px;
    }

    #header .wrapHeader .wrapContactHeader .boxContactHeader .listContactHeader li {
        padding: 3px 5px 5px;
        padding: 5px 9px 5px;
        padding: 1.1vw 1.2vw 1.1vw 1.3vw;
        margin-right: clamp(8px, 2.2vw, 10px);
        font-size: clamp(10px, 2.6vw, 14px);
    }

    #header .wrapHeader .wrapContactHeader .wrapNoteHeader {
        display: none;
    }

    .wrapTitle .wrapTitleSmall {
        margin-bottom: 1px;
    }

    .wrapTitle .wrapTitleSmall .titleSmall {
        font-size: clamp(14px, 3.7vw, 18px);
        padding: 0 clamp(21px, 5.7vw, 30px);
    }

    .wrapTitle .wrapTitleSmall .titleSmall:before,
    .wrapTitle .wrapTitleSmall .titleSmall:after {
        width: clamp(16px, 4.3vw, 20px);
        height: clamp(24px, 6.4vw, 32px);
    }

    .wrapTitle .wrapTitleSmall .titleSmall:before {
        background-image: url('../images/common/icon-title-before-sp.svg');
    }

    .wrapTitle .wrapTitleSmall .titleSmall:after {
        background-image: url('../images/common/icon-title-after-sp.svg');
    }

    .wrapTitle .wrapStepFuneral .txtStepFuneral {
        font-size: clamp(15px, 4vw, 20px);
        padding: 0.2vw 5.8vw 0.5vw;
    }

    .wrapTitle .wrapStepFuneral .txtStepFuneral .numStepFuneral {
        font-size: clamp(17px, 4.6vw, 23px);
    }

    .wrapTitle .titleBig {
        font-size: clamp(20px, 5.3vw, 30px);
        line-height: 1.45;
    }

    .wrapTitle .titleBig.titleBigSize44 {
        font-size: clamp(24px, 6.4vw, 32px);
        margin-top: 4px;
    }

    .wrapTitle .wrapStepFuneral {
        margin-bottom: 20px;
    }

    #footer {
        padding: 28px 0 26vw;
        background-image: url('../images/common/bg-footer-sp.webp');
    }

    #footer .inner {
        padding: 0 5.3%;
    }

    #footer .wrapFooter .logoFooter {
        margin: 0 auto 12px;
        width: clamp(86px, 22.9vw, 122px);
    }

    #footer .wrapFooter .txtFooter {
        font-size: clamp(12px, 3.2vw, 14px);
        margin-bottom: 3px;
        line-height: 1.76;
        text-align: center;
    }

    #footer .wrapFooter #copyright {
        font-size: clamp(12px, 3.2vw, 14px);
        text-align: center;
    }
}