@charset "UTF-8";

:root {
	--color-grn: #4ba67b;
	--color-gry: #78828b;
	--color-pink: #ff6994;
}
	/* hacks */
	@media (min-width: 769px)	{ #phgn_2608 .sp { display:none!important; }}
	@media (max-width: 768px)	{ #phgn_2608 .pc { display:none!important; }}

	#phgn_2608 img		{ width:100%; height:auto; display:block; vertical-align:bottom; }
	#phgn_2608 .ma		{ margin-left:auto; margin-right:auto;				}
	#phgn_2608 .pr		{ position:relative;								}
	#phgn_2608 .pa		{ position:absolute;								}
	#phgn_2608 .pf		{ position:fixed;									}
	#phgn_2608 .ps		{ position:sticky;									}
	#phgn_2608 .db		{ display:block;									}
	#phgn_2608 .di		{ display:inline;									}
	#phgn_2608 .dib		{ display:inline-block;								}
	#phgn_2608 .dn		{ display:none;										}
	#phgn_2608 .df		{ display:flex;										}
	#phgn_2608 .fww		{ flex-wrap:wrap;									}
	#phgn_2608 .fwnw		{ flex-wrap:nowrap;									}
	#phgn_2608 .fdrr		{ flex-direction: row-reverse;						}
	#phgn_2608 .jcc		{ justify-content:center;							}
	#phgn_2608 .jcsb		{ justify-content:space-between;					}
	#phgn_2608 .jcfs		{ justify-content:flex-start;						}
	#phgn_2608 .jcfe		{ justify-content:flex-end;							}
	#phgn_2608 .aic		{ align-items:center;								}
	#phgn_2608 .aifs		{ align-items:flex-start;							}
	#phgn_2608 .aife		{ align-items:flex-end;								}
	#phgn_2608 .acsb		{ align-content:space-between;						}
	#phgn_2608 .oxa		{ overflow-x:auto;									}
	#phgn_2608 .oxs		{ overflow-x:scroll;								}
	#phgn_2608 .oxh		{ overflow-x:hidden;								}
	#phgn_2608 .oya		{ overflow-y:auto;									}
	#phgn_2608 .oys		{ overflow-y:scroll;								}
	#phgn_2608 .oyh		{ overflow-y:hidden;								}
	#phgn_2608 .vv		{ visibility:visible;								}
	#phgn_2608 .vh		{ visibility:hidden;								}
	#phgn_2608 .vc		{ visibility:collapse;								}
	#phgn_2608 .tl		{ text-align:left;									}
	#phgn_2608 .tc		{ text-align:center;								}
	#phgn_2608 .tr		{ text-align:right;									}
	#phgn_2608 .tj		{ text-align:justify;								}
	#phgn_2608 .cp		{ cursor:pointer;									}
	#phgn_2608 .hac		{ left:50%; transform:translateX(-50%); 			}
	#phgn_2608 .vam		{ top :50%; transform:translateY(-50%); 			}
	#phgn_2608 .wf		{ max-width:1400px; width:100%;						}
	#phgn_2608 sup		{vertical-align:super!important; font-size:18px!important; }


/* ----------------------------
	animation
---------------------------- */

	#phgn_2608 .slidein_bottom	{ animation:SlideIn 1.6s; }
	@keyframes SlideIn
	{
		  0% { 	opacity:0; transform:translateY(64px); }
		100% { 	opacity:1; transform:translateY(0); }
	}
	#phgn_2608 .slidein_left{ animation:SlideIn_l 1.6s; }
	@keyframes SlideIn_l
	{
		  0% { 	opacity:0; transform:translateX(64px); }
		100% { 	opacity:1; transform:translateX(0); }
	}
	#phgn_2608 .slidein_right { animation:SlideIn_r 1.6s; }
	@keyframes SlideIn_r
	{
		  0% { 	opacity:0; transform:translateX(-64px); }
		100% { 	opacity:1; transform:translateX(0); }
	}
	#phgn_2608 .shimmer	{ position:absolute; top:0; left:-110px; width:100px; height:100%; background-color:#fff; opacity:0.7; background:linear-gradient(to right, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.5) 50%, rgba(250, 250, 250, 0) 100%); transform:skew(-45deg); animation-name:shimmer; animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:ease; }
	@keyframes shimmer
	{
		 0%		{ left:-100px; }
		50%		{ left: 110%; }
		50.1%	{ left:-100px; }
	}
	@keyframes pikopiko
	{
		 0%	{ transform:rotate(20deg); }
		to	{ transform:rotate(-10deg); }
	}

	#phgn_2608 .fadeUpTrigger	{ opacity:0; }
	#phgn_2608 .fadeUp			{ animation-name:fadeUpAnime; animation-delay:0.05s; animation-duration	:0.5s; animation-fill-mode:forwards; transition:opacity 1.0s transform 1.0s ease-in-out; }
	@keyframes fadeUpAnime
	{
		from	{ opacity:0; transform:translateY(100px); }
		to		{ opacity:1; transform:translateY(0); }
	}
	#phgn_2608 .fadeUp1
	{
		animation-name:fadeUpAnime1;
		animation-duration:3s;
		animation-fill-mode:both;
		animation-iteration-count:1;
	}
	@keyframes fadeUpAnime1
	{
		  0% { opacity:0; }
		100% { opacity:1; }
	}
	#phgn_2608 .fadeUpTrigger1{ opacity:0; }
	#phgn_2608 .fadeUp2
	{
		animation-name:fadeUpAnime2 ;
		animation-duration:1s;
		animation-fill-mode:both;
		animation-iteration-count:1;
	}
	@keyframes fadeUpAnime2
	{
		  0% { opacity:0; transform:scale(0.8,0.8); }
		100% { opacity:1; transform:scale(1,1); }
	}
	#phgn_2608 .flash_img:hover	{ opacity:1; -webkit-animation:flash 1s; animation:flash 1s; }
	@-webkit-keyframes flash
	{
		  0% { opacity:.4; }
		100% { 	opacity:1; }
	}
	@keyframes flash
	{
		  0% { opacity:.4; }
		100% { opacity:1; }
	}


html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
}

body {
	overflow: hidden;
	line-height: 1.5;
	min-width: auto;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 500;
	margin: 0;
	color: #333;
}

#phgn_2608 {
	max-width: 828px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	overflow: hidden;
	color: var(--color-gry);
}

#phgn_2608 a:focus {
    outline: none;
}

#phgn_2608 .section_area {
	position: relative;
	vertical-align: bottom;
}

#phgn_2608 .js-marker {
	display: inline;
	background-image: linear-gradient(90deg, #fffcd9, #fffcd9);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0% 100%;
	transition: all 1s ease-in-out;
}

#phgn_2608 .js-marker.inview {
	background-size: 100% 100%;
	transition-delay: .3s;
}
@media screen and (max-width:828px) {
	#phgn_2608 {
		max-width: 100vw;
	}
	#phgn_2608 sup {
		font-size: 2.174vw !important;
	}
}

/* ----------------------------
	fv
---------------------------- */
#phgn_2608 .fv_txt p {
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    font-size: clamp(0px, calc(100vw / 828 * 28), 28px);
    width: 80%;
    font-feature-settings: "palt";
    letter-spacing: .04em;
    line-height: 1.8;
	color: var(--color-gry);
}

/* ----------------------------
	cv
---------------------------- */
#phgn_2608 .cv .pr {
	margin: 0 40px 20px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	border-radius: clamp(0px, calc(100vw / 828 * 5), 5px);
	overflow: hidden;
}
#phgn_2608 .cv .pa {
    top: 76%;
    left: 50.4%;
    transform: translateX(-50%);
    width: 92%;
    overflow: hidden;
}

/* ----------------------------
	trouble
---------------------------- */
#phgn_2608 .border_anm {
    width: 1px;
    height: 0;
    position: absolute;
    top: calc(100% -  clamp(0px, calc(100vw / 828 * 150), 150px));
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #7d8087;
	transform-origin: center top;
}
#phgn_2608 .border_anm.scrollin {
	animation: border_anm_line 2.5s .5s infinite cubic-bezier(0.25, 1, 0.5, 1);
}
#phgn_2608 .border_anm::before {
	content: "";
	width: clamp(0px, calc(100vw / 828 * 10), 10px);
	height: clamp(0px, calc(100vw / 828 * 10), 10px);
	min-width: 7px;
    min-height: 7px;
	opacity: 0;
	border-radius: 50%;
	background-color: #7d8087;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	transform-origin: center top;
}
#phgn_2608 .border_anm.scrollin::before {
	animation: border_anm_circle 2.5s .5s infinite cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes border_anm_line {
	0% {
		height: 0;
		opacity: 1;
	}
	50% {
		height:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 1;
	}
	80% {
		height:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 1;
	}
	90% {
		height:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 0;
	}
	100% {
		height: 0;
		opacity: 0;
	}
}
@keyframes border_anm_circle {
	0% {
		top: 0;
		opacity: 1;
	}
	50% {
		top:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 1;
	}
	80% {
		top:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 1;
	}
	90% {
		top:  clamp(0px, calc(100vw / 828 * 150), 150px);
		opacity: 0;
	}
	100% {
		top: 0;
		opacity: 0;
	}
}

/* ----------------------------
	point
---------------------------- */
#phgn_2608 .text-anm {
	top: 4%;
    left: 50%;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    font-size: clamp(0px, calc(100vw / 828 * 40), 40px);
    line-height: 2;
    letter-spacing: 0.2em;
    color: #78828b;
}
#phgn_2608 .text-anm span {
    display: inline-block;
    opacity: 0;
	transform: translateY(-.2em);
}
#phgn_2608 .text-anm.scrollin span {
    animation: text-anm_in 0.4s forwards cubic-bezier(0.45, 0, 0.55, 1);
}
#phgn_2608 .text-anm .br {
    display: block;
}
@keyframes text-anm_in {
    to { opacity: 1; transform: translateY(0px); }
}
#phgn_2608 .point_01_icon {
	top: 37%;
    left: 50%;
	width: 50%;
}
#phgn_2608 .point_01_icon img {
	width: 41.305%;
	opacity: 0;
	transform: scale(.8);
	transition: .5s;
}
#phgn_2608 .point_01_icon img:nth-child(1) {
	margin-left: 20%;
}
#phgn_2608 .point_01_icon img:nth-child(2) {
	margin: 3% 0 -11% 40%;
}
#phgn_2608 .point_01_icon.scrollin img {
	opacity: 1;
	transform: scale(1);
	transition-delay: .8s;
}
#phgn_2608 .point_01_icon.scrollin img:nth-child(2) {
	transition-delay: 1s;
}
#phgn_2608 .point_01_icon.scrollin img:nth-child(3) {
	transition-delay: 1.2s;
}

/* ----------------------------
	about
---------------------------- */
#phgn_2608 .about_txt01 {
	width: 90.34%;
	font-size: clamp(0px, calc(100vw / 828 * 36), 36px);
	line-height: 1.8;
	margin: 0 auto;
	text-align: center;
	font-feature-settings: "palt";
	color: #fff;
	background-color: #a0a7ae;
}
#phgn_2608 .about_video {
	top: 0;
	width: 47%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
#phgn_2608 .about_video.left {
	left: 0;
}
#phgn_2608 .about_video.right {
	right: 0;
}
#phgn_2608 .about_video video {
	display: block;
	width: 100%;
}
#phgn_2608 p.sml {
	font-size: clamp(0px, calc(100vw / 828 * 20), 20px);
}
#phgn_2608 .about_logoanm {
	display: flex;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 90.34%;
    margin: 5% auto;
}
#phgn_2608 .about_txt02 {
	bottom: 4%;
	left: 10%;
	width: 80%;
	line-height: 1.7;
	font-feature-settings: "palt";
	font-size: 34px;
}
#phgn_2608 .about_txt02 p {
	font-size: clamp(0px, calc(100vw / 828 * 33), 33px);
}
#phgn_2608 p.about_txt02-sml {
	font-size: clamp(0px, calc(100vw / 828 * 20), 20px);
	margin-top: 0.8em;
}
#phgn_2608 .about_txt03 {
	font-size: clamp(0px, calc(100vw / 828 * 33), 33px);
	font-feature-settings: "palt";
	line-height: 1.7;
}
#phgn_2608 .about_txt03-sml {
    width: 93%;
    margin: auto;
    font-feature-settings: "palt";
}
#phgn_2608 .about_mitasu > .pa {
	top: 30%;
	left: 10%;
	width: 80%;
}
#phgn_2608 .about_mitasu .target1 {
	gap: clamp(0px, calc(100vw / 828 * 12), 12px);
	margin: clamp(0px, calc(100vw / 828 * 30), 30px) auto;
    width: 93%;
}
#phgn_2608 .about_mitasu .target2 {
	opacity: 0.0;
	transform: translate(0, clamp(0px, calc(100vw / 828 * 40), 40px));
	transition: all .6s;
	width: 93%;
    margin: 0 auto clamp(0px, calc(100vw / 828 * 30), 30px);
}
#phgn_2608 .about_mitasu .target2.active {
	opacity: 1.0;
	transform: translate(0, 0);
	transition-delay: .5s;
}
#phgn_2608 .about_07_arw {
	width: 9.904%;
	bottom: 20%;
    left: 50%;
    transform: translate(0, -50%);
	animation: bounce 1.5s infinite ease-in-out;
}
@keyframes bounce {
	0% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, clamp(0px, calc(100vw / 828 * 20), 20px));
	}
	100% {
		transform: translate(-50%, 0);
	}
}
#phgn_2608 .about_09_ttl {
	bottom: 0;
    left: 0;
	opacity: 0;
	transition-delay: .5s;
	transition: 1s cubic-bezier(0.25, 1, 0.5, 1);
	transform: translateY(20px);
}
#phgn_2608 .about_09_ttl.scrollin {
	opacity: 1;
	transform: translateY(0);
}



/* anm */
#phgn_2608 .left-to-right {
	opacity: 0.1;
	transform: translateX(-20px);
	transition: all 1s;
}

#phgn_2608 .left-to-right.scrollin {
	opacity: 1.0;
	transform: translate(0);
}

#phgn_2608 .right-to-left {
	opacity: 0.1;
	transform: translateX(20px);
	transition: all 1s;
}

#phgn_2608 .right-to-left.scrollin {
	opacity: 1.0;
	transform: translate(0);
}

#phgn_2608 .down-to-top {
	opacity: 0.0;
	transform: translateY(20px);
	transition: all 1s;
}

#phgn_2608 .down-to-top.scrollin {
	opacity: 1.0;
	transform: translateY(0);
}

#phgn_2608 .anm_list li {
	opacity: 0.0;
	transform: translateY(30px);
	transition: all .6s;
	width: calc(25% - 13px);
}

#phgn_2608 .anm_list.active li {
	opacity: 1.0;
	transform: translateY(0);
}

#phgn_2608 .anm_list.active li img {
	filter: drop-shadow(clamp(0px, calc(100vw / 828 * 10), 10px) clamp(0px, calc(100vw / 828 * 10), 10px) clamp(0px, calc(100vw / 828 * 10), 10px) rgba(0, 0, 0, 0.1));
	will-change: filter;
}

#phgn_2608 .anm_list.active li:nth-child(1) {
	transition-delay: 0.3s;
}

#phgn_2608 .anm_list.active li:nth-child(2) {
	transition-delay: 0.4s;
}

#phgn_2608 .anm_list.active li:nth-child(3) {
	transition-delay: 0.5s;
}

#phgn_2608 .anm_list.active li:nth-child(4) {
	transition-delay: 0.6s;
}

/* ----------------------------
	info
---------------------------- */
#phgn_2608 .info {
	margin: clamp(0px, calc(100vw / 828 * 100), 100px) auto 0;
	width: 100%;
	background: #f1f1f1;
	font-weight: 400;
}

#phgn_2608 .info h2 {
	font-size: 56px;
	color: #ff6994;
	line-height: 1;
	padding: 60px 0;
	border-bottom: solid 2px #ff6994;
	cursor: pointer;
	margin: 0;
}

#phgn_2608 .info .dtl {
	width: 90%;
	color: #78828b;
	padding: 60px 0;
	margin: 0 auto;
}

#phgn_2608 .info .dtl h3 {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -1.8px;
}

#phgn_2608 .info .dtl p {
	font-size: 24px;
	margin: 0 0 50px;
}

#phgn_2608 .info .dtl dl {
	color: #78828b;
	border-bottom: dotted 1px #78828b;
	margin: 0 0 50px;
}

#phgn_2608 .info .dtl dt {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 5px;
}

#phgn_2608 .info .dtl dd {
	font-size: 22px;
	margin: 0 0 50px;
}

#phgn_2608 .info .dtl dl:last-of-type {
	border-bottom: unset;
	margin-bottom: 0;
}

#phgn_2608 .info .dtl dl:last-of-type dd:last-of-type {
	margin-bottom: 0;
}

#phgn_2608 .info .dtl dl li {
	text-indent: -1em;
	padding-left: 1em;
}

#phgn_2608 .info h2::before,
#phgn_2608 .info h2::after {
	content: "";
	display: block;
	width: 6%;
	height: 2%;
	background: #ff6994;
	position: absolute;
	top: 48%;
	right: 5%;
}

#phgn_2608 .info h2::after {
	transform: rotate(90deg);
	transition: transform 0.4s ease-in-out;
	transition-delay: 0.1s;
}

#phgn_2608 .info h2.open::after {
	transform: rotate(0deg);
	transition: transform 0.4s ease-in-out;
	transition-delay: 0.1s;
}


@media only screen and (max-width:828px) {
	/* info */
	#phgn_2608 .info h2 {
		font-size: 6.763vw;
		padding: 7.246vw 0;
		border-bottom: solid 2px #ff6994;
	}

	#phgn_2608 .info .dtl {
		padding: 9.058vw 0;
	}

	#phgn_2608 .info .dtl h3 {
		font-size: 3.14vw;
		letter-spacing: -0.217vw;
	}

	#phgn_2608 .info .dtl p {
		font-size: 2.899vw;
		margin: 0 0 6.039vw;
	}

	#phgn_2608 .info .dtl dl {
		border-bottom: dotted 1px #78828b;
		margin: 0 0 6.039vw;
	}

	#phgn_2608 .info .dtl dt {
		font-size: 2.899vw;
		font-weight: 600;
		margin: 0 0 0.604vw;
	}

	#phgn_2608 .info .dtl dd {
		font-size: 2.657vw;
		margin: 0 0 6.039vw;
	}
}

/* ----------------------------------
		fllw
	---------------------------------- */
@media (min-width: 829px) {
	#phgn_2608 .fllw-sp {
		display: none !important;
	}
}
#phgn_2608 .fllw-pc {
	opacity: 0;
	transition: opacity 0.8s;
	width: 300px;
	right: 0;
	bottom: 2px;
	z-index: 9999;
}

#phgn_2608 .fllw-pc.fadeIn {
	opacity: 1;
	transition: opacity 0.8s;
}

#phgn_2608 .fllw-sp {
	opacity: 0;
	transition: opacity 0.8s;
}

#phgn_2608 .fllw-sp.fadeIn {
	opacity: 1;
	transition: opacity 0.8s;
}

.p-my-content__inner {
	max-width: 828px;
	width: 100%;
	margin: 0 auto;
}

.block-landingpage-order form,
.block-landingpage--body-bottom {
	margin: 0;
}

@media only screen and (max-width:828px) {
	.page-contentspages .p-my-content__inner {
		padding: 9.662vw 1.691vw 0;
	}
	#phgn_2608 .fllw-pc {
		display: none !important;
	}
	#phgn_2608 .fllw .fllw-sp {
		width: 100vw;
		bottom: 0;
		padding: 0;
		z-index: 100;
	}

	/* footer */
	.block-lp-footer {
		padding: 0 0 25vw;
	}
}