*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'ryumin';
  src: url('font/ryumin.woff') format('woff');
}

/*16*/
@media (min-width: 1441px) {

  /*13inch、スマホ版無効*/
  .forPC13inch, .forMobile {
    display: none;
    pointer-events: none;
  }

  html,
  body {
    font-family: ryumin;
    width: 1728px;
    display: block;
    height: 1573px;
    overflow-x: hidden;
    /* justify-content: center;
      align-items: center; */
      cursor: url('img/cursor.png'), url('img/cursor.webp'), auto;
  }

  .link2025 {
    position: fixed;
    left: 23.56px;
    top: 27.48px;
    width: 182.496px;
    height: 28.512px;
    z-index: 10;
    cursor: url('img/cursor.png'), url('img/cursor.webp'), auto;
  }


  h1 {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: relative;
    font-size: 53px;
    font-weight: normal;
    font-family: ryumin;
    color: black;
    writing-mode: horizontal-tb;
    transform: scale(0.9, 1);
    line-height: 1;
  }


  .p2 {
    font-size: 20px;
    line-height: 50px;
    transform: scale(0.9, 1);
    letter-spacing: 0em;
    margin-bottom: 2em;
  }

  .p3 {
    font-size: 20px;
    line-height: 40px;
    transform: scale(0.9, 1);
    letter-spacing: 0em;
    margin-bottom: 2em;
  }



  .attention {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 160.0px;
    top: 102.6px;
  }

  .attentiontx {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 90.25px;
    top: 248.8px;
  }



  /*-------ptここから---------*/
  .pt1 {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 62.27px;
    top: 88.0px;
    width: 88.28px;
    height: 83.7px;
  }

  .pt2 {
    position: absolute;
    left: 181.0px;
    top: 166.9px;
    width: 446.6px;
    height: 10.4px;
  }

  .pt3 {
    position: absolute;
    left: 1037.9px;
    top: 168.6px;
    width: 590.5px;
    height: 468.9px;
  }

  .pt4 {
    position: absolute;
    left: 1223.2px;
    top: 765.9px;
    width: 190.7px;
    height: 194.3px;
  }

  .pt5 {
    position: absolute;
    left: 1434.6px;
    top: 949.0px;
    width: 190.7px;
    height: 194.38px;
  }

  .pt6 {
    position: absolute;
    left: 846.0px;
    top: 1007.7px;
    width: 195.7px;
    height: 193.6px;
  }

  .pt7 {
    position: absolute;
    left: 1055.4px;
    top: 1178.6px;
    width: 249.5px;
    height: 257.8px;
  }

  /*-------ptここまで---------*/


  /*-------追加 花咲アニメーション---------*/
  @keyframes hanasaka-anim {
    0% {
      transform: scale(0.0);
    }

    100% {
      transform: scale(1);
    }
  }

  .hanasaka {
    visibility: hidden;
    z-index: 2;
  }

  .hanasaka.is-animated1 {
    animation: hanasaka-anim 0.6s cubic-bezier(.15, .88, .54, .97);
    visibility: visible;
  }

  /* 非表示の状態 */
  .hidden {
    opacity: 0;
    /* 見えなくする */
    pointer-events: none;
    /* ユーザー操作を無効化 */
  }
}

/*13*/
@media (max-width: 1440px) and (min-width: 800px) {

  /*16inch、スマホ版無効*/
  .forPC16inch, .forMobile {
    display: none;
    pointer-events: none;
  }

  * {
    cursor: url('img/cursor.png'), url('img/cursor.webp'), auto;
  }

  html,
  body {
    font-family: ryumin;
    width: 1440px;
    display: block;
    height: 1311px;
    overflow-x: hidden;
    /* justify-content: center;
      align-items: center; */
  }

  .link2025 {
    position: fixed;
    left: 23.56px;
    top: 27.48px;
    width: 182.496px;
    height: 28.512px;
    z-index: 10;
    cursor: url('img/cursor.png'), url('img/cursor.webp'), auto;
  }


  h1 {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: relative;
    font-size: 44px;
    font-weight: normal;
    font-family: ryumin;
    color: black;
    writing-mode: horizontal-tb;
    transform: scale(0.9, 1);
    line-height: 1;
  }


  .p2 {
    font-size: 17px;
    line-height: 50px;
    transform: scale(0.9, 1);
    letter-spacing: 0em;
    margin-bottom: 2em;
  }

  .p3 {
    font-size: 17px;
    line-height: 40px;
    transform: scale(0.9, 1);
    letter-spacing: 0em;
    margin-bottom: 2em;
  }



  .attention {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 130.5px;
    top: 85.0px;
  }

  .attentiontx {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 75.5px;
    top: 207.7px;
  }



  /*-------ptここから---------*/
  .pt1 {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    left: 51.6px;
    top: 72.3px;
    width: 73.5px;
    height: 69.1px;
  }

  .pt2 {
    position: absolute;
    left: 145.5px;
    top: 139.5px;
    width: 372.2px;
    height: 8.7px;
  }

  .pt3 {
    position: absolute;
    left: 864.8px;
    top: 140.5px;
    width: 492.1px;
    height: 390.8px;
  }

  .pt4 {
    position: absolute;
    left: 1019.5px;
    top: 638.6px;
    width: 158.9px;
    height: 162.1px;
  }

  .pt5 {
    position: absolute;
    left: 1195.7px;
    top: 791.2px;
    width: 158.9px;
    height: 162.1px;
  }

  .pt6 {
    position: absolute;
    left: 705.2px;
    top: 840.1px;
    width: 163.1px;
    height: 161.4px;
  }

  .pt7 {
    position: absolute;
    left: 875.2px;
    top: 982.5px;
    width: 208.1px;
    height: 214.8px;
  }

  /*-------ptここまで---------*/


  /*-------追加 花咲アニメーション---------*/
  @keyframes hanasaka-anim {
    0% {
      transform: scale(0.0);
    }

    100% {
      transform: scale(1);
    }
  }

  .hanasaka {
    visibility: hidden;
    z-index: 2;
  }

  .hanasaka.is-animated1 {
    animation: hanasaka-anim 0.6s cubic-bezier(.15, .88, .54, .97);
    visibility: visible;
  }

  /* 非表示の状態 */
  .hidden {
    opacity: 0;
    /* 見えなくする */
    pointer-events: none;
    /* ユーザー操作を無効化 */
  }
}

/*mobile*/
@media (max-width: 800px) {

  /*13inch、16inch無効*/
  .forPC13inch, .forPC16inch{
    display: none;
    pointer-events: none;
  }

  /*トップページ戻る*/
  .link2025 {
    position: fixed;
    left: 3%;
    top: 3%;
    width: 152.08px;
    height: 23.76px;
    cursor: pointer;
    z-index: 10;
    cursor: url('img/cursor13.webp'), auto;
  }

  h1 {
    /* border: 2px dashed rgb(235, 135, 135); */
    position: absolute;
    font-size: 28px;
    font-weight: normal;
    font-family: ryumin;
    color: black;
    writing-mode: horizontal-tb;
    transform: scale(0.9, 1);
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .p1 {
    font-size: 17px;
    line-height: 29px;
    transform: scale(0.9, 1);
    letter-spacing: -0.05em;
  }


  body {
    font-family: ryumin;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    /*background: url('img/bg.png') no-repeat center center fixed;*/
    background-color: white;
    background-size: cover;

    height: 240svh;
    /*余白消す用*/

    position: absolute;
  }

  .content {
    position: absolute;
    width: 100svw;
    margin: 0 auto;
    /* 中央揃え */
    height: 100%;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    top:3%;/*戻るボタンの分下にずらす*/
  }

  .responsive-container {
    width: 100svw;
    /* ビューポート幅いっぱい */
    aspect-ratio: 430 / 9217.583;
    /* 比率を維持 */
    /*background: linear-gradient(90deg, #3498db, #9b59b6); /* テスト用背景色 */
    background-color: white;
    position: relative;
    /* 子要素の配置基準 */
    overflow: hidden;
    /* 必要に応じて隠す */

    height: 436.26213svw;
  }


  /*-----------attention--------------*/
  .attentions {
    top: 1.5%;
    left: 3.3164svw;
    position: absolute;
    width: 100svw;
    height: 100svh;
  }

  .at1 {
    /*!*/
    /*top:3.022324%;*/
    top: 0%;
    left: 0svw;
    height: auto;
    width: 10.3092svw;
    position: absolute;
  }

  .at2 {
    /*線*/
    top: 6%;
    left: 12.48414svw;
    height: auto;
    width: 52.2949svw;
    position: absolute;
  }

  .attention {
    top: 0.3%;
    left: 8svw;
    width: 100vw;
    position: absolute;
  }



  /*----------画像------------*/
  .pt1 {
    /*カラーコーン*/
    top: 8.38564%;
    left: 69.39601svw;
    height: auto;
    width: 27.39652svw;
    position: absolute;
  }

  .pt2 {
    /*自転車*/
    top: 16.750249%;
    left: 59.23928svw;
    height: auto;
    width: 20.40759svw;
    position: absolute;
  }

  .pt3 {
    /*車*/
    top: 20.809681%;
    left: 77.02175svw;
    height: auto;
    width: 19.9908svw;
    position: absolute;
  }

  .pt4 {
    /*map*/
    top: 28.347957%;
    left: 19.46726svw;
    height: auto;
    width: 75.99552svw;
    position: absolute;
  }

  .pt5 {
    /*タバコ*/
    top: 61.729514%;
    left: 66.16572svw;
    height: auto;
    width: 22.32581svw;
    position: absolute;
  }

  .pt6 {
    /*food*/
    top: 65.100241%;
    left: 19.46419svw;
    height: auto;
    width: 27.39652svw;
    position: absolute;
  }


  /*----------テキスト------------*/
  .attentiontxs {
    left: 4.82537svw;
  }

  .attentiontx {
    top: 6%;
    position: absolute;
  }

  .attentiontx2 {
    top: 22.275635%;
    position: absolute;
  }

  .attentiontx3 {
    top: 42.630426%;
    position: absolute;
  }

  /*-------追加 花咲アニメーション---------*/
  @keyframes hanasaka-anim {
    0% {
      transform: scale(0.0);
    }

    100% {
      transform: scale(1);
    }
  }

  .hanasaka {
    visibility: hidden;
    z-index: 2;
  }

  .hanasaka.is-animated1 {
    animation: hanasaka-anim 0.6s cubic-bezier(.15, .88, .54, .97);
    visibility: visible;
  }

  /* 非表示の状態 */
  .hidden {
    opacity: 0;
    /* 見えなくする */
    pointer-events: none;
    /* ユーザー操作を無効化 */
  }
}