.hold-header{
    width:980px;
}

.mod-form p.mod-error {    
    color: #e6003e; 
    font-weight: 500;
    padding-bottom: 10px;
}
.color-strong {
color: #e6003e !important;
}
select {
    height: 40px;
}

#trial-menu .box {
    display: inline-block;
}

#trial-menu .image {
    width: 118px;
    height: 118px;
}

.menu_image {
    width: 50%;
    height: 100%;
    border-radius: 5%;
}

.menu_detail {
    text-align: left;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 737px) {
    #trial-menu .box {
        display: inline-block;
        width: 32%;
    }

    #trial-menu .image {
        width: 100%;
        height: 100%;
        margin-bottom: 3px;
    }

    .menu_image {
        width: 100%;
    }

    .menu_detail {
        padding: 15px 0 0 0;
    }
}

/* Radio Button
   ========================================================================== */
.mod-radio input[type=radio] {
    display: none;
}

.mod-radio label {
    box-sizing: border-box;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    margin: 0 20px 8px 0;
    padding: 12px 12px 12px 42px;
    width: 100%;
    border-radius: 8px;
    background-color: #f6f7f8;
    vertical-align: middle;
    cursor: pointer;
}

.mod-radio label:hover {
    background-color: #FFD4E1;
}

.mod-radio label:hover:after {
    border-color: #ED8AB6;
}

.mod-radio label:after {
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
    content: '';
}

.mod-radio label:before {
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ED8AB6;
    content: '';
    opacity: 0;
}

input[type=radio]:checked+label:before {
    opacity: 1;
}

input[type=radio]:checked+label {
    background-color: #FFD4E1;
}

input[type=radio]:disabled+label:before {
    opacity: 0;
}

input[type=radio]:disabled+label:after {
    opacity: 0;
}

input[type=radio]:disabled+label {
    background-color: #dbdbdb;
}

/*mk記述*/
.logo-height {
    height: 25px !important;
}

@media screen and (max-width: 701px) {
    .logo-height {
        height: 20px !important;
    }
}

/*font*/
.f300 {
    font-weight: 300;
}

.f400 {
    font-weight: 400;
}

.f500 {
    font-weight: 500;
}

.f600 {
    font-weight: 600;
}

.f700 {
    font-weight: 700;
}

.f800 {
    font-weight: 800;
}

.zen {
    font-family: "Overpass","Zen Kaku Gothic New", sans-serif;
}

/*color*/
.pink {
    color: #C97A9B
}

.gray {
    color: #b1b1b2
}

/*header navi*/
#step {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
}

#step div {
    position: relative;
    width: 40%;
}

#step p {
    font-weight: 600;
    line-height: 1.2;
    display: grid;
    place-items: center;
    justify-content: center;
    align-items: center;
}

.step-nav1,
.step-nav2,
.step-nav3 {
    font-size: .9rem;
    height: 100%;
}

.step-nav1 {
    clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
    background-color: #f4f4f4;
    color: #b1b1b2;
    padding: 12px 20px 8px 10px;
}

.step-nav2 {
    clip-path: polygon(8% 50%, 0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
    background-color: #F4E8F1;
    color: #C97A9B;
    padding: 12px 10px 8px 15px;
}

.step-nav3 {
    clip-path: polygon(8% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #f4f4f4;
    color: #b1b1b2;
    padding: 12px 10px 8px 20px;
}

#step .no-on,
#step .no-off {
    position: absolute;
    font-family: 'Overpass', sans-serif;
    top: -20px;
    font-size: 2rem;
    z-index: 2;
}

#step .no-on {
    left: 8px;
}

#step .no-off {
    left: 20px;
}

@media screen and (max-width: 701px) {
    #step {
        padding-top: 0;
    }
    #step div {
        width: 35%;
    }

    .step-nav1,
    .step-nav2,
    .step-nav3 {
        font-size: .75rem;
        letter-spacing: -.03rem;
        height: 70%;
    }

    .step-nav1 {
        clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    }

    .step-nav2 {
        clip-path: polygon(15% 50%, 0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    }

    .step-nav3 {
        clip-path: polygon(15% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/*h1*/
.mod--h1 {
    font-size: 17px;
    line-height: 1.3;
    padding: 5px 0 10px;
}

/*h2*/
.mod--h2 {
    font-size: 1rem;
    letter-spacing: 0;
    padding: 30px 0 10px;
    color:#888888;
}

@media screen and (max-width: 701px) {
    .mod--h2 {
        margin: 18px 0 10px;
        padding: 0;
    }
}

/*h3*/
.mod--h3 {
    position: relative;
    display: flex;
    top: 7px;
    font-weight: 600;
    font-size: 130%;
    color: #C18DA3;
}

/*notes*/
.notes {
    border: 1.5px solid #dcdddd;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.notes p {
    font-size: .7rem;
}

@media screen and (max-width: 701px) {
    .notes {
        margin-bottom: 15px;
    }

    .notes p {
        font-size: .6rem;
    }
}

/*#menu*/
#menu {
    background-color: #F4E8F1;
    padding: 10px 20px 15px;
}

@media screen and (max-width: 701px) {
    #menu {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }
}

div .menu--detail {
    display: flex;
}

div .menu--detail p {
    font-size: 14px;
}

@media screen and (max-width: 701px) {
    div .menu--detail {
        flex-direction: column;
    }
}

/*step2*/
.step2-space-between {
    display:flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
#studio-area {
    display:none;
}

/*select*/
select {
    border: solid 2.5px #d1b0bd;
    border-radius: 50px;
    padding: 2px 30px 2px 10px;
    width: 245px;
    color: #555;
    background-color: #fff;
}

/*studio*/
#studio_map {
    background-color: #c18da3;
}

@media screen and (max-width: 701px) {
    #studio_map {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }
}

.studio--detail {
    margin: 0 0 15px;
    color: #fff;
    padding: 10px;
    font-weight: 500;
}

/*schedule*/
.schedule-nav1,.schedule-nav2 {
    background-color: #F4E8F1;
    color: #C97A9B;
    width: 15%;
    font-weight: 600;
    font-size: 160%;
    text-align: center;
}
.schedule-nav1 {
    clip-path: polygon(0% 50%, 15% 0%, 100% 0%, 100% 100%, 15% 100%);
    padding: 10px 5px 5px 15px;
}
.schedule-nav2 {
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    padding: 10px 15px 5px 5px;
}

.schedule-nav1 a {
    text-decoration: none;
    color: #b1b1b2;
}

.schedule-nav2 a {
    text-decoration: none;
    color: #c18da3;
}
.schedule-nav3 {
    padding: 0 25px;
    font-size: 22px;
    font-weight: 500;
    color: #888888;
}

/*calendar*/
.calender-header {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
table,
td,
th {
    border: 2px solid #d3d4d4;
    border-collapse: collapse;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

table{
    text-align: center;
}

td,
th {
    padding: 3px;
    width: 30px;
    height: 50px;
}

th {
    background: #fff;
}

#calendar thead{
    color:#888888;
}

.month {
    border-radius: 20px 20px 0 0;
}

.month th {
    height: 25px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: #b1b1b2;
    padding: 8px 0 0;
}

.week th {
    height: 10px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    padding: 5px 0 2px;
}

.day th {
    height: 10px;
    font-weight: 500;
    background-color: #fff;
    line-height: 1;
    padding: 5px 0 2px;
    font-size: 15px;
}

.sut {
    color: #568DD1 !important;
}

.sun {
    color: #DB6771 !important;
}

.hol {
    color: #DB6771 !important;
}

.time td {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

.time td span {
    font-size: 180%;
    font-weight: 700;
}

.time .pk {
    background-color: #fff;
}

.time .pk:hover {
    background-color: #eadee7;
}

.time .gy {
    background-color: #f4f4f4;
}

.time .gy span {
    border: solid 1px;
    border-radius: 8px;
    padding: 1px 5px;
    font-size: 110%;
    font-weight: 500;
    line-height: 2;
}

.time td a {
    text-decoration: none;
    display: block;
}

.time td span.on {
    color: #c18da3;
}

.time td span.off {
    color: #b1b1b2;
}

.time p {
    font-size: 13px;
    font-weight: 500;
}

.ng {
    background-color: #f4f4f4;
    color: #b1b1b2;
}

/*default*/
input,
textarea,
select {
    font-size: 125%;
    font-family: initial;
}

.studio--detail {
    font-size: 130%;
}
a {
    color: #555;
}
@media screen and (max-width: 701px) {
    body{
        background-color: #eadee7;
        border-top: 0;
    }
}
@media screen and (max-width: 701px) {
    #content {
        padding: 18px 10px 10px;
        background-color: #fff;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 701px){
  .hold-header{
    width:100%!important;
  }
}
.campaign-label {
    color: #fff;
    background-color: #d2264d;
    display: inline-block;
    padding: 1px 6px;
    margin-left: 20px;
    letter-spacing: .05rem;
    font-size: 90%;
    font-weight: 500;
}
.campaign-label + p {
   font-weight: 500;
}
.campaign-label2 {
    color: #ffffff;
    background-color: #d2264d;
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: -0.2px;
    font-size: 13px;
}

.mod-form select{
    margin: 0 0 5px;
}


/* ▼ エリア／スタジオのプルダウン用・デザイン指定 */

/* ラッパー(dl)を矢印アイコンの土台にする */
.step2-space-between dl {
    position: relative;
}

/* ネイティブの矢印を消す + 右側に余白を作る */
.step2-space-between dl select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 52px; /* 右の丸アイコン分の余白 */
}

/* IE 用（必要なら有効化）
select::-ms-expand {
    display: none;
}
*/

/* 右側の丸＋矢印画像（エリア/スタジオ共通） */
.step2-space-between dl::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 21px;
    transform: translate(0, -50%);
    width: 15px;
    height: 12px;
    background-color: #c18da3;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    pointer-events: none;
}

/* ==============================================
   ▼ 他スタジオ候補（比較エリア）のスタイル
   ============================================== */

/* 比較エリア全体 */
#compare-area {
    margin-top: 30px;
    border-top: 1px dashed #d3d4d4;
    padding-top: 20px;
}

/* ボタンのラッパー */
.compare-btn-wrap {
    text-align: center;
    margin-bottom: 20px;
}

/* 「他スタジオの候補をみる」ボタン */
#btn-show-sub-studio {
    width: 80%;
    max-width: 300px;
    padding: 12px;
    border-radius: 30px;
    border: 2px solid #d3d4d4;
    background: #fff;
    color: #888;
    font-weight: 600;
    cursor: pointer;
}

/* サブスタジオ情報（背景色など） */
#sub-studio-info {
    background-color: #c18da3;
}

/* サブカレンダーのヘッダー */
#calendar-header-sub {
    margin-top: 15px;
}

/* 初期表示制御（JSで表示切り替えするためCSSでは非表示にしておく） */
#sub-studio-wrapper,
#sub-studio-info,
#calendar-header-sub {
    display: none;
}

/* ==============================================
   ▼ スマホ表示（幅701px以下）の調整
   ============================================== */
@media screen and (max-width: 701px) {
    
    /* 「他スタジオの候補をみる」ボタンの文字を少し大きく */
    #btn-show-sub-studio {
        font-size: 16px;
    }

    /* 「満席」の文字を小さくして改行を防ぐ */
    .time .gy span {
        font-size: 90%;      /* PC(110%)より小さく設定 */
        padding: 4px 4px 2px;    /* 余白を少し詰める */
        white-space: nowrap; /* 強制的に改行させない */
    }
}