html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, a, address, big,
em, img, small, strong, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, embed, figure, figcaption, 
footer, header, nav, output, ruby, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-style:normal;
    font-weight:normal;
    font-size:100%;
    vertical-align:baseline;
}

article, aside, details, figcaption, figure, iframe,
footer, header, hgroup, menu, nav, section, img {
    display:block;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse:collapse; 
    border-spacing:0;
}

caption, th{
    text-align:left;
}

a{
    text-decoration:none;
    color:#000000;
}

a:focus {
    outline:none;
}

html{
    overflow-y:scroll;
}

/* body
---------------------------------------------------------------------*/
body{
    font-family:"ヒラギノ角ゴ Pro W3", "メイリオ", serif;
    /*overflow-x:hidden;*/
}

@media screen and (min-width:781px){
    /*画面幅が781px以上の時*/
    body {
        width:480px;
        margin-right: auto;
        margin-left : auto;
    }
}

/* header
---------------------------------------------------------------------*/
header{
    padding:5% 0 0;
    position:relative;
}
header p {
    text-align:center;
}

header p img {
    display: inline-block;
}


header > div{
    z-index:999;
    position:absolute;
    bottom:0;
    right:10vw;
}
@media screen and (min-width:781px){
    /*画面幅が781px以上の時*/
    header > div{
        right:calc(480px * 0.1);
    }
}

header .nav{
    background:#FFFFFF;
    width:100vw;
    border-bottom:10px solid #E64966;
    z-index:99;
    position:absolute;
    top:0;
    left:0;
}
@media screen and (min-width:781px){
    /*画面幅が781px以上の時*/
    header .nav{
        width:calc(480px);
    }
}

header .nav ul{
	width:75vw;
}
@media screen and (min-width:781px){
    /*画面幅が781px以上の時*/
    header .nav ul{
        width:calc(480px * 0.75);
    }
}

header .nav a{
    display:block;
    padding:5% 8%;
    position:relative;
}

header .nav a:after{
    content:"";
    display:block;
    width:0.5rem;
    height:0.5rem;
    border-bottom:1px solid #E64966;
    border-right:1px solid #E64966;
    position:absolute;
    top:50%;
    right:10%;
    transform:translateY(-50%) rotate(-45deg);
}

header .nav li:nth-of-type(odd) a{
    background:#FBE4E8;
}

header .nav li:nth-of-type(even) a{
    background:#FEF6F7;
}

/* footer
---------------------------------------------------------------------*/
footer{
    background:#E64966;
    color:#FFFFFF;
    margin-top:8%;
    padding:5%;
}

footer h2{
    font-weight:bold;
    font-size:1.5rem;
}

footer p{
    margin-top:1rem;
}

footer p a{
    text-decoration:underline;
    color:#FFFFFF;
}

footer #copyright{
    text-align:center;
}

/*- ID userName -*/
#userName{
    background:#E64966;
    text-align:center;
    font-size:1.2rem;
    color:#FFFFFF;
    margin-top:5%;
    padding:3% 5%;
}

/*- ID contents -*/
#contents{
    padding:0 5%;
    margin-top:5%;
}

#contents .presetTitle01 {
    padding: 0;
}

/*- Class miniTitle -*/
.miniTitle{
    background:#E64966;
    text-align:center;
    font-weight:bold;
    color:#FFFFFF;
    padding:5px 0;
    border-radius:20px;
}

/*- Class presetTitle01 -*/
.presetTitle01{
    margin-bottom:1rem;
    padding:0 5%;
    display:flex;
    align-items:center;
}

.presetTitle01 > *{
/*    flex:1;
    flex-basis:content;*/
}

.presetTitle01 span{
    padding:0 0.8rem;
    font-size:1.5rem;
    font-weight:bold;
    color:#E64966;
    text-align:center;
}

.presetTitle01:after,
.presetTitle01:before {
    content:"";
    display:block;
    width:100%;
    height:1px;
    background:#E64966;
}

/*- Class presetBtn -*/

.presetBtn input {
    display: block;
    width: 100%;
    padding: 5% 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 50px;
    border: 2px solid #FFFFFF;
    position: relative;
}

.presetBtn {
    width: 70vw;
    margin: 5% auto 0;
}

@media screen and (min-width:781px){
    /*画面幅が781px以上の時*/
    .presetBtn{
        width:336px;
    }
}

.presetBtn .button_wrap{
    color: #fff;
    position: relative;
    line-height: 2.8em;
    width: auto;
    transition: 0.5s;
    margin:0 auto;
}

.presetBtn .button_wrap:after{
    content:"";
    display:block;
    width:0.7rem;
    height:0.7rem;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
    position:absolute;
    top:50%;
    right:10%;
    transform:translateY(-50%) rotate(-45deg);
}

.presetBtn a{
	display:block;
	width:100%;
	padding:5% 0;
	text-align:center;
	font-size:1.25rem;
	font-weight:bold;
	color:#FFFFFF;
	border-radius:50px;
	position:relative;
}

.presetBtn a:after{
	content:"";
	display:block;
	width:0.7rem;
	height:0.7rem;
	border-bottom:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
	position:absolute;
	top:50%;
	right:10%;
	transform:translateY(-50%) rotate(-45deg);
}

/*- Class presetBtn3 -*/
.presetBtn3,
.presetBtn3 a{
    display:flex;
}

.presetBtn3{
    justify-content:space-between;
}

.presetBtn3 li {
    width: 35vw;
    margin-top: 5rem;
    margin-bottom: 1rem;
}

.presetBtn3 li.fym{
    text-align: center;
    padding-top: 10px;
}

.presetBtn3 .button_wrap {
    color: #fff;
    position: relative;
    line-height: 2.8em;
    width: auto;
    transition: 0.5s;
    margin: 0 auto;
}

.presetBtn3 .button_wrap::after{
    content:"";
    display:block;
    width:0.7rem;
    height:0.7rem;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
    position:absolute;
    top:50%;
    right:10%;
    transform:translateY(-50%) rotate(-45deg);
}

.presetBtn3 input {
    background: #E64966;
}

.presetBtn3 input {
    display: block;
    width: 100%;
    padding: 5% 0;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 50px;
    position: relative;
    border: 2px solid #FFFFFF;
}

.presetBtn3 a:after{
	content:"";
	display:block;
	width:0.7rem;
	height:0.7rem;
	border-bottom:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
	position:absolute;
	top:50%;
	right:4%;
	transform:translateY(-50%) rotate(-45deg);
}


/* ID login 
---------------------------------------------------------------------*/
#login header{
    padding:5% 5% 0;
    margin:0;
}

#login > div{
    text-align:left;
}

#login h3{
    font-weight:bold;
    font-size:1.5rem;
}

#login h3 + p{
    margin-top:1rem;
}

#login form div{
    margin-top:5%;
    display:flex;
}

#login form div span{
    flex:1;
}

#login form div p{
    flex:8;
    overflow:hidden;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0px 0px 5px 0px #B7B7B7 inset;
}

#login form div p input{
    background:rgba(0,0,0,0);
    width:100%;
    height:100%;
    padding:0 0 0 1rem;
    border:none;
}

#login form div + p{
    margin-top:10px;
}

#login form .presetBtn a{
    background:#E64966;
}

#login form img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

#login .back input {
    background: #777777;
}

#login #contents .access a {
    color: #E64966;
    text-decoration: underline;
}

@media screen and (min-width: 781px) {
    #login .presetBtn3 li {
        width: calc(480px * 0.35);
    }
}

/* ID reserve
---------------------------------------------------------------------*/
#reserve #contents .presetTitle01 span {
    min-width: 15rem;
}


#reserve .presetBtn3 li {
    width: 35vw;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#reserve #contents .back input {
    background-color: #777777;
}

#reserve .kaijodisp input{
    background-color: #E64966;
}

#reserve dd select {
    width: 100%;
    padding: 0.5rem;
    appearance: none;
}

#reserve dd .step_s1 div:after {
    content:"";
    display:block;
    width:0.5rem;
    height:0.5rem;
    border-right:1px solid #E64966;
    border-bottom:1px solid #E64966;
    position:absolute;
    top:50%;
    right:1rem;
    transform:translateY(-60%) rotate(45deg);
}

#reserve .step_s1 .block {
    width: 100%;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px 0px #bbbbbb inset;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFFFFF), to(#FFFFFF));
    background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF);
}

#reserve dd select {
    background: rgba(0,0,0,0);
    border: none;
}

#reserve dd div {
    overflow: hidden;
    position: relative;
}

#reserve #contents .date dl {
    border-top: 1px dashed #734900;
    display: flex;
    flex-wrap: wrap;
}

#reserve #contents .date dt {
    width: 50%;
    padding-left: 1rem;
    font-weight: bold;
    color: #734900;
    font-size: 1.25rem;
    text-align: left;
}

#reserve #contents .date dt, 
#reserve #contents .date dd {
    margin-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
    border-bottom: 1px dashed #734900;
}

#reserve #contents .date dd {
    width: 50%;
    font-size: 1.5rem;
    /* padding-left: 2rem; */
    color: #734900;
    text-align: left;
}

#reserve #contents .date a {
    color: #E64966;
    text-decoration: underline;
}

#reserve .kaijodisp input {
    background-color: #E64966;
}

#reserve #contents .access a {
    color: #E64966;
    text-decoration: underline;
}

/* ID reserve-time
---------------------------------------------------------------------*/

#reserve-time #contents .presetTitle01 span {
    min-width:18rem;
}

#reserve-time .firstBorderTop dl:first-of-type {
    /*border-top: 1px dashed #734900;*/
}

#reserve-time #contents dl {
    display: flex;
    flex-wrap: wrap;
}

#reserve-time .txtL p {
    text-align: left;
}

#reserve-time .txtL p a {
    color: #E64966;
    text-decoration: underline;
}

#reserve-time #contents dt {
    width: 50%;
    padding-left: 1rem;
    font-weight: bold;
    color: #734900;
    font-size: 1.25rem;
    text-align: left;
}

#reserve-time #contents dt, 
#reserve-time #contents dd {
    margin-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
    border-bottom: 1px dashed #734900;
}

#reserve-time #contents dd {
    width: 50%;
    font-size: 1.5rem;
    /*padding-left: 2rem;*/
    color: #734900;
    text-align: left;
}

#reserve-time #contents h4{
    text-align:center;
    font-size:1.25rem;
    margin-top:5%;
    margin-bottom:5%;
}

#reserve-time #contents dd a {
    color: #E64966;
    text-decoration: underline;
}

#reserve-time .back input {
    background-color: #777777;
}

#reserve-time .presetBtn3 li {
    width: 35vw;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#reserve-time .calendarBtn {
    text-align: center;
    display: flex;
}

#reserve-time .calendarBtn input {
    display: block;
    width: 100%;
    padding: 5% 0;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 50px;
    position: relative;
    border: 2px solid #FFFFFF;
    background-color: #E64966;
}

#reserve-time .calendarBtn span {
    width: 100px; 
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#reserve-time .presetBtn3 a{
    display: block;
    width: 100%;
    padding: 5% 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 50px;
    position: relative;
    background: #E64966;
}

#reserve-time dt a,
#reserve-time .access a {
    color: #E64966;
    text-decoration: underline;
}

/* ID reserve-detail
---------------------------------------------------------------------*/

#reserve-detail #contents .presetTitle01 span{
    min-width:18rem;
}

#reserve-detail dl {
    margin-top: 20px;
    margin-bottom: 20px;
    background: #FCEDF0;
    padding: 5%;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
}

#reserve-detail dd {
    margin-top: 10px;
    padding-right: 3%;
    padding-left: 3%;
}

#reserve-detail div {
    text-align: center;
}

#reserve-detail #contents dd a {
    text-decoration: underline;
    color: #E64966;
}

#reserve-detail .txtL p {
    text-align: left;
}

#reserve-detail #contents .back input {
    background-color: #777777;
}

#reserve-detail dt:first-of-type ~ dt {
    margin-top: 2%;
}

#reserve-detail .presetBtn a{
	background:#E64966;
}