@charset "UTF-8";

/* すべてのspanにinline-block
　　レスポンシブ 改行対応用 */
span{
    display: inline-block;
}

/* グローバルメニュー */
.ticket-menu img{
    opacity: 0.5;
}
.ticket-menu p{
    opacity: 0.5;
}

/* メイン */
main{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%;
}

/* チケット */
.ticket{
    background-color: white;
    padding: 0 40px 40px 40px;
    border-top: solid 6px #FF9D00;
    margin: 150px auto 50px auto;
}

/* チケット情報　タイトル */
.ticket-title{
    display: flex;
    font-family: 'Zen Maru Gothic', serif;
    margin-top: 35px;
    padding-bottom: 20px;
    border-bottom: solid 1px #707070;
}
.ticket-title img{
    height: 100%;
    padding-top: 10px;
    margin-right: 10px;
    transform: rotate(-30deg);
}
h2{
    font-size: 1.5rem;
}
.ticket-title p{
    font-size: 0.75rem;
    padding-left: 10px;
}

/* フレックス 共通 */
.flex{
    display: flex;
    justify-content: space-between;
}
.subtitle span{
    color: black;
}
.flex-illust{
    width: 20%;
    padding: 1%;
}
.flex-illust2{
    padding: 20px 80px 0 0;
}
.flex-illust img{
    width: 110px;
}

.flex-in{
    width: 60%;
    padding: 0 2%;
}

/* サブタイトル 共通 */
.subtitle{
    display: inline-block;
    color: #2BA017;
    font-family: 'Zen Maru Gothic', serif;
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: solid 2px #5EBA4E;
    margin: 20px 0;
    padding-bottom: 10px;
}

/* セクションごと　共通 */
.net,
.madoguchi,
.tel{
    width: 90%;
    text-align: center;
    border: solid 3px #FF9D00;
    border-radius: 10px;
    margin: 30px auto;
    background-color: #FCFDE5;
}

/* インターネットでお求め */
.link{
    margin: 0 auto;
    width: 150px;
    text-align: center;
    background-color: #5EBA4E;
    border-radius: 5px;
    box-shadow: 0 5px 0 #358D26;
}
.link a{
    color: white;
    font-size: 1rem;
    padding: 10px;
}

/* 詳しく見るボタン押した時の設定 */
.link:active{
    transform: translateY(5px);
    box-shadow: none;
}
.link:hover{
    opacity: 0.9;
}


/* 窓口でお求め*/
.madoguchi{
    padding-bottom: 30px;
}

/* 遠方の方*/
.link2{
    margin: 0 auto;
    margin-bottom: 30px;
    width: 230px;
    text-align: center;
    background-color: #5EBA4E;
    border-radius: 5px;
    box-shadow: 0 5px 0 #358D26;
}
.link2 a{
    color: white;
    font-size: 1rem;
    padding: 10px;
}

/* 詳しく見るボタン押した時の設定 */
.link2:active{
    transform: translateY(5px);
    box-shadow: none;
}
.link2:hover{
    opacity: 0.9;
}


/* 電話番号　共通 */
.red{
    color: red;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
}
.number{
    font-size: 1.75rem;
}

/* ご注意 */
.attention{
    width: 90%;
    margin: 40px auto;
    border: solid 1px red;
    padding: 20px 5px;
}
.center{
    text-align: left;
    display: inline-block;
}
.attention ul{
    margin-top: 10px;
}
.attention li{
    list-style: disc outside;
    margin-left: 20px;
}

/* ご予約フローチャート */
.flow{
    width: 90%;
    border: solid 1px #5EBA4E;
    margin: 0 auto 30px;
    padding: 0 20px 30px;
    background-color: white;
}

/* 三角矢印共通 */
.triangle{
    background: #5EBA4E;
    height: calc(tan(40deg) * 40px / 2);
    width: 60px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 10px auto;
}

/* ご予約の流れ */
.flow .ul-in{
    border: solid 1px #5EBA4E;
    padding: 10px;
}
.flow li img{
    width: 100px;
    margin-top: 10px;
}

/* 遠方の方のご予約の流れ */
.enpou{
    margin-top: 50px;
}

/* 口座番号 */
.kouza{
    border: solid 1px red;
    margin: 20px auto;
}
.kouza-in{
    padding: 10px;
    display: inline-block;
    text-align: left;
    font-size: 1.25rem;
}

/* 米印 */
.left{
    display: inline-block;
    text-align: left;
}


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

    /* チケット */
    .ticket{
        padding: 0 20px 40px 20px;
    }

    /* イベント情報　タイトル */
    h2{
        font-size: 1.375rem;
    }
    
    /* フレックス 共通 */
    .flex{
        flex-direction: column;
    }
    .subtitle{
        margin-bottom: 20px;
        font-size: 1.25rem;
    }
    .flex-illust{
        width: 100%;
    }
    .flex-illust img{
        width: 100px;
        margin-top: 20px;
    }
    .flex-illust2{
        padding: 0 0 15px 0;
    }
    .flex-in{
        width: 100%;
    }
    .net,
    .madoguchi,
    .tel{
        width: 100%;
    }
    
    /* インターネットでお求め */
    .link{
        margin: 0 auto;
    }

    /* 電話番号　共通 */
    .number{
        margin-top: 20px;
        font-size: 1.2rem;
    }
    
    /* ご注意 */
    .attention{
        margin: 20px auto 30px auto;
        padding: 10px 2% 15px;
    }

    /* 口座番号 */
    .kouza-in{
        font-size: 0.875rem;
    }

}