@charset "UTF-8";

:root {
    --color-text: #000;
    --color-main: #fff;
    --bg-white: #fff;
    --bg-gray: #eee;
    --bg-gray1: #ccc;
    --bg-orange: #ee9a00;
    --bg-golden-orange: #E99A42;
    --content-width: 1032px
}

body:before {
    background: url(https://event-web.biz/obc/bctd_2025/images/common/bg.png) center top repeat;
    content: "";
    display: block;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1
}

.sec-wrap {
    position: relative;
    padding: 72px 0 100px
}

@media screen and (max-width: 767px) {
    .sec-wrap {
        padding: 48px 0
    }
}

.sec-wrap:last-child {
    padding-bottom: 130px
}

@media screen and (max-width: 767px) {
    .sec-wrap:last-child {
        padding-bottom: 66px
    }
}

.sec-wrap:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff6
}

.sec-wrap p:not([class]) {
    font-size: 2rem
}

@media screen and (max-width: 991px) {
    .sec-wrap p:not([class]) {
        font-size: 3.8vw
    }
}

@media screen and (max-width: 767px) {
    .u-visible-sp {
        display: none !important
    }
}

@media screen and (min-width: 991px) {
    .u-visible-tab {
        display: none !important
    }
}

@media screen and (min-width: 767px) {
    .u-visible-pc {
        display: none !important
    }
}

.free {
    width: 70px;
    margin: 0 10px
}

@media screen and (max-width: 767px) {
    .free {
        width: 15vw;
        max-width: 70px
    }
}

.heading {
    font-size: 4.2rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 50px
}

.heading:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 5px;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    background: #f97700
}

@media screen and (max-width: 767px) {
    .heading {
        font-size: 7.2vw;
        margin-bottom: 24px
    }
}

.btn {
    display: block;
    background: #0c6eb4;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    max-width: 836px;
    margin: 80px auto 0;
    transition: .3s ease-in-out
}

.btn:hover {
    text-decoration: none;
    opacity: .7
}

@media screen and (max-width: 991px) {
    .btn {
        margin-top: 40px
    }
}

.btn .text {
    display: block;
    border: 2px solid var(--bg-white);
    font-size: 3.2rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-main);
    padding: 2px 0 4px;
    letter-spacing: .1em;
    width: 100%;
    position: relative
}

@media screen and (max-width: 767px) {
    .btn .text {
        font-size: 1.8rem
    }
}

.btn .text .icon {
    padding-right: 28px;
    background: url("data:image/svg+xml,%3csvg%20width='23'%20height='28'%20viewBox='0%200%2023%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M23%2014L0.500001%2027.8564L0.500002%200.143593L23%2014Z'%20fill='white'/%3e%3c/svg%3e") no-repeat right top 13px;
    background-size: 20px
}

@media screen and (max-width: 767px) {
    .btn .text .icon {
        padding-right: 22px;
        background: url("data:image/svg+xml,%3csvg%20width='23'%20height='28'%20viewBox='0%200%2023%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M23%2014L0.500001%2027.8564L0.500002%200.143593L23%2014Z'%20fill='white'/%3e%3c/svg%3e") no-repeat right top 8px;
        background-size: 12px
    }
}

.mv img {
    width: 100%
}

.theme {
    padding-bottom: 8vw;
    background: #f7f1df;
    position: relative;
    overflow: hidden
}

.theme .content {
    font-size: 2.25rem;
    text-align: center
}

.theme .content p+p {
    margin-top: 28px
}

@media screen and (max-width: 767px) {
    .theme .content p+p {
        margin-top: 16px
    }
}

.theme .content span {
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.theme .content span img {
    max-width: 463px;
    width: 100%
}

@media screen and (max-width: 767px) {
    .theme .content span img {
        width: 70vw
    }
}

.theme .fukidashi {
    border-radius: 20px;
    position: relative;
    margin: 30px auto 20px;
    padding: 20px;
    width: 75%;
    color: var(--color-main);
    background: var(--bg-orange);
    text-align: center;
    font-weight: 700
}

@media screen and (max-width: 991px) {
    .theme .fukidashi {
        width: 75vw;
        margin-top: 24px
    }
}

.theme .fukidashi:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    margin-top: -1px;
    border: 15px solid transparent;
    border-top: 15px solid var(--bg-orange)
}

.theme .ico {
    margin: 20px auto 0;
    text-align: center
}

.theme .ico img {
    max-width: 100px
}

.theme .cloud {
    position: absolute;
    bottom: 0;
    width: 50vw;
    transition: 1s ease-in-out
}

.theme .cloud-01 {
    left: 0
}

.theme .cloud-02 {
    right: 0
}

.about {
    background: #fff
}

.about .list-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0
}

@media screen and (max-width: 767px) {
    .about .list-wrap {
        gap: 0
    }
}

.about .list-wrap dt {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-main);
    padding: 20px;
    background: var(--bg-orange)
}

@media screen and (max-width: 767px) {
    .about .list-wrap dt {
        width: 100%;
        font-size: 4vw;
        justify-content: left
    }
}

.about .list-wrap dd {
    background: #fff;
    padding: 20px 50px;
    width: 65%;
    font-size: 2rem;
    border: 1px solid #ccc;
    box-sizing: border-box
}

@media screen and (max-width: 767px) {
    .about .list-wrap dd {
        width: 100%;
        padding: 20px;
        font-size: 3.5vw
    }
}

.program {
    position: relative;
    padding-bottom: 110px
}

@media screen and (max-width: 767px) {
    .program {
        padding-bottom: 0
    }
}

.program .container {
    z-index: 2
}

.program:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://event-web.biz/obc/bctd_2025/images/common/dot.png) no-repeat top center;
    background-size: cover
}

@media screen and (max-width: 991px) {
    .program:after {
        background-position: bottom 15vw center;
        background-size: 991px
    }
}

.program .description {
    font-size: 2.02rem;
    margin-bottom: 32px;
    text-align: center
}

@media screen and (max-width: 767px) {
    .program .description {
        font-size: 4vw
    }
}

.program .timetable {
    display: grid;
    grid-gap: 10px;
    font-size: 1.68rem
}

@media screen and (max-width: 767px) {
    .program .timetable {
        grid-gap: 0;
        font-size: 3.4vw
    }
}

.program .timetable-col1 {
    grid-template-columns: 1fr 5fr
}

.program .timetable-col2 {
    grid-template-columns: 1fr 2.5fr 2.5fr
}

.program .timetable-col1,
.program .timetable-col2 {
    display: grid;
    grid-gap: 10px
}

@media screen and (max-width: 767px) {

    .program .timetable-col1,
    .program .timetable-col2 {
        grid-template-columns: 1fr;
        grid-gap: 0
    }
}

.program .timetable-time {
    border: 1px solid var(--bg-gray1);
    padding: 15px;
    background: var(--bg-gray);
    text-align: center;
    min-width: 165px
}

@media screen and (max-width: 767px) {
    .program .timetable-time {
        border-bottom: 0
    }
}

.program .timetable-content {
    background: var(--bg-white);
    border: 1px solid var(--bg-gray1);
    padding: 15px;
    position: relative
}

@media screen and (max-width: 767px) {
    .program .timetable-content {
        border-bottom: 0
    }
}

.program .timetable-content.kyuyo {
    background: #71aad8;
    color: var(--color-main)
}

.program .timetable-content.kanjo {
    background: #b582a7;
    color: var(--color-main)
}

.program .timetable-box {
    background: var(--bg-white);
    padding: 15px;
    border: 1px solid var(--bg-gray1);
    margin-bottom: 16px
}

.program .timetable-box img {
    width: 50%;
    margin: 0 auto;
    display: block
}

.program .timetable-box.imgF img {
    width: 100%
}

.program .timetable-name {
    font-size: 2.02rem;
    font-weight: 700
}

@media screen and (max-width: 767px) {
    .program .timetable-name {
        font-size: 3.85vw
    }
}

.program .timetable-name span {
    font-size: 1.68rem;
    font-weight: 400
}

@media screen and (max-width: 767px) {
    .program .timetable-name span {
        font-size: 3.4vw
    }
}

.program .timetable .content {
    font-size: 1.6rem
}

@media screen and (max-width: 767px) {
    .program .timetable .content {
        font-size: 3.2vw
    }
}

.program .timetable .content .text {
    margin-top: 16px
}

.program .timetable .content ul {
    margin-left: 1em
}

.program .timetable .content ul li {
    list-style: decimal
}

.program .timetable-text {
    margin-top: 16px
}

.program .timetable .card {
    display: flex;
    flex-wrap: wrap;
    gap: 72px;
    flex-direction: row-reverse;
    justify-content: space-between
}

@media screen and (max-width: 767px) {
    .program .timetable .card {
        gap: 10px
    }
}

.program .timetable .card-image {
    width: 107px
}

.program .timetable .card-image img {
    width: 100%
}

@media screen and (max-width: 767px) {
    .program .timetable .card-image {
        width: 100%;
        max-width: 60%;
        margin: 0 auto
    }
}

@media screen and (max-width: 767px) {
    .program .timetable .card-content {
        width: 100%;
        text-align: center
    }
}

.program .timetable .card-content .timetable-name {
    margin-bottom: 5px
}

.program .timetable .card-title {
    margin-bottom: 5px;
    font-weight: 400
}

.program .timetable .card-author {
    font-weight: 700
}

.program .timetable .houhou_img {
    width: 20vw;
    margin-bottom: -15px;
    margin-left: auto;
    display: block
}

@media screen and (min-width: 768px) {
    .program .timetable .houhou_img {
        position: absolute;
        bottom: 0;
        right: 20px;
        margin: 0;
        width: 73px
    }
}

.program .timetable .houhou {
    margin-top: 16px;
    justify-content: right;
    display: flex;
    align-items: center;
    gap: 8px
}

.program .timetable .houhou img {
    width: 63px
}

@media (min-width: 768px) and (max-width: 991px) {
    .program .timetable .houhou img {
        width: 8vw
    }
}

.program .timetable .houhou .btn-houhou {
    line-height: 1.4;
    padding: 10px 58px 10px 24px;
    border-radius: 8px;
    border: 2px solid var(--bg-white);
    font-weight: 700;
    color: var(--color-main);
    text-decoration: underline;
    background: #0f6eb1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc0MJxAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAScSURBVHgB7Zw/aFRLFMa/Xd4r3mtcXvtQrjY2StZGQZBsOgULbWNhLBVEbUSrbCrFJhFBG2HTaGsQRTs3iBZpkiAWFuIaEWzUWKiFxTjfvXPXm5v9c7PuzJxZ/MF4XbMme385c/bM7MyU4BilVEVfqrqNmWv6mES5p7d0WzdtxTxeLZVKTTimBAdoOTV9YRs312HQ1G1Bt0UtbgWhwsjRra7bsrLPG91O6hYhFPhidZvV7bPyQ0O0MJVEUEPJoaGkCdMv6LzyF0G94GuqYwj8VjJXyW+sgeElaFu0dJvQSb+FASljQLSk8/qyDPmSSKTbsnnN7tA/cE6FSx0DsKWup5JikV3tGMKG9dcp3RXXi/6HwqKMpCf4VUWHDovUiaKyCokaQUkphWUVTebsbqMmifCeGkWe2FeUSX6h56ReHNP3ONvvST27nkreTvt+kxHhgu6Cc92+2FWUSopJ1kkVWGDt0zfs+O9fCIJ5al+3orRX12PytiKJHL3xLJYliLT06UhHUSYvRbDI2qfvsawX779AEDXVpXrfJMp0uXNwQCLruTRZ06Yc2kCniJqGxS6X58v3Hzh0bRF3l9YgBN77pjewDaJMNE3BA2furOBW8zWEMKVyc1n5iJqGRy7fe4mrj15BCBvST1uUz2jKcvXxKymyprK5KhtRNQhBiCxKakdVVpTXbpdHiKz20C0WpUOMg8MIwqCsM3eW4ZGqSj6TbEfUOIRyd+kdTtxeissIT8RuUlGiZwcevvgQF6aeZNX4Rzn7QDKs3inLw/iQw5pKOe2DIZDI8jKYrjKixhAQ6WDasawxiooQGB5kxREV5Fy442maCkU5mykYNg6naapBiyIsGSjL9jRNkDkqD2VxmsairGjgRRoSoSxb48OREkVsDaZHTlSMhSW8FNXCCHHpyG5cOrwbQ6b1F0aImyeqmNy/AxZYZ0SFu0bbsO2fv21KIuuMqMKLqSRCSQ/OHsTe/7fBIitBR5QjSSTOUasIEC7woCRHCz3CjCjHklAqlRbLZlleE4HgWhKMm3L2gXSYixxLIlxBjLSOWoRwUklM4I6J3cQRZTYKis1Vkwe2+5LUSvcCZsd6CxAIJd2c3OdDEqmnf8mKug5hxefp2q5YkkfaKaktyrz7zUMIHNxeOb4HHpnPLnzNT7NchwAszQBslZnsgw2ijMF5eESIpPn8MupOE3cX4ClXcQZAgCTe+0z+HzeJMrlqBo6xPE2yFeY6LcrvtXOBC/JrsETl3P346nAGoAism3Z2+kKvOfNTsNwFhUnivU50+2JXUSb8rHVBjteeXhyXIonUf2dzNrvgrLLA249flSD6rl8tugP0HkZ3z96CjqTj/Z70Z6tswa2yfzZfF9x8XfiTYvMN+a4gcpZhi/AeCksaGCY/FS5ut/4quQfXdIOvdeB9iMM4xIZ5K4JsmkhOzmjBJyrpilKPRXKym7UwKjmJrKHk0FAdtryKQfkVxgjiSCJCKBhh3Bz4RtmHZ0NNK4sR5Op4SRap3KXEYVANw6GZNn7kDcs4EZXF/NbTw0oj/Dq0tILOB5YSVtHpoaVsq9aLxRw/AYjj8B+r9BGzAAAAAElFTkSuQmCC) no-repeat right 12px center;
    background-size: 37px
}

@media (min-width: 768px) and (max-width: 991px) {
    .program .timetable .houhou .btn-houhou {
        font-size: 1.2vw;
        background-size: 3.2vw;
        padding-left: 16px;
        padding-right: 48px
    }
}

@media screen and (max-width: 767px) {
    .program .timetable .houhou .btn-houhou {
        font-size: 3.5vw;
        background-size: 32px
    }
}

.QA {
    background: #f7f1df
}

.QA .panel {
    font-size: 2rem
}

@media screen and (max-width: 767px) {
    .QA .panel {
        font-size: 3.9vw
    }
}

.QA .panel-item:not(:last-child) {
    margin-bottom: 24px
}

.QA .panel-question {
    padding: 24px 30px 20px 60px;
    background: #fdce0080;
    position: relative;
    cursor: pointer
}

@media screen and (max-width: 767px) {
    .QA .panel-question {
        padding: 24px 8vw 20px
    }
}

.QA .panel-question:before {
    content: "Q．";
    position: absolute;
    left: 30px;
    top: 23px
}

@media screen and (max-width: 767px) {
    .QA .panel-question:before {
        left: 3vw
    }
}

.QA .panel-question .plus {
    border: 2px solid #000;
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px
}

@media screen and (max-width: 767px) {
    .QA .panel-question .plus {
        width: 4.4vw;
        height: 4.4vw;
        right: 3vw
    }
}

.QA .panel-question .plus:before,
.QA .panel-question .plus:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    background: #000;
    transition: .3s ease-in-out;
    border-radius: 8px
}

.QA .panel-question .plus:before {
    width: 11px;
    height: 2px
}

@media screen and (max-width: 767px) {
    .QA .panel-question .plus:before {
        width: 2.5vw
    }
}

.QA .panel-question .plus:after {
    width: 2px;
    height: 11px
}

@media screen and (max-width: 767px) {
    .QA .panel-question .plus:after {
        height: 2.5vw
    }
}

.QA .panel .expand .plus:after {
    transform: translate(-50%, -50%) rotate(-90deg)
}

.QA .panel-answer {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: .3s ease-in-out;
    opacity: 0
}

.QA .panel-content {
    padding: 20px 30px;
    background: var(--bg-white)
}

footer {
    background: orange;
    padding: 20px 20px 120px;
    color: var(--color-main);
    text-align: center
}

footer .footer-logo {
    max-width: 90px;
    margin: 0 auto 12px
}

footer .copy-right {
    width: 100%;
    font-size: 1.2rem;
    color: var(--color-bases)
}

.sticky-footer {
    background: #0c6eb4d9;
    padding: 8px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    z-index: 9
}

.sticky-footer-text {
    border: 1px solid var(--bg-white);
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-main);
    padding: 5px 0;
    letter-spacing: .1em;
    width: 100%;
    display: block
}

.sticky-footer-text span {
    padding-right: 20px;
    background: url("data:image/svg+xml,%3csvg%20width='23'%20height='28'%20viewBox='0%200%2023%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M23%2014L0.500001%2027.8564L0.500002%200.143593L23%2014Z'%20fill='white'/%3e%3c/svg%3e") no-repeat right top 11px;
    background-size: 14px
}