@charset "utf-8";

/* program-example */
.a-style .one-day-tit {
    background: #e6b322;
}

.a-style .table-wrp {
    border: 2px solid #e6b322;
}

.a-style .use .use__tit {
    color: #aaa;
}

.a-style .table-wrp .cont {
    /* background: #eee; */
    background: #fff2cc;
    color: #aaa;
}

.a-style.one-day .use h3 {
    color: #e6b322;
}

.b-style .one-day-tit {
    background: #a2ad75;
}

.b-style .table-wrp {
    border: 2px solid #a2ad75;
}

.b-style .use .use__tit {
    color: #777;
}

.b-style .table-wrp .cont {
    /* background: #eee; */
    background: #e2e7cb;
    color: #777;
}

.b-style.one-day .use h3 {
    color: #a2ad75;
}

.c-style .one-day-tit {
    background: #9d875c;
}

.c-style .table-wrp {
    border: 2px solid #9d875c;
}

.c-style .use .use__tit {
    color: #111;
}

.c-style .table-wrp .cont {
    /* background: #eee; */
    background: #feeece;
    color: #111;
}

.c-style.one-day .use h3 {
    color: #9d875c;
}

.d-style .one-day-tit {
    background: #ed6d03;
}

.d-style .table-wrp {
    border: 2px solid #ed6d03;
}

.d-style .use .use__tit {
    color: #111;
}

.d-style .table-wrp .cont {
    background: #feeee0;
    color: #111;
}

.d-style.one-day .use h3 {
    color: #ed6d03;
}

.a-style .table-wrp table .cont,
.b-style .table-wrp table .cont,
.c-style .table-wrp table .cont,
.d-style .table-wrp table .cont {
    display: block;
    color: #111;
}

.one-day-tit {
    text-align: center;
    color: #fff;
    font-weight: bold;

    min-height: 11.8rem;
}

.oneday-flow .lead {
    margin: 10px 0 20px;
}

.oneday_step_detail {
    overflow: hidden;
    padding: 20px;
    margin-top: 30px;
}

.one-day .use {
    background: #f5f5f5;
}

.one-day .use h3 {
    text-align: center;
}

.one-day .use h3::after {
    content: " ";
    background: #111;
    display: block;
}

.table-wrp {
    margin-bottom: 20px;
}

.table-wrp table {
    width: 100%;
    font-size: 1.6rem;
}

.table-wrp table th {
    padding: 5px 0 5px 5px;
    vertical-align: middle;
    min-height: 40px;
}

.table-wrp table td {
    width: 75%;
    padding: 5px 5px 5px 0;
    vertical-align: middle;
}

.table-wrp table tr {
    border-bottom: 1px solid #e6e6e6;
}

.table-wrp table tr:last-child {
    border-bottom: none;
}

.table-wrp .cont {
    padding: 10px 15px;
}

.table-wrp .rows2 {
    /* padding: 38px 15px; */
    padding: 4.2rem 1.5rem;
}

.table-wrp .nocont {
    padding: 10px 15px;
    background: #fff;
    display: block;
}

.table-wrp .row2 {
    padding: 5px 0 5px 5px;
}

@media (max-width: 768px) {
    .one-day-wrap {
        margin: 30px 0 60px;
    }

    .one-day-tit {
        font-size: 16px;
        padding: 10px 0;
        min-height: initial;
    }

    .one-day-tit span {
        font-size: 14px;
        display: block;
    }

    .one-day .use {
        padding: 15px;
        margin-bottom: 30px;
    }

    .one-day .use p {
        font-size: 16px;
    }

    .one-day .use h3 {
        font-size: 16px;
        margin: 0 0 10px 0;
    }

    .one-day .use h3::after {
        width: 30px;
        height: 2px;
        margin: 10px auto;
    }
}

@media (min-width: 769px) {
    .program-example .sec-text {
        margin: 0 0 40px 0;
    }

    .program-example .container {
        padding: 0 0 100px;
    }

    .one-day-tit {
        font-size: 20px;
        padding: 10px 0;
    }

    .one-day-tit span {
        font-size: 14px;
        display: block;
    }

    .one-day-wrap {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .one-day {
        width: 32%;
    }

    .one-day .use {
        padding: 30px 20px;
        background: url(../../img/common/bg_check01.png) repeat center top / 20px;
    }

    .one-day .use p {
        font-size: 16px;
    }

    .one-day .use h3 {
        font-size: 20px;
        margin: 0 0 20px 0;
    }

    .one-day .use h3::after {
        width: 60px;
        height: 2px;
        margin: 20px auto;
    }
}

/* dayflow */
.dayflow .container > p {
    margin-bottom: 48px;
    line-height: 2.2;
}

.day-list {
    padding-bottom: 1em;
}

.day-list .day-list-item {
    position: relative;
}

.day-list .imgbox img {
    width: 100%;
}

.day-list .txtbox .-ttl {
    font-weight: 500;
    color: #3893c6;
}

.day-list .txtbox .-txt {
    line-height: 1.8;
}

.day-list .txtbox .-num {
    color: #3893c6;
    font-family: Arial !important;
}

.day-list .txtbox {
    background: rgb(255, 255, 255, 0.8);
}

.day-list li {
    position: relative;
}

.day-list li:nth-child(3)::before {
    content: " ";
    display: block;
    background: url(../img/top/boat01.png) no-repeat center center;
    position: absolute;
    background-size: 100%;
}

.day-list li:nth-child(6)::before {
    content: " ";
    display: block;
    background: url(../img/top/boat02.png) no-repeat center center;
    position: absolute;
    background-size: 100%;
}

@media (max-width: 768px) {
    .dayflow {
        padding: 50px 0;
    }

    .dayflow .container .sec-text {
        display: none;
    }

    .day-list .imgbox {
        width: 90%;
    }

    .day-list .txtbox {
        width: 90%;
        padding: 60px 6% 6%;
        z-index: 2;
        position: relative;
    }

    .day-list .txtbox .-ttl {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .day-list .txtbox .-txt {
        font-size: 12px;
    }

    .day-list .txtbox .-num {
        font-size: 36px;
        position: absolute;
        top: 10px;
        left: 0%;
        text-align: center;
        width: 100%;
    }

    .day-list li {
        margin-bottom: 25px;
    }

    .day-list li:nth-child(odd) .imgbox {
        margin: 0 5% 0 0;
    }

    .day-list li:nth-child(even) .imgbox {
        margin: 0 0 0 5%;
    }

    .day-list li:nth-child(odd) .txtbox {
        margin: -30px 0 0 10%;
    }

    .day-list li:nth-child(even) .txtbox {
        margin: -30px 10% 0 0;
    }

    .day-list li:nth-child(3)::before {
        width: 100px;
        height: 90px;
        bottom: -10px;
        left: -20px;
    }

    .day-list li:nth-child(6)::before {
        width: 74px;
        height: 65px;
        bottom: -10px;
        right: -20px;
    }
}

@media (min-width: 769px) {
    .dayflow {
        padding: 100px 0;
    }

    .day-list .imgbox {
        width: 50%;
    }

    .day-list .txtbox {
        width: 55%;
        padding: 40px 60px 30px 60px;
        z-index: 2;
        position: relative;
    }

    .day-list .txtbox .-ttl {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .day-list .txtbox .-txt {
        font-size: 16px;
    }

    .day-list .txtbox .-num {
        font-size: 60px;
        position: absolute;
        top: -50px;
        left: 0%;
        text-align: center;
        width: 100%;
    }

    .day-list li {
        margin-bottom: 100px;
    }

    .day-list li:nth-child(odd) .imgbox {
        float: left;
    }

    .day-list li:nth-child(odd) .txtbox {
        float: right;
        margin: 5% 0 0 -5%;
    }

    .day-list li:nth-child(even) .imgbox {
        float: right;
    }

    .day-list li:nth-child(even) .txtbox {
        float: left;
        margin: 5% -5% 0 0;
    }

    .day-list li:nth-child(3)::before {
        width: 197px;
        height: 173px;
        bottom: 0;
        right: -100px;
    }

    .day-list li:nth-child(6)::before {
        width: 147px;
        height: 125px;
        bottom: 0;
        left: -70px;
    }

    .day-list li::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        clear: both;
    }
}