@charset "UTF-8";
/* upperArea */

    .contactInfo {
        border:solid 4px #eee;
        padding:20px;
        text-align: center;
    }
    #contactForm .contactInfo h3{
        font-size:18pt;
        color:#f68949;
        text-indent: 0;
        background: blue;
    }
    .contactInfo a{
        display: block;
        margin: 0 auto;
        padding:10px;
        vertical-align: center;
        font-size:28pt;
        color:#65a427;
        cursor: default;
    }
    .contactInfo a:hover{
        text-decoration:none;
    }
    .contactInfo a img{
        vertical-align: middle;
        width:32px;
        height:32px;
        position: relative;
        top:-5px;
    }

    .contactInfo p{
        color:#333;
        font-size:10pt !important;
    }

    input[type=submit].btn {
        font-family: 'Roboto', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
        background: #45b1e3;
        border-radius: 2px;
        font-size: 14px;
        font-weight: bold;
        line-height: 33px;
        height: 33px;
        width: 280px;
        display: block;
        color: #FFF;
        margin: 40px auto 0;
        text-align: center;
        transition: opacity 0.3s;
        position: relative;
    }

    @media screen and (min-width:641px) {
        input[type=submit]:hover {
            opacity: 0.7;
        }
    }

    dl, dt, dd, ul, ol, li, pre, form, fieldset, label, input, textarea, p, blockquote, th, td {
        font-size: 14px;
        font-size: 1.4rem;
    }


    /* h2 span{
        background-image:url("../images/mount.png");
        background-position:center center;
        width:29px;
        height:19px;
        display:inline-block;
        vertical-align: middle;
        margin:0 5px 0 0;
    } */

    .spanBlue {
        color:#204d8e;
        font-weight: bold;
    }

/********* bottomArea **********/    
/********* wrapper **********/

#wrapper{
    position:relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#inner {
  width: 100%;
  margin:160px auto 55px auto;
}

#contactForm {
  padding: 50px 0;
}

/* .upperArea {
    margin-bottom: px;
} */

.bottomArea {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  /*align-items: stretch; /* stretch로 높이 맞추기 */
  gap: 20px;
  /* height: 1150px; /* 임시 고정 높이 */
}

.companyInfo {
  min-width: 300px;
  display: flex;
  margin-top:0;
  flex-direction: column;
  align-self: flex-start;
  gap: 20px;
  justify-content: flex-start;
  height: 100%; /* 부모 높이 100% */
}

.inquiryContents {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  height: 100%; /* 부모 높이 100% */
}

.companyInfo {
    flex: 1.3;
    padding: 1px;
}

.inquiryContents {
    flex: 1;
    background-color: #f9f9f9;
}

.introduction,
.strengths,
.jissekis {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
  padding: 10px;
  border-radius: 8px;
}

.companyInfo h1 {
    font-size: 28px;  
}

#contactForm .companyInfo h2 {
    font-size: 20px;
    padding: 2px;
    text-align: left;
    line-height: 1.4;
    border-bottom:1px solid #e6e7e7;
    height: auto;
}

.companyInfo p {
    font-size: 16px;
}

.bottomArea img {
    width: 100%;
    max-width: 100%;
} 

.stylehead {
    background-color: #45b1e3;
    height: 5px;
}
    /********* contact *********/
    #contactForm h2{
        text-align:center;
        border-bottom:1px solid #e6e7e7;
        height:55px;
        line-height:55px;
        font-size:28px; font-size: 2.8rem;
        padding: 0;
    }

    #contactForm h3{
        background-color:beige;
        height:30px;
        line-height:30px;
        font-weight: bold;
        font-size: 17px;
        text-align: center;
    }

    #contactForm > p{
        text-align:center;
        margin:25px 0;
    }

    #contactForm .attention{
        width:100%;
        border-top:1px solid #e6e7e7;
    }

    #contactForm .attention h4{
        text-indent:130px;
        font-weight:normal;
    }

    #contactForm .privacy p,
    #contactForm .attention dl,
    #contactForm .privacy dl{
        margin:20px 0 0 0;
        line-height:180%;
        font-size:12px; font-size:1.2rem;
    }

    #contactForm .attention dd,
    #contactForm .privacy dd{
        margin:0 0 5px 0;
    }

    #contactForm .privacy > div,
    #contactForm .inquiry > div{
        width:100%;
        padding: 4% 5%;
    }

    #contactForm .attention > div {
        margin: 0;
        padding: 3% 5%;
    }

    #contactForm .attention .button,
    #contactForm .privacy .button{
        text-align:center;
    }

    #contactForm .attention .button label,
    #contactForm .privacy .button label{
        display:block;
        margin:20px 0 10px 0;
    }

    #contactForm .attention .button input[type=image],
    #contactForm .privacy .button input[type=image]{
        margin:0 0 20px 0;
    }

    #contactForm .preview{
        text-align:center;
        padding:20px 0;
    }

    #contactForm .preview form{
        display:inline-block;
    }

/********* form *********/
/*
　index.tplのinquriy中、tableがある
　prev.tplのprev_tableBox中、tableがある
両方制御することは、ただtableに
1つのみを制御することは、tableの名前まで
*/

    #contactForm p.error{
        line-height:160%;
        color:#ff0000;
        margin:0 0 20px 0;
    }

    #contactForm .inquiry table{
        width:100%;
        margin:20px 0 0;
    }

    #contactForm .inquiry table th{
        padding:0 0 10px 0;
        font-weight: bold;
    }

    #contactForm .inquiry table th.strong{
        font-weight:bold;
        white-space: nowrap;
    }

    #contactForm .inquiry table td{
        padding:0 0 30px 0;
    }

        /**** prev.tpl の属性 ****/
            .contents {
                width:70%;
                text-align: center;
            }

            #contactForm .prev_tableBox {
                text-align: center;
                align-content: center;
            }

            #contactForm .prev_tableBox table{
                width:100%;
                padding: 0 10%;
                margin:20px 10% 10px;
            }

            #contactForm .prev_tableBox table th{
                padding:10px 0 10px 0;
                font-weight: bold;
            }

            #contactForm .prev_tableBox table th.strong{
                font-weight:bold;
                white-space: nowrap;
            }

            #contactForm .prev_tableBox table td{
                padding:0 0 30px 0;
            }


    /**** index.tpl のInput属性 ****/
    #contactForm .inquiry table input[type=text],
    #contactForm .inquiry table textarea{
        width:100%;
        padding: 6px 5px;
        margin-bottom: 10px;
        font-size: 12px;

        /* Styles */
        border:1px solid #cdcdcd;
        box-sizing:  border-box;
        background: #fff; /* Fallback */
        box-shadow: 0 1px 0 0 #eee inset;
        border-radius: 5px;

        /* Font styles */
        font-family: 'Meiryo', 'Ubuntu', 'Lato', sans-serif;
        color: #000;
    }

    #contactForm .inquiry table textarea{
        height:150px;
    }

    #contactForm .inquiry table input[type=text]:focus,
    #contactForm .inquiry table input[type=zip]:focus,
    #contactForm .inquiry table textarea:focus{
        box-shadow: inset 0 0 1px #000;
        background: #fff;
        border-color: #51cbee;
        outline: none; /* Remove Chrome outline */
    }

    #contactForm table th span{
        color:white;
        background-color: red;
        text-align: center;
        font-weight:500erm;
        font-size: 11px;
        margin-left: 5px;
        padding: 1px 10px;
        border-radius: 5px;
    }

    #contactForm label{
        vertical-align:middle;
        margin:0 15px 0 0;
    }

    #contactForm input[type=radio],
    #contactForm input[type=checkbox]{
        width:16px;
        height:16px;
    }

    input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
    }
    #contactForm input[type=submit] {
        border-style: none;
        margin: 0 auto 40px;
        height: 44px;
        line-height: 100%;
    }
    #contactForm input[type=submit].back {
        background: #65a427 url(/images/common/arrow_03.png) left 20px center no-repeat;
    }
    #contactForm input[type=submit].send {
        background: #45b1e3 url(/images/common/contact_icon_mail.png) right 20px center/18px auto no-repeat;
    }

    #contact {
        display: none;
    }

    .caption:empty {
        display: none;
    }


@media screen and (max-width: 640px) {
    .contents {
        width:100%;
        text-align: center;
        padding: 0 10px;
    }


    #contactForm .contactInfo {
        padding: 8px;
    }

    .companyInfo h1 {
        font-size: 20px;
        margin: 2px;    
    }

    .companyInfo h2 {
        padding: 2px;
        margin: 0px;
        font-size: 16px;
        font-weight: normal;
        align-items: left;
    }

    #contactForm .contactInfo h3 {
        font-size: 14pt;
    }
    .contactInfo a {
        font-size: 18pt;
        padding: 3px;
    }
    .contactInfo a img {
        width: 26px;
        height: 26px;
        top: 0;
    }
    #wrapper #inner {
        width: auto;
        margin: 30px auto 55px auto;
        padding: 0 2vw;
    }
    #wrapper.complete #inner {
        margin-bottom: 40px;
    }
    #contactForm h3,
    #contactForm .attention h4 {
        text-indent: 0;
        text-align: center;
    }

    #contactForm .privacy > div,
    #contactForm .attention > div,
    #contactForm .inquiry > div {
        width: auto;
        margin: 0 auto;
        padding: 0 5%; /* ← 좌우 여백 추가 */
        box-sizing: border-box;
    }

    /* bottomArea 좌우 → 세로 */
    /* .upperArea {
        margin-bottom: 5px;
    } */
    
    .bottomArea {
        flex-direction: column;
        gap: 30px;
        height: auto;
    }

    .companyInfo,
    .inquiryContents {
        width: 100%;
        min-width: auto;
        flex: none;
        height: auto;
    }

    #contactForm .inquiry table {
        width: 100%;
        table-layout: auto;
        word-break: break-word;
    }

    #contactForm .inquiry table th {
        display: block;
        line-height: 180%;
        white-space: normal;
    }

    #contactForm .inquiry table td {
        display: block;
    }

    #contactForm .inquiry table input[type="text"],
    #contactForm .inquiry table textarea {
        width: 100%;
        font-size: 14px;
        padding: 8px;
        margin: 0 0 10px 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    #contactForm label {
        display: block;
    }

    #contactForm .attention dd,
    #contactForm .privacy p,
    #contactForm .privacy dt,
    #contactForm .privacy dd {
        font-size: 11px;
        line-height: 160%;
    }

    #contactForm .attention dt {
        text-align: center !important;
        margin: 0 auto;
    }

    #contactForm .preview form {
        display: block;
    }

    #contactForm input[type=submit] {
        margin: 0 auto 20px;
    }
}