@charset "UTF-8";

/* ベースのスタイル */
main{
    /* background-image: url(../img/22208429.jpg); */
    background-color: black;
    background-position: center;
    background-size: cover;
}
.main {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0 0 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    max-width: 1000px;
    margin: 0 auto;
}

.h1 {
    background-color: #F90001;
    color: white;
    padding: .3em 1em;
    margin-top: 2em;
    text-align: center;
}

.red-line {
    height: 5px; /* 線の太さを設定 */
    background-color: #F90001; /* 線の色を赤に設定 */
    margin-bottom: 1em;
}

.line {
    display: inline-block;
}

.red-text {
    color: rgb(197, 36, 36);
    font-weight: bold;
}

.blue-text {
    color: rgb(0, 102, 255);
    font-weight: bold;
}

/*-----------------------
店舗情報 
 -----------------------*/
.store-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: #313131 1px solid;
    background-color: #fff;
    padding: 2em 1em 0em;
    margin: 2em 1em;
}

.store-img {
    width: 30%;
    height: auto;
    margin-right: 3em;
}

.store-info {
    display: flex;
    align-items: center;
    margin-bottom: 3em;
}


.store-info-item {
    font-size: 1.5em;
    margin-bottom: 1em;
}
.store-info-detail {
    background-color: #F90001;
    padding: 1em 3em;
    color: #fff;
    text-align: center;
    margin-bottom: 1em;
}

/*-----------------------
星評価画像
 -----------------------*/
 .rating-img {
    width: 100%;
}

/* 評価画像と評価の数字を横並びに表示 */
.rating-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.rating-image {
    flex: 5;
    display: flex;
    justify-content: center;
    width: 100%;
}
.rating-image img{
    width: 100%;
}

.rating-score {
    flex: 5;
    font-size: 2.2em;
    font-weight: bold;
    text-align: left;
    padding-top: 2px;
    padding-left: 10px;
}
.rating-score span{
    font-size: .6em;
    padding-top: 0;
    padding-bottom: 3px;
}
.event-count {
    color: rgb(100, 100, 100); /* 灰色 */
}


/*-----------------------
イベント情報 
 -----------------------*/
.event-info {
    width: 90%;
    margin: 0 auto;
}

.event-info-title {
    font-size: 2em;
}

.event-title {
    font-size: 1.5em;
}

.event-detail li {
    font-size: 1.2em;
    margin: .5em 3em;
}

/*-----------------------
結果のテーブル
 -----------------------*/


.hilight-content {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 2em;
}
.hilight-content img{
    width: 100%;
}

.hilight-table {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    border-spacing: 8px; /* セルの間の余白 */
}
.gif-content {
    width: 100%;
    text-align: center;
    top: 0;
    position: absolute;
    max-width: 100%;
  }
  
  .gif-content img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
  }
.content{
    position: relative;
    background-image: url(../img/6.jpg);
    background-position: top center;
    width: 100%;
    padding-top: 200px;
    background-size: cover;
}

.table-title {
    font-size: 2em;
    background: linear-gradient(to bottom, white 80%, #ccc 100%);
    font-family: "Times New Roman", serif;
    padding: 0.2em .5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* 文字に白い縁取りと影をつける */
    color: #333;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         2px  2px 3px rgba(0, 0, 0, 0.3);
}

/* セルを独立させるように見せる */
.table-item {
    background-clip: padding-box;
    padding: 0.75em 0.5em;
    text-align: center;
    font-size: 1.5em;
}

/* 1〜3位用のセル背景 */
.top3-bg {
    background-image: url(../img/gold.jpg);
    background-size: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* 順位セル専用の中央寄せ＋大きい文字 */
.rank-cell {
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* 4位以降の順位セルにも共通背景 */
.normal-bg {
    background: linear-gradient(to bottom, #e0e0e0, #cfcfcf);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    background-image: url(../img/silver.jpg);
    background-size: cover;
}

/* 行全体の背景色指定は打ち消す（セル個別に背景を設定するため） */
tr:nth-child(odd),
tr:nth-child(even) {
    background: none !important;
}

/* テーブル全体の枠をなくす */
.hilight-table,
.hilight-table th,
.hilight-table td {
    border: none;
    border-collapse: separate;
}

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

    .h1 {
        background-color: #F90001;
        color: white;
        padding: .3em 1em;
        margin-top: 2em;
        font-size: 1.5em;
    }
    
    /*-----------------------
    店舗情報 
     -----------------------*/
    .store-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: #313131 1px solid;
        background-color: #fff;
        padding: 2em 1em;
        margin: 1em 1em;
    }
    
    .store-img {
        width: 100%;
        height: auto;
        margin-right: 0em;
    }
    
    .store-info {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-bottom: 1.5em;
    }
    
    
    .store-info-item {
        font-size: 1em;
        margin-bottom: .5em;
    }
    

    
    /*-----------------------
    星評価画像
     -----------------------*/
    .rating-img {
        width: 100%;
    }
    
    /*-----------------------
    イベント情報 
     -----------------------*/
    
    .event-info-title {
        font-size: 1.5em;
    }
    
    .event-title {
        font-size: 1.2em;
    }
    
    .event-detail li {
        font-size: 1em;
        
    }
    
    /*-----------------------
    結果のテーブル
     -----------------------*/
    
     .hilight-table {
        width: 100%;
        padding: 1em;
    }
    
    .hilight-content {
        width: 90%;
        margin: 0 auto 2em;
    }
    

    
    .table-title {
        font-size: 1.1em;
        background-color: yellow;
    }
    
    .table-item {
        font-size: 1.0em;
        text-align: center;
    }
    

    .content{
        background-image: url(../img/6.jpg);
        background-position: top center;
        width: 100%;
        padding-top: 100px;
    }



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

.h1 {
    background-color: #F90001;
    color: white;
    padding: .3em 1em;
    margin-top: 2em;
    font-size: 1.5em;
}

/*-----------------------
店舗情報 
 -----------------------*/
.store-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: #313131 1px solid;
    background-color: #fff;
    padding: 2em 1em;
    margin: 1em 1em;
}

.store-img {
    width: 100%;
    height: auto;
    margin-right: 0em;
}

.store-info {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 1.5em;
}


.store-info-item {
    font-size: 1em;
    margin-bottom: .5em;
}

.store-info-detail {
    background-color: #F90001;
    padding: 1em 3em;
    color: #fff;
    text-align: center;
}

.rating-score {
    flex: 5;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    padding-top: 2px;
    padding-left: 10px;
}

/*-----------------------
星評価画像
 -----------------------*/
.rating-img {
    width: 100%;
}

/*-----------------------
イベント情報 
 -----------------------*/

.event-info-title {
    font-size: 1.5em;
}

.event-title {
    font-size: 1.2em;
}

.event-detail li {
    font-size: 1em;
    
}

/*-----------------------
結果のテーブル
 -----------------------*/


.hilight-content {
    width: 90%;
    margin: 0 auto 2em;
}

.hilight-table {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

.table-title {
    font-size: .9em;
    background-color: yellow;
}

.table-item {
    font-size: .6em;
    text-align: center;
}

/* 奇数行を青に */
tr:nth-child(odd) {
    background-color: #e3f2fd; /* 薄い青色 */
}
/* 偶数行を白に */
tr:nth-child(even) {
    background-color: #ffffff; /* 白色 */
}
.hilight-table {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    border-spacing: 4px; /* セルの間の余白 */
}

.mobile-large {
    font-size: 1em;
  }
/* レスポンシブ対応 */
@media (max-width: 450px) {

    .list {
    justify-content: left;
    gap: 10px;
    }
}



/* 全ての地域共通のスタイル */
.region {
    font-weight: bold;
    text-decoration: none;
}
.input{
    background: white;
    padding: 10px;
    border: #555 solid 1px;
}


/* ここまで */
.first_title{
    background-color: #F90001;
    color: white;
    padding: .3em 1em;
    margin-bottom: .5em;
}

.second_title{
    background-color: #004ff9;
    color: white;
    padding: .3em 1em;
    margin-top: 3em;
    margin-bottom: .5em;
}
.right_side li{
    width: 100%;
    list-style: none;
    margin-bottom: 1em;
    border: 1px solid #4b4b4b;
}
.event_list{
    width: 100%;
    height: 100px;
    position: relative;
}
.event_list h3{
    width: 100%;
    font-size: 1.7em;
    background-image: url(../img/22435299.jpg);
    background-size: cover;
    height: 60px;
    color: white;
    padding: 10px 0 0 120px;
}

.event_list a{
    padding-left: 120px;
    display: block;
    height: 40px;
    background-color: white;
    text-decoration: none;
    font-weight: bold;
    color: #535353;
}

.event_list a img{
    height: 25px;
    padding-left: 20px;
    padding-top: 12px;
    width: auto;
}

.left_pic{
    top: 5px;
    left: 5px;
    position: absolute;
    width: 90px;
    height: 90px;
}

.left_pic img{
    width: 100%;
    height: 100%;
}

/* ここまで */


.info-box{
    padding: 2em 0;
}

.info-box{
    border-radius: 2em;
}
.info-title{
    padding: .5em 1em;
    background-color: #c2b8ae;
}
.info-content{
    padding: .5em 1em;
    background-color: #fafafa;
    margin-bottom: 1.5em;
}
.info-content a{
    color: #333;
    text-decoration: none;
}





/* ここまで */


.tab-1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin-top: 1em;
}

.tab-1 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-1 > label:hover {
    opacity: .8;
}

.tab-1 input {
    display: none;
}

.tab-1 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-1 label:has(:checked) {
    background-color: #fff;
    border-color: #d02525 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab-1 label:has(:checked) + div {
    display: block;
}

/* ここまで */

.event-group { margin-bottom: 30px; }
.event-date { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }
.event-item { display: flex; align-items: center; margin-bottom: 10px; }
.event-img { width: 100px; height: 100px; margin-right: 20px; }
.event-name { font-size: 1.2em; margin-bottom: 5px; }
.ticket-time { color: gray; }

@media screen and (max-width: 450px) {
    .tab-1 > label {
        flex: 1 1;
        order: -1;
        min-width: 70px;
        padding: .7em 1em .5em;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
        background-color: #e9f0f6;
        color: #535353;
        font-size: .7em;
        text-align: center;
        cursor: pointer;
    }
    .event-item img {
        width: 55px;
        height: 55px;
        margin-right: 30px;
    }
    .shop_name {
        text-decoration: none;
        color: #313131;
        margin-left: 10px;
        font-size: .8em;
    }
    .region {
        font-weight: bold;
        text-decoration: none;
        font-size: 1em;
    }
  }

  /* ここまで */

  
  .right_side_responsive ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.right_side_responsive li{
    width: 100%;
    max-width: 290px;
    list-style: none;
    border: 1px solid #4b4b4b;
}

.right_side_responsive{
    display: none;
}

@media screen and (max-width: 900px) {
    
    .right_side_responsive{
        display: block;
    }
  }

@media screen and (max-width: 600px) {
    
    .right_side_responsive ul{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .right_side_responsive li{
        width: 100%;
        max-width: 100%;
    }
    
  }
}
}

.event_name{
    max-width: 600px;
    width: 100%;
}
.event_name img{
    width: 100%;
}
.shop_photo{
    width: 100%;
    max-width: 500px;
    margin: 1em auto 0;
}
.shop_photo img{
    width: 100%;
}
.red_letters{
        max-width: 600px;
        margin: 100px auto 0px auto;
    }
    .red_letters img{
        width: 100%;
    }
.white_letters{
        max-width: 500px;
        margin: 0 auto;
    }
    .white_letters img{
        width: 100%;
    }
/* .red_letters{
    text-align: center;
    margin: 1em auto 0em;
    font-size: 3em;
        color: red;
        font-weight: bold;
        text-shadow:
        内側の白枠（1px）
        0 0 0 white,
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white,
         0   -1px 0 white,
         0    1px 0 white,
        -1px  0px 0 white,
         1px  0px 0 white,
    
        -2px -2px 0 black,
         2px -2px 0 black,
        -2px  2px 0 black,
         2px  2px 0 black,
         0   -2px 0 black,
         0    2px 0 black,
        -2px  0px 0 black,
         2px  0px 0 black,
    
        -3px -3px 0 white,
         3px -3px 0 white,
        -3px  3px 0 white,
         3px  3px 0 white,
         0   -3px 0 white,
         0    3px 0 white,
        -3px  0px 0 white,
         3px  0px 0 white;
        } */
/* .white_letters {
    text-align: center;
    margin: 0 auto 1em;
    font-size: 2.2em;
    color: white;
    font-weight: bold;
    text-shadow:
    0 0 0 black,
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black,
     0   -1px 0 black,
     0    1px 0 black,
    -1px  0px 0 black,
     1px  0px 0 black,

    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white,
     0   -2px 0 white,
     0    2px 0 white,
    -2px  0px 0 white,
     2px  0px 0 white;
    } */

    .shimazu_photo{
        max-width: 800px;
        width: 100%;
        padding: 1em;
    }
    .shimazu_photo p{
        margin-top: 1.5em;
        color: white;
        font-size: larger;
        font-weight: bolder;
    }
    .shimazu_photo img{
        width: 100%;
    }
    .shimazu_letter{
        width: 100%;
        margin-top: 2em;
        padding-top: 20px;
        text-align: center;
        position: relative;
        max-width: 100%;
    }
    .shimazu_letter > img{
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    @media screen and (max-width: 1000px) {
    
        .main {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1.5em;
            max-width: 1000px;
            margin: 0 auto;
        }
      }
      .gold {
        background-image: url(../img/1262855.jpg);
        background-size: cover;
        background-position: center;
        font-weight: bold;
        color: #FFD700;
        background-clip: padding-box;
        -webkit-background-clip: padding-box;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7),
                     0 0 5px #FFD700,
                     0 0 10px #FFA500;
    }
    
    .silver {
        background-image: url(../img/1262855.jpg);
        background-size: cover;
        background-position: center;
        font-weight: bold;
        color: #C0C0C0;
        background-clip: padding-box;
        -webkit-background-clip: padding-box;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                     0 0 4px #C0C0C0,
                     0 0 8px #A9A9A9;
    }
    
    .bronze {
        background-image: url(../img/1262855.jpg);
        background-size: cover;
        background-position: center;
        font-weight: bold;
        color: #CD7F32;
        background-clip: padding-box;
        -webkit-background-clip: padding-box;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                     0 0 4px #CD7F32,
                     0 0 8px #8B4513;
    }
    .gold_frame {
        /* background-image: url(../img/14613727.png); */
        background-position: center center;
        background-size: cover;
        padding: 5em 2em 0em 2em;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    /* .gold_frame::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 0;
        width: 100%;
        height: 70%;
        background: rgba(255, 255, 255, 0.15); 
        pointer-events: none;
        z-index: 1;
        transform: rotate(15deg); 
        box-shadow: 0 0 80px rgba(255, 255, 255, 0.25); 
        filter: blur(10px); 
    } */

    .soon {
        font-family: "Boldonse", system-ui;
        font-weight: 400;
        font-style: normal;
        font-size: 3em;
        color: white;
        margin: 2.5em 1em;
        width: 100%;
        text-align: center;
      }
    .soon_shimazu {
        font-family: "Boldonse", system-ui;
        font-weight: 400!important;
        font-style: normal;
        font-size: 3em!important;
        color: white!important;
        margin: 2.5em 1em 2.5em 0em;
        width: 100%;
        text-align: center;
      }
    @media screen and (max-width: 700px) {
        .red_letters{
            text-align: center;
            margin: 1em auto 0em;
            font-size: 1.4em;
                color: red;
                font-weight: bold;
                text-shadow:
                /* 内側の白枠（1px） */
                0 0 0 white,
                -1px -1px 0 white,
                 1px -1px 0 white,
                -1px  1px 0 white,
                 1px  1px 0 white,
                 0   -1px 0 white,
                 0    1px 0 white,
                -1px  0px 0 white,
                 1px  0px 0 white,
            
                /* 中間の黒枠（2px） */
                -2px -2px 0 black,
                 2px -2px 0 black,
                -2px  2px 0 black,
                 2px  2px 0 black,
                 0   -2px 0 black,
                 0    2px 0 black,
                -2px  0px 0 black,
                 2px  0px 0 black,
            
                /* 外側の白枠（3px） */
                -3px -3px 0 white,
                 3px -3px 0 white,
                -3px  3px 0 white,
                 3px  3px 0 white,
                 0   -3px 0 white,
                 0    3px 0 white,
                -3px  0px 0 white,
                 3px  0px 0 white;
                }
        .white_letters {
            text-align: center;
            margin: 0 auto 1em;
            font-size: 1.4em;
            color: white;
            font-weight: bold;
            text-shadow:
            /* 内側の黒枠（1px） */
            0 0 0 black,
            -1px -1px 0 black,
             1px -1px 0 black,
            -1px  1px 0 black,
             1px  1px 0 black,
             0   -1px 0 black,
             0    1px 0 black,
            -1px  0px 0 black,
             1px  0px 0 black,
        
            /* 外側の白枠（2px） */
            -2px -2px 0 white,
             2px -2px 0 white,
            -2px  2px 0 white,
             2px  2px 0 white,
             0   -2px 0 white,
             0    2px 0 white,
            -2px  0px 0 white,
             2px  0px 0 white;
            }
            .soon {
              font-family: "Boldonse", system-ui;
              font-weight: 400;
              font-style: normal;
              font-size: 1.5em;
              color: white;
      
            }
                .soon_shimazu {
        font-family: "Boldonse", system-ui;
        font-weight: 400!important;
        font-style: normal;
        font-size: 1.5em!important;
        color: white!important;
        width: 100%;
        text-align: center;
      }
      }