@charset "UTF-8";

/* index kv ---------------------------------------*/

.indexkv-wrapper {
	width: 100%;
	overflow: hidden;
	background: #fff;
	z-index: 1;
	position: relative;
	transition: all 1.2s 0.5s ease;
}

.indexkv-wrapper.is-active {
	background: transparent;
}

.indexkv {
	position: relative;
	margin: 0 auto;
}

.indexkv-city {
	opacity: 0;
	transition: all 2.5s 0.5s ease;
}
.indexkv-city.is-active {
	opacity: 1;
}

.indexkv-city img {width: 100%;}

.indexkv-cloud-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 2.5s 0.5s ease;
}

.indexkv-cloud-wrapper.is-active {
	opacity: 1;
}

.indexkv-cloud {
	position: absolute;
	z-index: 1;
}

.indexkv-cloud img {width: 100%;}

.indexkv-cloud01 {
	width: 11.67vw;
	top: 10.8vw;
	left: -1.4%;
}

.is-active .indexkv-cloud01 {
	animation: fuwafuwa 5s infinite 2s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud02 {
	width: 10.28vw;
	top: 3vw;
	left: 18.5%;
}

.is-active .indexkv-cloud02 {
	animation: fuwafuwa 5.5s infinite 1.5s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud03 {
	width: 8.75vw;
	top: 7.5vw;
	right: 19.2%;
}

.is-active .indexkv-cloud03 {
	animation: fuwafuwa 6s infinite 2.5s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud04 {
	width: 11.81vw;
	top: 13vw;
	right: -2.5%;
}

.is-active .indexkv-cloud04 {
	animation: fuwafuwa 4.8s infinite 1.8s cubic-bezier(0.12, 0, 0.39, 0);
}

@keyframes fuwafuwa {
	0% {transform: translateY(0);}
	50% {transform: translateY(-20px);}
	100% {transform: translateY(0);}
}

.indexkv-logo {
	position: absolute;
	top: 2vw;
	left: 50%;
	transform: translateX(-50%)  translateY(10vw);
	z-index: 1;
	width: 37.15vw;
	transition: all 1.8s 0.5s ease;
}

.indexkv-logo.is-active {
	transform: translateX(-50%)  translateY(0);
}

.indexkv-logo img {width: 100%;}

.indexkv-pin {
	position: absolute;
	width: 10.69vw;
	opacity: 0;
	filter: drop-shadow(0 3px 4px rgba(85,0,0,0.2));
}

.indexkv-pin.is-active {
	opacity: 1;
}

@keyframes poyoyon {
	0% {
		transform: translateY(-20px);
		opacity: 0;
	}
	50% {
		transform: translateY(0);
	}
	65% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
	20%,100% {
		opacity: 1;
	}
}

@keyframes pyokopyoko {
	0% {
		transform: translateY(0);
	}
	2% {
		transform: translateY(-15px);
	}
	4% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

.indexkv-pin img {width: 100%;}


.indexkv-pin01 {
	bottom: 14.7vw;
	left: 9.5%;
}

.indexkv-pin01.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 6s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin02 {
	bottom: 24.5vw;
	left: 12.8%;
}

.indexkv-pin02.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 10s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin03 {
	bottom: 16.8vw;
	left: 27.3%;
}

.indexkv-pin03.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 14s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin04 {
	bottom: 12vw;
	left: 49.5%;
}

.indexkv-pin04.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 8s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin05 {
	bottom: 11vw;
	left: 72%;
}

.indexkv-pin05.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 12s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin06 {
	bottom: 21vw;
	left: 85.5%;
}

.indexkv-pin06.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyoko 12s infinite 16s cubic-bezier(0.12, 0, 0.39, 0);
}

/* index common ---------------------------------------*/

.index {
	min-height: 100vh;
	margin-top: -15vw;
	padding: calc(17vw + 15px) 20px 0;
	position: relative;
}

.index::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: url('../img/common/bg.png') #F6F5E5 no-repeat center top ;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 1.8s 0.5s ease;
}

.index.is-active::before {
	opacity: 1;
}

.indexinner {
	max-width: 1164px;
	padding-bottom: 100px;
	margin: 0 auto;
}


/* index intro ---------------------------------------*/

.indexintro {
	color: #500;
	text-align: center;
}

.indexintro-lead {
	margin-bottom: 33px;
	font-weight: bold;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: .05em;
	position: relative;
	transition: all .75s 0.5s ease;
	transform:translate(0,20px);
	opacity:0;
}

.indexintro-lead.is-active{
	transform:translate(0,0);
	opacity:1;
}

.indexintro-lead-zakuzaku {
	display: inline-block;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: zakuzaku 6s 2.5s linear infinite;
}

@keyframes zakuzaku{
	0%  {transform:translate(-50%, -50%) rotate(0deg);}
	10%  {transform:translate(-50%, -50%) rotate(0deg);}
	11% {transform:translate(-50%, -50%) rotate(-5deg);}
	12% {transform:translate(-50%, -50%) rotate(0deg);}
	13% {transform:translate(-50%, -50%) rotate(5deg);}
	14% {transform:translate(-50%, -50%) rotate(0deg);}
}

.indexintro-text {
	margin-bottom: 22px;
	font-weight: bold;
	font-size: 20px;
	line-height: 2.3;
	letter-spacing: .04em;
}

.indexintro-text-first {
	transition: all .75s ease;
	transform:translate(0,20px);
	opacity:0;
}

.indexintro-text-first.is-active{
	transform:translate(0,0);
	opacity:1;
}

.indexintro-text-second {
	transition: all .75s ease;
	transform:translate(0,20px);
	opacity:0;
}

.indexintro-text-second.is-active{
	transform:translate(0,0);
	opacity:1;
}

.indexintro-period {
	font-size: 23px;
	font-weight: bold;
	line-height: 2.3;
	letter-spacing: .04em;
	color: #DA0000;
}
.indexintro-period small{
	display:block;
	font-size: 15px;
}

.indexintro-btn {
	margin-top: 50px;
}

.indexintro-btn a {
	transition: all .25s ease;
}

.indexintro-btn a:hover {
	display: inline-block;
	opacity: .7;
}

.indexintro-list {
	max-width: 680px;
	margin: 70px auto 0;
	text-align: left;
}

.indexintro-list li {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: .04em;
}

/* index point ---------------------------------------*/

.indexpoint {
	position: relative;
	margin-top: 120px;
	padding: 94px 20px 117px;
	background: url('../img/index/img_line.png') no-repeat center center;
	background-size: 100% 100%;
}

.indexpoint::before {
	display: inline-block;
	position: absolute;
	top: -47px;
	left: 65px;
	width: 95px;
	height: 101px;
	background: url('../img/index/img_corn_01.png') no-repeat center center;
	background-size: 95px;
	content: '';
}

.indexpoint::after {
	display: inline-block;
	position: absolute;
	bottom: -47px;
	right: 59px;
	width: 100px;
	height: 107px;
	background: url('../img/index/img_corn_02.png') no-repeat center center;
	background-size: 100px;
	content: '';
}

.indexpoint-inner {
	max-width: 980px;
	margin: 0 auto;
}

.indexpoint-title {
	margin-bottom: 83px;
	color: #DA0000;
	font-weight: bold;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: .05em;
	text-align: center;
}

.indexpoint-list {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.indexpoint-item {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.indexpoint-item-image {
	margin-bottom: 22px;
}

.indexpoint-item-title {
	flex-grow: 1;
	margin-bottom: 11px;
	color: #0097E5;
	font-weight: bold;
	font-size: 25px;
	line-height: 1.4;
	letter-spacing: .05em;
}

.indexpoint-item-text {
	flex-grow: 1;
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: .05em;
}

.indexintro-btn-bottom{
	text-align: center;
}


.period-caution{
	position: relative;
}
.period-caution-txt{
	position: absolute;
	top: 184px;
	left: 0;
	right: 0;
	margin: auto;
	width: 740px;
	background: rgba(83, 9, 14, 0.9);
	z-index: 10;
	border-radius: 40px;
	padding: 50px 20px 55px;
}
.period-caution-txt p{
	color: #fff;
	line-height: 1.83333333333em;
	font-size: 24px;
	text-align: center;
	font-weight: 500;
	letter-spacing: -0.02em;
}


/* 202408edit */
.indexheadbtn{
	margin: 0 auto 100px;
}
.indexheadbtn a{}
.indexheadbtn a.pulse-btn{
	margin: 0 auto;
}
.indexheadbtn a span{
	font-size: 28px;
	color: #fff;
	font-weight: bold;
	background: url(../img/index/icon_btn_headbtn.png) no-repeat left center;
	background-size: 150px;
	padding: 30px 0px 30px 160px;
}
.indexheadbtn small{
	display: flex;
	justify-content: center;
	margin: 40px 0 0;
	font-size: 14px;
	color: #550000;
}

/* ボタンの装飾 */
.pulse-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 570px;
	height: 140px;
	border-radius: 100px;
  background-color: #da0000;
  cursor: pointer;
	box-shadow: 0 10px #9c0701;
}

/* ボタンの波紋 */
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #da0000;
  border-radius: 100px;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}

.pulse-btn::after {
  animation-delay: 1s;
}

/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}



/* small pc */
@media screen and (max-width: 1024px){

	.indexpoint-item-title {
		font-size: min(25px, 2.5vw);
	}

	.indexpoint-item-text {
		font-size: min(16px, 1.6vw);
	}

}



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

/* index kv ---------------------------------------*/

.indexkv-cloud {
	position: absolute;
	z-index: 1;
}

.indexkv-cloud01 {
	width: 11vw;
	top: 26.2vw;
	left: 0px;
}

.is-active .indexkv-cloud01 {
	animation: fuwafuwasp 5s infinite 2s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud02 {
	width: 18vw;
	top: 9.5vw;
	left: 0.5%;
}

.is-active .indexkv-cloud02 {
	animation: fuwafuwasp 5.5s infinite 1.2s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud03 {
	width: 15.2vw;
	top: 11.6vw;
	right: 6%;
}

.is-active .indexkv-cloud03 {
	animation: fuwafuwasp 6s infinite 2.5s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-cloud04 {
	width: 10vw;
	top: 26.5vw;
	right: 0%;
}

.is-active .indexkv-cloud04 {
	animation: fuwafuwasp 4.8s infinite 1.8s cubic-bezier(0.12, 0, 0.39, 0);
}

@keyframes fuwafuwasp {
	0% {transform: translateY(0);}
	50% {transform: translateY(-5px);}
	100% {transform: translateY(0);}
}

.indexkv-logo {
	position: absolute;
	top: 5vw;
	left: 49%;
	width: 68vw;
}

/* .indexkv-logo img {width: 100%;} */

.indexkv-pin {
	position: absolute;
	width: 12vw;
	/* height: 8.13vw; */
	/* transition: all 0.1s 2.3s ease-in-out; */
}

.indexkv-pin01 {
	bottom: 15.8vw;
	left: 5.5%;
}

.indexkv-pin01.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 6s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin02 {
	bottom: 26.5vw;
	left: 8.8%;
}

.indexkv-pin02.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 10s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin03 {
	bottom: 17.8vw;
	left: 24.8%;
}

.indexkv-pin03.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 14s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin04 {
	bottom: 12.5vw;
	left: 48.5%;
}

.indexkv-pin04.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 8s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin05 {
	bottom: 12vw;
	left: 73%;
}

.indexkv-pin05.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 12s cubic-bezier(0.12, 0, 0.39, 0);
}

.indexkv-pin06 {
	bottom: 23vw;
	left: 87.5%;
}

.indexkv-pin06.is-active {
	animation: poyoyon 0.25s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards, pyokopyokosp 12s infinite 16s cubic-bezier(0.12, 0, 0.39, 0);
}

@keyframes pyokopyokosp {
	0% {
		transform: translateY(0);
	}
	2% {
		transform: translateY(-10px);
	}
	4% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}


/* index common ---------------------------------------*/

.index {
	padding: calc(25vw + 10px) 20px 0;
}

.index::before {
	background: #F6F5E5;
}


/* index intro ---------------------------------------*/

.indexintro {
	color: #500;
	text-align: center;
}

.indexintro-lead {
	margin-bottom: 19px;
	font-size: 22px;
}

.indexintro-text {
	margin-bottom: 14px;
	font-size: 13px;
	line-height: 2.2;
	margin-left: -10px;
	margin-right: -10px;
}

.indexintro-period {
	margin-top: 18px;
	margin-bottom: 14px;
	font-size: 16px;
}

.indexintro-btn {
	max-width: 300px;
	margin: 26px auto 0;
}

.indexintro-btn a:hover {
	opacity: 1;
}

.indexintro-list {
	margin-top: 42px;
}

.indexintro-list li {
	font-size: 12px;
	line-height: 1.7;
}

/* index point ---------------------------------------*/

.indexpoint {
	position: relative;
	margin-top: 75px;
	padding: 60px 20px 85px;
	background: url('../img/index/img_line_sp.png') no-repeat center center;
	background-size: 100% 100%;
}

.indexpoint::before {
	top: -38px;
	left: 28px;
	width: 67px;
	height: 71px;
	background-size: 67px;
}

.indexpoint::after {
	right: 20px;
	bottom: -34px;
	width: 71px;
	height: 74px;
	background-size: 71px;
}

.indexpoint-title {
	margin-bottom: 38px;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: .05em;
	padding: 0 30px;
}

.indexpoint-list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 40px;
}

.indexpoint-item {
	display: block;
}

.indexpoint-item-image {
	max-width: 255px;
	margin: 0 auto 15px;
}

.indexpoint-item-title {
	flex-grow: 1;
	margin-bottom: 8px;
	color: #0097E5;
	font-weight: bold;
	font-size: 22px;
	line-height: 1.55;
	letter-spacing: .05em;
}

.indexpoint-item-text {
	flex-grow: 1;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .05em;
}

.indexintro-btn-bottom{
	margin-top: 80px;
}


.period-caution-txt {
	position: absolute;
	top: 16vw;
	left: 0;
	right: 0;
	margin: auto;
	width: 83%;
	background: rgba(83, 9, 14, 0.9);
	z-index: 10;
	border-radius: 30px;
	padding: 20px 0px 30px;
}
.period-caution-txt p {
	color: #fff;
	line-height: 1.64em;
	font-size: 16px;
	text-align: center;
	letter-spacing: -0.01em;
}

/* 202408edit */
.indexheadbtn{
	margin: 0 auto 50px;
	width: calc(100% + 4%);
	margin-left: -2%;
}
.indexheadbtn a{}
.indexheadbtn a.pulse-btn{
	margin: 0 auto;
}
.indexheadbtn a span {
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	background: url(../img/index/icon_btn_headbtn.png) no-repeat left center;
	background-size: 85px;
	padding: 30px 0px 30px 100px;
}
.indexheadbtn small{
	display: flex;
	justify-content: center;
	margin: 25px 0 0;
	font-size: 13px;
	color: #550000;
}

/* ボタンの装飾 */
.pulse-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 85%;
	height: 82px;
	border-radius: 100px;
  background-color: #da0000;
  cursor: pointer;
	box-shadow: 0 8px #9c0701;
}

/* ボタンの波紋 */
.pulse-btn::before, .pulse-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #da0000;
  border-radius: 100px;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}

.pulse-btn::after {
  animation-delay: 1s;
}

/* ボタンの波紋が広がっていくアニメーション */
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.indexintro-period small{
	display: block;
	font-size: 12px;
	line-height: 1.3em;
}

}