@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(30px, -0.212rem + 8.91vw, 65px);/*375-768*/
	--cts-width: 1330px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/

	--cts-font: "Outfit", sans-serif;
	/* Outfit
	100 to 900
	*/

	--dp-h2-size: clamp(45px,calc(1.023rem + 3.97vw),75px);
	--dp-h3-size: clamp(15px,calc(.955rem + .73vw),22px);
	--dp-h4-size: clamp(1px,calc(.886rem + .48vw),20px);
	--dp-p-l-size: clamp(14px, 0.806rem + 0.3vw, 16px);/* 本文 Large */
	--dp-p-note-size: clamp(10px,calc(.597rem + .12vw),11px);/* 本文 Notes */
	--dp-price-s-size: clamp(16px,calc(.886rem + .48vw),20px);/* 価格 Small */
	--dp-price-tax-s-size: clamp(12px,calc(.693rem + .24vw),14px);/* 円・税 Small */

	--cts-font-size: clamp(12px, 0.636rem + 0.48vw, 16px);
	--cts-font-ls: .025em;/*letter-spacing*/

	/* color */
	--dp-color: #000;
	--dp-color2: #fff;
	--dp-color3: #333;
	--dp-color4: #808080;
	--cts-color: #D7DD00;
	--cts-color2: #0055B9;
	--cts-color3: #002063;
	--cts-color4: #0C397A;
	--cts-color5: #0060BD;
	--cts-bg: #0089DA;
	--cts-bg2: #BABABA;

}


/* LP共通汎用
____________________*/
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
.pagetop {
	display: none;	
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
	text-align: center;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.c-breadcrumb--gray {
	display: flex;
	align-items: center;
}
.bnr_link_win11_wrap {
    margin: 0 auto;
}
.bnr_link_win11 img {
    transition: opacity 0.3s;
    width: 300px;
}
.bnr_link_win11 img:hover {
	opacity: 0.75;
}
@media screen and (min-width: 768px), print and (min-width: 768px) {
	.c-breadcrumb__list.u-pc-width,
	.bnr_link_win11_wrap.u-pc-width {
		padding-inline: 30px;
	}
	.bnr_link_win11_wrap.u-pc-width {
		width: auto;
	}
}
@media screen and (max-width: 1000px) {
	.c-breadcrumb--gray {
		display: inherit;
	}
	.bnr_link_win11_wrap {
		width: 100%;
		margin: 10px auto 0;
		padding-block-end: 10px;
	}
	.bnr_link_win11 {
		width: 100%;
		margin-top: 0;
		text-align: center;
	}
}
.contents__wrap {
	width: 100%;
	margin-inline: auto;
	/* background: var(--cts-bg); */
	font-size: var(--cts-font-size);
	font-family: var(--dp-font-jp);
	color: #fff;
	overflow: hidden;
}
.contents__wrap img {
	max-width: 100%;
	vertical-align: bottom;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
.flash:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}
.contents__inner {
	width: 100%;
	max-width: var(--cts-width);
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
	position: relative;
}
.contents__inner .area_nav {
	color: var(--cts-color);
	font-family: var(--cts-font);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 4px;
	display: flex;
	align-items: center;
	gap: 30px;
	position: absolute;
	left: -60px;
	top: 190px;
	writing-mode: vertical-rl;
	z-index: 5;
}
.contents__inner .area_nav::after {
	content: "";
	width: 2px;
	height: 50px;
	background: var(--cts-color);
	position: relative;;
}
.contents__wrap .link__inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: clamp(5px,0.236rem + 1.38vw,12px);
	padding-inline: clamp(25px,0.737rem + 2vw,40px);
	margin-top: 10px;
	min-height: 50px;
	background: var(--dp-color);
	font-size: clamp(15px, 0.545rem + 1.61vw, 18px);
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	letter-spacing: var(--cts-font-ls);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
	border-radius: 4px;
	width: 100%;
}
.link__inner::before {
	position: absolute;
	content: "";
	width: 150%;
	height: 100%;
	top: 0;
	left: -168%;
	background: #fff;
	transform: skewX(-18deg);
	opacity: .3;
	z-index: -1;
}
.link__inner::after {
	content: "";
	position: absolute;
	top: calc(50% - 5px);
    right: 24px;
    width: 9px;
    height: 9px;
    border-right: 1px solid;
    border-bottom: 1px solid;
	border-color: #fff;
	transform: rotate(-45deg);
}
.link--over::before {
	animation: link-over ease-out .4s both;
}
.link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}


/* コンテンツ
____________________*/
.contents__wrap {
	padding-block-end: 0;
}
.section--ttl {
	color: var(--cts-color);
	font-family: var(--cts-font);
	font-weight: 600;
	font-size: var(--dp-h2-size);
	letter-spacing: 2.3px;
	position: relative;
	width: 100%;
}
.section--ttl__Summary {
	font-size: clamp(15px, 0.545rem + 1.61vw, 18px);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 1px;
	margin: 6px auto 0;
}
.contents__wrap .link__inner {
	font-size: clamp(14px, 0.852rem + 0.36vw, 17px);
	font-weight: 700;
	color: var(--cts-color3);
	background: var(--dp-color2);
	border-radius: 50px;
	padding-block:0;
    padding-inline: 0;
	margin-top: 20px;
	max-width: 255px;
}
.link__inner::before {
	background: var(--cts-color2);
}
.link__inner::after {
	border-color: var(--cts-color3);
}
.contents__wrap .link__inner span {
	position: relative;
	padding-block: clamp(5px,0.236rem + 1.38vw,14px);
    padding-inline: clamp(25px,0.737rem + 2vw,40px);
	width: 100%;
	height: 100%;
}
.contents__wrap .contents__link {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(305px, 16.932rem + 9.09vw, 380px);
    bottom: 0;
    padding: clamp(25px, 1.364rem + 0.85vw, 32px) 1em;
    color: var(--cts-color3);
    background: var(--dp-color2);
    border: 2px solid var(--cts-color3);
    border-radius: 50px;
    font-size: clamp(15px, 0.852rem + 0.36vw, 18px);
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0px 7px 0px var(--cts-color3);
    transition: all .3s;
	text-decoration: none;
}
.contents__wrap .contents__link::after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 30px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--cts-color3);
    border-bottom: 2px solid var(--cts-color3);
    transform: rotate(45deg);
}
.contents__wrap .contents__link:hover {
    bottom: -7px;
    box-shadow: 0 0 0 var(--cts-color3);
}
.contents__wrap .contents__link--entry {
  background: var(--cts-color);
  font-size: 20px;
  min-height: 100px;
}
.contents__wrap .contents__link--entry::after {
  transform: rotate(-45deg);
}
@media screen and (min-width: 768px), print {
  .contents__wrap .contents__link--entry {
    width: 520px;
    min-height: 150px;
    border-radius: 75px;
    font-size: 32px;
  }
  .contents__wrap .contents__link--entry::after {
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    border-right-width: 3px;
    border-bottom-width: 3px;
  }
}
  
.contents__wrap .contents {
	position: relative;
}
.accordion {
    margin-bottom: 10px;
}
.accordion__title {
    font-size: clamp(15px, 0.545rem + 1.61vw, 22px);
	font-weight: 500;
	text-align: left;
    padding: 28px 50px 28px 50px;
    color: var(--dp-color2);
	letter-spacing: 1px;
    background: rgba(255,255,255,0.1);
	border: 1px solid var(--dp-color2);
	border-radius: 10px;
    cursor: pointer;
    position: relative;
}
.accordion__title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 3px;
    background: var(--cts-color);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 1s;
}
.accordion__title::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 3px;
    background: var(--cts-color);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 1s;
}
.accordion__title.show::before {
    opacity: 0;
}
.accordion__title.show::after {
    transform: translateY(-50%) rotate(180deg);
}
.yellow .accordion__title {
	color: var(--cts-color3);
    font-weight: 700;
    background: var(--cts-color);
    border: 2px solid var(--cts-color3);
}
.yellow .accordion__title::before, .yellow .accordion__title::after {
    background: var(--cts-color3);
}
.accordion__content {
    display: none;
	background: rgba(255,255,255,0.1);
	border: 1px solid var(--dp-color2);
	border-radius: 10px;
	margin-top: 2px;
	padding: 30px;
}
.close_box {
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
}
.close_btn {
	display: block;
	position: relative;
	cursor: pointer;
}

.close_btn::before, .close_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 3px;
	height: 25px;
	background: var(--cts-color);
}

.close_btn::before {
	transform: translate(-50%,-50%) rotate(45deg);
}

.close_btn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
.close_btn span {
	font-size: 15px;
	display: block;
	padding: 0 0 0 35px;
}
#feature2 {
	height: 1px;
	display: block;
	padding-top: 50px;
	margin-top: -50px;
}
/* sub_nav
____________________*/
.sub_nav_wrap {
	display: none;
	background: none;
}
.sub_nav_wrap.fixed {
	position: fixed;
	top: 0;
	padding: 0;
	width: 100%;
	z-index: 999;
}

.sub_nav__inner {
	padding: 0;
}
.submenu__list {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 18px 0;
}
.submenu__list .menu__item a {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	width: 215px;
    bottom: 0;
    padding: clamp(18px, 0.926rem + 0.85vw, 25px) 1em;
    color: var(--cts-color3);
    background: var(--dp-color2);
    border: 2px solid var(--cts-color3);
    border-radius: 50px;
    font-size: clamp(12px, 0.652rem + 0.36vw, 14px);
    font-weight: 900;
    letter-spacing: .08em;
    box-shadow: 0 7px 0 var(--cts-color3);
    transition: all .3s;
    text-align: center;
	text-decoration: none;
}
.submenu__list .menu__item.current a {
	background: var(--cts-color);
}
.submenu__list .menu__item a::before, .submenu__list .menu__item a::after {
    content: "";
    position: absolute;
}
.submenu__list .menu__item a::before {
	width: 28px;
    height: 28px;
    bottom: -15px;
    border: 2px solid var(--cts-color3);
    border-radius: 50%;
    background: var(--cts-color);
}
.submenu__list .menu__item a::after {
    width: 7px;
    height: 7px;
    bottom: -7px;
    left: 50%;
    border-top: 2px solid var(--cts-color3);
    border-right: 2px solid var(--cts-color3);
    transform: translate(-50%, -50%) rotate(135deg);
}
.submenu__list .menu__item a:hover {
    bottom: -7px;
    box-shadow: 0 0 0 var(--cts-color3);
}
.submenu-btn {
	display: none;
}
/* スライダー */
.contents__wrap .contents .bg_text {
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
    position: absolute;
    top: 60px;
    left: 0;
	z-index: 3;
}
  /* content4つをまとめたスライドブロック */
  .slideshow {
	display: flex;
	margin-right: 6em;
	-webkit-animation: loop-slide 30s infinite linear 1s both;
	animation: loop-slide 30s infinite linear 1s both;
  }
  .slideshow img {
	width: 100%;
	max-width: inherit;
	height: 193px;
  }
  @-webkit-keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }
  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }
/* mv
____________________*/
.contents--mv {
	width: 100%;
	padding: 0;
	position: relative;
	background: var(--cts-bg);
}
.contents--mv img {
	width: 100%;
	padding: 0;
	position: relative;
	vertical-align: bottom;
}
.contents--mv .scrolldown1 {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.05em;
    padding-bottom: 10px;
	z-index: 10;
}
.contents--mv .scrolldown1::after {
    content: "";
    height: 155px;
    width: 1px;
    background: #fff;
    animation: scrollbar 2s infinite;
    position: absolute;
    bottom: -155px;
    left: 50%
}
@keyframes scrollbar {
    0% {
        height: 155px;
        bottom: -155px
    }

    50% {
        height: 0;
        bottom: -155px
    }

    51% {
        height: 0;
        bottom: 0
    }

    100% {
        bottom: -155px;
        height: 155px
    }
}
/* read
____________________*/
.contents--read {
	position: relative;
	z-index: 1;
	background: var(--cts-bg);
}
.read {
	padding-block-start: 80px;
	padding-block-end: 80px;
}
.read .inner_flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
}
.read_txt {
	font-size: clamp(16px, 0.545rem + 1.61vw, 24px);
	font-weight: 500;
	line-height: 1.7;
    letter-spacing: 2px;
}
.read_note {
	font-size: clamp(13px, 0.345rem + 1.61vw, 17px);
	font-weight: 500;
	letter-spacing: 1.5px;
	margin: 1em 0 0;
}
/* pickup
____________________*/
.contents--pickup {
	position: relative;
	z-index: 1;
	background: rgb(0,114,218);
	background: linear-gradient(0deg, rgba(0,114,218,1) 30%, rgba(0,177,241,1) 100%);
	background-position: 0 185px;
}
.contents--pickup::before {
	content: "";
	width: 100%;
	height: 185px;
	background: rgb(0,177,241);
	background: linear-gradient(0deg, rgba(0,177,241,1) 30%, rgba(0,114,218,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.contents--pickup::after {
	content: "";
	width: 100%;
    height: 203px;
    background: url(../../gamepc/img/and-galleria-summer-camp-2024/bg_pickup.webp) repeat-x center bottom / contain;
    position: absolute;
    bottom: 0;
    left: 0;
	z-index: 2;
}
.contents--pickup .slideshow img {
	width: 2040px;
}
.pickup {
	padding-block-start: 185px;
	padding-block-end: 220px;
	position: relative;
	z-index: 5;
}
.pickup_list {
	width: 100%;
	max-width: 1061px;
	margin: 40px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 40px;
	box-sizing: border-box;
	position: relative;
}
.pickup_list li {
	width: 100%;
	max-width: 327px;
}
.pickup_list li a {
	display: block;
}
.pickup_list li a img {
	width: 100%;
	height: auto;
	transition: transform .3s;
}
.pickup_list li a img:hover {
	transform: scale(1.05);
}
.pickup_info_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 50px 0 0;
}
.pickup_info_txt {
	font-size: clamp(14px, 0.445rem + 1.61vw, 18px);
	font-weight: 700;
	letter-spacing: 2.3px;
}
.present_info_date {
	font-size: clamp(18px, 0.745rem + 1.61vw, 24px);
	font-weight: 700;
	letter-spacing: 2px;
	margin: 10px 0 0;
}
.pickup_note_ttl {
	font-size: clamp(14px, 0.445rem + 1.61vw, 15px);
	font-weight: 500;
	letter-spacing: 1.5px;
	padding: 3px 18px;
	margin: 40px 0 0;
	border: 1px solid var(--dp-color2);
	border-radius: 9999px;
	display: inline-block;
	box-sizing: border-box;
}
.pickup_note {
	font-size: clamp(12px, 0.345rem + 1.61vw, 13px);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 1.5px;
	margin: 15px 0 0;
}
.pickup_entry {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.cp-end {
	flex-direction: column;
	align-items: center;
}
.cp-end .contents__link--entry {
	color: #b5b5b5;
	background: #ececec;
	box-shadow: none;
	pointer-events: none;
}
.cp-end .contents__link--entry:after {
	content: none;
}
.pickup .accordion {
	margin: 50px 0 0;
}

.pickup .accordion .accordion__title {
	color: var(--cts-color3);
	font-weight: 700;
	background: var(--cts-color);
	border: 2px solid var(--cts-color3);
}
.pickup .accordion .accordion__title::before,
.pickup .accordion .accordion__title::after {
	background: var(--cts-color3);
}
.pickup .accordion__content {
	border: 2px solid var(--cts-color3);
}
/* campaign
____________________*/
.contents--campaign {
	position: relative;
	z-index: 1;
	background: #001245 url(../../gamepc/img/and-galleria-summer-camp-2024/bg_canpaign.webp) repeat-y center top /cover;
}
.contents--campaign .slideshow img {
	width: 2826px;
}
.campaign {
	padding-block-start: 185px;
	padding-block-end: 150px;
	position: relative;
	z-index: 5;
}
.campaign_txt_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 55px;
	margin: 50px 0 0;
}
.campaign_logo {
	width: 100%;
	max-width: 700px;
}
.campaign_txt__wrap .campaign_txt_1 {
	color: var(--cts-color3);
	font-size: clamp(14px, 0.445rem + 1.61vw, 18px);
	font-weight: 700;
	letter-spacing: 1.5px;
	background: var(--cts-color);
	border-radius: 9999px;
	display: inline-block;
	padding: 13px 19px;
	line-height: 1;
}
.campaign_txt__wrap .campaign_txt_2 {
	font-size: clamp(18px, 0.445rem + 1.61vw, 28px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1.5px;
	margin: 30px 0 0;
}
.campaign_txt__wrap .campaign_txt_3 {
	font-size: clamp(13px, 0.445rem + 1.61vw, 15px);
	font-weight: 500;
	margin: 30px 0 0;
}
.campaign_howto {
	margin: 70px 0 0;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.campaign_howto .howto_inner:nth-of-type(n+2) {
	margin: 70px 0 0;
}
.campaign_howto h4 {
	font-size: clamp(15px, 0.445rem + 1.61vw, 16px);
	font-weight: 500;
	letter-spacing: 1.5px;
	text-align: center;
	padding: 3px 30px;
	border: 1px solid var(--dp-color2);
	border-radius: 9999px;
	display: inline-block;
	box-sizing: border-box;
}
.campaign_howto .campaign_date {
	width: 100%;
	max-width: 873px;
	margin: 30px auto 0;
}
.campaign_howto .campaign_date_note {
	font-size: clamp(13px, 0.345rem + 1.61vw, 15px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 1.5px;
	text-align: center;
	margin: 20px 0 0;
}
.campaign_howto .method {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 30px 0 0;
}
.campaign_howto .method li {
	width: 100%;
	text-align: left;
	position: relative;
	padding-bottom: 30px;
	box-sizing: border-box;
}
.campaign_howto .method li:nth-of-type(1) ,
.campaign_howto .method li:nth-of-type(2) {
	margin-right: 35px;
	padding-right: 35px;
	border-right: 3px solid var(--cts-color4);
}
.campaign_howto .method li .howto_image {
	width: 100%;
	height: 152px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.campaign_howto .method li .howto_image img {
	max-width: 100%;
}
.campaign_howto .method li h5 {
	color: var(--cts-color);
	font-size: clamp(16px, 0.745rem + 1.61vw, 18px);
	font-weight: 500;
	margin: 30px 0 0;
}
.campaign_howto .method li p {
	font-size: clamp(15px, 0.745rem + 1.61vw, 16px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 1px;
	margin: 10px 0 0;
}
.campaign_howto .btn__box {
	margin: 40px 0 0;
}
.campaign_howto .btn__box .contents__link {
	counter-reset: var(--dp-color2);
	width: 100%;
	padding: clamp(30px, 1.364rem + 0.85vw, 32px) 1em;
	background-color: var(--cts-color3);
	border-color: var(--cts-color);
	box-shadow: 0px 7px 0px var(--cts-color);
	box-sizing: border-box;
}
.campaign_howto .btn__box .contents__link span {
	color: var(--dp-color2);
}
.campaign_howto .btn__box .contents__link::after {
	border-color: #fff;
	transform: rotate(-45deg);
}
.campaign_howto .btn__box .contents__link:hover {
    bottom: -7px;
    box-shadow: 0 0 0 var(--cts-color);
}
.campaign_howto .widget_wrap {
	width: 100%;
	max-width: 550px;
	margin: 50px 0;
	margin-left: auto;
	margin-right: auto;
}
.campaign_howto .widget_wrap .widget_txt {
	font-size: clamp(13px, 0.345rem + 1.61vw, 15px);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 1.5px;
    text-align: center;
}
.campaign .accordion {
	margin: 50px 0 0;
}
.accordion__bnr_list_l {
	width: 100%;
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 50px;
}
.accordion__bnr_list_l li {
	width: 100%;
	max-width: 316px;
}
.accordion__bnr_list_l.row4 {
	gap: 17px;
}
.accordion__bnr_list_l.row4 li {
	max-width: 249px;
}
.campaign .cp_end {
	position: relative;
}
.accordion + .cp_end {
	margin: 60px 0 0;
}
.campaign .cp_end::before {
	content: "";
    background: rgba(229, 229, 229, .9);
    position: absolute;
    top: -20px;
    left: -80px;
    z-index: +6;
    width: 100%;
    height: 100%;
    padding: 20px 80px;
    box-sizing: unset;
}
.campaign .cp_end .cp_end__txt_wrap {
    width: 100%;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: +7;
}
.campaign .cp_end .cp_end__txt_wrap .cp_end__txt {
	color: var(--cts-color4);
	font-size: clamp(20px, 0.025rem + 4.61vw, 34px);
    font-weight: 700;
    text-align: center;
	line-height: 1.8;
    letter-spacing: .1em;
	text-align: center;
}
/* present
____________________*/
.contents--present {
	position: relative;
	z-index: 1;
	background: rgb(0,85,185);
	background: linear-gradient(0deg, rgba(0,85,185,1) 30%, rgba(0,117,197,1) 100%);
	background-position: 0 185px;
}
.contents--present .slideshow img {
	width: 2339px;
}
.contents--present::before {
	content: "";
	width: 100%;
	height: 185px;
	background: rgb(0,117,197);
	background: linear-gradient(0deg, rgba(0,117,197,1) 30%, rgba(0,85,185,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.present {
	max-width: 1631px;
	padding-block-start: 185px;
	padding-block-end: 150px;
	position: relative;
	z-index: 5;
}
.present .section--ttl {
	text-align: center;
}
.present .section--ttl__Summary {
	text-align: center;
}
.present_list {
	margin: 100px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 100px 20px;
}
.present_list .present_list_item {
	width: 100%;
	max-width: 487px;
	background: var(--cts-bg2);
	border-radius: 10px;
}
.present_ttl_wrap {
	position: relative;
	padding: 20px 20px 20px 140px;
	box-sizing: border-box;
	background: var(--dp-color2);
	border-radius: 10px 10px 0 0;
}
.present_ttl_wrap .present_ttl_icon {
	position: absolute;
	left: 0;
	bottom: 0;
}
.present_ttl {
	color: var(--dp-color3);
}
.collab_name {
	font-size: clamp(15px, 0.445rem + 1.61vw, 16px);
	font-weight: 700;
	letter-spacing: 1.5px;
}
.item_name {
	font-size: clamp(17px, 0.645rem + 1.61vw, 23px);
	font-weight: 700;
	letter-spacing: 2px;
	margin: 5px 0 0;
}
.present_image_wrap {
	position: relative;
}
.present_image_wrap .present_image {
	border-radius: 0 0 10px 10px;
	position: relative;
	max-width: inherit;
    width: 100%;
}
.present_image_wrap .detail {
	color: var(--cts-color5);
	font-size: clamp(13px, 0.245rem + 1.61vw, 16px);
	font-weight: 700;
	line-height: 1.3;
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 5;
}
.present_list_item:nth-of-type(7) .present_image_wrap .detail {
	font-size: clamp(10px, 0.245rem + 1.61vw, 14px);
	line-height: 1.3;
	text-indent: -2.3em;
    margin-left: 2.5em;
}
.present_image_wrap .stock {
	color: var(--cts-color5);
	font-size: clamp(50px, 0.245rem + 5.61vw, 70px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 5;
}
.present_image_wrap .stock span {
	font-size: clamp(13px, 0.245rem + 1.61vw, 24px);
	font-weight: 500;
	letter-spacing: 2px;
}
.present_list.double {
	margin: 60px 0 0;
}
.present_list.double .present_list_item {
	max-width: 730px;
}
.present_list.double .present_ttl_wrap {
	padding: 20px 20px 20px 225px;
}
.present_list.double .present_ttl_icon {
	left: 40px;
}
.present_list.double .item_name {
	font-size: clamp(15px, 0.445rem + 1.61vw, 18px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 2px;
	margin: 0;
}
.present_list.double .present_image_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px 20px 40px;
}
.present_list.double .present_image_wrap .detail {
	position: relative;
    display: flex;
    align-items: center;
	gap: 10px;
	bottom: inherit;
    left: inherit;
}
.present_list.double .present_image_wrap .detail .dp_point {
	color: var(--dp-color3);
	font-size: clamp(13px, 0.345rem + 1.61vw, 16px);
	font-weight: 700;
	letter-spacing: 2px;
	padding: 7px 18px;
	border: 2px solid var(--dp-color3);
	border-radius: 9999px;
}
.present_list.double .present_image_wrap .detail .dp_price {
	color: var(--dp-color3);
	font-size: clamp(53px, 0.245rem + 5.61vw, 70px);
	font-weight: 700;
}
.present_list.double .present_image_wrap .detail .dp_price span {
	font-size: clamp(30px, 0.245rem + 5.61vw, 40px);
	font-weight: 700;
}
.present_list.double .stock {
    position: relative;
    right: inherit;
    bottom: inherit;
}
.present_entry {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
/* modal */
.hide-area{
	display: none;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}
.modaal-video .modaal-inner-wrapper{
	padding:0;
}
/* recommend
____________________*/
.contents--recommend{
	position: relative;
	z-index: 1;
	background: rgb(0,114,218);
	background: linear-gradient(0deg, rgba(0,114,218,1) 30%, rgba(0,177,241,1) 100%);
	background-position: 0 185px;
}
.contents--recommend .slideshow img {
	width: 3429px;
}
.contents--recommend::before {
	content: "";
	width: 100%;
	height: 185px;
	background: rgb(0,177,241);
	background: linear-gradient(0deg, rgba(0,177,241,1) 30%, rgba(0,114,218,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.contents--recommend::after {
	content: "";
	width: 100%;
    height: 203px;
    background: url(../../gamepc/img/and-galleria-summer-camp-2024/bg_pickup.webp) repeat-x center bottom / contain;
    position: absolute;
    bottom: 0;
    left: 0;
	z-index: 2;
}
.recommend {
	padding-block-start: 185px;
	padding-block-end: 220px;
	position: relative;
	z-index: 5;
}
.tabs {
    display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 35px 22px;
    cursor: pointer;
	margin: 50px 0 0;
}

.tab {
	width: 283px;
	display: flex;
	justify-content: center;
	position: relative;
	transition: all .3s linear 0;
}
.tab::after {
	content: "";
	position: absolute;
	bottom: -13px;
	width: 62px;
	height: 3px;
	display: block;
	background: var(--dp-color4);
}
.tab .tab-image {
	width: 100%;
	padding: 11px 19px;
	height: auto;
	box-sizing: border-box;
}
.tab.active .tab-image {
	width: 100%;
	padding: 0;
	height: auto;
	position: relative;
}
.tab.active::after {
	content: "";
	position: absolute;
	bottom: -22px;
	width: 100%;
	height: 5px;
	display: block;
	background: var(--cts-color);
}
.tab-pane {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.tab-pane.active {
	display: block;
	opacity: 1;
}

.recommend .recommend--list {
	width: 100%;
	margin: 65px auto 70px;
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
	gap: 24px 29px;
}
.recommend .recommend--list > li {
	width: 100%;
	max-width: 380px;
	border: 1px solid var(--dp-color2);
	border-radius: 10px;
	padding: 25px 35px;
	box-sizing: border-box;
}
.recommend .recommend--list > li .lineinappear {
	padding: 45px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.recommend .recommend--list > li .model_catch {
	width: 100%;
	text-align: center;
}
.recommend .recommend--list > li .model_catch p {
	display: inline;
	color: #fff;
    font-size: clamp(17px, 0.852rem + .66vw, 20px);
	font-weight: 700;
    line-height: 1.9;
    padding: 0 5px;
	text-align: center;
}
.recommend .recommend--list > li .model_image {
	width: 255px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: none;
}
.recommend .recommend--list > li .model_image figure {
	max-width: 100%;
}
.recommend .recommend--list > li .model__detail {
	width: 100%;
}
.model__name {
	width: 100%;
	color: #fff;
	font-size: clamp(17px, 0.852rem + .86vw, 22px);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.4;
	text-align: center;
	margin-bottom: 15px;
}
.model__txt {
	margin-top: 15px;
	text-align: center;
}
.model__spec-list {
	color: #fff;
	font-size: clamp(13px, 0.245rem + 1.61vw, 16px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.8px;
}
.model__spec-list .model__spec-item .spec__data {
	display: inline-block;
}
.model__price_block {
	width: 100%;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.model__price {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}
.model__price .model__tax {
	font-size: 18px;
}
.accordion_list_ttl {
	font-size: clamp(15px, 0.652rem + .66vw, 18px);
	font-weight: 700;
    line-height: 1.9;
	font-weight: 500;
	text-align: left;
}
.link_list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 10px 0 0;
	border-top: 2px solid #bbb;
	border-bottom: 2px solid #bbb;
}
.link_list li {
	width: 100%;
	border-bottom: 1px solid #bbb;
}
.link_list li:last-of-type {
	border-bottom: none;
}
.link_list li a {
	text-decoration: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
	padding: 25px 0;
}
.link_list li .txt_block {
	width: 100%;
	position: relative;
	padding-right: 85px;
}
.link_list li .txt_block:before {
	content: "";
    width: 10px;
    height: 10px;
	position: absolute;
	top: 50%;
    right: 26px;
	z-index: +1;
    border-top: 2px solid var(--cts-color3);
    border-right: 2px solid var(--cts-color3);
    transform: translate(0%, -50%) rotate(45deg);
}
.link_list li .txt_block:after {
	content: "";
	width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dp-color2);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0%, -50%) ;
}
.link_list li a p {
	color: var(--dp-color2);

}
.txt_block .pc_category {
	font-size: clamp(13px, 0.652rem + .66vw, 15px);
	font-weight: 500;
    line-height: 1.7;
}
.txt_block .link_ttl {
	font-size: clamp(15px, 0.232rem + 2.66vw, 20px);
	font-weight: 500;
    line-height: 1.7;
}
.accordion__bnr_list_m {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 17px;
}
.accordion__bnr_list_m li {
	width: 100%;
	max-width: 198px;
}
.accordion__bnr_list_s {
	margin: 60px 0 0;
	display: flex;
	justify-content: center;
	gap: 25px;
}
.accordion__bnr_list_s li {
	width: 100%;
	max-width: 257px;
}
/* top-anchor
____________________*/
.contents--top-anchor {
	position: fixed !important;
	padding: 0;
	bottom: max(2.5vw,30px);
	right: max(2.5vw,30px);
	z-index: 10;
	transition: all .3s;
}
.contents--top-anchor.is-active-anc {
	opacity: 1;
	visibility: visible;
}
.top-anchor {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(90px, 1.978rem + 10.56vw, 187px);/* 375-1920 */
	height: clamp(90px, 1.978rem + 10.56vw, 187px);/* 375-1920 */
	top: 0;
	transition: all .3s;
}
.top-anchor:hover {
	top: -10px;
}
/* CP終息対応
____________________*/
.cp-end {
	flex-direction: column;
	align-items: center;
}
.cp-end .contents__link--entry {
	color: #b5b5b5;
	background: #ececec;
	box-shadow: none;
	pointer-events: none;
}
.cp-end .contents__link--entry:after {
	content: none;
}
.cp-end .cp-end__text {
	color: var(--cts-color);
	font-size: clamp(13px, 0.245rem + 1.61vw, 18px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 20px;
}
@media (max-width: 768px) {/*375-768*/
/* コンテンツ
____________________*/
.pc {
	display: none !important;
}
.contents--mv .pc {
	display: none !important;
}
.sp {
	display: block !important;
}
.contents--mv .sp {
	display: block !important;
}
#feature2 {
	height: 1px;
	display: block;
	padding-top: 80px;
	margin-top: -80px;
}
/* sub_nav
____________________*/
.sub_nav_wrap {
	background: var(--cts-color3);
}
.sub_nav__inner {
	position: relative;
	z-index: 10;
	height: 50px;
}
.sub_nav__inner::after {
	content: '';
    position: absolute;
	z-index: -1;
	top: 35px;
	left: 50%;
    transform: translate(-50%,-50%);
	background: url(../../gamepc/img/and-galleria-summer-camp-2024/img_polygon.webp) no-repeat center center/100%;
	width: 120px;
	height: 64px;
}
.header__menu {
	position: absolute;
	z-index: 5;
	top: 50px;
	width: 100%;
	height: calc(100vh - 50px);
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}
.sub_nav__inner.active .header__menu {
	opacity: 1;
	visibility: visible;
	background: var(--cts-color3);
}
.submenu__list {
	flex-direction: column;
	gap: 20px;
	border-top: 1px solid #fff;
	padding-top: 35px;
	padding-inline:var(--cts-gutter) ;
}
.submenu__list .menu__item a {
	color: var(--dp-color2);
	background: none;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #fff;
	border-radius: 9999px;
	width: 100%;
	min-height: 53px;
	padding: inherit;
	position: relative;
}
.submenu__list .menu__item a::before {
	content: none;
}
.submenu__list .menu__item a::after {
	content: "";
    position: absolute;
    top: calc(50% - 10px);
    right: 20px;
	left: inherit;
    width: 10px;
    height: 10px;
    border-right: 2px solid;
    border-top: 2px solid;
    border-color: #fff;
	transform: rotate(135deg);
    z-index: 10;
}
.submenu-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 5px;
	cursor: pointer;
	box-sizing: border-box;
}
.submenu-btn span:nth-child(-n+3) {
	position: absolute;
	display: block;
	width: 33px;
	height: 2px;
	background: #fff;
}
.submenu-btn span:nth-child(1) {
	top: 10px;
	transition: all .2s ease;
}
.sub_nav__inner.active .submenu-btn span:nth-child(1) {
	top: 20px;
	transform: rotate(30deg);
}
.submenu-btn span:nth-child(2) {
	top: 18px;
	transition: opacity .2s ease;
}
.sub_nav__inner.active .submenu-btn span:nth-child(2) {
	opacity: 0;
}
.submenu-btn span:nth-child(3) {
	top: 26px;
	transition: all .2s ease;
}
.sub_nav__inner.active .submenu-btn span:nth-child(3) {
	top: 20px;
	transform: rotate(-30deg);
}
.submenu-btn span:nth-child(4) {
	font-size: 10px;
	color: #fff;
	display: block;
	margin: 25px 0 0;
}
.submenu-btn span:nth-child(4):after {
	content: "MENU";
	font-size: 11px;
	letter-spacing: 1.5px;
}
.sub_nav__inner.active .submenu-btn span:nth-child(4):after {
	content: "CLOSE";
	letter-spacing: normal;
}
/* スライダー
____________________*/
.contents__wrap .contents .bg_text {
	top: 30px;
}
.slideshow img {
	height: 63px;
}
/* mv
____________________*/
.scrolldown1 {
	display: none;
}
/* read
____________________*/
.read {
	padding-block-start: 30px;
    padding-block-end: 30px;
}
.read .inner_flex {
	flex-direction: column;
	gap: 15px;
}
.read_logo{
	width: 100%;
	max-width: 90px;
}
.read_txt_wrap {
	text-align: center;
}
/* pickup
____________________*/
.contents--pickup::after {
	content: none;
}
.contents--pickup .slideshow img {
	width: 665px;
}
.pickup {
    padding-block-start: 60px;
    padding-block-end: 60px;
}
.pickup_list {
	margin: 20px auto 0;
	gap: 20px 40px;
}
.pickup_info_flex {
	flex-direction: column;
	gap: 20px;
	margin: 20px 0 0;
}
/* campaign
____________________*/
.contents--campaign .slideshow img {
	width: 921px;
}
.campaign {
	padding-block-start: 60px;
	padding-block-end: 50px;
}
.campaign_txt_flex {
	flex-direction: column;
	gap: 15px;
	margin: 30px 0 0;
}
.campaign_txt__wrap .campaign_txt_1 {
	letter-spacing: 1px;
}
.campaign_txt__wrap .campaign_txt_2 {
	margin: 15px 0 0;
}
.campaign_txt__wrap .campaign_txt_3 {
    margin: 15px 0 0;
}
.campaign_howto {
	margin: 50px 0 0;
}
.campaign_howto .howto_inner:nth-of-type(n+2) {
	margin: 50px 0 0;
}
.campaign_howto .campaign_date_note {
	text-align: left;
}
.campaign_howto .method {
	flex-direction: column;
	margin: 20px 0 0;
}
.campaign_howto .method li {
	width: 100%;
	padding-bottom: 20px;
}
.campaign_howto .method li:nth-of-type(1), .campaign_howto .method li:nth-of-type(2) {
	margin-right: 0;
    padding-right: 0;
    border-right: none;
	border-bottom: 3px solid var(--cts-color4);
}
.campaign_howto .method li:last-child {
	padding: 0;
}
.campaign_howto .method li h5 {
	margin: 10px 0 0;
}
.campaign_howto .btn__box {
	margin: 50px 0 0;
}
.accordion__bnr_list_l {
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.accordion__bnr_list_l li {
	max-width: 480px;
}
.campaign .cp_end::before {
    top: -20px;
    left: -20px;
    padding: 20px 20px 0;
}
.campaign .cp_end .cp_end__txt_wrap {
	top: 5%;
}
/* present
____________________*/
.contents--present .slideshow img {
	width: 761px;
}
.present {
	padding-block-start: 60px;
	padding-block-end: 60px;
}
.present_ttl_wrap {
	padding: 50px 15px 15px 15px;
}
.present_ttl_wrap .present_ttl_icon {
	width: 95px;
	top: -15px;
	left: 50%;
	transform: translate(-50%,-50%);
}
.present_ttl {
	text-align: center;
}
.present_list.double .present_ttl_wrap {
	padding: 80px 35px 15px 35px;
}
.present_list.double .present_ttl_icon {
	width: 142px;
	top: 40px;
	left: 50%;
}
.present_list.double .present_image_wrap {
	flex-direction: column;
	padding: 20px 0;
}
.present_list.double .present_image_wrap .detail {
	width: 100%;
	flex-direction: column;
	border-bottom: 1px solid #707070;
	margin-bottom: 15px;
	padding-bottom: 20px;
}
/* recommend
____________________*/
.contents--recommend::after {
	content: none;
}
.contents--recommend .slideshow img {
	width: 1117px;
}
.recommend {
    padding-block-start: 60px;
    padding-block-end: 60px;
}
.tabs {
	margin: 30px 0 0;
	gap: 20px 10px;
}
.tab {
	width: calc((100% - 10px) / 2);
}
.tab .tab-image {
	padding: 6px 14px;
}
.tab::after {
	width: 30%;
	bottom: -3px;
}
.tab.active .tab-image {
	width: 100%;
}
.tab.active::after {
	width: 90%;
	height: 3px;
	bottom: -10px;
}
.recommend .recommend--list {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 29px;
}
.link_list li a {
	padding: 15px 0;
	flex-direction: column;
	gap: 5px;
}
.link_list li a .txt_block :before {
    width: 9px;
    height: 9px;
}
.link_list li a .txt_block :after {
	width: 50px;
	height: 50px;
}
/* top-anchor
____________________*/
.contents--top-anchor {

	bottom: max(2.5vw,20px);
	right: max(2.5vw,20px);
}
}
@media (max-width: 479px) {
	.contents--mv .pc {
		display: none;
	}
	.contents--mv .sp {
		display: block;
	}
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}

/*　Y軸（横へ） */
.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}

/* Z 軸（左へ） */
.rotateLeftZ{
	animation-name:rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}

/*　Z 軸（右へ） */
.rotateRightZ{
	animation-name:rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:var(--cts-color);/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:var(--cts-color);/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cts-color);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*右から*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*下から*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*上から*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}




/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}

/*==================================================
カウントダウンタイマー
===================================*/
.contents--mv:has(+ .contents--timer:not(.is-time-up)) {
  background: var(--cts-color);
}
.contents--timer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--cts-color3);
  background: var(--cts-color);
  z-index: 10;
  padding: min(30/1400*100vw, 30px) 0;
}
.summer-camp-timer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-weight: bold;
  letter-spacing: 0.06em;
  font-size: clamp(24px, 32/1400*100vw, 32px);
}
.summer-camp-timer__time {
  font-size: clamp(70px, 100/1400*100vw, 100px);
  margin-left: 1em;
}
.summer-camp-timer__time .yyc-day.is-zero-start::before {
  content: "0";
}
.summer-camp-timer__time .yyc-day-text {
  font-size: 0.75em;
}
.summer-camp-timer__time .yyc-hou {
  margin-left: 0.5em;
}
.end_text {
	font-size: clamp(24px, 32/1400*100vw, 32px);
	font-weight: 700;
}

@media screen and (max-width: 768px) {
  .contents--timer {
    height: auto;
    padding: 15px;
  }
  .summer-camp-timer {
    font-size: clamp(20px, 0.545rem + 1.61vw, 28px);
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .summer-camp-timer__time {
    font-size: min(44/375*100vw, 70px);
    margin-left: 0;
  }
}