@charset "UTF-8";

html {
	color: var(--color-body);
	--color-body: #262626;
	--color-green:#249B76;
	--color-light-green: #1B9871;
	--color-white:#fff;
	--color-orange:#DE6B31;
	--color-yellow:#E8DF80;
	--color-beige: #EBE8D9;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	--menu-zindex:100;
	--pc-visible-width: 600;/* 600px: Visible width on PC */
	--sp-design-width: 780;/* 780px: Width of SP design */
	--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
	--easeInOutCubic: cubic-bezier(0.65, 0.05, 0.36, 1);
}
@media screen and (min-width: 769px) {
	html {
		font-size: calc(var(--pc-visible-width) / var(--sp-design-width) * 1px);  
	}
}
@media screen and (max-width: 768px) {
	html {
		font-size: calc(100 / var(--sp-design-width) * 1vw);
	}
}

body {
	font-size: 16rem;
}
img {
    max-width: 100%;
	height: auto;
    vertical-align: bottom;
}

*,*::before,*::after {
    box-sizing: border-box;
}

h1,h2,h3,h4,p,ul,ol,li{
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}
button{
	display: block;
	text-align: left;
	width: 100%;
	background-color: transparent;
	border: none;
	color: #333;
	font-family: inherit;
}
a {
	text-decoration: none;
	color: #676767;
}
summary {
	cursor: pointer;
    list-style: none;
}
summary::-webkit-details-marker {
    display: none;
}
dl,dt,dd {
	margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
@media (min-width: 769px) {
	.sp_only{
		display: none !important;
	}
}
@media (max-width: 768px) {
	.pc_only{
		display: none !important;
	}
}

/* color */
.color_green {
	color: var(--color-green);
}

/* font */
.fw400 {
	font-weight: 400;
}
.fw500 {
	font-weight: 500;
}
.fw600 {
	font-weight: 600;
}
.fw700 {
	font-weight: 700;
}
.fw900 {
	font-weight: 900;
}

/* part */
.tt-select-trial {
	margin: auto;
}
.main_inner {
	overflow: clip;
}
.sp_contents {
	position: relative;
	z-index: 1;
	overflow: hidden;
	overflow: clip;
	font-size: 24rem;
}
.contents_wrap {
	position: relative;
}
.campaign_neko_img_wrap {
    position: absolute;
    z-index: 1;
}
.campaign_neko_img {
    width: 230rem;
}
.campaign .campaign_neko_img {
    width: 260rem;
}
.line_yellow {
	display: inline-block;
	background-image: linear-gradient(180deg, transparent 50%, #e8df80 50%);
	background-repeat: no-repeat;
	background-position: left bottom;
	transition: background-size 0.4s ease;
	background-size: 0% 70%;
}
.is_animated .line_yellow {
	background-size: 100% 70%;
}
.line_partition {
	position: absolute;
    bottom: 0;
	left: 0;
    width: 100%;
    height: 4rem;
    border-radius: 2rem;
}
.line_partition::after {
	content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    margin-bottom: -4rem;
}
.line_partition_white,
.line_partition_white::after {
	background-color: var(--color-white);
}
.line_partition_green,
.line_partition_green::after {
	background-color: var(--color-green);
}
.btn_wrap {
	display: grid;
	place-content: center;
}
.btn {
	position: relative;
    display: block;
}
.btn_inner{
	font-size: 32rem;
    padding: 46rem 0 46rem 32rem;
    border-radius: 208rem;
    width: 640rem;
	background-color: var(--color-body);
	color: #fff;
    display: block;
    font-weight: 600;
    margin-inline: auto;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}
.btn_arrow_line {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 38rem;
}
.btn_arrow_line::after {
    content: '';
    margin: auto;
    background-color: var(--color-white);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26rem;
    height: 4rem;
    right: 64rem;
    transition: background-color 0.5s, width 0.5s;
}
.btn_arrow_line_inner {
    margin: auto;
    border-radius: 50%;
    background-color: var(--color-white);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    width: 64rem;
    height: 64rem;
    transition: background-color 0.5s, width 0.5s, height 0.5s;
}
.btn_arrow_line_inner::before,
.btn_arrow_line_inner::after {
    content: '';
    margin: auto;
    background-color: var(--color-body);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.btn_arrow_line_inner::before {
    width: 26rem;
    height: 4rem;
    right: 38rem;
}
.btn_arrow_line_inner::after {
    border-radius: 50%;
    left: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
}
.btn_line_wrap {
	text-align: center;
}
.btn_line {
	display: inline-block;
	position: relative;
	padding-right: 40rem;
	text-align: center;
	transition: color 0.3s, border 0.3s;
}
.btn_line::after {
	content: '';
	width: 24rem;
	height: 24rem;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: background 0.3s;
}
.btn_line_black {
	color: var(--color-body);
	border-bottom: solid 1px var(--color-body);
}
.btn_line_black::after {
	background: url(../images/icon_blank_black.svg) no-repeat right center;
	background-size: contain;
}
.btn_line_white {
	color: var(--color-white);
	border-bottom: solid 1px var(--color-white);
}
.btn_line_white::after {
	background: url(../images/icon_blank_white.svg) no-repeat right center;
	background-size: contain;
}
.btn_arrow_wrap {
	position: relative;
	transition: color 0.3s;
}
.btn_arrow {
	width: 24rem;
	height: 24rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: -34rem;
	transform: translateY(-50%);
	transition: background-color 0.3s, border 0.3s;
}
.btn_arrow_inner {
	display: block;
    width: 7rem;
    height: 7rem;
	transform: rotate(-45deg);
	transition: border 0.3s;
}
.btn_arrow_white {
	background-color: var(--color-white);
	border: solid 1px var(--color-white);
}
.btn_arrow_white .btn_arrow_inner {
	border-left: solid 2rem var(--color-green);
	border-bottom: solid 2rem var(--color-green);
}
.btn_arrow_black {
	background-color: #676767;
	border: solid 1px #676767;
}
.btn_arrow_black .btn_arrow_inner {
	border-left: solid 2rem var(--color-white);
	border-bottom: solid 2rem var(--color-white);
}
.btn_plus_wrap {
	position: relative;
	transition: color 0.3s;
}
.btn_plus {
	width: 24rem;
	height: 24rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: -34rem;
	transform: translateY(-50%);
	transition: background-color 0.3s, border 0.3s;
}
.btn_plus_inner {
	position: relative;
    width: 10rem;
    height: 10rem;
}
.btn_plus_inner::before,
.btn_plus_inner::after {
	content: "";
	position: absolute;
}
.btn_plus_inner::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}
.btn_plus_inner::after {
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}
.btn_plus_white {
	background-color: var(--color-white);
	border: solid 1px var(--color-white);
}
.btn_plus_white .btn_plus_inner::before,
.btn_plus_white .btn_plus_inner::after {
	background-color: var(--color-green);
	transition: background-color 0.3s;
}
@media (min-width: 769px) {
	.tt-select-trial {
		min-height: 100vh;
	}
	.sp_contents {
		min-height: 100vh;
		max-width: 600px;
		width: 100%;
	}
	@media (hover: hover) {
		.link_opacity {
			transition: opacity 0.3s;
		}
		.link_opacity:hover {
			opacity: 0.7;
		}
		.btn:hover .btn_inner {
            background-color: var(--color-white);
            color: var(--color-green);
		}
		.btn:hover .btn_arrow_line::after {
            background-color: var(--color-green);
            width: 44rem;
        }
		.btn:hover .btn_arrow_line_inner {
            background-color: var(--color-green);
        }
		.btn:hover .btn_arrow_line_inner::before, 
		.btn:hover .btn_arrow_line_inner::after {
            background-color: var(--color-white);
        }
		.btn_line_black:hover {
			color: var(--color-green);
			border-bottom: solid 1px var(--color-green);
		}
		.btn_line_black:hover::after {
			background: url(../images/icon_blank_green.svg) no-repeat right center;
			background-size: contain;
		}
		.btn_line_white:hover {
			color: var(--color-body);
			border-bottom: solid 1px var(--color-body);
		}
		.btn_line_white:hover::after {
			background: url(../images/icon_blank_black.svg) no-repeat right center;
			background-size: contain;
		}
		.btn_arrow_wrap_white:hover {
			color: var(--color-body);
		}
		.btn_arrow_wrap:hover .btn_arrow_white {
			background-color: transparent;
			border: solid 1px var(--color-body);
		}
		.btn_arrow_wrap:hover .btn_arrow_white .btn_arrow_inner{
			border-left: solid 2rem var(--color-body);
			border-bottom: solid 2rem var(--color-body);
		}
		.btn_arrow_wrap_black:hover {
			color: var(--color-green);
		}
		.btn_arrow_wrap:hover .btn_arrow_black {
			background-color: var(--color-green);
			border: solid 1px var(--color-green);
		}
		.btn_plus_wrap_white:hover {
			color: var(--color-body);
		}
		.btn_plus_wrap:hover .btn_plus_white {
			background-color: transparent;
			border: solid 1px var(--color-body);
		}
		.btn_plus_wrap:hover .btn_plus_white .btn_plus_inner::before,
		.btn_plus_wrap:hover .btn_plus_white .btn_plus_inner::after {
			background-color: var(--color-body);
		}
	}
}
@media (max-width: 1020px) {
	.sp_contents {
		position: relative;
		margin-inline: auto;
	}
}
@media (max-width: 768px) {
	.sp_contents {
		padding-top: 110rem;
	}
}

/* 商品スライダー animation */
.img_slider_wrap {
	display: flex;
	align-items: center;
}
.img_slider_list {
	display: flex;
	align-items: center;
	justify-content: center;
	/* column-gap: 16rem; */
	flex-shrink: 0;
}
.img_slider {
	display: inline-block;
	transform-origin: center;
}
.img_slider:nth-child(odd) {
	animation: rotate-reverse 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
	animation-timing-function: step-start;
}
.img_slider:nth-child(even) {
	animation: rotate 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
	animation-timing-function: step-start;
}
.img_slider_ill {
	width: 180rem;
}
.about_img_slider_wrap_top {
	margin-top: 60rem;
}
.about_img_slider_wrap_bottom {
	margin-top: 140rem;
}
.img_slider_wrap .img_slider_list:first-child{
    animation: loop 150s -75s linear infinite;
}
.img_slider_wrap .img_slider_list:last-child{
    animation: loop2 150s linear infinite;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(20deg);
	}
	75% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes rotate-reverse {
	0% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(-20deg);
	}
	75% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/* header */
.tt-select-trial .l-header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 120rem;
	padding-left: 48rem;
	background-color: var(--color-beige);
}
.tt-select-trial .l-header__inner {
	display: flex;
	height: 100%;
	align-items: center;
}
.tt-select-trial .l-header__inner-katenelogo a {
	display: block;
	background-image: url(/campaign/disaster-prevention-preparation/images/logo_katene.svg);
	width: 142rem;
	height: 39rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.tt-select-trial .l-header__inner-katenelogo a>span {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden
}

/* pc flex */
@media (min-width: 1441px) {
	.pc_flex {
		width: 100%;
		margin-inline: auto;
		display: flex;
		justify-content: center;
	}
}
@media (max-width: 1440px) and (min-width: 769px) {
	.pc_flex {
		display: flex;
		justify-content: space-between;
	}
}
@media (min-width: 769px) {
	.pc_flex {
		position: relative;
		overflow: clip;
	}
}


/* pc_left */
.pc_left {
	background: linear-gradient(320deg, #219772 -10.04%, #2DAE85 99.17%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	position: sticky;
	top: 0;
	padding: 0 1%;
}
.pc_left_inner {
	width: 100%;
	position: relative;
}
.pc_left .btn_inner {
	width: 364px;
	font-size: 16px;
	padding: 38rem 0 38rem 40rem;
}
.pc_left .btn_arrow_line_inner {
    width: 37px;
    height: 37px;
}
.pc_left .btn_arrow_line_inner::before {
    width: 14px;
    height: 2px;
    right: 23px;
}
.pc_left .btn_arrow_line::after{
    width: 14px;
    height: 2px;
    right: 37px;
}
.pc_left .btn_arrow_line_inner::after{
	width: 9px;
	height: 9px;
}
.pc_left_logo_wrap {
	width: 138px;
	position: absolute;
	top: 35px;
	left: calc(50% - 220rem);
}
.left_membership_ttl {
	color: var(--color-white);
	text-align: center;
	font-size: 52px;
	line-height: 1.2;
}
.left_membership_ttl_1 {
	font-size: 24px;
	color: var(--color-yellow);
	position: relative;
}
.left_membership_ttl_1::before,
.left_membership_ttl_1::after {
	content: '';
	background: url(../images/line_deco_yellow.svg) no-repeat center;
    background-size: contain;
    width: 17px;
    height: 23px;
    position: absolute;
    top: 9px;
}
.left_membership_ttl_1::before {
	left: -28px;
}
.left_membership_ttl_1::after {
	right: -28px;
	transform: scaleX(-1);
}
.left_membership_ttl_2 {
	font-size: 40px;
}
.left_membership_date {
	color: var(--color-white);
	text-align: center;
	font-size: 14px;
	margin-top: 15px;
}
.left_membership_date_year {
	font-size: 18px;
}
.left_membership_date_num {
	font-size: 20px;
}
.left_membership_served {
	background-color: var(--color-yellow);
	font-size: 30px;
	border-radius: 50%;
	width: 153px;
	height: 153px;
	text-align: center;
	position: absolute;
	top: -20px;
    right: calc(50% - 500rem);
	display: grid;
	place-content: center;
	line-height: 1;
}
.left_membership_served_num {
	font-size: 43px;
	letter-spacing: -0.03em;
}
.left_membership_served_sm {
	font-size: 22px;
}
.left_membership_list {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 9px;
	margin-block: 45px 35px;
}
.left_membership_list > li {
	background-color: var(--color-white);
	border-radius: 12px;
	text-align: center;
	min-height: 160px;
	line-height: 1.2;
	display: grid;
	place-content: center;
	position: relative;
	width: 296px;
}
.left_membership_list > li:first-child{
	font-size: 32px;
	padding: 8px 13px;
}
.left_membership_list > li:last-child{
	font-size: 22px;
	padding: 13px;
}
.left_membership_list .line_yellow {
	background-image: linear-gradient(180deg, transparent 30%, #e8df80 30%);
	padding-bottom: 3rem;
}
.pc_left .campaign_neko_img_wrap {
    right: -123rem;
    bottom: -200rem;
}
@media (min-width: 1611px) {
	.pc_left_inner {
		margin-top: -200rem;
	}
	.pc_left_logo_wrap {
		left: calc(50% - 427rem);
	}
	.ft16 {
		font-size: 16px;
	}
	.ft17 {
		font-size: 17px;
	}
	.ft19 {
		font-size: 19px;
	}
	.ft30 {
		font-size: 30px;
	}
	.ft31 {
		font-size: 31px;
		letter-spacing: -0.08em;
	}
	.ft37 {
		font-size: 37px;
	}
	.ft43 {
		font-size: 43px;
		line-height: 1;	
	}
	.ft47 {
		font-size: 47px;
		line-height: 1;	
	}
	.ft51 {
		font-size: 51px;
		line-height: 1;
	}
	.ls_35 {
		letter-spacing: -2.5px;
	}
}
@media (max-width: 1610px) {
	.ft16 {
		font-size: 16rem;
	}
	.ft17 {
		font-size: 17rem;
	}
	.ft19 {
		font-size: 19rem;
	}
	.ft30 {
		font-size: 30rem;
	}
	.ft31 {
		font-size: 31rem;
		letter-spacing: -0.08em;
	}
	.ft37 {
		font-size: 37rem;
	}
	.ft43 {
		font-size: 43rem;
		line-height: 1;	
	}
	.ft47 {
		font-size: 47rem;
		line-height: 1;	
	}
	.ft51 {
		font-size: 51rem;
		line-height: 1;
	}
	.ls_35 {
		letter-spacing: -2.5rem;
	}
}
@media (min-width: 981px) {
	.pc_left {
		width: calc(1000 / 1440 * 100%);
	}
	@media (hover: hover) {
        .pc_left .btn:hover .btn_arrow_line::after {
            width: 25px;
        }
    }
}
@media (max-width: 1610px) and (min-width: 1281px) {
    .left_membership_served {
        top: -70px;
        right: calc(50% - 280rem);
    }
}
@media (max-width: 1610px) and (min-width: 1401px) {
	.pc_left {
		width: calc(520 / 1281 * 100%);
	}
}
@media (max-width: 1400px) and (min-width: 1281px) {
	.pc_left {
		width: calc(440 / 1281 * 100%);
	}
}
@media (max-width: 1220px) and (min-width: 981px){
	.left_membership_served {
        top: -90px;
        right: 0;
    }
	.pc_left {
		width: calc(420 / 981 * 100%);
	}
}
@media (max-width: 1610px) and (min-width: 1281px),
(max-width: 1220px) and (min-width: 981px) {
	.left_membership_ttl {
		font-size: 31px;
	}
	.left_membership_ttl_1 {
		font-size: 19px;
	}
	.left_membership_ttl_2 {
		font-size: 23px;
	}
	.left_membership_ttl_1::before,
	.left_membership_ttl_1::after {
        width: 13px;
        height: 19px;
        top: 6px;
	}
	.left_membership_list {
		flex-direction: column;
		row-gap: 4px;
		margin-block: 24px 35px;
	}
	.left_membership_list > li {
		width: 294px;
		min-height: 135px;
	}
	.left_membership_list > li:first-child {
		font-size: 27px;
		padding: 7px 11px;
	}
	.left_membership_list > li:last-child {
		font-size: 19px;
		padding: 11px;
	}
	.left_membership_served {
		font-size: 20px;
		width: 100px;
		height: 100px;
	}
	.left_membership_served_num {
		font-size: 28px;
	}
	.left_membership_served_sm {
		font-size: 14px;
	}
	.pc_left .btn_inner {
		width: 320px;
		font-size: 16px;
		padding: 33rem 0 33rem 32rem;
	}
	.pc_left .btn_arrow_line{
		right: 23rem;
	}
	.pc_left .btn_arrow_line_inner {
		width: 32px;
		height: 32px;
	}
	.pc_left .btn_arrow_line_inner::before {
		width: 13px;
		height: 2px;
		right: 20px;
	}
	.pc_left .btn_arrow_line::after{
		width: 13px;
		height: 2px;
		right: 32px;
	}
	.pc_left .btn_arrow_line_inner::after{
		width: 8px;
		height: 8px;
	}
	.pc_left .campaign_details_plus {
		top: 100%;
	}
	@media (hover: hover) {
        .pc_left .btn:hover .btn_arrow_line::after {
            width: 20px;
        }
    }
}
@media (max-width: 1280px) and (min-width: 1220px) {
	.pc_left {
		width: calc(680 / 1440 * 100%);
	}
	.pc_left_logo_wrap {
		width: 138px;
		position: absolute;
		top: 35px;
		left: calc(50% - 338rem);
	}
	.left_membership_ttl {
		font-size: 47px;
	}
	.left_membership_ttl_1 {
		font-size: 22px;
	}
	.left_membership_ttl_1::before,
	.left_membership_ttl_1::after {
		width: 15px;
		height: 19px;
		top: 10px;
	}
	.left_membership_ttl_2 {
		font-size: 35px;
	}
	.left_membership_served {
		font-size: 23px;
		width: 120px;
		height: 120px;
        top: -32px;
        right: calc(50% - 350rem);
	}
	.left_membership_served_num {
		font-size: 34px;
	}
	.left_membership_served_sm {
		font-size: 17px;
	}
	.pc_left .campaign_neko_img_wrap {
		right: -105rem;
        bottom: calc(50% - 500px);
	}
}
@media (max-width: 1280px) and (min-width: 981px) {
	.pc_left {
		width: 100%;
	}
}
@media (max-width: 1220px) and (min-width: 981px) {
	.pc_left .campaign_neko_img_wrap {
		display: none;
	}
}
@media (max-width: 980px) {
	.pc_left {
		display: none;
	}
}

/* pc_left animation */
.animation_ready .left_membership_ttl_3_num::before {
	scale: 0;
	transition: scale .45s;
}
.animation_loaded .pc_left.is_animated .left_membership_ttl_3_num::before{
	scale: 1;
}
.animation_ready .campaign_neko_img {
    translate: 140rem 50rem;
    rotate: 20deg;
    transition: translate .6s .7s var(--easeOutBack), rotate .6s .7s var(--easeOutBack);
}
.animation_loaded .pc_left.is_animated .campaign_neko_img {
    rotate: 0deg;
    translate: 0rem 0;
}
.animation_loaded .pc_left.is_animated .campaign_details_plus {
    scale: 1;
}

/* pc_right */
.pc_right {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	position: sticky;
	top: 0;
	padding: 0 1%;
	z-index: 10;
}
.pc_right_container {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	min-height: 740px;
}
.right_nav {
	text-align: center;
}
.right_nav_link {
	color: var(--color-green);
	font-size: 16px;
	letter-spacing: 0.16px;
	position: relative;
	display: block;
	padding-block: 28px;
	transition: color 0.3s;
}
@media (min-width: 1281px) {
	.pc_right {
		width: calc(320 / 1440 * 100%);
	}
	@media(hover:hover) {
		.right_nav_link:hover {
			color: var(--color-body);
		}
	}
}
@media (max-width: 1280px) {
	.pc_right {
		display: none;
	}
}
@media(hover:hover) {
	.right_btn_apply {
		transition: background .3s;
	}
	.right_btn_apply_txt {
		transition: color .3s;
	}
	.right_btn_apply:hover {
		background-color: var(--color-white);
	}
	.right_btn_apply:hover .right_btn_apply_txt {
		color: #e60012;
	}
}
/* pc_right animation */
.animation_ready .right_nav > li:nth-child(1) .line_partition,
.animation_ready .right_nav > li:nth-child(2) .line_partition,
.animation_ready .right_nav > li:nth-child(3) .line_partition,
.animation_ready .right_nav > li:nth-child(4) .line_partition {
    scale: 0 1;
    transition-duration: 0.6s;
    transition-property: scale;
    transform-origin: 0 0;
}
.animation_ready .right_nav > li:nth-child(1) .line_partition {
    transition-delay: 0.5s;
}
.animation_ready .right_nav > li:nth-child(2) .line_partition {
    transition-delay: 0.65s;
}
.animation_ready .right_nav > li:nth-child(3) .line_partition {
    transition-delay: 0.8s;
}
.animation_ready .right_nav > li:nth-child(4) .line_partition {
    transition-delay: 0.95s;
}
.animation_loaded .pc_right.is_animated .right_nav > li:nth-child(1) .line_partition,
.animation_loaded .pc_right.is_animated .right_nav > li:nth-child(2) .line_partition,
.animation_loaded .pc_right.is_animated .right_nav > li:nth-child(3) .line_partition,
.animation_loaded .pc_right.is_animated .right_nav > li:nth-child(4) .line_partition {
    scale: 1 1;
}

/* menu_btn */
.menu_btn {
	position: absolute;
	right: 0;
	top: 0;
	background: var(--color-green) url(../images/menu_bg_green.gif) repeat;
	background-size: 320rem auto;
	width: 120rem;
	height: 120rem;
	border-radius: 0 0 0 60rem;
	text-align: center;
	z-index: calc(var(--menu-zindex) + 1);
	transition: background .3s;
}
.menu_btn_line {
	background-color: var(--color-white);
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	margin: auto;
	width: 50rem;
	height: 4rem;
	border-radius: 2rem;
	transition: transform .3s, background-color 0.3s;
}
.menu_btn_line:nth-child(1) {
	top: 49rem;
}
.menu_btn_line:nth-child(2) {
	top: 67rem;
}
.menu_open .menu_btn{
	background: var(--color-white);
}
.menu_open .menu_btn_line:nth-child(1) {
    transform: translateY(9rem) rotate(-45deg);
	background-color: var(--color-green);
}
.menu_open .menu_btn_line:nth-child(2) {
    transform: translateY(-9rem) rotate(45deg);
	background-color: var(--color-green);
}
@media (min-width: 1281px){
	.menu_btn{
		display: none;
	}
	.menu_open .menu {
		display: none;
	}
}
@media (min-width: 769px) {
	.menu_btn {
		position: sticky;
		left: 100%;
	}
}
/* 768px以下 */
@media (max-width: 768px) {
	.menu_btn {
		position: fixed;
	}
}

/* menu */
.menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: var(--menu-zindex);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	max-width: 600px;
}
.menu_overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/menu_bg_green.gif) repeat;
	background-size: 320rem auto;
	opacity: .9;
}
.menu_inner {
	overflow: auto;
	height: 100%;
	padding: 40rem 64rem 64rem;
	position: relative;
	z-index: 1;
}
.menu_logo {
	width: 142rem;
	margin-left: -16rem;
}
.menu_open .menu {
	opacity: 1;
	pointer-events: auto;
}
.menu_list {
	margin-top: 130rem;
}
.menu_listitem:not(:first-of-type) .menu_link {
	margin-top: 80rem;
}
.menu_listitem:not(:last-of-type) .menu_link_txt {
	margin-bottom: 80rem;
	display: inline-block;
}
.menu_link {
	position: relative;
	display: block;
}
.menu_link_inner {
	text-align: center;
}
.menu_link_txt {
	color: var(--color-white);
	text-align: center;
	transition: color 0.3s;
}
@media (max-width: 980px) {
	.menu {
		left: 0;
	}
	.menu_link_txt {
		font-size: 32rem;
	}
}
/* 768px以下 */
@media (max-width: 768px) {
	.menu {
		max-width: 100%;
		left: 0;
	}
	.menu_list {
		margin-top: 120rem;
	}
	.menu_listitem:not(:first-of-type) .menu_link {
		margin-top: 50rem;
	}
	.menu_listitem:not(:last-of-type) .menu_link_txt {
		margin-bottom: 50rem;
	}
}
@media (hover:hover) {
	.menu_link:hover .menu_link_txt {
		color: var(--color-body);
	}
}

/* mv */
.mv {
	background-color: var(--color-beige);
	margin-top: 120rem;
	position: relative;
	padding: 60rem 20rem 144rem;
	overflow: hidden;
}
.mv_inner {
	background: url(../images/bg_mv.svg) no-repeat center;
	background-size: 100%;
	text-align: center;
	position: relative;
	z-index: 1;
	padding-block: 180rem 120rem;
}
.mv_fukidashi {
	font-size: 36rem;
	text-align: center;
	background-color: var(--color-orange);
	color: var(--color-white);
	border-radius: 50rem;
	width: 600rem;
	padding-block: 14rem 16rem;
	position: absolute;
	top: 66rem;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center center; 
}
.mv_fukidashi::after {
	content: '';
	width: 50rem;
	height: 50rem;
	background-color: var(--color-orange);
	border-radius: 4rem;
	position: absolute;
	bottom: -20rem;
	left: 50%;
	transform: translateX(-50%);
	rotate: 45deg;
	z-index: -1;
}
.mv_lead {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 34rem;
}
.mv_lead_ttl {
	margin-top: 22rem;
	font-size: 26rem;
	color: #28B082;
	line-height: 1;
}
.mv_lead_ttl_img_wrap {
	vertical-align: sub;
}
.mv_lead_ttl_img {
	width: 310rem;
}
.mv_lead_txt {
	font-size: 54rem;
}
.mv_lead_txt_sm {
	font-size: 38rem;
}
.mv_lead_txt_md {
	font-size: 48rem;
}
.mv_lead_txt_flex.line_yellow {
	background-image: linear-gradient(180deg, transparent 40%, #e8df80 40%);
}
.mv_lead_txt_flex {
	display: flex;
	align-items: end;
	width: fit-content;
	margin: 0 auto 10rem;
	padding-bottom: 25rem;
}
.mv_lead_txt_max {
	writing-mode: vertical-rl;
	font-size: 52rem;
	line-height: 1.05;
}
.mv_lead_txt_num {
	font-size: 200rem;
    line-height: 0.8;
}
.mv_lead_txt_percent {
	font-size: 100rem;
	line-height: 0.8;
}
.mv_lead_txt_off {
	font-size: 130rem;
	line-height: 0.8;
}
.mv_tsunagu_link {
	margin-top: 34rem;
	font-size: 24rem;
}
.mv_tsunagu_link_txt_sm {
	font-size: 20rem;
}

.mv_product_block {
	position: absolute;
	top: 0;
}
.mv_product_wrap {
	display: flex;
	align-items: center;
}
.mv_product_wrap + .mv_product_wrap {
	margin-top: 28rem;
}
/* mv animation */
.animation_loaded .mv.is_animated .mv_fukidashi {
	transform: translateX(-50%) scale(1);
}
.animation_ready .mv_fukidashi {
	transform: translateX(-50%) scale(0);
	transition: transform 0.5s var(--easeOutBack);
}
.mv_product_wrap:nth-of-type(1) .img_slider_list:first-child {
    animation: loop 150s -75s linear infinite;
}
.mv_product_wrap:nth-of-type(1) .img_slider_list:last-child {
    animation: loop2 150s linear infinite;
}
.mv_product_wrap:nth-of-type(2) .img_slider_list:first-child {
    animation: loop-reverse 150s -65s linear infinite;
}
.mv_product_wrap:nth-of-type(2) .img_slider_list:last-child {
    animation: loop2-reverse 150s 10s linear infinite;
}
.mv_product_wrap:nth-of-type(3) .img_slider_list:first-child {
    animation: loop 150s -85s linear infinite;
}
.mv_product_wrap:nth-of-type(3) .img_slider_list:last-child {
    animation: loop2 150s -10s linear infinite;
}
.mv_product_wrap:nth-of-type(4) .img_slider_list:first-child {
    animation: loop-reverse 150s -75s linear infinite;
}
.mv_product_wrap:nth-of-type(4) .img_slider_list:last-child {
    animation: loop2-reverse 150s linear infinite;
}
@media (max-width: 1280px) {
	.mv {
		margin-top: 0;
	}
}

/* campaign */
.campaign {
	padding-top: 98rem;
	background: url(../images/bg_green.webp) no-repeat top center;
	background-size: 100%;
	position: relative;

}
.campaign_1 {
	margin-top: -75rem;
	overflow-x: clip;
}
.campaign_1 .campaign_inner {
	background: url(../images/bg_green_bottom.webp) no-repeat top 6% center, linear-gradient(180deg, transparent 30%, #1A956F 30%);
	background-size: auto;
}
.campaign_2,
.campaign_3 {
	margin-top: -365rem;
	position: relative;
	z-index: 1;
}
.campaign_2 {
	background: url(../images/bg_green_circle.webp) no-repeat top center, linear-gradient(180deg, transparent 50%, #2DAE85 50% ,#2DAE85 80%,transparent 80%);
	background-size: 100%;
}
.campaign_3 {
	background: url(../images/bg_green_circle.webp) no-repeat top center, linear-gradient(180deg, transparent 50%, #2DAE85 50% , #2DAE85 80%, var(--color-white) 80%);
	background-size: 100%;
}
.campaign_2 .campaign_inner,
.campaign_3 .campaign_inner {
	background-size: 100%;
	padding-bottom: 362rem;
}
.campaign_2 .campaign_served,
.campaign_3 .campaign_served {
	top: -65rem;
    right: 20rem;
}
.campaign_2 .campaign_neko_img_wrap,
.campaign_3 .campaign_neko_img_wrap {
	right: -120rem;
    top: calc(50% - 785rem);
}
.campaign_container {
	padding-inline: 40rem;
}
.campaign_ttl {
	text-align: center;
	color: var(--color-white);
	font-size: 48rem;
	line-height: 1.3;
	letter-spacing: 0.8rem;
}
.campaign_ttl_inner {
	font-size: 64rem;
	letter-spacing: 0;
}
.campaign_ttl_sub {
	color: var(--color-yellow);
	font-size: 36rem;
	display: block;
    margin: 0 auto 16rem;
	width: fit-content;
	position: relative;
}
.campaign_ttl_sub::before,
.campaign_ttl_sub::after {
	content: '';
	background: url(../images/line_deco_yellow.svg) no-repeat center;
    background-size: auto;
	width: 34rem;
	height: 46rem;
	position: absolute;
	top: 5rem;
}
.campaign_ttl_sub::before {
	left: -34rem;
}
.campaign_ttl_sub::after {
	right: -34rem;
	transform: scaleX(-1);
}
.campaign_date {
	text-align: center;
	color: var(--color-white);
	font-size: 26rem;
	margin-top: 30rem;
}
.campaign_date_num {
	font-size: 32rem;
	letter-spacing: 1.6rem;
}
.campaign_served {
	background-color: var(--color-yellow);
	font-size: 40rem;
	border-radius: 50%;
	width: 200rem;
	height: 200rem;
	text-align: center;
	position: absolute;
	top: -30rem;
	right: -24rem;
	display: grid;
	place-content: center;
	line-height: 1;
}
.campaign_served_num {
	font-size: 56rem;
	letter-spacing: -0.03em;
}
.campaign_served_sm {
	font-size: 28rem;
}
.campaign_details_wrap {
	margin-top: 40rem;
	display: flex;
	flex-direction: column;
	row-gap: 6rem;
	position: relative;
}
.campaign_details {
	background-color: var(--color-white);
	border-radius: 20rem;
	text-align: center;
	display: block;
}
.campaign_details_1 {
	padding-block: 36rem 50rem;
}
.campaign_details_2 {
	padding-block: 36rem;
	position: relative;
}
.campaign_details.is-opened .btn_arrow {
    transform: translateY(-50%) rotate(180deg);
}
.campaign_details.is-opened.campaign_details_1,
.campaign_details.is-opened.campaign_details_2 {
	padding-block: 36rem 0;
}
.campaign_question_txt {
	display: block;
	margin-bottom: 20rem;
}
.campaign_question_txt_ls {
	letter-spacing: -0.06em;
}
.campaign_question_txt_date {
	font-size: 66rem;
    letter-spacing: -0.1em;
}
.campaign_details_1 .line_yellow {
	background-image: linear-gradient(180deg, transparent 30%, #e8df80 30%);
}
.campaign_details_1 .campaign_question_txt {
	font-size: 36rem;
}
.campaign_details_1 .campaign_question_txt_num_year {
	font-size: 40rem;
}
.campaign_details_1 .campaign_question_txt_year {
	font-size: 30rem;
}
.campaign_details_1 .campaign_question_txt_num {
	font-size: 108rem;
	line-height: 1;
	letter-spacing: -0.06em;
}
.campaign_details_1 .campaign_question_txt_free {
	font-size: 80rem;
	line-height: 1;
}
.campaign_details_1 .campaign_question_txt_exclamation {
	font-size: 92rem;
	line-height: 1;
}
.campaign_details_2 .campaign_question_txt {
	font-size: 28rem;
}
.campaign_details_2 .campaign_question_txt_and {
	font-size: 24rem;
}
.campaign_details_2 .campaign_question_txt_limit {
	font-size: 22rem;
}
.campaign_details_2 .campaign_question_txt_limit_num {
	font-size: 26rem;
}
.campaign_details_2 .campaign_question_txt_num {
	font-size: 80rem;
	line-height: 1.4;
}
.campaign_details_2 .campaign_question_txt_present {
	font-size: 52rem;
	line-height: 1.2;
}
.campaign_details_2 .campaign_question_txt_exclamation {
	font-size: 56rem;
	line-height: 1;
}
.campaign_question_inner {
	font-size: 24rem;
	color: #676767;
	display: inline-block;
}
.campaign_details.is-opened .campaign_question_inner_txt > span {
    display: none;
}
.campaign_details.is-opened .campaign_question_inner_txt::before {
    content: '閉じる';
}
.campaign_details_plus {
	display: block;
	background-color: #2AA881;
	outline: solid 7rem #fff;
    width: 52rem;
    height: 52rem;
    border-radius: 50%;
    margin: -26rem auto 0;
    position: absolute;
    z-index: 1;
    top: 48%;
    top: 0;
    left: 50%;
    translate: -50% 0%;
}
.campaign_details_plus::before,
.campaign_details_plus::after {
    content: '';
    display: block;
    background-color: var(--color-white);
    width: 28rem;
    height: 4rem;
    position: absolute;
    margin: auto;
    inset: 0;
}
.campaign_details_plus::after {
    rotate: 90deg;
}
.campaign_answer_inner {
	background-color: #1EB283;
	border-radius: 12rem;
	margin: 10rem;
	color: var(--color-white);
	padding: 42rem 48rem;
}
.campaign_answer_txt > dt {
	position: relative;
	font-size: 30rem;
	padding-bottom: 24rem;
	margin-bottom: 24rem;
}
.campaign_answer_txt > dd {
	font-size: 26rem;
}
.campaign_answer_txt_price {
	font-size: 22rem;
}
.campaign_answer_txt_num {
	font-size: 38rem;
}
.campaign_answer_txt_num_2 {
	font-size: 36rem;
}
.campaign_answer_txt_ls {
	letter-spacing: -0.08em;
}
.campaign_answer_list {
	text-align: left;
	counter-reset: number 0;
}
.campaign_answer_list > li {
	display: flex;
	align-items: center;
	column-gap: 22rem;
	
}
.campaign_answer_list > li::before {
	content: counter(number, decimal-leading-zero); 
	counter-increment: number 1;
	font-size: 40rem;
	line-height: 1;
	font-weight: 700;
	color: var(--color-green);
	background-color: var(--color-white);
	width: 84rem;
	height: 84rem;
	border-radius: 50%;
	display: grid;
	place-content: center;
}
.campaign_answer_list > li + li {
	margin-top: 24rem;
}
.campaign_answer_list_date {
	font-size: 22rem;
	display: contents;
}
.campaign_txt_wrap {
	text-align: center;
	margin-top: 40rem;
}
.campaign_txt_img {
	width: 660rem;
}
/* campaign animation */
.animation_ready .campaign_served {
    scale: 0;
    transition: scale 0.5s var(--easeOutBack);
}
.animation_loaded .campaign_served.is_animated {
    scale: 1;
} 
.animation_loaded .campaign_neko_img_wrap.is_animated .campaign_neko_img {
    rotate: 0deg;
    translate: 0rem 0;
}
/* ＋のアニメーション */
.animation_ready .campaign_details_plus {
    scale: 0;
    transition: scale 0.5s 0.6s var(--easeOutBack);
}
.animation_loaded .campaign_details_wrap.is_animated .campaign_details_plus {
    scale: 1;
}

/* campaign リンクエリア */
.campaign_inner {
	background: url(../images/bg_green_bottom.webp) no-repeat top center;
	background-size: auto;
	margin-top: 70rem;
	padding-bottom: 300rem;
}
.campaign_link_area {
	text-align: center;
}
.campaign_link_area_btn {
	color: var(--color-white);
	text-align: center;
	font-size: 24rem;
	width: fit-content;
    margin: 60rem auto 0;
	cursor: pointer;
}
.campaign_link_area_flow {
	display: block;
	color: var(--color-white);
	width: fit-content;
	margin: 32rem auto 0;
}
.campaign_link_area .btn_line {
	font-size: 30rem;
}
.campaign_new_entry {
	margin-top: 65rem;
}
.campaign_link_area_info {
	font-size: 20rem;
	color: var(--color-white);
	margin-top: 40rem;
}
.campaign_link_area_info::before {
	content: '※';
	margin-right: 8rem;
}
.campaign_link_area_info_link {
	color: var(--color-white);
	border-bottom: solid 1px var(--color-white);
}
.campaign_service_link {
	margin-top: 36rem;
}
@media (min-width: 769px) {
	.campaign_link_area_info_link { 
		transition: color 0.3s, border 0.3s;
	}
	@media (hover: hover) {
		.campaign_link_area_info_link:hover {
			color: var(--color-body);
			border-bottom: solid 1px var(--color-body);
		}
	}
}

/* campaign_terms */
.campaign_terms_ttl {
	font-weight: 700;
	text-align: center;
	font-size: 40rem;
	line-height: calc(52/40);
	color: var(--color-green);
}
.campaign_terms_content {
	padding-block: 80rem 120rem;
	border-radius: 16rem;
}
.campaign_terms_answer {
	text-align: left;
	padding-inline: 80rem;
}
.campaign_terms_answer_inner {
	font-size: 28rem;
	padding-top: 44rem;
}
.campaign_terms_list {
	line-height: 1.5;
}
.campaign_terms_list > li + li {
	margin-top: 48rem;
}
.campaign_terms_inner_list > li {
	padding-left: 1em;
	text-indent: -1em;
}
.campaign_terms_label {
	font-weight: 700;
	line-height: calc(48/28);
	color: var(--color-green);
}
.campaign_terms_ol_list_label {
	color: var(--color-green);
	font-weight: 700;
}
.campaign_terms_txt {
	line-height: calc(42/28);
}
.campaign_terms_txt a {
	text-decoration: underline;
	color: var(--color-green);
}
.campaign_terms_table {
	margin-top: 10rem;
	border-left: 2rem solid var(--color-green);
}
.campaign_terms_table tr th:first-child {
	width: 128rem;
	min-width: 128rem;
}
.campaign_terms_table th {
    background: url(../images/bg_green.gif) repeat top center / 320rem auto;
	text-align: center;
	min-height: 67rem;
	font-size: 28rem;
	line-height: calc(42/28);
	color: #fff;
	padding: 13rem;
}
.campaign_terms_table th + th {
	width: 100%;
	border-left: 2rem solid #fff;
	border-right: 2rem solid var(--color-green);
}
.campaign_terms_table tr td:first-child {
	font-weight: 700;
	text-align: center;
}
.campaign_terms_table td {
	padding: 17rem 22rem;
	font-size: 24rem;
	line-height: calc(28/24);
	vertical-align: top;
	border-right: 2rem solid var(--color-green);
	border-bottom: 2rem solid var(--color-green);
}
.campaign_terms_table_list li {
	padding-left: 1em;
	text-indent: -1em;
}

/* about */
.about {
	padding: 76rem 40rem 480rem;
	background: url(../images/bg_beige.webp) no-repeat top center, linear-gradient(180deg, transparent 30%, var(--color-beige) 30%);
	background-size: 100%;
	margin-top: -73rem;
    position: relative;
    z-index: 1;
	overflow-x: clip;
}
.about_ttl {
	text-align: center;
	font-size: 80rem;
	line-height: 1.2;
	margin-top: 25rem;
}
.about_ttl_sm {
	font-size: 64rem;
}
.about_ttl_space {
	letter-spacing: -0.064em;
}
.about_ttl_sub {
	color: var(--color-green);
	display: block;
	font-size: 40rem;
	margin-bottom: 40rem;
}
.about_txt {
	font-size: 28rem;
	margin-top: 52rem;
	line-height: 2.2;
	letter-spacing: 0.07em;
}
.about_list {
	margin-top: 106rem;
}
.about_list > li {
	background-color: var(--color-white);
	border-radius: 40rem;
	position: relative;
}
.about_list > li:nth-child(1){
	padding-block: 66rem 80rem;
}
.about_list > li:nth-child(2){
	padding-block: 24rem 76rem;
}
.about_list > li:nth-child(3){
	padding-block: 200rem 60rem;
}
.about_list > li:nth-child(4){
	padding-block: 52rem 80rem;
}
.about_list > li + li {
	margin-top: 60rem;
}
.about_list_merit {
	background-color: var(--color-green);
	width: 200rem;
	height: 200rem;
	border-radius: 50%;
	position: absolute;
	top: -20rem;
	left: -20rem;
    display: grid;
    place-content: center;
}
.about_list_merit_inner {
	color: #fff;
	font-size: 32rem;
	letter-spacing: -6rem;
	display: grid;
	place-content: center;
	text-align: center;
	margin-top: -12rem;
}
.about_list_merit_num {
	font-size: 92rem;
	line-height: 0.7;
	letter-spacing: 1rem;
}
.about_list_tag {
	color: var(--color-white);
	font-size: 28rem;
	text-align: center;
	line-height: 1.3;
	background: url(../images/bg_tag.svg) no-repeat center;
	background-size: 100%;
    padding: 25rem 28rem 32rem;
	position: absolute;
	top: 40rem;
	right: 0;
}
.about_list_tag_ls {
	letter-spacing: -0.05em;
}
.about_list_inner {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	row-gap: 40rem;
}
.about_list_inner > dt {
	text-align: center;
	font-size: 44rem;
}
.about_list_inner_txt_max {
	font-size: 52rem;
}
.about_list_inner_txt_off {
	font-size: 92rem;
}
.about_list_inner_txt_percent {
	font-size: 60rem;
}
.about_list_inner_price {
	font-size: 64rem;
}
.about_list_inner .color_green {
	font-size: 72rem;
	letter-spacing: 2.2rem;
}
.about_list_img_1 {
	width: 524rem;
}
.about_list_img_2 {
	width: 342rem;
}
.about_list_img_3 {
	width: 438rem;
}
.about_list_img_4 {
	width: 474rem;
}
.about_list_inner_info {
	font-size: 20rem;
	padding-inline: 40rem;
	margin-top: 60rem;
}
.about_list_inner_info > li {
	text-indent: -30rem;
	padding-left: 30rem;
}
.about_list_inner_info > li::before {
	content: '※';
	margin-right: 10rem;
}
.about_list_inner_info > li+li {
	margin-top: 10rem;
}
.about_list .btn_line{
	font-size: 30rem;
	margin-top: 80rem;
}
.about_list_inner_note {
	font-size: 24rem;
	display: grid;
	place-content: center;
	margin-top: 44rem;
	line-height: 1;
}
.about_list_inner_note > li {
	text-indent: -31rem;
	padding-left: 31rem;
}
.about_list_inner_note > li::before {
	content: '※';
	margin-right: 6rem;
}

.about_product_list_wrap {
	display: flex;
	align-items: center;
	width: 780rem;
	margin-top: 100rem;
}
.about_product_list {
	display: flex;
	align-items: center;
	column-gap: 40rem;
}
.about_product_list > li {
	position: relative;
	width: 276rem;
	height: 334rem;
	flex-shrink: 0;
	border-radius: 36rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
	padding-block: 24rem;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(1){
	background-color: #81C0E9;
	margin-left: 40rem;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(2){
	background-color: #82B5B2;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(3){
	background-color: #E69D50;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(4){
	background-color: #FFDC6C;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(5){
	background-color: #81C0E9;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(6){
	background-color: #FF8683;
}
.about_product_list_wrap_1 .about_product_list > li:nth-child(7){
	background-color: #82B5B2;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(1){
	background-color: #E69D50;
	margin-left: 40rem;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(2){
	background-color: #FFDC6C;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(3){
	background-color: #81C0E9;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(4){
	background-color: #82B5B2;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(5){
	background-color: #FF8683;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(6){
	background-color: #E69D50;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(7){
	background-color: #FFDC6C;
}
.about_product_list_wrap_2 .about_product_list > li:nth-child(8){
	background-color: #81C0E9;
}
.about_product_off {
	position: absolute;
    top: -40rem;
    left: -30rem;
    background: url(../images/lineup_icon.svg) no-repeat center;
    background-size: contain;
    color: var(--color-white);
    width: 140rem;
    height: 140rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-align: center;
    z-index: 2;
}
.about_product_off_l {
	font-size: 46rem;
}
.about_product_off_m {
	font-size: 30rem;
}
.about_product_off_s {
	font-size: 26rem;
}
.about_product_off_price {
	text-align: center;
}
.about_product_off_price_txt {
	font-size: 16rem;
}
.about_product_off_price_num_1 {
	font-size: 30rem;
	position: relative;
	margin-left: 8rem;
}
.about_product_off_price_num_1::before{
	content: '';
	width: calc(100% + 4rem);
	height: 2rem;
	background-color: var(--color-body);
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.about_product_off_price_yen_1 {
	font-size: 20rem;
}
.about_product_off_price_num_2 {
	font-size: 48rem;
	line-height: 1;
}
.about_product_off_price_yen_2 {
	font-size: 28rem;
}
.tsunagu_select_img_wrap {
	background-color: var(--color-beige);
	width: 176rem;
	height: 176rem;
	border-radius: 50%;
	display: grid;
	place-content: center;
	position: absolute;
	top: -80rem;
	left: 50%;
	transform: translateX(-50%);
}
.tsunagu_select_img {
	width: 120rem;
}
.product_img {
	width: 240rem;
	margin-bottom: -26rem;
}
/* about animation */
.animation_loaded .tsunagu_select_img_wrap.is_animated .tsunagu_select_img {
    scale: 1;
}
.animation_ready .tsunagu_select_img {
    scale: 0;
    transition: scale 0.5s var(--easeOutBack);
}
.animation_loaded .about_product_wrap.is_animated .about_product_off {
    scale: 1;
}
.animation_ready .about_product_off {
    scale: 0;
    transition: scale 0.5s 0.3s var(--easeOutBack);
}
.about_product_list_wrap_1 .about_product_list:first-child{
    animation: loop 150s -75s linear infinite;
}
.about_product_list_wrap_1 .about_product_list:last-child{
    animation: loop2 150s linear infinite;
}
.about_product_list_wrap_2 .about_product_list:first-child{
    animation: loop-reverse 150s -75s linear infinite;
}
.about_product_list_wrap_2 .about_product_list:last-child{
    animation: loop2-reverse 150s linear infinite;
}

/* qa */
.qa {
    padding: 475rem 48rem 0;
    background-color: #FCFBF6;
	margin-top: -374rem;
	overflow-x: clip;
}
.qa_ttl {
	color: var(--color-light-green);
	text-align: center;
	font-size: 48rem;
	margin-top: 140rem;
}
.qa_details {
	margin-top: 40rem;
}
.qa_details + .qa_details {
	margin-top: 10rem;
}
.qa_question {
	display: flex;
	align-items: center;
	gap: 0 10rem;
	position: relative;
}
.qa_question::before,
.qa_question::after {
	content: '';
	position: absolute;
	background-color: #000;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 2rem;
}
.qa_question::before {
	right: 25rem;
	width: 27rem;
	height: 3rem;
}
.qa_question::after {
	right: 37rem;
	width: 3rem;
	height: 27rem;
	transition: opacity .3s;
}
.qa_details[open="true"] .qa_question::after {
	opacity: 0;
}
.qa_question_en {
	color: var(--color-green);
	font-size: 40rem;
}
.qa_question_txt {
	font-size: 28rem;
	position: relative;
	padding: 24rem 103rem 24rem 0;
	flex: auto;
}
.qa_question_txt::before,
.qa_question_txt::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	background-color: var(--color-green);
}
.qa_question_txt::before {
	left: 0;
	width: 100%;
	height: 4rem;
	border-radius: 2rem;
}
.qa_question_txt::after {
	right: 0;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	margin-bottom: -4rem;
}
.qa_answer {
	font-size: 28rem;
    line-height: 1.5;
	overflow: hidden;
} 
.qa_answer_inner {
	padding-top: 20rem;
	padding-left: 50rem;
	position: relative;
}
.qa_answer_s {
	font-size: 24rem;
    margin-top: 6rem;	
}
.qa_answer_inner::before {
	position: absolute;
	top: 10rem;
	left: 0;
	content: 'A.';
	color:#bcc93f;
	font-weight: 700;
	font-size: 40rem;
}

/* voice */
.voice {
	padding-block: 180rem 240rem;
	overflow: hidden;
	background-color: #FCFBF6;
}
.voice_ttl {
	text-align: center;
	line-height: 1;
	font-size: 48rem;
	color: var(--color-light-green);
}
.voice_list {
	margin-top: 80rem;
}
.voice_list {
	padding-inline: 48rem;
	transition-timing-function: linear;
}
.voice_list > li {
	flex-shrink: 0;
	width: 460rem !important;
	min-height: 540rem;
	border-radius: 40rem;
	padding: 60rem;
}
.voice_list_item_1 {
	background-color: #81C0E9;
}
.voice_list_item_2 {
	background-color: #FFDC6C;
}
.voice_list_item_3 {
	background-color: #F18F8C;
}
.voice_list_item_4 {
	background-color: #82B5B2;
}
.voice_list_item_5 {
	background-color: #E69D50;
}
.voice_list_item_6 {
	background-color: #FFDC6C;
}
.voice_list_item_7 {
	background-color: #82B5B2;
}
.voice_img_wrap {
	width: 160rem;
	margin: auto;
	overflow: hidden;
	border-radius: 50%;
}
.voice_star {
	color: rgba(255, 255, 255, 0.3);
	font-size: 32rem;
    margin-top: 14rem;
    letter-spacing: 0.16em;
}
.voice_star_white {
	color: var(--color-white);
}
.voice_txt {
	font-size: 28rem;
	line-height: calc(42/28);
	margin-top: 17rem;
}
.voice_ago {
	font-size: 28rem;
	line-height: calc(42/28);
	color: var(--color-white);
	margin-top: 14rem;
}
.voice_info {
	font-size: 20rem;
	padding-inline: 96rem 64rem;
	margin-top: 40rem;
	text-indent: -32rem;
}
.voice_info::before{
	content: '※';
	margin-right: 12rem;
}


/* flow */
.flow {
	background: url(../images/bg_beige.webp) no-repeat top center, linear-gradient(180deg, transparent 50%, var(--color-beige) 50%);
	background-size: 100%;
	padding: 105rem 40rem 510rem;
	margin-top: -73rem;
    position: relative;
    z-index: 1;
}
.flow_ttl {
	font-size: 28rem;
	text-align: center;
	background-color: var(--color-orange);
	color: var(--color-white);
	border-radius: 40rem;
	width: 360rem;
	padding-block: 14rem 16rem;
	position: absolute;
	top: -40rem;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center center; 
}
.flow_ttl::after {
	content: '';
	width: 50rem;
	height: 50rem;
	background-color: var(--color-orange);
	border-radius: 4rem;
	position: absolute;
	bottom: -20rem;
	left: 50%;
	transform: translateX(-50%);
	rotate: 45deg;
	z-index: -1;
}
.flow_txt {
	text-align: center;
	font-size: 48rem;
	line-height: 1.3;
}
.flow_txt_step {
	font-size: 80rem;
	letter-spacing: -0.1em;
    padding-right: 15rem;
    display: inline-block;
}
.flow_txt_num {
	font-size: 108rem;
	line-height: 1.2;
}
.flow_txt_campaign {
	font-size: 64rem;
	letter-spacing: -0.05em;
}
.flow_list {
	margin-top: 80rem;
	counter-reset: number 0; 
}
.flow_list > li {
	display: flex;
	flex-direction: row-reverse;
	justify-content: start;
	align-items: center;
	column-gap: 40rem;
	position: relative;
}
.flow_list > li::before {
	content: counter(number, decimal-leading-zero); 
	counter-increment: number 1;
	font-size: 44rem;
	position: absolute;
	top: 0;
	left: 6rem;
}
.flow_list > li:nth-child(2):before {
	top: 30rem;
}
.flow_list > li + li {
	margin-top: 32rem;
}
.flow_list_txt {
	font-size: 36rem;
}
.flow_list_txt_sm {
	font-size: 30rem;
}
.flow_list_txt_num {
	font-size: 50rem;
}
.flow_list_img_wrap {
	background-color: var(--color-yellow);
	border-radius: 50%;
	width: 190rem;
	height: 190rem;
	display: grid;
	place-content: center;
}
.flow_list_img_1 {
	width: 190rem;
}
.flow_list_img_2 {
	width: 102rem;
	margin-top: -14rem;
    margin-left: 25rem;
}
.flow_list_img_3 {
	width: 104rem;
	margin-right: 18rem;
    margin-top: 16rem;
}
.flow_desc {
	margin-top: 116rem;
}
.flow_desc_ttl {
	font-size: 44rem;
	color: var(--color-green);
	text-align: center;
	letter-spacing: 0.02em;
}
.flow_desc_ttl_num {
	font-size: 60rem;
}
.flow_desc_box_wrap + .flow_desc_box_wrap{
	margin-top: 50rem;
}
.flow_desc_box {
	background-color: #FCFBF6;
	border-radius: 60rem;
	padding: 40rem 50rem 70rem;
	text-align: center;
	margin-top: 40rem;
}
.flow_desc_box > dt {
	font-size: 32rem;
	background-color: var(--color-green);
	color: var(--color-white);
	border-radius: 40rem;
	width: 440rem;
	margin-inline: auto;
	padding-block: 8rem 6rem;
	position: relative;
	z-index: 1;
}
.flow_desc_box > dt:not(:first-of-type) {
	margin-top: 70rem;
}
.flow_desc_box_line{
	width: 580rem;
	height: 4rem;
	background-color: var(--color-green);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.flow_desc_box_line::before,
.flow_desc_box_line::after {
	content: '';
	background-color: var(--color-green);
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.flow_desc_box_line::before {
	left: 0;
}
.flow_desc_box_line::after {
	right: 0;
}
.flow_desc_box_ttl_num {
	font-size: 44rem;
	line-height: 1;
}
.flow_desc_box > dd {
	font-size: 44rem;
	margin-top: 20rem;
}
.flow_desc_box_num {
	font-size: 60rem;
	line-height: 1;
}
.flow_desc_box_txt {
	font-size: 44rem;
	padding: 40rem 60rem 48rem;
	line-height: 1.1;
}
.flow_desc_box_txt_sm {
	font-size: 36rem;
}
.flow_desc_box_link {
	font-size: 30rem;
	font-weight: 500;
}
/* flow animation */
.animation_loaded .flow_ttl.is_animated {
	transform: translateX(-50%) scale(1);
}
.animation_ready .flow_ttl {
	transform: translateX(-50%) scale(0);
	transition: transform 0.5s var(--easeOutBack);
}
.animation_loaded .flow_list.is_animated .flow_list_img {
    scale: 1;
}
.animation_ready .flow_list_img {
    scale: 0;
    transition: scale 0.5s 0.5s var(--easeOutBack);
}

/* sns */
.sns {
	background-color: var(--color-white);
	padding-top: 80rem;
	padding-bottom: 80rem;
}
.sns_ttl {
	text-align: center;
	font-size: 32rem;
	color: var(--color-green);
	background: url(../images/sns_ttl.svg) no-repeat center center;
	background-size: contain;
	width: 449rem;
	height: 94rem;
	margin: auto;
	padding-top: 12rem;
}
.sns_list {
	margin-top: 40rem;
	display: flex;
	justify-content: center;
	gap: 70rem;
}
.sns_list li {
	width: 141rem;
}

/* footer */
.footer {
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
}
.ft_logo_miraiz {
    width: 240rem;
    margin-inline: auto;
    display: block;
}
.ft_copy {
    font-size: 20rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: center;
    margin-top: 40rem;
    white-space: nowrap;
}
.ft_block_line {
	display: block;
    padding-block: 40rem;
    margin-top: 40rem;
    border-top: 2rem solid #ccc;
    background-color: var(--color-white);
}
.ft_logo_ghibli {
    width: 560rem;
    display: block;
    margin-inline: auto;
}
.ft_logo_katene {
    display: block;
    width: 174rem;
    margin: 80rem auto 0;
}
@media only screen and (min-width: 1021px) {
	.footer {
		padding-block: 30rem 20rem;
	}
}
@media only screen and (max-width: 1020px) {
	.footer {
		padding-block: 30rem 160rem;
	}
}

/* loop animation */
@keyframes loop {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(-100%)
    }
}
@keyframes loop2 {
	0% {
    transform: translateX(0);
	}
	100% {
		transform: translateX(-200%);
	}
}
@keyframes loop-reverse {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%)
    }
}
@keyframes loop2-reverse {
	0% {
		transform: translateX(-200%);
	}
	100% {
		transform: translateX(0);
	}
}

/* modal */
body.is_modal_show {
    overflow: hidden;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--menu-zindex) + 2);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s 0s, transform 0s 0.3s;
}
.modal_content::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.9;
    background: url(../images/menu_bg_green.gif) repeat top center / 320rem auto;
}
.modal_content.is_modal_show {
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0.3s 0s, transform 0s 0s;
}
.modal_scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    letter-spacing: -0.5em; /*inline-blockの隙間をなくす*/
}
.modal_scroll_inner {
    text-align: center;
    margin: auto;
    padding: 120rem 16rem 270rem; /* 外側の余白*/
    max-width: 760rem;
    width: 100%;
    letter-spacing: normal; /* letter-spacing 戻す*/
    line-height: 1.5;
}
.modal_inner {
    background-color: #fff;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
}

/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
.modal_close {
	width: 100rem;
	height: 100rem;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 7rem 10rem 0px 0px rgba(29, 155, 115);
	position: absolute;
	bottom: -150rem;
	left: 0;
	right: 0;
	margin-inline: auto;
}
.modal_close::before,
.modal_close::after {
	content: "";
	display: block;
	width: 50rem;
	height: 6rem;
	border-radius: 100rem;
	background-color: var(--color-green);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.modal_close::before {
	rotate: 45deg;
}
.modal_close::after {
	rotate: -45deg;
}

/* close_btn */
.close_btn {
	background-color: #666;
    border: 4px solid #666;
	color: #fff;
	box-shadow: none;
	pointer-events: none;
	position: relative;
}
.close_btn_bg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 60rem;
	background: url(../images/btn_bg_close.gif) repeat center / 6px 1px;
	border: 2px solid #666;
	position: absolute;
    bottom: -10px;
	left: 0;
    z-index: -1;
}