@charset "utf-8";


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
お問い合わせ
.contact
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


.contact-wrap{padding: 3rem 0;}
.contact-wrap p{margin-bottom: .5rem; text-align: center;}

.contact-method-list{display: flex;justify-content: space-between;margin: 3rem 0;}
.contact-method-list li{
    width: 49%;
    text-align: center;
    padding: 3rem;
    border-radius: 0.5rem;
}
.list-tel{background-color: #DFFFF7;}
.list-fax{background-color: #F2F2F2;}


.contact-method-list dd{font-size: 3rem; font-weight: 600;}
.contact-method-list dt{font-size: 1.8rem; font-weight: 500;margin-bottom: 1rem;}


.contact-method-list-telBtn{
    display: flex;
    align-items: center;
    background-color: #12A581;
    border-radius: 0.3rem;
    color: #FFF;
    justify-content: center;
    padding: 1rem 0;
    box-sizing: border-box;
}

.contact-method-list-fax{
    display: block;
    padding: .9rem 0;
    border-radius: 0.3rem;
    box-sizing: border-box;
    background-color: #FFF;
    color: #12A581;
}

.contact-Reception-time{font-weight: 400; font-size: 1.3rem; display: block;margin-top: 1rem;}
.contact-method-list-telBtn img{width: 2.5rem;}

.contact-form-text{
    text-align: center;
    margin-bottom: 2rem;
}


@media screen and (min-width: 769px) {
/*PC版 電話ボタン無効設定*/
.contact-method-list-telBtn{pointer-events: none; cursor: default;}
}

@media screen and (max-width: 768px) {
.contact-wrap p{text-align: left;}
.contact-method-list{flex-direction: column;}
.contact-method-list li{width: 100%;padding: 2rem 1.5rem;}
.contact-method-list dd{font-size: 2rem;}
.contact-method-list dt{font-size: 1.4rem;}
.contact-method-list-telBtn img{width: 1.8rem;}
.list-tel{margin-bottom: 2rem;}
.contact-Reception-time{font-size: 1rem;}
}





/*フォームCSSリセット*/
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  appearance: none
}

textarea {resize: vertical;}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
  appearance: none
}

select::-ms-expand {
  display: none;
}

/*---テキストパーツCSS---------------*/

.contact-text{}

@media only screen and  (max-width: 834px) {
.contact-text{  margin-top:1rem;}
}

.contact-text a, .cp_ipcheck a{
    color: #084e8f;
    text-decoration: underline;
}


/*---フォームCSS---------------*/

input, select, option{
  background:#f5f5f5;
  border: 1px solid #CCC;
  box-sizing: border-box;
}

.form-table{

}

.form-table dl{
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0.9rem 0;
    border-bottom: 1px dotted #CCC;
}

.form-table dt{
    width: 30%;
    align-items: center;
    display: flex;
}

.form-table dd{
    width: 70%;
    box-sizing: border-box;
}

.form-table span{
    padding: 0.1rem 0.5rem;
    background-color: #12A581;
    font-size: 1rem;
    color: #FFF;
    font-weight: bold;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.text-form{
    padding: 0.4rem 1rem 0.4rem 0.6rem; 
    border-radius: 3px;
    font-size: 1.1rem;
}

.text-area{
    background:#f5f5f5;
    border: 1px solid #CCC;
    border-radius: 3px;
    height:100px;
}

.text-area:focus,.text-form:focus{
  border: 1px solid #88c0ce;
  background-color: #f3fcff;
}


.txt-w100{width: 100%;}
.txt-w80{width: 80%;}
.txt-w50{width: 50%;}


@media only screen and  (max-width: 834px) {

.form-table dl{
    flex-wrap: wrap;
    padding: 1.2rem 0;
}

.form-table dt{
    width: 100%;
    margin-bottom: 0.5rem;
}

.form-table dd{ width: 100%;}


.txt-w100{width: 100%;}
.txt-w80{width: 100%;}
.txt-w50{width: 100%;}
}

/*---チェックポイント---------------*/

.cp_ipcheck {
    text-align: center;
    padding: 0.9rem 0;
}

@keyframes click-wave {
    0% {
        position: relative;
        width: 30px;
        height: 30px;
        opacity: 0.35;
    }
    100% {
        width: 50px;
        height: 50px;
        margin-top: -15px;
        margin-left: -15px;
        opacity: 0;
    }
}
.cp_ipcheck .option-input02 {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease-out 0s;
    color: #ffffff;
    border: none;
    outline: none;
    background: #CCC;
    -webkit-appearance: none;
            appearance: none;
}
.cp_ipcheck .option-input02:hover {
    background: #5888b0;
}
.cp_ipcheck .option-input02:checked {
    background: #237cc7;
}
.cp_ipcheck .option-input02:checked::before {
    font-size: 20px;
    line-height: 25px;
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 25px;
    content: '✔';
    text-align: center;
}
.cp_ipcheck .option-input02:checked::after {
    position: relative;
    display: block;
    content: '';
    -webkit-animation: click-wave 0.65s;
            animation: click-wave 0.65s;
    background: #237cc7;
}
.cp_ipcheck .option-input02.radio {
    border-radius: 50%;
}
.cp_ipcheck .option-input02.radio::after {
    border-radius: 50%;
}
.cp_ipcheck label {
    line-height: 40px;
    display: block;
}
.cp_ipcheck .option-input02:disabled {
    cursor: not-allowed;
    background: #58b5b8;
}
.cp_ipcheck .option-input02:disabled::before {
    font-size: 20px;
    line-height: 30px;
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    content: '✖︎';
    text-align: center;
}


/*---ボタンデザイン---------------*/

.form-btn-wrap{
    text-align: center;
    padding: 0.9rem 0;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


form input[type="submit"]{
    padding: 0.8rem 3rem;
    color: #FFF;
    background: #12A581;
    border-radius: 5px;
    border: 0;
    font-weight: bold;
    font-size: 1.2rem;
    font-feature-settings: "palt";
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    box-shadow: 0px 4px 0px 0px rgba(213,213,213,0.6);
    transition: all 0.5s ease 0s;
}


form input[type="submit"]:hover{background: #25b2d6;}

.form-btn{
    position: relative;
    display: initial;
}

.form-btn:after{
    content: "";
    border: solid 2px #fff;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: calc(50% - 5.5px);
    right: 20px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
}


form input[type="reset"]{
    padding: 0.3rem 1rem;
    color: #FFF;
    background: #CCC;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    margin-left: 1rem;
    transition: all 0.5s ease 0s;
}

form input[type="reset"]:hover{background: #2bbbb6;}

@media only screen and  (max-width: 834px) {
.form-btn{
    position: relative;
    display: initial;
    margin-bottom: 1rem;
}
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {

}

.attend{margin: 4rem 0 5rem;font-size: 80%;}
.attend p {margin-bottom: 0.5rem;}
@media only screen and  (max-width: 834px) {.attend p {margin-bottom: 1rem;}}