@charset "UTF-8";
@font-face {
    font-family: 'Arial Black';
    font-style: normal;
    font-weight: 400;
    display: swap;
    src: local("Arial Black"), url("ariblk_0.ttf") format("ttf");
}
.sekou {
    display: none;
}
html {
    font-size: 62.5%;
    min-height: 100%;
    overflow-y: scroll;
    background: #fff;
    scroll-behavior: smooth;
}
.modal__header
{
    height: 45px;
    background-color: #bedcff;
    border-radius: 5px 5px 0 0;
    flex-direction: row;
}
.modal__base
{
    margin:0;
    padding:0;
    justify-content: center;
    text-align: center;
    align-items: center;
    display: flex;
}
@media (min-width:700px) {
    .first-v {
        background-image: url(../img/mv.png);
        height: 532px;
        background-position: center;
        background-repeat: no-repeat;
        background-size:53% 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    .mycheckbox2 {
        text-align: center;
    }
}
@media (max-width: 480px) {
    html {
        width: 100%;
        height: 100%;
    }
}
html body,
html dd,
html div,
html dl,
html dt,
html fieldset,
html form,
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
html input,
html li,
html ol,
html p,
html td,
html textarea,
html th,
html ul {
    padding: 0;
    margin: 0;
}
html article,
html aside,
html details,
html figcaption,
html figure,
html footer,
html header,
html hgroup,
html menu,
html nav,
html section {
    display: block;
    padding: 0;
    margin: 0;
}
html address,
html caption,
html em,
html strong,
html th {
    font-style: normal;
}
html caption,
html th {
    text-align: left;
}
html hr,
html legend {
    display: none;
}
html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
    font-size: 100%;
}
html ol,
html ul {
    list-style: none;
}
html a img,
html fieldset {
    border: none;
}
html a:visited {
    text-decoration: none;
}
html p {
    margin-bottom: 12px;
}
html * {
    box-sizing: border-box;
}
html blockquote,
html dl,
html ol,
html pre,
html table,
html ul {
    margin-bottom: 0;
}
html table {
    border-collapse: collapse;
    border-spacing: 0;
}
header {
    background: url(../img/madoka.png) center center / cover no-repeat fixed;
}
body {
    color: #333333;
    font-size: 1.4em;
    font-family: "Noto Sans JP", sans-serif;
    -webkit-text-size-adjust: none;
    letter-spacing: 1.5px;
    line-height: 1.8;
    min-height: 100vh;
    min-width: 1040px;
    background-color: #FCC69F;
}
.n01 {
    display: none;
}
.datepicker {
    width: 100%;
}
.cal.datepicker.hasDatepicker {
    width: 100%;
}
.arrow_box{
    position:relative;
    width:100%;
    background:#FBA948;
    padding:20px;
    text-align:center;
    border:2px solid #FBA948;
    color:#FFFFFF;
    font-size:20px;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    text-shadow:0px 1px 1px #ADADAD ;
    margin-bottom: 15px;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.arrow_box:after{
    border-color: rgba(251, 169, 72, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:5px;
    border-right-width:5px;
    margin-left: -5px;
    border-top-color:#FBA948;
}
.arrow_box:before{
    border-color: rgba(251, 169, 72, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:7px;
    border-right-width:7px;
    margin-left: -7px;
    margin-top: 2px;
    border-top-color:#FBA948;
}

@media (max-width: 480px) {
    .pick {
        float: right;
        padding-top: 5px;
    }
    .first-v {
        background-image: url(../img/mv.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 290px;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        /*height: 40vh;*/
        /*background-repeat: no-repeat;*/
        /*background-size: contain;*/
        /*width: 100%;*/
    }
    form_section {
        max-width: 630px;
        margin: 0 auto;
        padding: 0;
    }
    .date-table {
        border-collapse: collapse;
    }
    .date-table th {
        color: #53a034;
        padding: 10px 20px 0 0;
        vertical-align: top;
        white-space: nowrap;
    }
    .date-table td {
        padding: 0 0 1.5em 0;
    }
    .cal-wrap {
        position: relative;
        cursor: pointer;
    }
    .cal-wrap:before {
        content: "";
        background: url(../img/calender.png) no-repeat;
        background-position: center center;
        background-size: contain;
        height: 30px;
        width: 30px;
        position: absolute;
        top: 0;
        left: 10px;
        margin: auto;
    }
    input[type="text"].cal {
        font-size: 18px;
        outline: none;
        border-radius: 5px;
        height: 50px;
        line-height: 50px;
        padding: 0 0 0 50px;
        cursor: pointer;
        width: 180px;
        box-sizing: border-box;
        border: 2px solid #ccc;
    }
    .btn-style a {
        background: #53a034;
        border-radius: 40px;
        color: #fff;
        display: inline-block;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 100%;
        max-width: 200px;
        text-decoration: none;
    }
    .error_txt {
        display: block;
        margin: .3em 0 0 0;
        color: #f00;
    }
    small {
        font-size:0.6em;
    }
    .tall {
        display: flex;
        border: 1px solid #D4D4D4;
        justify-content: space-between;
        border-radius:5px;
    }

    .tall .item {
        background-color: #009688;
        margin: 5px;
    }
    .tall .n01 {
        background-color: #999999;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .tall .n02 {
        background-color: #ffffff;
    }

    .container:after {
        content: "";
        position: absolute;
        right: 8px;
        top: 12px;
        width: 5px;
        height: 5px;
        border-top: 2px solid skyblue;
        border-left: 2px solid skyblue;
        pointer-events: none;
        transform: translateY(-50%) rotate(
                -135deg);
    }
    .sekou {
        display: none;
    }
    header {
        background: url(../img/madoka.png) center center / cover no-repeat fixed;
    }
    body {
        position: relative;
        width: 100%;
        min-width: 100%;
        font-size: 1.5em;
        -webkit-overflow-scrolling: touch;
    }

    .arrow_box{
        position:relative;
        width:100%;
        height:5px;
        background:#FBA948;
        padding:20px;
        text-align:center;
        line-height: 1px;
        border:2px solid #FBA948;
        color:#FFFFFF;
        font-size:15px;
        font-weight:bold;
        border-radius:10px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        text-shadow:0px 1px 1px #ADADAD ;
        margin-bottom: 15px;
    }
    .arrow_box:after,.arrow_box:before{
        border: solid transparent;
        content:'';
        height:0;
        width:0;
        pointer-events:none;
        position:absolute;
        top:100%;
        left:50%;
    }
    .arrow_box:after{
        border-color: rgba(251, 169, 72, 0);
        border-top-width:5px;
        border-bottom-width:5px;
        border-left-width:5px;
        border-right-width:5px;
        margin-left: -5px;
        border-top-color:#FBA948;
    }
    .arrow_box:before{
        border-color: rgba(251, 169, 72, 0);
        border-top-width:7px;
        border-bottom-width:7px;
        border-left-width:7px;
        border-right-width:7px;
        margin-left: -7px;
        margin-top: 2px;
        border-top-color:#FBA948;
    }

    /* 元々のチェックボックス（非表示） */
    /*.mycheckbox input[type="checkbox"]{*/
    /*  display: none;*/
    /*}*/
    .mycheckbox span {
        /* 重ねるので position: relative; 指定*/
        position: relative;
    }

    /* 隠れていたデフォルトデザイン部分を最小化 */
    .mycheckbox input[type=checkbox] {
        opacity: 0;
        height: 0;
        width: 0;
        margin: 0 14px 0 0;
        padding: 0;
        min-height: 1px;
        border: 0;
        border-radius: 0;
        font-size: 0;
    }

    /* チェックボックスの代わりを成すラベル */
    .mycheckbox input[type="checkbox"] + label {
        display: none;
        cursor: pointer;
        display: inline-block;
        position: relative;
        padding-left: 25px;
        padding-right: 10px;
    }

    /* ラベルの左に表示させる正方形のボックス□ */
    .mycheckbox input[type="checkbox"] + label::before {
        content: "";
        position: absolute;
        display: block;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        top: 13px;
        left: 0px;
        border: 1px solid;
        border-color: #585753; /* 枠の色変更 お好きな色を */
        background-color: #FFF; /* 背景の色変更 お好きな色を */

    }

    /* チェックが入った時のレ点 */
    .mycheckbox input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        display: block;
        box-sizing: border-box;
        width: 18px;
        height: 9px;
        margin-top: -9px;
        top: 50%;
        left: 3px;
        transform: rotate(-45deg);
        border-bottom: 3px solid;
        border-left: 3px solid;
        border-color: #FBA948; /* チェックの色変更 お好きな色を */
    }
    .mycheckbox2 {
        padding: 0 15px;
    }
    /* 元々のチェックボックス（非表示） */
    /*.mycheckbox input[type="checkbox"]{*/
    /*  display: none;*/
    /*}*/
    .mycheckbox2 span {
        /* 重ねるので position: relative; 指定*/
        position: relative;
    }

    /* 隠れていたデフォルトデザイン部分を最小化 */
    .mycheckbox2 input[type=checkbox] {
        opacity: 0;
        height: 0;
        width: 0;
        margin: 0 14px 0 0;
        padding: 0;
        min-height: 1px;
        border: 0;
        border-radius: 0;
        font-size: 0;
    }

    /* チェックボックスの代わりを成すラベル */
    .mycheckbox2 input[type="checkbox"] + label {
        display: none;
        cursor: pointer;
        display: inline-block;
        position: relative;
        padding-left: 25px;
        padding-right: 10px;
    }

    /* ラベルの左に表示させる正方形のボックス□ */
    .mycheckbox2 input[type="checkbox"] + label::before {
        content: "";
        position: absolute;
        display: block;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        top: 13px;
        left: 0px;
        border: 1px solid;
        border-color: #585753; /* 枠の色変更 お好きな色を */
        background-color: #FFF; /* 背景の色変更 お好きな色を */

    }

    /* チェックが入った時のレ点 */
    .mycheckbox2 input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        display: block;
        box-sizing: border-box;
        width: 18px;
        height: 9px;
        top: 6px;
        left: 3px;
        transform: rotate(-45deg);
        border-bottom: 3px solid;
        border-left: 3px solid;
        border-color: #FBA948; /* チェックの色変更 お好きな色を */
    }

    #page {
        margin: 0 auto;
        width: auto;
    }
}
@media (max-width: 480px) {
    #page {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
}

#header {
    min-width: 1020px;
    padding: 15px 15px;
    background: #fff;
}
#header h1{
    text-align: center;
}
@media (max-width: 480px) {
    #header {
        min-width: 100%;
    }
}


#contents .section {
    padding: 80px 0 40px;
}
@media (max-width: 480px) {
    #contents .section {
        padding: 20px 0 10px;
        max-height: 100%;
    }
}
#contents .section .section_title{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    background: #fff;
    max-width: 1020px;
    padding: 10px;
    margin: 0 auto 30px;
}
@media (max-width: 480px) {
    #contents .section .section_title {
        font-size: 1.8rem;
        max-width: 100%;
        margin: 0 auto 15px;
    }
}
#contents .section.top .section_inner .colorbox {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 20px;
}
#contents .section .b_txt{
    color: #7b3201;
}
#contents .section .coment{
    border-top: 1px dotted #333;
    border-bottom: 1px dotted #333;
    padding: 10px 0 0;
}
#contents .section .section_inner {
    margin: 0 auto;
    padding: 0 0 20px;
    max-width: 1020px;
}
@media (max-width: 480px) {
    #contents .section .section_inner {
        padding: 0 10px 10px;
        max-width: 100%;
    }
}

.btn_base {
    width: 350px;
    text-align: center;
    padding: 20px 0;
}
@media (max-width: 480px) {
    .btn_base {
        width: 60%;
    }
}
.btn_base a {
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 20px;
    display: inline-block;
    min-width: 100px;
    background-color: #ff8b3e;
    border: 1px solid #ff8b3e;
    border-radius: 10px;
}

.btn_base a:hover {
    color: #fff;
    background-color: #c96c2f;
    border-color: #c96c2f;
}
@media (max-width: 480px) {
    .btn_base a {
        display: block;
    }
    .btn_base a:hover {
        background: #ff8b3e;
    }
}

/*フォーム用css*/
span.required{
    background: #269ADD;
    color: #FFF;
    border-radius: 3px;
    display: inline-block;
    padding: 2px 5px;
    line-height: 1;
    font-size: 12px;
}
.table_form {
    background: #fff;
    padding: 25px;
    margin: 25px auto 30px;
}
@media (max-width: 480px) {
    .table_form {
        padding: 0;
        margin: 0;
        width: 100%;
        background: none;
    }
}
.table_form table {
    border: 2px #DDD solid;
    width: 100%;
}
@media (max-width: 480px) {
    .table_form table {
        border: 0;
    }
}
.table_form table td,
.table_form table th {
    font-weight: normal;
    border: 2px #DDD solid;
    padding: 20px 16px;
}

.table_form .list-table {
    border: none;
}

.table_form .list-table th,
.table_form .list-table td {
    font-weight: normal;
    border: none;
    padding: 20px 16px;
}

.apply-summary .list-table td {
    font-size: 13px;
}

.st-summary .list-table td {
    font-size: 12px;
}
@media (max-width: 480px) {
    .table_form .list-table tr {
        display: flex;
    }
    .table_form .list-table td {
        font-weight: normal;
        padding: 0;
        border: none;
    }
    .table_form .list-table .list-title {
        width: 30%;
    }
    .table_form .list-table .list-content {
        width: 70%;
    }
    .table_form table th,
    .table_form table td {
        font-weight: normal;
        padding: 0 15px;
        display: block;
        border: none;
    }
    .table_form table td {
        margin: 0 auto 1em auto;
    }
    .apply-area{
        margin-top: -10px;
        background-color: #ffffff;
    }
}
.table_form table tbody th {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    width: 35%;
    background: #f3f3f3;
    padding: 20px 60px 20px 16px;
    position:relative;
}
@media (max-width: 480px) {
    .table_form table tbody th {
        padding: 0 15px;
        width: 100%;
        border: none;
        background: none;
        vertical-align: middle;
        text-align: left;
        display: block;
    }
    .table_form.form_check table tbody th {
        background: #f3f3f3;
        padding: 5px 10px;
    }
    .table_form.form_check table tbody td {
        background: #ffffff;
        padding: 10px;
    }
    .table_form.form_check table tbody .list-table td {
        padding: 0;
    }
}
.table_form table tbody tr.kiyaku_back td .kiyaku {
    background: #fff;
    padding: 10px;
    height: 150px;
    overflow-y: scroll;
    margin-bottom: 15px;
    border: 1px #DDD solid;
}
@media (max-width: 480px) {
    .table_form table tbody tr.kiyaku_back th {
        text-align: center;
        background: #efefef;
        padding: 10px;
    }
    .table_form table tbody tr.kiyaku_back td {
        background: #efefef;
        padding: 0 10px 10px;
    }
    .table_form table tbody tr.kiyaku_back td .kiyaku {
        margin-bottom: 5px;
    }
    .table_form.form_check table tbody tr.kiyaku_back th {
        text-align: left;
        padding: 5px 10px;
    }
    .table_form.form_check table tbody tr.kiyaku_back td {
        background: #fff;
        padding: 10px;
    }
}

.form input,
.form textarea {
    color: #444;
    font-size: 1.5rem;
    font-family: "メイリオ";
    letter-spacing: 1px;
    line-height: 1.4;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}
/* iPhone */
.iPhone label.date{
    font-size: 1.5rem;
    line-height: 1.4;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0;
    background: #fff;
    width: 200px;
    height: 43px;
    display: block;
    position: relative;
}
.iPhone label.date::before{
    color: #333;
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f133";  /* FontAwesome Webアイコンここに設定 */
    top: 10px;
    right: 10px;
}
.iPhone input[type="date"] {
    line-height: 1.4;
    border: none;
    background: none;
    width: 200px;
    height: 43px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root label.date{
        font-size: 1.5rem;
        line-height: 1.4;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 0;
        background: #fff;
        width: 200px;
        height: 43px;
        display: block;
        position: relative;
    }
    _::-webkit-full-page-media, _:future, :root label.date input[type="date"]::before{
        color: #999;
        position: absolute;
        content: "年/月/日";
        top: 10px;
        left: 10px;
    }
    _::-webkit-full-page-media, _:future, :root input[type="date"] {
        line-height: 1.4;
        border: none;
        background: none;
        width: 200px;
        height: 43px;
        padding: 10px;
        box-sizing: border-box;
    }
    _::-webkit-full-page-media, _:future, :root label.date input[type="date"]:not(:placeholder-shown)::before{
        content: none;
    }
}

@media (max-width: 480px) {
    .form input[type="text"],
    .form input[type="email"],
    .form textarea {
        width: 100%;
    }
}
.form select {
    color: #444;
    line-height: 1.4;
    font-size: 1.5rem;
    border: 1px solid #ccc;
    padding: 10px 27px 10px 13px;
    width: 100%;
    background: url("../img/select-arrow.png") no-repeat center right 7px/10px #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form .kiyaku_box {
    margin: 5px 0;
    padding: 10px;
    background-color: #DDD;
    text-align: center;
}

.form .kiyaku_box label {
    margin-top: 0;
    margin-bottom: 5px;
    display: inline-block;
}
.form .kiyaku_box label input[type="checkbox"]{
    zoom: 1.5;
    margin-right: 3px;
    vertical-align: middle;
}
.form label.error{
    padding: 2px 0;
    color: #be0000;
    display: block;
}

.form .form60 {
    width: 60%;
}
@media (max-width: 480px) {
    .form .form60 {
        background-color: #E2E1E2;
    }
}
.form .form90 {
    width: 93%;
}
@media (max-width: 480px) {
    .form .form90 {
        width: 100%;
    }
}
.form .date_time01:after,
.form .date_time02:after,
.form .date_time03:after {
    content: '';
    display: block;
    clear: both;
}
.form dl{
    float:left;
    margin-right:20px;
}
.submit_area{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
}

.apply-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    text-align: center;
    padding: 5px;
    background-color: #fff;
}
.form input[type="submit"],
.form input[type="button"] {
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 40px;
    margin: 0 20px;
    color: #fff;
    background-color: #FBA948;
    border: none;
    border-radius: 8px;
    width: 320px;
    position: relative;
}

.form input[type="submit"]:disabled,
.form input[type="button"]:disabled {
    color: #fff;
    background-color: #AAA;
}

.form span.wrap_btn{
    position: relative;
}
@media (max-width: 480px) {
    .form span.wrap_btn {
        width: 90%;
    }
    .form input[type="submit"],
    .form input[type="button"] {
        max-width: 100%;
        margin: 0;
    }
}

.form span.wrap_btn::before{
    width: 8px;
    height: 12px;
    background: url(../img/arrow.png) top left /contain no-repeat;
    position: absolute;
    content: "";
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.form span.wrap_btn.wrap_btn_back::before{
    background: url(../img/arrow2.png) top left /contain no-repeat;
    right: auto;
    left: 40px;
}
@media (max-width: 480px) {
    .form span.wrap_btn::before{
        right: 15px;
    }
    .form span.wrap_btn.wrap_btn_back::before{
        left: 15px;
    }
}
.form input[type="submit"]:hover,
.form input[type="button"]:hover{
    color: #fff;
    background-color: #c96c2f;
}
.form input[type="submit"]:disabled,
.form input[type="button"]:disabled{
    color: #fff;
    background-color: #AAA;
}
.form input[type="button"].back {
    color: #fff;
    background-color: #428bca;
}
.form input[type="button"].back:hover{
    color: #fff;
    background-color: #336c9e;
}

@media (max-width: 480px) {
    .form span.wrap_btn.wrap_btn_back {
        margin-bottom: 8px;
    }
    .form input[type="submit"],
    .form input[type="button"] {
        border-radius: 0;
        -webkit-box-sizing: content-box;
        -webkit-appearance: button;
        appearance: button;
        border: none;
        border-radius: 8px;
        box-sizing: border-box;
        cursor: pointer;
    }
}
@media (max-width: 480px) {
    .form input[type="submit"]::-webkit-search-decoration,
    .form input[type="button"]::-webkit-search-decoration {
        display: none;
    }
}
@media (max-width: 480px) {
    .form input[type="submit"]:focus,
    .form input[type="button"]:focus {
        outline-offset: -2px;
    }
}