/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    display:block;
}
.main__sp{
    display:none;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* overflow-x: hidden; */
}

.container{
    width:100%;
}

/* Images */
img {
    display: block;
    width: 100%;
}

/* Contact Form Styling */
.contact {
    width: 100%;
    background-color: #F6F6F6;
}

.contact__title {
    font-size: 3vw;
    text-align: center;
    padding: 75px 15px auto;
    color:#333333;
    letter-spacing: 0.4vw;
}
.contact__privacy__box{
    width:85%;
    margin: 0 auto;
}
.privacy__title{
    font-size: 24px;
    margin: 24px auto;

}
.contact__privacy p {
    font-size:12px;
    text-align: left;
}
.contact__privacy h3 {
    font-size:18px;
    text-align: left;
    margin: 15px 0;
}
.contact__privacy__date{
    margin: 30px 0;
}

.contact form {
    text-align: center;
    margin: 20px 0 auto;
}

/* #contact__form__aria, */
.contact__form input,
.contact__form label,
.contact__form textarea,
.contact__form select,
.privacy__check,
.contact__privacy {
    width: 780px;
    margin: 0 auto;
    text-align: center;
}

#contact__form__aria {
    background-color: #f5f5f5;
    padding-top: 64px;
}

.contact__form input {
    height: 56px;
    text-align: left;
    font-size:24px;
    margin-bottom: 27px;
    padding:1%;
}

.contact__form select {
    height: 56px;
    text-align: left;
    font-size:16px;
    margin-bottom: 27px;
    padding:1%;
}

.contact__form textarea {
    height: 160px;
    font-size:20px;
    text-align: left;
    padding:2%;
    margin-bottom: 35px;
}

.contact__privacy {
    height: 226px;
    overflow: auto;
    border: 1px solid #9FA0A2;
    margin-bottom: 72px;
    background-color: #FFFFFF;
}

#submit__button {
    width: 228px;
    height: 92px;
    background-color: #384150;
    font-size: 30px;
    color: white;
    margin: 0 auto 75px;
    border:none;
    cursor: pointer;
    border-radius: 5px;
}
.button-text {
    letter-spacing:1vw;
    padding-left:1vw;
}

.contact label {
    font-size: 22px;
    font-weight:bold;
    color: #333333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 2024年8月追加 ラジオボタン等 */
.requiredMessage{
    text-align:left !important;
}

.requiredMessage::after {
    font-weight:400;
    content: "必須";
    background-color: #FF9934;
    font-size: 14px;
    color: #FFFFFF;
    width: 43px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    margin-left: 5px;
    margin-bottom: 3px;
}
.requiredMessageAnother::after {
    font-weight:400;
    content: "任意";
    background-color: #6C6B69;
    font-size: 14px;
    color: #FFFFFF;
    width: 43px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    margin-left: 5px;
    margin-bottom: 3px;
}

.requiredRadio {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width:780px;
  }

  .radio-group input{
    transform: scale(0.5);
    margin-bottom: 5px;
    width:5%;
  }
  
  .radio-group label {
    margin-right: 5px;
    flex-grow:1;
  }
  
  .full-width {
    width: 100%;
  }

.privacy__check{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 72px;
    padding-left: 6%;
    width: 780px;
    flex-direction: row;
}
.privacy__check input[type="checkbox"] {
    margin-right: 3%;
    margin-bottom: 1%;
    transform: scale(2);
}
.privacy__check label::after {
    content: '';
    background-color:#F6F6F6;
}

/* Your additional CSS code goes here */
.main__image{
    position:relative;
}
.contact__button1 img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width:41.5%;
    top:42%;
    bottom: 20%;
    z-index: 100;
}
.contact__button2 img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width:41.5%;
    top:39%;
    bottom: 20%;
    z-index: 100;
}
.contact__button3 img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42.5%;
    z-index: 100;
}
footer {
    display:flex;
    background-color:#37404F;
    color:#FFF;
    /* 上下左右で中央に揃える */
    justify-content: center;
    align-items: center;
    /* height:53px; */
    font-size:14px;
    padding-top:20px;
    padding-bottom:150px;
}
footer a {
    color:#FF9934;
    text-align: center;
    height:35px;
    font-size:14px;
    /* padding-right:30px; */
    text-decoration: none;
    border-bottom:solid 1px;
}
#image25_sp,#image26_sp {
    display: none;
}
.company {
    padding-right:30px;
}

/*mapエリア*/
.map {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 64px;
}
.googleMap p{
    padding-bottom: 14px;
    font-size:14px;
    text-align: center;
    letter-spacing: 3px;
}
.googleMap iframe{
    width:700px;
    height:400px;
}
.callPhone {
    display:none;
}

/*2024年8月追加　フローティングボタン*/
.floating_button {
    position: fixed;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%) translateY(20px); /* 初期位置を少し下に */
    z-index: 200;
    visibility: hidden; /* 初期状態で非表示 */
    opacity: 0; /* 初期状態で透明 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* トランジションの設定 */
}

.floating_button img{
    width:41vw;
    margin:0 auto;
}

.floating_button.show {
    visibility: visible; /* 表示時に可視化 */
    opacity: 1; /* 表示時に不透明に */
    transform: translateX(50%) translateY(0); /* 元の位置に戻す */
}



/* Responsive Styling */
@media (max-width: 767px) {
    .main{
        display:none;
    }
    .main__sp{
        display:block;
    }
    .container{
        width:100%;
    }
    #submit__button {
        /* margin: 0 auto 8rem; */
        height:4.5rem;
        width:33vw;
        letter-spacing:1vw;
    }
    .contact form{
        margin:0 auto;
        width:90%;
    }
    .contact__title {
        margin : 2rem 2rem 2rem;
        font-size: 8.5vw;
        letter-spacing: 0.8vw;
    }
    .contact__form{
        width:100%;
    }
    .contact__form input,
    .contact__form label,
    .contact__form textarea,
    .contact__form select,
    .privacy__check,
    .contact__privacy {
        width: 100%;
    }
    #contact__form__aria
    {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding-top:1%;
    }
    .contact__form textarea,
    .contact__form select,
    .contact__privacy ,
    .contact__form input{
        width:90%;
    }
    .contact__privacy{
        margin-bottom:5vw;
    }
    .contact__privacy h3{
        font-size:4.5vw;
    }
    .contact label {
        font-size: 3vw;
        margin-left:1rem;
    }
    .contact label::after {
        font-size: 3vw;
        width: 10vw;
        height: 5.7vw;
        line-height: 6vw;
        margin-left: 2vw;
    }
    .privacy__title {
        font-size: 5vw;
        margin: 2rem auto;
    }
    .contact__privacy__box p{
        font-size:3.7vw;
    }
    .privacy__check {
        width: 100%;
        margin-bottom: 5vw;
    }
    .privacy__check label:after{
        width:0px;
    }
    .privacy__check input[type="checkbox"] {
        margin-right: 1.5%;
        margin-bottom: 1%;
        transform: scale(1.8);
    }
    .contact__button1 img {
        width: 90%;
        top:50%;
    }
    .contact__button2 img {
        width: 90%;
        top:50%;
    }
    .contact__button3 img {
        width: 90%;
    }

    footer {
        height: 67px;
        font-size: 12px;
        flex-direction: column;
        padding-bottom:120px;
    }
    footer a {
        height: 67px;
        font-size: 12px;
        padding-right: 0px;
    }
    .company {
        height:8rem;
        background-color: #384150;
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        padding-top:1rem;
        padding-right:0px;
    }
    .company p a{
        color:#F49835;
        font-size:5vw;
    }
    .copyright{
        height:5rem;
        background-color: #384150;
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center; 
        padding-top:0.5rem;
        padding-bottom:1.5rem;
    }
    .copyright p{
        font-size:3vw;
    }
    #image25_sp,#image26_sp {
        display: block;
    }
    .phone{
        width:100%;
        position: relative;
    }
    .googleMap{
        width:100%;
    }
    .googleMap iframe{
        width:100%;
        height:300px;
    }
    .callPhone {
        position: absolute;
        top: 36.5%;
        left: 24%;
        width: 51%;
        height: 100%;
        display:block;
    }
    /*2024年8月追加　フローティングボタン*/
    .floating_button{
        width:100%;
    }
    .floating_button img{
        width:90%;
    }

    /*2024年8月追加　ラジオボタン*/
    .requiredRadio input {
        font-size:3vw;        
    }
    .requiredRadio {
        display:flex;
        flex-direction: column;
        align-items: center;
    }
    
    .radio-group {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        width:90%;
      }
    
      .radio-group input{
        transform: scale(1);
        margin-bottom: 5px;
        width:5%;
        height:5%;
        /* margin-left:1rem; */
        inline-size:5vw;
        block-size: 5vw;
      }
      
      .radio-group label {
        margin-right: 5px;
        margin-left:2vw;
        flex-grow:1;
        font-size:3.5vw;
      }
    
}