@charset "UTF-8";

/*js連動部分！必須設定*/
html {
  scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}    
/* 既存のエラーメッセージのスタイルと区別するため、error-messageにもwarning-messageを適用 */
.error {
  border:1px solid #f00 !important;
  box-shadow: 0 0 5px rgba(255, 40, 100, 0.5);
  margin:5px 0 0;
}
.error-message {
  color: #f00 !important;
  margin:5px 0 0;
}
/* 入力欄自体をオレンジ色の枠にする */
  .warning {
    border: 1px solid #ff9800 !important; /* オレンジ色 */
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}
/* 注意メッセージをオレンジ色の文字にする */
.warning-message {
    color: #ff9800 !important; /* オレンジ色 */
    margin:5px 0 0;
}
/* --- 【修正箇所】 --- */
  .privacy-consent-wrapper.disabled, /* PHPが disabled 属性を付けた場合 */
  .privacy-consent-wrapper.check-disabled { /* JSがクラスを付けた場合 */
    opacity: 0.6;
    cursor: not-allowed;
    /*pointer-events: none;*/ /* 親要素全体でクリック操作を阻止 */
}

/* 送信ボタンが disabled 状態に見えるようにする */
  .submit-disabled {
  pointer-events: auto !important; /* クリックイベントが阻止されないようにする */
  opacity: 0.3;
  background-color: #cde8f9 !important; /* 例 */
  cursor: not-allowed !important;
  }
/* 送信ボタンのdisabled属性は常にfalseだが、CSSで無効に見せる */

/*フォーム部分設定*/
.MainArea {
    width:100%;
    max-width:961px;
    margin:0 auto;
}
h2 {
    text-align:center;
    font-size:3.6rem;
    font-weight:600;
    margin:0 0 80px;
    position:relative;
}
h2::after {
    position:absolute;
    content:"";
    background:#fff8ba;
    width:100%;
    max-width:506px;
    height:32px;
    bottom:-18px;
    left:50%;
    transform:translateX(-50%);
    z-index:-999;
}
#ContactArea {
    width:100%;
    max-width:961px;
    background:#cde8f9;
    border:1px solid #bdbdbd;
    border-radius:10px;
    padding:50px 0 0;
    margin-bottom:250px;
}
.Attention {
    width:100%;
    max-width:961px;
    margin:0 auto;
}
.Attention p {
    line-height:2;
    margin:0 0 55px;
}
.Attention .TelContact {
    width:100%;
    max-width:480px;
    overflow:hidden;
}
.Attention .TelContact p {
    width:180px;
    float:left;
    margin:0;
} 
.Attention p.CustomerCall {
    width:280px;
    height:25px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    background:url("../images/img_CntTelNumber@2x.png") center no-repeat;
    background-size:cover;
    float:right;
    margin:0;
}
.Attention p.Open {
    width:255px;
}
.Attention hr {
    width:100%;
    max-width:961px;
    border-bottom:4px dotted #000;
    margin:0 auto 50px;
}
@media screen and (max-width:480px) {
    .Attention .TelContact p, 
    .Attention .TelContact p.CustomerCall {
        float:none;
        margin:0 0 10px;
    }
}

/*ユーザー入力部分設定*/
fieldset span.Remarks {
    width:55px;
    height:20px;
    background:#fff8ba;
    border-radius:25px;
    font-size:1.5rem;
    text-align:center;
    margin:0 0  0 10px;
    line-height:20px;
    display: inline-block;
}

form {
    width:100%;
    max-width:780px;
    margin:0 auto;
}
fieldset {
    width:100%;
    border:none;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
legend {
  display:none;
}
.Group {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 0 40px;
}
.GroupContact {
    width:100%;
    max-width:500px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.GroupContact p.InputArea {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.GroupContact input {
    width:100%;
    max-width:430px;
    height:40px;
}

/*fieldset p.CheckItem {
    margin:0 0 15px  calc(35vw / 9.6) !important;
}*/
fieldset p.LabelsItem {
    width:100%;
    max-width:280px;
}
fieldset p.InputArea {
    width:100%;
    max-width:500px;
}
fieldset input#name, 
fieldset input#furigana, 
fieldset input#company, 
fieldset input#department, 
fieldset input#officePost, 
fieldset input#tel, 
fieldset input#mobile, 
fieldset input#email, 
fieldset select#learn {
    width:100%;
    max-width:500px;
    height:40px;
}

fieldset textarea {
    width:100%;
    max-width:500px;
    height:150px;
}

p.Text {
    margin:10px auto 50px;
    text-align:center;
}
p.InputArea label {
    margin:0 20px 0 0;
}
p.InputArea label:first-child {
    margin-left:0;
}
input.InputCheck {
    margin-right:10px;
}
p.CheckItem {
    width:100%;
    /*max-width:calc(350vw / 3.75);*/
    margin-bottom:calc(20vw / 9.6);
}

.MainArea hr {
    width:100%;
    max-width:780px;
    border-bottom:4px dotted #000;
    margin:0 auto 50px;
}

p.PrivacyPolicy {
    width:100%;
    max-width:350px;
    margin:0 auto 50px;
}
p.PrivacyPolicy label span.marker {
    /*background:#fff8ba;*/
    background:linear-gradient(transparent 65%, #fff8ba 65%);
}
p.Submit {
    width:290px;
    height:45px;
    /*border:1px solid #9595959;
    border-radius:25px;*/
    margin:50px auto 50px;
}
#submitButton {
    width:290px;
    height:45px;
    background:#cde8f9;
    border:1px solid #959595;
    border-radius: 25px;
    margin-top:200px;
}

/* for Sp*/
@media screen and (min-width:0) and (max-width:960px) {
    .MainArea {
        max-width:960px;
    }
    h2 {
        font-size:2.8rem;
        margin:0 0 50px;
    }
    h2::after {
        max-width:calc(320vw / 3.75);
        height:15px;
        bottom:-14px;
    }
    #ContactArea {
        max-width:960px;
        border-radius:0;
        padding:calc(28vw / 9.6) calc(40vw / 9.6);
        /*margin-bottom:calc(185vw /9.6);*/
        margin:0 0 170px;
    }
    #ContactArea .Attention p:last-child {
        margin:0 0 calc(40vw / 9.6);
    }
    #ContactArea hr {
        max-width:calc(321vw / 3.75);
        margin:0 auto calc(45vw /9.6);
    }
    form {
        max-width:960px;
        position:relative;
    }
    .Group {
        flex-direction: column;
        margin:0 0 calc(30vw / 3.75);
    }
    label br {
        display:none;
    }
    .GroupContact {
        flex-direction: column;
        max-width:calc(320vw / 3.75);
    }
    .GroupContact p.InputArea {
        flex-direction:column;
        align-items: normal;
        margin:0 0 30px;
    }
    .GroupContact input {
        max-width:calc(320vw / 3.75);
    }
    .Add {
        max-width:calc(321vw / 3.75) !important;
    }
    .RightEnd {
        float:none !important;
    }
    fieldset p.LabelsItem {
        max-width:calc(320vw / 3.75);
        margin:0 0 15px;
    }
    input.InputCheck {
        margin-bottom:calc(20vw / 9.6);
    }
    fieldset p.InputArea {
        max-width:calc(320vw / 3.75);
    }
    fieldset input#name, 
    fieldset input#furigana, 
    fieldset input#company, 
    fieldset input#department, 
    fieldset input#officePost, 
    fieldset input#tel, 
    fieldset input#mobile, 
    fieldset input#email, 
    fieldset select#learn, 
    fieldset input#units, 
    fieldset select#desired, 
    fieldset select#intention {
        max-width:calc(320vw / 3.75);
    }
    .LedAdd {
        margin-bottom:15px;
    }
    fieldset textarea {
        max-width:calc(320vw / 3.75);
        height:200px;
    }
    fieldset .ZipCodeArea {
        max-width:calc(320vw / 3.75);
        flex-direction:column;
        align-items:normal;
    }
    fieldset p.PreSuff {
        max-width:calc(320vw / 3.75);
    }
    .PrefCity input#pref {
        max-width:calc(320vw / 3.75);
        align-items:normal;
        margin:0 0 30px;
    }
    .PrefCitys {
        max-width:calc(320vw / 3.75);
        flex-direction: column;
    }
    .PrefCity p.Citys {
        max-width:calc(320vw / 3.75);
        flex-direction: column;
        align-items: normal;
    }
    p.Citys input#city {
        max-width:calc(320vw / 3.75);
    }
    p.InputArea label {
        margin:0;
        display:flex;
    }
    p.AutoInput {
        margin-top:15px;
    }
    .UpLoad {
        max-width:calc(320vw / 3.75);
    }
    p.PrivacyPolicy {
        max-width:calc(256vw / 3.75);
    }
    p.Submit, #submitButton {
        width:260px;
        /*margin-top: 160px;*/
        margin:0 auto;
        position:absolute;
        bottom: -80px;
        left:50%;
        transform: translateX(-50%);
    }
    /*label, input, textarea, select {
        margin-top:15px;
    }*/
    label.city, 
    label.cityAdd, 
    label.buildAdd {
        margin:0 0 15px !important;
    }
    input.files {
        margin-top:0;
    }
}