@charset "UTF-8";

/* ---------- common style ---------------------------------------- */
* {
	margin: 0;
	padding: 0;
}
header,
main,
article,
section,
nav,
aside,
figure,
footer {
	display: block;
}
body {
	background-color: #fff;
	overflow-x: hidden;
}
body,td,th,h1,h2,h3,h4,h5,h6,p,dt,dd,li,button {
	font-size: 100%;
	font-family: 'dnp-shuei-mgothic-std','游ゴシック','YuGothic',"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",'メイリオ','Meiryo',sans-serif;
	font-weight: 600;
	color: #98605E;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 14px;
	font-weight: 500;
	line-height: 160%;
}
p {
	font-size: 16px;
	line-height: 200%;
	letter-spacing: 0.03em;
}
address {
	font-size: 13px;
	line-height: 200%;
	font-style: 500;
	letter-spacing: 0.03em;
}
dt, dd {
	font-size: 13px;
	line-height: 180%;
	letter-spacing: 0.03em;
}
th, td {
	font-size: 13px;
	font-weight: 500;
	line-height: 180%;
	letter-spacing: 0.03em;
}
li {
	font-size: 13px;
	line-height: 180%;
	list-style-type: none;
	letter-spacing: 0.03em;
}
time {
	font-size: 13px;
	line-height: 100%;
	letter-spacing: 0.03em;
}
table {
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	letter-spacing: 0.03em;
}
th, td {
	line-height: 180%;
	font-weight: 500;
	text-align: left;
	vertical-align: top;
	letter-spacing: 0.03em;
}
img {
	max-width: 100%;
	height: auto;
	border: none;
}
caption {
	text-align: left;
}
a {
	color: #333333;
	outline: none;
	text-decoration: none;
	letter-spacing: 0.03em;
}
a:link    {color: #333333; text-decoration: none;}
a:visited {color: #333333; text-decoration: none;}
a:hover   {color: #333333; text-decoration: none;}
a:active  {color: #333333; text-decoration: none;}

button {
	border: none;
}

/* element */
.element {
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: opacity 0.8s, visibility 0.8s, transform 0.8s;
}
.is-fadein {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
.is-fadein:nth-of-type(1) {
	transition-delay: 0s;
}
.is-fadein:nth-of-type(2) {
	transition-delay: 0.2s;
}
.is-fadein:nth-of-type(3) {
	transition-delay: 0.4s;
}
.is-fadein:nth-of-type(4) {
	transition-delay: 0.6s;
}
.is-fadein:nth-of-type(5) {
	transition-delay: 0.8s;
}
.is-fadein:nth-of-type(6) {
	transition-delay: 1s;
}

/* float */
.float {
	animation: float 4s infinite;
}
@keyframes float {
	0%, 100% {
      transform: translate(0, 0);
	}
	50% {
      transform: translate(0, 10px);
	}
}
@media (max-width: 520px) {
	@keyframes float {
		0%, 100% {
		  transform: translate(0, 0);
		}
		50% {
		  transform: translate(0, 6px);
		}
	}
}

/* br */
.pc-br {
	display: block;
}
.sp-br {
	display: none;
}

.photo img {
	width: 100%;
	height: auto;
}

.en {
	font-family: 'scotch-display', sans-serif; 
	letter-spacing: 0.03em;
}


/* ---------- contents ---------------------------------------- */
#contents {
	position: relative;
	width: 100%;
	height: auto;
	min-width: 1140px;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

/* ---------- header ---------------------------------------- */
#header {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
#header .logo {
	width: 180px;
	margin: 16px 0 0 30px;
}
#header .sns {
	display: flex;
	justify-content: space-between;
	width: 164px;
	margin: 24px 30px 0 0;
}
#header .sns li {
	width: 48px;
	height: 48px;
}
#header .sns li a {
	transition: .3s;
}
#header .sns li a:hover {
	opacity: .5;
}


/* ---------- container ---------------------------------------- */
#container {
	position: relative;
	width: 100%;
	animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* ---------- kv ---------------------------------------- */
.kv {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 690px;
	background: url("../img/bg_kv.jpg") center no-repeat;
	background-size: cover;
}
.kv_inner {
	position: absolute;
	top: 0;
	left: calc(50% - 375px);
	width: 750px;
}
.kv_lb {
	width: 492px;
	height: 109px;
	margin-top: 20px;
	margin-left: 44px;
}
.kv_ttl {
	width: 662px;
	height: 199px;
	margin-top: -29px;
	margin-left: 44px;
}
.kv_koshiba {
	width: 285px;
	height: 447px;
	margin-top: -6px;
	margin-left: 153px;
}
.kv_product {
	position: absolute;
	top: 304px;
	left: 0;
	width: 135px;
	height: 340px;
	z-index: 100;
}
.kv_present {
	position: absolute;
	top: 304px;
	left: 422px;
	width: 211px;
	height: 200px;
	z-index: 10;
}
.kv_canchan {
	position: absolute;
	top: 362px;
	right: 22px;
	width: 107px;
	height: 162px;
	z-index: 10;
}
.kv_comment {
	position: absolute;
	top: 524px;
	right: 0;
	width: 287px;
	height: 72px;
	z-index: 100;
}


/* ---------- date ---------------------------------------- */
.date {
	position: relative;
	width: 100%;
	height: 243px;
	margin-top: -66px;
	background: url("../img/bg_date.png") center no-repeat;
	background-size: 1200px 243px;
}
.date img {
	position: absolute;
	top: 65px;
	left: calc(50% - 225px);
	width: 449px;
	height: 113px;
}

/* ---------- menu ---------------------------------------- */
.menu {
	position: relative;
	width: 100%;
	height: 64px;
	margin-top: 4px;
	background: url("../img/bg_menu.png") center no-repeat;
	background-size: 1200px 64px;
	z-index: 10;
}
.menu ul {
	display: flex;
	justify-content: space-between;
	position: absolute;
	width: 468px;
	top: -24px;
	left: calc(50% - 234px);
	margin: 0 auto;
}
.menu li a {
	transition: 0.3s;
}
.menu li a:hover {
	opacity: 0.5;
}
.menu li img {
	width: 100%;
	height: auto;
}
.menu_howto {
	width: 61px;
	height: 32px;
	margin-top: 22px;
}
.menu_pickup {
	width: 80px;
	height: 32px;
	margin-top: 16px;
}
.menu_tvcm {
	width: 45px;
	height: 30px;
	margin-top: 12px;
}
.menu_present {
	width: 67px;
	height: 31px;
	margin-top: 5px;
}
.menu_rules {
	width: 60px;
	height: 31px;
}

/* ---------- about ---------------------------------------- */
.about {
	position: relative;
	margin-top: -15px;
	padding: 63px 0 78px;
}
.about_bg {
	position: absolute;
	top: -96px;
	width: 1200px;
	height: 570px;
	background: url("../img/bg_about.jpg") no-repeat;
	background-size: 1200px 570px;
	z-index: -10;
}
.about_inner {
	position: relative;
	width: 570px;
	margin: 0 auto;
}
.about_ttl {
	position: relative;
	width: 321px;
	height: 66px;
	margin: 0 auto;
}
.about_txt {
	position: relative;
	margin-top: 39px;
	text-align: center;
	line-height: 210%;
	z-index: 10;
}
.about_canchan {
	position: absolute;
	right: 280px;
	bottom: -120px;
	width: 165px;
	height: 170px;
	z-index: 10;
}

/* ---------- howto ---------------------------------------- */
.howto {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 1320px;
	background: url("../img/bg_howto.jpg") center no-repeat;
	background-size: 1200px 1350px;
	border: solid 10px #59C3E1;
}
.howto_ttl {
	width: 146px;
	height: 66px;
	margin: 0 auto;
	padding-top: 84px;
}
.howto_flag_01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 266px;
	height: 159px;
}
.howto_flag_02 {
	position: absolute;
	top: 0;
	right: 0;
	width: 262px;
	height: 168px;
}
.howto_step {
	width: 660px;
	margin: 12px auto 0;
}
.howto_step_01,
.howto_step_02,
.howto_step_03 {
	display: flex;
	align-items: center;
	position: relative;
	width: 660px;
	margin-bottom: 24px;
}
.howto_step_01::after,
.howto_step_02::after,
.howto_step_03::after {
	content: '';
	position: absolute;
	width: 45px;
	height: 18px;
	top: 237px;
	left: calc(50% - 22px);
	background: url(../img/angle_down.png) no-repeat;
	background-size: 45px 18px;
}
.howto_step_left {
	width: 243px;
}
.howto_step_ttl {
	width: 243px;
	height: 220px;
}
.twitter_follow_btn {
	position: absolute;
	top: 155px;
	left: 12px;
	width: 267px;
	height: 72px;
}
.twitter_follow_btn a {
	display: block;
	width: 261px;
	height: 72px;
	transition: 0.3s;
}
.twitter_follow_btn a:hover {
	opacity: 0.8;
}
.howto_step_right {
	width: 363px;
	margin-left: 54px;
}
.howto_step_txt {
	font-size: 16px;
	line-height: 180%;
	white-space: normal;
}
.howto_step_note {
	margin-top: 12px;
	font-size: 12px;
	line-height: 150%;
}
.howto_step_feature {
	display: inline-block;
	margin-top: 18px;
	color: #EB6EA0;
	font-size: 16px;
	line-height: 80%;
	border-bottom: solid 4px #FFF697;
}
.howto_step_04 {
	display: block;
	position: absolute;
	width: 660px;
	height: 287px;
	margin-top: 30px;
	background-image: url(../img/bg_step_04.png);
	background-repeat: no-repeat;
	background-size: 660px 287px;
	z-index: 10;
}
.howto_step_04 .howto_step_ttl {
	position: absolute;
	top: 31px;
	width: 660px;
	height: 39px;
	z-index: 10;
}
.howto_step_04 .howto_step_txt {
	padding-top: 88px;
	text-align: center;
	line-height: 160%;
}
.howto_step_present {
	margin: 8px auto 0;
	width: 66px;
	height: 58px;
}
.howto_step_04 .howto_step_note {
	text-align: center;
}
.howto_flag_03 {
	position: absolute;
	top: 987px;
	left: 0;
	width: 262px;
	height: 159px;
	z-index: 1;
}
.howto_flag_04 {
	position: absolute;
	top: 990px;
	right: 0;
	width: 262px;
	height: 168px;
	z-index: 1;
}

/* ---------- pickup ---------------------------------------- */
.pickup {
	position: relative;
	width: 100%;
	height: 1506px;
	margin: 0 auto;
	background: url("../img/bg_pickup.jpg") top no-repeat;
	background-size: 1200px 1506px;
	z-index: 1;
}
.pickup_canchan {
	position: absolute;
	width: 294px;
	height: 180px;
	top: -36px;
	left: 212px;
}
.pickup_ttl {
	width: 145px;
	height: 68px;
	margin: 0 auto;
	padding-top: 78px;
}

.pickup_product {
	position: relative;
	width: 770px;
	margin: 48px auto 0;
}
.pickup_product_ttl {
	width: 410px;
	height: 39px;
	margin-left: 262px;
}
.pickup_product_photo {
	position: absolute;
	width: 150px;
	height: 378px;
	top: 0;
	left: 0;
}
.pickup_product_color {
	position: absolute;
	width: 102px;
	height: 102px;
	top: 232px;
	left: 104px;
}
.pickup_product_txt {
	display: inline-block;
	margin: 30px 0 0 262px;
	line-height: 190%;
}
.pickup_product_txt .point_01 {
	padding: 3px;
	color: #fff;
	background-color: #F1908B;
}
.pickup_product_txt .point_02 {
	padding: 3px;
	color: #fff;
	background-color: #F5B082;
}
.pickup_product_txt .point_03 {
	padding: 3px;
	color: #fff;
	background-color: #F199BC;
}
.pickup_product_caution {
	text-align: right;
	font-size: 12px;
}
.pickup_more_btn {
	display: block;
	margin: 18px 0 48px auto;
	width: 109px;
	height: 14px;
}
.pickup_more_btn a {
	display: block;
	padding-bottom: 3px;
	width: 109px;
	height: 14px;
	border-bottom: solid 1px #98605E;
	transition: 0.3s;
}
.pickup_more_btn a:hover {
	opacity: 0.5;
}
.pickup_more_btn img {
	vertical-align: top;
}
.pickup_product_point {
	position: relative;
	margin: 54px 0 0 262px;
	padding: 30px 33px 27px;
	background-color: #fff;
}
.pickup_product_point h4 {
	position: absolute;
	width: 227px;
	height: 69px;
	top: -54px;
	left: 24px;
}
.pickup_product_point p {
	font-size: 15px;
	line-height: 190%;
}
.pickup_product_point strong {
	box-sizing: border-box;
	color: #E9528E;
	border-bottom: solid 3px #FFF697;
}
.pickup_product_example {
	position: absolute;
	width: 240px;
	height: 123px;
	top: 408px;
	right: 133px;
}
.pickup_product_example p {
	text-align: right;
	margin-top: 6px;
	font-size: 11px;
}

.pickup_3way {
	position: relative;
	width: 770px;
	margin: 60px auto 0;
}
.pickup_3way_ttl {
	width: 174px;
	height: 51px;
	margin-left: 27px;
}
.pickup_3way_item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	width: 770px;
	margin-top: 36px;
}
.way_01 {
	height: 176px;
	background: url(../img/bg_3way_01.png) no-repeat;
	background-size: 770px 176px;
}
.way_01 .pickup_3way_item_ttl {
	position: absolute;
	width: 184px;
	height: 32px;
	top: -10px;
	left: 90px;
}
.way_01 .pickup_3way_item_txt {
	margin: 40px 0 0 42px;
	width: 285px;
	height: 76px;
}
.pickup_3way_howto {
	position: relative;
	box-sizing: border-box;
	width: 370px;
	margin: 36px 36px 0 0;
	padding: 20px 11px 18px 23px;
	border-radius: 5px;
}
.pickup_3way_howto h5 {
	position: absolute;
	top: -11px;
	left: 23px;
	font-size: 16px;
}
.pickup_3way_howto p {
	font-size: 14px;
	line-height: 160%;
}
.way_01 .pickup_3way_howto {
	background-color: #FFF8F8;
}
.way_01 .pickup_3way_howto h5,
.way_01 .pickup_3way_howto strong {
	color: #EB615A;
}
.way_02 {
	height: 127px;
	background: url(../img/bg_3way_02.png) no-repeat;
	background-size: 770px 127px;
}
.way_02 .pickup_3way_item_ttl {
	position: absolute;
	width: 111px;
	height: 32px;
	top: -10px;
	left: 126px;
}
.way_02 .pickup_3way_item_txt {
	margin: 44px 0 0 42px;
	width: 307px;
	height: 41px;
}
.way_02 .pickup_3way_howto {
	background-color: #FFFAF7;
}
.way_02 .pickup_3way_howto h5,
.way_02 .pickup_3way_howto strong {
	color: #F18F4D;
}
.way_03 {
	height: 152px;
	background: url(../img/bg_3way_03.png) no-repeat;
	background-size: 770px 152px;
}
.way_03 .pickup_3way_item_ttl {
	position: absolute;
	width: 193px;
	height: 48px;
	top: -18px;
	left: 91px;
}
.way_03 .pickup_3way_item_txt {
	margin: 48px 0 0 42px;
	width: 271px;
	height: 55px;
}
.way_03 .pickup_3way_howto {
	background-color: #FFF9FB;
}
.way_03 .pickup_3way_howto h5,
.way_03 .pickup_3way_howto strong {
	color: #EB6EA0;
}

.pickup_product_btn {
	display: block;
	margin: 42px auto 84px;
	width: 345px;
	height: 67px;
}
.pickup_product_btn a {
	display: block;
	width: 100%;
	height: auto;
	transition: .4s;
}
.pickup_product_btn a:hover {
	opacity: .7;
}

/* ---------- tvcm ---------------------------------------- */
.tvcm {
	position: relative;
	width: 100%;
	height: 555px;
	background: url("../img/bg_tvcm.jpg") center no-repeat;
	background-size: cover;
}
.tvcm_ttl {
	margin: 0 auto;
	padding-top: 81px;
	width: 120px;
	height: 28px;
}
.tvcm_video {
	position: relative;
	width: 570px;
	height: 316px;
	margin: 42px auto 0;
	z-index: 10;
}

/* ---------- present ---------------------------------------- */
.present {
	position: relative;
	width: 100%;
	height: 840px;
	padding-top: 84px;
	background: linear-gradient(90deg, rgba(244,163,110,65%), rgba(233,82,142,65%));
}
.present_confetti {
	position: absolute;
	top: -27px;
	left: 270px;
	width: 658px;
	height: 775px;
	z-index: 100;
}
.present_ttl {
	position: relative;
	margin: 0 auto;
	width: 153px;
	height: 66px;
}
.present_canchan_01 {
	position: absolute;
	top: -45px;
	right: 277px;
	width: 150px;
	height: 173px;
}
.present_inner {
	position: relative;
	box-sizing: content-box;
	width: 485px;
	height: 531px;
	margin: 48px auto 0;
	background: url("../img/bg_present.png") center no-repeat;
	background-size: 485px 531px;
}
.present_comment {
	position: absolute;
	width: 225px;
	height: 89px;
	top: -30px;
	left: -45px;
}
.present_products {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
	margin: 0 75px 0 69px;
	padding-top: 52px;
}
.present_3SEL {
	width: 115px;
	height: 252px;
}
.present_PSE {
	margin-top: 15px;
	width: 183px;
	height: 168px;
}
.present_products_ttl {
	margin: 24px auto 0;
}
.present_3SEL_ttl {
	width: 314px;
	height: 43px;
	margin: 0 auto;
}
.present_plus {
	width: 27px;
	height: 27px;
	margin: 8px auto 0;
}
.present_PSE_ttl {
	width: 299px;
	height: 42px;
	margin: 18px auto 0;
}
.present_lots {
	position: absolute;
	width: 220px;
	height: 210px;
	bottom: -50px;
	left: 420px;
	z-index: 10;
}
.present_canchan_02 {
	position: absolute;
	width: 105px;
	height: 153px;
	right: 426px;
	bottom: -45px;
	z-index: 10;
}

/* ---------- rules ---------------------------------------- */
.rules {
	position: relative;
	margin: 0 auto;
	padding: 84px 0 234px;
}
.rules_ttl {
	margin: 0 auto;
	width: 118px;
	height: 66px;
	z-index: 100;
}
.rules_txt {
	position: relative;
	box-sizing: border-box;
	overflow: scroll;
	width: 660px;
	height: 471px;
	margin: 48px auto 0;
	padding: 45px;
	background-color: #fff;
	background: no-repeat url(../img/bg_rules.jpg);
	background-size: 660px 471px;
	border: solid 6px #59C3E1;
}
.rules_txt h3 {
	margin: 21px 0 6px;
	font-size: 16px;
	color: #EB6EA0;
}
.rules_txt h3:first-child {
	margin-top: 0;
}
.rules_txt p {
	color: #7C4846;
	font-size: 16px;
	line-height: 180%;
}
.rules_txt a {
	color: #59C3E1;
	text-decoration: underline;
}
.rules_canchan {
	position: absolute;
	width: 371px;
	height: 195px;
	bottom: 0;
	left: calc(50% - 180px);
}


/* ---------- quiz ---------------------------------------- */
.quiz {
	position: relative;
	width: 100%;
	height: 861px;
	margin: 0 auto;
	background: url("../img/bg_pickup.jpg") top no-repeat;
	background-size: 1200px 1506px;
	z-index: 1;
}
.quiz_allow {
	width: 120px;
	height: 48px;
	margin: 0 auto;
}
.quiz_ttl {
	width: 438px;
	height: 75px;
	margin: 33px auto 33px;
}
.quiz_inner {
	box-sizing: border-box;
	width: 580px;
	margin: 0 auto;
	padding: 20px 20px 30px 20px;
	background-color: #fff;
}
.quiz_start_btn {
	display: block;
	margin: 24px auto 0;
	width: 244px;
	height: 67px;
}
.quiz_start_btn a {
	transition: 0.3s;
}
.quiz_start_btn a:hover {
	opacity: 0.7;
}
.quiz_outer {
	position: relative;
	width: 580px;
	margin: 0 auto;
}
.quiz_hint_btn {
	display: block;
	margin: 45px 0 0 auto;
	width: 208px;
	height: 63px;
}
.quiz_hint_btn a {
	transition: 0.3s;
}
.quiz_hint_btn a:hover {
	opacity: 0.7;
}
.quiz_canchan {
	position: absolute;
	width: 369px;
	height: 180px;
	top: -15px;
	left: -36px;
}

/* ---------- footer ---------------------------------------- */
.copyright {
	padding: 69px 0 75px;
	text-align: center;
}
.copyright p {
	font-size: 12px;
	line-height: 100%;
}



@media (max-width: 520px) {

	/* youtube */
	.youtube{
		position:relative;
		padding-bottom: 55%;
		padding-top:8vw;
		height:0;
		overflow:hidden;
	}
	.youtube iframe{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	/* br */
	.pc-br {
		display: none;
	}
	.sp-br {
		display: block;
	}


	/* ---------- contents ---------------------------------------- */
	#contents {
		min-width: inherit;
	}

	/* ---------- header ---------------------------------------- */
	#header .logo {
		width: 32vw;
		margin: 2.667vw 0 0 2.667vw;
	}
	#header .sns {
		width: 29.6vw;
		margin: 3.467vw 2.667vw 0 0;
	}
	#header .sns li {
		width: 8.8vw;
		height: 8.8vw;
	}

	/* ---------- kv ---------------------------------------- */
	.kv {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 600px;
		background: url("../img/bg_kv_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.kv_inner {
		position: absolute;
		width: 100%;
		left: 0;
	}
	.kv_lb {
		width: 296px;
		height: 65px;
		margin-top: 50px;
		margin-left: -3px;
	}
	.kv_ttl {
		width: 357px;
		height: 107px;
		margin-top: -15px;
		margin-left: 9px;
	}
	.kv_koshiba {
		width: 254px;
		height: 398px;
		margin-top: -3px;
		margin-left: 115px;
	}
	.kv_product {
		top: 207px;
		left: 12px;
		width: 102px;
		height: 257px;
	}
	.kv_present {
		top: 399px;
		left: 221px;
		width: 145px;
		height: 137px;
	}
	.kv_canchan {
		top: 52px;
		right: 20px;
		width: 62px;
		height: 91px;
	}
	.kv_comment {
		top: 474px;
		left: 20px;
		width: 215px;
		height: 54px;
	}


	/* ---------- date ---------------------------------------- */
	.date {
		height: 154px;
		margin-top: -62px;
		background: url("../img/bg_date_sp.png") center no-repeat;
		background-size: cover;
	}
	.date img {
		top: 36px;
		left: calc(50% - 168px);
		width: 336px;
		height: 85px;
	}

	/* ---------- menu ---------------------------------------- */
	.menu {
		margin-top: 12px;
	}
	.menu ul {
		width: 328px;
		top: -15px;
		left: calc(50% - 164px);
	}
	.menu_howto {
		width: 49px;
		height: 25px;
		margin-top: 16px;
	}
	.menu_pickup {
		width: 66px;
		height: 26px;
		margin-top: 11px;
	}
	.menu_tvcm {
		width: 37px;
		height: 25px;
		margin-top: 9px;
	}
	.menu_present {
		width: 58px;
		height: 26px;
		margin-top: 4px;
	}
	.menu_rules {
		width: 49px;
		height: 25px;
		margin-top: 1px;
	}

	/* ---------- about ---------------------------------------- */
	.about {
		margin-top: -25px;
		padding: 60px 0 90px;
	}
	.about_bg {
		top: -25px;
		width: 100%;
		height: 465px;
		background: url("../img/bg_about_sp.jpg") top no-repeat;
		background-size: cover;
	}
	.about_inner {
		width: 335px;
	}
	.about_ttl {
		width: 255px;
		height: 52px;
	}
	.about_txt {
		margin-top: 30px;
		font-size: 13px;
		line-height: 200%;
	}
	.about_canchan {
		right: 28px;
		bottom: -59px;
		width: 124px;
		height: 128px;
	}

	/* ---------- howto ---------------------------------------- */
	.howto {
		width: 100%;
		height: 1387px;
		background: url("../img/bg_howto_sp.jpg") center no-repeat;
		background-size: cover;
		border: solid 8px #59C3E1;
	}
	.howto_ttl {
		width: 106px;
		height: 48px;
		padding-top: 55px;
	}
	.howto_flag_01 {
		width: 133px;
		height: 71px;
	}
	.howto_flag_02 {
		top: 217px;
		width: 115px;
		height: 74px;
	}
	.howto_step {
		width: 305px;
		margin: 21px auto 0;
	}
	.howto_step_01,
	.howto_step_02,
	.howto_step_03 {
		display: block;
		width: 305px;
		margin: 0 auto 24px;
	}
	.howto_step_01::after,
	.howto_step_02::after {
		display: none;
	}
	.howto_step_03::after {
		top: 300px;
	}
	.howto_step_left {
		width: 305px;
	}
	.howto_step_ttl {
		position: relative;
		width: 218px;
		height: 197px;
		margin-left: 22px;
	}
	.twitter_follow_btn {
		position: absolute;
		top: 139px;
		left: 35px;
		width: 231px;
		height: 66px;
	}
	.twitter_follow_btn a {
		width: 231px;
		height: 66px;
	}
	.howto_step_right {
		width: 305px;
		margin-left: 0;
	}
	.howto_step_txt {
		margin-top: 15px;
		text-align: center;
		font-size: 13px;
		line-height: 170%;
	}
	.howto_step_note {
		text-align: center;
		margin-top: 9px;
		font-size: 10px;
	}
	.howto_step_feature {
		margin: 9px 38px 0;
		font-size: 13px;
		border-bottom: solid 3px #FFF697;
	}
	.howto_step_04 {
		width: 305px;
		height: 275px;
		margin-top: 30px;
		background-image: url(../img/bg_step_04_sp.png);
		background-size: 305px 275px;
	}
	.howto_step_04 .howto_step_ttl {
		top: 29px;
		left: 0;
		width: 305px;
		height: 28px;
		margin-left: 0;
	}
	.howto_step_04 .howto_step_txt {
		padding-top: 55px;
	}
	.howto_step_present {
		margin: 8px auto 0;
		width: 51px;
		height: 45px;
	}
	.howto_flag_03 {
		top: 530px;
		left: 0;
		width: 88px;
	}
	.howto_flag_04 {
		top: 830px;
		right: 0;
		width: 93px;
	}

	/* ---------- pickup ---------------------------------------- */
	.pickup {
		height: 1640px;
		background-image: url(../img/bg_pickup_sp.jpg);
		background-size: 375px 1800px;
	}
	.pickup_canchan {
		width: 242px;
		height: 142px;
		top: -29px;
		left: 30px;
	}
	.pickup_ttl {
		width: 114px;
		height: 52px;
		padding-top: 72px;
	}

	.pickup_product {
		width: 325px;
		margin: 36px auto 0;
	}
	.pickup_product_ttl {
		width: 315px;
		height: 30px;
		margin-left: 5px;
	}
	.pickup_product_photo {
		width: 98px;
		height: 246px;
		top: 42px;
		left: -9px;
	}
	.pickup_product_color {
		width: 75px;
		height: 75px;
		top: 201px;
		left: 56px;
	}
	.pickup_product_txt {
		margin: 27px -12px 0 130px;
		font-size: 13px;
		line-height: 190%;
		letter-spacing: 0;
	}
	.pickup_product_txt .sp-br {
		display: inline-block;
	}
	.pickup_product_txt .point_01 {
		padding: 2px 1px;
	}
	.pickup_product_txt .point_02 {
		padding: 2px 1px;
	}
	.pickup_product_txt .point_03 {
		padding: 2px 1px;
	}
	.pickup_product_caution {
		font-size: 10px;
	}
	.pickup_product_point {
		margin: 63px 0 0 0;
		padding: 23px 30px 21px;
	}
	.pickup_product_point h4 {
		width: 195px;
		height: 53px;
		top: -48px;
		left: 130px;
	}
	.pickup_product_point p {
		font-size: 13px;
		line-height: 190%;
	}
	.pickup_product_example {
		width: 180px;
		height: 94px;
		top: 477px;
		right: 0;
	}
	.pickup_product_example p {
		margin-top: -1px;
		font-size: 9px;
	}
	.pickup_more_btn {
		display: block;
		margin: 12px 0 48px auto;
		width: 93px;
		height: 12px;
	}
	.pickup_more_btn a {
		width: 93px;
		height: 12px;
	}

	.pickup_3way {
		width: 305px;
		margin: 90px auto 0;
	}
	.pickup_3way_ttl {
		width: 131px;
		height: 39px;
		margin-left: 0;
	}
	.pickup_3way_item {
		display: block;
		width: 305px;
		margin-top: 36px;
	}
	.way_01 {
		height: 231px;
		background: url(../img/bg_3way_01_sp.png) no-repeat;
		background-size: 305px 231px;
	}
	.way_01 .pickup_3way_item_ttl {
		width: 155px;
		height: 27px;
		top: -12px;
		left: 71px;
	}
	.way_01 .pickup_3way_item_txt {
		margin: 0 0 0 31px;
		padding-top: 12px;
		width: 237px;
		height: 63px;
	}
	.pickup_3way_howto {
		width: 264px;
		margin: 19px 22px 0 19px;
		padding: 21px 19px 19px 20px;
	}
	.pickup_3way_howto h5 {
		top: -9px;
		left: 90px;
		font-size: 15px;
	}
	.pickup_3way_howto p {
		font-size: 12px;
		line-height: 160%;
	}
	.way_02 {
		height: 170px;
		background: url(../img/bg_3way_02_sp.png) no-repeat;
		background-size: 305px 170px;
	}
	.way_02 .pickup_3way_item_ttl {
		width: 94px;
		height: 37px;
		top: -12px;
		left: 104px;
	}
	.way_02 .pickup_3way_item_txt {
		margin: 0 0 0 22px;
		padding-top: 27px;
		width: 254px;
		height: 34px;
	}
	.way_02 .pickup_3way_howto {
		margin-top: 13px;
	}
	.way_03 {
		height: 234px;
		margin-top: 45px;
		background: url(../img/bg_3way_03_sp.png) no-repeat;
		background-size: 305px 234px;
	}
	.way_03 .pickup_3way_item_ttl {
		width: 169px;
		height: 42px;
		top: -20px;
		left: 66px;
	}
	.way_03 .pickup_3way_item_txt {
		margin: 0 0 0 37px;
		padding-top: 28px;
		width: 228px;
		height: 46px;
	}

	.pickup_product_btn {
		margin: 26px auto 60px;
		width: 310px;
		height: 60px;
	}

	/* ---------- tvcm ---------------------------------------- */
	.tvcm {
		width: 100%;
		height: 375px;
	}
	.tvcm_ttl {
		padding-top: 54px;
		width: 91px;
		height: 21px;
	}
	.tvcm_video {
		width: 325px;
		height: 209px;
		margin: 33px auto 60px;
	}

	/* ---------- present ---------------------------------------- */
	.present {
		height: 657px;
		padding-top: 56px;
		background: linear-gradient(90deg, rgba(244,163,110,65%), rgba(233,82,142,65%));
	}
	.present_confetti {
		top: -42px;
		left: 0;
		width: 375px;
		height: 678px;
	}
	.present_ttl {
		position: relative;
		margin: 0 auto;
		width: 118px;
		height: 51px;
	}
	.present_canchan_01 {
		top: -48px;
		right: 3px;
		width: 120px;
		height: 138px;
	}
	.present_inner {
		width: 325px;
		height: 423px;
		margin: 42px auto 0;
		background: url("../img/bg_present_sp.png") center no-repeat;
		background-size: 325px 423px;
	}
	.present_comment {
		width: 180px;
		height: 71px;
		top: -30px;
		left: -7px;
	}
	.present_products {
		margin: 0 39px 0 45px;
		padding-top: 54px;
	}
	.present_3SEL {
		width: 75px;
		height: 166px;
	}
	.present_PSE {
		margin-top: 12px;
		width: 132px;
		height: 120px;
	}
	.present_products_ttl {
		margin: 24px auto 0;
	}
	.present_3SEL_ttl {
		width: 260px;
		height: 37px;
		margin: 0 auto;
	}
	.present_plus {
		margin: 8px auto 0;
	}
	.present_PSE_ttl {
		width: 252px;
		height: 37px;
		margin: 18px auto 0;
	}
	.present_lots {
		width: 188px;
		height: 180px;
		bottom: -54px;
		left: 30px;
	}
	.present_canchan_02 {
		width: 83px;
		height: 124px;
		right: 50px;
		bottom: -40px;
	}

	/* ---------- rules ---------------------------------------- */
	.rules {
		padding: 63px 0 174px;
	}
	.rules_ttl {
		width: 86px;
		height: 49px;
	}
	.rules_txt {
		width: 325px;
		height: 420px;
		margin: 36px auto 0;
		padding: 30px 25px;
		border: solid 4px #59C3E1;
	}
	.rules_txt h3 {
		margin: 15px 0 3px;
		font-size: 13px;
	}
	.rules_txt p {
		font-size: 13px;
	}
	.rules_txt a {
		font-size: 13px;
	}
	.rules_canchan {
		width: 304px;
		height: 152px;
		left: calc(50% - 152px);
	}


	/* ---------- quiz ---------------------------------------- */
	.quiz {
		height: 640px;
		background: url("../img/bg_pickup_sp.jpg") top no-repeat;
		background-size: 375px 1800px;
	}
	.quiz_allow {
		width: 75px;
		height: 30px;
	}
	.quiz_ttl {
		width: 334px;
		height: 57px;
		margin: 24px auto 12px;
	}
	.quiz_inner {
		width: 325px;
		padding: 15px 15px 30px 15px;
	}
	.quiz_start_btn {
		margin: 18px auto 0;
		width: 218px;
		height: 60px;
	}
	.quiz_outer {
		width: 325px;
	}
	.quiz_hint_btn {
		margin: 105px 0 0 auto;
		width: 188px;
		height: 57px;
	}
	.quiz_canchan {
		width: 308px;
		height: 150px;
		top: -86px;
		left: -8px;
	}

	/* ---------- footer ---------------------------------------- */
	.copyright {
		padding: 36px 0 39px;
		text-align: center;
	}
	.copyright p {
		font-size: 10px;
		line-height: 100%;
	}

}