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

/*********************************************************

					　　　　初期設定

**********************************************************/

.sp{display: none;}
.pc{display: block;}

body{
	position: relative;
	height: auto;
	width: 100%;
	background: url(../img/back-img01.webp)repeat center / contain;
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-style: normal;	
	visibility: hidden;
}

.mincyo{
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.inner800{
	position: relative;
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
}

.inner840{
	position: relative;
	width: 90%;
	max-width: 840px;
	margin: 0 auto;
}

.inner1000{
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.inner1300{
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

.inner1440{
	position: relative;
	width: 80%;
	max-width: 1440px;
	margin: 0 auto;
}

img{
	width: 100%;
	height: 100%;
	max-width: 100%;
}

.shadow{ filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.3));}

.sample{
	width: 100%;
	height: auto;
}

.readtext{
	font-size: 16px;
	line-height: 2.5;
	text-align: justify;
	font-feature-settings: "palt";
}
.rain {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	transition: ease-in-out 2s;
} 
.rain::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: linear-gradient(transparent, rgba(255, 255, 255, 0.3));
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2)  /* ぼかし効果 */;
animation: rain-fall 0.5s linear infinite;
transform: translateX(-50%) skewY(20deg);  /* 雨が降っている角度 */
}
  
@keyframes rain-fall {
0% {
	transform: translate(-50%, -100%);
}
100% {
	transform: translate(-50%, 100%);
}
}


/* 雨のしずくの基本スタイル */
.rain-drop {
	position: absolute;
	bottom: -10px;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.7);
	filter: blur(0.6px);
	animation: fall linear infinite;
}
.rain-drop2 {
	position: absolute;
	bottom: -10px;
	width: 1px;
	background-color: rgba(52, 72, 112, 0.15);
	filter: blur(0.6px);
	animation: fall linear infinite;
}

/* 雨のしずくが上がるアニメーション */
@keyframes fall {
	to {
		transform: translateY(-100vh);
	}
}

.rain.end .rain-drop,
.rain.end2 .rain-drop{
	opacity: 0;
	transition: ease-in-out 1s;
}
.rain.end .rain-drop2,
.rain.end2 .rain-drop2{
	opacity: 0;
	transition: ease-in-out 1s;
}

.rain.reverse.end2{ height: 100vh;}

.body-wrap.back{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}

/*********************************************************

					ここからheader

**********************************************************/
.header{
	position: relative;
	z-index: 10;
}
.header-img01{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: block;
}

.header-wrap{
	width: 100%;
	background: #344870;
	margin-top: 20px;
	padding: 15px 0;
	text-align: center;
}

.header-wrap img{
	width: auto;
	height: 20px;
}

.makuake-btn{
	position: fixed;
	top: 10%;
	right: 0;
	width: 45px;
	height: auto;
	z-index: 20;
}

.makuake-btn img{
	width: 100%;
	height: auto;
}

.reverse.makuake-btn{
	transform: rotate(180deg);
}

@media screen and (max-width: 768px){
	.makuake-btn{
		width: 10%;
		max-width: 45px;
	}
}


/*********************************************************

					ここからsec01

**********************************************************/
.sec01,.sec02,.sec03,.sec04,.sec05,.sec06,.sec07{
	width: 100%;
	padding-top: 400px;
	position: relative;
}
.sec07 {padding-bottom: 400px;}

.sec08{
	width: 100%;
	padding: 120px 0;
}

.sec09{
	width: 100%;
	padding: 480px 0 100px;
}

.sec01,.sec04{ position: relative;}

.sec01::before,
.sec04::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 25/19;
	background: url(../img/back-img04.webp)no-repeat center / contain;
	transform: scale(1.5) translate(-29%,-6%);
	mix-blend-mode: multiply;
	opacity: 0.2;
}
.sec04::before{ transform: scale(1.5) translate(42%,40%);}

.sec01-flex{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sec01-flex-img{ width: 37.5%;}

.sec01-textwrap{
	width: 52.5%;
	font-size: 13px;
}

.sec01-textwrap img{
	width: 70%;
	height: auto;
	margin-bottom: 1em;
}

.sec01-textwrap img:last-of-type{ margin-bottom: 0;}

.sec01-textwrap img:nth-of-type(4){ width: 25%;}

.sec01-table{
	margin-bottom: 1em;
	width: 100%;
}

.sec01-table th,
.sec01-table td{
	padding: 0.9em 0.8em 0.7em 1.2em;
	font-weight: normal;
}

.sec01-table th{
	position: relative;
	border-right: 1px solid #344870;
}

.sec01-table th::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	background: #344870;
}

.sec01-table tr:nth-of-type(1) th:after{ width: 65vw;}
.sec01-table tr:nth-of-type(2) th:after{ width: 75vw;}
.sec01-table tr:nth-of-type(3) th:after{ width: 55vw;}
.sec01-table tr:nth-of-type(4) th:after{ width: 60vw;}
.sec01-table tr:nth-of-type(5) th:after{ width: 80vw;}
.sec01-table tr:nth-of-type(6) th:after{ width: 70vw;}

.makuake{
	position: relative;
	width: 420px;
	display: block;
	margin: 0 auto;
	z-index: 1;
}
.makuake::after{
	content: '';
	position: absolute;
	right: 7%;
	top: 78%;
	width: 5%;
	aspect-ratio: 7/17;
	background: url(../img/makuake-text01a.webp)no-repeat center / contain;
	z-index: -1;
	transform: translateY(-75%) scale(1,0.5);
	transition: ease-in 0.7s;
}
.makuake.after-pos01::after{ right: 15%;}

.blur .makuake::after{ transform: translateY(0) scale(1);}

.sec03-wrap{
	width: 100%;
	height: auto;
	background: url(../img/back-img02.webp)no-repeat center / contain;
	margin-top: 5em;
}

.sec03-wrap-flex{
	width: 50%;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	animation: roaling 9s linear 0s infinite;
}

@keyframes roaling {
	0%,20%  { transform: rotate(0deg) }
	29% { transform: rotate(183deg) }
	29.5% { transform: rotate(177deg) }
	30%,70%  { transform: rotate(180deg) }
	79% { transform: rotate(363deg) }
	79.5% { transform: rotate(357deg) }
	80%,100%  { transform: rotate(360deg) }
}

.shadow2{
	animation: shadow2 9s linear 0s infinite;
	filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.3));
}

@keyframes shadow2 {
	0%,20%  { filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.3)) }
	30%,70%  { filter: drop-shadow(-7px -7px 7px rgba(0,0,0,0.3)) }
	80%,100%  { filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.3)) }
}

.sec03-wrap-flex img{
	width: auto;
	height: 100%;
}
.sec03-wrap-flex img:nth-of-type(2){ height: 97%;}

.sec04 .inner1300{ aspect-ratio: 10/9;}

.sec04-pos01{
	position: absolute;
	top: 0;
	right: 10%;
	width: 40%;
	height: auto;
}

.sec04-pos02{
	position: absolute;
	top: 15%;
	left: 0;
	width: 37%;
	height: auto;
}

.sec04-pos03{
	position: absolute;
	bottom: 0;
	right: 15%;
	width: 50%;
	height: auto;
}

.sec05-flex{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sec05-flex p{ width: 51%;}
.sec05-flex img{ width: 40%;}

.sec05-img01,.sec05-img01-sp{position: relative; width: 80%; margin: 0 auto; display: block; margin-top: -4em;}
.sec05-img01-sp{margin: 5vw auto 10vw; display: none;}

.sec05-img01.ex2{filter: blur(0);}

.sec05-img01 img:last-of-type{position: absolute; top: 0; left: 0; opacity: 0;}

.sec05-img01.ex2.blur img:first-of-type{opacity: 0;}
.sec05-img01.ex2.blur img:last-of-type{opacity: 1;}


.sec05-img02{width: 70%; margin: 0 auto; display: block; margin-top: 2em;}

.sec05-img01.sp,.sec05-img02.sp{display: none;}

.sec06-flex{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.sec06-imgbox.ex2{
	position: relative;
	width: 40%;
	aspect-ratio: 100/141;
	background: url(../img/img09.webp)no-repeat center / contain;
	filter: blur(0);
}

.sec06-imgbox.ex2::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/img09a.webp)no-repeat center / contain;
}
.sec06-imgbox.ex2.blur::before{
	background: url(../img/img09a.webp)no-repeat center / contain;
	animation: 13s chenge01 linear infinite 1.7s;
}

@keyframes chenge01 {
	0%,12%,88%,100% { background: url(../img/img09a.webp)no-repeat center / contain; filter: blur(0);}
	22%,27%,73%,78% { background: url(../img/img09c.webp)no-repeat center / contain; filter: blur(30px);}
	37%,63% { background: url(../img/img09b.webp)no-repeat center / contain; filter: blur(0);}
}

.reverse .sec06-imgbox.ex2{ background: url(../img/img10.webp)no-repeat center / contain;}
.reverse .sec06-imgbox.ex2::before{ background: url(../img/img10a.webp)no-repeat center / contain;}
.reverse .sec06-imgbox.ex2.blur::before{ animation: 13s chenge02 linear infinite 1.7s;}
@keyframes chenge02 {
	0%,12%,88%,100% { background: url(../img/img10a.webp)no-repeat center / contain; filter: blur(0);}
	22%,27%,73%,78% { background: url(../img/img10c.webp)no-repeat center / contain; filter: blur(30px);}
	37%,63% { background: url(../img/img10b.webp)no-repeat center / contain; filter: blur(0);}
}

.sec06-textwrap{ width: 51%;}

.sec06-img02{
	width: 85%;
	height: auto;
	margin-top: 1.5em;
}

.sec08-flex{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.sec08-wrap01{
	position: relative;
	width: 29%;
	text-align: center;
}

.sec08-wrap01 img:nth-of-type(1){
	height: 24px;
	width: auto;
}

.sec08-wrap01 img:nth-of-type(3){
	width: 100%;
	height: auto;
}

.sec08-wrap01 p{
	font-size: 1.2em;
	font-weight: 200;
	line-height: 1.5;
	margin: 0.35em auto 0.8em;
	color: #344870;
}

.sec08back{
	position: absolute;
	font-size: min(54.16vw, 974.88px);
	left: 0;
	bottom: calc(1em + 580px);
	width: 100%;
	height: 36.4vw;
	max-height: 332.45px;
	z-index: -2;
	background: #fff;
	padding: 120px 0;
	box-sizing: content-box;
}

.sec09 .inner1440{
	position: relative;
	aspect-ratio: 1000 / 677;
}

.sec09-img01{
	position: absolute;
	bottom: 22%;
	left: 0;
	width: 40%;
	height: auto;
	animation: shake-up 3s infinite ease-in-out;
}
.sec09-img02{
	position: absolute;
	bottom: 12%;
	left: 31%;
	width: 64%;
	height: auto;
	animation: shake-up 3s infinite ease-in-out 0.5s;
}

.sec09-img03-wrap{
	position: absolute;
	bottom: 2%;
	left: 0;
	width: 50%;
	height: auto;
	aspect-ratio: 500 / 107;
}

.sec09-img03{
	width: 100%;
	height: 100%;
	max-height: 100%;
}

.sec09-img01.shadow,
.sec09-img02.shadow{
	filter: drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.3));
}

@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

.reverse .sec09-img01{ animation: shake-up2 3s infinite ease-in-out;}
.reverse .sec09-img02{
	animation: shake-up3 3.5s infinite ease-in-out;
	bottom: 19%;
}

.reverse .sec09-img01.shadow,
.reverse .sec09-img02.shadow{
	filter: drop-shadow(-20px -20px 20px rgba(0, 0, 0, 0.3));
}

@keyframes shake-up2 {
    0%, 100% {
        transform:translateY(0) rotate(30deg);
    }
    50% {
        transform:translateY(15px) rotate(30deg);
    }
}

@keyframes shake-up3 {
    0%, 100% {
        transform:translateY(0) rotate(-13deg);
    }
    65%{
        transform:translateY(15px) rotate(-13deg);
    }
}

#blur01,
.ex2{
	transition: 1.5s 0.2s linear;
	filter: blur(30px);
	transform: translateZ(0);
}
#blur01.blur,
.ex2.blur{
	filter: blur(0);
	transform: translateZ(0);
}

.opacity{ opacity: 0;}
.opacity.blur{ opacity: 1;}

.sec01.ex2,
.sec02.ex2{
	transition: unset;
	filter: none;
}

.sec01-table{overflow: hidden;}

.sec01-table tr::after{
	transform: translateX(-101%);
	transition: 0.5s ease-in-out;
}

.blur .sec01-table tr::after{
	transform: translateX(0);
}


/* 雨モーション */
.ame01{
	position: absolute;
	width: 75px;
	height: auto;
	aspect-ratio: 25/9;
	display: block;
	background: 
		url(../img/ame01d.webp)no-repeat center bottom,
        url(../img/ame01a.webp)no-repeat center bottom,
        url(../img/ame01b.webp)no-repeat center bottom,
        url(../img/ame01c.webp)no-repeat center bottom,
        url(../img/ame01d.webp)no-repeat center bottom;
    background-size: contain,0 0,0 0,0 0,0 0;
	transform: rotate(180deg);
	animation: maes01 3s infinite linear;
	opacity: 0.7;
}

.ame02{
	position: absolute;
	width: 75px;
	height: auto;
	aspect-ratio: 25/9;
	display: block;
	background: 
		url(../img/ame02d.webp)no-repeat center bottom,
        url(../img/ame02a.webp)no-repeat center bottom,
        url(../img/ame02b.webp)no-repeat center bottom,
        url(../img/ame02c.webp)no-repeat center bottom,
        url(../img/ame02d.webp)no-repeat center bottom;
    background-size: contain,0 0,0 0,0 0,0 0;
	transform: rotate(180deg);
	animation: maes01 3s infinite linear;
	opacity: 1;
}

@keyframes maes01 {
    0%  { background-size: contain,0 0,0 0,0 0,0 0; }
    3%  { background-size: 0 0,contain,0 0,0 0,0 0; }
    6%  { background-size: 0 0,0 0,contain,0 0,0 0; }
    9%  { background-size: 0 0,0 0,0 0,contain,0 0; }
    12%,100% { background-size: 0 0,0 0,0 0,0 0,contain; }
}


.pos01{top: 90%;left: 4.5%; animation-delay: 0.5s; }
.pos02{top: 90%;left: 21%; animation-delay: 1.5s; }
.pos03{top: 90%;left: 60%; animation-delay: 2.5s; }
.pos04{top: 90%;left: 74%; animation-delay: 1.0s; }
.pos05{top: 90%;left: 91%; animation-delay: 2.0s; }


.pos11{top: 99%;left: 5%; animation-delay: 0.5s; }
.pos12{top: 99%;left: 22%; animation-delay: 1.5s; }
.pos13{top: 99%;left: 40%; animation-delay: 2.5s; }
.pos14{top: 99%;left: 55%; animation-delay: 1.0s; }
.pos15{top: 99%;left: 76%; animation-delay: 2.0s; }
.pos16{top: 99%;left: 91%; animation-delay: 3.0s; }


.pos21{top: 96%;left: 4.5%; animation-delay: 0.5s; }
.pos22{top: 96%;left: 21%; animation-delay: 1.5s; }
.pos23{top: 96%;left: 55%; animation-delay: 2.5s; }
.pos24{top: 96%;left: 74%; animation-delay: 1.0s; }
.pos25{top: 96%;left: 91%; animation-delay: 2.0s; }



/* 波紋モーション */
.hamon{
	position: absolute;
	width: 200px;
	height: auto;
	aspect-ratio: 50/27;
	display: block;
	background: 
		url(../img/hamon01f.webp)no-repeat center bottom,
        url(../img/hamon01a.webp)no-repeat center bottom,
        url(../img/hamon01b.webp)no-repeat center bottom,
        url(../img/hamon01c.webp)no-repeat center bottom,
        url(../img/hamon01d.webp)no-repeat center bottom,
        url(../img/hamon01e.webp)no-repeat center bottom,
        url(../img/hamon01f.webp)no-repeat center bottom;
    background-size: contain,0 0,0 0,0 0,0 0,0 0,0 0;
	animation: hamons01 3s infinite linear;
	opacity: 1;
	z-index: -1;
}

@keyframes hamons01 {
    0%  { background-size: contain,0 0,0 0,0 0,0 0,0 0,0 0; }
    3%  { background-size: 0 0,contain,0 0,0 0,0 0,0 0,0 0; }
    6%  { background-size: 0 0,0 0,contain,0 0,0 0,0 0,0 0; }
    9%,60%  { background-size: 0 0,0 0,0 0,contain,0 0,0 0,0 0; }
    63% { background-size: 0 0,0 0,0 0,0 0,contain,0 0,0 0; }
    66% { background-size: 0 0,0 0,0 0,0 0,0 0,contain,0 0; }
    69%,100% { background-size: 0 0,0 0,0 0,0 0,0 0,0 0,contain; }
}

.h01{top: 5%;left: -10.5%; animation-delay: 0.5s; }
.h02{top: 35%;left: 10%; animation-delay: 1.5s; }
.h03{top: 65%;left: 65%; animation-delay: 2.5s; }
.h04{top: 95%;left: 70%; animation-delay: 1.0s; }
.h05{top: 120%;left: 40%; animation-delay: 2.0s; }
.h06{top: 100%;left: 25%; animation-delay: 3.0s; }

.h11{top: 120%;left: 8%; animation-delay: 0.7s; width: 300px;} 
.h12{top: 95%;left: 70%; animation-delay: 1.7s;  width: 300px;}
.h13{top: 45%;left: 55%; animation-delay: 2.7s;  width: 300px;}
.h14{top: 35%;left: -8%; animation-delay: 1.2s;  width: 300px;}
.h15{top: 20%;left: 30%; animation-delay: 2.2s;  width: 300px;}
.h16{top: 105%;left: 18%; animation-delay: 3.2s;  width: 300px;}

.h21{top: 30%;left: 60%; animation-delay: 0.7s; width: 100px;} 
.h22{top: 90%;left: 40%; animation-delay: 2.9s;  width: 100px;}
.h23{top: 110%;left: 80%; animation-delay: 1.5s;  width: 100px;}
.h24{top: 55%;left: 35%; animation-delay: 1.9s;  width: 100px;}
.h25{top: 70%;left: -5%; animation-delay: 0.9s;  width: 100px;}
.h26{top: 100%;left: 15%; animation-delay: 2.3s;  width: 100px;}



/*********************************************************

					ここからfooter （sec09背景用）

**********************************************************/

.footer{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: -2;
}

.footer .sec09 .inner1440{
	position: relative;
	background: url(../img/back-img03.webp)no-repeat right / cover;
	aspect-ratio: 1000 / 677;
}

.footer-logo{
	position: relative;
	width: 80%;
	margin: 0 10%;
	transform: translateY(-50%);
}

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



/*********************************************************

			         ここからreverse

**********************************************************/

.body-wrap{
	transition: 1s;
}

.body-wrap.reverse{
	transform: rotate(180deg);
	overflow: hidden;
}

.reverse .sec09-img03-wrap{
	transform: rotate(180deg);
}

.reverse .sec08-wrap01{
	transform: rotate(180deg);
}

.reverse .sec08-flex .sec08-wrap01:nth-of-type(1){ order: 3;}
.reverse .sec08-flex .sec08-wrap01:nth-of-type(2){ order: 2;}
.reverse .sec08-flex .sec08-wrap01:nth-of-type(3){ order: 1;}

.reverse .sec07 img{
	transform: rotate(180deg);
}

.reverse .makuake{
	transform: rotate(180deg);
}

.reverse .sec06-flex{
	transform: rotate(180deg);
}

.reverse .sec05 .inner800{
	transform: rotate(180deg);
}

.reverse .sec04 .inner1300{
	transform: rotate(180deg);
}

.reverse .sec03 .inner840{
	transform: rotate(180deg);
}

.reverse .sec01-flex{
	transform: rotate(180deg);
}

.reverse .sec01::before{
	transform: scale(1.5) translate(-29%, 10%);
	max-height: 1500px;
}

.rain.reverse.end{
	background: none;
}

.rain.reverse{
	position: fixed;
	top: 0;
	bottom: auto;
	left: 0;
	width: 100%;
	height: 0vh;
	z-index: -1;
	transition: ease-in-out 2s;
}

/* 雨のしずくのリバーススタイル */
.reverse  .rain-drop {
	animation: fall2 linear infinite;
}
.reverse  .rain-drop2 {
	animation: fall2 linear infinite;
}

/* 雨のしずくが降りるアニメーション */
@keyframes fall2 {
	to {
		transform: translateY(100vh);
	}
}

.reverse .sec08-flex .sec08-wrap01:first-of-type img:last-of-type{
	transform: rotate(180deg);
}

.reverse .sec06-img01a{ display: none;}
.reverse .sec06-img01b{ display: block;}

.reverse .pos21{ transform: rotate(360deg); top: 27%; left:6%}
.reverse .pos22{ transform: rotate(360deg); top: 27%; left:12%}
.reverse .pos23{ transform: rotate(360deg); top: 27%; left:46%}
.reverse .pos24{ transform: rotate(360deg); top: 27%; left:79%}
.reverse .pos25{ transform: rotate(360deg); top: 27%; left:87%}

.reverse .header-wrap{
	transform: rotate(180deg);
}

	
/*********************************************************

			   ここからメディアクエリ(SP）

**********************************************************/

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

	/* 雨のしずくの基本スタイル */
	.rain-drop {
		filter: blur(0.3px);
	}
	.rain-drop2 {
		filter: blur(0.3px);
	}

	.readtext{
		font-size: min(4vw,16px);
		line-height: 2.2;
	}

	.inner1440{ width: 100%;}

	.inner800,.inner840{ width: 80%;}

	.body-wrap.reverse{ transition: unset;}

	.reverse .sec09-img03-wrap{ left: 3%;}

	.footer .sec09 .inner1440,
	.sec09 .inner1440{ aspect-ratio: 5 / 4;}

	.reverse .sec09-img02{ bottom: 25%;}
	.sec09-img01{ bottom: 30%;}

	.sec09{ padding: 31vw 0 6.5vw;}

	.sec08{ padding: 15vw 0;}

	.sec08 .inner1000{ width: 62.5%;}

	.sec08-flex{ flex-wrap: wrap; justify-content: center; gap: 18vw;}

	.sec08-wrap01{ width: 100%; max-width: 400px;}

	.sec08-wrap01 img:nth-of-type(1){
		height: 68.75vw;
		max-height: 24px;
	}

	.sec08-wrap01 p{
		font-size: min(4.375vw,19px);
		margin: 0.5em auto 1em;
	}

	.sec08back{
		padding: 15vw 0;
		bottom: 184vw;
		height: 266vw;
		max-height: 1552px;
		aspect-ratio: unset;
	}

	.sec07{ padding-bottom: 26vw;}
	.sec07 .inner800{ width: 100%;}

	.sec01, .sec02, .sec03, .sec04, .sec06, .sec07{
		padding-top: 26vw;
	}

	.sec05{padding-top: 13vw;}

	.makuake{ width: 80%; max-width: 400px;}

	.sec06-flex{
		flex-wrap: wrap;
	}

	.sec06-textwrap{
		width: 100%;
		margin-top: 1em;
	}

	.sec06-img01a, .sec06-img01b{
		width: 80%;
		margin: 0 auto;
	}

	.reverse .sec06-img01a{
		display: block;
	}

	.reverse .sec06-img01b{
		display: none;
	}

	.sec06-img02.sp{
		width: auto;
		height: 17vw;
		margin: 7vw auto 0;
		display: block;
	}

	.sec05-img02.sp{
		position: relative;
		width: auto;
		height: 17vw;
		margin: 0 auto -17vw;
		display: block;
		z-index: 2;
	}

	.sec06-img02.pc{
		display: none;
	}


	.sec05-img02.pc{
		display: none;
	}

	.sec05-flex{
		flex-wrap: wrap;
	}

	.sec05-flex img{
		order: 1;
		width: 70%;
		margin: 0 auto;
		display: block;
	}

	.sec05-flex p{
		order: 2;
		width: 100%;
		margin-top: 1em;
	}

	.sec05-img01.sp{
		width: 90vw;
		max-width: none;
		margin: 0 auto 14vw;
		margin-left: calc(50% - 45vw);
		display: block;
	}

	.sec04 .inner1300{
		aspect-ratio: 5 / 8;
	}

	.sec04-pos01{right: 6%; width: 57%;}

	.sec04-pos02{left: 6%; top: 29%; width: 50%;}

	.sec04-pos03{ right: 7%; width: 70%;}

	.sec04::before{
		left: -16%;
	}

	.sec03-wrap{
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-bottom: 10vw;
		margin-top: 0;
	}

	.sec03-wrap-flex{
		width: 70%;
		max-width: 500px;
	}

	.sec01 .inner800{
		width: 80%;
		max-width: 500px;
	}

	.sec01-flex{
		display: block;
	}

	.sec01-textwrap{
		width: 100%;
		font-size: min(3.75vw,13px);
	}

	.sec01-textwrap img{
		width: 84%;
		margin: 0 auto 4vw;
		display: block;
	}

	.sec01-textwrap img:nth-of-type(3){
		width: 84%;
	}

	.sec01-textwrap img:nth-of-type(4){
		width: 33%;
		margin: 0 0 8vw 8%;
		text-align: left;
	}

	.sec01-textwrap .sec01-flex-img{
		margin: 2vw auto 8vw;
	}

	.sec01-textwrap .sec01-flex-img.shadow{
		width: 60%;
	}

	.sec01-table th, .sec01-table td{
		padding: 0.7em 0.7em;
		line-height: 1.5;
		vertical-align: middle;
	}

	.sec01-table th{
		width: 5em;
		text-align: center;
	}

	.sec01-table tr::after{
		transform: none;
		transition: unset;
	}

	.sec01-table tr:nth-of-type(2):after{ width: 80%;}
	.sec01-table tr:nth-of-type(4):after{ width: 95%;}
	.sec01-table tr:nth-of-type(5):after{ width: 100%;}
	.sec01-table tr:nth-of-type(6):after{ width: 90%;}

	.sec01-table td span{display: none;}

	.sec01-textwrap .sec01-sp-img{
		width: 100%;
	}

	.header-wrap{
		padding: 0.8vw 0 1.8vw;
		margin-top: 1.8vw;
	}
	.header-wrap img{
		height: 4vw;
		max-height: 20px;
	}

	.h01{width: 25vw;top: 0;}
	.h02{width: 25vw;top: 8%;}
	.h03{width: 25vw;top: 2%; left: 80%;}
	.h04{width: 25vw;top: 80%;}
	.h05{width: 25vw;top: 39%;}
	.h06{width: 25vw;top: 94%; left: 16%;}

	.h11{width: 35vw; top: -6%; left: 42%;}
	.h12{width: 35vw; top: 91%;}
	.h13{width: 35vw; left: 62%;}
	.h14{width: 35vw; top: 30%;}
	.h15{width: 35vw; top: 58%; left: 5%;}
	.h16{width: 35vw; top: 82%; left: -7%;}

	.h21{width: 15vw; left: 80%;} 
	.h22{width: 15vw; top: 87%;}
	.h23{width: 15vw; top: 66%;} 
	.h24{width: 15vw; left: -2%;} 
	.h25{width: 15vw;} 
	.h26{width: 15vw; top: 94%; left: 6%;} 

	.ame01{width: 8vw;}
	.ame02{width: 10vw;}
	.pos01{top: 90%; left: 3.5%;}
	.pos02{top: 90%; }
	.pos03{top: 90%; left: 58%;}
	.pos04{top: 90%; left: 73%;}
	.pos05{top: 90%; left: 90%;}

	.reverse .pos21{transform: rotate(360deg); top: 5.5em; left:14%}
	.reverse .pos22{transform: rotate(360deg); top: 5.5em; left:71%}
	.reverse .pos23{transform: rotate(360deg); top: 5.5em; left:21%}
	.reverse .pos24{transform: rotate(360deg); top: 5.5em; left:30%}
	.reverse .pos25{transform: rotate(360deg); top: 5.5em; left:75%}

	.pos31{position: absolute; bottom: -2vw; left: 46%; width: 15vw; transform: rotate(360deg); animation-delay: 1s;}
	.pos32{position: absolute; bottom: -2vw; right: 46%; width: 15vw; transform: rotate(360deg);}

	.pos41{position: absolute; bottom: -3vw; left: 10%; width: 12vw; transform: rotate(180deg); animation-delay: 0s;}
	.pos42{position: absolute; bottom: -3vw; left: 23%; width: 12vw; transform: rotate(180deg); animation-delay: 1s;}
	.pos43{position: absolute; bottom: -3vw; left: 46%; width: 12vw; transform: rotate(180deg); animation-delay: 2s;}
	.pos44{position: absolute; bottom: -3vw; left: 70%; width: 12vw; transform: rotate(180deg); animation-delay: 0.5s;}
	.pos45{position: absolute; bottom: -3vw; left: 86%; width: 12vw; transform: rotate(180deg); animation-delay: 1.5s;}




	.reverse .sec09-sp{
		width: 100%;
		height: 184vw;
		transform: rotate(180deg);
	}

	.sec09-sp-img01{
		width: 62.5%;
		height: auto;
		display: block;
		margin: 0 auto;
		transform: translateY(-1%);
	}

	.sec09-sp-wrap{
		position: relative;
		width: 100%;
		height: 89vw;
	}

	.sec09-sp-wrap img{
		height: 65%;
		width: auto;
	}

	.sec09-sp-wrap img:nth-of-type(1){
		display: block;
		margin: 5vw 0 0 3vw;
		animation: shake-up2sp 3s infinite ease-in-out;
	}
	.sec09-sp-wrap img:nth-of-type(2){
		position: absolute;
		right: 3vw;
		top: 11vw;
		display: block;
		animation: shake-up3sp 3.5s infinite ease-in-out;
	}
	@keyframes shake-up2sp {
		0%, 100% { transform:translateY(0);}
		50% { transform:translateY(15px);}
	}
	
	@keyframes shake-up3sp {
		0%, 100% { transform:translateY(0);}
		65%{ transform:translateY(15px);}
	}

	.sec09-sp-img02{
		width: 13%;
		height: auto;
		display: block;
		margin: 0 auto;
		filter: blur(30px);
		transition: 1.5s 0.2s linear;
		transform: translateZ(0);
	}

	.sec09-sp-img02.blur{
		filter: blur(0);
		transform: translateZ(0);
	}
	
	.reverse .sec09-sp .sec09-sp-back{
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.sec05-img01-sp{display: block; z-index: 3; transform: translateZ(0);}

	.reverse .sec08-flex .sec08-wrap01:first-of-type img:last-of-type{
		transform: none;
	}

	.reverse .sec06-imgbox.ex2{
		width: 70%;
		margin: 0 auto;
		background: url(../img/img09.webp)no-repeat center / contain;
	}
	
	.reverse .sec06-imgbox.ex2::before{
		background: url(../img/img09a.webp)no-repeat center / contain;
	}
	.reverse .sec06-imgbox.ex2.blur::before{
		animation: 13s chenge01 linear infinite 1.7s;
	}
	@keyframes chenge01 {
		0%,12%,88%,100% { background: url(../img/img09a.webp)no-repeat center / contain; filter: blur(0);}
		22%,27%,73%,78% { background: url(../img/img09c.webp)no-repeat center / contain; filter: blur(30px);}
		37%,63% { background: url(../img/img09b.webp)no-repeat center / contain; filter: blur(0);}
	}


}