@charset "UTF-8";

/*======================
reset
=======================*/
input,
button,
textarea,
select {
/* デフォルトスタイルをリセット */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* font-familyを継承しないので、継承させる */
font-family: inherit;

/* iOSの角丸をリセット */
border-radius: 0;

/* box-size */
box-sizing: border-box;

/* 文字の大きさ iOSでズームさせないために16px以上を指定 */
font-size: 1.6rem;

/* 文字色を親から継承 */
color: inherit;
}

label {
/* iOSでのlabelとinput,select,textareaの関連付け */
cursor: pointer;
}

/* スピンボタン非表示 chrome,safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
/*-webkit-appearance: none;
margin: 0;*/
display: none;
}

/* スピンボタン非表示(firefox) */
input[type="number"],
input[type="month"],
input[type="datetime-local"],
input[type="week"],
input[type="time"],
input[type="date"] {
-moz-appearance: textfield;
}

/* クリアボタン非表示 */
input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="week"]::-webkit-clear-button {
-webkit-appearance: none;
}

/*------------------------
common
-------------------------*/
.form_box {
font-size: 1.6rem;
font-weight: 300;
max-width: 600px;
width: 96%;
margin-left: auto;
margin-right: auto;
}

.form_lead {
font-size: 1.4rem;
line-height: 1.6em;
margin-top: 20px;
}

/*-------------
見出し
-------------*/
.hero_lead {
margin-top: 20px;
line-height: 1.6em;
}

.form_ttl {
margin-top: 60px;
font-size: 2.0rem;
font-weight: 300;
padding: 12px 0 10px 12px;
border-bottom: solid 1px #DDD;
border-top: solid 1px #DDD;
position: relative;
}

.form_ttl:first-child {
margin-top: 20px;
}

.form_ttl.cnfrm {
margin-top: 20px;
}

.form_ttl:before,
.form_ttl:after {
content: "";
display: block;
border-bottom: solid 1px #e5086b;
width: 12px;
position: absolute;
}

.form_ttl:before {
top: 0; left: 0;
transform: rotate(-45deg);
}

.form_ttl:after {
bottom: 0; right: 0;
transform: rotate(-45deg);
}

.form_ttl.thx {
font-size: 2.0rem;
font-weight: bold;
color: #e5086b;
}

.form_low_ttl {
margin-top: 30px;
height: 30px;
font-size: 1.6rem;
font-weight: 300;
position: relative;
}

.form_low_ttl:before {
content: "";
display: inline-bloxk;
border-bottom: solid 1px #DDD;
width: 100%;
position: absolute;
bottom: 3px; left: 0;
}

.form_low_ttl:after {
height: 20px;
content: "";
display: block;
border-bottom: solid 1px #000;
width: 20px;
position: absolute;
bottom: 0; left: 0;
}

.atte {
font-size: 1.2rem;
margin-top: 6px;
line-height: 1.4em;
}

.atte:before {
content: "※";
}

/*-------------
各項目
-------------*/
.form_box .item {
margin-top: 30px;
padding-top: 8px;
background: #EEE;
}

.form_box .item.demo_music {
padding-top: 0;
margin-top: 10px;
}

.form_box .item.rq .item_label:after {
content: "＊";
color: #e5086b;
}

.item_label {
font-size: 1.2rem;
font-weight: bold;
margin-left: 8px;
}

.item_label.wrap {
margin-top: 20px;
}

.form_box .item.txt_box input[type="text"],
.form_box .item.txt_box input[type="email"] {
width: 100%;
height: 46px;
padding: 0 16px;
background: #EEE;
}

.form_box .name_box {
font-size: 0;
}

.form_box .name_box .item {
display: inline-block;
width: 49%;
margin-top: 10px;
margin-left: 1%;
}

.form_box .name_box .item:first-child {
margin-left: 0;
margin-right: 1%;
}

.form_box .item.select_box {
display: inline-block;
}

.form_box .item.date_box {
width: 110px;
}

.form_box .item.date_box input[type="text"]{
width: 100%;
height: 46px;
padding: 0 16px;
background: #EEE;
}

.form_box .item.age_box {
width: 80px;
}

.form_box .item.age_box input[type="text"]{
width: 100%;
height: 46px;
padding: 0 16px;
background: #EEE;
}

.form_box .txtarea_box textarea {
display: block;
width: 100%;
padding: 10px;
}

.member_num {
width: 80px;
}

.btn_wrap {
display: block;
margin-top: 20px;
}

.btn_wrap .btn_add,
.btn_wrap .btn_cls {
display: inline-block;
font-size: 1.2rem;
padding: 10px;
border: solid 1px #BBB;
background: #DDD;
cursor: pointer;
}

.btn_wrap .btn_cls {
display: none;
}

/*------------------------
 input common
-------------------------*/
/* input */
input {
/* inputの枠線を消す */
border: 1px solid transparent;
transition: border 0.2s ease-out;
/* 文字色を親から継承 */
color: inherit;
/*inputのフォーカス時の枠線を消す*/
outline: 0;
}

/* inputにフォーカスが当たっている時 */
input:focus {
border-bottom: 1px solid #e5086b;
}


/*------------------------
プレースホルダーの色
-------------------------*/
/* placeholderの文字色指定 */
input::placeholder,
textarea::placeholder {
color: #7f8c8d;
font-weight: 300;
}

/* IE (疑似クラスで指定) */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #7f8c8d;

}

/* Edge (疑似要素で指定)*/
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #7f8c8d;
}

/*------------------------
chrome用
-------------------------*/
/* auto complete(chrome) */
input:-webkit-autofill {
/* 背景色(background-colorではなくbox-shadow) */
-webkit-box-shadow: 0 0 0 1000px #eee inset;

/* 文字色(colorではなく-webkit-text-fill-color) */
-webkit-text-fill-color: #333 !important;
}


/*------------------------
セレクトボックス
-------------------------*/
select {
display: block;
font-weight: 300;
padding: 14px 44px 14px 20px;
/* 右端の▼を消す */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
/* 代わりに任意の画像を指定 */
background: #eee url(../img/img_icon_down.png) no-repeat center right 10px/14px 14px;
background-size: 20px;
}

select option {
width: 100px;
}

/* 右端の▼を消す(IE) */
select::-ms-expand {
display: none;
}

select:focus {
background: #eee url(../img/img_icon_down.png) no-repeat center right 10px/14px 14px;
background-size: 20px;
border-bottom: 1px solid #e5086b;
outline: none;
}

/*------------------------
テキストエリア
-------------------------*/
textarea {
padding: 10px;
border-radius: 0;
resize: none;
border: 1px solid transparent;
transition: border 0.2s ease-out;
outline: none;
background-color: #eee;
}

textarea::-webkit-scrollbar {
width: 10px;
}

textarea::-webkit-scrollbar-track {
background-color: #eee;
}

textarea::-webkit-scrollbar-thumb {
background-color: #ccc;
}

textarea:focus {
border-bottom: 1px solid #e5086b;
box-shadow: none;
outline: none;
}

/*------------------------
ボタン
-------------------------*/
form button {
background: #e5086b;
border: none;
border-bottom: 2px solid #750135;
color: #FFF;
display: table;
font-weight: bold;
line-height: 1;
margin: 30px auto 0;
outline: none;
padding: 20px 40px;
transition: background-color 0.2s ease-out, transform 0.2s ease-out, border-bottom 0.2s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

form button:hover,
form button:focus {
background: #ed3f8d;
}

form button:active {
background: #ed3f8d;
border-bottom: 2px solid transparent;
transform: translateY(2px);
}

input[type="button"] {
font-size: 1.4rem;
background: #DDD;
border: none;
border-bottom: 2px solid #AAA;
color: #888;
display: table;
line-height: 1;
margin: 20px auto 0;
outline: none;
padding: 10px 20px;
transition: background-color 0.2s ease-out, transform 0.2s ease-out, border-bottom 0.2s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type="button"]:hover,
input[type="button"]:focus {
background: #EEE;
}

input[type="button"]:active {
background: #EEE;
border-bottom: 2px solid transparent;
transform: translateY(2px);
}

/*------------------------
ファイル選択
-------------------------*/
input[type="file"] {
opacity: 0;
width: 0;
position: absolute;
top: 8px; left: 8px;
}

.files_box .inner {
background: #EEE;
padding: 8px;
position: relative;
}

.files_box label {
width: 130px;
text-align: center;
font-size: 1.4rem;
line-height: 1.6em;
padding: 9px;
background: #BBB;
color: #FFF;
border: solid 1px #999;
border-radius: 2px;
float: left;
}

.filename {
padding: 10px;
font-size: 1.4rem;
line-height: 1.6em;
width: calc( 100% - 140px);
background: #EEE;
display: inline-block;
float: right;
}

/*------------------------
チェックボックス
-------------------------*/
.checkbox {
margin-top: 30px;
position: relative;
}

.checkbox-input{
opacity: 0;
position: absolute;
}

.checkbox-parts{
display: block;
font-size: 1.4rem;
position:relative;
padding-left: 24px;
}

.checkbox-parts::before{
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
}

.checkbox-input:checked + .checkbox-parts{
color: #d01137;
}

.checkbox-input:checked + .checkbox-parts::after{
content: "";
display: block;
position: absolute;
top: -4px;
left: 3px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #d01137;
border-right: 3px solid #d01137;
}


/*------------------------
同意事項
-------------------------*/
.form_notice_box {
border: solid 1px #CCC;
padding: 20px;
width: 96%;
height: 130px;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}

.notice_ttl {
font-size: 1.3rem;
}

.notice_list {
margin-top: 20px;
}

.list_item {
font-size: 1.2rem;
line-height: 1.4em;
margin-top: 8px;
padding-left: 1em;
text-indent: -1em;
}

.list_item:first-child {
margin-top: 0;
}

.list_item:before {
content: "・";
}

.list_item > ul >li,
.list_item > ul >li:first-child {
font-size: 1.2rem;
line-height: 1.4em;
margin-top: 4px;
padding-left: 1em;
text-indent: -1em;
}

.list_item > ul >li:before {
content: "- ";
}

/*------------------------
メンバープロフィール
-------------------------*/
.member_prof_box .member_prof {
width: 100%;
}
.member_prof_box .member_prof .form_low_ttl {
position: relative;
z-index: +1;
cursor: pointer;
transition-duration: 0.2s;
}
.member_prof_box .member_prof .form_low_ttl:hover {
opacity: .6;
}
.member_prof_box .member_prof .form_low_ttl .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%; right: 0;
width: 30px;
height: 30px;
margin-top: -20px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.member_prof_box .member_prof .form_low_ttl.stay .i_box {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.member_prof_box .member_prof .form_low_ttl .i_box .i {
display: block;
width: 18px; height: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.member_prof_box .member_prof .form_low_ttl.stay .i_box .i {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.member_prof_box .member_prof .form_low_ttl.stay.open .i_box .i {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.member_prof_box .member_prof .form_low_ttl.open .i_box {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.member_prof_box .member_prof .form_low_ttl.stay.open .i_box {
-webkit-transform: rotate(315eg);
transform: rotate(315deg);
}
.member_prof_box .member_prof .form_low_ttl .i_box .i:before, 
.member_prof_box .member_prof .form_low_ttl .i_box .i:after {
display: flex;
content: '';
background-color: #000;
border-radius: 1px;
width: 18px; height: 2px;
position: absolute;
top: 8px; left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.member_prof_box .member_prof .form_low_ttl .i_box .i:before {
width: 2px; height: 18px;
top: 0; left: 8px;
}
.member_prof_box .member_prof .form_low_ttl.stay .i_box .i:before {
content: none;
}
.member_prof_box .member_prof .form_low_ttl.open .i_box .i:before {
content: none;
}
.member_prof_box .member_prof .form_low_ttl.stay.open .i_box .i:before {
content: "";
}
.member_prof_box .member_prof .form_low_ttl.open .i_box .i:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.member_prof_box .member_prof .form_low_ttl.stay.open .i_box .i:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.member_prof_box .member_prof > .inner {
display: none;
padding: 10px 0 30px 0;
}
.member_prof_box .member_prof > .inner.stay {
display: block;
}

/*------------------------
確認画面
-------------------------*/
.confirm_txt {
padding: 10px 20px;
background-color: #eee;
}

.confirm_txt span {
font-size: 1.2rem;
display: inline-block;
margin-left: 6px;
margin-right: 10px;
}

.form_box .name_box .confirm_txt {
font-size: 1.6rem;
}

.chckd {
margin-top: 30px;
display: block;
font-size: 1.4rem;
line-height: 1.6em;
position:relative;
padding-left: 24px;
}

.chckd::after {
content: "";
display: block;
position: absolute;
top: 0px;
left: 3px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #e5086b;
border-right: 3px solid #e5086b;
}


/*------------------------
サンクス画面
-------------------------*/
.thx_mssg {
padding: 30px 10px; 60px 10px;
min-height: 220px;
}

.thx_mssg p {
line-height: 1.8em;
}

.thx_mssg p.lead {
font-size: 2.0rem;
font-weight: bold;
color: #e5086b;
margin-bottom: 20px;
}

.thx_mssg p.atte::before{
content: "※";
}

.thx_mssg p.atte {
text-indent: -1em;
padding-left: 1em;
}

/*------------------------
エラーメッセージ
-------------------------*/
.error_mssg {
font-size: 1.4rem;
line-height: 1.4em;
margin-top: 4px;
color: #e5086b;
}

/*------------------------
ロード画面
-------------------------*/
.loading{
display:none;
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
background: rgba(0,0,0,.8);
z-index: 9999;
}

.loading_mssg {
font-size: 1.2rem;
color: #000;
background: #FFF;
border: solid #CCC 1px;
position: absolute;
padding: 1em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.loading_mssg > .txt {
-webkit-animation: lodanimetion 1500ms ease-out forwards infinite;
animation: lodanimetion 1500ms ease-out forwards infinite;
}
@keyframes lodanimetion {
  from,to {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
}


#btn_confirm[disabled] {
background-color: #aaa;
border-bottom: 2px solid #666;
cursor: not-allowed;
}

#validate_mssg {
width: 100%;
text-align: center;
margin-top: 1em;
font-size: 1.2rem;
color: #e5086b;
}