@charset "utf-8";

img {
	width: 100%;
	height: auto;
}
.js--target span {
	opacity: 0;
}
.modal__wrapper {
	position: fixed;
	height: 100%;
	overflow-y: scroll;
}
.no--scroll {
	position: fixed;
	left: 0;
	width: 100%;
}
.hide {
	display: block;
	height: 0;
	overflow: hidden;
	position: relative;
}
.limited__bg {
	min-height: 100vh;
	background-size: 100% auto;
}
.limited__inner .item__body .icon span, .modal__container .item__body .icon span {
	width: auto;
	padding: 0 5px;
}
#modalTarget {
	padding-bottom: 70px;
}
/*
#itemTarget {
	min-height: 100vh;
}
:/
/* --------------------------------------- keen dots */
.dots {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #999999;
    border: 1px solid #999999;
    border-radius: 50%;
	cursor: pointer;
	margin: 0 5px;
}
.dot.dot--active {
	background-color: #ffffff;
    border: 1px solid #999999;
}
/*============================================================================================ 50th campain setting */
/* ================================================ thThanksKv */
.thThanksKv {
	position: relative;
}
.thThanksKv__wrapper {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 0;
}
.thThanksKv__target {
	position: sticky;
	top: 0;
	left: 0;
	height: 100vh;
	background-image: url(/campaign/2025/50th/0207/images/kv/body--bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	z-index: 0;
}
.thThanksKv__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/*background-color: rgba(0,0,0,.5); 20250307変更*/
	background-color: #002F51;
	opacity: 0;
}
/* 20250307追加 */
.active.thThanksKv__bg {
	animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ------------------------------------------ thThanksTarget */
.thThanksTarget {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	width: 115.25vh; /*  vh 706 / 800 * 100 */
	z-index: 1;
}
.thThanksTarget__layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-image: url(/campaign/2025/50th/0207/images/kv/kv--pc.jpg);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	opacity: 0;
	transition-duration: 1s;
    transition-timing-function: cubic-bezier(.41,.12,.26,.97);
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: cubic-bezier(.41,.12,.26,.97);
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(.41,.12,.26,.97);
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: cubic-bezier(.41,.12,.26,.97);
}
/* ------------------------------------------ body.is--show */
body.is--show .thThanksTarget__layer {
	opacity: 1;
}
.thThanksTarget__inner {
	position: relative;
	width: 100%;
	padding-top: calc(706 / 850 * 100%);
}
/* ------------------------------------------ thThanksKvItem */
.thThanksKvItem {
	position: absolute;
	z-index: 1;
	display: none;
}
.thThanksKvItem__inner {
	position: relative;
	width: 100%;
	
}
/* ------------------------------------------ thThanksKvItem__target */
.thThanksKvItem__target {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.thThanksKvItem__video {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	object-fit: cover;
}
/* ================================================ is--video 動画判定用 */
.is--video {
	span {
		display: none;
	}
}
/* ------------------------------------------ thKv--1 */
.thKv--1 {
	top: calc(15 / 706 * 100%);
	left: calc(25 / 850 * 100%);
	width: calc(246 / 850 * 100%);
}
.thKv--1 .thThanksKvItem__inner {
	padding-top: calc(810 / 492 * 100%);
}
/* ------------------------------------------ thKv--2 */
.thKv--2 {
	top: calc(156 / 706 * 100%);
	left: calc(134 / 850 * 100%);
	width: calc(174 / 850 * 100%);
}
.thKv--2 .thThanksKvItem__inner {
	padding-top: calc(572 / 348 * 100%);
}
/* ------------------------------------------ thKv--3 */
.thKv--3 {
	top: calc(232 / 706 * 100%);
	left: 0;
	width: calc(242 / 850 * 100%);
}
.thKv--3 .thThanksKvItem__inner {
	padding-top: calc(794 / 484 * 100%);
}
/* ------------------------------------------ thKv--4 */
.thKv--4 {
	top: calc(38 / 706 * 100%);
	left: calc(226 / 850 * 100%);
	width: calc(278 / 850 * 100%);
}
.thKv--4 .thThanksKvItem__inner {
	padding-top: calc(912 / 556 * 100%);
}
/* ------------------------------------------ thKv--5 */
.thKv--5 {
	top: calc(364 / 706 * 100%);
	left: calc(100 / 850 * 100%);
	width: calc(200 / 850 * 100%);
}
.thKv--5 .thThanksKvItem__inner {
	padding-top: calc(652 / 400 * 100%);
}
/* ------------------------------------------ thKv--6 */
.thKv--6 {
	top: calc(290 / 706 * 100%);
	left: calc(352 / 850 * 100%);
	width: calc(182 / 850 * 100%);
}
.thKv--6 .thThanksKvItem__inner {
	padding-top: calc(600 / 364 * 100%);
}
/* ------------------------------------------ thKv--7 */
.thKv--7 {
	top: 0;
	left: calc(414 / 850 * 100%);
	width: calc(255 / 850 * 100%);
}
.thKv--7 .thThanksKvItem__inner {
	padding-top: calc(840 / 510 * 100%);
}
/* ------------------------------------------ thKv--8 */
.thKv--8 {
	top: calc(250 / 706 * 100%);
	left: calc(252 / 850 * 100%);
	width: calc(248 / 850 * 100%);
}
.thKv--8 .thThanksKvItem__inner {
	padding-top: calc(810 / 496 * 100%);
}
/* ------------------------------------------ thKv--9 */
.thKv--9 {
	top: calc(338 / 706 * 100%);
	left: calc(432 / 850 * 100%);
	width: calc(225 / 850 * 100%);
}
.thKv--9 .thThanksKvItem__inner {
	padding-top: calc(740 / 450 * 100%);
}
/* ------------------------------------------ thKv--10 */
.thKv--10 {
	top: calc(250 / 706 * 100%);
	left: calc(584 / 850 * 100%);
	width: calc(214 / 850 * 100%);
}
.thKv--10 .thThanksKvItem__inner {
	padding-top: calc(704 / 428 * 100%);
}
/* ------------------------------------------ thKv--11 */
.thKv--11 {
	top: calc(77 / 706 * 100%);
	left: calc(638 / 850 * 100%);
	width: calc(212 / 850 * 100%);
}
.thKv--11 .thThanksKvItem__inner {
	padding-top: calc(698 / 424 * 100%);
}
/* ------------------------------------------ thKv--12 */
.thKv--12 {
	top: calc(20 / 706 * 100%);
	left: calc(564 / 850 * 100%);
	width: calc(200 / 850 * 100%);
}
.thKv--12 .thThanksKvItem__inner {
	padding-top: calc(652 / 400 * 100%);
}
/* ================================================ thThanksConcept__height sticky領域調整用 */
.thThanksConcept {
	position: relative;
	z-index: 1;
}
/* 20250307削除
.thThanksConcept__height {
	height: 150vh;
}
*/
.thThanksConcept__inner {
	position: relative;
	height: 100vh;
}
/* ------------------------------------------ thThanksConcept__title */
.thThanksConcept__title img {
	height: 50px; width: auto;
}
/* ------------------------------------------ thThanksConcept__statement */
.thThanksConcept__statement img {
	height: 22px; width: auto;
}
/* ------------------------------------------ thThanksConceptBlock */
.thThanksConceptBlock {
	/*padding-top: 10vw; 20250307削除*/
	position: absolute;
	top: 50%; /*20250307追加*/
	left: 50%;
	/*transform: translateX(-50%); 20250307変更*/
	transform: translate(-50%, -50%);
}
/* ------------------------------------------ thThanksConcept__title--p */
.thThanksConcept__title--p {
	overflow: hidden;
	font-size: 0;
	line-height: 1;
}
.thThanksConcept__title .thThanksConcept__title--p:nth-child(1) {
	margin-bottom: 10px;
}
.thThanksConcept__title .thThanksConcept__title--p:nth-child(2) {
	padding-left: 164px;
}
/* ------------------------------------------ thThanksConcept__statement */
.thThanksConcept__statement {
	padding: 30px 0 0 164px;
}
/* ------------------------------------------ thThanksConcept__statement--p */
.thThanksConcept__statement--p {
	margin-bottom: 15px;
	overflow: hidden;
	line-height: 1;
	font-size: 0;
}
/* ------------------------------------------ thThanksConcept__statement--p 文章横調整 */
.thThanksConcept__statement--p:nth-child(2) {
	padding-left: 45px;
}
.thThanksConcept__statement--p:nth-child(5) {
	padding-left: 90px;
}
.thThanksConcept__statement--p:nth-child(6) {
	padding-left: 135px;
}
.thThanksConcept__statement--p:nth-child(7) {
	padding-left: 221px;
}
.thThanksConcept__statement--p:nth-child(8) {
	padding-left: 339px;
}
.thThanksConcept__statement--p:nth-child(9) {
	padding-left: 140px;
}
/* ================================================ active action setting*/
.thThanksConcept__title--p img,
.thThanksConcept__statement--p img {
	transform: translateY(100%);
	transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition-duration: 0.6s;
    -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition-duration: 0.6s;
    -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.active.thThanksConceptBlock .thThanksConcept__title--p img,
.active.thThanksConceptBlock .thThanksConcept__statement--p img {
	transform: translateY(0);
}
/* ================================================ transiton delay setting */
.active.thThanksConceptBlock .thThanksConcept__title--p:nth-child(1) img {
	transition-delay: 0.1s;
}
.active.thThanksConceptBlock .thThanksConcept__title--p:nth-child(2) img {
	transition-delay: 0.4s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(1) img {
	transition-delay: 1.3s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(2) img {
	transition-delay: 1.4s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(5) img {
	transition-delay: 1.5s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(6) img {
	transition-delay: 1.6s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(7) img {
	transition-delay: 1.7s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(8) img {
	transition-delay: 1.8s;
}
.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(9) img {
	transition-delay: 1.9s;
}
/* ================================================ PC / SP statement setting */
.thThanksConcept__statement--p.statementPc {
	display: block;
}
.thThanksConcept__statement--p.statementSp {
	display: none;
}
/* ================================================ 768px */
@media only screen and (max-width: 768px) {
	.thThanksKv__target {
		background-image: url(/campaign/2025/50th/0207/images/kv/body--bg--sp.jpg);
	}
	/* ================================================ thThanksConcept__height sticky領域調整用 */
	/* 20250307削除
	.thThanksConcept__height {
		height: 100vh;
	}
	*/
	.thThanksConcept__inner {
		height: 100vh;
	}
	/* ================================================ PC / SP statement setting */
	.thThanksConcept__statement--p.statementPc {
		display: none;
	}
	.thThanksConcept__statement--p.statementSp {
		display: block;
	}
	.thThanksTarget {
		width: 93%;
	}
	.thThanksTarget__layer {
		background-image: url(/campaign/2025/50th/0207/images/kv/kv--sp.jpg);
	}
	.thThanksConceptBlock {
		width: 326px;
	}
	/* ------------------------------------------ thThanksConcept__title */
	.thThanksConcept__title img {
		height: 30px; width: auto;
	}
	/* ------------------------------------------ thThanksConcept__statement */
	.thThanksConcept__statement img {
		height: 14px; width: auto;
	}
	/* ------------------------------------------ thThanksConcept__title--p 文章調整 */
	.thThanksConcept__title .thThanksConcept__title--p:nth-child(2) {
		padding-left: 90px;
	}
	/* ------------------------------------------ thThanksConcept__statement */
	.thThanksConcept__statement {
		padding: 15px 0 0 28px;
	}
	.thThanksConcept__title--p {
		margin-bottom: 7px;
	}
	.thThanksConcept__statement--p {
		margin-bottom: 14px;
	}
	/* ------------------------------------------ thThanksConcept__statement--p 文章横調整 */
	.thThanksConcept__statement--p:nth-child(3) {
		padding-left: 12px;
	}
	.thThanksConcept__statement--p:nth-child(4) {
		padding-left: 35px;
	}
	.thThanksConcept__statement--p:nth-child(5) {
		padding-left: 50px;
	}
	.thThanksConcept__statement--p:nth-child(6) {
		padding-left: 70px;
	}
	.thThanksConcept__statement--p:nth-child(7) {
		padding-left: 115px;
	}
	.thThanksConcept__statement--p:nth-child(8) {
		padding-left: 107px;
	}
	.thThanksConcept__statement--p:nth-child(9) {
		padding-left: 70px;
	}
	/* ================================================ transiton delay setting */
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(1) img {
		transition-delay: 0.3s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(3) img {
		transition-delay: 0.4s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(4) img {
		transition-delay: 0.5s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(5) img {
		transition-delay: 0.6s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(6) img {
		transition-delay: 0.7s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(7) img {
		transition-delay: 0.8s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(8) img {
		transition-delay: 0.9s;
	}
	.active.thThanksConceptBlock .thThanksConcept__statement--p:nth-child(9) img {
		transition-delay: 1.0s;
	}
}
/* ========================================================================= add 20250204 */
/* ========================================= thThanks__scrollBar */
.thThanks__scrollBar {
	position: fixed;
	width: 1px;
	height: 80px;
	left: 50%;
	bottom: 0;
	z-index: 10;
	pointer-events: none;
	transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* ------------------- thThanks__scrollBar line */
.thThanks__scrollBar--line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.3);
	overflow: hidden;
}
/* scorllBar-anime */
@keyframes scorllBar-anime {
    0% { 
		height: 0%;
		transform: translate3d(0, -180%, 0);
	}
	40% { 
		height: 100%;
		transform: translate3d(0, 0%, 0);
	}
    100% { 
		height: 100%;
		transform: translate3d(0, 150%, 0); 
	}
}
.thThanks__scrollBar--line::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #fff;
	-webkit-animation: scorllBar-anime 1.7s ease-in-out 0s infinite;
    animation: scorllBar-anime 1.7s ease-in-out 0s infinite;
}
/* ------------------- thThanks__scrollBar circle */
.thThanks__scrollBar--circle {
	position: absolute;
	width: 210px;
	height: 105px;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
.thThanks__scrollBar--circleInner {
	position: absolute;
	width: 100%;
	padding-top: 100%;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
/* scorllBar-circle-anime */
@keyframes scorllBar-circle-anime {
    0% {transform: scale(0); opacity: 1;}
    38% {transform: scale(0); opacity: 1;}
    100% {transform: scale(1.3); opacity: 0;}
}
.thThanks__scrollBar--circleInner::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.1);
	border-radius: 50%;
	-webkit-animation: scorllBar-circle-anime 1.7s ease-in-out 0s infinite;
    animation: scorllBar-circle-anime 1.7s ease-in-out 0s infinite;
}
/* ------------------- thThanks__scrollBar is--hidden */
.thThanks__scrollBar.is--hidden {
	opacity: 0;
	visibility: hidden;
}
.thThanks__scrollBar.is--hidden .thThanks__scrollBar--line::after, 
.thThanks__scrollBar.is--hidden .thThanks__scrollBar--circleInner::after {
	animation-play-state: paused;
}
/* =========================================== thThanks__splash */
.thThanks__splash {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
}
.thThanks__splashLogo {
	position: absolute;
	width: 100px;
	left: 50%;
	transform: translate(-50%, -50%);
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(.41,.12,.26,.97);
	padding-bottom: 50px;
	top: 50%;
}
.thThanks__splashLogo--icon {
	padding-top: calc(146 / 200 * 100%);
	background-image: url(/campaign/2025/50th/0207/images/kv/splash/50th--logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	opacity: 0;
}
/* ------------------- thThanks__splashCopy */
.thThanks__splashCopy {
	position: absolute;
	width: calc(238 / 200 * 100%);
	left: 54%;
	transform: translate(-50%, 0%);
	bottom: 0;
}
.thThanks__splashCopy--inner {
	text-indent: -9999px;
	position: relative;
	height: 0;
	padding-top: calc(36 / 238 * 100%);
	overflow: hidden;
}
.thThanks__splashCopy--inner::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/campaign/2025/50th/0207/images/kv/splash/copy.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transform: translateY(120%);
	transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* ------------------- thThanks__splash js setting */
.thThanks__splash.is--active--1 .thThanks__splashLogo--icon {
	opacity: 1;
}
.thThanks__splash.is--active--1 .thThanks__splashCopy--inner::after {
	transform: translateY(0);
	transition-delay: 0.3s;
}
.thThanks__splash.is--active--2 .thThanks__splashLogo {
	top: 82px;
	transition-delay: .2s;
}
.thThanks__splash.is--active--2 .thThanks__splashCopy--inner::after {
	opacity: 0;
	transition-delay: 0s;
}
/* ------------------- header */
.header .header__title .white {
	opacity: 0;
}
.header.active ~ .content .thThanks__splash {
	opacity: 0;
}
/* ======================================================= sp */
@media only screen and (max-width: 768px) {
	/* ---------------------------------------- thThanks__scrollBar */
	.thThanks__scrollBar {
		position: fixed;
		width: 1px;
		height: 50px;
	}
	/* ------------------- thThanks__scrollBar circle */
	.thThanks__scrollBar--circle {
		position: absolute;
		width: 120px;
		height: 65px;
	}
	/* ================================================ splash logo */
	.thThanks__splash.is--active--2 .thThanks__splashLogo {
		top: 57px;
	}
	.thThanks__splashLogo {
		width: 76px;
		padding-bottom: 24px;
	}
	.thKv--4 {
		top: calc(-32 / 706 * 100%);
	}
	.thKv--5 {
		top: calc(464 / 706 * 100%);
	}
	.thKv--7 {
		top: -40px;
	}
	.thKv--8 {
		top: calc(490 / 706 * 100%);
	}
	.thKv--9 {
		top: calc(418 / 706 * 100%);
	}
	.thKv--10 {
		left: calc(504 / 850 * 100%);
	}
	.thKv--11 {
		top: calc(197 / 706 * 100%);
	}
}