@charset "UTF-8";
/*---------------------------------------------
common
---------------------------------------------*/

@font-face {
  font-family: 'tsukushi';
  src: url(/works/web/springMusic/lib/fonts/TsukuARdGothic_r.woff) format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tsukushi';
  src: url(/works/web/springMusic/lib/fonts/TsukuARdGothic_b.woff) format("woff");
  font-weight: bold;
  font-display: swap;
}

:root{
	--bgColorPink: #FFECEF;
	--bgColorlightGreen: #D6F8F2;
	--headerColor: #644F58;
	--ttlColor: #8D6674;
	--txtColor: #4C1111;
	--fontTsukushi: "tsukushi","Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}
body{
	background-color: var( --bgColorPink);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN","Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}
hgroup{
	text-align: center;
}
html{
	width: 100%;
	background-color: var( --gbColorPink);
	overflow-x: hidden;
	color: var(--txtColor);
}
.secInner{
	position: relative;
	margin: 0 auto;
}
.bgPetal{
	display: inline-block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	transform-origin: center;
}
.bgPetal._petal1{
	background-image: url(/works/web/springMusic/lib/img/img_petal1.png);
	aspect-ratio: 1 / 1;
}
.bgPetal._petal2{
	background-image: url(/works/web/springMusic/lib/img/img_petal2.png);
	aspect-ratio: 1 / 1.5;
}
.bgPetal._petal3{
	background-image: url(/works/web/springMusic/lib/img/img_petal3.png);
	aspect-ratio: 1.7 / 1;
}
main,
footer{
	text-align: center;
}
main{
	background-image: url(/works/web/springMusic/lib/img/img_bottom.jpg);
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
img{
	width: 100%;
	height: auto;
}
a{
	color: var(--txtColor);
	text-decoration: none;
}
a:hover{
	opacity: 0.8;
	color: #fff;
}
a:link,
a:visited,
a:active{
	color: #fff;
}
hgroup{
	padding-bottom: 6rem;
}
hgroup h2{
	font-family: var(--fontTsukushi);
	letter-spacing: 0.2em;
	font-weight: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--ttlColor);
}
hgroup h2::before,
hgroup h2::after{
	content:'';
	display: inline-block;
	background-image: url(/works/web/springMusic/lib/img/h2_sakura.png);
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1 / 1;
}
hgroup h2::after{
	transform: scaleX(-1);
}
hgroup p{
	font-family: var(--fontTsukushi);
	color: var(--ttlColor);
	font-weight: bold;
}
.backToTop{
	display: none;
	position: fixed;
	aspect-ratio: 1 / 1;
	z-index: 10;
}
.backToTop img{
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
	border-radius: 100vmax;
}

/* header -----------------------------*/
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
header .headerInnerWrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.springlink{
	background-color: var(--headerColor);
	line-height: 1.5;
	border-radius: 0 0 0 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	margin-bottom: auto;
}
.springlink:after{
	content: '';
	background-image: url(/works/web/springMusic/lib/img/icon_sakura.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-flex;
}

/* .mv -----------------------------*/
.mv{
	background: linear-gradient(to top, rgba(255, 236, 239, 1) 1%,rgba(255, 236, 239, 0) 8%) bottom,url(/works/web/springMusic/lib/img/img_mv_parts2.png),url(/works/web/springMusic/lib/img/img_mv_parts1.png), url(/works/web/springMusic/lib/img/img_mv.jpg);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	height: 100svh;
	width: 100%;
	position: relative;
}
h1{
	display: inline-block;
	position: absolute;
}
.scroll{
	font-family: var(--fontTsukushi);
	font-weight: bold;
	display: inline-block;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	color: #fff;
	text-shadow: 0 0 1rem rgba(190, 21, 52, 1);
	z-index: 5;
}
.scroll::before{
	content: '';
	position: absolute;
	bottom: -1rem;
	left: 50%;
	width: 1px;
	border-radius: 100vmax;
	background-color: #fff;
	box-shadow: 0 0 0.5rem rgba(190, 21, 52, 1);
	animation: scroll-animation 1.5s infinite;
}

/* ._intro -----------------------------*/
.sec._intro {
	text-align: center;
}
.sec._intro h2{
	font-family: var(--fontTsukushi);
	font-weight: bold;
	color:var(--ttlColor);
	letter-spacing: 0.1em;
}
.sec._intro .txtAreaWrap{
	position: relative;
	line-height: 2;
	margin: 0 auto;
}
.sec._intro .txtAreaWrap::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 100%;
	filter: blur(3rem);
	z-index: -1;
}

/* ._Playlist -----------------------------*/
.playList{
	position: relative;
}
.playList .playListTtlArea .h3Wrap h3{
	font-family: var(--fontTsukushi);
	font-weight: bold;
}
.playListTtlArea .txtWrap p {
	font-family: var(--fontTsukushi);
	font-weight: normal;
}


/* ._tvcm -----------------------------*/
.youtube_area {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	position: relative;
}
.youtube_area iframe {
	width: 100%;
	height: 100%;
}
.custom-thumbnail,
.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.custom-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}
.custom-play-button {
    z-index: 10;
	aspect-ratio: 1 / 1;
}
#youtube-video {
    width: 100%;
    height: 100%;
    display: none; /* 初期状態では非表示 */
}
.cap span{
	display: block;
	color: var(--ttlColor);
}

/* _snsLink -----------------------------*/
.snsMusicList,
.snsPostArea{
	z-index: 0;
}

/* footer -----------------------------*/
footer{
	width: 100%;
	background-color: #644F58;
	color: #fff;
	position: relative;
}
.rules{
	display: flex;
	justify-content: space-between;
	width: fit-content;
}
.rules a{
	display: block;
	width: 8em;
	text-decoration: underline;
}

/* 花びらの基本スタイル */
.petal {
	position: absolute;
	top: -10vh;
	left: 50%;
	width: 3rem;
	aspect-ratio: 1/1;
}

.petalContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	overflow: hidden;
	z-index: 201;
}
/* ランダムな動きを追加 */
.petal:nth-child(2n) {
	animation: fall1 linear infinite;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
}
.petal:nth-child(3n) {
	animation: fall2 linear infinite;
	animation-duration: 14s;
	animation-delay: -1s;
	animation-timing-function: linear;
}
.petal:nth-child(4n) {
	animation: fall3 linear infinite;
	animation-duration: 12s;
	animation-delay: -2s;
	animation-timing-function: ease-in-out;
}
.petal:nth-child(5n) {
	animation: fall4 linear infinite;
	animation-duration: 18s;
	animation-delay: -3s;
	animation-timing-function: ease-in;
}
.petal:nth-child(6n) {
	animation: fall5 linear infinite;
	animation-duration: 16s;
	animation-delay: -4s;
	animation-timing-function: ease-in-out;
}
.petal:nth-child(7n) {
	animation: fall3 linear infinite;
	animation-duration: 20s;
	animation-delay: -5s;
	animation-timing-function: linear;
}

/* 花びらの舞う動き */
@keyframes fall1 {
	0% {
		transform: translateX(20vw) translateY(-10vh) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateX(-50vw) translateY(120vh) rotate(720deg);
		opacity: 0.7;
	}
}
@keyframes fall2 {
	0% {
		transform: translateX(40vw) translateY(-10vh) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateX(-40vw) translateY(120vh) rotate(720deg);
		opacity: 0.7;
	}
}
@keyframes fall3 {
	0% {
		transform: translateX(45vw) translateY(-10vh) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateX(-30vw) translateY(120vh) rotate(720deg);
		opacity: 0.7;
	}
}
@keyframes fall4 {
	0% {
		transform: translateX(60vw) translateY(-10vh) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateX(-60vw) translateY(120vh) rotate(720deg);
		opacity: 0.7;
	}
}
@keyframes fall5 {
	0% {
		transform: translateX(80vw) translateY(-10vh) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateX(0vw) translateY(120vh) rotate(720deg);
		opacity: 0.7;
	}
}

header,
main,
footer{
	cursor: default;
	pointer-events: none;
}
header.show,
main.show,
footer.show{
	cursor: auto;
	pointer-events: all;
}
#loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	overflow: hidden;
	background-color: #fffafc;
	z-index: 200;
}
#loading.hide{
	pointer-events: all;
	overflow: visible;
}
#loading .loadingImg{
	display: none;
	width: 30vw;
	height: 30vh;
	position: fixed;
	inset: 0;
	margin: auto;
}
#loading .loadingImg img{
	object-fit: contain;
}


/*---------------------------------------------
PC(横長)
---------------------------------------------*/
@media (orientation: landscape) {
	.pcNone{
		display: none!important;
	}
	html{font-size: calc( 1000vw / 1512 );}
	/*ブラウザ幅1512pxのときに1remが10pxになる*/

	main{
		background-size: 100%;
		background-position: center bottom;
	}
	hgroup p{
		font-size: 2.6rem;
	}
	hgroup h2{
		font-size: 10rem;
	}
	hgroup h2::before,
	hgroup h2::after{
		width: 14rem;
	}
	.backToTop{
		right: 6rem;
		bottom: 6rem;
		width: 6rem;
	}


	/* .bgPetal -----------------------------*/
	._intro .bgPetal:first-of-type{
		top: -2rem;
		right: 30%;
		width: 5rem;
	}
	._intro .bgPetal:nth-of-type(2){
		top: 5rem;
		left: 58%;
		width: 3rem;
	}
	._intro .bgPetal:nth-of-type(3){
		top: 8rem;
		left: 40%;
		width: 6rem;
	}
	._intro .bgPetal:nth-of-type(4){
		top: 32rem;
		left: 28%;
		width: 3rem;
		rotate: -240deg;
	}
	._intro .bgPetal:nth-of-type(5){
		bottom: 13rem;
		left: 29%;
		width: 6rem;
	}

	._Playlist .bgPetal:first-of-type{
		top: 6rem;
		left: 14%;
		width: 5rem;
		rotate: 80deg;
	}
	._Playlist .playList._listPt1 .bgPetal:first-of-type{
		top: auto;
		bottom: -1rem;
		left: 34%;
		width: 3rem;
		rotate: 80deg;
	}
	._Playlist .playList._listPt1 .bgPetal:nth-of-type(2){
		top: auto;
		bottom: -20rem;
		left: 14%;
		width: 3rem;
		rotate: 140deg;

	}
	._Playlist .playList._listPt3 .bgPetal:first-of-type{
		top: -11rem;
		right: 28%;
		left: auto;
		width: 4rem;
		rotate: 130deg;
	}
	._Playlist .playList._listPt3 .bgPetal:nth-of-type(2){
		top: 1rem;
		right: 6%;
		left: auto;
		width: 3rem;
		rotate: 170deg;
	}
	._Playlist .playList._listPt3 .bgPetal:nth-of-type(3){
		top: 26rem;
		right: -4%;
		left: auto;
		width: 5rem;
	}

	._tvcm .bgPetal:first-of-type{
		top: -2rem;
		right: 23%;
		left: auto;
		width: 3rem;
		rotate: 80deg;
	}
	._tvcm .bgPetal:nth-of-type(2){
		top: 10rem;
		right: 14%;
		left: auto;
		width: 5rem;
		rotate: -110deg;
	}
	._tvcm .bgPetal:nth-of-type(3){
        top: 34rem;
        left: 15%;
        width: 5rem;
        rotate: 130deg
	}
	._tvcm .bgPetal:nth-of-type(4){
		bottom: 17rem;
		left: 30%;
		width: 3rem;
		rotate: 140deg;
	}
	._snsLink .bgPetal:first-of-type{
		top: 29rem;
		right: 20%;
		left: auto;
		width: 5rem;
		rotate: 0deg;
		z-index: unset;
	}
	._snsLink .bgPetal:nth-of-type(2){
		top: 73rem;
		right: 32%;
		left: auto;
		width: 3rem;
		rotate: -1.2 1 0 180deg;/* X 180 * (-1.2), Y 180 * 1 Z */
	}
	._snsLink .bgPetal:nth-of-type(3){
		bottom: 32rem;
		left: 16%;
		width: 4rem;
		rotate: 0deg;
		z-index: -1;
		mix-blend-mode: hard-light;
	}
	._snsLink .bgPetal:nth-of-type(4){
		bottom: 13rem;
		left: 26%;
		width: 3rem;
		rotate: 0deg;
		mix-blend-mode: hard-light;
	}
	footer .bgPetal{
		top: -2.5rem;
		left: 33%;
		width: 3rem;
		rotate: -1.2 1 0 180deg;/* X 180 * (-1.2), Y 180 * 1 Z */
	}

	/* header -----------------------------*/
	.ihmgLogo{
		margin: 3rem 0 0 3rem;
		width: 26rem;
	}
	.springlink{
		padding: 2rem 5rem;
		font-size: 2.2rem;
	}
	.springlink:after{
		width: 3.6rem;
		height: 3.6rem;
		margin-left: 2rem;
	}
	
	/* .mv -----------------------------*/
	.mv{
		background-size: 100%, 31%, 19%, cover;
		background-position: center bottom, left 14% bottom 20%, right bottom, 0 80%;
	}
	h1{
		width: 50%;
		right: 5%;
		bottom: 18%;
	}
	.scroll{
		bottom: 8rem;
		font-size: 1.6rem;
	}
	.scroll::before{
		height: 0;
		transform: translate(-50%, 0rem);
	}
	@keyframes scroll-animation {
		0% {
			height: 0;
			transform: translate(-50%, 0rem);
		}
		50% {
			height: 10rem;
			transform: translate(-50%, 10rem);
		}
		100% {
			height: 0;
			transform: translate(-50%, 10rem);
		}
	}

	/* ._intro -----------------------------*/
	.sec._intro .secInner{
		padding: 15rem 0;
	}
	.sec._intro h2{
		font-size: 4.8rem;
		margin-top: 3rem;
		margin-bottom: 7rem;
	}
	.sec._intro .txtAreaWrap{
		width: 58%;
		padding: 16rem 0 12rem;
	}
	.sec._intro .secInner p{
		font-size: 2.2rem;
		margin-bottom: 5rem;
	}
	.sec._intro .secInner .introImg{
		position: absolute;
	}
	.sec._intro .secInner .introImg._01{
		width: 35rem;
		top: 32rem;
		left: 0;
	}
	.sec._intro .secInner .introImg._02{
		width: 37rem;
		top: 50rem;
		right: 0;
	}
	.sec._intro .secInner .introImg._03{
		width: 31rem;
		top: 85rem;
		left: 8rem;
	}
	.sec._intro .secInner .introImg._04{
		width: 36rem;
		top: 96rem;
		right: 9rem;
	}

	/* ._Playlist -----------------------------*/
	._Playlist .secInner{
		padding: 15rem 9rem;
	}
	._Playlist .secInner::before{
		content:'';
		background: linear-gradient(0deg, rgba(214,248,242,0) 0%, rgba(214,248,242,1) 10%, rgba(214,248,242,1) 90%, rgba(214,248,242,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 100%;
		transform-origin: center;
		transform: rotate(-17deg) translate(-25%, -20rem);
		z-index: -1;
	}
	.playList:not(:last-child){
		margin: 0 auto 10rem;
	}
	.playList .playListTtlArea{
		display: grid;
		width: 100%;
		grid-template-columns: 43% 57%;
	}
	.playList .playListTtlArea .h3Wrap{
		position: relative; 
		display: block;
	}
	.playList .playListTtlArea .h3Wrap h3{
		position: absolute;
		color: #fff;
		left: 0;
		right: 0;
		top: auto;
		bottom: 3.6rem;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 0.05em;
		font-size: 4.5rem;
		text-align: center;
	}
	.playList._listPt1 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgb(84, 4, 16, 1);
		-webkit-text-stroke: 0.5px #A54A57;
		inset: 0;
		margin: auto;
		line-height: 1.3;
		font-size: 5.5rem;
	}
	.playList._listPt2 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgb(89, 49, 117, 1);
		-webkit-text-stroke: 0.5px #BE8ABE;

	}
	.playList._listPt3 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgb(41, 96, 143, 1);
		-webkit-text-stroke: 0.5px #85A5C4;
	}

	.playList .playListTtlArea .h3Wrap::before{
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		content:'';
		width: 100%;
		mix-blend-mode: multiply;
		height: 12rem;
	}
	.playList._listPt1 .playListTtlArea .h3Wrap::before{
		background-color: #FEE2E6;
		inset: 0;
		height: 17rem;
	}
	.playList._listPt2 .playListTtlArea .h3Wrap::before{
		background-color: #F4E4FF;

	}
	.playList._listPt3 .playListTtlArea .h3Wrap::before{
		background-color: #E1EFFF;
	}

	.playListTtlArea .txtWrap{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.playListTtlArea .txtWrap::before{
		position: absolute;
		content: '';
		left: -5%;
		margin: auto;
		width: 110%;
		height: 100%;
		background-color: rgba(255,255,255,0.7);
		border-radius: 100%;
		filter: blur(20px);
		z-index: -1;
	}

	.playListTtlArea .txtWrap p{
		font-size: 3.6rem;
	}
	.playList._listPt1 .playListTtlArea .txtWrap p{
		color: #E25065;
	}
	.playList._listPt2 .playListTtlArea .txtWrap p{
		color: #9253BE;
	}
	.playList._listPt3 .playListTtlArea .txtWrap p{
		color: #4A7CB5;
	}

	.serviceLinkArea{
		border-radius: 2rem;
		padding: 3rem;
		width: 60%;
		margin: -3rem 0 0 auto;
	}
	.playList._listPt1 .serviceLinkArea{
		background-color: #FEE2E6;
	}
	.playList._listPt2 .serviceLinkArea{
		background-color: #F4E4FF;
	}
	.playList._listPt3 .serviceLinkArea{
		background-color: #E1EFFF;
	}
	.serviceLinkArea p{
		margin: 0 auto 3rem;
		font-size: 2rem;
	}
	.serviceLinkArea ul{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}
	.serviceLinkArea ul li{
		background-color: #fff;
		border-radius: 1rem;
		box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.4);
	}
	.serviceLinkArea ul li a{
		display: flex;
		justify-content: center;
		height: 100%;
		align-items: center;
		min-height: 8.6rem;
	}
	.serviceLinkArea ul li:first-child a{
		padding: 0 4.1rem;
	}
	.serviceLinkArea ul li:nth-child(2) a{
		padding: 0 4rem;
	}
	.serviceLinkArea ul li:nth-child(3) a{
		padding: 0 3rem;
	}
	.serviceLinkArea ul li:nth-child(4) a{
		padding: 0 4.1rem;
	}
	.serviceLinkArea ul li:nth-child(5) a{
		padding: 0.9rem 3rem 0;
	}
	.serviceLinkArea ul li:nth-child(6) a{
		padding: 0 2rem;
	}

	/*2つ目のPlayList*/
	.playList._listPt2 .playListTtlArea{
		grid-template-columns: 57% 43%;
	}
	.playList._listPt2 .playListTtlArea .h3Wrap{
		order: 2;
	}
	.playList._listPt2 .playListTtlArea .txtWrap{
		order: 1;
	}
	.playList._listPt2 .playListTtlArea .txtWrap::before{
		left: unset;
		right: -5%;
	}
	.playList._listPt2 .serviceLinkArea{
		margin: -30px auto 0 0;
	}

	/* ._tvcm -----------------------------*/
	._tvcm .secInner{
		padding: 15rem 0;
	}
	._tvcm .youtube_area {
		width: 90rem;
	}
	._tvcm .custom-play-button {
		width: 9rem; /* 再生ボタンのサイズを調整 */
	}
	._tvcm .title{
		font-size: 4rem;
	}
	._tvcm .player{
		font-size: 2rem;
	}
	._tvcm .cap{
		margin: 3rem auto 0;
	}

	/* ._sns -----------------------------*/
	._snsLink .secInner{
		width: 100%;
		padding: 15rem 0 30rem; 

	}
	._snsLink .secInner::before{
		content:'';
		background: linear-gradient(0deg, rgba(177,240,229,0) 0%, rgba(177,240,229,1) 25%, rgba(177,240,229,1) 75%, rgba(177,240,229,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 90%;
		transform-origin: center;
		transform: rotate(-17deg) translate(-25%, -28rem);
		z-index: -1;
	}
	._snsLink .logo{
		display: inline-block;
		width: 24rem;
		margin: 0 auto 6rem;
	}

	.snsMusicList,
	.snsPostArea{
		width: 106rem;
		position: relative;
		padding: 7rem 6rem;
		margin: 0 auto 5rem;
	}

	.snsPostArea::before,
	.snsMusicList::before{
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.3);
		border: 1px solid #fff;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		z-index: -1;
		border-radius: 2rem;
	}


	.snsMusicList p{
		font-size: 4.4rem;
		color: #8D6674;
	}
	.snsPostArea p{
		font-size: 4.4rem;
		color: #8D6674;
	}
	.snsPostArea p.small{
		margin-top: 2.5rem;
		font-size: 2.4rem;
	}
	.snsMusicList ul{
		display: flex;
		justify-content: space-between;
		margin: 6rem auto 0;
	}
	.snsPostArea ul{
		display: flex;
		justify-content: space-between;
		margin: 4rem auto 0;
		width: 50rem;
	}
	.snsMusicList ul a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-decoration: none;
		background-color: #FB7AAD;
		border-radius: 100vmax;
		border: 1px solid #fff;
		padding: 1.2rem 1.6rem;
		min-width: 30rem;
		min-height: 7.8rem;
	}
	.aIcon{
		display: inline-block;
		width: 5.2rem;
		aspect-ratio: 1 / 1;
		border: 1px solid #fff;
		border-radius: 100vmax;
	}
	.aTxt{
		flex-grow: 1;
		font-size: 2.4rem;
	}
	.snsPostArea ul a{
		display: inline-block;
		text-decoration: none;
		background-color: #FB7AAD;
		width: 7.8rem;
		aspect-ratio: 1 / 1;
		border-radius: 100vmax;
		border: 1px solid #fff;
	}

	/* footer -----------------------------*/
	footer{
		padding: 4rem 0 2.5rem;
	}
	.footerLogo{
		display: inline-block;
		width: 20%;
		margin: 0 auto 4rem;
	}
	.rules{
		width: 30rem;
		margin: 0 auto 1.8rem;
	}
	.rules a{
		font-size: 1.4rem;
	}
	footer small{
		font-size: 1.4rem;
	}
}


/*---------------------------------------------
SP(縦長)
---------------------------------------------*/
@media (orientation: portrait) {
	html{font-size: calc( 1000vw / 375 );}
	/*ブラウザ幅375pxのときに1remが10pxになる*/

	img{
		height: 100%;
		object-fit: contain;
	}
	main{
		background-size: 100%;
		background-position: center bottom;
	}
	.secInner{
		padding: 7.5rem 0;
	}
	hgroup p{
		font-size: 1.6rem;
	}
	hgroup h2{
		font-size: 4.2rem;
	}
	hgroup h2::before,
	hgroup h2::after{
		width: 5.5rem;
	}
	.backToTop{
		right: 2rem;
		bottom: 12rem;
		width: 4.4rem;
	}
	#loading .loadingImg{
		width: 70vw;
	}
	
	/* .bgPetal -----------------------------*/
	._intro .bgPetal:first-of-type{
		top: -2rem;
		right: 30%;
		width: 2.5rem;
	}
	._intro .bgPetal:nth-of-type(2){
		top: 3rem;
		left: 31%;
		width: 1.5rem;
	}
	._intro .bgPetal:nth-of-type(3){
		top: 6rem;
		left: -3%;
		width: 3rem;
	}
	._intro .bgPetal:nth-of-type(4){
        top: 18rem;
        left: 10%;
		width: 1.5rem;
		rotate: -240deg;
	}
	._intro .bgPetal:nth-of-type(5){
		bottom: 13rem;
		left: 29%;
		width: 3rem;
	}

	._Playlist .bgPetal:first-of-type{
        top: -7rem;
        left: 10%;
        width: 3rem;
		rotate: 80deg;
	}
	._Playlist .playList._listPt1 .bgPetal:first-of-type{
		top: auto;
		bottom: -4rem;
		left: 34%;
		width: 1.5rem;
		rotate: 80deg;
	}
	._Playlist .playList._listPt1 .bgPetal:nth-of-type(2){
		top: auto;
		bottom: -10rem;
		left: 22%;
		width: 1.5rem;
		rotate: 140deg;
	}
	._Playlist .playList._listPt3 .bgPetal:first-of-type{
		top: -11rem;
		right: 45%;
		left: auto;
		width: 2rem;
		rotate: 130deg;
	}
	._Playlist .playList._listPt3 .bgPetal:nth-of-type(2){
		top: -6rem;
		right: 23%;
		left: auto;
		width: 1.5rem;
		rotate: 170deg;
	}
	._Playlist .playList._listPt3 .bgPetal:nth-of-type(3){
		top: 5rem;
		right: -2%;
		left: auto;
		width: 2.5rem;
	}

	._tvcm .bgPetal:first-of-type{
		top: 0;
		right: 23%;
		left: auto;
		width: 1.5rem;
		rotate: 80deg;
	}
	._tvcm .bgPetal:nth-of-type(2){
		top: 6rem;
		right: 5%;
		left: auto;
		width: 2.5rem;
		rotate: -110deg;
	}
	._tvcm .bgPetal:nth-of-type(3){
		top: 17rem;
		left: 0%;
		width: 3rem;
		rotate: 130deg;
	}
	._tvcm .bgPetal:nth-of-type(4){
		bottom: 7rem;
        left: 20%;
        width: 1.5rem;
		rotate: -1.2 1 0 180deg;/* X 180 * (-1.2), Y 180 * 1 Z */
	}
	._snsLink .bgPetal:first-of-type{
		top: 16rem;
		right: 20%;
		left: auto;
		width: 2.5rem;
		rotate: 0deg;
		z-index: unset;
	}
	._snsLink .bgPetal:nth-of-type(2){
		top: 48.5rem;
		right: 32%;
		left: auto;
		width: 1.2rem;
		rotate: -1.2 1 0 180deg;/* X 180 * (-1.2), Y 180 * 1 Z */
	}
	._snsLink .bgPetal:nth-of-type(3){
        bottom: 18.5rem;
        left: 16%;
        width: 2rem;
        rotate: 0deg;
        z-index: -1;
        mix-blend-mode: hard-light;
	}
	._snsLink .bgPetal:nth-of-type(4){
		bottom: 7rem;
		left: 26%;
		width: 1.5rem;
		rotate: 0deg;
		mix-blend-mode: hard-light;
	}
	footer .bgPetal{
		top: -1rem;
		left: 33%;
		width: 1.5rem;
		rotate: -1.2 1 0 180deg;/* X 180 * (-1.2), Y 180 * 1 Z */
	}

	/* header -----------------------------*/
	.ihmgLogo{
		padding: 1rem 0 0 1rem;
	}
	.ihmgLogo{
		width: 11rem;
	}
	.springlink{
		padding: 1.3rem 1.5rem;
		font-size: 1.2rem;
	}

	/* .mv -----------------------------*/
	.mv{
		background-size: 100%, 58%, 47%, cover;
		background-position: center bottom, left 0.4rem bottom 20%, right -22% bottom 4%, 24% 0;
	}
	h1 {
		height: 35svh;
		right: 0;
		left: 0;
		top: 1svh;
	}
	.scroll{
		bottom: 5rem;
		font-size: 1.6rem;
	}
	.scroll::before{
		height: 0rem;
		transform: translate(-50%, 0rem);
	}
	@keyframes scroll-animation {
		0% {
			height: 0;
			transform: translate(-50%, 0rem);
		}
		50% {
			height: 7rem;
			transform: translate(-50%, 7rem);
		}
		100% {
			height: 0;
			transform: translate(-50%, 7rem);
		}
	}

	/* ._intro -----------------------------*/
	.sec._intro .secInner{
		padding-top: 10rem;
	}
	.sec._intro h2{
		font-size: 2rem;
		margin-bottom: 3rem;
	}
	.sec._intro .txtAreaWrap{
		width: 100%;
		padding: 7rem 0;
	}
	.sec._intro .secInner p{
		font-size: 1.5rem;
		margin-bottom: 3rem;
	}
	.sec._intro .secInner .introImg._01{
		width: 20rem;
		margin: 2rem auto 0 -2rem;
	}
	.sec._intro .secInner .introImg._02{
		width: 22rem;
		margin: -8rem -6rem 0 auto;
	}
	.sec._intro .secInner .introImg._03{
		width: 15rem;
		margin: -3rem auto 0 2rem;
	}
	.sec._intro .secInner .introImg._04{
		width: 19rem;
		margin: -5rem 0 0 auto;
	}
	
	/* ._Playlist -----------------------------*/
	._Playlist .secInner::before{
		content:'';
		background: linear-gradient(0deg, rgba(214,248,242,0) 0%, rgba(214,248,242,1) 10%, rgba(214,248,242,1) 90%, rgba(214,248,242,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		width: 400%;
		height: 100%;
		transform-origin: center;
		transform: rotate(-15deg) translate(-25%, -10rem);
		z-index: -1;
	}
	.playList:not(:last-child){
		margin: 0 auto 14rem;
	}
	.playList .playListTtlArea .h3Wrap{
		position: relative; 
		display: block;
		width: 25rem;
		margin: 0 auto;
	}
	.playList .playListTtlArea .h3Wrap h3{
		position: absolute;
		color: #fff;
		left: 0;
		right: 0;
		top: auto;
		bottom: 1.2rem;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 0.05em;
		font-size: 2rem;
		text-align: center;
	}
	.playList._listPt1 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgb(84, 4, 16, 1);
		-webkit-text-stroke: 0.5px #A54A57;
		inset: 0;
		margin: auto;
		line-height: 1.5;
	}
	.playList._listPt2 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgba(89, 49, 117, 1);
		-webkit-text-stroke: 0.5px #BE8ABE;
	}
	.playList._listPt3 .playListTtlArea .h3Wrap h3{
		text-shadow: 0 0 0.5rem rgba(41, 96, 143, 1);
		-webkit-text-stroke: 0.5px #85A5C4;
	}

	.playList .playListTtlArea .h3Wrap::before{
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		content:'';
		width: 100%;
		mix-blend-mode: multiply;
		height: 4.8rem;
	}
	.playList._listPt1 .playListTtlArea .h3Wrap::before{
		background-color: #FEE2E6;
		inset: 0;
		height: 7rem;
	}
	.playList._listPt2 .playListTtlArea .h3Wrap::before{
		background-color: #F4E4FF;
	}
	.playList._listPt3 .playListTtlArea .h3Wrap::before{
		background-color: #E1EFFF;
	}
	.playListTtlArea .txtWrap{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: 4rem 0;
	}
	.playListTtlArea .txtWrap::before{
		position: absolute;
		content: '';
		inset: 0;
		margin: auto;
		width: 80%;
		height: 140%;
		background-color: rgba(255,255,255,0.7);
		border-radius: 100%;
		filter: blur(20px);
		z-index: -1;
	}
	.playListTtlArea .txtWrap p{
		font-size: 1.8rem;
	}
	.playList._listPt1 .playListTtlArea .txtWrap p{
		color: #E25065;
	}
	.playList._listPt2 .playListTtlArea .txtWrap p{
		color: #9253BE;
	}
	.playList._listPt3 .playListTtlArea .txtWrap p{
		color: #4A7CB5;
	}
	.serviceLinkArea{
		border-radius: 1rem;
		margin: 0 2rem;
		padding: 3rem 1rem 1rem;
	}
	.playList._listPt1 .serviceLinkArea{
		background-color: #FEE2E6;
	}
	.playList._listPt2 .serviceLinkArea{
		background-color: #F4E4FF;
	}
	.playList._listPt3 .serviceLinkArea{
		background-color: #E1EFFF;
	}
	.serviceLinkArea p{
		margin: 0 auto 3rem;
		font-size: 1.4rem;
	}
	.serviceLinkArea ul{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.serviceLinkArea ul li{
		background-color: #fff;
		border-radius: 1rem;
		box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.4);
	}
	.serviceLinkArea ul li a{
		display: flex;
		justify-content: center;
		height: 100%;
		align-items: center;
		min-height: 5.5rem;
	}
	.serviceLinkArea ul li:first-child a{
		padding: 0 2.5rem;
	}
	.serviceLinkArea ul li:nth-child(2) a{
		padding: 0 3rem;
	}
	.serviceLinkArea ul li:nth-child(3) a{
		padding: 0 1.4rem;
	}
	.serviceLinkArea ul li:nth-child(4) a{
		padding: 0 2.1rem;
	}
	.serviceLinkArea ul li:nth-child(5) a{
		padding: 0.6rem 1rem 0;
	}
	.serviceLinkArea ul li:nth-child(6) a{
		padding: 0;
	}

	/* ._tvcm -----------------------------*/
	._tvcm .youtube_area {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	._tvcm .custom-play-button {
		width: 4.5rem; /* 再生ボタンのサイズを調整 */
	}
	._tvcm .title{
		font-size: 1.6rem;
	}
	._tvcm .player{
		font-size: 1.4rem;
	}
	._tvcm .cap{
		margin: 1dvh auto 0;
	}

	/* ._sns -----------------------------*/
	._snsLink .secInner{
		width: 100%;
		padding-bottom: 18rem;
	}
	._snsLink .secInner::before{
		content:'';
		background: linear-gradient(0deg, rgba(177,240,229,0) 0%, rgba(156,225,237,1) 20%, rgba(177,240,229,1) 80%, rgba(177,240,229,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 100%;
		transform-origin: center;
		transform: rotate(-15deg) translate(-25%, -5rem);
		z-index: -1;
	}
	._snsLink .logo{
		display: inline-block; 
		width: 12rem;
		margin-bottom: 2.4rem;
	}
	.snsMusicList,
	.snsPostArea{
		position: relative;
		padding: 3rem 1rem;
		margin: 0 2rem 2rem;
	}
	.snsPostArea::before,
	.snsMusicList::before{
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.3);
		border: 1px solid #fff;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		z-index: -1;
		border-radius: 1rem;
	}
	.snsMusicList p{
		font-size: 2rem;
		color: #8D6674;
	}
	.snsPostArea p{
		font-size: 2rem;
		color: #8D6674;
	}
	.snsPostArea p.small{
		margin-top: 2rem;
		font-size: 1.4rem;
	}
	.snsMusicList ul{
		margin: 3rem auto 0;
	}
	.snsPostArea ul{
		display: flex;
		justify-content: space-between;
		margin: 2rem auto 0;
		width: 23rem;
	}
	.snsMusicList ul{
		display: grid;
		grid-template-rows: 4.4rem 4.4rem 4.4rem;
		gap: 2rem;
	}
	.snsMusicList ul a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-decoration: none;
		background-color: #FB7AAD;
		border-radius: 100vmax;
		border: 1px solid #fff;
		padding: 1rem 1.5rem;
		min-height: 4.4rem;
	}
	.aIcon{
		display: inline-block;
		width: 2.3rem;
		aspect-ratio: 1 / 1;
		border: 1px solid #fff;
		border-radius: 100vmax;
	}
	.aTxt{
		flex-grow: 1;
		font-size: 1.8rem;
	}
	.snsPostArea ul a{
		display: inline-block;
		text-decoration: none;
		background-color: #FB7AAD;
		width: 5rem;
		aspect-ratio: 1 / 1;
		border-radius: 100vmax;
		border: 1px solid #fff;
	}

	/* footer -----------------------------*/
	footer{
		padding: 3rem 0;
	}
	.footerLogo{
		display: inline-block;
		width: 13rem;
		margin: 0 auto 2.3rem;
	}
	.rules{
		width: 60%;
		margin: 0 auto 1.8rem;
	}
	.rules a{
		font-size: 1.2rem;
	}
	footer small{
		font-size: 1.2rem;
	}
}