@charset "utf-8";
/* CSS Document */

body {
    overflow-x: auto;
    overflow-y: scroll;
}

* {
    -webkit-appearance: none;
    -webkit-overflow-scrolling: touch;
}

body * {
    font-family: 'Noto Sans JP','Noto Sans Japanese', sans-serif;
    font-weight: 400;
    letter-spacing: normal;
}
body b {
    font-weight: bold;
}
body b * {
    font-weight: inherit;
}
body em {
    font-style: italic;
}

header {
    text-align: center;
    padding: 30px;
}
/*
footer {
    margin-top: 60px;
}
*/
    footer.adjust {
        position: fixed;
        bottom: 0;
        width: 100%;
    }


    footer > div {
        text-align: center;
        padding: 4px;
        background: #004ea1;
        color: #FFFFFF;
    }

p {
    line-height: 140%;
    margin: 10px auto;
}

    p.detail,div.detail {
        text-align: center;
    }
    p.detail, div.detail.rich-edit {
        text-align: left;
    }



.container {
    margin-bottom: 60px;
}

section.content {
    width: 100%;
    margin: 30px auto 0 auto;
    max-width: 1000px;
}

div.one_btn {
    margin: 40px auto 30px auto;
    letter-spacing: -0.4em;
    text-align: center;
    width: auto;
    /*
    width: 100%;
    max-width: 280px;
*/
}

    div.one_btn input, div.one_btn a {
        width: auto;
        min-width: 200px;
        padding-left: 1em;
        padding-right: 1em;
    }

div.two_btn {
    width: calc(100% - 30px);
    margin: 40px auto 30px auto;
    letter-spacing: -0.4em;
    max-width: 420px;
    display: flex;
    justify-content: space-around;
}

div.three_btn {
    width: calc(100% - 30px);
    margin: 40px auto 30px auto;
    letter-spacing: -0.4em;
    max-width: 640px;
    display: flex;
    justify-content: space-around;
}

h3 {
    font-size: medium;
    color: #004ea1;
    font-weight: bold;
}

a, a:link {
    color: #004ea1;
    text-decoration: underline;
    letter-spacing: normal;
}

    a:hover {
        text-decoration: none;
    }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    select::-ms-expand {
        display: none;
    }

.select_wrap {
    width: 100%;
    display: block;
    border-radius: 7px;
    border: 1px solid #ccc;
    overflow: hidden;
    height: 42px;
    position: relative;
}

    .select_wrap::before {
        content: '';
        width: 41px;
        height: 41px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: url(./img/select.svg) no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    .select_wrap select {
        padding: 0;
        padding-left: 0.5em;
        font-size: 15px !important;
        height: 42px;
        background-image: none;
        box-sizing: border-box;
        line-height: 1.4;
        justify-content: center;
        align-items: center;
        border: none !important;
    }
/* ---ボタン--- */

/*
    div.two_btn a:first-child, div.two_btn input:first-child, div.three_btn a:nth-child(-n+2), div.three_btn input:nth-child(-n+2) {
    margin-right: 16px;
}
*/

div.two_btn a, div.two_btn input {
    width: calc(50% - 9px);
    max-width: 200px
}

div.three_btn a, div.three_btn input {
    width: calc(33% - 11px);
    max-width: 200px
}

a.btn, a.btn_new, a.btn_member, a.btn_login, a.btn_confirm, a.btn_back, a.btn_order, a.btn_top, a.btn_clear, a.btn_reserve, a.btn_end, input.btn, span.btn, button.btn_login {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    padding: 20px 0;
    border-radius: 7px;
    width: 100%;
    letter-spacing: normal;
    font-size: medium;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}

    a.btn.off {
        visibility: hidden;
    }

a.btn_blue, input.btn_blue {
    background: #004ea1;
}

a.btn_lightblue, input.btn_lightblue {
    background: #009dc8 !important;
    color: #ffffff !important;
}

a.btn_blue_line, input.btn_blue_line {
    border: 1px solid #004ea1;
    color: #004ea1;
    opacity: 0.8;
}

a.btn.btn_blue_line:hover, input.btn.btn_blue_line:hover {
    opacity: 1.0;
}

a.btn_skyblue, input.btn_skyblue, .btnbox_enquete .btn {
    background: #009dc8;
}

a.btn_green {
    background: #00A89C;
}

a.btn_white_green {
    color: #00A89C;
    background: #ffffff;
    border: 1px solid #00A89C;
    width: calc(100% - 2px);
}

a.btn_glay, input.btn_gray, button.btn_gray {
    background: #989898 !important;
}

a.btn_new {
    background: #00a89c;
}

a.btn_member, input.btn_easylogin {
    background: #009dc8;
}

input.btn_easylogin {
    margin-bottom: 10px;
    border: none;
}

    input.btn_easylogin:hover {
        cursor: pointer;
    }

a.btn_confirm {
    background: #009dc8;
    width: 100%;
    padding: 8px 0;
    max-width: 200px;
}

div.one_btn a.btn_back
,div.two_btn a.btn_back
, input.btn_back {
    background: #989898;
    width: 30% !important;
}
div.three_btn a.btn_back{
    background: #989898;
}
div.three_btn a.btn_back:not(.no-resize) {
    width: 20% !important;
}


a.btn_order, input.btn_order {
    background: #989898;
    width: calc(70% - 17px) !important;
}

    a.btn_order.on, input.btn_order.on {
        background: #00A89C;
    }

a.btn_top {
    background: #004ea1;
    padding: 20px 0;
}

a.btn_login, input.btn_login, section#telemail_box input.btn_login, button.btn_login {
    background: #009dc8;
    padding: 20px 0;
    font-size: 13px;
}

#order_page a.btn_login, input.btn_login, button.btn_login {
    max-width: 200px;
}

a.btn_clear, span.cancelButton {
    background: #65CBC4;
}

a.btn_reserve, span.reserveButton {
    background: #00A89C;
}

a.btn_end {
    background: #989898;
    line-height: inherit;
}

a.btn_trouble_mail, a.btn_zanseki_link {
    display: block;
    max-width: 420px;
    width: calc(100% - 30px);
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    padding: 7px 0;
    border-radius: 7px;
    font-size: 12px;
}
div.btn_zanseki_wrap {
    width: 100%;
}
a.btn_zanseki_link {
    font-size: 14px;
}

a.btn_trouble_mail::before,a.btn_zanseki_link::before {
    content: '';
    width: 14px;
    height: 14px;
    background: url(./img/icon_otherlink.svg) no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: -2px;
}

a.btn_trouble_mail:visited,a.btn_zanseki_link:visited {
    color: #004ea1;
}

a:hover.btn, a:hover.btn_new, a:hover.btn_member, a:hover.btn_login, a:hover.btn_back, a:hover.btn_order, a:hover.btn_clear, a:hover.btn_reserve, a:hover.btn_top, a:hover.btn_trouble_mail, #telemail-login-open:hover, #telemail-login-button:hover, #telemail-dai3-button:hover {
    opacity: 0.8;
}

a.btn_telemail, input.btn_telemail {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #000000;
    max-width: 350px;
    /*
    max-width:300px;
*/
    margin: 25px auto;
    font-size: medium;
    font-weight: 600;
    line-height: 1;
}

    a.btn_telemail:before, input.btn_telemail:before {
        content: url(./img/telemail.svg);
        display: inline-block;
        width: 28px;
        height: auto;
        vertical-align: middle;
        margin-right: 4px;
    }

input::-webkit-input-placeholder {
    color: #ccc;
}

input:-ms-input-placeholder {
    color: #ccc;
}

input::-moz-placeholder {
    color: #ccc;
}

input, textarea {
    font-size: medium;
    padding: 7px 10px;
    margin: 0;
    border-radius: 7px;
    border: 1px solid #ccc;
    width: 100%;
    font-size: large;
    line-height: 1.4;
    justify-content: center;
    align-items: center;
}

    input:disabled, textarea:disabled {
        background-color: #ccc;
    }

#popup_overray3 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000000ad;
	z-index: 20000;
}

#popup_overray3 > div.roaded_message {
	width: calc(100% - 50px);
    max-height: 50%;
    overflow-y: auto;
	/*
	height:100px;
    */
	position: absolute;
	top: calc(50% - 50px);
	left: 25px;
	background: rgba(255, 255, 255, 0.79);
	text-align: center;
	padding: 20px;
	border-radius: 10px;
}


#popup_overray3 > div.roaded_message p {
	font-size: 16px;
}

#popup_overray3 > div.roaded_message span.popup-btn {
	display:block;
	background:#04969e;
	margin:10px auto 0;
	border-radius:5px;
	padding:5px;
	width:100px;
	color:#fff;
	cursor: pointer;
}

#popup_overray3 > div.roaded_message span:hover {
	opacity: 0.8;
}



@media only screen and (max-width: 481px) {
}

@media only screen and (max-width: 481px) {
    a.btn_new, a.btn_member {
        width: calc(50% - 5px);
    }

    a.btn_new {
        /*margin-right: 9px;*/
    }

    a.btn_confirm {
        padding: 12px 0;
    }

    input, select, button, input[type="button"] {
        font-size: 16px;
    }

    .select_wrap select {
        font-size: 16px !important;
    }
}
/*@media only screen and (max-width: 481px) {*/

.notice {
    color: #c1272d;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}
/*--- CheckBox--- */
label.checkbox_text {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding-left: 28px;
    display: inline-block;
    box-sizing: border-box;
    font-weight: 500;
    padding-bottom: 4px;
}

    label.checkbox_text:before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0px;
        top: 40%;
        margin-top: -8px;
        border: 2px solid #004ea1;
        box-sizing: border-box;
        z-index: 3;
    }

input:disabled + label.checkbox_text:before {
    background-color: #ccc;
}

input:checked + label.checkbox_text:after {
    content: '';
    position: absolute;
    top: 40%;
    left: 6px;
    display: block;
    margin-top: -8px;
    width: 5px;
    height: 12px;
    border-right: 3px solid #004ea1;
    border-bottom: 3px solid #004ea1;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    z-index: 1;
}

label.checkbox_text input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: -40px;
    width: 20px;
    height: 20px;
    display: block;
    box-shadow: 41px 0px #FFF;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

    label.checkbox_text input[type="checkbox"]:checked {
        box-shadow: none;
    }

        label.checkbox_text input[type="checkbox"]:checked:focus {
            box-shadow: 40px 0px #666;
            opacity: 0.1;
        }

    label.checkbox_text input[type="checkbox"]:focus {
        box-shadow: 41px 0px #EEE;
    }
/*header -------------------------------------------------*/
header .menu-mobile, header .close {
    display: block;
    background: url(./img/menu_open.png) no-repeat right 0;
    background-size: contain;
    float: right;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    color: #fff;
    text-decoration: none;
    position: absolute;
    top: 5px;
    right: 0;
}

    header .menu-mobile.active, header .close {
        background: url(./img/menu_close.png) no-repeat right 0;
        background-size: contain;
    }
/*header progress　bar　css*/

#progress {
    background: #004ea1;
    color: #ffffff;
    text-align: center;
    font-size: small;
    letter-spacing: -0.4em;
    padding: 10px;
}

    #progress ul {
        width: calc(100% - 30px);
        max-width: 1000px;
        margin: 0 auto;
        letter-spacing: normal;
    }

        #progress ul li {
            display: inline-block;
            padding: 3px 20px;
            margin-right: 40px;
            position: relative;
            line-height: 1.3;
        }

            #progress ul li:last-child {
                margin-right: 0;
            }

            #progress ul li.on {
                background: #ffffff;
                color: #004ea1;
                border-radius: 5px;
                font-weight: 600;
            }

            #progress ul li:after {
                content: "";
                position: absolute;
                top: 0.4em;
                right: -30px;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-left: 9px solid white;
            }

            #progress ul li:last-child:after {
                content: none;
            }

div.title h2 {
    color: #004ea1;
    text-align: center;
    font-size: x-large;
    font-weight: 400;
    margin-top: 40px;
    line-height: 1.6;
}


/*alert & warning  --------------------------------------------*/
#alert p, div.warning p {
    color: #c0262c;
    max-width: 1000px;
    width: calc(100% - 30px);
    margin: 10px auto;
}

#alert h2, div.warning h2 {
    background: #c0262c;
    color: #ffffff;
    font-size: large;
    padding: 10px;
    margin-top: 40px;
    text-align: center;
}
div.warning.no-margin h2 {
    margin-top: 0;
}

div.warning_box {
    margin: 3px 0;
    padding: 3px 10px;
    background-color: #CC0000;
    color: #FFFFFF;
    font-size: 12px;
    display: block;
    width: 100% !important;
}

    div.warning_box a {
        color: #fff;
        text-decoration: underline;
    }

/* 入力エラー */
.inputerr {
    background-color: #FCC;
}


/*timetable*/
.page-header {
    background: #004ea1;
    color: #ffffff;
    text-align: center;
    font-size: large;
    padding: 15px;
    line-height: 1.6;
}

li.FP_OCFormItemRadioButtonModel input[type=radio], li.FP_OCFormItemCheckBoxModel input[type=checkbox], li.event input[type=checkbox], li.event input[type=radio] {
    display: none;
}

input[type=button]:hover, input[type=submit]:hover, span.btn:hover {
    cursor: pointer;
}

input[type=button], input[type=submit] {
    border: none;
}

#entry-note {
    width: 90%;
    margin: 30px auto;
    padding: 20px;
    color: #000;
    font-weight: 500;
    border: solid 2px #CCC;
    background: #fff;
    /* padding-left: 30px; */
    max-width: 800px;
    font-size: small;
}
#entry-note-header {
    font-size: medium;
    color: #000;
    font-weight: 500;
}
.entry-note-p {
    width: 98%;
    /*
    font-weight: 600;
    */
    padding-left: 1em;
    text-indent: -2em;
    line-height: 150%;
    text-align: justify;
}
.entry-note-red {
    color: #dd0000;
    font-weight: 500;
}
#login-note {
    width: 92%;
    margin: 20px auto;
    padding: 10px;
    color: #000;
    font-weight: 600;
    border: solid 5px #CCC;
    background: #fff;
    max-width: 800px;
}
.login-note-p {
    width: 97%;
    font-weight: 600;
    line-height: 180%;
}
.display-none {
    display: none !important;
}
/*----- 各サイズでの表示 -----*/

.pc {
    display: inherit;
}

.tab {
    display: none;
}

.pc-tab {
    display: inherit;
}

.sp {
    display: none;
}

div.rich-edit strong {
    font-weight: 600;
}
div.rich-edit p {
    margin: auto;
}
div.rich-edit.outer {
    text-align: center;
}

div.free-text-inner {
    display: inline-block;
    width: auto;
    max-width: 90%;
    text-align: left;
}
/*footer　style*/
#footer-section {
    padding-top: 35px;
}
footer {
    border-top: 1px solid #ffffff;
    background: #009CC7;
}
footer.adjust {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
footer > div {
    text-align: center;
    color: #fff;
    line-height: 1.4;
    padding-bottom: 10px;
}
/* message form */
body#message {
    overflow-y: auto;
}
#message section.content > div.message-block {
    margin: 0 15px;
    width: calc(100% - 30px);
    text-align: center;
}
#message section.content > div.message-block > div.inner {
    display: inline-block;
    width: auto;
    text-align: left;
}

@media only screen and (max-width: 1000px) {
    .pc {
        display: none;
    }

    .tab {
        display: inherit;
    }

    .pc-tab {
        display: inherit;
    }

    .sp {
        display: none;
    }
}
/*@media only screen and (max-width: 1000px) {*/

@media only screen and (max-width: 767px) {
    .pc {
        display: none;
    }

    .tab {
        display: none;
    }

    .pc-tab {
        display: none;
    }

    .sp {
        display: inherit;
    }

    #progress {
        display: none;
    }

    #page-title {
        background: #004ea1;
        color: #ffffff;
        text-align: center;
        font-size: large;
        padding: 15px 5vw;
        line-height: 1.6;
    }

    p.detail,div.detail {
        text-align: justify;
        padding-left: 1em;
        /* 20190220 */
        padding-right: 1em;
    }
    .pc-only{
        display:none!important;
    }

    footer {
        margin-top: 4vw;
    }
    footer div#ssl {
        font-size: 90%;
        padding: 1vw 0;
    }
    div.title h2 {
        padding: 0 5vw;
    }
}
@media only screen and (min-width: 768px), print{
    .sp-only{
        display:none!important;
    }
}

/*@media only screen and (max-width: 767px) {*/