@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{
width: 94%;
padding: 30px 0px 30px 0px;
margin: 0px auto
}

div.contents{
height: 60vh;
overflow-y: scroll;
border:solid 1px #e8e8e8;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}

article.contents{
margin-bottom: 30px;
}

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

h5.contents{
font-size: 13px;
font-weight: 400;
line-height: 1.6;
padding-left: 15px;
text-indent: -15px;
}

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

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

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

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

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

h6.contents{
font-size: 12px;
line-height: 1.6;
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:22px;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 40px;
font-weight: 400
}

span.h2{
color: #ff6e9b;
font-size:22px;
}

i.h2{
display: block;
font-size: 11px;
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.5;
margin-top: 10px;
letter-spacing: 0em;
}

div.contents_back{
margin-top: 20px
}

a.contents_back{
padding: 15px 0px
}

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

p.message{
font-size:12px;
color:#ff0000;
margin-bottom: 20px;
}

ul.contact{
font-size:14px;
margin-bottom: 20px;
}

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

li.contact_left{
font-size:13px;
display: block;
margin-bottom: 5px;
font-weight: bold
}

li.contact_left:before{
content: "■";
font-size: 110%
}

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

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

li.contact_right{
display: block;
font-weight: bold;
}

select {
text-indent: 10px;
border:solid 1px #dcdcdc;
height: 45px;
-webkit-appearance: none;
outline: none;
background: transparent;
color: #666;
font-size:15px;
padding: 5px 10px 5px 0px;
border-radius: 3px;
}

input[type="text"],input[type="tel"],input[type="email"]{
width: 100%;
height: 45px;
display: block;
border-radius: 3px;
background: none;
font-size:14px;
padding-left: 10px;
border:none;
-webkit-appearance: none;
}

label.contact_input{
display: block;
border-radius: 3px;
border:solid 1px #dcdcdc!important;
}

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

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

div.check{
width: 80%;
margin: 0px auto;
font-size:14px;
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: 100%;
margin: 0px auto 20px auto;
display: flex;
justify-content: space-between;
}

input[type="submit"],input[type="button"]{
width: 80%;
max-width: 300px;
height: 48px;
margin: 0px auto 20px auto;
-webkit-appearance: none;
border:none;
text-align: center;
font-size:14px;
background:  linear-gradient(to right, #ff5858 0%, #ff5858  30%, #f857a6  100%);
display: block;
font-weight: bold;
color:#fff;
border-radius: 4px;
}

h5.message{
width: 90%;
margin:0px auto 40px auto;
font-size:13px;
line-height: 1.6;
font-weight: 200;
display: block
}

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

h4.error{
width: 90%;
margin: 0px auto;
font-size:15px;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold;
color: #666;
}

table.formTable{
width: 100%;
display: block;
font-size:14px;
margin-bottom: 20px;
text-align: left;
}

table.formTable tbody,table.formTable tr{
width: 100%;
display: block;
}

table.formTable th{
width: 100%!important;
display: block!important;
margin-bottom: 5px;
font-weight: bold
}

table.formTable td{
width: 100%;
display: block;
padding: 10px 0px 10px 0px;
border-bottom: solid 1px #efefef;
margin-bottom: 10px;
}

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

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

h3.thanks{
width: 90%;
margin: 0px auto;
font-size:14px;
line-height: 1.8;
}

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

div.form_container_mobile{
height: 100%;
min-height: 100vh;
background: rgba(34,34,34,.8);
}

div.user_form_slider{
width: 94%;
margin: 0px auto;
overflow: hidden
}

ul.user_form_slider{
width: 100%;
padding: 30px 0% 0px 0%;
display: flex;
transition: transform 0.3s;
list-style: none;

}

.user_form_slider li {
flex: 0 0 100%;
padding: 0;
box-sizing: border-box;
}

div.user_form_title{
display: flex;
align-items: flex-start;
margin-bottom: 25px
}

p.user_form_image{
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: url(../img/icon/apple_touch_icon.png) no-repeat center;
background-size: 100%
}

p.user_form_txt {
display: inline-block;
position: relative;
margin-left: 10px;
padding: 13px 15px;
width: 75%;
color: #222;
font-size: 16px;
line-height: 23px;
border-radius: 10px;
box-sizing: border-box;
background: #fff;
font-weight: 600
}

p.user_form_txt:after {
content: "";
display: block;
position: absolute;
top: 5px;
left: -10px;
width: 15px;
height: 10px;
background: url(../img/icon/download.svg) no-repeat;
background-size: contain
}

div.user_form{
width: 86%;
margin: 0 auto;
padding: 5%;
border-radius: 15px;
box-sizing: border-box;
background: #fff;
}

h3.user_form{
color: #222;
font-size: 14px;
margin-bottom: 10px
}

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

label.user_form_select select{
width: 100%;
height: 50px;
background: url(../img/icon/select.svg) no-repeat;
background-position: right 8px center;
background-size: 10px auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 10px;
border:none;
}

div.user_form_next{
width: 195px;
height: 50px;
display: block;
margin: 0px auto 0px auto;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 50px;
letter-spacing: .1em;
border-radius: 25px;
background: #ff6e9b;
border: none;
}

input[type="submit"]{
width: 195px;
height: 50px;
display: block;
margin: 0px auto 0px auto;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 50px;
letter-spacing: .1em;
border-radius: 25px;
background: #ff6e9b;
border: none;
}

p.user_form_previous{
margin-top: 20px;
text-align: center;
text-decoration: underline;
}

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

p.user_form_next{
width: 195px;
height: 50px;
display: block;
margin: 0px auto 0px auto;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 50px;
letter-spacing: .1em;
border-radius: 25px;
background: #dcdcdc;
border: none;
}

img#imagePreview{
    width: 70%;
}

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

div.form_container{
display: none
}


div.confirmation_container{
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;
}

.shop_menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}