@charset "UTF-8";
/* CSS Document */
html {
    font-size: 62.5%;
}
body {
    width: 100%;
    height: 100%;
    font-size: 1.6em;
    line-height: 1.6;
}
*,
*:before,
*:after {
    box-sizing:border-box;
}
/* ------------------------------------- /
/   共通
/* ------------------------------------- */
.taC {
    text-align: center;
}
.taR {
    text-align: right;
}
.fwM {
    font-weight: 500;
}
.fwSB {
    font-weight: 600;
}
.fwB {
    font-weight: 700;
}
.dsp-none {
    display: none !important;
}
.pc-none {
    display: none;
}
.pc-none768 {
    display: none;
}
.pc-none__inline {
    display: none;
}
.pc-none__inline768 {
    display: none;
}
.pc-none__inline1200 {
    display: none;
}
.inner {
    width: 90%;
    margin: 0 auto;
}
.inner-narrow {
    width: 90%;
    margin: 0 auto;
}
@media screen and (max-width:1200px){
.pc-none__inline1200 {
    display: inline;
}
.sp-none1200 {
    display: none;
}
}
@media screen and (max-width:768px){
.pc-none768 {
    display: block;
}
.pc-none__inline768 {
    display: inline;
}
.sp-none768 {
    display: none;
}
}
@media screen and (max-width:600px){
.pc-none {
    display: block;
}
.pc-none__inline {
    display: inline;
}
.sp-none {
    display: none !important;
}
}

/* ------------------------------------- /
/   サイトカラー、フォント
/* ------------------------------------- */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    color: #151515;
    background-color :#333333;
    position: relative;
}
main {
    width: 100%;
    padding: 120px 0 0;
}
@media screen and (max-width:767px){
main {
    padding: 0;
}
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
::selection {
    background: #303030;
    color: #fff;
}

:root {
    --font-jp: "Noto Sans JP", sans-serif;
    --font-en: "Source Sans 3", sans-serif;
    --color-black: #000;
    --color-red: #E35050;
    --color-pink: #FF4081;
    --color-brown: #795548;
    --color-orange: #FFCC80;
    --color-yellow: #F4B816;
    --color-green: #66BB6A;
    --color-navy: #3949AB;
    --color-blue: #0277BD;
    --color-purple: #6557B1;
    --color-ocean: #26A69A;
    --color-gray: #E3E4E6;
}
.font-jp {
    font-family: var(--font-jp);
}
.font-en {
    font-family: var(--font-en);
    font-weight: 500;
}
.bg-black {background-color: var(--color-black);}
.bg-gray {background-color: var(--color-gray);}
.bg-red {background-color: var(--color-red);}
.bg-pink {background-color: var(--color-pink);}
.bg-brown {background-color: var(--color-brown);}
.bg-orange {background-color: var(--color-orange);}
.bg-yellow {background-color: var(--color-yellow);}
.bg-green {background-color: var(--color-green);}
.bg-navy {background-color: var(--color-navy);}
.bg-blue {background-color: var(--color-blue);}
.bg-purple {background-color: var(--color-purple);}
.bg-ocean {background-color: var(--color-ocean);}
.bg-white {background-color: #fff;}
.color-red {color: var(--color-red);a{color: var(--color-red);}}
.color-pink {color: var(--color-pink);a{color: var(--color-pink);}}
.color-brown {color: var(--color-brown);a{color: var(--color-brown);}}
.color-orange {color: var(--color-orange);a{color: var(--color-orange);}}
.color-yellow {color: var(--color-yellow);a{color: var(--color-yellow);}}
.color-green {color: var(--color-green);a{color: var(--color-green);}}
.color-navy {color: var(--color-navy);a{color: var(--color-navy);}}
.color-blue {color: var(--color-blue);a{color: var(--color-blue);}}
.color-purple {color: var(--color-purple);a{color: var(--color-purple);}}
.color-ocean {color: var(--color-ocean);a{color: var(--color-ocean);}}
.color-white {color: #fff;a{color: #fff;}}

button {
    border: none;
    font-family: var(--font-jp);
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
}
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=date],
input[type=month],
input[type=time],
input[type=number],
textarea,
select {
    display: block;
    width: 100%;
    border: none;
    background: none;
    font-family: var(--font-jp);
    box-sizing: border-box;
    appearance: none;
}

/* ------------------------------------- /
/  dsp-wrapper
/* ------------------------------------- */
.dsp-wrapper {
    width: min(100%, 1120px);
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
}
*:has(.dsp-wrapper:nth-child(2)) {
    .dsp-wrapper:first-child {
        min-height: 0;
    }
}

/* ------------------------------------- /
/  header
/* ------------------------------------- */
header {
    display: block;
    width: 100%;
    background-color: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
.header_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: min(100%, 1140px);
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
    transition-duration: 0.4s;
    transform: translateX(-15px);
}
header.scroll .header_wrapper {
    padding: 5px 0;
}

.header_logo {
    display: block;
    width: min(100%, 288px);
    padding: 0 15px;
}
.header_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.header_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: min(100%, 684px);
    padding: 0 15px;
}
.header_nav_link {
    padding: 0 14px;
    font-size: 0.87em;
}
    .header_nav_link a {
        color: #fff;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
    }
    .header_nav_link a:hover {
        color: #d65050;
        text-decoration: none;
    }
.header_message {
    color: #999999;
    font-size: 0.6em;
    position: absolute;
    right: 10px;
    top: 7px;
}
.menu-trigger {
    display: none;
    width: 30px;
    height: 36px;
    padding: 4px 3px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 58px;
    z-index: 1;
    color: #fff;
    font-size: 2.7rem;
}
@media screen and (max-width:1199px){
.header_wrapper {
    width: min(100%, 940px);
}
.header_nav {
    width: min(100%, 564px);
}
}
@media screen and (max-width:1024px){
.header_wrapper {
    width: min(100%, 970px);
    transform: translateX(0);
}
.header_nav {
    display: block;
    width: min(100%, 582px);
    height: 410px;
    overflow: hidden;
    padding: 0;
    background-color: rgba(28, 28, 28, 0.9);
    position: absolute;
    right: -15px;
    top: 65px;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.header_nav.close {
    height: 0;
}
.header_nav_link {
    padding: 0;
    border-top: 1px solid #666666;
    font-size: 1.0em;
    line-height: 1.7;
}
    .header_nav_link a {
        display: block;
        padding: 20px 60px;
        transition-duration: 0s;
    }
    .header_nav_link a:hover {
        color: #fff;
        background-color: #333333;
    }
.header_message {
    width: min(100%, calc(582px - 15px));
    right: 0;
    top: 22px;
}
.menu-trigger {
    display: block;
}
}
@media screen and (max-width:991px){
.header_wrapper {
    width: min(100%, 750px);
}
.header_message {
    width: min(100%, 450px);
}
.menu-trigger {
    right: 0;
}
}
@media screen and (max-width:767px){
header {
    position: relative;
}
.header_wrapper {
    display: block;
    width: 100%;
}
header.scroll .header_wrapper {
    padding: 20px 0;
}
.header_logo {
    margin: 0 auto;
}
.header_message {
    width: 100%;
    margin: 3px auto 0;
    text-align: center;
    position: relative;
    right: 0;
    top: 0;
}
.menu-trigger {
    margin: 20px auto 0;
    position: relative;
    right: 0;
    top: 0;
}
.header_nav {
    width: 100%;
    right: 0;
    top: 185px;
}
}

/* ------------------------------------- /
/  footer
/* ------------------------------------- */
footer {
    background-color: #000;
}
.footer_wrapper {
    width: min(100%, 1170px);
    margin: 0 auto;
    padding: 20px 15px;
}
.footer_copyright {
    color: #666666;
    font-size: 0.8em;
    line-height: 2.0;
}

/* ------------------------------------- /
/   h2～h4
/* ------------------------------------- */
.front-h1 {
    font-size: 2.2rem;
    border-left: 6px var(--color-black) solid;
}
.front-h2 {
    font-size: 2.2rem;
    padding: 5px 0;
    border-top: 2px #505050 solid;
    border-bottom: 2px #505050 solid;
}
.front-h3 {
    font-size: 1.8rem;
    background-color: var(--color-gray);
    padding: 3px 10px;
}
.front-h4 {
    font-size: 1.8rem;
}

/* ------------------------------------- /
/   h1～h3
/* ------------------------------------- */
.front-text {
    font-size: 1.8rem;
    .fsS {
        font-size: 1.6rem;
    }
}
main.front {
    .det_box {
        width: min(100%, 1080px);
        font-size: 1.5rem;
        > p {
            margin-top: 10px;
        }
        > h1 {
            margin-top: 20px;
            font-size: 2.4rem;
            font-weight: 600;
        }
        > h2 {
            margin-top: 20px;
            font-size: 2.2rem;
            font-weight: 600;
        }
        > h3 {
            margin-top: 20px;
            padding: 0;
            border: none;
            letter-spacing: 0;
            font-size: 2.0rem;
            font-weight: 600;
        }
        > h4 {
            margin-top: 20px;
            font-size: 1.9rem;
            font-weight: 600;
        }
        > h5 {
            margin-top: 20px;
            font-size: 1.7rem;
            font-weight: 600;
        }
        > h6 {
            margin-top: 20px;
            font-size: 1.5rem;
            font-weight: 600;
        }
        img {
            max-width: 100%;
        }
    }
}

/* ------------------------------------- /
/   front-button
/* ------------------------------------- */
.front-button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: min(100%, 340px);
    min-height: 60px;
    margin: 0 auto;
    padding: 10px 20px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1.8rem;
    line-height: 1.2;
    position: relative;
    &.wide {
        width: 100%;
        min-height: 80px;
        font-size: clamp(1.8rem, 3.5vw, 2.0rem);
    }
    &.sumi {
        padding: 10px 60px;
        &::after {
            content: '済';
            justify-content: center;
            align-items: center;
            display: flex;
            width: 30px;
            height: 30px;
            color: var(--color-red);
            line-height: 1.2;
            position: absolute;
            right: 20px;
            top: calc(50% - (30px / 2));
        }
    }
    &.shusei {
        padding: 10px 65px;
        &::after {
            content: '要修正';
            justify-content: center;
            align-items: center;
            display: flex;
            width: 60px;
            height: 30px;
            font-size: 0.8em;
            color: #fff;
            line-height: 1.2;
            position: absolute;
            right: 5px;
            top: calc(50% - (30px / 2));
        }
    }
    &:hover {
        background-color: #fff;
        text-decoration: none;
    }
    &.bg-green {
        border-color: var(--color-green);
        &:hover {
            color: var(--color-green);
        }
    }
    &.bg-blue {
        border-color: var(--color-blue);
        &:hover {
            color: var(--color-blue);
        }
    }
    &.bg-red {
        border-color: var(--color-red);
        &:hover {
            color: var(--color-red);
        }
    }
    &.bg-yellow {
        border-color: var(--color-yellow);
        &:hover {
            color: var(--color-yellow);
        }
    }
    &.bg-purple {
        border-color: var(--color-purple);
        &:hover {
            color: var(--color-purple);
        }
    }
    &.bg-ocean {
        border-color: var(--color-ocean);
        &:hover {
            color: var(--color-ocean);
        }
    }
    &.bg-gray {
        border-color: var(--color-gray);
    }
    .t_diary_date {
         display: inline-block;
         margin-left: 10px;
         font-size:0.7em;
         font-weight: 500;
    }
    .t_diary_druft {
         font-size:0.7em;
    }
}
@media screen and (max-width:600px){
.front-button.sumi {
        padding: 10px 60px 10px 20px;
}
}
@media screen and (max-width:500px){
.front-button {
    flex-direction: column;
    justify-content: center;
    row-gap: 5px;
}
}

/* ------------------------------------- /
/   input-submit
/* ------------------------------------- */
.input-submit {
    width: min(100%, 340px);
    margin: 0 auto;
    button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 60px;
        margin: 0 auto;
        border-radius: 5px;
        font-size: 1.8rem;
        &.border-blue {
            border: 1px var(--color-blue) solid;
        }
        &.bg-blue:hover {
            color: var(--color-blue);
            border: 1px var(--color-blue) solid;
            background-color: #fff;
        }
        &.bg-red:hover {
            color: var(--color-red);
            border: 1px var(--color-red) solid;
            background-color: #fff;
        }
        &.bg-gray:hover {
            color: var(--color-gray);
            border: 1px var(--color-gray) solid;
            background-color: #fff;
        }
        &.bg-white:hover {
            opacity: 0.5;
        }
    }
}


/* ------------------------------------- /
/  input-list
/* ------------------------------------- */
.input-list {
    width: 100%;
    margin: 0 auto;
    input[type=text],
    input[type=tel],
    input[type=email],
    input[type=password],
    input[type=date],
    input[type=month],
    input[type=time],
    input[type=number],
    textarea,
    .input-list__check,
    .input-list__confirm {
        display: block;
        width: 100%;
        padding: 14px 20px;
        border-radius: 5px;
        font-size: clamp(1.8rem , 5vw, 2.0rem);
        &.input-error {
            background-color: #FF8A80;
        }
        &.input-caution {
            background-color: #FFF59D;
        }
        &.short {
            width: min(calc(100% - 40px), 200px);
        }
    }
    input[type=text],
    input[type=tel],
    input[type=email],
    input[type=password],
    input[type=date],
    input[type=month],
    input[type=time],
    input[type=number],
    textarea {
        background-color: #fff;
        border: 2px #303030 solid;;
    }
    textarea {
        min-height: 200px;
    }
    input[type=radio],
    input[type=checkbox] {
        display: none;
    }
    input[type=time] {
        width: min(100%, 150px);
        min-height: calc(1.4em + 30px);
        line-height: 1.4;
    }
    .input-list__confirm {
        padding: 14px 0;
    }
}
.input-list__column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 16px 0 0;
    &:first-child {
        margin: 0;
    }
}
.input-list__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: min(100%, 200px);
    min-height: 65px;
    color: #454545;
    font-weight: 600;
    i {
        margin: 0 0 0 8px;
    }
    p {
        width: 100%;
        font-size: 1.5rem;
    }
    .required {
        display: block;
        margin: 0 0 0 10px;
        padding: 3px 5px;
        border-radius: 3px;
        font-size: 0.7em;
        line-height: 1.2;
    }
}
.input-list__detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 200px - 10px);
    span {
        font-size: 1.0em;
    }
    &:has(p) input[type=number] {
        width: calc(100% - 80px);
    }
}
.input-list__check {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 25px;
    row-gap: 5px;
    padding: 4px 0;
    label {
        display: block;
        padding: 0 0 0 32px;
        font-size: clamp(1.8rem , 5vw, 2.0rem);
        position: relative;
        cursor: pointer;
        &::before {
            content: '';
            display: block;
            border: 2px #808080 solid;
            background-color: #fff;
            position: absolute;
            left: 0;
        }
        &::after {
            content: '';
            display: block;
            position: absolute;
            opacity: 0;
        }
    }
    /* ラジオボタン */
    input[type=radio] + label {
        &::before {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            top: calc(50% - (25px / 2));
        }
        &::after {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color:  var(--color-red);
            left: 5px;
            top: calc(50% - (15px / 2));
            transition-duration: 0.2s;
        }
    }
    input[type=radio]:checked + label::after {
        opacity: 1;
    }
    /* チェックボックス */
    input[type=checkbox] + label {
        &::before {
            width: 25px;
            height: 25px;
            border-radius: 4px;
            top: calc(50% - (25px / 2));
        }
        &::after {
            width: 16px;
            height: 26px;
            border-width: 0 5px 4px 0;
            border-color: var(--color-red);
            border-style: solid;
            left: 4px;
            top: calc(50% - 19px);
            transform: translateY(-5px) rotate(40deg);
            transition-duration: 0.2s;
        }
    }
    input[type=checkbox]:checked + label::after {
        transform: translateY(0px) rotate(40deg);
        opacity: 1;
    }
}
.input-list__select {
    width: 100%;
    /*
    padding: 0 35px 0 0;
    */
    padding: 0;
    border: 2px #303030 solid;;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    &::before {
        content: '';
        display: block;
        border-width: 13px 8px 0 8px;
        border-color: #505050 transparent transparent transparent;
        border-style: solid;
        position: absolute;
        right: 15px;
        top: calc(50% - (13px / 2));
    }
    &:has(select:disabled)::before {
        display: none;
    }
    select {
        padding: 18px 20px;
        font-size: clamp(1.8rem , 5vw, 2.0rem);
        position: relative;
        &:disabled {
            color: #000;
            opacity: 1;
        }
    }
}
.input-list__trigger {
    position: relative;
    input[type=checkbox] {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    label {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        min-height: 80px;
        padding: 20px 100px 20px 20px;
        background-color: #F7F7F7;
        border-radius: 5px;
        font-size: 1.7rem;
        position: relative;
        cursor: pointer;
        transition-duration: 0.2s;
        &::before {
            content: '';
            display: block;
            width: 60px;
            height: 32px;
            border-radius: calc(32px / 2);
            background-color: #E3E4E6;
            position: absolute;
            right: 20px;
            top: calc(50% - (32px / 2));
            transition-duration: 0.2s;
        }
        &::after {
            content: '';
            display: block;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            right: calc(20px + 33px);
            top: calc(50% - (22px / 2));
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.1);
            transition-duration: 0.2s;
        }
        p {
            width: 100%;
        }
        span {
            display: block;
            width: 100%;
            margin: 5px 0 0;
            font-size: 0.8em;
            line-height: 1.3;
        }
    }
    input[type=checkbox]:checked + label {
        background-color: #E1F5FE;
        &::before {
            background-color: var(--color-blue);
        }
        &::after {
            right: calc(20px + 5px);
        }
    }
    &:has(.not) {
        opacity: 0.3;
    }
}
.input-list:has(.input-list__not) input[type=text] {
    width: calc(100% - 80px);
}
.input-list:has(.column_not:checked) input[type=text] {
    opacity: 0.3;
}
.input-list__not {
    width: min(100%, 80px);
    label {
        display: block;
        width: calc(100% - 10px);
        margin: 0 auto;
        cursor: pointer;
        text-align: center;
        font-size: 0.8em;
        background-color: var(--color-gray);
        border-radius: 3px;
    }
}
.input-list__buttonbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    column-gap: 2%;
    width: 100%;
    .front-button {
        width: min(49%, 200px);
        min-height: 40px;
        margin: 0;
        font-size: 1.5rem;
    }
}
@media screen and (max-width:600px){
.input-list__column {
    margin: 25px 0 0;
}
.input-list__title {
    min-height: 0px;
}
.input-list__detail {
    width: 100%;
    margin: 5px 0 0;
}
}
@media screen and (max-width:400px){
.input-list__trigger {
    label {
        &::before {
            width: 50px;
            height: 28px;
            border-radius: calc(28px / 2);
            right: 15px;
            top: calc(50% - (28px / 2));
        }
        &::after {
            width: 20px;
            height: 20px;
            right: calc(15px + 26px);
            top: calc(50% - (20px / 2));
        }
    }
    input[type=checkbox]:checked + label {
        &::after {
            right: calc(15px + 4px);
        }
    }
}
}

/* ------------------------------------- /
/  page-text
/* ------------------------------------- */
.page-text {
    border-radius: 5px;
}


/* ------------------------------------- /
/  boat_detail
/* ------------------------------------- */
.boat_detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.boat_detail_left {
    width: 45%;
}
.boat_detail_right {
    width: 50%;
}
.boat_detail_img_column {
    position: relative;
}
.boat_detail_img_det {
    width: 100%;
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.75);
    font-size: 0.85em;
    position: absolute;
    left: 0;
    bottom: 10px;
}
.boat_detail_thumb_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 15px;
    row-gap: 15px;
}
.boat_detail_thumb {
    display: block;
    width: calc((100% - (15px * (5 - 1))) / 5);
    background-color: #000;
}
.boat_detail_thumb img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.boat_detail_thumb:not(.active) img {
    opacity: 0.7;
}
.boat_detail_name {
    font-size: 1.4em;
    border-bottom: 2px var(--color-black) solid;
}
.boat_detail_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #ccc solid;
}
    .boat_detail_column dt {
        width: 180px;
        padding: 8px 0;
        font-size: 0.9em;
        text-align: center;
    }
    .boat_detail_column dd {
        width: calc(100% - 180px - 10px);
        font-size: 1.1em;
        padding: 5px 0;
    }
    .boat_detail_column .fsS {
        font-size: 0.8em;
    }
@media screen and (max-width:768px){
.boat_detail {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.boat_detail_left {
    width: min(100%, 400px);
    margin: 0 auto;
}
.boat_detail_right {
    width: 100%;
    margin: 40px auto 0;
}
}
@media screen and (max-width:500px){
    .boat_detail_column dt {
        text-align: left;
        padding-bottom: 0;
        color: #808080;
    }
    .boat_detail_column dd {
        width: 100%;
        padding-top: 0;
    }
}


/* ------------------------------------- /
/  form_wrapper
/* ------------------------------------- */
.form_wrapper {
    width: min(100%, 768px);
    margin: 0 auto;
}
/* ------------------------------------- /
/  apply_ymd
/* ------------------------------------- */
.apply_ymd_wrapper {
    width: 100%;
}
.apply_ymd_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.apply_ymd_link a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    line-height: 1.2;
    font-weight: 500;
}
.apply_ymd_prev {
    padding-left: 20px;
}
.apply_ymd_prev::before {
    content: '';
    display: block;
    width: 10px;
    aspect-ratio: 1/1;
    border-left: 2px #303030 solid;
    border-bottom: 2px #303030 solid;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotateZ(45deg) translateY(-50%);
}
.apply_ymd_next {
    padding-right: 20px;
}
.apply_ymd_next::before {
    content: '';
    display: block;
    width: 10px;
    aspect-ratio: 1/1;
    border-right: 2px #303030 solid;
    border-top: 2px #303030 solid;
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotateZ(45deg) translateY(-50%);
}
.apply_ymd_table {
    table-layout: fixed;
    width: 100%;
}
    .apply_ymd_table th,
    .apply_ymd_table td {
        text-align: center;
        border: 1px #ccc solid;
    }
    .apply_ymd_table th {
        padding: 5px 0;
        line-height: 1.2;
    }
    .apply_ymd_table th:has(.saturday) {
        background-color: #E1F5FE;
    }
    .apply_ymd_table th:has(.holiday),
    .apply_ymd_table th:has(.sunday) {
        background-color: #FFEBEE;
    }
    .apply_ymd_table td {
        padding: 10px 0;
    }
.apply_ymd_date {
    font-weight: 500;
}
.apply_ymd_date.saturday {
    color: var(--color-blue);
}
.apply_ymd_date.holiday,
.apply_ymd_date.sunday {
    color: var(--color-red);
}
.apply_ymd_md {
    margin: 3px 0 0;
    font-weight: 500;
}
.apply_ymd_number {
    margin: 5px 0 0;
    font-size: 1.2em;
    font-weight: 600;
}
.apply_ymd_table .input-list__check  {
    padding: 14px 0;
    input[type=checkbox] + label::before {
        left: 50%;
        transform: translateX(-50%);
    }
    input[type=checkbox] + label::after {
        left: 50%;
        transform: translateX(-50%) translateY(-5px) rotate(40deg);
    }
    input[type=checkbox]:checked + label::after {
        transform: translateX(-50%) translateY(0px) rotate(40deg);
    }
}
.apply_ymd_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 15px;
    row-gap: 5px;
    margin: 10px 0 0;
    font-weight: 500;
}
.apply_ymd_list_date {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}
    .apply_ymd_list_date a {
        display: block;
        width: 18px;
        aspect-ratio: 1/1;
        position: relative;
    }
    .apply_ymd_list_date a::before,
    .apply_ymd_list_date a::after {
        content: '';
        display: block;
        width: 2px;
        height: 14px;
        background-color: #303030;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
    }
    .apply_ymd_list_date a::after {
        transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
    }

@media screen and (max-width:400px){
.apply_ymd_table {
    font-size: 0.9em;
    input[type=checkbox] + label {
        &::before {
            width: 21px;
            height: 21px;
            border-radius: 3px;
            top: calc(50% - (21px / 2));
        }
        &::after {
            width: 12px;
            height: 20px;
            border-width: 0 4px 3px 0;
            left: 4px;
            top: calc(50% - 15px);
            transform: translateY(-5px) rotate(40deg);
        }
    }
}
}


/*オプション選択*/
.input_option_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    font-size: 0.9em;
    .input-list__select {
        width: min(100%, 120px);
    }
    + & {
        margin-top: 5px;
    }
    p {
        color: #454545;
    }
}