@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap');

/* ヘッダー　ナビゲーション */
#header_navs {
    background: url(../images/background_board.png);
    background-repeat: repeat;
}

/* メイン */
main {
    background: url(../images/background_board.png);
    background-repeat: repeat;
}

/* メインビジュアル */
#mainvisual {
    max-width: 1100px;
    margin: 0 auto;
    height: 740px;
    position: relative;
}

#mainvisual_container {
    width: 1100px;
    height: 810px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#mainvisual_container img {
    pointer-events: none;
}

#mainvisual_paper {
    width: 458px;
    position: absolute;
    top: 70px;
    left: 476px;
}

#mainvisual_liquid {
    width: 414px;
    position: absolute;
    top: 81px;
    left: 216px;
}

#mainvisual_cafe {
    width: 170px;
    position: absolute;
    top: 262px;
    left: 609px;
}

#mainvisual_mistery {
    width: 164px;
    position: absolute;
    top: 258px;
    left: 330px;
}

#mainvisual_pen {
    width: 500px;
    position: absolute;
    top: 477px;
    left: 178px;
}

#mainvisual_key {
    width: 216px;
    position: absolute;
    top: 70px;
    left: 54px;
}

#mainvisual_beans {
    width: 172px;
    position: absolute;
    top: 76px;
    left: 728px;
}

#mainvisual_coffee {
    width: 430px;
    position: absolute;
    top: 296px;
    left: 654px;
}

#mainvisual_text {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.1em;
    margin: 0;
    color: #333333;
    position: absolute;
    bottom: 44px;
    left: 40px;
}

/* 私たちについて */
.section_container#about {
    position: relative;
    padding: 32px 0 48px 24px;
    overflow: hidden;
}

#about_paper {
    max-width: 544px;
    height: 660px;
    background: url(../images/about_paper.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 108px 56px 136px;
}

.section_title#section_title_about {
    color: #582a1c;
}

.section_title#section_title_about span {
    color: #582a1c;
}

.section_title#section_title_about span:before {
    background: #582a1c;
}

.section_title#section_title_about span:after {
    background: #582a1c;
}

#about_text {
    margin-top: 60px;
}

#about_text p {
    font-size: 16px;
    font-weight: 400;
    color: #582a1c;
    line-height: 150%;
}

#about_text p+p {
    margin-top: 40px;
}

#about_coffee {
    position: absolute;
    top: 74px;
    left: 620px;
    width: 225px;
    transform: rotate(-10deg);
}

#about_hitotoki {
    position: absolute;
    top: 261px;
    left: 699px;
    width: 315px;
    transform: rotate(15deg);
}

/* 内装 */
#interior {
    position: relative;
}

#interior_space {
    margin: 80px -80px 0;
    display: flex;
    position: relative;
}

.interior_space_content {
    width: 50%;
    text-align: center;
    padding: 48px 0 60px;
    background: #582a1c;
    overflow: hidden;
}

#interior_space_white {
    background: #f5f4f0;
}

.interior_space_content h3 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 100%;
    color: #f5f4f0;
    margin: 0;
}

#interior_space_white h3 {
    color: #582a1c;
}

.interior_space_content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    color: #f5f4f0;
    margin: 0;
    margin-top: 20px;
}

#interior_space_white p {
    color: #582a1c;
}

.interior_space_content img {
    width: 88%;
    margin-top: 40px;
    border-radius: 8px;
}

#interior_space_link {
    text-align: right;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    color: #f5f4f0;
    width: 76.83%;
    margin: 0 auto;
    margin-top: 16px;
}

#interior_space_link a {
    color: #3ea3c2;
    transition: opacity 0.3s;
}

#interior_space_link a:hover {
    opacity: 0.6;
}

#interior_border {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#interior_text {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    color: #333333;
    max-width: 432px;
    margin-top: 72px;
}

#interior_text a {
    color: #3ea3c2;
    transition: opacity 0.3s;
}

#interior_text a:hover {
    opacity: 0.6;
}

#interior_types {
    width: 100%;
    margin-top: 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 80px 35px;
}

.interior_type {
    width: 290px;
    height: 353px;
    box-shadow: -4px 14px 11px #3333337d;
    position: relative;
}

#interior_type_detective {
    background: url(../images/interior_detective.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#interior_type_camp {
    background: url(../images/interior_camp.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#interior_type_meusium {
    background: url(../images/interior_meusium.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#interior_tape1 {
    position: absolute;
    top: -21px;
    left: 106px;
    width: 77px;
}

#interior_tape2 {
    position: absolute;
    top: -22px;
    left: 103px;
    width: 104px;
    transform: rotate(-30deg);
}

#interior_tape3 {
    position: absolute;
    top: -29px;
    left: 68px;
    width: 119px;
    transform: rotate(75deg);
}

.interior_type h4 {
    position: absolute;
    top: 286px;
    left: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 100%;
    color: #582a1c;
    margin: 0;
}

.interior_date {
    position: absolute;
    bottom: 16px;
    right: 20px;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.interior_date p {
    font-family: "Oswald";
    font-weight: lighter;
    font-size: 32px;
    line-height: 100%;
    color: #f5f4f0;
    margin: 0;
}

.interior_date img {
    width: 8px;
}

.interior_date p.interior_year {
    font-size: 14px;
    transform: translateX(16px) translateY(1px) rotate(-90deg);
}

/* スタッフ */
#staff {
    position: relative;
}

#staff_items {
    margin: 32px -52px;
    height: 606px;
    position: relative;
}

.staff_item {
    display: block;
    width: 573px;
    height: 606px;
}

#staff_cafe {
    background: url(../images/staff_cafe.png);
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#staff_mistery {
    background: url(../images/staff_mistery.png);
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

#staff_cafe.lower,
#staff_mistery.lower {
    z-index: 1;
}

#staff_cafe.fadeIn {
    animation: cafe_fadeIn 0.8s forwards;
}

@keyframes cafe_fadeIn {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }

    50% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

#staff_mistery.fadeIn {
    animation: mistery_fadeIn 0.8s forwards;
}

@keyframes mistery_fadeIn {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }

    50% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.staff_item h4 {
    position: absolute;
    top: 104px;
    left: 300px;
    transform: rotate(-9.8deg);
    font-size: 32px;
    font-weight: 500;
    line-height: 150%;
    color: #582a1c;
}

.staff_item img {
    position: absolute;
    top: 227px;
    left: 259px;
    width: 182px;
}

.staff_item p {
    all: unset;
    position: absolute;
    top: 316px;
    left: 122px;
    width: 372px;
    font-size: 16px;
    font-weight: 300;
    line-height: 200%;
    color: #333333;
    transform: rotate(-4.8deg);
}

/* シナリオ */
.section_link {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    margin-top: 8px;
    color: #3ea3c2;
    transition: opacity 0.3s;
}

.section_link:hover {
    opacity: 0.6;
}

#scenario h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 100%;
    color: #582a1c;
    margin-top: 40px;
}

#scenario h3 span {
    font-family: "Oswald";
    font-size: 16px;
    font-weight: lighter;
    letter-spacing: 0.1em;
    margin-left: 8px;
}

#scenario_items {
    margin-top: 40px;
    display: flex;
    gap: 80px 8.5%;
    flex-wrap: wrap;
    justify-content: center;
}

#scenario_items a {
    width: 430px;
    height: 430px;
    transition: opacity 0.3s;
}

#scenario_items a:hover {
    opacity: 0.6;
}

/* メニュー */
#menu {
    width: 100%;
    background-color: #582a1c;
    padding-bottom: 100px;
}

#menu_container {
    position: relative;
    padding-bottom: 140px;
}

.section_title#section_title_menu {
    color: #f5f4f0;
}

.section_title#section_title_menu span {
    color: #f5f4f0;
}

.section_title#section_title_menu span:before {
    background: #f5f4f0;
}

.section_title#section_title_menu span:after {
    background: #f5f4f0;
}

.menu_line {
    width: 8.091%;
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform-origin: center;
}

#menu_arrow {
    width: 8.909%;
}

#menu_items {
    max-width: 940px;
    margin: 74px auto 0;
    display: flex;
    gap: 80px;
    justify-content: center;
}

.menu_item {
    width: 100%;
    text-align: center;
    color: #f5f4f0;
}

.menu_item img {
    width: 100%;
}

.menu_item h4 {
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin-top: 20px;
}

.menu_item p {
    font-family: "Oswald";
    font-size: 56px;
    font-weight: normal;
    margin: 0;
    line-height: 100%;
}

.menu_item p span {
    font-family: "Noto Sans JP";
    font-size: 24px;
    font-weight: 400;
    margin-left: 4px;
    vertical-align: 3px;
}

#menu_link {
    all: unset;
    display: block;
    background: #f5f4f0;
    color: #582a1c;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 100%;
    padding: 22px 32px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 80px;
    transition: opacity 0.3s;
}

#menu_link:hover {
    opacity: 0.6;
}

/* イベント */
#event_text {
    font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    color: #333333;
    margin: 0;
    margin-top: 64px;
}

.event_none_text {
    font-size: 24px;
    font-weight: 400;
    line-height: 200%;
    color: #333333;
    margin: 0;
    margin-top: 80px;
}

.event_item {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    gap: 0 40px;
    align-items: start;
}

.event_item+.event_item {
    margin-top: 96px;
}

.event_banner {
    width: 40%;
}

.event_banner img {
    width: 100%;
}

.event_banner a {
    all: unset;
    display: block;
    width: 80.47%;
    margin: 40px auto 0;
    padding: 21px 0;
    text-align: center;
    background: #582a1c;
    font-size: 16px;
    font-weight: 400;
    color: #f5f4f0;
    letter-spacing: 0.1em;
    line-height: 100%;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.event_banner a:hover {
    opacity: 0.6;
}

.event_item table {
    width: 56%;
    border-collapse: collapse;
}

.event_item table td {
    padding: 24px;
    border: 1px solid #33333366;
    color: #333333;
    font-weight: 400;
    line-height: 150%;
}

.event_item table .table_title {
    width: 24.6%;
    background: #582a1c66;
    border-left: none;
    text-align: center;
}

.event_item tr:first-child td {
    border-top: none;
}

.event_item tr:last-child td {
    border-bottom: none;
}

.event_item table .table_text {
    background: #f5f4f066;
    border-right: none;
}

.event_item table td a {
    display: block;
    color: #3ea3c2;
    transition: opacity 0.3s;
}

.event_item table td a:hover {
    opacity: 0.6;
}

/* 営業時間 */
#open {
    width: 80%;
    margin: 0 auto;
    background-color: #582a1c;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.section_title#section_title_open {
    color: #f5f4f0;
}

.section_title#section_title_open span {
    color: #f5f4f0;
}

.section_title#section_title_open span:before {
    background: #f5f4f0;
}

.section_title#section_title_open span:after {
    background: #f5f4f0;
}

#open_time {
    font-size: 56px;
    font-weight: 400;
    line-height: 100%;
    margin: 0;
    margin-top: 64px;
    color: #f5f4f0;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#open_time span {
    vertical-align: 6px;
    margin: 0 8px;
}

#open_close {
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
    margin: 0;
    margin-top: 24px;
    color: #f5f4f0;
    text-align: center;
}

#open_close span {
    margin-left: 24px;
}

/* アクセス */
#access {
    width: 80%;
    margin: 0 auto;
    background-color: #f5f4f0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.section_title#section_title_access {
    color: #582a1c;
}

.section_title#section_title_access span {
    color: #582a1c;
}

.section_title#section_title_access span:before {
    background: #582a1c;
}

.section_title#section_title_access span:after {
    background: #582a1c;
}

#access_walk {
    font-size: 40px;
    font-weight: 400;
    line-height: 125%;
    margin: 0;
    margin-top: 64px;
    color: #582a1c;
    text-align: center;
}

#access_address {
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    margin: 0;
    margin-top: 40px;
    color: #582a1c;
    text-align: center;
}

#access_address span {
    margin-left: 16px;
}

#access_tel {
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    margin: 0;
    margin-top: 16px;
    color: #582a1c;
    text-align: center;
}

#access_tel span {
    margin-left: 16px;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    /* メインビジュアル */
    #mainvisual {
        max-width: none;
        width: 100vw;
        height: 1308px;
        overflow: hidden;
    }

    #mainvisual_container {
        width: 767px;
        height: 1308px;
    }

    #mainvisual_paper {
        width: 458px;
        position: absolute;
        top: 565px;
        left: 154px;
    }

    #mainvisual_liquid {
        width: 414px;
        position: absolute;
        top: 288px;
        left: 176px;
    }

    #mainvisual_cafe {
        width: 170px;
        position: absolute;
        top: 757px;
        left: 287px;
    }

    #mainvisual_mistery {
        width: 164px;
        position: absolute;
        top: 465px;
        left: 290px;
    }

    #mainvisual_pen {
        width: 500px;
        position: absolute;
        top: 163px;
        left: 227px;
    }

    #mainvisual_key {
        width: 216px;
        position: absolute;
        top: 72px;
        left: 112px;
    }

    #mainvisual_beans {
        width: 172px;
        position: absolute;
        top: 789px;
        left: 117px;
    }

    #mainvisual_coffee {
        width: 430px;
        position: absolute;
        top: 863px;
        left: 221px;
    }

    #mainvisual_text {
        left: 8vw;
    }

    /* 私たちについて */
    .section_container#about {
        padding: 0;
    }

    #about_paper {
        max-width: none;
        width: 100vw;
        height: 121.5vw;
        padding: 20vw 8vw 20vw;
    }

    #about_container {
        width: 84vw;
        height: 78vw;
        margin: 0 auto;
        overflow: scroll;
    }

    #about_text {
        margin-top: 96px;
    }

    #about_text p {
        text-align: center;
    }

    #about_coffee {
        display: none;
    }

    #about_hitotoki {
        display: none;
    }

    /* 内装 */
    #interior_space {
        margin: 111px -8vw 0;
        display: block;
    }

    .interior_space_content {
        width: 100%;
        padding: 64px 8vw;
    }

    .interior_space_content h3 {
        font-size: 48px;
    }

    .interior_space_content p {
        font-size: 24px;
        margin-top: 32px;
    }

    .interior_space_content img {
        width: 100%;
        margin-top: 56px;
        border-radius: 1.695vw;
    }

    #interior_space_link {
        line-height: 100%;
        color: #f5f4f0;
        width: 100%;
        margin: 0;
        margin-top: 16px;
    }

    #interior_space_link a {
        transition: opacity 0s;
    }

    #interior_space_link a:hover {
        opacity: 1;
    }

    #interior_border {
        width: 100%;
        height: auto;
        position: initial;
        top: auto;
        left: auto;
        transform: initial;
        margin: -16px 0;
    }

    #interior_text {
        text-align: center;
        font-size: 16px;
        max-width: none;
        margin-top: 72px;
    }

    #interior_text a {
        transition: opacity 0s;
    }

    #interior_text a:hover {
        opacity: 1;
    }

    #interior_types {
        display: block;
        flex-wrap: initial;
        gap: 0px;
    }

    .interior_type {
        margin: 0 auto;
    }

    .interior_type+.interior_type {
        margin-top: 96px;
    }

    /* スタッフ */
    #staff {
        overflow-x: scroll;
    }

    #staff_items {
        width: 70%;
        margin: 80px auto 0;
        height: 1105px;
    }

    .staff_item {
        pointer-events: none;
    }

    #staff_cafe {
        top: 0;
        left: -10%;
    }

    #staff_mistery {
        top: 500px;
        right: auto;
        left: -10%;
    }

    /* シナリオ */
    .section_link {
        margin-top: 48px;
        transition: opacity 0s;
        text-align: center;
    }

    .section_link:hover {
        opacity: 1;
    }

    #scenario h3 {
        margin-top: 56px;
        text-align: center;
    }

    #scenario h3 span {
        display: block;
        margin-left: 0;
    }

    #scenario_items {
        margin-top: 56px;
        display: block;
        gap: 0;
        flex-wrap: initial;
        justify-content: initial;
    }

    #scenario_items a {
        display: block;
        width: 84vw;
        height: 84vw;
        transition: opacity 0s;
    }

    #scenario_items a+a {
        margin-top: 80px;
    }

    #scenario_items a:hover {
        opacity: 1;
    }

    /* メニュー */
    #menu {
        padding-bottom: 120px;
        overflow: hidden;
    }

    #menu_container {
        padding-bottom: 225px;
    }

    .menu_line {
        width: 200px;
        top: 0;
    }

    #menu_arrow {
        width: 218px;
    }

    #menu_items {
        max-width: 84vw;
        margin-top: 150px;
        display: block;
        gap: 0;
        justify-content: initial;
    }

    .menu_item+.menu_item {
        margin-top: 104px;
    }

    .menu_item img {
        max-width: 320px;
    }

    #menu_link {
        padding: 22px 0;
        width: 84vw;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        transition: opacity 0s;
    }

    #menu_link:hover {
        opacity: 1;
    }

    /* イベント */
    #event_text {
        margin-top: 96px;
        text-align: center;
    }

    .event_none_text {
        text-align: center;
    }

    .event_item {
        margin-top: 96px;
        display: block;
        justify-content: initial;
        gap: 0;
        align-items: initial;
        position: relative;
    }

    .event_banner {
        width: 100%;
    }

    .event_banner a {
        width: 84vw;
        margin: 36px auto 0;
        transition: opacity 0s;
    }

    .event_banner a:hover {
        opacity: 1;
    }

    .event_item table {
        width: 100%;
        margin-top: 40px;
    }

    .event_item table td {
        padding: 16px;
    }

    .event_item table .table_title {
        width: 30%;
    }

    .event_item table td a {
        transition: opacity 0s;
    }

    .event_item table td a:hover {
        opacity: 1;
    }

    /* 営業時間 */
    #open_time {
        margin-top: 96px;
    }

    /* アクセス */
    #access_walk {
        margin-top: 96px;
    }
}