@charset "utf-8";

body{
    font-family: "Noto Sans JP", sans-serif;
    color: #272825;
    font-size: 16px;
}

img{
    max-width: 100%;  /* 画像が親要素の幅を超えないようにする */
    height: auto;  /* 画像の縦横比を保つ */
    vertical-align: bottom; /* 下側の余白を消す */
}

:root {
    --main-color: #2764b0;
    --accent-color: #e83f7b;
    --main-bg-color: #ffe101;
}

/*共通*/
span{
    display: inline-block;
}
.text-white_blue{
    font-weight: bold;
    color:#ffffff;
    text-shadow: 2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
                -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
                0px 2px 0 var(--main-color),  0px -2px 0 var(--main-color),
                -2px 0px 0 var(--main-color), 2px 0px 0 var(--main-color);
}
.text-blue_white{
    font-weight: bold;
    color: var(--main-color);
    text-shadow: 2px 2px 0 #ffffff, -2px -2px 0 #ffffff,
                -2px 2px 0 #ffffff, 2px -2px 0 #ffffff,
                0px 2px 0 #ffffff, 0px -2px 0 #ffffff,
                -2px 0 0 #ffffff, 2px 0 0 #ffffff;   
}
.white-red{
    text-shadow: 2px 2px 0 #ffffff, -2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff, 2px -2px 0 #ffffff,
    0px 2px 0 #ffffff, 0px -2px 0 #ffffff,
    -2px 0 0 #ffffff, 2px 0 0 #ffffff;   
}
.text-red{
    color: var(--accent-color);
}
.text-blue{
    color: var(--main-color);
}
.text-gray{
    color: #909290;
    font-size: clamp(12px,1.1vw,16px);
}
.text-yen{
    font-size: clamp(12px,1.3vw,18px);
}
.text-nomal{
    font-size: clamp(12px,1.1vw,16px);
}
.text-small{
    font-size: clamp(10px,1.0vw,14px);
}
.text-large{
    font-size: clamp(18px,2.9vw,32px);
}
.text-larger{
    font-size: clamp(12px,2.3vw,24px);
}
.text-largest{
    font-size: clamp(24px,3.2vw,40px);
}
.text-left{
    text-align: left;
}
.h2-small{
    font-size: clamp(16px,2.3vw,20px);
}
.yellow-line{
    display: inline-block;
    background:linear-gradient(transparent 50%, var(--main-bg-color) 60%);
}
.yellow-bg{
    display: inline-block;
    background-color: var(--main-bg-color);
    padding: 4px 30px;
}
.half-space{
    margin-right: 0.5rem;
}
.space{
    margin-right: 1rem;
}
.top-space{
    margin-top: 1.5rem;
}
.span-column{
    display: flex;
    justify-content: center;
}
.text-flex{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.column{
    white-space: pre;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl; 
    font-size: 16px;
}
.text-up{
    position: relative;
}
.slant{
    position: absolute;
    display: inline-block; 
    transform: rotate(-15deg) translate(-15px,-15px);
    font-size: 20px;
}
.dotline-side{
    border-right: 3px dotted #909290;
    padding: 4px;
    height: 100%;
}
.dotline-under{
    border-bottom: 3px dotted #909290;
    padding: 4px;
    width: 90%;
    margin: auto;
}
.section-title{
    font-size: 48px;
    font-weight: bold;
    color: var(--main-color);
    border-bottom: 5px solid var(--main-color);
    display: inline-block;
    margin: auto;
    padding-bottom: 5px;
}

/*under-btn*/
.under-btn{
    padding: 0 10px 10px;
    text-align: center;
    font-weight: bold;
    background-image: url(../img/btn-bg.png);
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
}
div.under-btn-link{
    max-width: 350px;
}
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.phone-number{
    transform: translateY(8px);
}

/*fv*/
.sp-only{
    display: none;
}
.fv{
    background-image: url(../img/fv-pc.png);
    height: 100%;
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center;
    position: relative;
    font-weight: bold;
    padding: 20px 10px 40px;
    overflow: hidden;
}
.aircon-img{
    position: absolute;
    top: 0;
    right: 0;
}
.fv-subtitle{
    display: flex;
    align-items: center;
    font-size: 34px;
}
.subtitle-text{
    display: flex;
    flex-direction: column;
}
.fv-title{
    position: relative;
    width: 80%;
    margin: auto;
    padding: 34px;
}
.fv-subtitle-img{
    position: absolute;
    top: 20px;
    left: 45%;
}
.fv-title span{
    font-size: 34px;
}
.fv-title h1{
    font-size: 80px;
}

/*campaign*/
.campaigns{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    position: relative;
    z-index: 5;
    width: 80%;
    margin: auto;
    text-align: center;
}
.campaign{
    background-color: #ffffff;
    border: 4px solid var(--main-color);
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 10px 5px;
}
.campaigns-wrapper{
    width: 55%;
}
.campaigns-wrapper2{
    width: 45%;
}
.campaign h2{
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 8px;
}
.campaign-contents{
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    align-items: flex-end;
    gap: 16px;
    margin-top: 16px;
}
.campaign-content{
    padding: 10px;
}
.campaign-content-text{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    margin-top: 4px;
}
.padding-bottom{
    padding-bottom: 32px;
}

/*service*/
.service{
    text-align: center;
    font-weight: bold;
    padding: 60px 10px;
    background-image: url(../img/service-pc.png);
    height: 100%;
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center;
}
.service-contents{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 80%;
    margin: auto;
    padding: 24px 0px 40px;
}
.service-content{
    width: calc((100% - 16px) / 2);
    background-color: #ffffff;
    border: 4px solid var(--main-color);
    border-radius: 10px;
}
.service-content h3{
    color: #ffffff;
    background-color: var(--main-color);
    padding: 10px;
    font-size: 24px;
}
.service-content h3 span{
    font-size: 40px;
    color: #ffff48;
}
.service-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    gap: 5px;
    padding: 8px 0 0;
}
.icon{
    width: 120px;
}
.service-content h4{
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 8px;
}
.service time{
    display: block;
    text-align: left;
    padding: 16px 10px;
    border-top: 1px solid #272825;
    border-bottom: 1px solid #272825;
    margin: 0 10px;
    font-size: 18px;
}
.service-text{
    text-align: left;
    margin: 0 10px;
    font-size: 18px;
    padding: 16px 10px;
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #272825;
}
.service-text-title{
    width: 40%;
    text-align: center;
}
.service-campaign{
    background-color: #fffdc8;
    margin: 32px 16px;
    border: 4px solid var(--accent-color);
    border-radius: 10px;
    padding: 10px;
}
.slant-service{
    position: absolute;
    display: inline-block;
    transform: rotate(-15deg) translate(-15px, -15px);
    font-size: 18px;
}
.yellow-bg-service{
    display: inline-block;
    background-color: var(--main-bg-color);
    padding: 4px 25px;
}

/*option*/
.option{
    background-color: #ffffff; 
    background-image: radial-gradient(#d1d1d2 10%, transparent 10%);
    background-size: 20px 20px;
    border: 6px solid var(--accent-color);
    border-radius: 10px;
    width: 80%;
    margin: auto;
    padding: 24px 0;
}
.option-contents{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px 32px 24px;
}
.option-content{
    width: calc((100% - 48px) / 4);
}

/*CTA*/
.cta{
    text-align: center;
    font-weight: bold;
    padding: 60px 10px;
    background-image: url(../img/btn-bg.png);
    height: 100%;
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position: center center;
}
.cta-img{
    max-width: 344px;
    width: 80%;
    margin: auto;
}
.link{
    max-width: 534px;
    width: 50%;
    text-align: center;
}
.btn{
    display: inline-block;
    transition: 0.3s ease;
    pointer-events: none;
}
.btn:hover,
.btn:active {
    transform: scale(0.97);
    filter: brightness(1.2);
}



/*
レスポンシブ対応
*/
@media screen and (max-width: 1399px) {
    .fv-subtitle-img {
        left: 52%;
    }
    .yellow-bg {
        padding: 4px 25px;
    }
    .slant-service {
        font-size: 14px;
    }
    .yellow-bg-service {
        padding: 4px 12px;
    }
    .slant {
        font-size: 18px;
    }
}
@media screen and (max-width: 1199px) {
    .fv-title {
        width: 100%;
    }
    .campaigns {
        width: 95%;
    }
    .text-left {
        font-size: 14px;
    }
    .campaign-content {
        padding: 8px;
    }
    .service-contents {
        width: 95%;
    }
    .option{
        width: 95%;
    }
    .slant {
        font-size: 14px;
    }
}
@media screen and (max-width: 959px) {
    .text-white_blue{
        font-weight: bold;
        color:#ffffff;
        text-shadow: 1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
                    -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
                    0px 1px 0 var(--main-color),  0px -1px 0 var(--main-color),
                    -1px 0px 0 var(--main-color), 1px 0px 0 var(--main-color);
    }
    .text-blue_white{
        font-weight: bold;
        color: var(--main-color);
        text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff,
                    -1px 1px 0 #ffffff, 1px -1px 0 #ffffff,
                    0px 1px 0 #ffffff, 0px -1px 0 #ffffff,
                    -1px 0 0 #ffffff, 1px 0 0 #ffffff;   
    }
    .white-red{
        text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff, 1px -1px 0 #ffffff,
        0px 1px 0 #ffffff, 0px -1px 0 #ffffff,
        -1px 0 0 #ffffff, 1px 0 0 #ffffff;   
    }
    .fv-title span {
        font-size: 24px;
    }
    .fv-title h1 {
        font-size: 64px;
    }
    .fv-subtitle-img {
        top: 0px;
    }
    .campaigns {
        flex-direction: column;
        width: 80%;
    }
    .campaigns-wrapper {
        width: 100%;
    }
    .campaigns-wrapper2 {
        width: 100%;
    }
    .service-contents {
        flex-direction: column;
    }
    .service-content {
        width: 80%;
    }
    .service time {
        font-size: 16px;
    }
    .service-text {
        font-size: 16px;
    }
    .option-content {
        width: calc((100% - 16px) / 2);
    }
    .column {
        font-size: 14px;
    }
    .slant {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    .fv{
        background-image: url(../img/fv-sp.png);
    }
    .service{
        background-image: url(../img/service-sp.png);
        width: 100%;
        background-repeat:repeat; 
        background-size:contain; 
    }
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    }
    .fv-title h1 {
        font-size: 58px;
        line-height: 1.2;
        margin-top: 8px;
    }
    .fv-title span {
        font-size: 20px;
    }
    .fv-subtitle-img {
        left: 68%;
    }
    .aircon-img {
        right: -15%;
    }
    .campaigns {
        width: 95%;
    }
    .text-flex {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0px;
    }
    .sp-flex{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .service-content {
        width: 95%;
    }
    .option {
        width: 95%;
    }
    .yellow-bg {
        padding: 4px 15px;
    }
    .slant {
        font-size: 12px;
        transform: rotate(-15deg) translate(-8px, -15px);
    }
    .campaign-contents {
        gap: 8px;
    }
    .campaign-content-text {
        gap: 0px;
    }
    .campaign-content {
        padding: 5px;
    }
    .slant-service {
        font-size: 12px;
        transform: rotate(-15deg) translate(-5px, -15px);
    }
    .service-content h3 span {
        font-size: 32px;
    }
    .section-title {
        font-size: 40px;
    }
    .option-contents {
        padding: 32px 16px 24px;
    }
    .column {
        font-size: 12px;
    }
    .btn{
        pointer-events: auto;
    }
}
@media screen and (max-width: 480px) {
    body{
        font-size: 10px;
        letter-spacing: 0.05rem;
    }
    .half-space {
        margin-right: 0.2rem;
    }
    .fv{
        padding: 20px 5px 40px;
    }
    .fv-title h1 {
        font-size: 40px;
    }
    .fv-title span {
        font-size: 16px;
    }
    .fv-title {
        padding: 8px;
    }
    .fv-subtitle-img {
        left: 73%;
        width: 85px;
    }
    .aircon-img {
        width: 95%;
    }
    .campaign h2 {
        font-size: 14px;
    }
    .campaign {
        padding: 10px 0px;
    }
    .campaigns {
        width: 95%;
    }
    .service-content {
        width: 95%;
    }
    .option {
        width: 95%;
    }
    .slant {
        font-size: 12px;
        transform: rotate(-15deg) translate(0px, -15px);
    }
    .text-left {
        font-size: 10px;
    }
    .yellow-bg {
        padding: 4px 10px;
    }
    .service-campaign {
        margin: 16px 4px;
        padding: 5px 0px;
    }
    .slant-service {
        font-size: 12px;
    }
    .service-text {
        font-size: 14px;
        padding: 16px 0px;
    }
    .column {
        font-size: 10px;
    }
    .campaign-contents {
        gap: 2px;
    }
    .dotline-under {
        width: 100%;
    }
    .section-title {
        font-size: 32px;
    }
    .service{
        padding: 60px 7px;
    }
    .service-content h3 {
        font-size: 20px;
    }
    .service-content h3 span {
        font-size: 24px;
    }
    .service-icon {
        font-size: 20px;
    }
    .service-content h4 {
        font-size: 32px;
    }
    .service time {
        font-size: 14px;
    }
    .service-text-title {
        width: 50%;
    }
    .yellow-bg-service {
        padding: 4px 4px;
    }
    .slant-service {
        transform: rotate(-15deg) translate(-0px, -15px);
    }
    .option-contents {
        padding: 32px 4px 24px;
    }
    .option-contents {
        gap: 8px;
    }
    .service-contents {
        width: 100%;
    }
    .phone-number{
        display: none;
    }
    .link{
        width: 90%;
    }
}