@charset "UTF-8";
/* Scss Document */

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.75px;
  line-height: 1.5;
  box-sizing: border-box;
  color: var(--black);
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100%;
}
body {
    height: auto;
    position: relative;
	background: url(../img/bg.jpg);
	background-size: 100% 100%;
}
 

/*-- 共通カラー --*/
:root {
  --red1: #C4451C;
  --red2: #53210F;
  --red3: #D94D46;
  --red4: #E8D6CF;
  --blue1: #1F5484;
  --blue2: #07183C;
  --blue3: #074E80;
  --blue4: #D1D9E9;
  --orange: #FB6D00;
  --gold: #B49B76;
  --gold2: #C1B39E;
  --gold3: #DCD2C3;
  --black: #222;
}


/*--------------------------------------------------------
　header
--------------------------------------------------------*/
header {
	width: 100%;
	z-index: 10;
    padding: 0px 0 0 0;
    position: relative;
}
header .inner {
/*	display: flex;*/
    justify-content: center;
    padding: 0 0 0 0;
    width: 100%;
}



@media screen and (max-width:768px) {
/*--------------------------------------------------------
　header SP
--------------------------------------------------------*/
header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 16;
    padding: 0px 0 0 0;
}
header .inner {
    justify-content: center;
    width: 100% !important;
}



.index {
	min-width: 100%;
	width:100%;
	position: relative;
}


} /**** END media screen *****/

/*--------------------------------------------------------
　footer PC
--------------------------------------------------------*/
footer {
	width: 100%;
	max-width: 1000px;
	margin: 0px auto 0px auto;
	text-align: center;
	font-size: clamp(0.75rem, 1.6vw, 1rem);
	background: #223;
	color: #FFF;
	padding: 20px 0 20px 0;
}
footer small {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: clamp(0.625rem, 0.25rem + 0.8vw, 0.75rem);
	padding-top: 10px;
	padding-bottom: 10px;
}
footer a {
	color: #FFFF;
}


@media screen and (max-width:768px) {
/*--------------------------------------------------------
　footer SP
--------------------------------------------------------*/
footer {
	width: 100%;
}
footer small {
}
} /**** END media screen *****/




/* --- pagetop --- */

.pagetop {
	position: fixed;
	bottom: 5px;
	right: 5px;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: scale(0.3);
	transition: all .6s;
	z-index: 10000;
}

.pagetop a {
	background: rgba(50, 50, 50, 1);
	background-color: var(--gold);
	display: table-cell;
	width: clamp(3.125rem, 2.708rem + 1.67vw, 3.75rem);
	height: clamp(3.125rem, 2.708rem + 1.67vw, 3.75rem);
	text-align: center;
	vertical-align: middle;
	color: #fff !important;
	font-size: 1.6rem;
	text-decoration: none;
	background: -moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 50px;
}

.pagetop.show {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.pagetop a:hover {
	background: rgba(50, 50, 50, 0.8);
	text-decoration: none;
}




.pcLayer {
	display: block;
}
.spLayer {
	display: none;
}

@media screen and (max-width:768px) {
.pcLayer {
	display: none;
}
.spLayer {
	display: block;
}

body {
	min-width:100%;
}


} /**** END media screen *****/






/*--------------------------------------------------------
　PC設定
--------------------------------------------------------*/
#contents {
	width:100%;
	display: block;
	position: relative;
	z-index: 100;
	margin-top: -150px;
	background: url(../img/bg.png);
	background-size: 100% auto;
	background-repeat: repeat-y;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.1em;
}
#main {
	width:100%;
}


.index {
	width:100%;
}

.filter {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100px;
	background-size: 100% 150px;
	background-color: #FFF;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	z-index:10;
}
.index .indexModule01 {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 900px;
/*    max-height: 1000px;*/
    overflow: hidden;
    position: relative;
}

.index .indexModule01 .inner {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      position: relative;
      margin: 0 auto;
      width: 100%;
      z-index: 200;
      pointer-events: none;
}



.index .indexModule01 .bgiSlider {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
    .index .indexModule01 .main_img {
      z-index: 1;
      width: 100%;
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
     }
    /* 背面レイヤー：常に「直前の写真」を等倍で表示し続ける（消えない） */
    .index .indexModule01 .main_img.is-back {
      z-index: 1;
     }
    /* 前面レイヤー：次の写真を中央から円形に広げて重ねる */
    .index .indexModule01 .main_img.is-front {
      z-index: 2;
      clip-path: circle(0% at 50% 50%);
      transition: clip-path 1.4s cubic-bezier(0.65,0,0.35,1);
     }
    .index .indexModule01 .main_img.is-front.is-revealed {
      clip-path: circle(75% at 50% 50%);
     }
    /* 使っていない予備の.main_imgは非表示にしておく */
    .index .indexModule01 .main_img:not(.is-back):not(.is-front) {
      display: none;
     }
    .index .indexModule01 .main_img p {
      position: absolute;
      top: clamp(1rem, 2vw, 2rem);
      right: clamp(1rem, 2vw, 2rem);
      z-index: 4;
      margin: 0;
      padding: 3px 5px 3px 5px;
      background: rgba(0, 0, 0, 0.5);
      color: #FFF;
      font-family: "Noto Serif JP", serif;
      font-size: 10px;
      letter-spacing: 0.08em;
/*      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);*/
      pointer-events: none;
     }
    .index .indexModule01 .ripple-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,0.85);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 3;
      animation: rippleRing 1.4s ease-out forwards;
     }
@keyframes rippleRing {
  0% {
    width: 0;
    height: 0;
    opacity: 0.9; }
  100% {
    width: 1400px;
    height: 1400px;
    opacity: 0; } }

@keyframes dotanime {
  0% {
    opacity: 0.6; }
  10% {
    opacity: 1; }
  20% {
    opacity: 1; }
  30% {
    opacity: 0.6; }
  100% {
    opacity: 0.6; } }


.mainBlock {
	width: 100%;
	max-width: 1000px;
	height: 1000px;
	margin: 0 auto;
	display: block;
	position: relative;
	padding: 50px 20px 0 20px;
}
.mainText {
	width: 100%;
	max-width: clamp(23.75rem, 14.583rem + 36.67vw, 37.5rem);
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 1));
}
.mainText li {
	clip-path: inset(0 100% 0 0); /* 最初は非表示（右側をクリップして隠す） */
	animation: revealLeftToRight 0.8s ease-out forwards; /* 左から右へ表示 */
	width: 100%;
	padding-bottom: 10px;
	text-align: center;
	position: absolute;
}
.mainText li img {
	width: 100%;
	margin: 0 auto;
}

/* フェードインのアニメーションを定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* 少し下から表示される演出 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ぼかしが抜けながら、くっきり表示される */
@keyframes blurFadeIn {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.animated.blurFadeIn {
  animation-name: blurFadeIn;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
}

/* 拡大フェードインのアニメーションを定義 */
@keyframes zoomInFadeIn {
  from {
    opacity: 0;
    transform: scale(0.5); /* 開始時：50%のサイズから */
  }
  to {
    opacity: 1;
    transform: scale(1);   /* 終了時：100%の元のサイズに戻る */
  }
}
/* 左から右へワイプ表示するアニメーションを定義 */
@keyframes revealLeftToRight {
  from {
    clip-path: inset(0 100% 0 0); /* 右側を100%クリップ＝非表示 */
  }
  to {
    clip-path: inset(0 0 0 0); /* クリップなし＝全体表示 */
  }
}

/* 各リストアイテムに遅延時間を設定 */
.mainText li:nth-child(1) {
  animation-delay: 0s;
  top: 0px;
  left: 230px;
  max-width: 180px;
}
.mainText li:nth-child(2) {
  animation-delay: 0.2s;
  top: 15px;
  max-width: 400px;
}
.mainText li:nth-child(3) {
  animation-delay: 0.4s;
  left: 80px;
  top: 150px;
  max-width: 450px;
}
.mainText li:nth-child(4) {
  animation-delay: 0.6s;
  left: 120px;
  top: 280px;
  max-width: 350px;
}
.mainText li:nth-child(5) {
  animation-delay: 0.8s;
  max-width: 100px;
  right: 25px;
  top: 55px;
}
/*.mainText li:nth-child(6) {
  animation-delay: 1s;
}
.mainText li:nth-child(7) {
  animation-delay: 1.2s;
}
.mainText li:nth-child(8) {
  animation-delay: 1.4s;
}
.mainText li:nth-child(9) {
  animation-delay: 1.6s;
}
.mainText li:nth-child(10) {
  animation-delay: 1.8s;
}*/
.mainText li.catch {
	position: absolute;
	top: 0px;
	left: -90px;
	width: 100px;
	width: clamp(3.125rem, 1.042rem + 8.33vw, 6.25rem);
	animation: fadeIn 1s ease-in-out forwards;  /*1秒かけてフェードイン */
}
.mainText li:nth-child(11) img {
	width: 100%;
}
.mainText li img.free {
	margin-top: 20px;
}

.imgBlock {
	position: absolute;
	right: 10px;
	bottom: 400px;
}
.imgBlock li {
	width: 180px;
	width: clamp(6.25rem, 2.917rem + 13.33vw, 11.25rem);
	position: relative;
	margin-bottom: 15px;
}
.imgBlock li img {
	width: 100%;
	border: 2px solid #FFF;
}
.imgBlock li span {
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #FFF;
	font-size: 12px;
	font-size: clamp(0.625rem, 0.542rem + 0.33vw, 0.75rem);
}

.mainBlock > .txtBlock {
	position: absolute;
	top: 420px;
	right: 15%;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-family: "Noto Serif JP", serif;
}
.mainBlock > .txtBlock2 {
	position: absolute;
	z-index: 9999;
	width: 55%;
	left: 10%;
	top: 700px;
	font-family: "Noto Serif JP", serif;
	color: #FFF;
	font-size: 14px;
	text-shadow: 0 0 5px rgba(0, 0, 0, 1);
	line-height: 1.8;
	@media screen and (max-width:750px) {
	width: 92%;
	left: 4%;
	top: 575px;
	font-size: 13px;
	letter-spacing: 0;
	}
}

.txtBlock li {
	color: #FFF;
	height: 22em;
	padding-top: 0em;
/*	text-shadow: 
       2px  2px 1px #000000,
      -2px  2px 1px #000000,
       2px -2px 1px #000000,
      -2px -2px 1px #000000,
       2px  0px 1px #000000,
       0px  2px 1px #000000,
      -2px  0px 1px #000000,
       0px -2px 1px #000000;*/
	line-height: 2.5;
	font-size: 20px;
	font-size: clamp(1.125rem, 1.042rem + 0.33vw, 1.25rem);
}
.txtBlock li.h2 {
	font-size: 24px;
	font-size: clamp(1.25rem, 1.083rem + 0.67vw, 1.5rem);
	line-height: 1.5;
	height: auto;
	font-weight: 400;
	padding-top: 0em;
	padding-left: 10px;
}


.tabBox {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.tabBlock {
  list-style: none;
  display: flex;
  justify-content: center;
   align-items: center;
  padding: 0;
  margin: 0 auto;
}

.tabBlock li {
  cursor: pointer;
  border: none;
  margin: 0;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-top-left-radius: clamp(1.25rem, 1.042rem + 0.83vw, 1.563rem);
  border-top-right-radius: clamp(1.25rem, 1.042rem + 0.83vw, 1.563rem);
  padding: clamp(0.625rem, 0.25rem + 1.6vw, 1.25rem) 0 clamp(0.625rem, 0.25rem + 1.6vw, 1.25rem) 0;
  padding: 0px 0 10px 0;
  border-bottom: 0px solid #FFF;
  width: 48%;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.tabBlock li.tab1, 
.tabBlock li.tab2 {
  color: #FFF;
  font-family: "Zen Maru Gothic", sans-serif;
  text-decoration: none;
	font-size: 18px;
	line-height: 1;
	padding-top: 15px;
}
.tabBlock li.tab1 h2, 
.tabBlock li.tab2 h2 {
	font-size: 52px;
	font-size: clamp(1.875rem, 0.958rem + 3.67vw, 3.25rem);
	font-weight: 500;
	letter-spacing: 0;
	display: block;
	padding: 0;
	margin: 0;
}
.tabBlock li.tab1 span, 
.tabBlock li.tab2 span {
	font-size: 24px;
	display: block;
	margin: 5px 0 15px 0;
	font-weight: 500;
	@media screen and (max-width:768px) {
	margin: 5px 0 10px 0;
	}
}
.tabBlock li.tab1 h2 > span, 
.tabBlock li.tab2 h2 > span {
	display:inline;
	font-size: 40px;
	font-size: clamp(1.5rem, 0.833rem + 2.67vw, 2.5rem);
	@media screen and (max-width:768px) {
	letter-spacing: -0.1em;
	}
}

.tabBlock li.tab1 span.date, 
.tabBlock li.tab2 span.date {
	font-size: 46px;
	font-size: clamp(2.25rem, 1.833rem + 1.67vw, 2.875rem);
	font-weight: bold;
	line-height: 1;
	vertical-align: middle;
}
.tabBlock li.tab1 span.time, 
.tabBlock li.tab2 span.time {
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	@media screen and (max-width:768px) {
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	padding-left: clamp(0.625rem, -1.042rem + 6.67vw, 3.125rem);
	}
	vertical-align: middle;
	
}
.tabBlock li.tab1 span.venue, 
.tabBlock li.tab2 span.venue {
	font-size: 28px;
	font-size: clamp(1rem, 0.5rem + 2vw, 1.75rem);
	@media screen and (max-width:768px) {
	letter-spacing: -0.02em;
	}
	margin: 10px 0 15px 0;
}
.tabBlock li.tab1 em, 
.tabBlock li.tab2 em {
	font-size: 18px;
	font-style: normal;
  /* 円の指定 */
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 2rem;          /* 幅と高さを揃える */
  height: 2rem;
  border-radius: 50%;    /* 完全に丸くする */
  margin: 0px 0 0 5px;
  line-height: 0.5;
  /* 見た目の調整 */
  border: 2px solid #FFF; /* 枠線 */
  transform: translateY(-4px);
}
.tabBlock li strong {
	font-size: 16px;
	display: inline-block;
	margin: 0px 0 0px 0;
	background: #FFF;
	border-radius: 50px;
	padding: 5px 15px 10px 15px;
}
.tabBlock li.tab1 strong em.num, 
.tabBlock li.tab2 strong em.num {
	font-size: 26px;
	@media screen and (max-width:750px) {
	font-size: 22px;
	}
	font-style: normal;
	display: inline-block;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: auto;          /* 幅と高さを揃える */
	height: auto;
	border-radius: 0%;    /* 完全に丸くする */
	margin: 0px 0 0 0px;
	line-height: 1;
	border: none;
	transform: translateY(0px);
}

.tabBlock li.tab1 strong {
	color: var(--blue1);
}
.tabBlock li.tab2 strong {
	color: var(--red1);
}

.tabBlock li.tab1 {
  background-color: var(--blue1);
  background-image: linear-gradient(0deg, var(--blue1) 0% var(--blue1) 30%, var(--blue3) 100%);
  overflow: hidden;
  position: relative;
}
.tabBlock li.tab1:after, 
.tabBlock li.tab2:after {
	content: "";
	background-image: url(../img/btn_bg.png);
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.tabBlock li.tab2 {
  background-color: var(--red1);
  overflow: hidden;
  position: relative;
  margin-left: 1%;
  background-image: linear-gradient(0deg, var(--red1) 0% var(--red1) 30%, var(--red1) 100%);
}
.tabBlock li:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: none;
}

.tabBlock li:not(.active) {
  -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 96%, transparent 96%);
}

.tabBlock li:not(.active):hover {
  transform: translateY(-10px);
}
.tabBlock li span.arrow {
	display: block;
	padding: 0;
	height: 30px;
	height: clamp(1.25rem, 0.875rem + 1.6vw, 1.875rem);
	width: 100%;
	text-align: center;
	margin: 15px auto 0 auto;
	margin: clamp(0.5rem, 0.238rem + 1.12vw, 0.938rem) auto 0 auto;
}
.tabBlock li.active img {
}
.tabBlock li img {
	max-height: 171px;
	max-height: clamp(5.313rem, 2.088rem + 13.76vw, 10.688rem);
}
.tabBlock li span > img.arrow {
	display: none;
	height: 30px;
	height: clamp(1.25rem, 0.875rem + 1.6vw, 1.875rem);
	margin: 0px auto 0 auto;
}
.tabBlock li.active span > img.arrow {
	display: block;
	animation: fadeInDownLoop 2s ease-in-out infinite;
}


/* アニメーション定義 */
@keyframes fadeInDownLoop {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.2;
    transform: translateY(10px);
  }
}

/* 要素にアニメーションを適用 */
.fade-in-down {
  animation: fadeInDownLoop 3s ease-in-out infinite;
}


#tab1Block, 
#tab2Block {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px;
	color: #FFF;
}
#tab1Block {
	border: 10px solid var(--blue1);
	background: var(--blue1);
}
#tab2Block {
	border: 10px solid var(--red1);
	background: var(--red1);
}

p.topTxt {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-size: clamp(0.75rem, 0.375rem + 0.8vw, 0.875rem);
}
p.topTxt > strong {
	font-weight: bold;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	font-size: 18px;
	font-size: clamp(1rem, 0.625rem + 0.8vw, 1.125rem);
}

a.btn, 
a.btnEnd {
	display: block;
	width: 80%;
	height: 95px;
	line-height: 95px;
	font-family: "Zen Maru Gothic", sans-serif;
	text-decoration: none;
	color: #FFF;
	font-weight: 500;
	text-align: center;
	border-radius: 5px;
	margin: 20px auto 50px auto;
	position: relative;
	font-size: 36px;
	font-size: clamp(1.25rem, -1.75rem + 6.4vw, 2.25rem);
}
a.btnEnd {
	pointer-events: none;
	margin: 20px auto 5px auto;
	font-size: clamp(1rem, -0.875rem + 4vw, 1.625rem);
}
p.endMes {
	width: 100%;
	margin: 0px auto 50px auto;
	text-align: center;
	color: #FFF;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}

a.btn::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -13px;
	right: 20px;
	width: 30px;
	height: 30px;
}
#tab1Block a.btn::after {
	background: url(../img/arrow3-blue.svg);
	background-size: 100%;
	background-repeat: no-repeat;
}
#tab2Block a.btn::after {
	background: url(../img/arrow3-red.svg);
	background-size: 100%;
	background-repeat: no-repeat;
}
a.btn:hover::after {
	animation: fadeInSideLoop 1.5s ease-in-out infinite;
}
/* アニメーション定義 */
@keyframes fadeInSideLoop {
  0% {
    opacity: 0;
    transform: translateX(-5px);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.2;
    transform: translateX(5px);
  }
}

#tab1Block a.btn {
	color: var(--blue2);
}
#tab2Block a.btn {
	color: var(--red2);
}
#tab1Block a.btnEnd, 
#tab2Block a.btnEnd {
	background: #999;
}
#tab1Block a.btn:hover {
	background: var(--gold2);
}
#tab2Block a.btn:hover {
	background: var(--gold2);
}

#tab1Block a.btn, 
#tab2Block a.btn {
	position: relative;
	z-index: 1;
	background-image: linear-gradient(#FFF, var(--blue4)); /* グラデーションA */
	overflow: hidden;
}

#tab1Block a.btn::before, 
#tab2Block a.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(#FFF, var(--gold2)); /* グラデーションB */
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}
#tab1Block a.btn:hover::before, 
#tab2Block a.btn:hover::before {
	opacity: 1;
}

h3 {
	width: 100%;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	display: block;
	border-radius: 5px;
	font-weight: bold;
	color: #FFF;
	font-size: 18px;
	font-size: clamp(0.875rem, 0.125rem + 1.6vw, 1.125rem);
}
#tab1Block h3 {
	background: rgba(0, 0, 0, 0.8);
}
#tab2Block h3 {
	background: rgba(0, 0, 0, 0.8);
}

h4, h5, 
ul.single, 
ul.double, 
.workShop, 
.accessBlock {
	width: 90%;
	margin: 20px auto 10px auto;
}
h4, h5 {
	font-size: 18px;
	font-size: clamp(0.875rem, 0.125rem + 1.6vw, 1.125rem);
}
h4 strong {
	width: 6em;
	color: #FFF;
	display: inline-block;
	margin-right: 15px;
	font-weight: bold;
	text-align: center;
	padding: 5px 0 5px 0;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	background: rgba(0,0,0,0.4);
}
#tab1Block h4 {
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
/*	border-bottom: 2px solid var(--blue2);*/
}
#tab2Block h4 {
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
}
h5 {
	border-radius: 100px;
	text-align: center;
	line-height: 2em;
	font-weight: bold;
}
h4.topSP, 
h5.topSP {
	margin-top: 70px;
}
#tab1Block h5 {
	color: var(--gold2);
	border-radius: 0;
	font-weight: normal;
	border-bottom: 1px solid var(--gold);
}
#tab2Block h5 {
	color: var(--gold3);
	border-radius: 0;
	font-weight: normal;
	border-bottom: 1px solid var(--gold2);
}

.part2 {
	width: 90%;
	@media screen and (max-width:750px) {
	width: 100%;
	}
	margin: 0 auto;
}
.part2 img {
	width: 100%;
	border-radius: 5px;
}


section table {
	width: 96%;
	margin: 0 auto 50px auto;
}
section table th, 
section table td {
	border-bottom: 1px dotted #CCC;
	padding: 10px;
	vertical-align: top;
	font-size: 18px;
	font-size: clamp(0.875rem, 0.125rem + 1.6vw, 1.125rem);
}
section table th {
	text-align: left;
}
section table td {
	
}
section table td span {
	font-size: 14px;
	font-size: clamp(0.75rem, 0.375rem + 0.8vw, 0.875rem);
}



ul.single {
	display: flex;
	margin-bottom: 30px;
	max-width: 800px;
}
ul.single li:nth-child(1) {
}
ul.single li:nth-child(1) img {
	width: 200px;
}
ul.single li:nth-child(2) {
	padding-left: 15px;
}

h6 {
	margin-bottom: 10px;
}
h6 strong {
	font-size: 20px;
	font-size: clamp(1.125rem, 0.75rem + 0.8vw, 1.25rem);
	font-weight: bold;
	display: inline-block;
	max-width: 8em;
	padding-right: 1em;
}
h6 span {
	font-weight: normal;
	display: inline-block;
	font-size: 12px;
	font-size: clamp(0.625rem, 0.25rem + 0.8vw, 0.75rem);
}

ul.single li p {
	font-weight: normal;
	line-height: 1.8;
	text-align: justify;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
	letter-spacing: 0.1em;
}

ul.double {
/*	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;*/
}
ul.double li {
	width: 100%;
	display: block;
	overflow: hidden;
	margin-bottom: 30px;
}
ul.double li img {
	width: 200px;
	float: left;
	margin-right: 10px;
}
ul.double li p {
	overflow: hidden;
}

.workShop {
	border-radius: 10px;
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
	overflow: hidden;
	background: #FFF;
	color: var(--black);
}
.workShop h3 {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 18px;
}
.workShop img {
	width: 250px;
	margin-right: 15px;
	float: left;
}
#tab1Block .workShop {
	border: solid 1px var(--blue1);
}
#tab2Block .workShop {
	border: solid 1px var(--red1);
}
.workShop p.pop {
	position: absolute;
	display: block;
	top: 20px;
	right: 20px;
	background: var(--gold);
	color: #FFF;
	border-radius: 100px;
	padding: 10px 20px 10px 20px;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}
.workShop p.txt {
	padding: 15px 0px 0px 0;
	font-size: 14px;
	font-size: clamp(0.75rem, 0.375rem + 0.8vw, 0.875rem);
}
.workShop p.time {
	background: rgba(0, 0, 0, 0.8);
	color: #FFF;
	display: inline-table;
	padding: 5px 15px 5px 15px;
	margin-top: 15px;
	font-size: 14px;
}


.accessBlock {
	position: relative;
	background: #FFF;
	color: var(--black);
	border-radius: 5px;
}
.accessBlock img {
	width: 100%;
	display: block;
	margin: 10px auto 0px auto;
	@media screen and (max-width:750px) {
	margin: 15px auto 0px auto;
	}
}
.accessBlock strong.midashi {
	display: inline-block;
	padding: 5px 15px 5px 15px;
	color: var(--black);
	margin-bottom: 10px;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}
#tab1Block .accessBlock strong.midashi {
	border: 1px solid var(--black);
	margin: 15px 0 0 15px;
}
#tab2Block .accessBlock strong.midashi {
	border: 1px solid var(--black);
	margin: 15px 0 0 15px;
}
.accessBlock p {
	line-height: 1.8;
	font-size: 14px;
	font-size: clamp(0.75rem, 0.375rem + 0.8vw, 0.875rem);
	letter-spacing: 0.08em;
}
.accessBlock p.access {
	background: var(--black);
	color: #FFF;
	padding: 5px;
	margin: 0;
	text-align: center;
	font-size: 16px;
	@media screen and (max-width:750px) {
		font-size: 13px;
		text-align: left;
		padding: 8px 10px 8px calc(5em + 10px);
		text-indent: calc(-5em - 2px);
	}
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.accessBlock p strong {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.8rem + 0.8vw, 1.3rem);
	margin-left: 15px;
}
.accessBlock p span {
	display: inline-block;
	@media screen and (max-width:750px) {
	display: none;
	}
}
.accessBlock a {
	display: block;
	width: auto;
	height: auto;
	font-family: "Zen Maru Gothic", sans-serif;
	text-decoration: none;
	color: #FFF;
	font-weight: 500;
	text-align: center;
	border-radius: 5px;
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 15px 40px 15px 20px;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}
.accessBlock a::after {
	content: "";
	background: url(../img/arrow2.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 10px;
	width: 20px;
	height: 20px;
}
.accessBlock a:hover::after {
	animation: fadeInSideLoop 1.5s ease-in-out infinite;
}

#tab1Block .accessBlock a {
	background-image: linear-gradient(var(--blue1), #0F3357);
}
#tab2Block .accessBlock a {
	background-image: linear-gradient(var(--red1), #900);
}
#tab1Block .accessBlock a:hover {
	background: var(--gold);
}
#tab2Block .accessBlock a:hover {
	background: var(--gold);
}



/*--------------------------------------------------------
　SP設定
--------------------------------------------------------*/
@media screen and (max-width:750px) {
#contents {
	width:100%;
	position: relative;
	z-index: 10;
	margin-top: -50px;
	background: url(../img/bg_sp.png);
	background-size: 100% auto;
	background-repeat: repeat-y;
}
#main {
	width:100%;
	display: block;
}
/*--------------------------------------------------------
　header
--------------------------------------------------------*/
header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999;
}
header .inner {
/*	display: flex;*/
    justify-content: center;
    padding: 30px 0 0 0;
    width: 100% !important;
}



.index {
	min-width: 100%;
	width:100%;
}



.filter {
	width:100%;
	height:100px;
	background-size: 100% 100px;
	background-color: #FFF;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	z-index:10;
}
  .index .indexModule01 {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative; }

    .index .indexModule01 .inner {
      align-items: center;
      display: block;
      height: 100%;
      justify-content: center;
      position: relative;
      margin: 0 auto;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      z-index: 200; }


    .index .indexModule01 .bgiSlider {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
		}
    .index .indexModule01 .main_img {
	}
.index .indexModule01 {
	min-height: 750px;
	@media screen and (max-width:500px) { min-height: 780px; }
}

.mainBlock {
	height: 750px;
	max-width: 100%;
	min-height: 750px;
	padding: 20px 10px 0 0px;
	background: transparent;
	@media screen and (max-width:500px) { height: 780px; min-height: 780px;}
}
.mainText {
	width: 100%;
	max-width: 100%;
	margin: 0 0 0 0;
}
.mainBlock > .txtBlock {
	right: 5%;
	top: 280px;
	@media screen and (max-width:550px) { top: 310px;
	}
}

.mainText li {
  clip-path: inset(0 100% 0 0); /* 最初は非表示（右側をクリップして隠す） */
  animation: revealLeftToRight 0.8s ease-out forwards; /* 左から右へ表示 */
  width: 100%;
  padding-bottom: 10px;
  text-align: left;
}
.mainText li img {
	width: 100%;
	margin: 0 auto;
}
/* 各リストアイテムに遅延時間を設定 */
.mainText li:nth-child(1) {
  top: 0px;
  left: 100px;
  max-width: 120px;
}
.mainText li:nth-child(2) {
  top: 15px;
  left: 20px;
  max-width: 250px;
}
.mainText li:nth-child(3) {
  left: 40px;
  top: 100px;
  max-width: 270px;
}
.mainText li:nth-child(4) {
  left: 40px;
  top: 180px;
  max-width: 250px;
}
.mainText li:nth-child(5) {
  max-width: 60px;
  left: 250px;
  top: 35px;
}


.imgBlock {
	display:flex;
	bottom: 32%;
	@media screen and (max-width:700px) { bottom: 33%; }
	@media screen and (max-width:650px) { bottom: 35%; }
	@media screen and (max-width:600px) { bottom: 38%; }
	@media screen and (max-width:550px) { bottom: 41%; }
	@media screen and (max-width:500px) { bottom: 44%; }
	@media screen and (max-width:450px) { bottom: 47%; }
	@media screen and (max-width:400px) { bottom: 50%; }
}
.imgBlock li {
	margin-bottom: 0px;
	position: relative;
	margin-left:10px;
}



#tab1Block, 
#tab2Block {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px;
}
#tab1Block {
}
#tab2Block {
}

p.topTxt {
	text-align: left;
	line-height: 1.6;
}


a.btn {
	display: block;
	width: 100%;
	height: 4em;
	line-height: 1.5em;
	font-family: "Zen Maru Gothic", sans-serif;
	text-decoration: none;
	color: #FFF;
	font-weight: 500;
	text-align: center;
	border-radius: 10px;
	margin: 20px auto 30px auto;
	position: relative;
	letter-spacing: 0;
	padding-top: 0.5em
}
a.btnEnd {
	display: block;
	width: 100%;
	height: 4em;
	line-height: 1.5em;
	font-family: "Zen Maru Gothic", sans-serif;
	text-decoration: none;
	color: #FFF;
	font-weight: 500;
	text-align: center;
	border-radius: 10px;
	margin: 20px auto 5px auto;
	position: relative;
	letter-spacing: 0;
	padding-top: 0.5em
}
a.btn::after {
	content: "";
	background: url(../img/arrow2.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	right: 15px;
	width: 30px;
	height: 30px;
}


h4, h5, 
ul.single, 
ul.double, 
.workShop, 
.accessBlock {
	width: 100%;
	margin: 20px auto 10px auto;
}
ul.single {
	display: block;
	margin-bottom: 30px;
	max-width: 100%;
}
ul.single li {
	width:100%;
	display: block;
}
ul.single li:nth-child(1) {
	text-align:center;
}
ul.single li:nth-child(1) img {
	max-width: 150px;
	margin:0 auto 10px auto;
}
ul.single li:nth-child(2) {
	padding-left: 0px;
}

h6 {
	text-align:center;
}


section table {
	width: 100%;
	margin: 0 auto 50px auto;
}
section table th, 
section table td {
	border-bottom: 1px dotted #CCC;
	padding: 10px;
	letter-spacing: 0.03em;
}
section table th {
	width: 4em;
	text-align: right;
	padding-right: 8px;
}
section table td {
	vertical-align: middle;
}

.workShop {
	border-radius: 20px;
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
	overflow: hidden;
	padding-bottom: 10px;
}
.workShop img {
	width: 100%;
	margin-right: 0;
	float: none;
	display: block;
/* 高さとアスペクト比の調整 */
	height: 150px;
	object-fit: cover;
}
.workShop p.pop {
	position: absolute;
	display: block;
	top: 40px;
	right: 10px;
	background: var(--gold);
	color: #FFF;
	border-radius: 100px;
	padding: 10px 15px 10px 15px;
}
.workShop p.txt {
	padding: 15px 10px 0px 10px;
}
.workShop p.time {
	background: #000;
	color: #FFF;
	display: inline-block;
	padding: 5px 15px 5px 15px;
	margin-top: 15px;
	width: 60%;
	margin-left: 20%;
	text-align: center;
}

.accessBlock {
	width: 100%;
}
.accessBlock p {
	text-align: center;
	padding-top: 10px;
}
.accessBlock a {
	position: relative;
	display: block;
	width: 80%;
	top: 0px;
	right: 0px;
	margin: 10px auto 10px auto;
	padding: 15px 40px 15px 20px;
	font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);
}




} /**** END media screen *****/