@charset "UTF-8";
/* ------背景色------- */
body{
    background-color: var(--base);
}
/* ------緑色と黄色と茶色の丸の装飾------ */
/* 基準 */
main{
    position: relative;
    overflow: hidden;
}
/* 黄色の丸 */
.yellow-circle{
    top: 5%;
    right: -15px;
}
/* 緑色の丸 */
.green-circle{
    top: 30%;
    left: -15px;
}
/* 茶色の丸 */
.brown-circle{
    top: 70%;
    right: -15px;
}
@media screen and (min-width:768px){
    .yellow-circle{
        right: -100px;
    }
    .green-circle{
        left: -100px;
    }
    .brown-circle{
        right: -100px;
    }
}
@media screen and (min-width:1025px){
    .yellow-circle{
        right: -150px;
    }
    .green-circle{
        left: -150px;
    }
    .brown-circle{
        right: -150px;
    }
}
/* ------「お問い合わせ」のタイトル----- */
.contact-title h1{
    font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* -----commonより上書き------ */
.content_inner h2{
    text-align: center;
}

/* ------電話でのお問い合わせのテキストをタブレット版、PC版は中央揃え----- */
@media screen and (min-width:768px){
    .contact-tel p{
        text-align: center;
    }
}
/* -------電話でのお問い合わせボタン------ */
.contact-phone{
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: var(--accent-yellow);
    box-shadow: 4px 4px 4px var(--box-shadow);
    border-radius: 40px;
    padding: 20px 40px;
    margin: 30px auto 0;
    transition: all 0.3s ease-in;
}
.contact-phone:hover{
    background-color: #DBD378;
    box-shadow: none;
    transform: translateY(2px);
}
/* 電話のアイコンの大きさ */
.contact-phone img{
    width: 40px;
    aspect-ratio: 1;
    height: 40px;
    object-fit: contain;
}
/* -------フォームの横幅を調整----------- */
.contact-mail iframe {
    display: block;
    width: 100%;
    min-height: 600px; /* 高さが潰れないように最小値を設定推奨 */
}

/* --------「TOPへ戻る」ボタン----------- */
/* googleフォームと戻るボタンの間の余白 */
.back-btn-wrapper{
    margin-top: 60px;
    text-align: center;
}
/* 戻るボタンの設定 */
.back-btn-wrapper a{
    display: inline-block;
    background-color:var(--accent-yellow);
    padding: 15px 80px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    box-shadow: 4px 4px 4px var(--box-shadow);
    transition: all 0.3s ease-in;
}
.back-btn-wrapper a:hover{
    background-color: #DBD378;
    box-shadow: none;
    transform: translateY(2px);
}