@charset "utf-8";

div.contener{
width: 100%;
max-width: 700px;
transform: translateX(-50%);
height: 100%;
position: fixed;
left: 50%;
overflow-y:scroll
}

nav.nav{
width: 100%;
max-width: 700px;
height: 60px;
background: #1bb1e5;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: right;
padding: 0px 5% 0px 5%;
z-index: 11
}

div.nav_login{
width: max-content;
display: flex;
align-items: center;
}

a.nav_login{
color: #fff;
display: block;
text-decoration: underline;
font-weight: 600
}

a.new_registration{
background: #fff;
color: #073584;
display: block;
padding: 5px 10px;
margin-left: 15px;
border-radius: 5px;
text-decoration: underline
}

p.nav_login{
margin-right: 10px;
color: #fff
}

p.pictureUrl{
width: 42px;
margin-left: 10px;
border-radius: 50%
}

p.pictureUrl img{
border-radius: 50%
}


main.normal_main {
width: 90%;
margin: 0px auto;
padding-top: 60px;
}

img.form_logo{
width: 100px;
margin: 0px auto 20px auto;
}

h2.form{
text-align: center;
margin-bottom: 40px
}

h3.account{
margin-bottom: 15px
}

h5.account{
font-size:13px;
font-weight: 500;
margin-bottom: 15px;
line-height: 1.8
}

li.form_title{
color: #1bb1e5;
font-size:18px;
font-weight: 600;
margin-bottom: 10px
}

a.account{
color: #1bb1e5;
text-decoration: underline
}

div.social_login{
border:solid 1px #dcdcdc;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px
}

h3.social_login{
font-size: 16px;
margin-bottom: 10px
}

div.g_id_signin{
margin-bottom: 15px;
}

.nsm7Bb-HzV7m-LgbsSe {
width: 100%!important;
height: 44px!important
}

a.x_log_in{
background: #000;
height: 44px;
display: block;
border-radius: 4px;
margin-bottom: 15px;
position: relative
}

a.x_log_in:before{
content: "";
width: 20px;
height: 20px;
top:50%;
transform: translateY(-50%);
background: url(../img/icon/x_wh.png) no-repeat center;
background-size: 100%;
position: absolute;
left: 5%
}

a.line_log_in{
background: #06C755;
height: 44px;
display: block;
border-radius: 4px;
position: relative
}

a.line_log_in:before{
content: "";
width: 20px;
height: 20px;
top:50%;
transform: translateY(-50%);
background: url(../img/icon/line_wh.png) no-repeat center;
background-size: 100%;
position: absolute;
left: 5%
}

button.x_log_in{
width: 100%;
height: 100%;
border:none;
background: none;
color: #fff
}

div#g_id_onload{
margin: 0px auto
}

a.regist_back{
width:90%;
height:46px;
margin: 0px auto;
font-size:13px;
display: block;
line-height: 46px;
background: #1bb1e5;
border-radius: 5px;
color:#fff;
text-align: center;
font-weight: 600;
}

p.login_copyright{
font-size:13px;
text-align: center;
margin-top: 20px
}

footer.footer{
width: 90%;
margin: 30px auto 0px auto;
border-top:solid 1px #dcdcdc;
padding-bottom: 50px;
padding-top: 15px
}

a.footer_link{
font-size:13px;
display: block;
color:#666;
padding: 15px 0px 15px 0px ;
text-decoration: underline
}

div.form_container{
display: none
}


div.confirmation_container{
height: 100%;
max-width: 700px;
margin: 0px auto;
min-height: 100vh;
}


h2.confirmation{
text-align: center;
font-size:22px;
color:#666;
margin-bottom: 25px;
line-height: 1.4
}

h3.confirmation{
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: #1bb1e5;
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{
width: 100%;
display: flex;
justify-content:  center;
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: #1bb1e5;
line-height: 50px;
text-align: center;
border-radius: 25px;
}

input[type="submit"].confirmation_submit{
width: 50%;
max-width: 300px;
height: 48px;
-webkit-appearance: none;
border:none;
text-align: center;
font-size:14px;
background: #1bb1e5;
margin-left: 5px;
display: block;
font-weight: bold;
color:#fff;
border-radius: 24px;
}

article.confirmation{
text-align: center;
margin-bottom: 40px
}

h4.confirmation{
line-height: 2
}

a.mailto{
color:#1bb1e5;
text-decoration: underline
}

header.contents_header{
max-width: 700px;
margin: 0px auto;
border-bottom: solid 1px #999;
padding-bottom: 15px;
padding-top: 70px;
margin-bottom: 15px
}

/* カレンダー全体のスタイル */
.flatpickr-calendar {
width: 100% !important;
box-shadow: none !important;
border-radius: 8px !important;
font-size: 1rem !important;
}

/* 過去の日付はグレーアウト */
.flatpickr-day.disabled {
color: gray !important;
background: #f5f5f5 !important;
cursor: not-allowed !important;
}

/* 選択した日付のスタイル */
.flatpickr-day.selected {
background: #3b82f6 !important;
color: white !important;
}

.shadow-md {
margin-bottom: 25px
}

article.reservation{
max-width: 700px;
margin: 0px auto 15px auto;
}

h3.reservation{
width: max-content;
background: rgba(59,130,246,1);
color: #fff;
font-size:16px;
font-weight: 600;
margin-bottom: 10px;
padding: 5px 15px
}

h4.reservation{
font-size:13px;
font-weight: 500;
margin-bottom: 5px;
line-height: 1.5
}

span.reservation{
text-decoration: underline;
color: rgba(59,130,246,1)
}

div.text-gray-700{
font-size:15px
}

div.text-gray-700 p{
margin-bottom: 5px
}

p.text-gray-700{
margin-bottom: 10px
}

p.copy{
text-align: center
}

article.studio_fee{
width: 100%;
padding: 20px;
border-radius: 10px;
background: rgba(255,255,255,0.8);
text-align: center;
margin-bottom: 20px
}


h3.fee{
text-align: center;
width: 100%;
margin: 0px auto;
border:double 4px #666;
font-size:22px;
margin-bottom: 25px;
padding: 8px 0px
}

small.fee{
font-size:14px;
font-weight: 500;
display: block;
}

h4.fee{
font-size:16px;
margin-bottom: 15px;
line-height: 1.4;
}

h6.fee{
font-size:15px;
margin-bottom: 15px;
line-height: 1.5
}