@charset "utf-8";
/*——————————————————————
base
——————————————————————*/
html {
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-family: "Noto Sans JP", "Zen Kaku Gothic Antique", sans-serif,
    "Noto Serif JP", "Zen Maru Gothic", serif,"source-han-sans-japanese", sans-serif;
  color: #3e3e3e;
  margin: auto;
}
* {
  margin: 0;
  padding: 0;
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #3e3e3e;
}

* {
  box-sizing: border-box;
}

.body_wrapper {
  overflow: hidden;
}

/*——————————————————————
————————————————————————
全体設定
————————————————————————
——————————————————————*/

.display_flex,
.display_flex-s {
  display: flex;
}

.display_flex.space-between {
  justify-content: space-between;
}

.space._00 {
  height: 0.4rem;
}

.space._01 {
  height: 1rem;
}

.space._02 {
  height: 2rem;
}

.space._03 {
  height: 3rem;
}

.space._04 {
  height: 4rem;
}

.space._05 {
  height: 5rem;
}

.space._06 {
  height: 6rem;
}

.space._08 {
  height: 8rem;
}

.space._10 {
  height: 10rem;
}

.space._16 {
  height: 16rem;
}

.left-00,
.left-01 {
  position: absolute;
  width: 114rem;
  margin: 0 auto;
  right: 0;
  left: 0;
}

/*——————————————————————
hタグフォント指定講習
hタグは基本そのままで使うこと
hタグの前にclass名をつけない
——————————————————————*/


h2 {
  font-size: 3.6rem;
  font-weight: bold;
  line-height: normal;
}

h2 span {
  padding: 1rem;
  font-size: 1.8rem;
  font-weight: 400;
}

h2 p {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3rem;
  padding: 2rem 0;
}

h2 span.span-s {
  position: absolute;
}

h3 {
  width: auto;
  font-size: 3.6rem;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 4.8rem;
  letter-spacing: 0.3rem;
  color: rgba(255,255,255,1);
  justify-content: space-between;
  align-items: center;
}

.about_title.sumi
{
  color: rgba(47,47,47,1);
}

h3 img{
  margin-left: 2rem;
}

.line_b,.line_l{
  display: block;
  width: 4px;
  height: auto;
  display: block;
  background:  rgba(255,255,255,1);
}

.line_b.sumi,.line_l.sumi{
  background: rgba(47,47,47,1);
}

.line_l{
  width: 1px;
  margin: 0 1rem;
}

.h3_box.center{
  width: auto;
  justify-content: center;
}

h4 {
  font-size: 1.6rem;
}

h4 p {
  font-weight: 600;
}

/*——————————————————————
tableの基礎設定
——————————————————————*/

.tables_item td {
  font-size: 1.6rem;
  font-family: "source-han-sans-japanese", sans-serif;
  letter-spacing: 0.1rem;
  padding: 1.6rem;
}

.tables_item._01{
  width: 100%;
}

.tables_item._01 td {
  border-bottom: solid rgba(47,47,47,1) 1px;
}

/*表組の一番上に線 (複数下線をborder-bottomで指定している場合 border-topの場合はすべて逆指示+last-childに)*/
.tables_item._01:first-child {
  border-top: solid rgba(47,47,47,1) 1px;
}

/*——————————————————————
メインBOX指定
——————————————————————*/

/*-----------------------------
fieldはセンター配置指示のみ
field基本幅指定のみで使用する
幅等の支持は._00〜を付与し指定すること
-----------------------------*/

.field {
  margin: 0 auto;
}

.field._01 {
  position: relative;
  width: 100%;
  height: 100%;
}

.field._02 {
  width: 136rem;
}

.field._04 {
  position: relative;
}

/*-------------------------------------------
.entry,.innerは.field._01等で指示した幅(高)に対し
色・写真等の配置、paddingの指定をする
-------------------------------------------*/
.entry {
  /* background: #fff;*/
  filter: drop-shadow(4px 4px 20px rgba(62, 62, 62, 0.1));
  padding: 4rem;
  justify-content: space-between;
}

.entry._01 {
  width: 100%;
  height: 160rem;
}

.entry._02 {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: none;
}

.entry._02.glay{
  background-color: rgba(189,190,189,1);
  filter: none;
  position: relative;
}

.entry._02 {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: none;
}

.entry._03 {
  width: 100%;
  height: 50rem;
}

.entry._04 {
  position: relative;
  padding: 0;
  width: 100%;
  background-image: url(/assets/img/top/calendar_back.jpg);
  background-position: bottom center;
  background-attachment: fixed;
  justify-content: center;
  background-size: cover;
}

.entry._04::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(47,47,47,0.6);
  mix-blend-mode: multiply;
  z-index: -1;
}

.entry._05 {
  padding: 0 8rem;
  background: rgba(255,255,255,1);
}

.entry._07 {
  position: relative;
  background: transparent;
  height: 300rem;
  overflow: hidden;
  padding: 16rem 0;
}

.entry._08 {
  max-width: 108rem;
  margin: 0 auto;
  padding: 0;
}


.entry._09 {
  width: 100rem;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.entry.gray_space{
  background: rgba(189,190,189,1);
  filter: none;
  height: 50rem;
}

.inner._01 {
  
}

.inner._02 {
  width: 96rem;
}

.about_item{
  padding-left: 20rem;
}

.inner._02.center {
  margin: 0 auto;  
}

.inner._03 {
  padding: 6rem 4rem;
  background: #fff;
}

.inner._04 {
  z-index: 1;
}

.inner._05 {
  justify-content: space-between;
}

.inner._06 {
  background: #fff;
}





/*————————————————————————————————
border設定 ※基本的にmarginは入れない
————————————————————————————————*/

.border {
  height: 0.2rem;
  background: #e2e2e2;
}

.border._01 {
  width: 4.8rem;
}

.border._01._a {
  background: #3e3e3e;
}

.border._02 {
  width: 4.8rem;
  margin: 2.2rem 0;
}

.border._03 {
  display: block;
  width:  calc(100% - 16rem);
  height: 1px;
  background: rgba(255, 255, 255,.6);
  align-items: start;
  margin: 0 auto;
}

/*———————————————————————————————————————
fadeInアクションの一例
translateの()内で縦軸・横軸の
移動量を指示する(.is-showのclass付与)でJQ発動
.inBoxはjQ発動前の位置
————————————————————————————————————————*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 1s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 0;
}

.inBox {
  margin: 2.2rem 0;
}

/*——————————————————————
scroll_down 設定の一例
——————————————————————*/
.scroll_down {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 10rem;
  background-color: #3e3e3e;
  left: 50%;
  bottom: 0;
}

.scroll_down p {
  margin: 0 auto;
  margin-left: -18px;
  margin-top: -16px;
}

.scroll_down span {
  position: absolute;
  top: 8px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /*-webkit-animation: sdb 2s infinite;*/
  animation: sdb 2s infinite;
  border: 1px solid #3e3e3e;
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-68px, 68px);
    opacity: 0;
  }
}
/*scroll_down一例 ここまで*/

/*——————————————————————
ナビメニュー
——————————————————————*/
.header_nav {
  justify-content: space-between;
  /*align-items: center;*/
}

.header_inner {
  width: 100%;
  margin: 0 auto;
  top: 3.2rem;
  position: absolute;
  z-index: 999;
}

.global_menu{
  width: 53.8rem;
}

.navArea{
  max-width: 127rem;
  text-align: center;
  margin: 0 auto;
  padding: 0 5rem;
  justify-content: space-between;
}

.menu {
  height: 8rem;
  text-align: center;
  justify-content: center;
  align-items: flex-start;
}

.nav_circle{
  display: block;
  width: 6rem;
  height: 6rem;
  background: rgba(255,255,255,1);
  border-radius: 999rem;
  border: 1px solid rgba(47,47,47,1);
  margin-bottom: 0.5rem;
}

.link_link{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*———————————0124追記———————————*/
.header_nav .menu p {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  color: rgba(47, 47, 47,1);
  transition: 0.4s;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1));
}
/*———————————ここまで———————————*/



/*PCスクロールしたらハンバーガー*/



  .toggle_btn.pc-only_01{
    display: block;
    position: fixed;
    width: 6rem;
    height: 6rem;
    top: 3rem;
    right: 3rem;
    background: rgba(47, 47, 47, 1);
    border: 2px solid rgba(255,255,255,1);
    border-radius: 1rem;
    transition: .3s;
    z-index: 9999;
  }

  .toggle_btn.pc-only_01 span {
    display: block;
    position: absolute;
    top: 2.5rem;
    left: 0.8rem;
    /*width: 32px;*/
    height: 2px;
    background-color: rgba(255,255,255,1);
    transition: .4s;
    cursor: pointer;
    z-index: 9999;
  }

  .toggle_btn.pc-only_01.DownMove span:nth-child(1) {
    width: 38px;
    -webkit-transform: translateY(-0.9rem);
    transform: translateY(-0.9rem);
  }
  .toggle_btn.pc-only_01.DownMove span:nth-child(2) {
    width: 32px;
    -webkit-transform: translateY(0.2rem);
    transform: translateY(0.2rem);
  }
  .toggle_btn.pc-only_01.DownMove span:nth-child(3) {
    width: 22px;
    -webkit-transform: translateY(1.3rem);
    transform: translateY(1.3rem);
  }

  .toggle_btn.pc-only_01.open span:nth-child(1) {
    width: 30px;
    -webkit-transform: translateY(1.2rem) rotate(30deg);
    transform: translateY(1.2rem) rotate(30deg);
  }
  
  .toggle_btn.pc-only_01.open span:nth-child(2) {
    opacity: 0;
  }

  .toggle_btn.pc-only_01.open span:nth-child(3) {
    width: 30px;
    -webkit-transform: translateY(1.2rem) rotate(-30deg);
    transform: translateY(1.2rem) rotate(-30deg);
  }

  .toggle_btn.pc-only_01.open span {
    left: 1.2rem;
    top: 1.5rem;
    position: absolute;
  }
/*
  .logo_bg_l.UpMove{
    display: none;
  }

  .logo_bg_l.DownMove{
    display: flex;
  }

*/

  .toggle_btn.pc-only_01.UpMove{
    display: none;
  }

  /*====== 上に消えるアニメ ======*/
  .global_menu._top .UpMove,.toggle_btn.pc-only_01 .UpMove{
    animation: UpAnime 0.5s forwards;
  }

  @keyframes UpAnime{
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-80px);
    }
  }

  /*====== 下に消えるアニメ ======*/
  .toggle_btn.pc-only_01 .DownMove{
    animation: DownAnime 0.5s forwards;
  }

  @keyframes DownAnime{
    from {
      opacity: 0;
      transform: translateY(-80px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/*
.global_menu.DownMove .toggle_btn.pc-only_01.UpMove{
  display: none;
  transition: .4s;
}*/


/*1214-修正　ここから*/
.global_menu._top.UpMove{
  position: fixed;
  width: 44rem;
  top: 12rem;
  right: -36rem;
}

.global_menu._top.UpMove .nav_circle{
  display: none;
}

.global_menu._top.UpMove .nav_circle._un{
  display: block;
}

.global_menu._top.UpMove .header_nav{
  display: flex;
  flex-flow: column;
}

.global_menu._top.UpMove .menu{
  height: 4rem;
  margin-bottom: 2rem;
  justify-content: left;
}

.global_menu._top.UpMove .header_nav.menu a{
  font-size: 1.6rem;
  text-align: left;
  transition: none;
  filter: none;
}

.global_menu._top.UpMove .header_nav{
  font-size: 2.8rem;
  text-align: left;
}

.global_menu._top.UpMove .m_none{
  display: none;
}

.mask {
  position:fixed;
  top: 0;
  right: -44rem;
  transition: all 0.5s;
  visibility: hidden;
  opacity: 0;
}

.open .mask {
  margin: 0 auto;
  top: 0;
  right: 0;
  visibility: visible;
  opacity: 1;
  width: 44rem;
  height: 100vh;
  background: rgba(255, 255, 255, 1);
  z-index: -1;
  border-left: 4px solid rgba(112,112,112,1);
  padding-left: 8rem;
}
/*
.global_menu .UpMove{
  top: 10.7rem;
  right: 0;
  opacity: 0;
}*/

.header_inner.open .global_menu{
  right: 0;
  transition: all 0.5s;
}
/*
.header_inner.open .nav_circle{
  display: none;
}

.header_inner.open .header_nav{
  display: block;
}

.header_inner.open .menu{
  height: 4rem;
  margin-bottom: 2rem;
  justify-content: left;
}

.header_inner.open .header_nav li a{
  font-size: 1.6rem;
  text-align: left;
  transition: none;
  filter: none;
}

.header_inner.open .header_nav{
  font-size: 2.8rem;
  text-align: left;
}


*/

.header_inner.open .m_none{
  display: none;
}

/*ここまで*/

/*——————————————————————————————————
詳細はこちらbutton指示
——————————————————————————————————*/

/*—————————矢印ポジション指示————————*/
.san-button{
  width: 26rem;
  height: 5.6rem;
  margin: 0 auto;
  display: flex;
  position: relative;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  transition: .4s;
}


/*—————————左揃え————————*/
.san-button.-a {
  left: 0;
}

/*—————————中央揃え————————*/
/*文字数によってwidthの数値変更必要
　arrouwにも変更必要箇所あり*/
.san-button.-b {
  margin: 0 auto;
}

/*—————————右揃え————————*/
.san-button.-c {
  right: 0;
}

.san-button._sumi{
  width: 25.5rem;
}

.san-button._sumi._spot{
  width: 21.5rem;
}


/*———————サークル矢印 0124追記——————*/

.circles{
  position: absolute;
  right: 0;
  width: 60px;
  height: 60px;
  background: rgb(255, 255, 255,1);
  border-radius: 30px;
  color: rgba(20, 16, 14,1);;
}
/*——————————————ここまで—————————————*/

.arrow{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*中央揃えの際は以下の数値の変更も必要*/
  left: 0;
  transition: .4s;
  color: rgb(255, 255, 255,1) ;
  font-family: "Zen Maru Gothic", serif;
  font-size: 1.6rem;
}

.lines{
  position: relative;
  width: 190px;
  height: 1px;
  background: rgb(255, 255, 255,1) ;
  transition: .4s;
  margin-top: 5px;
}

.lines::after {
  position: absolute;
  content: '';
  width: 9px;
  height: 1px;
  transform: rotate(42deg);
  background: rgb(255, 255, 255,1) ;
  transition: .4s;
  bottom: 3px;
  right: 0;
}

.san-button._sumi._spot .lines{
  width: 150px;
  left: 0;
}

.b_center{
  display: flex;
  justify-content: center;
  align-items: center;
}


/*ボタン sumi*/
._sumi .circles{
  border: 1px solid rgba(20, 16, 14,1);
  background: none;
}

._sumi .lines{
  background: rgba(20, 16, 14,1);
  position: absolute;
  top: 22px;
}

._sumi .lines::after {
  background: rgba(20, 16, 14,1);
}

._sumi .arrow{
  color:  rgba(20, 16, 14,1);
}

.breaks{
  line-height: 2.6rem;
}



/*——————————————ここまで—————————————*/

/*———————————————————————————
画面いっぱいfirst-view 設定の一例
———————————————————————————*/

#first-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
}


#first-view_bg {
  width: 100vw;
  height: 100vh;
  /*background:rgba(211,211,211,1);*/
  position: fixed;
}

/*———————————1209追記 651行まで——————————*/

.fs-logo{
  width: 26rem;
  height: auto;
}

.fs-logo img{
  width: 100%;
  height: auto;
}

.logo_bg{
  position: relative;
  z-index: 1;
}

.logo_bg_l{
  position: absolute;
  top: -4rem;
  justify-content: center;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.logo_bg_l img{
  width: 79.6rem;
  height: auto;
}

.logo_bg_l ._b{
  opacity: 0;
}

.first-view_back{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}

.top_pic {
  position: absolute;
  width: 100%;
  height: 100%;
}

.fv_bg{
  position: absolute;
  height: auto;
}

.fv_bg._to{
  top: 0;
  left: 0;
}

.fv_bg._bo{
  bottom: 0;
  right: 0;
}

/*———————————————————————————
メインタイトル処理
———————————————————————————*/

.tops{
  margin: 0 auto;
  width: 111rem;
  height: 100%;
  padding: 4%;
}

.main_top{
  width: 54%;
  align-items: center;
}


.h1_title{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10%;
}

.main_copy{
  font-family: serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.3rem;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1));
}

.main_title{
  width: 55.2rem;
  height: auto;
}

.main_title img{
  width: 100%;
  height: auto;
}


.main_caption{
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 4.2rem;
  margin-right: 3rem;
}

.matsuri_illust{
  width: 59rem;
  height: auto;
}

.matsuri_illust img{
  width: 100%;
  height: auto;
}


.movie{
  position: relative;
  height: 100%;
  width: 100%;
}

.movie_mask{
  /*min-width/heightで動画を元の比率から全画面表示にする*/
  position: fixed;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  top: calc(50% - 50vh);/*2vh分余白*/
  left: 0;
  /*マスクの指定*/
  mask-image: url("/assets/img/top/mask.svg");  
  mask-repeat: no-repeat;
  mask-position: center right 18%;
  mask-size: 28% 28%;
  -webkit-mask-image: url("/assets/img/top/mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center right 18%;
  -webkit-mask-size: 28% 28%;
  z-index: 1;
}

.movie_area_dot{
  content: "";
  width: 100%;
  height: 100vh;
  position: fixed;
  top: calc(50% - 50vh);/*2vh分余白*/
  left: 0;
  background-color: rgba(0,0,0,0.4);
  background-image: radial-gradient(#111 25%, transparent 25%), radial-gradient(#111 25%, transparent 25%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  mask-image: url("/assets/img/top/mask.svg");  
  mask-repeat: no-repeat;
  mask-position: center right 18%;
  mask-size: 28% 28%;
  -webkit-mask-image: url("/assets/img/top/mask.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center right 18%;
  -webkit-mask-size: 28% 28%;
  z-index: 2;
}
/*———————————ここまで———————————*/


/*——————————————————————
————————————————————————
tab項目エリア
————————————————————————
——————————————————————*/

.ceiter-h3 {
  text-align: center;
  font-weight: bold;
  font-size: 2.2rem;
}

.tab_menu {
  background-color: #3e3e3e;
  color: #fff;
  padding: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}

/*タイトルタブ(タブ項目)設定*/
.tab_area {
  justify-content: space-between;
  width: 60rem;
  /*タブボタンと広告エリアを離したい場合は タブボタン指示htmlの下にスペースdiv*/
}

.tab_area li {
  width: calc((100% - 1rem) / 5);
  padding: 1.1rem;
  background: #e2e2e2;
  border-radius: 1.2rem 1.2rem 0 0;
  text-align: center;
  transition: 0.4s;
}

.tab_area li a {
  display: block;
  font-size: 1.3rem;
}

/*各タブ項目の色等を同じにしたい場合は以下のバックグラウンドカラー指定のみでOK*/
/*
.tab_area li.active{
  background: #3E3E3E;
}
*/

.tab_area li.active a {
  color: #fff;
}

/*各タブ項目の色等を変えたい場合はクラス名(_00)を使って指定*/
.tab_area ._01.active {
  background: #3e3e3e;
}

.tab_area ._02.active {
  background: #5d5d5d;
}

.tab_area ._03.active {
  background: #3e3e3e;
}

.tab_area ._04.active {
  background: #5d5d5d;
}

.tab_area ._05.active {
  background: #3e3e3e;
}

/*ここまで*/

/*——————————————————————
tab項目 タブ台紙の設定
——————————————————————*/

/*エリアの表示非表示と形状*/
.area {
  display: none; /*はじめは非表示*/
}

/*areaにis-activeというクラスがついた時の形状*/
/*各タブ台紙の色等を統一したい場合は以下にバックグラウンドカラー指定のみでOK*/
.area.is-active {
  display: block; /*表示*/
  animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*各タブ台紙の色等を変えたい場合は各クラス名を使って指定*/
.area.tabarea-back-a.is-active {
  background: #3e3e3e;
  padding: 1rem;
}

.area.tabarea-back-b.is-active {
  background: #5d5d5d;
  padding: 1rem;
}
/*ここまで*/

/*——————————————————————
tab項目 tableの設定
——————————————————————*/

.tables_item._01 tr {
  width: 100%;
}
/*下2行を消すと天地左右中央設定解除*/
.tables_item._01 .item_left {
  font-weight: bold;
  width: 20rem;
  vertical-align: middle;
  background: rgba(235, 235, 235,1);
}

.tables_item._01 .item_right {
  table-layout: fixed;
  line-height: 150%;
}

.tables_item._02 .item_center {
  width: 84rem;
  text-align: center;
}


/*------ページネーションデザイン------*/
.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 5rem 0;
}

.pagination li {
  margin: 5px;
  border: 1px solid #3e3e3e;
}

.pagination a {
  display: block;
  text-decoration: none;
  font-size: 1.6rem;
  color: #3e3e3e;
  padding: 1rem;
}

.pagination a:hover {
  background-color: #3e3e3e;
  color: aliceblue;
}

.active {
  background-color: #a2e3dc;
}

/*————————————————————————————————————————————
tab項目D modal設定
————————————————————————————————————————————*/

/*————————————————————————————————————————————
buttonエリア
————————————————————————————————————————————*/

._modals {
  justify-content: space-between;
  flex-wrap: wrap;
}

/*-----------------------------------
4カラムで2個空き(2/4)の場合以下のbeforeが必要
5カラム以上だとhtmlに空箱設置が必要
------------------------------------*/
._modals::before {
  display: block;
  content: "";
  width: calc((100% - 4rem) / 4);
  order: 1;
}

/*3/4カラム等、右1つだけ空欄の場合は以下のみでよい*/
/*2/3カラムの場合は /3で*/
._modals::after {
  display: block;
  content: "";
  width: calc((100% - 4rem) / 4);
}


/*---------- 詳細を見る 右横の+ ------------*/
.modal-plus {
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  margin-bottom: 5px;
  margin-left: 5px;
}

.modal-plus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(-90deg);
  transition: all 0.3s ease;
}

.openModal._a:hover p {
  opacity: 0.5;
}

.openModal._a:hover .modal-plus::before {
  transform: rotate(0deg);
}


/*——————————————————————————————————
————————————————————————————————————
DisplayFlexベーシック
————————————————————————————————————
——————————————————————————————————*/

.basic-box {
  position: relative;
}

.btn_base {
  /*height: 6rem;*/
  width: 100%;
}

.san-button.-a {
  position: relative;
  width: 17rem;
  transition: all 0.3s ease;
}

.calc {
  justify-content: space-between;
  flex-wrap: wrap;
}

.calc._01 li {
  width: calc((100% - 13rem) / 3);
  /*以下3行は上下にspace-between(天地揃え)させたい場合に使用
  display: flex;
  flex-flow: column;
  justify-content: space-between;*/
  margin-bottom: 4rem;
}

.calc._01::after {
  display: block;
  content: "";
  width: calc((100% - 13rem) / 3);
}

.displayFlex_p {
  font-size: 1.2rem;
  line-height: 2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*以下は制限する行数*/
  -webkit-line-clamp: 3;
}

.big_dotted {
  /*線の高さスペース*/
  height: 4rem;
  /*線の太さ*/
  background-size: 4rem 4rem;
  /*ドット線の色・間隔・丸み*/
  background-image: radial-gradient(#ffffff 70%, transparent 50%);
  /*線の位置*/
  background-position: top;
  margin-bottom: -6rem;
  /*親要素のpaddingを無効にする場合*/
  margin-left: -4rem;
  margin-right: -4rem;
}

/*——————————————————————————————————
————————————————————————————————————
  Accordion ベーシックエリア
————————————————————————————————————
——————————————————————————————————*/

.accordion {
  height: 30rem;
  padding: 3%;
  background: #fffeee;
  border-radius: 1rem;
  overflow-y: scroll;
}

/*Q&A全体を囲む場合ここも指示を入れる*/
.accordion .lead {
  margin-bottom: 4rem;
  border-bottom: dotted #000 1px;
  /*
  padding: 2rem;
  background: #34AACD;
  border-radius: 1rem;
  */
}

.lead {
  position: relative;
}

.quest {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  font-family: serif;
  font-weight: 400;
  transition: all 0.5s ease;
}

.quest::before,
.quest::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2px;
  background-color: #000;
}

.quest::before {
  top: 2rem;
  width: 2rem;
  right: 1.5rem;
  transform: rotate(0deg);
  transition: 0.3s;
}

.quest::after {
  top: 2rem;
  right: 1.5rem;
  transform: rotate(90deg);
}

.quest.close::before {
  transform: rotate(180deg);
}

.quest.close::after {
  display: none;
}

.quest p {
  font-size: 2rem;
  font-family: serif;
  margin-bottom: 1rem;
}

/*以下の「maru」「p_1」は質問にナンバーをつける際に使う*/
.maru {
  position: relative;
  width: 4rem;
  height: 4rem;
  background: #8d8d8d;
  border-radius: 2rem;
}

.p_1 {
  position: absolute;
  font-size: 2rem;
  color: #fff;
  line-height: 2.6rem;
  cursor: pointer;
  /*丸内文字の位置調整*/
  padding: 8px;
  left: -0.2rem;
}

.q_moji {
  margin-left: 1rem;
}
/*ここまで*/

.box {
  display: none; /*はじめは非表示*/
  background: #fff;
  margin: 3%;
  padding: 1% 3%;
  font-family: serif;
  font-size: 1.74rem;
  line-height: 3rem;
  color: #888;
}


/*——————————————————————————————————
————————————————————————————————————
footerベーシック
————————————————————————————————————
——————————————————————————————————*/

.f_field {
  width: 100%;
  background: rgba(116,116,116,1);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  /*z-index: 3;*/
  position: relative;
}


.f-logo a{
  width: 28.5rem;
  height: 12.6rem;
  display: block;
  margin: 0 auto;
}

.f-logo a img{
  width: 100%;
  height: auto;
  transition: 0.4s;
}


.f_nav_box{
  width: 92.3rem;
  margin: 0 auto;

}

.f_nav_inner {
  line-height: 4.4rem;
  gap: 5.4rem;
}

.f_nav_inner li a {
  font-size: 1.6em;
  color: rgb(255, 255, 255);
  transition: 0.4s;
}

.f_bottom{
  width: 100%;
}

.sns_inner{
  width: 26.5rem;
  margin: 0 auto;
  justify-content: space-between;
}

.sns_inner li a{
  transition: 0.4s;
}

.copyright {
  font-size: 1.6em;
  color: rgb(255, 255, 255);
  text-align: center;
}


/*——————————————————————————————————
page_topアイコン指示
——————————————————————————————————*/

.page_top {
  position: fixed;
  font-size: 1.6rem;
  color: #000;
  writing-mode: vertical-rl;
  letter-spacing: 0.1rem;
  bottom: 2rem;
  right: 4rem;
  z-index: 2;
  opacity: 1;
  cursor: pointer;
  /*filter: drop-shadow(0 0 6px rgba(80,80,80,0.9));
  transform: translateY(100px);*/
}


/*-----------jQのclass付与指示------------*/

.page_top.change{
  animation: UpAnime 0.5s forwards ;
}
@keyframes UpAnime{
  from {
    bottom: 2rem;
  }
  to {
    bottom: 45rem;
  }
}

.page_top{
  animation: DownAnime 0.5s forwards ;
}
@keyframes DownAnime{
  from {
    bottom: 45rem;
  }
  to {
    bottom: 2rem;
  }
}

.arrow-up{
  display: block;
  margin: 0 auto;
  width: 10px;
  height: 30px;
}


.arrow-up::after {
  position: absolute;
  bottom: 25px;
  left: 56%;
  margin-left: -1px;
  width: 1px;
  height: 3rem;
  background: rgba(116, 194, 191,1);
  content: ' ';
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; 
}

@-webkit-keyframes elasticus {
  0% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      transform: scale(1, 0);
  }
  50% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  50.1% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  100% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -moz-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
  }
}
@-moz-keyframes elasticus {
  0% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -moz-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
  }
  50% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  50.1% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  100% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -moz-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
  }
}
@-o-keyframes elasticus {
  0% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -moz-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
  }
  50% {
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  50.1% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
  }
  100% {
      -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      -o-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -moz-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
  }
}
@keyframes elasticus {
  0% {
      transform-origin: 0% 100%;
      transform: scale(1, 0);
  }
  50% {
      transform-origin: 0% 100%;
      transform: scale(1, 1);
  }
  50.1% {
      transform-origin: 0% 0%;
      transform: scale(1, 1);
  }
  100% {
      transform-origin: 0% 0%;
      transform: scale(1, 0);
  }

}


/*-----------マウスストーカーの指示 0124上書き------------*/

#stalker {
  pointer-events: none;
  position: fixed;
  top: -15px;     
  left: -15px;    
  width: 12px;   
  height: 12px;  
  background: rgba(255,171  ,37,0.5);
  border-radius: 50%;
  transition: transform 0.2s, top, 0.5s, left 0.5s, width 0.5s, height 0.5s, background-color 0.5s;
  transition-timing-function: ease-out;
  z-index: 999;
}

#stalker.hov_{
  top: -30px;     
  left: -30px;    
  width: 60px;
  height: 60px;
  transition: .5s;
  background: rgba(225, 46, 24, 0.8);
}
/*--------------ここまで--------------*/



/*TOPページコンテンツ以下*/
/*火薬と花火の起源及び日本への伝来*/

.h3_box.denrai{
  position: relative;
}

.t_left{
  width: auto;
  margin-right: 1.6rem;
}

.t_text{
  width: 100%;
  text-align: left;
  align-items: center;
  justify-content: space-between;
}

.about_title{
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}

.about_pic{
  width: 46rem;
  height: auto;
}

.title_01,.title_02{
  width: 100%;
}

.border_title{
  display: block;
  width: 95px;
  height: 1px;
  background: rgba(47, 47, 47, 1);
}

.about_pic img{
  width: 100%;
  height: auto;
}

.about_pic img{
  width: 100%;
  height: auto;
}

.about_text,
.readmore-content{
  width: 46rem;
  color: rgba(255,255,255,1);
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.read_box{
  display: none;
  transition: .5s;
}


/*横スクロール用*/


/* 横スクロールセクション */
.side-scroll {
  background-color: rgba(189,190,189,1);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/assets/img/top/sidescroll_back.png);
  background-size: 100%;
  background-position: bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.side-scroll-heading {
  color: #eeebdd;
}

.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.side-scroll-list {
  position: absolute;
  top: 10rem;
  left: 0;
  display: flex;
  gap: 0 24rem;
}

.side-scroll-item {
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 64rem;
  height: auto;
}

.slide_img{
  width: 100%;
  height: 45.6rem;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.slide_text{
  font-size: 1.6rem;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  line-height: 3.2rem;
  filter: drop-shadow(0 0 2px rgba(189, 190, 189,1))drop-shadow(0 0 4px rgba(189, 190, 189,1))drop-shadow(0 0 4px rgba(189, 190, 189,1));
}


/*カレンダー*/

.cal_box{
  width: 100%;
  padding: 0 21rem;
}

.cal_list{
  justify-content: space-between;
  gap: 3rem;
}

.cal_back{
  background: rgba(255, 255, 255, 1);
  width: 29rem;
  height: auto;
  padding: 3rem;
  position: relative;
}


.date{
  margin: 0 auto;
  display: flex;
  font-size: 2.6rem;
  align-items: center;
  justify-content: center;
}

.sub_date{
  font-size: 1.2rem;
  font-weight: 400;
}

.month{
  margin: 0 2rem;
}

.cal_table{
  width: 100%;
  height: auto;
  font-size: 1.6rem;
  margin: 0 auto;
  table-layout: fixed;
}

.cal_table .zero{
  visibility: hidden;
}

.cal_table th{
  text-align: center;
  font-weight: 400;
  width: 25px;
  height: 25px;
  padding: 9px;
}

.cal_table td{
  width: 25px;
  height: 25px;
  text-align: center;
  font-weight: 400;
  vertical-align:middle;
  padding: 8px;
 }

 .cal_table tr{
  padding-bottom: 10px;
  display: block;
 }

.event_day{
  justify-content: flex-start;
  align-items: center;
}

 .ev_pict{
  width: 25px;
  height: 25px;
  border-radius: 999rem;
  background: rgba(35, 36, 35, 1);
 }

 .day_open{
  font-size: 1.2rem;
  margin-left: 1rem;
 }

 .e_open{
  background: rgba(35, 36, 35, 1);
  width: 25px;
  height: 25px;
  border-radius: 999rem;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
}

/*ポップアップ吹き出し*/

.balloon{
  position: absolute;
  width: 80%;
  height: fit-content;
  padding: 2rem;
  font-size: 16px;
  background: rgba(255,255,255,1);
  border: solid 1px rgba(35, 36, 35, 1);
  border-radius: 10px;
  filter: rgba(26,19,17,0.2);
  box-sizing: content-box;
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: 65px;
  left: 50%;
  display: none;
  z-index: 3;
}

.balloon.open{
  display: block;
}

.balloon:before {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 52%;
  margin-left: -15px;
  border: 8px solid transparent;
  border-top: 20px solid #FFF;
  z-index: 2;
}

.balloon:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 52.5%;
  margin-left: -17px;
  border: 9px solid transparent;
  border-top: 20px solid rgba(35, 36, 35, 1);
  z-index: 1;
}

.fes_list{
  width: 100%;
  margin-bottom: 1rem;
}

.fes_date{
  font-weight: bold;
}

.area_pict{
  width: 5.4rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: rgba(255, 255, 255,1);
  font-weight: bold;
  margin-right: 1rem;
}

.yamagata{
  background: rgba(152,189,24,1);
}

.miyagi{
  background: rgba(255,115,167,1);
}

.fukushima{
  background: rgba(53,146,210,1);
}


/*———————————————————————————
東北の花火
人気ランキング
———————————————————————————*/
/*displayflexで高さが揃わない場合見出しとテキストの高さのラインを揃える書き方
https://zenn.dev/928sekine/articles/0109da04263b93
*/

.rank_top .rank_inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 6rem;
}

.rank_bottom .rank_inner{/*見出しとテキストの高さのラインを揃える*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 4rem;
}


.rank_top .rank_contents{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 0;
}

.rank_bottom .rank_contents{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  gap: 0.5rem;
}


.rank_title{
  width: 100%;
  height: 3rem;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.rank_img{
  flex-shrink: 0; /* 画像の縮小を防止 */
}

.rank_img,.rank_img img{
  width: 100%;
  height: auto;
}

.rank_title._01{
  background: rgba(250,185,80,1);
}

.rank_title._02{
  background: rgba(239,125,64,1);
}

.rank_title._03{
  background: rgba(115,145,201,1);
}

.rank_title._04{
  background: rgba(189,205,92,1);
}

.rank_title._05{
  background: rgba(139,205,210,1);
}

.rank_title._06{
  background: rgba(250,188,117,1);
}

.rank_title._07{
  background: rgba(250,188,117,1);
}

.event_name{
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.place_date{
  margin-bottom: auto;
}

.place,.r_date{
  width: 100%;
  justify-content: flex-start;
  gap: 1rem;
}

.rank_bottom .place{
  margin-top: auto;
}

.place_pict,
.date_pict{
  width: 48px;
  height: 48px;
  background: rgba(93,93,93,1);
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255,1);
}

.rank_bottom .place_pict,
.rank_bottom .date_pict{
  width: 38px;
  height: 38px;
}

.place_text,.date_text{
  font-size: 1.5rem;
  justify-content: flex-start;
  width: 100%;
  flex: 1;
}

.date_text,.r_date{
  align-items: center;
}

.f_nav_inner ul li a:hover,
.sns_inner li a:hover{
  opacity: .6;
}


/*——————————————————————
————————————————————————
ここから下層ページ
————————————————————————
——————————————————————*/

/*——————————————————————
————————————————————————
下層ファーストビュー エリア
————————————————————————
——————————————————————*/

#first-view_bg._un {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 auto;
  background-image: url(../img/spot/under_top_img_01.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-size: cover;
  width: 100%;
  height: 38rem;
  /*—————————————————————————————————————————
  以下を入れないと左右に不明な隙間が—できる場合がある
  —————————————————————————————————————————*/
  overflow: hidden;
  padding: 0 4rem;
}

#first-view_bg._un._02 { 
  background-image: url(../img/spot/spot_un/under_top_img_01.jpg);
}


#first-view_bg .h1_title._un {
  position: absolute;
  background-image: url(../img/spot/h1_back.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-size: cover;
  width: 54.2rem;
  height: 16.4rem;
  z-index: 1;
  bottom: 3rem;
  top: auto;
}



.h1_title._un .h1_box._le{
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 9.6rem;
  padding-top: 1rem;
}

.h1_title._un .main_title{
  width: fit-content;
  font-size: 3.6rem;
  font-family: "source-han-serif-jp-subset", serif;
  font-weight: 600;
  font-style: normal;
  filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 1) ) drop-shadow(2px 2px 8px rgba(255, 255, 255, 1) ) drop-shadow(2px 2px 8px rgba(255, 255, 255, 1) );
}


/*———————————————————————————
下層ナビゲーション調整
———————————————————————————*/


  .header_inner._un {
    width: 100%;
    margin: 0 auto;
    top: 0;
    position: fixed;
    padding: 3rem 4rem 2rem 4rem;
    background: rgba(255, 255, 255,1);
  }

  .header_inner._un .navArea{
    padding: 0;
  }

  .header_inner._un .menu{
    height: auto;
  }

  .header_inner._un .fs-logo{
    display: flex;
    align-items: center;
  }

  /*パンくずリスト*/

  .pankuzu{
    padding: 0 14rem;
  }

  .pan_text{
    font-size: 1.2rem;
    color: rgba(27, 19, 17,1);
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 500;
  }

  .pan_text a{
    transition: .4s;
  }

  .pan_text.back{
    color: rgba(116, 117, 117,1);
  }

  .pankuzu ol li::after {
    content: '＞';
    width: 1.2rem;
    height: 1.7rem;
    line-height: 1;
    text-align: center;
    font-size: 1.2rem;
    padding: 0 0.7rem;
  }
  .pankuzu ol li:last-child {
    margin-right: 0;
    padding-right: 0;
  }
  .pankuzu ol li:last-child::after {
    content: normal;
  }

  .pankuzu ol li a:hover{
    opacity: .5;
  }

  /*———————————————————————————
  下層スポットを探す
  ———————————————————————————*/

  .select{
    justify-content: center;
    gap: 1rem;
  }

  .pulldown{
    width: 18rem;
    height: 4.6rem;
    display: flex;
    align-items: center;
    border: 1px solid rgba(47, 47, 47,1);
    border-radius: 1rem;
    font-size: 1.6rem;
    cursor: pointer;
  }

  .pulldown select{
    width: 100%;
    height: 100%;
    display: block;
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
  }

  .icon_s{
    width: fit-content;
    height: 4.6rem;
    display: flex;
    align-items: center;
  }

  .s_btn{
    width: 6.4rem;
    height: 4.6rem;
    background: rgba(197, 26, 44,1);
    text-align: center;
    font-size: 1.6rem;
    color: rgba(255, 255, 255,1);
    border: 1px solid rgba(197, 26, 44,1);
    border-radius: 0.6rem;
    transition: .4s;
  }

  .s_btn:hover{
    background: rgba(255, 255, 255,1);
    border: 1px solid rgba(197, 26, 44,1);
    color: rgba(197, 26, 44,1);
  }


  ._un .title_01{
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 4rem;
    font-weight: 700;
    font-style: normal;
    padding: 0;
  }

  .calc._02{
    width: 100%;
    gap: 6rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .calc._02 li {
    width: 22.5rem;
    border: solid rgba(26, 19, 17, 1) 1px;
    transition: .4s;
    height: 33.8rem;
    transition: .4s;
  }

  .spot_box{
    position: relative;
  }

  .spot_ph,
  .spot_ph img{
    width: 100%;
    height: auto;
    transition: .4s;
  }

  .spot_ph{
    overflow: hidden;
  }

  .calc._02 li:hover .spot_ph img{
    transform: scale(1.2);
  }

  .w_info{
    position: relative;
    z-index: 0;
    height: calc((33.8rem - 20rem));
    padding: 1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    transition: .4s;
  }

  .w_info:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transition: .4s;
    background: rgba(255, 255, 255, 1);
  }

  .w_info:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    transition: .4s;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(196,162,202,1));
    background: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(196,162,202,1));
    background: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(196,162,202,1));
  }

  .calc._02 li:hover{
   filter: drop-shadow(0px 0px 10px rgba(26,19,17,.2));
  }

  .calc._02 li:hover .w_info:before{
    opacity: 0;
  }

  .img_pict{
    position: absolute;
    border-radius: 999rem;
    background: rgba(255, 255, 255,1);
    border: 1px solid rgba(47, 47, 47,1);
    right: 1rem;
    top: 1rem;
    display: flex;
    flex-flow: column;
    text-align: center;
    z-index: 5;
  }

  .pict_box{
    position: relative;
    width: 6rem;
    height: 6rem;
  }

  .w_pict{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.8rem;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .b_pict{
    width: 6.1rem;
    height: 2.2rem;
    position: absolute;
    bottom: -1px;
    left: -1px;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgba(255, 255, 255,1);
    background-image: url(../img/spot/pict_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .s_star,.s_place,.s_time{
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pin{
    width: auto;
    height: 1.1rem;
  }

  .pin img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .s_title{
    font-size: 1.6rem;
  }

  .point,.star{
    font-family: "source-han-sans-japanese", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
  }

  /*4列の時最後左よせ https://blog.webcreativepark.net/2016/08/15-125202.html*/
  .calc._02::before{
    display: block;
    content: '';
    width: 22.5rem;
    order:1;
  }


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

    .entry._08{
      max-width: 79.6rem;
    }

    /*3列の時最後左よせ*/
    .calc._02::after{
      display: block;
      content: '';
      width: 22.5rem;
    }

}

@media only screen and (max-width: 794px) {
  /*2列の時*/
  .entry._08{
    max-width: 51.1rem;
  }
}

/*0201*/
.select .searchform{
  display: flex;
  gap: 2rem;
}


/*———————————————————————————
酒田の花火
———————————————————————————*/

  .main_ph,.main_ph img{
    width: 100%;
    height: auto;
  }

  .s_text {
    width: 100%;
    padding: 0 12rem;
    font-size: 2.4rem;
    line-height: 4.8rem;
    font-family: serif;
    font-weight:lighter;
    font-style: normal;
  }

  .ta_box{
    width: 100%;
  }

  .t_head{
    font-size: 2.6rem;
    text-align: center;
    font-weight: bold;
  }

  .item_right._map{
    display: flex;
  }

  .item_right ._pict{
    width: 3.6rem;
    margin-left: 2rem;
    font-size: 1.2rem;
    text-align: center;
    padding: 0 0.5rem;
    background: rgba(230,77,14,1);
  }

  .item_right ._pict a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255,1);
  }


/*ローディングの設定*/


#splash{
  padding:0;
  margin:0;
  width:100%;
  height:100vh;
  background:radial-gradient(#9b59b6, #8e44ad);
  z-index: 9999;
  position: fixed;
  /*通常時は非表示*/
  visibility: hidden;
  opacity: 0;
}

.wrapper{
  width:200px;
  height:60px;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.circle{
  width:20px;
  height:20px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left:15%;
  transform-origin: 50%;
  animation: circle .5s alternate infinite ease;
}

@keyframes circle{
  0%{
      top:60px;
      height:5px;
      border-radius: 50px 50px 25px 25px;
      transform: scaleX(1.7);
  }
  40%{
      height:20px;
      border-radius: 50%;
      transform: scaleX(1);
  }
  100%{
      top:0%;
  }
}
.circle:nth-child(2){
  left:45%;
  animation-delay: .2s;
}
.circle:nth-child(3){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.shadow{
  width:20px;
  height:4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top:62px;
  transform-origin: 50%;
  z-index: 9998;
  left:15%;
  filter: blur(1px);
  animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
  0%{
      transform: scaleX(1.5);
  }
  40%{
      transform: scaleX(1);
      opacity: .7;
  }
  100%{
      transform: scaleX(.2);
      opacity: .4;
  }
}
.shadow:nth-child(4){
  left: 45%;
  animation-delay: .2s
}
.shadow:nth-child(5){
  left:auto;
  right:15%;
  animation-delay: .3s;
}
.wrapper span{
  position: absolute;
  top:75px;
  font-family: 'Lato';
  font-size: 20px;
  letter-spacing: 12px;
  color: #fff;
  left:15%;
}


/*——————————————————————
display: none
——————————————————————*/
/* 
<br class>などに対して
基本的に (max-width:767px)は sp-only
(max-width:767px)以下 sp-only_02で使用すること
*/
.abc_icon._02,
.form3,
.leads._02,
.sp-only,
.sp-only_01,
.sp-only_02,
.icon-e,
.sp_arrow{
  display: none;
}