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

WAVEから便利な新商品
「eyeケースショルダー」が登場！

========================================================= */
#wave-eyecaseshoulder {
	color: #353535;
	letter-spacing: 0.05em;
	font-size: min(2.91vw, 14px);
	background-color: #fefdf5;
	overflow-x: hidden;
}

#wave-eyecaseshoulder * {
	font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
	line-height: 1.5;
}

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

#wave-eyecaseshoulder div,
#wave-eyecaseshoulder p,
#wave-eyecaseshoulder dt,
#wave-eyecaseshoulder dd,
#wave-eyecaseshoulder h1,
#wave-eyecaseshoulder h2,
#wave-eyecaseshoulder h3,
#wave-eyecaseshoulder ul,
#wave-eyecaseshoulder li,
#wave-eyecaseshoulder a {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

#wave-eyecaseshoulder em {
	font-style: normal;
}

#wave-eyecaseshoulder a {
	text-decoration: none;
}

#wave-eyecaseshoulder em {
	font-style: normal;
}

#wave-eyecaseshoulder img {
	max-width: 100%;
	vertical-align: bottom;
}

#wave-eyecaseshoulder .sec_cont {
	padding-top: 27%;
	position: relative;
}
#wave-eyecaseshoulder .sec_title {
	position: relative;
	font-size: 5.2vw;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 3.8%;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .sec_title {
	font-size: 24px;
	}
}
#wave-eyecaseshoulder .sec_title img {
	display: inline-block;
	vertical-align: middle;
}
#wave-eyecaseshoulder .sec_title_sub {
	font-family: "Schibsted Grotesk", "Noto Sans JP", sans-serif;
	font-size: 3.7vw;
	color: #ac4335;
	display: block;
	line-height: 1;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .sec_title_sub {
	font-size: 17px;
	}
}
#wave-eyecaseshoulder .sec_inner {
	width: 83.3%;
	margin: 0 auto;
}
#wave-eyecaseshoulder .back_blue {
	background-color: #c9b99f;
	color: #fff;
	padding: 8.1% 0;
}

#wave-eyecaseshoulder .sec_mv {
	background: url(/campaign/wave-eyecaseshoulder/img/mv_back.png) no-repeat;
	background-size: cover;
	padding-bottom: 10%;
	position: relative;
	z-index: 5;
}
#wave-eyecaseshoulder .mv_title {
	position: absolute;
	width: 29%;
	right: 5%;
	top: 4.3%;
	z-index: 10;
}
#wave-eyecaseshoulder .mv_img {
	position: relative;
	width: 124%;
	left: -14%;
	overflow: hidden;
	transition-delay: 1000ms !important;
}
#wave-eyecaseshoulder .mv_img img {
	display: block;
	position: relative;
	margin-top: -6%;
	padding-bottom: 5%;
}
#wave-eyecaseshoulder .mv_dec {
	position: absolute;
	bottom: -9.5%;
	left: 4%;
	width: 27.5%;
	transition-delay: 1500ms !important;
}

/* product
-------------------------------------- */
#wave-eyecaseshoulder .sec_product {
	position: relative;
	background: url(/campaign/wave-eyecaseshoulder/img/product_back.png) no-repeat;
	background-size: cover;
	padding: 43.5% 0 5%;
	margin: -27% 0 3%;
	z-index: 0;
}
#wave-eyecaseshoulder .sec_product .sec_title {
	font-size: 5.2vw;
	margin-bottom: 3.5%;
	letter-spacing: 0.08em;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .sec_product .sec_title {
	font-size: 24px;
	}
}
#wave-eyecaseshoulder .sec_product .sec_title .title_koko {
	width: 13%;
	margin-right: 5px;
}
#wave-eyecaseshoulder .sec_product .sec_title .title_heart {
	width: 4.1%;
	vertical-align: initial;
	margin-left: 2px;
}
#wave-eyecaseshoulder .delay_top {
	transition-delay: 3400ms !important;
}
#wave-eyecaseshoulder .product_main_img {
	width: 87%;
	margin: 0 auto 31%;
	padding-left: 3%;
	animation: huwahuwa 1.8s ease-in-out infinite alternate-reverse;
}
#wave-eyecaseshoulder .product_point {
	position: relative;
}
#wave-eyecaseshoulder .product_point::before, #wave-eyecaseshoulder .product_point::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .product_point::before {
	width: 17%;
	height: 8%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_girl_01.png) no-repeat;
	background-size: contain;
	top: -7.5%;
	right: 8%;
	z-index: 15;
}
#wave-eyecaseshoulder .product_point::after {
	width: 10%;
	height: 2.8%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_02.png) no-repeat;
	animation: 5s linear infinite flower;
	transform-origin: 50% 50% 0;
	background-size: contain;
	bottom: -5%;
	right: 12.5%;
}
#wave-eyecaseshoulder .product_point_area img {
	display: block;
}
#wave-eyecaseshoulder .product_point_area .point_img {
	position: relative;
	width: 73.7%;
	margin-top: -5.5%;
}
#wave-eyecaseshoulder .product_point_area .point_img_main {
	position: relative;
}
#wave-eyecaseshoulder .product_point_area .point_title {
	position: absolute;
}
#wave-eyecaseshoulder .product_point_area .point_img_koko {
	position: absolute;
	z-index: 10;
	width: 17.5%;
	animation: girl02 3500ms infinite steps(1) 1000ms;
	transform-origin: 50% 50% 0;
}
#wave-eyecaseshoulder .point01 .point_img {
	left: -5%;
}
#wave-eyecaseshoulder .point01 .point_img::before, #wave-eyecaseshoulder .point01 .point_img::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .point01 .point_img::before {
	width: 12.5%;
	height: 12.5%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_02.png) no-repeat;
	animation: 5s linear infinite flower;
	background-size: contain;
	top: 8.5%;
	right: -38%;
	z-index: 15;
}
#wave-eyecaseshoulder .point01 .point_img::after {
	width: 12.5%;
	height: 12.5%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_01.png) no-repeat;
	animation: 4s linear infinite flower;
	transform-origin: 50% 50% 0;
	background-size: contain;
	bottom: 0%;
	left: 17%;
}
#wave-eyecaseshoulder .point01 .point_title {
	right: -10%;
	top: 0;
	width: 20.5%;
}
#wave-eyecaseshoulder .point01 .point_img_koko {
	top: 7%;
	right: 30%;
}
#wave-eyecaseshoulder .point02 .point_img {
	left: 40%;
}
#wave-eyecaseshoulder .point02 .point_img::before, #wave-eyecaseshoulder .point02 .point_img::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .point02 .point_img::after {
	width: 12.5%;
	height: 12.5%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_01.png) no-repeat;
	animation: 4s linear infinite flower;
	transform-origin: 50% 50% 0;
	background-size: contain;
	bottom: -7%;
	right: 34%;
}
#wave-eyecaseshoulder .point02 .point_title {
	left: -12%;
	top: 20%;
	width: 20.5%;
}
#wave-eyecaseshoulder .point02 .point_img_koko {
	top: 10%;
	right: 40%;
	animation: girl02 3500ms infinite steps(1) 1000ms;
	transform-origin: 50% 50% 0;
}
#wave-eyecaseshoulder .point03 .point_img {
	left: -7%;
}
#wave-eyecaseshoulder .point03 .point_img::before, #wave-eyecaseshoulder .point03 .point_img::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .point03 .point_img::before {
	width: 38.5%;
	height: 54%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_girl_02.png) no-repeat;
	background-size: contain;
	top: -49.5%;
	left: 14%;
	z-index: 15;
}
#wave-eyecaseshoulder .point03 .point_img::after {
	width: 12.5%;
	height: 12.5%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_02.png) no-repeat;
	animation: 5s linear infinite flower;
	background-size: contain;
	bottom: 0%;
	left: 17%;
}
#wave-eyecaseshoulder .point_title {
	right: -36%;
	top: 34%;
	width: 46%;
}
#wave-eyecaseshoulder .point_img_koko {
	top: 23%;
	right: 20%;
}
#wave-eyecaseshoulder .point04 .point_img {
	left: 36%;
}
#wave-eyecaseshoulder .point04 .point_img::before, #wave-eyecaseshoulder .point04 .point_img::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .point04 .point_img::before {
	width: 27.3%;
	height: 35%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_item_02.png) no-repeat;
	background-size: contain;
	top: -26%;
	right: 35%;
	z-index: 15;
}
#wave-eyecaseshoulder .point04 .point_img::after {
	width: 40.5%;
	height: 33%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_item_03.png) no-repeat;
	background-size: contain;
	top: 10%;
	left: -27%;
}
#wave-eyecaseshoulder .point04 .point_title {
	left: -37%;
	top: 58%;
	width: 67.5%;
}
#wave-eyecaseshoulder .point04 .point_img_koko {
	top: 9%;
	right: 22%;
}
#wave-eyecaseshoulder .point04 .point_example {
	position: absolute;
	width: 55%;
	left: 40%;
}
#wave-eyecaseshoulder .point04 .point_under {
	position: relative;
}
#wave-eyecaseshoulder .point04 .point_under::before {
	content: "";
	display: block;
	position: absolute;
	width: 10%;
	height: 17%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_line.png) no-repeat;
	background-size: contain;
	top: -6%;
	left: 29%;
	z-index: 15;
}
#wave-eyecaseshoulder .point04 .point_girl {
	position: relative;
	width: 33%;
	left: 6%;
	margin-top: -2%;
	transform-origin: 50% 50% 0;
	z-index: 5;
}
#wave-eyecaseshoulder .back_text {
	position: absolute;
	width: 148%;
}
#wave-eyecaseshoulder .back_text.text_01 {
	top: -6.3%;
	left: -4%;
	transform: rotate(-7deg) translateX(70%);
	transition: 0.5s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .back_text.text_01.is-show {
	top: -6.3%;
	left: -4%;
	transform: rotate(-7deg);
}
#wave-eyecaseshoulder .back_text.text_02 {
	bottom: 3.3%;
	left: -43%;
	transform: rotate(15deg) translateX(-70%);
	transition: 0.5s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .back_text.text_02.is-show {
	bottom: 3.3%;
	left: -43%;
	transform: rotate(15deg);
}

/* 様々なシーンで使える
-------------------------------------- */
#wave-eyecaseshoulder .sec_situation .uneune_blue svg {
	top: 8vw;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .sec_situation .uneune_blue svg {
	top: 37px;
	}
}
#wave-eyecaseshoulder .sec_situation .sec_title {
	margin-bottom: 8%;
}
#wave-eyecaseshoulder .sec_situation .back_blue {
	padding: 8.3% 0 21%;
}
#wave-eyecaseshoulder .swiper-slide img {
	height: auto;
	width: 100%;
}
#wave-eyecaseshoulder .swiper-horizontal > .swiper-pagination-bullets,
#wave-eyecaseshoulder .swiper-pagination-bullets.swiper-pagination-horizontal,
#wave-eyecaseshoulder .swiper-pagination-custom,
#wave-eyecaseshoulder .swiper-pagination-fraction {
	bottom: -12%;
}
#wave-eyecaseshoulder .container {
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	position: relative;
}
#wave-eyecaseshoulder .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 1;
}
#wave-eyecaseshoulder .swiper-pagination-bullet-active {
	background: #353535;
}

/* 使い方
-------------------------------------- */

#wave-eyecaseshoulder .sec_use .sec_title::before, #wave-eyecaseshoulder .sec_use .sec_title::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .sec_use .sec_title::before {
	width: 8.3%;
	height: 56%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_01.png) no-repeat;
	animation: 4s linear infinite flower;
	transform-origin: 50% 50% 0;
	background-size: contain;
	top: -54%;
	left: 21%;
}
#wave-eyecaseshoulder .sec_use .sec_title .title_point {
	position: absolute;
	width: 21.5%;
	height: 95%;
	top: -66%;
	right: 17%;
}
#wave-eyecaseshoulder .use_video {
	width: 88%;
	margin: 0 auto;
}
#wave-eyecaseshoulder iframe {
	width: 100%;
}

/* 購入
-------------------------------------- */

#wave-eyecaseshoulder .sec_purchase {
	margin-bottom: 5%;
}
#wave-eyecaseshoulder .sec_purchase .sec_title::before, #wave-eyecaseshoulder .sec_purchase .sec_title::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .sec_purchase .sec_title::after {
	width: 9.3%;
	height: 65%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_02.png) no-repeat;
	animation: 5s linear infinite flower;
	background-size: contain;
	top: -34%;
	right: 21%;
}
#wave-eyecaseshoulder .sec_purchase .sec_title .title_point {
	position: absolute;
	width: 21.5%;
	height: 115%;
	top: -64%;
	left: 21%;
}
#wave-eyecaseshoulder .purchase_form {
	background-color: #fefdf5;
	color: #353535;
	border-radius: 3.8em;
	padding: 8.5% 11%;
	margin-bottom: 1.5em;
}
#wave-eyecaseshoulder .purchase_title {
	font-size: 4.68vw;
	font-weight: 700;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .purchase_title {
	font-size: 22px;
	}
}
#wave-eyecaseshoulder .purchase_price {
	color: #a52728;
	font-size: 5vw;
	font-weight: 800;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .purchase_price {
	font-size: 23px;
	}
}
#wave-eyecaseshoulder .purchase_price span {
	font-size: 0.7em;
}
#wave-eyecaseshoulder .aui_goods_data_box {
	margin: 5% 0;
	padding: 0 5%;
}
#wave-eyecaseshoulder .aui_form_select {
	background-color: #fefdf5;
}
#wave-eyecaseshoulder .purchase_text dd:last-of-type {
	margin-bottom: 0;
}
#wave-eyecaseshoulder .purchase_text_date {
	font-size: min(2.9vw, 15px);
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin-bottom: 1em;
	font-weight: 400;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .purchase_text_date {
	font-size: 13.5px;
	}
}

/* キャンペーン */
#wave-eyecaseshoulder .sec_campaign {
	margin-bottom: 10%;
}
#wave-eyecaseshoulder .sec_campaign .sec_title {
	margin-bottom: 5%;
}
#wave-eyecaseshoulder .sec_campaign .sec_title::before, #wave-eyecaseshoulder .sec_campaign .sec_title::after {
	content: "";
	display: block;
	position: absolute;
}
#wave-eyecaseshoulder .sec_campaign .sec_title::before {
	width: 8.3%;
	height: 56%;
	background: url(/campaign/wave-eyecaseshoulder/img/dec_flower_01.png) no-repeat;
	animation: 4s linear infinite flower;
	transform-origin: 50% 50% 0;
	background-size: contain;
	top: -54%;
	left: 21%;
}
#wave-eyecaseshoulder .campaign_text {
	padding: 0 4%;
	margin-bottom: 4%;
}

/* 注意事項より下 */
#wave-eyecaseshoulder .attend_title {
	font-weight: 700;
	margin-bottom: 0.5em;
	font-size: min(3.12vw, 16px);
}
#wave-eyecaseshoulder .under_attend {
	border-top: #ac4335 2px solid;
	border-bottom: #ac4335 2px solid;
	padding: 8.3% 0;
}
#wave-eyecaseshoulder .attend_text {
	line-height: 1.8;
	font-size: min(2.9vw, 15px);
	font-weight: 500;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .attend_text {
	font-size: 13.5px;
	}
}
#wave-eyecaseshoulder .under_wave {
	position: relative;
	margin: 0 auto;
	padding: 15% 0 30%;
	width: 46.3%;
}
#wave-eyecaseshoulder .under_wave .uneune_blue svg {
	top: initial;
	bottom: 19%;
	left: 45%;
	transform: rotate(270deg);
}

/* アニメーション
-------------------------------------- */
@keyframes flower {
	0% {
	transform: rotate(0);
	}
	100% {
	transform: rotate(360deg);
	}
}
@keyframes girl01 {
	0%, 10%, 20%, 30% {
	transform: rotate(0);
	}
	5%, 15%, 25% {
	transform: rotate(8deg);
	}
}
@keyframes girl02 {
	0%, 35%, 45%, 55%, 65% {
	transform: rotate(0);
	}
	40%, 50%, 60% {
	transform: rotate(8deg);
	}
}
@keyframes huwahuwa {
	0% {
	transform: translateY(-2%);
	}
	100% {
	transform: translateY(5%);
	}
}

/* インビュー
-------------------------------------- */
#wave-eyecaseshoulder .fadeIn_up {
	opacity: 0;
	transform: translate(0, 20%);
	transition: 1s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
}
#wave-eyecaseshoulder .fadeIn_down {
	opacity: 0;
	transform: translate(0, -20%);
	transition: 1s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .fadeIn_down.is-show {
	transform: translate(0, 0);
	opacity: 1;
}
#wave-eyecaseshoulder .fadeIn_zoom {
	transform: scale(0.2);
	transition: 0.5s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .fadeIn_zoom.is-show {
	transform: scale(1);
}
#wave-eyecaseshoulder .fadeIn_turn {
	opacity: 0;
	transform: rotateY(0deg);
	transition: 1s;
	transition-delay: 250ms;
}
#wave-eyecaseshoulder .fadeIn_turn.is-show {
	transform: rotateY(360deg);
	opacity: 1;
}
#wave-eyecaseshoulder .display_up {
	display: none;
}
#wave-eyecaseshoulder .display_up.is-show {
	display: block;
}
#wave-eyecaseshoulder .slide_right {
	display: block;
	position: relative;
	-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
}
#wave-eyecaseshoulder .slide_right.is-show {
	animation: slide_right 0.2s linear forwards;
}
@keyframes slide_right {
	0% {
	-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
	}
	100% {
	-webkit-clip-path: inset(0);
			clip-path: inset(0);
	}
}
#wave-eyecaseshoulder .slide_left {
	display: block;
	position: relative;
	-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
}
#wave-eyecaseshoulder .slide_left.is-show {
	animation: slide_left 1s linear forwards;
}
@keyframes slide_left {
	0% {
	-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
	}
	100% {
	-webkit-clip-path: inset(0);
			clip-path: inset(0);
	}
}
#wave-eyecaseshoulder .delay {
	transition-delay: 1000ms !important;
}
#wave-eyecaseshoulder .delay_anime.is-show {
	animation-delay: 1000ms;
}

/* SVG */
#wave-eyecaseshoulder .uneune svg {
	display: block;
	position: absolute;
	width: 1.4vw;
	height: 15vw;
	left: 50%;
	transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .uneune svg {
	width: 6.4px;
	height: 69px;
	}
}
#wave-eyecaseshoulder .uneune_orange svg {
	bottom: -5%;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .uneune_orange svg {
	width: 6.4px;
	height: 69px;
	}
}
#wave-eyecaseshoulder .uneune_orange svg path {
	animation-delay: 3250ms !important;
}
#wave-eyecaseshoulder .uneune_blue svg {
	top: 5vw;
}
@media screen and (min-width: 768px) {
	#wave-eyecaseshoulder .uneune_blue svg {
	width: 6.4px;
	height: 69px;
	top: 37px;
	}
}
#wave-eyecaseshoulder .cls {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: min(1.8vw, 7px);
}
#wave-eyecaseshoulder .cls_01 {
	stroke: #ac4335;
}
#wave-eyecaseshoulder .cls_02 {
	stroke: #ac4335;
}
#wave-eyecaseshoulder #wavePath {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 5s linear forwards;
	animation-delay: 2500ms;
}
#wave-eyecaseshoulder #wavePath02,
#wave-eyecaseshoulder #wavePath03,
#wave-eyecaseshoulder #wavePath04,
#wave-eyecaseshoulder #wavePath05 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
#wave-eyecaseshoulder .uneune_anime .cls_02 {
	animation: draw 5s linear forwards;
}
@keyframes draw {
	to {
	stroke-dashoffset: 0;
	}
}

/* 追従バナー */
#wave-eyecaseshoulder .fix_menu {
	display: block;
	position: fixed;
	bottom: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, 464px);
	opacity: 0;
	transition: all 0.5s ease;
}
#wave-eyecaseshoulder .fix_flex {
	display: flex;
}
#wave-eyecaseshoulder .fix_menu.fixed_open {
	opacity: 1;
	bottom: 0;
}

/* 共通調整
-------------------------------------- */

#wave-eyecaseshoulder .right-eye table tr:nth-child(odd),
#wave-eyecaseshoulder .left-eye table tr:nth-child(odd),
#wave-eyecaseshoulder .productForm table tr:nth-child(odd),
#wave-eyecaseshoulder .glasses-select table tr:nth-child(odd){
	background-color: #fefdf5;
}
#wave-eyecaseshoulder table{
	margin: 5% 0;
}

#pagetop {
	bottom: 10%;
}

@media screen and (min-width: 768px) {
	#pagetop {
	bottom: 10px;
	}
}