@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.6;
}
/*html {
  scroll-behavior: smooth;
}*/
html{
  background-color: #fff;
	height: 100%;
}
body {
  overflow-y: auto;
  overflow-x: hidden;
	background-color: #fff;
	height: 100%;
}

body {
	font-family: "ryo-gothic-plusn", sans-serif;
	letter-spacing: .1em;
	font-style: normal;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}
.container {
	display: flex;
	min-height: 100vh;
	width: 100%;
}
img{width: 100%;object-fit: contain;}
.btn_hover,.main_content .btn_hover img{	
	transition: transform .2s ease;
	display: inline-block;
  pointer-events: auto;
}
.btn_hover:hover,
.main_content .btn_hover img:hover{  
	transform:translateY(0) scale(1.1);
}
.sp{display: none;}
@media (max-width: 820px) {
	.sp{display: block;}
	.pc{display: none;}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メイン＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.center {
	width: 35%;
	margin-left: 42%;
	
	position: relative;
	min-height: 0;
	 min-width: 375px;

}

/* スクロールバーを非表示 */
/*.center::-webkit-scrollbar {display: none;}
.center {
	-ms-overflow-style: none;
	scrollbar-width: none;
}*/
.center .sp{display: none;}
.content-box {
	background: rgba(255, 255, 255, 0.2);
	padding: 30px;
	border-radius: 10px;
	margin: 10px 0;
}
@media screen and (max-width: 1070px){
	.center {max-width: 505px;}
}
@media screen and (max-width: 980px){
	.center {
		margin-left: 37%;}
}
/* SP対応（800px以下） */
@media (max-width: 820px) {
	.center {width: 100%;margin: 0 auto;min-width: 0;}
	.center .pc{display: none;}
	.center .sp{display: block;}
}
.center>div{width: 100%;}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝L＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.image-left {
	width: 42%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
}

.image-left .left_img {
	position: absolute;
	margin: auto;
	object-fit: contain;
	object-position: left;
	display: block;
	width: 100%;
}

/* デフォルト配置（大画面想定） */
.image-left .left01 { top: -2%; left: -4%; width: 25%; max-width: 250px; height: 25%; }
.image-left .left02 { top: 24%; left: -18px; width: 30%; max-width: 260px; height: 25%; }
.image-left .left03 { top: 54%; left: -2%; width: 10%; min-width: 90px; height: 10%;}
.image-left .left04 { bottom: 23%; left: 1%; width: 10%; min-width: 90px; height: 10%;}
.image-left .left05 { bottom: 0; left: 0; width: 30%; max-width: 310px; height: 25%; object-position: bottom left; }
.image-left .left06 { bottom: 0; left: 36%; width: 11%; max-width: 130px; object-position: bottom; }
.image-left .left07 { bottom: 0; left: 55%; width: 19%; max-width: 190px; object-position: bottom; }
.image-left .left08 { bottom: 0; left: 80%; width: 11%; max-width: 130px; object-position: bottom; }

.image-left .main {
	position: absolute;
	inset: 0;
	margin: auto;
	min-width: 80%;
	left: -10%;
	object-fit: contain;
	object-position: center;
	display: block;
	width: 100%;
	height: 100%;
}

.image-left .main2 { display: none; }
/* 高さ: 1200px以下 */
@media (max-height: 1200px) {
	.image-left .left01 { top: -1%; height: 23%; }
	.image-left .left02 { top: 22%; height: 30%; }
	.image-left .left03 { top: 52%; }
	.image-left .left04 { bottom: 25%; }
}
/* 高さ: 1000px以下 */
@media (max-height: 1000px) {
	.image-left .left01 { top: -1%; height: 23%; width: 27%; }
	.image-left .left02 { top: 35%; height: 35%; }
	.image-left .left03 { top: 56%; }
	.image-left .left04 { bottom: 25%; }
}

/* 高さ: 800px以下 */
@media (max-height: 800px) {
	.image-left .left01 { height: 23%; }
	.image-left .left02 { height: 35%; left: -2%; }
	.image-left .left05 { height: 20%; }
	.image-left .left06 { height: 10%; }
	.image-left .left07 { height: 11%; }
	.image-left .left08 { height: 10%; }
}

/* 幅: 1700px以下 */
@media (max-width: 1700px) {
	.image-left .left01 { width: 30%; max-width: none; height: 24%;top: 3%; }
	.image-left .left02 { width: 35%; max-width: none; height: 37%;top: 34%; }
	.image-left .left03 { width: 15%; min-width: initial; }
	.image-left .left04 { width: 14%; min-width: initial; }
	.image-left .left05 { width: 36%; max-width: none; height: 25%; }
	.image-left .left06 { width: 13%; left: 42%; max-width: none; }
	.image-left .left07 { width: 22%; left: 65%; max-width: none; }
	.image-left .left08 { width: 13%; left: 85%; max-width: none; }
	.image-left .main { min-width: initial; left: 0; max-width: 605px; }
}

/* 幅: 1300px以下 */
@media (max-width: 1300px) {
	.image-left .top,
	.image-left .topnaka { display: none; }
	.image-left .main { display: none; }
	.image-left .main.main2 {
		display: block;
		width: 80%;
		height: 80%;
		inset: 0;
		margin: auto;
		z-index: 10;
		left: 50%;
        transform: translateX(-50%);
	}
}

/* 幅: 1200px以下 */
@media (max-width: 1200px) {
	.image-left .left05 { width: 30%; }
	.image-left .left06 { width: 10%; left: 45%; }
	.image-left .left07 { width: 20%; }
}

/* 幅: 980px以下 */
@media (max-width: 980px) {
	.image-left { width: 37%; }
}

/* 幅: 820px以下 */
@media (max-width: 820px) {
	.image-left,
	.image-right { display: none; }
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝R＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.image-right {
	width: 23%;
	height: 100vh;
	position: fixed;
	right: 0;
	top: 0;
	overflow: hidden;
}

.image-right .right_img {
	position: absolute;
	margin: auto;
	max-width: 200px;
	object-fit: contain;
	object-position: left;
	display: block;
	width: 100%;
}

/* デフォルト配置（大画面想定） */
.image-right .right01 { top: -5%; right: -5%; max-width: 146px; width: 44%; height: 28%;object-position: right; }
.image-right .right02 { top: 20%; right: -1%; max-width: 95px; width: 28%; height: 12%;object-position: right; }
.image-right .right03 { top: 38%; right: -2%; max-width: 105px; width: 31%; height: 11%;object-position: right; }
.image-right .right04 { top: 54%; right: -2%; max-width: 175px; width: 52%; height: 16%;object-position: right; }
.image-right .right05 { bottom: 0; right: -5%; max-width: 249px; width: 75%; height: 38%; object-position: bottom right; }
.image-right .right06 { bottom: 0; right: 72%; width: 20%; }

/* 高さ: 1200px以下 */
@media (max-height: 1200px) {
	.image-right .kakudai_h { display: none; }
	.image-right .right02 { top: 25%; }
	.image-right .right03 { top: 45%; }
}

/* 高さ: 1000px以下 */
@media (max-height: 1000px) {
	.image-left .kakudai_h { display: none; }
}

/* 高さ: 800px以下 */
@media (max-height: 800px) {
	.image-right .right02 { top: 24%; }
	.image-right .right03 { top: 42%; right: -4%; }
	.image-right .right04 { right: -2%; }
	.image-right .right05 { height: 40%; }
	.image-right .right06 { height: 10%; object-position: bottom; }
}

/* 高さ: 600px以下 */
@media (max-height: 500px) {
	.image-right .right02 { display: none; }
	.image-right .right03 { top: 32%; }
}

/* 高さ: 650px以下 */
@media (max-height: 650px) {
	.image-right .right05 { height: 35%; }
}

/* 高さ: 510px以下 */
@media (max-height: 600px) {
	.image-right .right05,.image-right .right06 { display: none; }
}

/* 幅: 1700px以下 */
@media (max-width: 1700px) {
	.image_box .kakudai_w { display: none; }
}
@media (max-width: 1400px) {
	.image-left .left05 {width: 30%;}
	.image-left .left06 {width: 11%;}
	.image-left .left07 {width: 20%;}
}
/* 幅: 1300px以下 */
@media (max-width: 1300px) {
	.image-left .left01,
	.image-left .left02,
	.image-left .left03,
	.image-left .left04,
	.image-right .right01,
	.image-right .right02,
	.image-right .right03,
	.image-right .right04 { display: none; }
	
}

/* 幅: 1200px以下 */
@media (max-width: 1200px) {
	.image_box .kakudai_h { display: none; }
}

/* 幅: 1070px以下 */
@media (max-width: 1070px) {
	.image-right { width: calc(58% - 375px); }
}

/* 幅: 980px以下 */
@media (max-width: 980px) {
	.image-right { width: calc(63% - 375px);padding: 15vh 20px 0; }
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝R＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.right_btn{
	display: flex;
	flex-direction: column;
	gap:10px;
	
	position: absolute;
    top: 15%;
    left: 13%;
    max-width: 143px;
    object-fit: contain;
    object-position: left;
    
    width: 100%;
    height: 100%;
	z-index: 45;
	
}
.right_btn p{
	color: #e60012;
	font-size: clamp(8px, .5vw, 16px);

	letter-spacing: .08em;
}
.right_btn button{text-align: left;}
@media (max-height: 1070px){.right_btn{	width: 70%;}}
/* 幅: 980px以下 */
@media (max-width: 980px) {
	.right_btn{position: static;width: 100%;}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ｍｖ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.mv{position: relative;	width: 100%;}
.pos{position: absolute;}
.pos01{top: 7%;}
.pos02{top: 16%;}
.pos_btn{bottom: 20px;right: 20px;width: 145px;z-index: 10;}
@media (max-height: 800px){
	.pos_btn{bottom: 10px;right: 10px;}
}
	
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ｍｖ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.mv-fade {position: relative;}
.mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.mv-slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}
.mv-slide img {
  width: 100%;
  height: auto;
  display: block;
}
/* dots */
.mv-dots {
	position: absolute;
    justify-content: center;
    gap: 20px;
    bottom: 10px;
    left: 50%;
	z-index: 10;
	display: flex;
	transform: translateX(-50%);
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
}
.dot.is-active { background: #e60012;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ｍｖ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.btn_list{
	display: none;
}
.btn_list.is-hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media (max-width: 800px){
	.btn_list{
		background: #e60012;
		width: 100%;
		padding: 15px;
		display: flex;
		gap: 10px;
		position: fixed;
		bottom: 0;
		z-index: 20;
		transition: opacity .4s ease, transform .4s ease;
}

	.btn_list a{
		color: #e60012;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		width: 50%;
		display: block;
		text-align: center;
		font-weight: 600;
		font-size: clamp(13px, 1.1vw, 21px);
	}	
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ｍｖ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* youtube */
.youtube{
	position: relative;
	width: 100%;
	z-index: 5;
}
.youtube_movie{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 150px;
}
.youtube_movie iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	z-index: 2;
	left: 0;
}
.youtube>button{ 
	 background-color: #e60012; 
	 color: #fff; 
	 width: 100%;
	 border-radius: 0 0 20px 20px; 
	 
	 font-weight: 600;
	 font-size: clamp(16px, 1.4vw, 20px);
	 letter-spacing: .15rem; 
	line-height: 4;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メインコンテンツ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


.main_content_1{
	background: url("../img/main1_bg.gif");
	background-size: 100%;
	padding: 0 0 7%;
	background-position: bottom center;
	    overflow: hidden;
    border-radius: 20px 20px 0 0;
}
.ttl{width: 35%;margin: 5%;}

.main_content li{
	display: flex;
	align-items: flex-start;
}
.main_content li .huri{position: absolute;}
.main_content .text{
	position: absolute;
	top: 0;
}

.main_content_1 li:nth-child(odd) .huri{right: 0;}
.main_content_1 li:nth-child(even) .huri{left: 0;}

.main_content li>div{position: relative;width: 100%;}
.kazari,.main_content .modal_btn{position: absolute;width: 52%;bottom: 3%;}

.main_content li .btn_top{bottom:21%;}
.main_content li .modal_btn{z-index: 50;}
.main_content_1 li:nth-child(odd)  .modal_btn{right: 11%;}
.main_content_1 li:nth-child(even) .modal_btn{left: 11%;}

.main_content li .kazari{width: 38.5%;}
.main_content_1 li:nth-child(odd) .kazari{left: 0;}
.main_content_1 li:nth-child(even) .kazari{right: 0;}

.main_content_1 li:first-child{margin-top: -17%;}
.main_content_1 li:first-child .kazari{bottom: 0%;}
.main_content_1 li:first-child .huri{width: 21%;}

.main_content_1 li:nth-child(2){margin-top: 10%;}
.main_content_1 li:nth-child(2) .kazari{top: 21%;}
.main_content_1 li:nth-child(2) .huri{width: 35%;} 

.main_content_1 li:nth-child(3){margin-top: 3%;}
.main_content_1 li:nth-child(3) .kazari{top: 8%;}
.main_content_1 li:nth-child(3) .huri{width: 23%;} 

@media (max-width: 820px) {	.center .main_content{width: 90%;margin: 0 auto;}}

@media (min-width: 1600px) {.main_content_1 li:first-child{margin-top: -12%;}
}


.main_content_2{
	background: url("../img/main_bg_2.gif");
	background-size: 100%;
	background-position: top center;
}
.main_content_2 li:nth-child(odd) .kazari{right: 0;}
.main_content_2 li:nth-child(even) .kazari{left: 0;}

.main_content_2 li:nth-child(odd) button{left: 11%;}
.main_content_2 li:nth-child(even) button{right: 11%;}


.main_content_2 li:nth-child(odd) .huri{left: 0;}
.main_content_2 li:nth-child(even) .huri{right: 0;}

.main_content_2 li:first-child .huri{width: 22%;}
.main_content_2 li:nth-child(2) .huri{width: 39%;}
.main_content_2 li:nth-child(3) .huri{width: 36%;}
.main_content_2 li:nth-child(4) .huri{width: 32%;}
.main_content_2 li:nth-child(5) .huri{width: 43%;}

.main_content_2 li:first-child{margin-top: -5%;}
.main_content_2 li:nth-child(2){margin-top: 0%;}
.main_content_2 li:nth-child(3){margin-top: -2%;}
.main_content_2 li:nth-child(4){margin-top: -1%;}
.main_content_2 li:nth-child(5){margin-top: 2%;}

.main_content_2 li:first-child .kazari{bottom:17%;}
.main_content_2 li:nth-child(2) .kazari{bottom:5%;}
.main_content_2 li:nth-child(3) .kazari{bottom:24%;}
.main_content_2 li:nth-child(4) .kazari{bottom:19%;}
.main_content_2 li:nth-child(5) .kazari{bottom:23%;}

.last{position: relative;}
.last_img,.last_text,.last a{
	position: absolute;
	
}
.last_img.scroll-item{animation-delay: .5s;}
.last_text{	top: 35%;}
.main_content .last button{width: 100%;}

.message{
	background-color: #a1cb5b;
	margin-top: -15px;
}
.message p{
	text-align: center;
	font-weight: 600;
	padding: 5% 0;
	line-height: 1.9;
	font-size: clamp(14px, 1.3vw, 32px);
}
.message .scroll-item.show.delay {
  animation-delay: 1s;
  animation-fill-mode: both;
}
.btm_btn{
	background: #e7233b;
	color: #fff;
	width: 100%;
	padding: 6% 5%;
}
.btm_btn p{
	text-align: center;
	font-size: clamp(11px, .7vw, 21px);
	letter-spacing: .093;
	line-height: 1.6;
	font-weight: 600;
}
.btm_btn p a{
	font-size: 1.3em;
	font-weight: 600;
	display: inline-block;
	margin-top: 3%;
}
.btm_btn p a::after{
	content: "";
	background: url("../img/link.gif") center / 100% no-repeat;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: sub;
	margin-left: 5px;
}
.btm_btn div{
	margin-top: 7%;
	padding: 0 11%;
	text-align: center;
}
.btm_btn div a{
	max-width: 775px;
}
.btm_btn div a:nth-of-type(1){
	margin-bottom: 4%;
}
@media (max-width: 870px) {
	.btm_btn p>br{display: none;}
}
@media (max-width: 800px) {
	.btm_btn p>br{display: block;}
	.message p{font-size: clamp(14px, 3vw, 16px);}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝フッター＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.footer{padding-bottom: 20px;}
.footer ul  {
	width: 100%;
	padding: 2%;
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
	gap: 2%;
	align-items: center;
	justify-content: center;
}
.footer ul a{
	font-size: clamp(15px, 1vw, 21px);
	border-bottom: solid 1px #000;
	display: inline;
	font-weight: 600;
}
.footer small{
	text-align: center;
	display: block;
	font-weight: 600;
	font-size: clamp(14px, .95vw, 21px);
}
.footer>div{
    padding: 15px 0;
	position: relative;
}
.top_btn{
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	right: 15px;
	bottom: 0;
}
.top_btn.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 1300px){
	.footer small{
	padding-right: 65px;
}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝共通＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*モーダル共通*/

.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 500;
	width: 100vw;
	height: 100%;
	top: 0;
}
.modal_btn{cursor: pointer;}
.modal_in{
	width: 35%;
	left: 42%;
	top: 110px;
	position: absolute;
}
.modal.is-open {display: block;background: rgb(255 255 255 / 90%);}
.modal_close {
	display: block;
	position: fixed;
	right: 0;
	top: 90px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #959595;
}
.modal_close::before, .modal_close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 40px;
	border-radius: 4px;
	background: #fff;
}
.modal_close::before {transform: translate(-50%,-50%) rotate(45deg);}
.modal_close::after {transform: translate(-50%,-50%) rotate(-45deg);}

.modal_content {
  max-height: calc(100vh - 110px);
  overflow-y: auto;

  -ms-overflow-style: none !important; /* IE, Edge */
  scrollbar-width: none !important;    /* Firefox */
}

.modal_content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
@media screen and (max-width: 1070px){.modal_in{
		width: 100%;
	max-width: 505px;
	min-width: 375px;
	left: 50%;
	transform: translateX(-50%);
	}}
@media screen and (max-width: 1070px){
	.modal_area .modal_inner{}
}

/*モーダルA*/
.modal-a .modal_content{
	background: #e60012;
	padding: 45px 20px;
}
.modal-a .modal_content>div{
	background: #fff;
	padding: 30px 40px;
	border-radius: 10px;
}
.modal-a .modal_content .flex_box{
	display: flex;
	align-items: center;
    justify-content: center;
    column-gap: 20px;
	margin-bottom: 20px;
}
.modal-a .flex_box img{	max-width: 100px;}
.modal-a .flex_box em{
	color: #e60012;
	font-weight: 600;
	
}
.modal-a{font-size: 13px;}
@media (max-width: 820px) {
	.modal-a .modal_content .flex_box {
		flex-direction: column;
	}
}
@media (max-width: 450px) {
	.modal_content {
	  max-height: calc(94vh - 110px);
	}
}
/*モーダルb*/
.modal-b .modal_content{
	background: #e60012;
	padding: 45px 20px;
}
.modal-b .modal_content>div{
	background: #fff;
	padding: 30px 40px;
	border-radius: 10px;
}
.modal-b .modal_content .flex_box{
	display: flex;
	align-items: center;
    justify-content: center;
}
.modal-b ul{
    padding: 40px 40px 73px;
    background: #fff;
}
.modal-b li{
	width: 100%;
} 
.modal-b li:not(:last-child){
	margin-bottom: 15%;
}
.modal-b li p{text-align: center;}
.modal-b iframe{
	top: 2em;
}

@media (max-width: 820px) {
	.modal-b .modal_content .flex_box {
		flex-direction: column;
	}
}
/*anime*/
.scroll-item {
  opacity: 0;
	animation-delay: 2s;
}

.scroll-item.show {
  opacity: 1;
  animation: bounceIn 0.6s ease-out forwards;
}

.scroll-item.show.delay {
  animation-delay: .5s;
  animation-fill-mode: both;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hurihuri { transform-origin: center center;}
.hurihuri.show { animation: hurihuri 1s ease-out forwards;animation-delay: .8s;}
.main_content li:nth-child(3) .hurihuri { transform-origin: 35% 30%;}

@keyframes hurihuri {
	0% {transform: translateY(0) rotate(0deg);}
	10% {transform: translateY(0) rotate(5deg);}
	19% {transform: translateY(0) rotate(-3deg);}
	20% {transform: translateY(0) rotate(0deg);}
	30% {transform: translateY(0) rotate(5deg);}
	35% {transform: translateY(0) rotate(-3deg);}
	40% {transform: translateY(0) rotate(0deg);}
}