/* ゴシックドゥフォントは以下3行をコピペ */
/* font-family: SicGothicDuex-HDL-E;
font-weight: 400;
font-style: normal; */

/* さつき源代明朝は以下3行をコピペ */
/* font-family: "SatsukiGendaiMincho-M", sans-serif;
font-weight: 300;
font-style: normal; */

/* 縦書き文字は以下2行をコピペ */
/* -ms-writing-mode: tb-rl; */
/* writing-mode: vertical-rl; */

main{
  font-family: "SatsukiGendaiMincho-M", sans-serif;
  font-weight: 300;
  font-style: normal;
}

@media screen and (max-width:767px) {
    /* spの人はここから記述 */
  main{
    background-color: #091E35;
    padding-top: 70px;
  }
  
  .selecter {
    background-color: #091E35;
    color: #fff;
    text-align: center;
    margin: 10vw;
  }

  .title {
    color:#fff;
    font-size: 6vw;
    margin-bottom: 6vw;
    font-family: SicGothicDuex-HDL-E;
    font-weight: 400;
    font-style: normal;
  }

  .select-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    column-gap: 5vw;
    row-gap: 7vw;
  }

  .select-button {
    background-color: #F4F8E9;
    color: #091E35;
    padding: 1.5vw 0;
    text-align: center;
    border: none; 
    display: block;
    font-size: 3.4vw;
    line-height: 1;
    border-radius: 1vw;
    font-family: SicGothicDuex-HDL-E;
    font-weight: 400;font-style: normal;
    box-sizing: border-box;
    border: 0.5vw solid #F4F8E9; 
    box-shadow:
    inset 0 0 0 2px #091E35,
    0 2px 0 rgba(0,0,0,.25);
  }

  .select-button:hover{
    background-color:#d7d7d7;
  }

  .workshop-logo{
    background-color: #0058A9;
    background-image: url(../image/event/workshop/ロゴ星あり.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    width: 100%;
    align-content: center;
    display: inline-block;
  }

  .workshop-logo h1{
    background: #F4F8E9;
    border: none;
    color: black;
    font-size: 4vw;
    font-family: SicGothicDuex-HDL-E;
    border-radius: 0.5vw;
    box-shadow: 0 0 0 0.3vw #091E35, 0 0 0 1vw #F4F8E9;

    width: 40vw;
    padding: 1vw;
      
    text-align: center;
    margin: 15vw auto 0;
    display: block;
    cursor: default;
  }

  .workshop-logo p{
    color: #FFF;
    text-align: center;
    font-family: "SatsukiGendaiMincho-M", sans-serif;
    font-size: 4vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    margin: 10vw auto 20vw;
  }

  .workshop-text{
    padding: 15vw 0 0;
  }

  .workshop-text h2{
    background: #F4F8E9;
    border: none;
    color: black;
    font-family: "SatsukiGendaiMincho-M", sans-serif;
    font-weight: 300;
    font-size: 4vw;
    border-radius: 0.5vw;
    box-shadow: 0 0 0 0.3vw #091E35, 0 0 0 1vw #F4F8E9;

    width: 40vw;
    padding: 1vw;
      
    text-align: center;
    margin: 0 auto 10vw;
    display: block;
    cursor: default;
  }

  .workshop-text h3{
    text-align: center;
    font-family: "SatsukiGendaiMincho-M", sans-serif;
    font-weight: 300;
    font-size: 3.8vw;
    
    color:#F4F8E9;
    
    display: block;
    margin: 0 auto 3.8vw;
  }

  .line{
    width: 75%;
    background-color: #F4F8E9;
    height: 0.28vw;
    margin-bottom: 3.8vw;
  }

  .workshop-text p{
    width: 60%;
    color:#F4F8E9;
    text-align: center;
    font-family: "SatsukiGendaiMincho-M", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:3.3vw;

    display: block;
    margin: 0 auto 20vw;
  }
  .workshop-list1 img , .workshop-list3 img{
    width: 80%;
    margin-left: 20%;
    margin-bottom: 10vw;
  }

  .workshop-list2 img{
    width: 80%;
    margin-bottom: 10vw;
  }

  .workshop-list2{
    background-color: #6EC6CD;
  }

  .workshop-list2 h2 , .workshop-list2 h3 , .workshop-list2 p{
    color: #000;
  }

  .reverse{
    background-color: #000;
    margin-left: auto; 
    margin-right: 0;
  }
}


@media screen and (min-width:768px) {
    /* pcの人はここから記述 */
    main{
        padding-top:80px;
        background-color: #091E35; /* ← ここを追加または変更 */
    }

    .event-menu-container {
        background-color: #091E35; /* 画像の背景色 */
        padding: 80px 0 100px; /* 上下の余白 */
        margin: 0 auto; /* 中央寄せ */
        text-align: center; /* タイトルとボタンを中央寄せ */
    }

    .event-title {
        color: white; /* 文字色 */
        font-size: 3rem;
        margin-bottom: 70px; /* タイトル下の余白 */
        font-family: SicGothicDuex-HDL-E; /* フォントを指定 */
        font-weight: 400;
        font-style: normal;
    }

    .event-buttons {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 70px 0;
        margin: 0 auto;
        width: 80%;
        justify-items: center;
    }

    .event-button {
        background: #F4F8E9;
        border: none;
        color: black;
        font-size: 2.2vw;
        font-family: SicGothicDuex-HDL-E;
        font-weight: 400;
        font-style: normal;
        border-radius: 0.2vw;
        padding: 0.5vw 0;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 0 0 0.1vw #091E35, 0 0 0 0.5vw #F4F8E9;
        text-align: center;
        width: 20vw;
        max-height: 73px;
        max-width: 500px;
    }

    .event-buttons a:nth-child(5){
        grid-column: 2 / 3;
    }

    .event-button:hover {
        background-color: #d7d7d7; /* ホバー時の色 */
    }

    .workshop{
        width:100%;
        /* text-align: center; */
        margin: 0 auto;
    }

    .workshop-logo{
      background-color: #0058A9;
      background-image: url(../image/event/workshop/ロゴ星あり.png);
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: center;
      width: 100%;
      align-content: center;
      display: inline-block;
    }

    .workshop-logo h1{
      background: #F4F8E9;
      border: none;
      color: black;
      font-size: 2.2vw;
      font-family: SicGothicDuex-HDL-E;
      font-weight: 400;
      font-style: normal;
      border-radius: 6px;
      transition: 0.3s;
      box-shadow: 0 0 0 3px #091E35, 0 0 0 8px #F4F8E9;

      width: 20vw;
      max-height: 73px;
      max-width: 500px;
        
      text-align: center;
      margin: 10vw auto;
      display: block;
      cursor: default;
    }

    .workshop-logo p{
      color: #FFF;
      text-align: center;
      font-family: "SatsukiGendaiMincho-M", sans-serif;
      font-size: clamp(20px , 1.8vw , 30px);
      font-style: normal;
      font-weight: 500;
      line-height: normal;

      margin: 10vw auto 15vw;
    }




    .workshop-list{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;

      width:100%;
      height:auto;
      align-items: center;
      background-color:#091E35;
    }

    .reverse {
      background-color: #6EC6CD;
    }
    .workshop-text{
      grid-area: 1 / 1 / 2 / 2;
    }
    .workshop-img{
      grid-area: 1 / 2 / 2 / 4;
    }
    .reverse .workshop-text{
      grid-area: 1 / 3 / 2 / 4;
    }
    .reverse .workshop-img{
      grid-area: 1 / 1 / 2 / 3;
    }

    .workshop-text h2{
        background-color:#F4F8E9;
        text-align: center;
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size:2vw;

        width: 70%;
        padding: 2%;
        
        border:5px solid #F4F8E9;
        border-radius: 9px;
        box-shadow: inset 0 0 0 1px #091E35;

        display: block;
        margin: 0 auto 2vw;
    }

    .workshop-text h3{
        text-align: center;
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size:1.8vw;
        
        color:#F4F8E9;
        border-bottom: 1px solid #F4F8E9;
        
        display: block;
        padding-bottom: 1.8vw;
        margin: 0 auto 1.8vw;
    }

    .workshop-text p{
        color:#F4F8E9;
        text-align: center;
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size:1.4vw;

        display: block;
        margin: 0 auto;
    }

    .workshop-img {
        width:100%;
        height: auto;
        margin: 5vw 0;
    }
    /* pcの人はここまで記述 */
}