/*
  1. より直感的なボックスサイズのモデルを使用
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. デフォルトのマージンを削除
  */
  * {
    margin: 0;
  }
  /*
    3. 高さは%ベースを使用
  */

  /*
    タイポグラフィの微調整
    4. アクセシブルなline-heightを追加
    5. テキストのレンダリングを改善
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    max-width: 1366px;
    margin: 0 auto;
    
  }

  @media (max-width: 750px) {
   body{font-size: 14px;
  }
  }
  
  /*
    6. メディア要素のデフォルトを改善
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    7. フォームのfontに関するデフォルトを削除
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    8. テキストのオーバーフローを回避
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    9. ルートのスタックコンテキストを作成
  */
  #root, #__next {
    isolation: isolate;
  }

  ol{
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
  }
  ol > li{
    counter-increment: ol_cnt;
  }
  li{
    list-style: none;
}
a{
    text-decoration: none;
    display: table;
}
.kugiri_m {
    padding: 25px 0;
}

  /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PC SP 切り替え
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: inline-block!important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
      display: none !important;
  }

  .sp {
      display: block !important;
  }
}

@media screen and (min-width: 751px) {
  .br_sp {
      display: none;
  }
}

@media screen and (max-width: 750px) {
  .br_pc {
      display: none;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コーダー向け汎用クラス　＞　縦横のサイズ固定のボックス内にある画像について、比率を保ったまま縦横中央揃え＆トリミングして表示
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 4:3の箱を用意する */
.img_container {
    position: relative;
    /* パディングへのパーセント指定が親ボックスの横幅基準で計算される性質を利用する */
    /* padding-top: 66.6666%; */
    padding-top: 75%;
    overflow: hidden;
}

.img_container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* 画像の高さを画像コンテナの高さに収める（4:3画像がアップされた場合に隙間が空かない様に考慮し、15%のゆとりを持たせる） */
    /* height: 115%!important; */
    /* width: auto; */
    height: 100%!important;
    width: 100%;
    /* ▼background-size:cover的に動作する */
    object-fit: cover;
    /* IE対策（併せて「ofi.js」を読み込むことではじめて正しく機能する） */
    font-family: 'object-fit: cover;';
}
/* 併せて画像の拡大も行なうバージョン */
.zoom_container .img_container img {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.zoom_container:hover .img_container img {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    -ms-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

.base_width {
    max-width: 1089px;
    margin: 0 auto;
    width: 95%;
}


@media (max-width: 750px) {
.base_width {
    min-width: auto;
    width: calc(100% - 30px);
    }
    
}

.f_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}