@charset "UTF-8";

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


html, body, div, span, h1, h2, p, a, img, sup, ul, li, article, figure, footer, header, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: bottom;
}

/* HTML5 display-role reset for older browsers */
article, figure, footer, header, section {
  display: block;
}

body {
  line-height: 1;
}

html {
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

/* box-sizing */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* hover img alpha2 */

/* for sp link */


body {
  margin: 0;
  padding: 0;
  width: 100% !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
 
  font-size: 1.8rem;
  font-weight: normal;
  color: #000;
  letter-spacing: 0.02em;
  z-index: 1;

  -webkit-text-size-adjust: 100%; /*スマホ自動調整対策*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  background: #fff;
}

/* hover img alpha2 */

sup{
  vertical-align: baseline;
  position: relative;
  top: -0.75ex;
  font-size: 75%;
}


.social_box {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.social_buttons {
  display: inline-block;
  text-align: left;
}


/* --- タイトル以下のコンテンツ全体 --- */
.wrap {
  opacity: 0;
  transform: translateY(16px); 
  animation-name: wrapFadeUp;
  animation-duration: 1.0s;
  animation-delay: 3.8s; /* ロゴ着地（3.8s）と同時に開始 */
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

/* wrap用キーフレーム */
@keyframes wrapFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wrap2 {
  width: 100%;
  position: relative;
  margin: 0 auto;
  animation: show 1.8s ease 0s 1 normal;
}

@keyframes show {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}



.article_header {
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding-top: 10px;
}

.article_header2 {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 1280px;
  padding: 50px 10px 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.header_item1 {
  width: 70%;
}

.header_item2 {
  width: 25.5%;
  height: 100%;
}

.header_item2 img {
  width: 100%;
}

.main_ttl {
  position: relative;
  margin: 0 auto;
  width: 1280px;
  height: 0;
  padding-top: calc(240/990 * 1280px); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_ttl.svg) top center / cover no-repeat;
  z-index:10;

}

.main_ttl2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(189/852 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_ttl2.svg) top center / cover no-repeat;
  z-index:10;

}


h1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.lead_area {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 50px 0;
}



.lead {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 2;
  color: #000;
  font-weight: bold;
  z-index:2;
  padding: 20px 0 40px;
  border-bottom: 2px dotted #c8291d;
}

.lead2 {
  width: 100%;
  max-width: 840px;
  margin: 0 auto 50px;
  font-size: 1rem;
  line-height: 2;
  color: #000;
  font-weight: bold;
  z-index:2;
  padding: 0 0 40px;
  border-bottom: 2px dotted #c8291d;
  text-align: left;
}



main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index:1;
}

main img {
  width: 100%;
}

main p {
  font-size: 1.05rem;
  line-height: 2;
  text-align: justify;
  padding-bottom: 2%;
  color: #000;
  text-indent: 1.05rem;
}

.no-indent {
  text-indent: 0;
}

.small_txt {
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: justify;
  padding-bottom: 2%;
  color: #000;
  text-indent: -0.9rem;
  padding-left: 0.9rem;
}


.sec1 {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}



.sec1_inner {
  box-sizing: border-box;
  width: 94%;
  max-width: 840px;

  height: 100%;
  margin: 0 auto;
  padding: 0;
  color: #000;
  text-align: center;
  position: relative;
  z-index: 99;
}

.pb40 {
  padding-bottom: 40px !important;
}


h2 {
  margin: 40px  auto 25px;
  padding: 0 25px 20px;
  width: 100%;
  max-width: 840px;

  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.3;
  color: #c8291d;
  position: relative;
  text-align: left;
  border-bottom: 1px solid #000;
}

h2:before {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 10px;
  height: calc(100% - 10px);
  background: #c8291d;
}

h2:after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: calc(50% - 5px);
  background: #000;
}

.h3_box {
  position: relative;
  margin: 0 auto 10px;
  background: #000;
  width: 100%;
  display: block;
}

.shop_name1 {
  display: block;
  width: 100%;
  padding: 1rem 10px 0.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left !important;
  color: #fff;
  background: #000;

}

.shop_name2 {
  display: block;
  width: 100%;
  padding: 0.5rem 10px 0.5rem 0;
  font-size: 1.4rem !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.5;
  text-align: left !important;
  color: #fff;
  background: #000;
}

.shop_name3 {
  display: block;
  padding: 0.5rem 10px 0.5rem 0;
  font-size: 1.2rem !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  text-align: left !important;
  color: #fff;
  background: #000;
  letter-spacing: -0.02em;
}

.small_h3 {
  font-size: 90%;
}

.small_h3-2 {
  font-size: 80%;
}

.ph_flex {
  width: 100%;
  margin: 10px auto;
  display: flex;
  position: relative;
justify-content: flex-start;
  gap: 15px;
}

.pf_item1 {
  position: relative;
  width: 38%;
}

.pf_item1 img {
  width: 100%;
}

.pf_item2 {
  position: relative;
  width: 60%;
  margin: 0;
  text-align: left;
}


.pf_s1 img {
   width: 100%;
  max-width: 320px;  
}

.name_area {
  margin: 0 auto;
  padding: 10px 0;
  width: 100%;
}

.name {
  margin: 0;
  padding-right: 0;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  color: #000;
  width: 100%;
}

.name_large {
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: baseline;
}

.img_box1 {
  width: 100%;
  margin: 0 auto;
}

.img_box1 img {
  width: 100%;
}

.caption {
  width: 100%;
  margin: 0 auto;
  color: #000;
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify;
}

.caption2 {
  width: 100%;
  margin: 5px auto 10px;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
}


footer {
  width: 100%;
  margin: 0 auto 30px;
  padding: 40px 0 2%;
  position: relative;
}


.logo {
  width: 100%;
  margin: 0 auto;  
  text-align: center;
}


.logo img {
  margin: 60px auto;
  width: 300px;
  text-align: center;
}


/* 単語ごとに改行 */
.sub_wb {
  display: inline-block;
}

/* バナー追加 */
.p2_bnr_box {
  margin: 0 auto 50px;
}

.p2_bnr_box a {
  text-decoration: none;
  display: flex;
  width: 94%;
  max-width: 640px;
  margin: 0 auto;
  transition: 0.3s;
}

.p2_bnr_box a:hover img {
  opacity: 0.8;
}



/* float */
.img_add {
  float: right;
  width: 320px;
  margin: 5px 0 25px 30px;
  padding:0 0 5px;
  position: relative;
}


.img_add img {
  width: 100%;
}

.img_add2 {
  float: left;
  width: 320px;
  margin: 5px 60px 25px -60px;
  padding:0 0 5px;
  position: relative;
}

.img_add img {
  width: 100%;
}



/* pager */
.pager {
  overflow: hidden;
  margin: 0 auto 4%;
  padding: 5px 0;
  width: 100%;
  background: #f2efea;
}
 
.pager ul {
  list-style: none;
  position: relative;
  left: 50%;
  float: left;
}
 
.pager ul li {
  margin: 0 5px;
  position: relative;
  left: -50%;
  float: left;
}

.pager ul li span,
.pager ul li a {
  display: block;
  font-size: 16px;
  padding: 0.7em 0.9em;
  font-weight: bold;
  width: 38px;
  text-align: center;
}
 
.pager ul li a {
  color: #000;
  text-decoration: none;
   border-radius: 2px;
}
 
.pager ul li a:hover {
  background:#c8291d;
  color: #fff;
   border-radius: 2px;
}

.current {
  color: #000;  
   border-radius: 2px;
  background: #FFF;
}

        :root {
            --accent-color: #e65540;
            --bg-gray: #f4f7f9;
            --text-main: #333;
        }


.badge1 {
  position: absolute;
  width: 100px;
  height: 40px;
  top: -24px;
  left: 0;
  background: url(img_c1.svg) top left no-repeat;
  z-index: 10;
}

.badge2 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c2.svg) top left no-repeat;
  z-index: 10;
}

.badge3 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c3.svg) top left no-repeat;
  z-index: 10;
}

.badge4 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c4.svg) top left no-repeat;
  z-index: 10;
}

.badge5 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c5.svg) top left no-repeat;
  z-index: 10;
}

.badge6 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c6.svg) top left no-repeat;
  z-index: 10;
}

.badge7 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c7.svg) top left no-repeat;
  z-index: 10;
}

.badge8 {
  position: absolute;
  width: 85px;
  height: 85px;
  top: -30px;
  left: -5px;
  background: url(img_c8.svg) top left no-repeat;
  z-index: 10;
}

.badge9 {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -15px;
  left: -5px;
  background: url(img_c9.svg) top left no-repeat;
  z-index: 10;
}

.badge10 {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -15px;
  left: -5px;
  background: url(img_c10.svg) top left no-repeat;
  z-index: 10;
}

.subheading_txt {
  color: #fff;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.subheading1 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(145/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub1.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading2 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub2.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading3 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub3.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading4 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub4.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading5 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub5.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading6 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/840 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sub6.svg) top left / cover no-repeat;
  z-index:10;
}




.bnr_next1 {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(100/800 * 100%);
  background: url(btn_p1.svg) top center / cover no-repeat;
  z-index: 99;
  transition: 0.3s; /* 滑らかにする場合 */
}

.bnr_next2 {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(100/800 * 100%);
  background: url(btn_p2.svg) top center / cover no-repeat;
  z-index: 99;
  transition: 0.3s; /* 滑らかにする場合 */
}

.bnr_viewer {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 30px auto;
  width: 100%;
  height: 0;
  padding-top: calc(130/800 * 100%);
  background: url(btn_viewer.png) top center / cover no-repeat;
  z-index: 99;
  transition: 0.3s; /* 滑らかにする場合 */
}

.bnr_next1:hover, .bnr_next2:hover, .bnr_viewer:hover {
  opacity: 0.8;
}

.box_article1 {
  position: relative;
  width: 100%;
  height: auto;
  background: #f2efea;
  border-radius: 10px;
  margin: 30px auto 50px;
}

.box_article2 {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  margin: 30px auto 50px;
  padding: 20px;
  border: 2px solid #b5b5b6;
}

.box_article_inner {
  padding: 20px;
}

.box_article_ttl {
 padding: 10px 20px 0 0;
}

.box_article_ttl2 {
 padding: 0 0 20px;
}

@media print, screen and (max-width: 1279px) {


.main_ttl {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(240/990 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_ttl.svg) top center / cover no-repeat;
  z-index:10;
}

.img_add2 {
  float: left;
  width: 300px;
  margin: 5px 60px 25px -0;
  padding:0 0 5px;
  position: relative;
}


}

@media print, screen and (max-width: 999px) {


.article_header {
  width: 100%; /* android view point */
  height: 100%;
  margin: 0 auto;
   position: relative;
}

.article_header2 {
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding: 5% 2% 2%;
  display: flex;
  justify-content: center;
  gap: 10px;
}


.lead_area {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 3%;
}

.lead {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
}

main p {
  font-size: 1rem;
  line-height: 1.8;
}

.sec1 {
  width: 100%;
}

.sec1_inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  padding: 3% 2%;
}

h2 {
  padding: 0 20px 20px;
  font-size: 1.8rem;
  line-height: 1.2;
}

.img_box1 img {
  box-shadow: none;
}

.logo img {
  margin: 5% auto;
}


.caption {
  width: 100%;
  margin: 0 auto;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: justify;
  word-break: break-all;

}

}

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


h2 {
  font-size: 1.6rem;
}




.pf_item1 {
  position: relative;
  width: 100%;
  padding-right: 0;
  order: 2;
}

.pf_item2 {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-left:0;
  margin-bottom: 0;
  order: 1;
}

.sec1 {
  position: relative;
  margin: 0 auto;
  padding:  0;
  z-index: 16;
  width: 100%;
  background-image: none;
}

.sec1_inner {
  width: 100%;
  max-width: 100%;
}

/* float */
.img_add {
  float: right;
  width: 260px;
  margin: 5px 0 25px 25px;
  padding:0 0 5px;
  position: relative;
}

}

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

.article_header {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 0; /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: none;
  overflow: hidden;
}



.sec1_inner {
  width: 100%;
  max-width: 96%;
}


h2 {
  width: 100%;
  font-size: 1.4rem;
  margin: 3%  auto 2%;
  padding: 0 0 15px 20px;
}

.img_add {
  float: none;
  margin: 20px auto ;
  width: 80%;
}

.img_add2 {
  float: none;
  margin: 5px auto 20px;
  width: 80%;
}

.caption {
  width: 100%;
  margin: 10px auto 0;
}


}


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

.article_header2 {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 1280px;
  padding: 5% 2% 2%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header_item1 {
  width: 100%;
  order:2;
}

.header_item2 {
  width: 100%;
  height: auto;
  order:1;
}

h2 {
  font-size: 1.3rem;
}

.logo img {
  margin: 5% auto;
}

.ph_flex {
  width: 100%;
  margin: 10px auto 0;
  display: flex;
  position: relative;
  flex-direction: column;
}


.logo img {
  margin: 50px auto;
  width: 260px;
  text-align: center;
}

.bnr_next1 {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(100/580 * 100%);
  background: url(btn_sp_p1.svg) top center / cover no-repeat;
  z-index: 10;
  transition: 0.3s; /* 滑らかにする場合 */
}

.bnr_next2 {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-top: calc(100/580 * 100%);
  background: url(btn_sp_p2.svg) top center / cover no-repeat;
  z-index: 10;
  transition: 0.3s; /* 滑らかにする場合 */
}

.bnr_viewer {
  display: block; /* aタグはインライン要素のため追加 */
  position: relative;
  margin: 15px auto;
  width: 100%;
  height: 0;
  padding-top: calc(130/580 * 100%);
  background: url(btn_sp_viewer.png) top center / cover no-repeat;
  z-index: 99;
  transition: 0.3s; /* 滑らかにする場合 */
}


.subheading1 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(192/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub1.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading2 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(250/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub2.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading3 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(250/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub3.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading4 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(250/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub4.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading5 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(250/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub5.svg) top left / cover no-repeat;
  z-index:10;
}

.subheading6 {
  position: relative;
  margin: 40px auto 30px;
  width: 100%;
  height: 0;
  padding-top: calc(200/500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img_sp_sub6.svg) top left / cover no-repeat;
  z-index:10;
}

.box_article2 {
  margin: 3% auto 5%;
  padding: 3%;
}

.box_article_inner {
  padding: 3%;
}


.pf_s1 img {
   width: 100%;
  max-width: 100%;  
}

}

/* --- 全体ステージ（アスペクト比 1024:597 を維持） --- */
.mv-stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1024 / 597; /* 元画像全体の縦横比を固定 */
  margin: 10px auto 0;
  overflow: hidden;
  background-color: #fff;

}

/* 全パーツ共通：絶対配置＆変倍防止 */
.mv-item {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 変倍を防ぎ、枠にきれいに収める */
  display: block;
}

/* ===================================================
   各要素の座標・サイズ（%）と重なり順（z-index）
   左側ほど z-index を高くし、後ろから右へ出します
   =================================================== */

/* 1: メイン画像 (最前面: z-index 5) */
.item-1 {
  left: 0;
  top: 0;
  width: 48.8%;
  height: 100%;
  z-index: 5;
}

/* --- 第1ウェーブ: z-index 4 --- */
/* 2: 上段左 */
.item-2 {
  left: 49.6%;
  top: 0;
  width: 25.0%;
  height: 27.2%;
  z-index: 4;
}
/* 4: 料理1 */
.item-4 {
  left: 49.6%;
  top: 28.5%;
  width: 12.3%;
  height: 13.5%;
  z-index: 4;
}
/* 8: 内装格子（ロゴの右隣・アキなしで9と接する） */
.item-8 {
  left: 65.8%;
  top: 43.3%;
  width: 16.2%;
  height: 36.3%;
  z-index: 4;
}
/* 10: 下段 丼 */
.item-10 {
  left: 49.6%;
  top: 80.8%;
  width: 16.2%;
  height: 19.2%;
  z-index: 4;
}

/* --- 第2ウェーブ: z-index 3 --- */
/* 3: 上段右（2とアキなしで接する） */
.item-3 {
  left: 74.6%;
  top: 0;
  width: 25.4%;
  height: 27.2%;
  z-index: 3;
}
/* 5: 料理2（4とアキなしで接する） */
.item-5 {
  left: 61.9%;
  top: 28.5%;
  width: 12.7%;
  height: 13.5%;
  z-index: 3;
}
/* 9: 内装窓（8とアキなしで接する） */
.item-9 {
  left: 82.0%;
  top: 43.3%;
  width: 18.0%;
  height: 36.3%;
  z-index: 3;
}
/* 11: 下段 海老（10とアキなしで接する） */
.item-11 {
  left: 65.8%;
  top: 80.8%;
  width: 16.2%;
  height: 19.2%;
  z-index: 3;
}

/* --- 第3ウェーブ: z-index 2 --- */
/* 6: パスタ（5とアキなしで接する） */
.item-6 {
  left: 74.6%;
  top: 28.5%;
  width: 12.5%;
  height: 13.5%;
  z-index: 2;
}
/* 12: 下段 パイ（11とアキなしで接する） */
.item-12 {
  left: 82.0%;
  top: 80.8%;
  width: 18.0%;
  height: 19.2%;
  z-index: 2;
}

/* --- 第4ウェーブ: z-index 1 --- */
/* 7: 肉（6とアキなしで接する） */
.item-7 {
  left: 87.1%;
  top: 28.5%;
  width: 12.9%;
  height: 13.5%;
  z-index: 1;
}

/* --- 13: ロゴ（白背景エリア中央に配置） --- */
.item-13 {
  left: 49.6%;
  top: 43.3%;
  width: 16.2%;
  height: 36.3%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-13 img {
  width: 78%;
  height: auto;
  object-fit: contain;
}


/* ===================================================
   オーバーラップ・フェードイン（全体尺: 約3.8秒）
   1 → 2 → 12 → 8 → 4 → 3 → 11 → 5 → 7 → 10 → 6 → 9 → (タメ) → 13
   =================================================== */

/* 写真共通：オーバーラップ */
.item-1, .item-2, .item-12, .item-8, .item-4, .item-3, .item-11, .item-5, .item-7, .item-10, .item-6, .item-9 {
  animation-name: simpleFadeIn;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- 出現順序とディレイ（0.18s刻みで重ねる） --- */
.item-1  { animation-delay: 0.00s; } /* 1 */
.item-2  { animation-delay: 0.18s; } /* 2 */
.item-12 { animation-delay: 0.36s; } /* 12 */
.item-8  { animation-delay: 0.54s; } /* 8 */
.item-4  { animation-delay: 0.72s; } /* 4 */
.item-3  { animation-delay: 0.90s; } /* 3 */
.item-11 { animation-delay: 1.08s; } /* 11 */
.item-5  { animation-delay: 1.26s; } /* 5 */
.item-7  { animation-delay: 1.44s; } /* 7 */
.item-10 { animation-delay: 1.62s; } /* 10 */
.item-6  { animation-delay: 1.80s; } /* 6 */
.item-9  { animation-delay: 1.98s; } /* 9（写真群完了: 約2.88s） */

/* --- 13: ロゴ --- */
.item-13 {
  transform-origin: center center;
  animation-name: logoZoomFadeIn;
  animation-duration: 2s;
  animation-delay: 2.8s; 
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================================
   キーフレーム定義
   =================================================== */

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

/* ロゴ: やや大きめ（2倍）からスケールを落としながらフェード */
@keyframes logoZoomFadeIn {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*店舗紹介*/
/* 2カラムレイアウト（レスポンシブ対応） */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.shop-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 1040px;
  margin: 0 auto;
}

.shop-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

/* ヘッダー部分（黒帯バー） */
.shop-header {
  position: relative;
  background-color: #000;
  color: #fff;
  display: flex;
justify-content: flex-start;
  align-items: flex-start;
  padding-left: 80px; /* バッジが被る余白を確保 */
  padding-right: 5px;
  min-height: 50px;
  text-align: left;
}

.shop-header2 {
  position: relative;
  background-color: #000;
  color: #fff;
  display: flex;
justify-content: flex-start;
  align-items: flex-start;
  padding-left: 50px; /* バッジが被る余白を確保 */
  padding-right: 16px;
  min-height: 50px;
  text-align: left;
}


/* 写真部分 */
.shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #e5e5e5;
}

.shop-image2 {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #e5e5e5;
}

.shop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト本文エリア */
.shop-body {
  padding-top: 14px;
}

/* キャッチコピー */
.shop-catch, .shop-catch2 {
  color: #c93a2b;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  text-align: left;
  position: relative;
}

.shop-catch:before, .shop-catch2:before {
  position: absolute;
  bottom: -22px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 12px 10px 0 10px;
  border-style: solid;
  border-color: #c93a2b transparent transparent transparent;
}

.shop-catch:after {
  position: absolute;
  bottom: -19px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 12px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index:10;
}

.shop-catch2:after {
  position: absolute;
  bottom: -19px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 12px 10px 0 10px;
  border-style: solid;
  border-color: #f2efea transparent transparent transparent;
  z-index:10;
}

/* 赤いアクセント区切り線 */
.shop-divider {
  width: 100%;
  height: 2px;
  background-color: #c93a2b;
  margin-bottom: 12px;
  position: relative;
}



/* 本文テキスト */
.shop-desc {
  font-size: 0.95rem;;
  line-height: 1.7;
  color: #2b2b2b;
  text-align: justify;
  text-indent: 0;
}

/* ===================================================
   レスポンシブ対応（画面幅 768px 以下：スマホ表示）
=================================================== */
@media (max-width: 768px) {
  .shop-grid, .shop-grid2 {
    grid-template-columns: 1fr; /* 1カラム（縦並び）に切り替え */
    gap: 36px;
  }

  .shop-header {
    padding-left: 86px;
    min-height: 54px;
  }

  .shop-catch {
    font-size: 16px;
  }

  .shop-desc {
    font-size: 13px;
  }
}


/* 2列グリッド（和菓子店用） */
.spot-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 20px auto 50px;
}

.spot-card {
  display: flex;
  flex-direction: column;
}

/* 上部テキストエリア */
.spot-header {
  margin-bottom: 16px;
  text-align: left;
}

/* 赤い角丸カプセルバッジ */
.spot-category-pill {
  display: inline-block;
  background-color: #b93729;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  font-family: sans-serif;
}

/* 店名見出し */
.spot-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: 1px solid #c8291d; /* 細いベージュ系の境界線 */
  margin-bottom: 10px;
}

.spot-name-strong {
  font-size: 22px;
}

/* 住所行 */
.spot-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #333;
  margin-bottom: 10px;
  font-family: sans-serif;
}

.spot-address-label {
  background-color: #8c8c8c;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.2;
}

/* 説明テキスト */
.spot-lead {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #2b2b2b;
  text-align: justify;
  text-indent: 0;
}

/* 画像群コンテナ */
.spot-visuals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spot-visual-primary,
.spot-visual-secondary {
  margin: 0;
  overflow: hidden;
  border-radius: 8px; /* 画像の角丸 */
}

.spot-visual-primary img,
.spot-visual-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* メイン画像（大） */
.spot-visual-primary {
  width: 100%;
  aspect-ratio: 16 / 11;
  background-color: #eee;
}

/* サブ画像（横並び2枚） */
.spot-visual-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.spot-visual-secondary {
  aspect-ratio: 16 / 11;
  background-color: #eee;
}

/* ===================================================
   レスポンシブ対応（スマホ幅: 768px以下）
=================================================== */
@media (max-width: 768px) {
  .spot-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .spot-name {
    font-size: 17px;
  }

  .spot-name-strong {
    font-size: 19px;
  }

  .spot-lead {
    font-size: 12.5px;
  }
}