@charset "utf-8";

@import url("base.css");

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

@font-face {
    font-family: "din2014";
    src: url("../font/din2014/DIN-2014_Bold.eot");
    src: url("../font/din2014/DIN-2014_Bold.eot?#iefix") format("embedded-opentype"),
        url("../font/din2014/DIN-2014_Bold.woff2") format("woff2"),
        url("../font/din2014/DIN-2014_Bold.woff") format("woff"),
        url("../font/din2014/DIN-2014_Bold.ttf") format("truetype"),
        url("../font/din2014/DIN-2014_Bold.svg") format("svg");
}

.din2014 {
    font-family: 'din2014', sans-serif;
}

.notoSansJp {
    font-family: "Noto Sans JP", sans-serif;
}

body {
    /* background-color: #FFFFFF; */
    background: url('../images/common/bg-page.jpg') repeat-y top center / 100%;
    font-size: 14px;
    line-height: 1.5;
    color: #231815;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
}

a {
    color: #231815;
}

body.fixed {
    overflow: hidden;
}

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

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

/* HEADER */
#header {
    width: 100%;
    background: #e50011;
    padding: 17px 0 14px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}

#header .headerBar {}

#header .inner {
    max-width: initial;
    padding: 0 19px 0 19px;
}

#header .headerBar .wrapHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header .headerBar .wrapHeader .logo {
    width: 247px;
    margin-right: 20px;
}

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

#header .headerBar .wrapHeader .logo a img {
    width: 100%;
}

#header .headerBar .wrapHeader .boxHeaderRight {
    width: clamp(350px, 61vw, 900px);
    position: relative;
    margin-top: -5px;
}

#header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto {}

#header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto img {
    width: 100%;
}

#header .headerBar .wrapHeader .boxHeaderRight .numberHeader {
    position: absolute;
    bottom: -4px;
    left: 10.7%;
}

#header .headerBar .wrapHeader .boxHeaderRight .numberHeader a {
    color: #e50011;
    letter-spacing: 0.2px;
    line-height: 1;
    display: block;
    font-size: clamp(30px, 4.2vw, 42px);
}


#header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 20px;
    transform: translate(0px, 8px);
}

#header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight li.current-menu-item a,
#header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight li a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-underline-offset: 7px;
    text-decoration-color: #ffe300ff;
}


#header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight li a {
    color: #fff;
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 20px;
}

/* --- CTAボタン --- */
.hd-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: #F9DA4A;
    color: #D12D25;
    font-weight: 900;
    border-radius: 6px;
    padding: 11px 22px;
    box-shadow: 0 3px 0 #E0BE28;
    position: relative;
    overflow: hidden;
    transition: transform .12s, box-shadow .12s;
}

.hd-cta:hover {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--k-yellow-d)
}

.hd-cta__main {
    font-size: 16px;
    line-height: 1.25
}

.hd-cta__sub {
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap
}

.hd-cta::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 28%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: rotate(18deg);
    animation: hd-shine 3.6s ease-in-out infinite;
}

@keyframes hd-shine {
    0% {
        left: -40%
    }

    24% {
        left: 135%
    }

    100% {
        left: 135%
    }
}

/* --- スマホ（1100px以下） --- */
@media (max-width:1100px) {
    .hd-tel {
        display: none
    }

    /* 電話は下の白帯に移動 */
    .hd-cta {
        padding: 8px 12px;
        white-space: nowrap
    }

    .hd-cta__main {
        font-size: 13px
    }

    .hd-cta__main::after {
        content: ""
    }

    .hd-cta__main {
        font-size: 13px
    }

    .hd-cta__sub {
        font-size: 9px
    }

    .pc-only {
        display: none
    }
}

#header .headerBar .wrapHeader .boxHeaderRight .headerRightBtn {
    display: inline-flex;
    margin-left: 30px;
}

/* MENU */
#header .headerBar .boxHeader {
    display: flex;
}

.hamburger {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 45px;
    margin-bottom: 0px;
    height: 29px;
    cursor: pointer;
    transition: 0.3s;
}

.hamburger span {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 4px;
    background: #ffffff;
    -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: 7px;
}

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

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

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

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

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

#header .headerBar .wrapHambuger {
    transition: 0.3s;
    z-index: 999;
    transform: translateY(7px);
    margin-left: 15px;
}

#header .headerBar .wrapHambuger .txtHamburger {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-top: 4px;
    z-index: 1;
}

#header .headerBar .wrapHambuger.open .txtHamburger {
    display: none;
}

#header .mainMenu {
    position: absolute;
    right: -100%;
    top: 78px;
    width: 100%;
    height: 100vh;
    transition: 500ms all linear;
    background: rgba(255, 255, 255, 0.5);
    /* cursor: pointer; */
}

#header .mainMenu.showMenu {
    right: 0;
}

#header .mainMenu .iframeMenu {
    background-color: #e50011;
    padding: 5.6vw 2.6vw 10vw 2.6vw;
    padding: 2px 0 0;
    height: calc(100vh - 78px);
    /* max-height: calc(100vh - 78px); */
    width: fit-content;
    min-width: 390px;
    margin: 0 0 0 auto;
    border-radius: 0;
}

#header .mainMenu .iframeMenu .wrapMenuHeader {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    overflow-y: auto;
    height: 100%;
}

.menuHeader a,
.menuHeader a:focus,
.menuHeader a:active,
.menuHeader a:visited {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#header .mainMenu .iframeMenu .wrapMenuHeader::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

#header .mainMenu .iframeMenu .menuHeader {
    width: 100%;
}

#header .mainMenu .iframeMenu .menuHeader li {
    margin-bottom: 0;
}

#header .mainMenu .iframeMenu .menuHeader li:first-child a {
    border-top: 1px solid #211815;
}

#header .mainMenu .iframeMenu .menuHeader li:last-child {
    margin-bottom: 0;
}

#header .mainMenu .iframeMenu .menuHeader li a {
    font-size: 18px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1.8px;
    line-height: 1.2;
    position: relative;
    padding: 22.7px 50px 17.1px 27px;
    display: block;
    border-bottom: 1px solid #211815;
    transition: 0.3s;
}

#header .mainMenu .iframeMenu .menuHeader li a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 19px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url('../images/common/menu-icon-arrow-right.svg') no-repeat;
    background-size: 100%;
}

#header .headerBar .wrapHambuger.open {
    z-index: 1;
    position: relative;
}

#fixH {
    height: 78.33px;
}

/* sectionTitlePage */
.sectionTitlePage {
    background: url('../images/common/bg-page-title.jpg') repeat-y top -42px center / cover;
    padding: 86px 0 116px;
}

.sectionTitlePage .inner {}

.sectionTitlePage .containerPage {
    max-width: 605px;
    width: 100%;
    margin: 0 auto;
}

.sectionTitlePage .wrapTitlePage {
    border: 3px solid #e50012;
    border-radius: 14px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
    background: #ffffff;
}

.sectionTitlePage .wrapTitlePage .contentTitlePage {
    position: relative;
    border: 4px solid #f4e827;
    border-radius: 13px;
}

.sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage {
    padding: 15px 30px 12px;
}

.sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage .titlePageJp {
    color: #e50011;
    font-weight: 900;
    font-size: 32px;
    text-align: center;
    letter-spacing: 2.8px;
}

.sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage .titlePageEn {
    font-size: 27.5px;
    font-weight: bold;
    color: #e50011;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 1px;
}

.sectionTitlePage .wrapTitlePage .characterPageTitle {
    position: absolute;
    bottom: -21px;
    right: -54px;
    width: 178px;
}

.sectionTitlePage .wrapTitlePage .characterPageTitle img {
    width: 100%;
}

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

/* titleCompair */
/* .titleCompair {
    font-size: 65.5px;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
}
.titleCompair .titleColYellow {
    color: #f4e827;
} */
/* wrapBtn */
.wrapBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    min-width: 500px;
    max-width: 700px;
    width: fit-content;
}

.wrapBtn .characterBtn {
    width: 143px;
    position: absolute;
    left: -4px;
    bottom: -13px;
    z-index: 1;
}

.wrapBtn .characterBtn img {
    width: 100%;
}

.wrapBtn .boxBtn {
    width: 100%;
    padding-left: 50px;
}

.wrapBtn .boxBtn a {
    display: block;
    color: #e50011;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: 0.5px;
    text-align: center;
    background: #fff100;
    border-radius: 40px;
    padding: 4px 13px;
    border: 3px solid #e50011;
    box-shadow: 5px 5px 0px rgba(201, 28, 29, 1);
    overflow: hidden;
}

.wrapBtn .boxBtn a .txtBtn {
    position: relative;
    display: block;
    padding: 0px 58px 0 82px;
}

.wrapBtn .boxBtn a .txtBtn:after {
    content: "";
    position: absolute;
    background: url('../images/common/icon-button-right.png') no-repeat;
    background-size: 100%;
    width: 34px;
    height: 34px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.wrapBtn .txtBtnSpecial {
    font-size: 23px;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    padding-left: 14px;
    letter-spacing: 3.1px;
    line-height: 1.3;
    margin-bottom: 7px;
}

/* sectionInfoFt */
.sectionInfoFt {
    background: #ffdaadff;
    padding: 32px 0 34px;
}

.sectionInfoFt .inner {}

.sectionInfoFt .wrapInfoFt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 16px 18px 16px;
    border-radius: 12px;
    max-width: 870px;
    margin: 0 auto;
}

.sectionInfoFt .wrapInfoFt .iframeMap {
    width: 48.1%;
    height: 207px;
}

.sectionInfoFt .wrapInfoFt .iframeMap iframe {
    aspect-ratio: 401/207;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    line-height: 0;
}

.sectionInfoFt .wrapInfoFt .boxInfoFt {
    font-size: 11px;
    font-weight: bold;
    width: 47.9%;
    letter-spacing: 2.3px;
    line-height: 1.58;
    margin-top: 0px;
}

.sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtBig {
    font-size: 23px;
    display: block;
    letter-spacing: 3px;
    line-height: 1.3;
    padding: 0;
}

.sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed {
    font-size: 26px;
    color: #e50011;
    letter-spacing: 3.8px;
    line-height: 1.2;
    padding: 0 4px;
}

.sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed a {
    color: #e50011;
    letter-spacing: 4.3px;
    margin-left: -3px;
}

.sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoSmall {
    font-size: 12px;
    line-height: 1.4;
}

/* FOOTER */
#footer {
    width: 100%;
    background: #e50011;
    padding: 65px 0;
}

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

#footer .wrapFooter {}

#footer .wrapFooter .logoFt {
    width: 307px;
    margin: 0 7px 31px;
}

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

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

#footer .wrapFooter .ftMenu {
    margin-bottom: 32px;
}

#footer .wrapFooter .ftMenu .menu {
    display: flex;
    flex-wrap: wrap;
    /* gap: clamp(10px, 1.5vw, 16px); */
}

#footer .wrapFooter .ftMenu .menu li {
    width: clamp(107px, 10.3vw, 109px);
}

#footer .wrapFooter .ftMenu .menu li a {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    display: block;
    text-align: center;
    letter-spacing: 2px;
}

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

/* ANIMATION */
/* ===== PHILOSOPHY PHOTO: Hiệu ứng cuốn chiếu từ trái sang phải ===== */
.rollingEffect {
    position: relative;
    overflow: hidden;
}

/* Lớp overlay (tấm màn) che phía trên hình ảnh */
.rollingEffect::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffe300ff;
    z-index: 2;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
}

/* Khi đã được trigger (scroll đến nơi) → kéo overlay sang phải */
.rollingEffect.reveal-ltr::before {
    transform: scaleX(0);
    transform-origin: right center;
}

.rollingEffect img {
    display: block;
    transform: scale(1.06);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.rollingEffect.reveal-ltr img {
    transform: scale(1);
}

/* ===== END PHILOSOPHY PHOTO ===== */
@media (max-width: 1500px) {
    #header .headerBar .wrapHeader .boxHeaderRight {
        width: clamp(350px, 61vw, 850px);
    }
}

@media (max-width: 1353px) {
    #header .headerBar .wrapHeader .boxHeaderRight {
        width: clamp(350px, 75vw, 850px);
    }
}

@media (max-width: 1023px) {
    #header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight li a {
        font-size: 18px;
    }
}

@media (max-width: 1000px) and (min-width: 769px) {
    .sectionTitlePage {
        background-position-y: top 0;
    }
}

@media (max-width: 980px) {
    #header .headerBar .wrapHeader .boxHeaderRight .menuHeaderRight li a {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    #header .headerBar .wrapHeader .boxHeaderRight.pc {
        display: none;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .sectionInfoFt .wrapInfoFt .boxInfoFt {
        letter-spacing: 1.3px;
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed {
        letter-spacing: 1.8px;
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed a {
        letter-spacing: 2.3px;
    }
}

@media (max-width: 1080px) {
    #header .headerBar .wrapHambuger {
        transform: translateY(clamp(0px, calc(2.2508vw - 17.31px), 7px));
    }
}

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

    .hover:hover {
        opacity: 0.7;
    }

    .wrapBtn .boxBtn a {
        position: relative;
    }

    .wrapBtn .boxBtn a:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: #ffffff;
        transition: all 0.4s;
    }

    .wrapBtn .boxBtn a:hover:before {
        width: 100%;
        left: 0;
        right: auto;
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed a {
        pointer-events: none;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a {
        pointer-events: none;
    }

    .sectionTelSp {
        display: none !important;
    }

    #footer .wrapFooter .ftMenu .menu li a:hover {
        color: #fff100;
    }

    #header .mainMenu .iframeMenu .menuHeader li a:hover {
        color: #fff100;
    }

    #header .mainMenu .iframeMenu .menuHeader li a:hover::after {
        background: url("../images/common/menu-icon-arrow-right-hover.svg") no-repeat;
        background-size: 100%;
    }
}

/* STYLE MOBILE */
@media (max-width: 768px) {
    body {
        background-image: url('../images/common/bg-page-sp.jpg');
        background-size: 100%;
    }

    .pc {
        display: none;
    }

    .hover:hover {
        opacity: 1;
    }

    .inner {
        width: 100%;
        padding: 0 4.9%;
    }

    /* MENU */
    #header .mainMenu {
        cursor: default;
    }

    .menuHeader a,
    .menuHeader a:focus,
    .menuHeader a:active,
    .menuHeader a:visited {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger {
        width: clamp(31px, 8vw, 62px);
        height: clamp(30px, 8vw, 60px);
        padding: 0 0 2px;
        z-index: 9991;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        position: relative;
    }

    .hamburger span {
        display: block;
        height: 5px;
        height: clamp(3px, 0.7vw, 5px);
        width: 100%;
        background: #ffffff;
        -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;
        border-radius: 5px;
    }

    .hamburger span:nth-child(1) {
        margin-bottom: clamp(6px, 1.6vw, 10.5px);
    }

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

    .hamburger span:nth-child(3) {
        margin-top: clamp(6px, 1.6vw, 10.5px);
    }

    .hamburger.open span:nth-child(1) {
        margin-bottom: clamp(-5px, -0.7vw, -3px);
        -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: clamp(-5px, -0.7vw, -3px);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .wrapHambuger.open .hamburger span:nth-child(1) {
        margin-bottom: clamp(-5px, calc(-0.5333vw - 1px), -3px);
    }

    .wrapHambuger.open .hamburger span:nth-child(3) {
        margin-top: clamp(-5px, calc(-0.5333vw - 1px), -3px);
    }

    /* HEADER */
    #header {
        padding: 16px 0 14px;
        background: #d61518;
    }

    #header .headerBar {}

    #header .inner {
        width: 100%;
        padding: 0 2.4%;
    }

    #header .headerBar .wrapHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #header .headerBar .wrapHeader .logo {
        margin-right: 0;
        width: clamp(165px, 33.1vw, 248px);
    }

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

    #header .headerBar .wrapHeader .logo a img {
        width: 100%;
    }

    .sectionTelSp {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 99;
        display: none;
    }

    .sectionTelSp .boxHeaderRight .headerRightPhoto {}

    .sectionTelSp .boxHeaderRight .headerRightPhoto a {
        display: block;
        width: 100%;
    }

    .sectionTelSp .boxHeaderRight .headerRightPhoto a img {
        width: 100%;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto img {
        width: 100%;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .numberHeader {
        position: absolute;
        bottom: -4px;
        left: 10.7%;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .numberHeader a {
        color: #e50011;
        letter-spacing: 0.2px;
        line-height: 1;
        display: block;
        font-size: clamp(30px, 4.2vw, 42px);
    }

    #header .headerBar .wrapHeader .boxHeader {
        width: calc(100% - clamp(165px, 33.1vw, 248px) - 10px);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(10px, 3.1vw, 20px);
    }

    #header .headerBar .wrapHeader .boxHeaderRight {
        width: clamp(126px, 26.9vw, 188px);
        margin-top: -3px;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto {
        width: 100%;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a {
        background: #02b145;
        padding: 5px 5px;
        border-radius: 5px;
        display: block;
        width: 100%;
        position: relative;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a .wrapRightTelSp {
        background: #ffffff;
        padding: 4px 5px 3px;
        border-radius: 1px;
        display: flex;
        align-items: center;
        gap: clamp(7px, 0.9vw, 7px);
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a .wrapRightTelSp:after {
        content: "";
        position: absolute;
        background: url('../images/common/icon-tel-sp.svg') no-repeat;
        background-size: 100%;
        width: 8px;
        height: 9px;
        top: 52%;
        transform: translateY(-50%);
        right: clamp(7px, 2vw, 15px);
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a .txtFeeHeader {
        font-size: clamp(11px, 1.8vw, 13px);
        height: clamp(30px, 4.7vw, 35px);
        width: clamp(30px, 4.7vw, 35px);
        border-radius: 50%;
        background: #c81d1d;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #header .headerBar .wrapHeader .boxHeaderRight .headerRightPhoto a .txtEstimateHeader {
        font-size: clamp(12px, 3vw, 22px);
        color: #02b145;
        font-weight: bold;
        white-space: nowrap;
    }

    #header .headerBar .wrapHeader .boxHeader .wrapHambuger {
        transform: translate(1px, -1px);
        margin-left: 3px;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu {
        position: absolute;
        top: clamp(74px, 12vw, 90px);
        /* left: 0; */
        height: calc(100vh - clamp(74px, 12vw, 90px));
        width: 100%;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu {
        height: 100%;
        width: 100%;
        padding: clamp(5px, 1.33vw, 8px) 0 0;
        background-color: #d61518;
        max-height: unset;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader {
        overflow-y: auto;
        height: 100%;
        padding-bottom: clamp(74px, 12vw, 90px);
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader::-webkit-scrollbar {
        display: none;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader li {
        margin-bottom: 0;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader li a {
        font-size: clamp(17.35px, 4.6267vw, 34.7px);
        padding: clamp(22px, 5.8667vw, 44px) clamp(45px, 12vw, 90px) clamp(16.55px, 4.4133vw, 33.1px) clamp(26px, 6.9333vw, 52px);
        position: relative;
        display: block;
        letter-spacing: clamp(1.5px, 0.4vw, 3px);
        height: 100%;
        color: #ffffff;
        font-weight: 900;
        text-align: start;
    }

    #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader li a::after {
        width: clamp(24px, 5.6vw, 42px);
        height: clamp(24px, 5.6vw, 42px);
        background: url("../images/common/menu-icon-sp.png") no-repeat;
        background-size: 100%;
        top: 50%;
        right: 36px;
    }

    #fixH {
        height: clamp(67px, 10.4vw, 77.53);
    }

    /* sectionTitlePage */
    .sectionTitlePage {
        padding: clamp(34px, 9.1vw, 68px) 0 clamp(27px, 7.1vw, 53px);
        background-position-y: top 0;
        background-image: url('../images/common/bg-page-title-sp.jpg');
    }

    .sectionTitlePage .inner {
        padding: 0 4%;
    }

    .sectionTitlePage .containerPage {
        max-width: 100%;
        padding-right: 6px;
    }

    .sectionTitlePage .wrapTitlePage {
        border-width: 2px;
        border-radius: 14px;
        box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.7);
    }

    .sectionTitlePage .wrapTitlePage .contentTitlePage {
        position: relative;
        border: 4px solid #f4e827;
        border-radius: 10px;
    }

    .sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage {
        padding: clamp(5.5px, 2.2vw, 15px) clamp(15px, 4vw, 30px) clamp(6px, 2.2vw, 13px) clamp(18.5px, 5vw, 37px);
    }

    .sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage .titlePageJp {
        font-size: clamp(20px, 4.3vw, 32px);
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .sectionTitlePage .wrapTitlePage .contentTitlePage .boxTitlePage .titlePageEn {
        font-size: clamp(14px, 3.8vw, 28px);
        line-height: 1.1;
    }

    .sectionTitlePage .wrapTitlePage .characterPageTitle {
        width: clamp(73px, 19.4vw, 146px);
        bottom: -11px;
        right: -14px;
    }

    .sectionTitlePage .wrapTitlePage .characterPageTitle img {
        width: 100%;
    }

    /* wrapBtn */
    .wrapBtn {
        max-width: clamp(337.5px, 90vw, 675px);
        margin: 0 auto;
        /* max-width: 790px; */
        /* display: block; */
        min-width: initial;
        width: 100%;
    }

    .wrapBtn .characterBtn {
        width: clamp(77px, 20.6vw, 154px);
        left: -1px;
        bottom: -14px;
        bottom: clamp(-14px, -1.9vw, -5px);
    }

    .wrapBtn .boxBtn {
        width: calc(100% - clamp(76.5px, 20.5vw, 153px));
        width: 100%;
        padding-left: 8vw;
        padding-left: 57px;
        padding-left: clamp(20px, 8vw, 57px);
    }

    .wrapBtn .boxBtn a {
        font-size: clamp(18px, 4.8vw, 36px);
        border-radius: 40px;
        padding: 4px 13px 5px;
        border: 3px solid #e50011;
        box-shadow: clamp(4px, 0.7vw, 5.5px) clamp(4px, 0.6vw, 5.5px) 0px rgba(188, 32, 33, 1);
        letter-spacing: -0.8px;
        min-height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .wrapBtn .boxBtn a .txtBtn {
        padding: 0 clamp(29px, 5.4vw, 40px) 0 clamp(35.5px, 9.6vw, 71px);
    }

    .wrapBtn .boxBtn a .txtBtn:after {
        width: clamp(18px, 4.8vw, 36px);
        height: clamp(18px, 4.8vw, 36px);
        right: 0;
    }

    .wrapBtn .txtBtnSpecial {
        font-size: clamp(13.5px, 3.6vw, 27px);
        padding-left: clamp(10px, 3vw, 20px);
        letter-spacing: clamp(1px, 0.5vw, 3.7px);
        line-height: 1.3;
        margin-bottom: 10px;
    }

    /* sectionInfoFt */
    .sectionInfoFt {
        background: #ffdaadff;
        padding: 40px 0;
    }

    .sectionInfoFt .wrapInfoFt {
        flex-direction: column;
        padding: 20px 20px;
        border-radius: 20px;
        max-width: 590px;
    }

    .sectionInfoFt .wrapInfoFt .iframeMap {
        width: 100%;
        margin-bottom: 30px;
        height: 245px;
    }

    .sectionInfoFt .wrapInfoFt .iframeMap iframe {}

    .sectionInfoFt .wrapInfoFt .boxInfoFt {
        font-size: clamp(12px, 1.9vw, 14px);
        width: 100%;
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtBig {
        font-size: clamp(12px, 1.9vw, 14px);
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed {
        font-size: clamp(20px, 3.8vw, 28px);
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoFtRed a {
        letter-spacing: 3.3px;
    }

    .sectionInfoFt .wrapInfoFt .boxInfoFt .txtInfoSmall {
        font-size: clamp(12px, 1.9vw, 14px);
    }

    /* FOOTER */
    #footer {
        padding: 30px 0 clamp(55px, 15vw, 110px);
    }

    #footer .inner {}

    #footer .wrapFooter {
        max-width: 660px;
        margin: 0 auto;
    }

    #footer .wrapFooter .logoFt {
        width: 100%;
        max-width: 366px;
        margin: 0 auto 30px;
    }

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

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

    #footer .wrapFooter .ftMenu {
        max-width: 300px;
        margin: 0 auto 35px;
    }

    #footer .wrapFooter .ftMenu .menu {
        justify-content: space-between;
        gap: 10px 0;
    }

    #footer .wrapFooter .ftMenu .menu li {
        width: 45%;
    }

    #footer .wrapFooter .ftMenu .menu li a {
        font-size: 15px;
        text-align: left;
    }

    #footer .wrapFooter #copyright {
        font-size: 13px;
        padding: 0;
        max-width: 470px;
        margin: 0 auto;
        text-align: center;
    }

}

@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 768px) {
        #header .headerBar .wrapHeader .boxHeader .mainMenu .iframeMenu .menuHeader {
            padding-bottom: clamp(90px, 12vw, 90px);
        }
    }
}

/* not found */
.item-notfound {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .item-notfound {
        font-size: clamp(20px, 4.3vw, 32px);
    }
}