@charset "utf-8";

/********************************

全ページ共通のcss

cssを書いてあれ？って思ったら共通のcssを見て見てください！
面倒だったらなぎのに声かけてくださーい！

Jquery関連のCSSは別のファイルを用意します！

*********************************/
/**********************
レイアウト
**********************/
.flex {
    display: flex;
}

.grid {
    display: grid;
}

.layout-box {
    width: 90%;
    margin: auto;
}

.blank-area {
    height: 170px;
}

.other-layout header {
    height: clamp(5.625rem, -2.428rem + 34.359vw, 18.188rem);
}

.title-area {
    position: relative;
    width: 100%;
}

.title-area h1 {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
    letter-spacing: 0.2rem;
}

.title-area img {
    width: 100%;
    height: clamp(8.75rem, -13.686rem + 95.726vw, 43.75rem);
    object-fit: cover;
}

.only-pc {
    display: none;
}

/**********************
文字設定
**********************/
* {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

p {
    font-size: 0.875rem;
    line-height: 1.875rem;
    letter-spacing: 0.1rem;
}

a {
    color: #000;
}

/* a:hover {
    color: #C8D55B;
} */

h2 {
    font-size: 1.25rem;
}

.text-white {
    color: #fff;
}

.text-main {
    color: #002031;
}

.text-base {
    color: #EBE6D8;
}

.text-accent1 {
    color: #9F7D55;
}

.text-accent2 {
    color: #D5A35B;
}

ul li {
    list-style-type: none;
}



/**********************
余白の設定
**********************/
.mb-170 {
    margin-bottom: 10.625rem;
}

.mb-50 {
    margin-bottom: 3.125rem;
}



/**********************
カラー
**********************/
.bg-white {
    background: #fff;
}

.bg-black {
    background: #000;
}

.bg-main {
    background: #002031;
}

.bg-base {
    background: #EBE6D8;
}

.bg-accent1 {
    background: #9F7D55;
}

.bg-accent2 {
    background: #D5A35B;
}



/**********************
パンクズリスト
**********************/
#breadcrumb {
    margin: 1rem auto 6.25rem 0;
}

#breadcrumb ul {
    display: flex;
    list-style-type: none;
    font-size: 0.75rem;
}

#breadcrumb li {
    color: #9f7d55;
}

#breadcrumb li::after {
    content: ">";
    padding: 0 0.5rem;
}

#breadcrumb li:last-child::after {
    content: "";
}

#breadcrumb a {
    text-decoration: none;
    color: #666;
}



/**********************
ハンバーガーメニュー
**********************/
/* menu.cssという専用のCSSを用意しています。 */
header {
    position: relative;
}

header .nav {
    position: absolute;
    right: 0;
    z-index: 9999;
}



/**********************
ヘッダー
**********************/
.other-layout header {
    width: 90%;
    margin: auto;
}

#artist-list header,
#place header,
#artist-intro header,
#contact header {
    height: 3.75rem;
}

header .p-fixed {
    position: fixed;
    top: 0;
}






/**********************
フッター
**********************/
footer {
    background-position: center;
    background-image: url(../images/footer_img.webp);
    display: flex;
    height: 100vh;
    max-height: 41.6875rem;
    text-align: center;
    background-color: #000;
    flex-wrap: wrap;
    position: relative;
}

footer div {
    width: clamp(21.25rem, -3.590rem + 105.983vw, 60rem);
    margin: auto;
    margin-bottom: 1rem;
}

footer ul.flex {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    justify-content: space-around;
    border-bottom: 1px solid #BCBCBC;

}

footer a {
    text-decoration: none;
    font-size: 0.75rem;
}

footer a:visited {
    color: #a4a4a4;
}

footer .sns-box {
    position: absolute;
    gap: 1.5625rem;
    justify-content: center;
    margin: auto;
    width: 100%;
    bottom: 37%;
}

footer .sns-box {
    flex-grow: 2;
}

footer .sns-box a img {
    width: 1.25rem;
}

.footer-nav {
    flex-grow: 1;
    max-width: 60rem;
}

.footer-nav a {
    color: #a4a4a4;
}

footer small {
    color: #666;
}

.footer-nav .flex {
    display: flex;
    flex-wrap: wrap;
}

.footer-nav .flex li {
    padding-left: 35px;
    align-items: center;
}

.footer-nav .flex li:nth-child(1) {
    padding-left: 0;
}

.footer-nav .flex li:nth-child(6) {
    padding-right: 35px;
}

footer ul.flex {
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;

}

footer div {
    margin-bottom: 0.1rem;
}




/********************************

TOP

*********************************/
#top h2 {
    text-align: center;
    padding: 3.125rem 0;
    margin: auto;
}

#top .main-backimage {
    position: relative;
    width: 100%;
    height: 100vh;
}

#top .top-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: clamp(3.938rem, 3.739rem + 0.845vw, 4.5rem);
}



/**********************
スクロールダウン
**********************/
.scrolldown1,
.scrolldown3 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    right: 10%;
    bottom: 10px;
    /*全体の高さ*/
    height: 50px;
    /* writing-mode: vertical-rl; */
}

.scrolldown1 span.scroll-text {
    writing-mode: vertical-rl;
}

/*Scrollテキストの描写*/
.scrolldown1 span.scroll-text {
    /*描画位置*/
    position: absolute;
    left: -6px;
    top: -40px;
    /*テキストの形状*/
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after,
.scrolldown2::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 30px;
    background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 1;
    }

    30% {
        height: 50px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 100px;
        opacity: 1;
    }
}



/**********************
ABOUT
**********************/
#top .intro {
    position: relative;
    color: #fff;
}

#top .intro {
    background-position: center;
    background-size: cover;
    background-image: url(../images/top_about_bgi.jpg);
    padding-bottom: 3.125rem;
}

#top .intro br {
    display: none;
}

#top .intro p {
    margin-bottom: 2rem;
}

#top .intro p:first-child {
    margin-bottom: 0;
}

#top .intro span.attention {
    font-size: 1.0999999934rem;
    font-weight: bold;
}




/**********************
お知らせ
**********************/

#top .news .grid {
    grid-template-columns: 30% 1fr;
    gap: 10px;
}

#top .news .item1 {
    grid-row: 1/2;
    grid-column: 1/2;
    width: 100%;
}

#top .news .item2 {
    grid-row: 1/2;
    grid-column: 2/3;
}

#top .news .item3 {
    grid-row: 2/3;
    grid-column: 1/3;
}

.scrolldown2 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    left: 10%;
    bottom: -10px;
    /*全体の高さ*/
    height: 50px;
    /* writing-mode: vertical-rl; */
}

.news {
    padding: 3.125rem 0;
    color: #fff;
}

#top .news h2 {
    margin: 0;
    padding: 0;
}

.news div.flex {
    align-items: flex-end;
}

.news-image {
    width: 70%;
}

.accordion-area {
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
}

.accordion-area li {
    margin: 10px 0;
    border-bottom: 1px solid #fff;
}

/*アコーディオンタイトル*/
.title {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: normal;
    padding: 3% 20px 3% 3%;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #fff;

}

.title::before {
    top: 48%;
    /* left: 15px; */
    right: 0;
    transform: rotate(0deg);

}

.title::after {
    top: 48%;
    /* left: 15px; */
    right: 0;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/
.title.close::before {
    transform: rotate(45deg);
}

.title.close::after {
    transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /*はじめは非表示*/
    /* background: #f3f3f3; */
    margin: 0 3% 3% 3%;
    padding: 3%;
}


/**********************
会場
**********************/
#top .place {
    text-align: center;
}

#top .place address {
    margin-bottom: 1.5625rem;
    line-height: 30px;
}

#top .place p {
    margin-bottom: clamp(2.875rem, 2.127rem + 3.192vw, 5rem);
}

a.spritemenu {
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    background: url(../images/top_kaijo_btn.webp);
    width: 356px;
    height: 89px;
    display: block;
    padding-top: 10px;
    text-align: center;
    color: #fff;
    margin: auto;
}

a.spritemenu:hover {
    background-position: left bottom;
}



/**********************
チケット
**********************/
.ticket table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2.75rem;
}

.ticket>p>a:visited {
    color: #000;
}

.ticket caption {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #000;
}

.ticket tr {
    border-bottom: 1px solid #dccccc;
}

.ticket th,
.ticket td {
    letter-spacing: 0.4rem;
    font-size: 0.875rem;
    width: 50%;
    text-align: center;
    padding: 1.125rem;
}

.ticket tr:nth-child(2n) {
    background: #E8DCC5;
}

.ticket>p {
    margin-bottom: 2.5rem;
    letter-spacing: .2rem;
}

.ticket .campaign h3 {
    font-size: 0.875rem;
}

.ticket .campaign p,
.ticket .campaign small {
    letter-spacing: 0.2rem;
}

.campaign h3 {
    width: fit-content;
    border-bottom: 2px solid #9F7D55;
}

.btn-box {
    margin: 3.4375rem auto 11.25rem;
    width: 18.75rem;
}

.btn-box .btn {
    display: inline-block;
    font-size: 1rem;
    width: 100%;
    background-color: #9F7D55;
    color: #fff;
    padding: 1.375rem 1.5rem;
    transition: .5s;
    text-align: center;
    text-decoration: none;
}


/**********************
SNS
**********************/
.instagram-box {
    margin: 3.4375rem auto 11.25rem;
    width: 18.75rem;
}

.instagram-box .btn {
    display: inline-block;
    font-size: 1rem;
    width: 100%;
    color: #000;
    border: 2px solid #000;
    padding: 1.375rem 1.5rem;
    transition: .5s;
    text-align: center;
    text-decoration: none;
}


/**********************
主催紹介
**********************/
.team-logo img {
    margin: 0 auto;
    width: 30%;
}

/**********************
協賛
***********************/
.kyo-san {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.kyo-san img {
    width: 33.3%;
}

.kyo-san10,
.kyo-san11 {
    margin: 0 auto;
}





/********************************

作家一覧

*********************************/
/**********************
ページ内共通css
**********************/
#artist-list .list a {
    text-decoration: none;
}

#artist-list .list a:visited {
    color: #000;
}

#artist-list .grid li {
    margin-top: 10.5px;
}

#artist-list .grid li .roma {
    padding-left: 10px;
    font-size: 0.75rem;
}

/* #artist-list li a:hover {
    color: #9F7D55;
} */



/**********************
ファーストビュー
**********************/
#artist-list .title-area {
    width: 100%;
    height: clamp(8.75rem, -2.870rem + 49.577vw, 41.75rem);
    background-image: url(../images/artist-top.webp);
    background-size: cover;
    background-position: center;
}



/**********************
メインコンテンツ
**********************/
#artist-list .list li {
    margin-bottom: 7.375rem;
}

#artist-list .list li {
    /* width: 100%; */
    /* width: clamp(21.125rem, -9.375rem + 63.542vw, 28.75rem); */
}

#artist-list .list img {
    width: 100%;
}

#artist-list .list li:hover {
    opacity: 0.6;
}






/********************************

作家個別紹介

*********************************/
/**********************
ページ内共通css
**********************/
#artist-info {}



/**********************
ファーストビュー
**********************/
#artist-intro .title-area {
    width: 100%;
    height: clamp(8.75rem, -2.870rem + 49.577vw, 41.75rem);
    background-image: url(../images/top_fv_slide1.jpg);
    background-size: cover;
    background-position: center;
}

#artist-intro h1 {
    writing-mode: inherit;
    text-align: left;
    margin-left: 0;
    width: 60%;
    max-width: 60rem;
}



/**********************
メインコンテンツ
**********************/
#artist-intro div.border {
    height: 1px;
    border-bottom: 1px solid #000;
    width: 70%;
    margin: 0 auto 2rem;
}

#artist-intro main {
    margin-bottom: 6.8125rem;
}

#artist-intro table th,
#artist-intro table td {
    display: block;
    width: 100%;
    text-align: left;
}

#artist-intro table th {
    width: clamp(8.438rem, 1.827rem + 28.205vw, 18.75rem);
}

#artist-intro td {
    padding-left: 4rem;
    margin-bottom: 2rem;
}

#artist-intro .personal th {
    font-size: 0.9375rem;
}

#artist-intro .personal td {
    font-size: 1.25rem;
}

#artist-intro .theme th {
    font-size: 0.75rem;
}

#artist-intro .theme td {
    font-size: 0.875rem;
}

#artist-intro .theme td:last-child {
    margin-bottom: 3.375rem;
}

#artist-intro .profile img {
    width: 100%;
    margin: auto;
}



/********************************

会場紹介

*********************************/
/**********************
ページ内共通css
**********************/
#place main {
    margin-bottom: 8.75rem;
}

#place h2 {
    text-align: center;
}

#place .title-area {
    width: 100%;
    height: clamp(8.75rem, -2.870rem + 49.577vw, 41.75rem);
    background-image: url(../images/kaijo-top.webp);
    background-size: cover;
    background-position: center;
}

#place .title-area img {
    width: 100%;
}

/**********************
ファーストビュー
**********************/




/**********************
開催場所、開催日時、ルート
**********************/
#place .infomation {
    text-align: center;
    margin-top: 5rem;
}

#place address {
    font-size: 0.875rem;
}

#place .infomation h2 {
    margin-bottom: 3rem;
}

#place .infomation div {
    margin-bottom: 5rem;
}

#place .access-box {
    background: #f5f5f5;
    margin-bottom: clamp(4.938rem, 2.077rem + 12.207vw, 13.063rem);
}

#place picture img {
    width: 100%;
    margin: auto;
}

#place .title::before,
#place .title::after {
    background-color: #000;
}

/* #place .maps .item1,
#place .maps .item2,
#place .maps .item3 {
    width: clamp(20.75rem, -4.410rem + 107.35vw, 60rem);
} */


#place .accordion-area h3 {
    font-size: 0.875rem;
}

#place .accordion-area li {
    border-bottom: 1px solid #000;
}





/**********************
googleMAP
**********************/
#place .maps {
    flex-wrap: wrap;
    row-gap: 5rem;
}

#place .maps h2 {
    margin-bottom: clamp(0.625rem, -0.978rem + 6.838vw, 3.125rem);
}

#place .visitermap-box {
    width: clamp(21.25rem, 16.563rem + 20vw, 28.563rem);
    margin: 0 auto;
}

#place .visitermap-box img {
    width: 100%;
}

.google-box {
    aspect-ratio: 1.55/1;
    margin: auto;
}

.google-box iframe {
    width: 100%;
    height: 100%;
}

.grayscale-map {
    filter: grayscale(1);
}

#place .google-box,
#place .visitermap-box {
    width: clamp(21.063rem, 16.295rem + 20.342vw, 28.5rem);
}





/********************************

プライバシーポリシー

*********************************/

.privacypolicy .title-area {
    width: 100%;
    height: clamp(8.75rem, -2.870rem + 49.577vw, 41.75rem);
    background-image: url(../images/privacy-top.webp);
    background-size: cover;
    background-position: center;
}

.privacy-policy {
    margin-top: 120px;
    font-size: 1rem;
    line-height: 1.875rem;
    letter-spacing: 0.1rem;

}

.privacy-policy dt {
    margin-top: 35px;
}

.privacy-policy dd {
    margin-top: 15px;
    padding-left: 40px;

}

main form p:nth-child(1) {
    margin-top: 50px;
}





/********************************

お問い合せ

*********************************/

#contact .title-area {
    width: 100%;
    height: clamp(8.75rem, -2.870rem + 49.577vw, 41.75rem);
    background-image: url(../images/contact-top.webp);
    background-size: cover;
    background-position: center;
}

.section-form {
    margin-bottom: 40px;
    margin-top: 80px;
}

.contact-info p {
    margin: 6px 0;
    font-size: 15px;
}

.form-note {
    font-size: 13px;
    margin-left: 10px;
}

label {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    margin-bottom: 5px;
}



input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: none;
    background-color: #f5f5f5;
    box-sizing: border-box;
}

textarea {
    height: 200px;
    resize: none;
}

.privacy {
    margin-top: 25px;
}

.consent {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}

.submit-btn {
    display: block;
    padding: 1.375rem 1.5rem;
    background-color: #95795d;
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin: 3.4375rem auto 11.25rem;
    width: 18.75rem;
    margin-top: 40px;

}

.submit-btn:hover {
    background-color: #7a634b;
}

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



    /********************************

プライバシーポリシー

*********************************/

    .privacy-policy {
        margin-top: 100px;
        font-size: 1rem;
        line-height: 1.875rem;
        letter-spacing: 0.1rem;

    }

    .privacy-policy dd {
        margin-top: 5px;
        padding-left: 15px;

    }

}


@media screen and (min-width:768px) {

    /*　画面サイズが768px以上はここを読み込む　*/
    /********************************

モバイル以上の共通CSS

*********************************/
    .layout-box {
        width: 90%;
        margin: auto;
        max-width: 960px;
    }

    header .nav {
        right: 13%;
    }

    .only-sp {
        display: none;
    }

    .only-pc {
        display: block;
    }

    #place header,
    #artist-intro header,
    #contact header,
    #artist-list header {
        height: 0;
    }

    .title-area h1 {
        writing-mode: vertical-rl;
    }



    /********************************

TOP

*********************************/
    .kyo-san {
        /* background-color: #d00c0c; */
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .kyo-san img {
        width: 25%;
    }

    .kyo-san9 {
        margin-left: 12.5%;
    }

    #top .intro h2 {
        text-align: left;
        padding: 90px 0;
    }

    #top .intro div.vertical-rl {
        writing-mode: vertical-rl;
        margin: auto;
    }

    #top .intro div br {
        display: inline;
    }

    #top .intro p {
        margin-left: 2rem;
    }

    #top .intro p:first-child {
        margin-left: 0;
    }

    #top .news .accordion {
        width: 50%;
    }

    #top .news h2 {
        text-align: left;
    }

    #top .news .grid {
        grid-template-columns: 50% 1fr;
        /* grid-template-rows: 1fr 40%; */
        column-gap: 50px;
        align-items: end;
    }

    #top .news .item1 {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    #top .news .item2 {
        grid-row: 1/3;
        grid-column: 2/3;
    }

    #top .news .item2 img {
        width: 100%;
    }

    #top .news .item3 {
        grid-row: 2/3;
        grid-column: 1/2;
    }

    #top .intro {
        color: #000;
        background: #fff;
        background-image: none;
        padding-bottom: 3.125rem;
        margin-bottom: 0;
    }

    #top main .design-blank {
        height: 29.1875rem;
        background-size: cover;
        background-position: center;
        background-image: url(../images/dt_top_about.jpg);
    }





    /********************************

作家一覧

*********************************/
    #artist-list .list {
        margin-bottom: 7.625rem;
    }

    #artist-list ul.grid {
        grid-template-columns: 1fr 1fr;
        gap: 120px 40px;
    }





    /********************************

作家紹介

*********************************/
    #artist-intro h1 {
        writing-mode: inherit;
        text-align: left;
        margin-left: 0;
        width: 90%;
        max-width: 60rem;
    }

    #artist-intro .profile {
        margin-bottom: 8.75rem;
    }

    #artist-intro table {
        table-layout: fixed;
        width: 100%;
        margin: auto;
    }

    #artist-intro table th,
    #artist-intro table td {
        display: table-cell;
        padding: 1.40625rem 0;
        width: auto;
    }

    #artist-intro table td {}

    #artist-intro table th {
        width: clamp(12.5rem, -12.664rem + 52.356vw, 18.75rem);
    }

    #artist-intro .personal th,
    #artist-intro .personal td h2,
    #artist-intro .personal td {
        font-size: 0.9375rem;
    }

    #artist-intro .personal td h2 {
        display: inline;
    }

    /* #artist-intro .table-head {
    width: 18.75rem;
} */
    #artist-intro .theme {
        margin-bottom: 11.25rem;
    }



    /********************************

会場案内

*********************************/

    #place .grid {
        /* column-gap: 2.8125rem; */
    }

    #place .grid .item1 {
        grid-column: 1/3;
    }

    #place .grid .item2 {
        grid-column: 1/2;
    }

    #place .grid .item3 {
        grid-column: 2/3;
    }

    #place .maps .visitermap-box,
    #place .maps .google-box {
        width: clamp(18.75rem, -20.250rem + 81.25vw, 28.5rem);

    }





}