@charset "utf-8";

@font-face {font-family: 'cafeta';
src:  url('cafeta/cafeta.ttf.woff') format('woff'),
url('cafeta/cafeta.ttf.svg#cafeta') format('svg'),
url('cafeta/cafeta.ttf.eot'),
url('cafeta/cafeta.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}

/*--------------------other contents--------------------*/

section#contents{
margin: 0px auto;
padding: 40px 40px 40px 100px;
}

article.contents{
width: 100%;
margin-bottom: 50px;
}

h3.contents{
font-size:14px;
font-weight: 600;
margin-bottom: 40px;
}

h5.contents{
font-size: 16px;
line-height: 2.0;
/*padding-left: 24px;*/
/*text-indent: -24px;*/
}

h4.contents,a.contents{
font-size: 13px;
font-weight: 400;
line-height: 2.0
}

article.contents_inner{
width: 800px;
margin-left: 12px;
}

div.contents_inner{
border:solid 1px #dcdcdc;
padding: 20px
}

h3.contents_inner{
font-size:15px;
line-height: 1.8;
padding-left: 24px;
text-indent: -24px;
}

a.contents_inner{
color: #ff6e9b;
text-decoration: underline;
font-weight: 600
}

h6.contents{
font-size: 14px;
line-height: 2.0;
color: #ff6e9b;
margin: 10px 0px 15px 0px
}

a.contents{
display: block;
font-size: 13px;
text-decoration: underline;
margin-bottom: 10px
}

a.contents:before{
content: "●";
display: inline-block;
vertical-align: middle;
margin-right: 5px;
color: #999
}

h2.section{
font-family: 'cafeta';
font-size:28px;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 40px;
font-weight: 400
}

span.h2{
color: #ff6e9b
}

i.h2{
display: block;
font-size: 12px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,osaka,ＭＳ Ｐゴシック,MS PGothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,sans-serif;
line-height: 1.6;
margin-top: 10px;
letter-spacing: 0em;
}

div.contents_back{
margin:20px auto 0px auto;
display: flex;
align-items: center;
width: 530px
}

a.contents_back{
width: 260px;
padding: 15px 0px
}

/*--------------------contact--------------------*/

p.message{
font-size:15px;
color:#ff0000
}

ul.contact{
width: 1000px;
margin: 0px auto 0px auto;
font-size:14px;
}

ul.contact:last-of-type{
margin-bottom: 40px;
}

li.contact_left{
width: 260px;
font-weight: bold;
background: #efefef;
border-bottom: solid 1px #fff;
padding: 15px 0px 15px 20px;
vertical-align: middle
}

li.contact_right{
border-bottom: solid 1px #efefef;
padding: 15px 0px 15px 20px;
vertical-align: middle
}

span.contact_left{
font-size:14px;
color:#f857a6;
margin-left: 10px;
}

span.contact_left:before{
content:"※";
}

select {
padding: 12px 30px 12px 8px;
color: #666666;
border: solid 1px #dcdcdc;
}

input[type="text"],input[type="tel"],input[type="email"],input[type="password"]{
width: 100%;
height: 45px;
border:none;
border-radius: 0;
outline: none;
background: none;
font-size:15px;
padding-left: 10px;
}

textarea{
width: 100%;
height: 200px;
font-size:14px;
border:solid 1px #dcdcdc;
line-height: 1.8;
font-weight: normal;
padding: 10px;
}

::placeholder {
color: #999;
font-weight: normal
}

div.check{
width: 300px;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

a.checkbox{
text-decoration: underline
}

div.submit_area{
width: 560px;
margin: 0px auto;
display: flex;
justify-content: center;
}

input[type="submit"]{
width: 240px;
height: 50px;
-webkit-appearance: none;
border:none;
margin: 0px auto;
text-align: center;
font-size:14px;
line-height: 45px;
background: #ff6e9b;
display: block;
font-weight: bold;
color:#fff;
border-radius: 6px;
position: relative;
}

input[type="submit"]:hover,input[type="button"]:hover{
cursor: pointer;
opacity: 0.8
}

input[type="button"]{
width: 240px;
height: 50px;
-webkit-appearance: none;
border:none;
margin: 0px auto;
text-align: center;
font-size:14px;
line-height: 45px;
background:  linear-gradient(to right, #ff5858 0%, #ff5858  30%, #f857a6  100%);
display: block;
font-weight: bold;
color:#fff;
border-radius: 6px;
position: relative;
}

h4.message{
width: 900px;
font-size:16px;
margin:0px auto 40px auto;
line-height: 1.8
}

/*--------------------mail--------------------*/

h4.error{
font-size:16px;
text-align: left;
font-weight: bold;
margin-bottom: 40px;
}

table.formTable{
width: 1000px;
margin: 0px auto 40px auto;
font-size: 14px;
text-align: left;
}

table.formTable tr{
border:none
}

table.formTable th{
width: 260px;
font-weight: bold;
background: #efefef;
border-bottom: solid 1px #fff;
padding: 15px 0px 15px 20px;
}

table.formTable td{
border-bottom: solid 1px #efefef;
padding: 15px 0px 15px 20px;
}

div.error_messe{
width: 1000px;
margin: 0px auto 40px auto;
}

p.error_messe{
color: #f857a6;
font-size:15px;
border-bottom: solid 1px #dcdcdc;
padding: 18px 0px 18px 0px;
}

h3.thanks{
width: 1000px;
margin: 0px auto;
font-size:16px;
line-height: 1.8;
}
div.error_title{
    border: solid 1px red;
    border-radius: 10px;
    text-align: center;
    width: 50%;
    padding: 1em;
    margin: auto;
    margin-bottom: 1em;
}

/*--------------------user_form--------------------*/

div.form_container_mobile{
display: none;
}

div.form_container{
width: 600px;
margin: 10px auto;
}

article.form_container{
text-align: center;
border:solid 1px #ccc;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top:none;
margin-bottom: 20px
}

div.form_container_login{
padding: 20px 0px 20px 0px;
}

p.form_container_login{
font-size:12px;
text-align: center
}

span.form_container_login{
display: inline-block;
margin-left: 5px;
color:#ff6e9b;
text-decoration: underline
}

span.form_container_login:hover{
cursor: pointer
}

div.form_container_login_form{
margin: 15px 0 25px;
padding: 15px 15px 20px;
border: 1px #ddd solid;
border-radius: 6px;
display: none;
}

ul.form_container_login_form{
margin-bottom: 20px;
}

li.form_container_login_form_title{
padding: 10px;
width: 120px;
font-weight: 700;
text-align: right;
color: #444;
font-size:12px;
}

li.form_container_login_form{
padding-left: 10px
}

div.form_container_login_confirmation{
text-align: center;
font-size:12px;
margin-top: 15px;
font-weight: 400;
line-height: 1.6
}

a.form_container_login_confirmation{
color:#ff6e9b;
display: inline-block;
margin: 0px 5px 0px 5px;
text-decoration: underline
}

a.password{
margin-top: 20px;
display: block;
text-decoration: underline;
color:#ff6e9b;
}

h3.form_container{
font-size:13px;
padding: 15px 0px 15px 0px;
}

span.form_container{
display: inline-block;
font-weight: 400;
margin-left: 10px
}

ul.form_container_pc{
margin-bottom: 10px;
}

ul.form_container_pc:last-of-type{
margin-bottom: 20px;
}

li.form_container_pc_title{
padding: 16px 10px 16px 10px;
width: 180px;
font-size: 16px;
font-weight: 700;
text-align: right;
background: #f7f4f0;
}

li.form_container_pc{
padding-left: 15px
}

span.form_container_pc_title{
display: inline-block;
font-size:11px;
color:#ff6e9b;
margin-left: 5px
}

label.form_container_pc{
width: 100%;
height: 45px;
font-size: 14px;
display: block;
background: #f9f9f9;
border-radius: 6px;
border-radius: 6px
}

label.form_container_pc_select{
width: 100%;
height: 45px;
font-size: 14px;
display: block;
background:#f9f9f9 url(../img/icon/select.svg) no-repeat;
background-position: right 8px center;
background-size: 10px auto;
border-radius: 6px;
}

label.form_container_pc input,label.form_container_pc_select select{
border-radius: 6px;
background: none;
color:#999;
font-weight: 400
}

label.birth{
width: 32%;
display: inline-block;
background: #fff
}

footer.form_container_pc{
width: 100%;
padding-top: 40px;
text-align: center;
border-top:dotted 1px #999;
font-size:11px;
margin-top: 40px
}

/*--------------------confirmation--------------------*/


div.confirmation_container{
width: 700px;
margin: 0px auto;
height: 100%;
min-height: 100vh;
background: #eeeeed;
padding: 30px 5% 10px 5%
}


h2.confirmation{
text-align: center;
font-size:15px;
color:#666;
margin-bottom: 20px
}

div.confirmation{
pointer-events: none;
margin-bottom: 20px
}

p.confirmation{
margin-bottom: 5px;
text-indent: 10px
}

span.confirmation{
display: inline-block;
background: #ff6e9b;
margin-left: 5px;
text-align: center;
text-indent: 0px;
color:#fff;
padding: 2px 10px 2px 10px;
font-size:11px;
border-radius: 3px;
}

label.confirmation{
display: block;
height: 50px;
color: #444;
font-size: 16px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 15px
}

div.confirmation_submit{
display: flex;
justify-content: space-between;
align-items: center
}

a.confirmation_submit{
width: 48%;
margin-left: 10px;
font-size: 14px;
display: block;
height: 50px;
background: #fff url(../img/icon/arrow_pnk.png) no-repeat center right 20px;
background-size: 14px;
color: #ff6e9b;
line-height: 50px;
text-align: center;
border-radius: 25px;
}


.confirmation-contents{
    text-align: center;
}

.confirmation-contents h2{
    text-align: center;
    margin-top: 20px;
}

.confirmation-text {
    color: #666;
    padding-top: 10px;
    font-size: 17px;
}

.send_button {
    margin-top: 10px;
    color: #fff;
    background: linear-gradient(to bottom, #66cf5a 0, #48ae3a 100%);
    padding: 10px 80px;
    font-weight: 700;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    border: 1px solid #4ba82f;
    position: relative;
    cursor: pointer;
    font-size: 16px;
}

.confirmation-rule {
    margin-top: 10px;
    font-size: 12px;
}

/*-------------------- 利用規約/プライバシーポリシー等 --------------------*/

div.contents{
    padding-left: 0;
    text-indent: 0;
}
section#contents{
    padding: 40px 40px 40px 100px;
    width: 100%;
    max-width: 1000px;
}
article.contents{
    margin-left: 0;
    width: 100%;
}
h5.contents{
    padding-left: 0;
    text-indent: 0;
}