@charset "UTF-8";

body {
    min-width: 320px;
    font-family: 'メイリオ', meiryo, sans-serif;
    /*font-family: "TsukuMinPr6N-L", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;*/
    white-space: normal;
    /*background-color: rgb(245, 239, 230);*/
}

div, input, textarea, select, button {
    white-space: normal;
}

section {
    position: relative;
    text-align: left;
}

button, input[type=button] {
    border: 0;
    background-color: rgba(0,0,0,0);
}

button:hover, input[type=button]:hover {
    cursor: pointer;
    opacity: 0.7;
}

.headerLogo {
    width: 170px;
}

.linear {
    display: inline-block;
}

:placeholder-shown {
    color: #bbbbbb; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    color: #bbbbbb; }

/* Firefox 18- */
:-moz-placeholder {
    color: #bbbbbb; opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
    color: #bbbbbb; opacity: 1; }

/* IE 10+ */
:-ms-input-placeholder {
    color: #bbbbbb; }

h1.shop-name {
    font-size: 36px;
    margin-bottom: 50px;
}

#step {
    width: 100%;
    height: 9.4vw;
    border: black 1px solid;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin: 0;
}

#step li {
    position: relative;
}

#step .stepMessage {
    width: 20.833vw;
    height: 100%;
}

#step .stepMessage .line {
    position: absolute;
    /*background-color: #ffb5da;*/
    background-color: rgb(249, 150,162);
    left: 0; right: 0; bottom: 3.5vw;
    height: 1vw;
    margin: auto;
}

#step .horizontalLines, #step .verticalLines {
    width: 9.4vw;
    height: 9.4vw;
    display: flex;
    justify-content: space-between;
}

#step .horizontalLines {
    flex-direction: column;
}

#step .horizontalLines .line, #step .verticalLines .line {
    background-color: black;
}

#step .horizontalLines .line {
    height: 1.285vw;
    width: 100%;
}

#step .verticalLines .line {
    width: 1.285vw;
    height: 100%;
}

#step .stepSharp {
    position: absolute;
    left: 0.7vw;
    top: 0.7vw;
    color: #d6d6d6;
    font-size: 4.1vw;
}

#step .stepNumber {
    position: absolute;
    left: 2.6vw;
    top: 0;
    color: #d6d6d6;
    font-size: 5.5vw;
}

#step .stepText {
    position: absolute;
    display: table;
    font-size: 2.2vw;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    margin: auto;
    text-align: center;
}

#step .stepText span {
    display: table-cell;
    vertical-align: middle;
}

.iconCheck {
    width: 24px;
    height: 24px;
    display: none;
}

textarea {
    font-size: 16px;
    margin: 0;
    padding: 10px;
    border-radius: 45px;
    background-color: white;
    border: 3px solid #9b9b9b;
    color: #3f3f3f;
    width: calc(100% - 30px);
    height: 62px;
}

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date] {
    font-size: 20px;
    margin: 0;
    padding: 4px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
    color: #3f3f3f;
    width: calc(100% - 14px);
    height: 32px;
    vertical-align: middle;
}

select, button, input[type=button] {
    font-size: 20px;
    margin: 0;
    padding: 4px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
    color: #3F3F3F;
    width: 100%;
    min-height: 40px;
}

select {
    vertical-align: middle;
    height: 46px;
    border-radius: 4px;
}

.imageSquare:hover, .imageButton:hover, .squareButton:hover, .normalButton:hover,
.switchLeft:hover, .switchCenter:hover, .switchRight:hover,
.textButton:hover {
    cursor: pointer;
    background-color: #fff5e5;
}

.headerContainer {
    position: relative;
    width: 100%;
    max-width: 1024px;
    min-width: 320px;
    height: 80px;
    margin: auto;
}

.headerContainer img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.container {
    width: 100%;
    max-width: 1024px;
    min-width: 320px;
    margin: auto;
}

.item {
    position: relative;
    height: 33px;
    font-weight: bold;
    color: #514597;
}

.item img {
    position: absolute;
    width: 61px;
    height: 33px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.itemName {
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    position: absolute;
    font-size: 20px;
    left: 70px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.infoText {
    font-size: 12px;
    text-align: left;
    color: #f996a2;
}

.required {
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
    background-color: #f996a2;
}

.ok {
    height: 32px;
    color: white;
    border-radius: 8px;
    padding: 8px 16px;
    background-color: #92c4ff;
}

.square {
    width: 138px;
    height: 138px;
}

.square img {
    width: 32px;
}

.switchLeft, .switchCenter, .switchRight {
    position: relative;
    text-align: center;
    border: 3px solid #9b9b9b;
    height: 40px;
    background-color: white;
}

.switchLeft {
    border-radius: 4px 0 0 4px;
}

.switchCenter {
    border-radius: 0;
}

.switchRight {
    border-radius: 0 4px 4px 0;
}

.switchLeft p, .switchCenter p, .switchRight p {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    margin: auto;
}

.widthHalf {
    display: inline-block;
    width: calc(100% / 2 - 10px) ;
}

.widthOneThirds {
    display: inline-block;
    width : calc(100% / 3 - 10px) ;
}

.widthQuarter {
    display: inline-block;
    width : calc(100% / 4 - 12px) ;
}

.widthOneFifth {
    display: inline-block;
    width : calc(100% / 5 - 6px) ;
}

.squareButton {
    display: inline-block;
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
}

.squareButton p {
    color: #3F3F3F;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 40px;
}

.squareButton .iconCheck, .imageSquare .iconCheck, .imageButton .iconCheck, .textButton .iconCheck {
    position: absolute;
    left: 8px;
    top: 8px;
}

.imageSquare {
    display: inline-block;
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
}

.imageButton {
    display: inline-block;
    position: relative;
    min-width: 110px;
    height: 110px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
    outline-offset: 1px;
}

.textButton {
    display: inline-block;
    position: relative;
    min-width: 110px;
    height: 110px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
    outline-offset: 1px;
}

.textButton p {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 24px;
    display: table;
    width: 100%;
    height: 100%;
}

.textButton p span {
    display: table-cell;
    vertical-align: middle;
}

.inputContainer {
    display: flex;
    flex-wrap: wrap;
}

.nittei .inputContainer input {
    margin-bottom: 10px;
}

.iconImage {
    position: absolute;
    height: 46px;
    left: 0;
    right: 0;
    top: 20px;
    margin: auto;
}

.imageSquare p, .imageButton p {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: auto;
}

.imageButton {
    display: inline-block;
    position: relative;
    height: 110px;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
}

.normalButton {
    display: inline-block;
    position: relative;
    border-radius: 4px;
    background-color: white;
    border: 3px solid #9b9b9b;
    height: 40px;
}

.normalButton p {
    text-align: center;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin: auto;
}

.normalButton .iconCheck, .switchLeft .iconCheck, .switchCenter .iconCheck, .switchRight .iconCheck {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    margin: auto;
}


table, tr, th, td {
    font-weight: normal;
    border: 0;
    border-spacing: 0;
    white-space: normal;
}

#jyusyo th {
    width: 130px;
    height: 70px;
}

#jyusyo table {
    width: 100%;
}

#jyusyo td {
    /*width: calc(100% - 130px);*/
}

#confirm h2, #confirm h3 {
    text-align: center;
}

#confirm h3 {
    background-color: rgb(249, 150,162);
    color: white;
    font-weight: bold;
    font-size: 18px;
}

#confirm pre {
    /*overflow: scroll;*/
    white-space: pre-line;
    font-size: 14px;
    font-family: 'メイリオ', meiryo, sans-serif;
}

.overScroll {
    padding: 10px;
    border: #d3d3d3 3px solid;
    overflow: scroll;
}

pre.kojin {
    height: 100px;
}

#submit div {
    max-width: 750px;
    height: 145px;
    position: relative;
    margin: auto;
    background-color: #f5a623;
}

#submit p {
    color: white;
    text-align: center;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    /*width: 320px;*/
    height: 48px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#submit img {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
}

#submit div:hover {
    cursor: pointer;
    opacity: 0.5;
}

#submit_container {
    max-width: 800px;
    display: flex;
    position: relative;
    margin: 50px auto;
}


#entry_back {
    /*display: inline-block;*/
    width: 40%;
    justify-content: center;
    align-items: center;
    background-color: #d7d7d7;
    color: rgb(102, 102, 102);
    font-size: 24px;
    text-align: center;
    padding: 40px 0;
}

#entry_submit {
    /*display: inline-block;*/
    justify-content: center;
    align-items: center;
    width: 60%;
    background-color: #f5a623;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    padding: 40px 0;
}

#entry_back:hover, #entry_submit:hover {
    opacity: 0.7;
    cursor: pointer;
}

#entry_submit img, #entry_back img {
    width: 18px;
    height: 18px;
}
/* 複数選べる */
.multipleChoices {
    font-size: 18px;
}

/* 1つ選ぶ　*/
.singleChoice {
    font-size: 18px;
}

.checked {
    box-shadow: inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #e5f1ff;
}

.checked:hover {
    background-color: #e5ffef;
}

.unchecked {
    box-shadow: inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffeaec;
}

table {
    font-size: 16px;
    border: #aaaaaa solid 1px;
    border-collapse: collapse;
    width: 100%;
}

table tr, td, th {
    border: #aaaaaa solid 1px;
    border-collapse: collapse;
}


table tr {
    height: 64px;
}

table th {
    width: 20%;
    background: #eee;
    text-align: left;
    padding: 20px;
}

table td {
    text-align: left;
    padding: 8px;
    width: auto;
    background-color: white;
}

.lastConfirm h2, .lastConfirm h3 {
    text-align: center;
}

.lastConfirm h3 {
    background-color: #514597;
    color: white;
    font-weight: bold;
}

.lastConfirm pre {
    white-space: pre-line;
    font-size: 14px;
    font-family: 'メイリオ', meiryo, sans-serif;
}

#genzainohoken-list button {
    text-align: left;
}

.bgLightBlue {
    background-color: #f4fdff;
}

#hokenKanyuOtherContainer {
    max-width: 480px;
    margin: auto;
}

.modalInputButton {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 40px;
    background-color: #fff1da;
}

.datepicker {
    width: 200px !important;
}

.nitteiTime {
    width: 214px;
}

#entry_complete {
    width: 100%;
    height: 100vh;
    position: relative;
}

#entry_completeContainer {
    width: 100%;
    height: 44.4vw;
    position: absolute;
    bottom: 0; top: 0;
    margin: auto;
}

#entry_complete_middle {
    display: flex;
    justify-content: center;
    align-self: center;
    align-content: center;
}

#entry_complete_actor {
    position: relative;
    width: 23.8vw;
    height: 27.083vw;
}

#entry_complete_actor img {
    position: absolute;
    left: 0; bottom: 0;
}

#entry_complete h2 {
    text-align: center;
}

#entry_complete_middle img {
    width: 23.8vw;
    height: 27.083vw;
}

#entry_complete_middle span {
    width: 57.6vw;
    font-size: 1.25vw;
}

#entry_complete_goTop {
    color: white;
    background-color: #fc8d32;
    text-align: center;
    font-size: 3.2vw;
}

.vMiddle {
    display: table;
    height: 27.083vw;
}

.vMiddle span {
    display: table-cell;
    vertical-align: middle;
}

.fukidashi {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.fukidashi img {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: auto;
}

.fukidashi .Rectangle {
    color: white;
    font-size: 16px;
    display: block;
    position: relative;
    border-radius: 8px;
    background-color: #f996a2;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    #entry_completeContainer {
        position: initial;
    }
    #entry_complete_actor {
        display: none;
    }
    #entry_complete_goTop {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        right: 0;
        height: 17vw;
        font-size: 5vw;
        align-items: center;
        justify-content: center;
    }
    #entry_complete h2 {
        margin-top: 5.7vw;
        margin-bottom: 5.7vw;
        font-size: 7.8vw;
    }
    .vMiddle {
        height: auto;
        width: 80%;
    }
    #entry_complete_middle span {
        font-size: 2.9vw;
    }
    #entry_complete {
        height: auto;
    }

}

#soudan .widthQuarter {
  max-width: calc(100% / 4 - 11px);
}

#soudan textarea, #kikkake textarea, #kininaru textarea {
  max-width: calc(100% - 27px);
}

#kikkake .widthHalf, #kininaru .widthHalf {
  max-width: calc(100% / 2 - 9px);
}

@media (max-width: 704px) {
    th, td {
        font-size: 12px;
    }
    table th {
        padding: 8px;
    }
}

@media screen and (max-width: 740px) {
    #course .widthHalf {
        width: calc(100% - 9px);
    }
}

@media (max-width: 530px) {
    #submit_container {
        margin-top: 20px;
    }
    #entry_submit, #entry_back {
        padding: 20px 0;
        font-size: 14px;
    }
    #entry_submit img, #entry_back img {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 824px) {
  #kikkake .widthHalf, #kininaru .widthHalf {
    max-width: calc(100% - 9px);
    width: calc(100% - 9px);
  }
}

@media (max-width: 450px) {
  #kikkake .widthHalf p, #kininaru .widthHalf p {
    font-size: 14px;
  }
  #submit p {
    font-size: 20px;
  }
  #submit div {
    height: 100px;
  }
  .itemName {
    font-size: 16px;
  }
}

@media (max-width: 650px) {
  #soudan .imageButton p {
    font-size: 12px;
  }
}

@media (max-width: 482px) {
  .choices_four {
    max-width: 320px;
  }
}

#seimei .widthHalf {
  width: calc(100% / 2 - 3px);
}

#seibetu .widthHalf, #haigusya .widthHalf, #genzainohoken .widthHalf,
#nyuinreki .widthHalf, #tyokkin .widthHalf {
  width: calc(100% / 2 - 6px);
}

#seinengappi .widthHalf, #haigusya-seinengappi .widthHalf {
  width: 50%;
}
#seinengappi .widthQuarter, #haigusya-seinengappi .widthQuarter {
  width: 24.3%;
}

@media (max-width: 600px) {
  .itemName {
    font-size: 16px;
  }
  #course .textButton p {
      font-size: 20px;
  }
  #confirm h3 {
      font-size: 14px;
  }
  h1.shop-name {
      font-size: 20px;
  }
}

@media (max-width: 522px) {
  #submit p {
    font-size: 16px;
  }
  #submit div {
    height: 100px;
  }

}

@media (max-width: 500px) {
  #seinengappi .widthHalf, #haigusya-seinengappi .widthHalf {
    width: 100%;
  }
  #seinengappi .widthQuarter, #haigusya-seinengappi .widthQuarter {
    width: calc(100% / 2);
  }
}

@media (max-width: 400px) {
  #okosama .singleChoice p {
    font-size: 14px;
  }
  #jyusyo th {
    width: 80px;
    padding: 10px;
    font-size: 12px;
  }
}

#menuButton {
  display: none;
}

@media all and (-ms-high-contrast: none) {
    .flatpickr-current-month input.cur-year {
        width: 90px;
    }
    .flatpickr-current-month {
        padding: 0;
    }
}