@charset "UTF-8";

/*--------------------------
>>  mqcontents
--------------------------*/

/*--------------------Reset*/
* {
  margin: 0px;
  padding: 0px;
}

#commonFooter {
  margin-top: 0 !important;
}

#mq_atnon2105 section {
  padding: 0 !important;
}

/*--------------------Common*/

#mq_atnon2105 {
  width: 100%;
  color: #404040;
  line-height: 1;
  word-break: normal;
  line-break: strict;
  /*position: relative;*/
	color: #404040;
	overflow: hidden;
}

#mq_atnon2105 img {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
  height: auto;
  backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-font-smoothing: antialiased;/* animation時の文字にじみ防止 */
  -moz-osx-font-smoothing: grayscale;/* animation時の文字にじみ防止 */
}

#mq_atnon2105 p {
  font-size: calc(24 / 750 *100vw);
	line-height: 1.75;
	letter-spacing: -0.002em;
	color: #555;
}

#mq_atnon2105 .credit {
  font-size: 3.125vw;
  line-height: 1.5;
}

#mq_atnon2105 .bold {
  font-weight: bold;
}


#mq_atnon2105 .sup {
  font-size: 75.5%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}

#mq_atnon2105 .is-pc {
  display: none;
}

#mq_atnon2105 .is-sp {
  display: block;
}

#mq_atnon2105 br.is-pc {
  display: none;
}

#mq_atnon2105 br.is-sp {
  display: inline-block;
}

/*Clearfix*/
#mq_atnon2105 .cf:before,
#mq_atnon2105 .cf:after {
  content: "";
  display: block;
  overflow: hidden;
}
#mq_atnon2105 .cf:afte {
  clear: both;
}
#mq_atnon2105 .cf {
  zoom: 1;
}
#mq_atnon2105 .clear {
  clear: both;
}


/*Layout*/
#mq_atnon2105 .container {
  width: 92vw;
  margin: 0 4vw;
}

/*--------------------------------------------------------------------------------------
mq_atnon2105
-------------------------------------------------------------------------------------- */
/*-------------------------------------------------------------------------------- pr */
#mq_atnon2105 .pr {
  width: 30px;
  height: 17px;
	z-index: 2;
	position: absolute;
  top: 15px;
  right: 15px;
}

/*----------------------------------------------------------------------------sns */
#mq_atnon2105 .link {
	margin: 15.2vw auto 6vw;
}

#mq_atnon2105 .sns {
  margin: 0 auto 9.3333vw;
  text-align: center;
}

#mq_atnon2105 .sns li {
  width: 9.0666vw;
  display: inline-block;
  margin: 0 5px;
}

#mq_atnon2105 .share_headings {
	width: 20.4vw;
	text-align: center;
	margin: 8vw auto 4.6666vw;
}

#mq_atnon2105 .link_credit {
	font-size: calc(20 / 750 * 100vw);
	color: #666;
	line-height: 1.5;
}

#mq_atnon2105 .link_credit span {
	font-size: calc(24 / 750 * 100vw);
	color: #666;
}

/*--------------------------------------------------------------------------btn */
#mq_atnon2105 .btn_brandsite {
  width: 79.2vw;
  margin: 0 auto;
}

#mq_atnon2105 .btn_brandsite a {
	display: block;
	width: 79.2vw;
  height: 20vw;
  font-size: calc(26 / 750 * 100vw);
	font-weight: bold;
	line-height: 20vw;
  color: #fff;
	background-color: #e5004f;
	border-radius: 1.6vw;
	text-align: center;
}

#mq_atnon2105 .btn a:hover {
  opacity: .8;
}

#mq_atnon2105 .btn_more {
  width: 79.2vw;
	margin: 0 auto;
	position: relative;
}

#mq_atnon2105 .btn_more a {
	position: relative;
	display: block;
	width: 79.2vw;
  height: 20vw;
  font-size: calc(26 / 750 * 100vw);
	font-weight: bold;
	line-height: 20vw;
  background-color: #fff;
	color: #e5004f;
	border: 1px solid #e5004f;
	border-radius: 1.6vw;
	text-align: center;
}

#mq_atnon2105 .btn_more a::after {
  position: absolute;
  display: block;
	content: '';
	border-top: 1.4666vw solid transparent;
  border-bottom: 1.4666vw solid transparent;
	border-left: 1.3333vw solid #e5004f;
	top: 8.66666vw;
	right: 8vw;
	z-index: 1;
}

/*----------------------------------------------------------------------------mv */

#mq_atnon2105 .mv .container {
	width: 100%;
	margin: 0;
}

#mq_atnon2105 .mv_inner {
width: 100%;
position: relative;
}

#mq_atnon2105 .mv_main {
	width: 100%;
  opacity: 0;
}

#mq_atnon2105 .mv_main.is-show {
  opacity: 1;
  transition: all 1.5s ease .5s;
}

#mq_atnon2105 .mv_catch li:first-child {
	width: 30.5999vw;
	position: absolute;
	top: 66.6666vw;
	left: 4vw;
	opacity: 0;
	z-index: 1;
}

#mq_atnon2105 .mv_catch li:nth-child(2){
	width: 31.5333vw;
	position: absolute;
	top: 68.2vw;
	left: 30.9333vw;
	z-index: 0;
	opacity: 0;
}

#mq_atnon2105 .mv_catch li:first-child.is-show {
  opacity: 1;
  transition: all 1.5s ease 1s;
}

#mq_atnon2105 .mv_catch li:nth-child(2).is-show {
  opacity: 1;
  transition: all 1.5s ease 1.5s;
}

#mq_atnon2105 .mv_title {
	width: 84.1333vw;
	position: absolute;
	top: 86.0666vw;
	left: 50%;
	transform: translateX(-50%);
  opacity: 0;
}

#mq_atnon2105 .mv_title.is-show {
  opacity: 1;
  transition: all 1.5s ease 2s;
}

#mq_atnon2105 .mv_lead {
	width: 79.2vw;
	margin: 38.6666vw auto 12vw;
}

/*----------------------------------------------------------------------------area01 */
#mq_atnon2105 #index01 {
	margin-bottom: 13.3333vw;
}

#mq_atnon2105 .block01_main {
	margin: 0 6.4vw 26.6666vw;
}

#mq_atnon2105 .block01_headings {
	width: 81.4666vw;
	margin: 0 auto 5.3333vw;
	position: relative;
	z-index: 0;
}

#mq_atnon2105 .block01_headings::after {
	display: block;
	position: absolute;
	content: '';
	bottom: -0.5vw;
	left: 0;
	height: 2.6666vw;
	background-color: #fdebf1;
	z-index: -1;
	width: 0;
	transition: all .5s ease .5s;
}

#mq_atnon2105 .block01_headings.is-active::after {
width: 82vw;
left: 0;
position: absolute;
}

#mq_atnon2105 .blogger_comment:first-child {
	display: flex;
	margin-bottom: 6.4vw;
}

#mq_atnon2105 .blogger_comment:nth-child(2) {
	display: flex;
	flex-direction: row-reverse;
}

#mq_atnon2105 .blogger_comment-item  {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 32vw;
}

#mq_atnon2105 .blogger_comment-item img {
	width: 32vw;
}

#mq_atnon2105 .blogger_comment:nth-child(2)
.blogger_comment-item {
	margin-left: 8vw;
}

#mq_atnon2105 .blogger_comment-text {
	position: relative;
	padding: 2.6666vw;
	z-index: 0;
	margin-left: 8vw;
}

#mq_atnon2105 .blogger_comment:nth-child(2)
.blogger_comment-text {
	margin-left: 0;
	padding-left: 4.6666vw;
}

#mq_atnon2105 .blogger_comment-text p {
	width: 34.1333vw;
}

#mq_atnon2105 .blogger_comment-text::before {
	content: '';
	display: block;
	width:47.2vw;
	height: 48.8vw;
	background-image: url("https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block01_frame_sp.png");
	background-size: 47.2vw 48.8vw;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}

#mq_atnon2105 .blogger_comment:nth-child(2)
.blogger_comment-text::before {
	transform: scale(-1, 1);
	left: 0;
}

#mq_atnon2105 .blogger_name {
	color: #e5004f;
	font-size: calc(24 / 750 * 100vw);
	font-weight: bold;
	letter-spacing: -0.002em;
	line-height: 1.25;
	width: 100vw;
	margin-top: auto;
	font-style: italic;
}

#mq_atnon2105 .blogger_comment:nth-child(2)
.blogger_name {
	margin-top: 2.6666vw;
}

#mq_atnon2105 .blogger_name span {
	font-size: calc(30 / 750 * 100vw);
	font-style: italic;
}

#mq_atnon2105 .block01_sub {
	position: relative;
}

#mq_atnon2105 .block01_ph {
	width: 75.2vw;
	margin: 0 auto 6.6666vw;
	position: relative;
}

#mq_atnon2105 .block01_sub-item-list {
	width: 100%;
	height: 53.0666vw;
	position: absolute;
	top: 0;
}

#mq_atnon2105 .block01_sub-item-list li {
	opacity: 0;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}

#mq_atnon2105 .block01_sub-item-list.is-active li {
	opacity: 1;
} 

#mq_atnon2105 .block01_sub-item {

}

#mq_atnon2105 .block01_sub-item:nth-child(1) {
	width: 27.2vw;
	position: absolute;
	top: -10vw;
	left: 0;
}

#mq_atnon2105 .block01_sub-item:nth-child(2) {
	width: 26.5999vw;
	position: absolute;
	top: -10.6666vw;
	right: 1.8666vw;
	transition-delay: .3s;
}

#mq_atnon2105 .block01_sub-item:nth-child(3) {
	width: 27.0666vw;
	position: absolute;
	bottom: -2.1333vw;
	left: 0;
	transition-delay: .6s;
}

#mq_atnon2105 .block01_sub-item:nth-child(4) {
	width: 26.5333vw;
	position: absolute;
	bottom: -1.2vw;
	right: 4.6666vw;
	transition-delay: .9s;
}

#mq_atnon2105 .block01_sub-text {

}

/*----------------------------------------------------------------------------area02 */
#mq_atnon2105 .block02 {
	width: 92vw;
	margin: 0 auto 14.6666vw;
	background-color: #fdebf1;
	border: 1px solid #e5004f;
	border-radius: 1.6vw;
	padding: 4vw;
}

#mq_atnon2105 .image_wrap {
	width: 100%;
	background-color: #fff;
	border-radius: 1.6vw;
	padding: 10.4vw 8vw 6vw;
}

#mq_atnon2105 .block02_headings {
	width: 67.8vw;
	margin: 0 auto 8vw;
	position: relative;
	z-index: 0;
}

#mq_atnon2105 .block02_headings::after {
	display: block;
	position: absolute;
	content: '';
	bottom: -0.5vw;
	left: 24vw;
	height: 2.6666vw;
	background-color: #fdebf1;
	z-index: -1;
	width: 0;
	transition: all .5s ease .5s;
}

#mq_atnon2105 .block02_headings.is-active::after {
	width: 28.1333vw;
	position: absolute;
	left: 24vw;
	top: 2.6666vw;
}

#mq_atnon2105 .image_list-item:first-child {
	margin-bottom: 10.6666vw;
}

#mq_atnon2105 .image_list-ph {
	width: 56.1333vw;
	margin: 0 auto 3.73333vw;
}

#mq_atnon2105 .image_list-text {

}

#mq_atnon2105 .block02_item-inner {

}

#mq_atnon2105 .block02_item-ph {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 6.4vw;
}

#mq_atnon2105 .block02_item-lead img {
	width: 58.1999vw;
	margin-bottom: 8vw;
}
#mq_atnon2105 .block02_item-text {
	width: 79.2vw;
	margin: 0 auto 6.4vw;
}

/*----------------------------------------------------------------------------area03 */
#mq_atnon2105 #index03 {
	margin: 15.2vw auto 0;
}

#mq_atnon2105 .block03_catch {
	width: 87.6666vw;
	margin: 0 auto 4vw;
	position: relative;
	z-index: 0;
}

#mq_atnon2105 .block03_catch::after {
	display: block;
	position: absolute;
	content: '';
	bottom: -0.5vw;
	left: 23vw;
	height: 2.6666vw;
	background-color: #fdebf1;
	z-index: -1;
	width: 0;
	transition: all .5s ease .5s;
}

#mq_atnon2105 .block03_catch.is-active::after {
	width: 36.9333vw;
	position: absolute;
	left: 23vw;
	top: 3.6666vw;
}

#mq_atnon2105 .block03_list {
	margin: 0 auto;
	width: 59.6vw;
	position: relative;
}

#mq_atnon2105 .block03_list-item {
	width: 59.6vw;
	height: 59.6vw;
	border-radius: 50%;
	position: relative;
	margin-bottom: 18.4vw;
}

#mq_atnon2105 .block03_list-item:first-child {
	background-color: #daeaf3;
	border: 1px solid #4895c3;
}

#mq_atnon2105 .block03_list-item:nth-child(2) {
	background-color: #fdeccc;
	border: 1px solid #f5a101;
}

#mq_atnon2105 .block03_list-item:nth-child(3) {
	background-color: #d3eed7;
	border: 1px solid #22ac38;
	margin-bottom: 20.8vw;
}

#mq_atnon2105 .block03_list-main {
	width: 52.9333vw;
	height: 52.9333vw;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

#mq_atnon2105 .block03_list-headings {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#mq_atnon2105 .block03_list-item:first-child
.block03_list-headings {
	width: 34.4vw;
	top: 12.8vw;
}

#mq_atnon2105 .block03_list-item:nth-child(2)
.block03_list-headings {
	width: 32.9333vw;
	top: 12.3vw;
}

#mq_atnon2105 .block03_list-item:nth-child(3)
.block03_list-headings {
	width: 23.3333vw;
	top: 15.6vw;
}

#mq_atnon2105 .block03_list-lead {
	position: absolute;
	left: 50%;
	transform: translateX(-50%)
}

#mq_atnon2105 .block03_list-item:first-child
	.block03_list-lead {
		top: 22.1333vw;
	}

#mq_atnon2105 .block03_list-item:nth-child(2)
	.block03_list-lead {
		top: 28.6667vw;
		text-align: center;
	}

#mq_atnon2105 .block03_list-item:nth-child(3)
	.block03_list-lead {
		top: 26.6667vw;
		text-align: center;
	}

#mq_atnon2105 .block03_list-lead p {
	font-size: calc(27 / 750 * 100vw);
	font-weight: bold;
	line-height: 1.77;
	letter-spacing: -0.002;
}

#mq_atnon2105 .block03_list-sub {
	width: 28vw;
	height: 28vw;
	border-radius: 50%;
	position: absolute;
	bottom: -12vw;
	right: 0;
}

#mq_atnon2105 .block03_list-item:first-child
.block03_list-sub {
	background-color:#4895c3;
	bottom: -14vw;
}

#mq_atnon2105 .block03_list-item:nth-child(2)
.block03_list-sub {
	background-color: #f5a101;
}

#mq_atnon2105 .block03_list-item:nth-child(3)
.block03_list-sub {
	background-color: #22ac38;
}

#mq_atnon2105 .block03_list-credit {
	width: 28vw;
	font-size: calc(30 / 750 * 100vw);
	letter-spacing: 0.14em;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#mq_atnon2105 .block03_list-item:first-child
.block03_list-credit {
	letter-spacing: 0.05em;
	line-height: 1.5;
}

#mq_atnon2105 .block03_text {
	margin-bottom: 31.4666vw;
}

#mq_atnon2105 .bg_yewllow {
	background-color: #fffccf;
	position: relative;
	z-index: 0;
	height: 306vw;
}

#mq_atnon2105 .bg_yewllow::before {
	width: 100vw;
	height: 70.9333vw;
	display: block;
	content: '';
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/wave_bg-yellow_sp.png);
	background-size: 100vw 70.9333vw;
	background-repeat: no-repeat;
	z-index: -1;
	position: absolute;
	top: -15.3333vw;
}

#mq_atnon2105 .bg_yewllow::after {
	width: 100vw;
	height: 70.9333vw;
	display: block;
	content: '';
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/wave_bg-yellow_sp.png);
	background-size: 100vw 70.9333vw;
	background-repeat: no-repeat;
	transform: rotateX(180deg);
	z-index: -1;
	position: absolute;
	bottom: -20.3333vw;
}

#mq_atnon2105 .block03_headings {
	width: 69.9333vw;
	margin: 0 auto 8vw;
	position: relative;
	z-index: 0;
}

#mq_atnon2105 .block03_headings::after {
	display: block;
	position: absolute;
	content: '';
	bottom: -0.5vw;
	left: 24.9333vw;
	height: 2.6666vw;
	background-color: #fce191;
	z-index: -1;
	width: 0;
	transition: all .5s ease .5s;
}

#mq_atnon2105 .block03_headings.is-active::after {
	width: 25.9333vw;
	position: absolute;
	left: 24.9333vw;
	top: 11.6666vw;
}

#mq_atnon2105 .howto_wrap {

}

#mq_atnon2105 .howto_list {

}

#mq_atnon2105 .howto_list-item {
	margin-top: 4.6666vw;
}

#mq_atnon2105 .howto_list-item:first-child {
	margin-top: 0;
}

#mq_atnon2105 .howto_list-item:first-child::after,
#mq_atnon2105 .howto_list-item:nth-child(2):after {
	width: 5.2vw;
	height: 8.8vw;
	display: block;
	content: '';
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block03_arrow_sp.png);
	background-size: 5.2vw 8.8vw;
	margin: 0 auto;
}

#mq_atnon2105 .howto_list-title {
	width: 56vw;
	margin: 0 auto 2vw;
}

#mq_atnon2105 .howto_list-ph {
	width: 77.3333vw;
	margin: 5.2vw auto;
}

#mq_atnon2105 .howto_list-item .howto_list-text {
	margin:2vw 6.4vw 4vw;
}

#mq_atnon2105 .howto_list-item:last-child
.howto_list-text {
	margin-bottom: 0;
}

#mq_atnon2105 .block03_item-ph {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 5.3333vw;
}

#mq_atnon2105 .block03_item-inner {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 32vw;
	padding: 0 6.4vw;
}

#mq_atnon2105 .block03_item-text {
	margin-bottom: 28.6666vw;
}

#mq_atnon2105 .block03_item-lead {
	width: 66.13333vw;
	margin-bottom: 6.6666vw;
}

/*----------------------------------------------------------------------------area04 */
#mq_atnon2105 .bg_pink {
	background-color: #fdebf1;
	position: relative;
	z-index: 0;
	/* height: 306vw; */
}

#mq_atnon2105 .bg_pink::before {
	width: 100vw;
	height: 70.9333vw;
	display: block;
	content: '';
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/wave_bg-pink_sp.png);
	background-size: 100vw 70.9333vw;
	background-repeat: no-repeat;
	z-index: -1;
	position: absolute;
	top: -17.3333vw;
}

#mq_atnon2105 .bg_pink::after {
	width: 100vw;
	height: 70.9333vw;
	display: block;
	content: '';
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/wave_bg-pink_sp.png);
	background-size: 100vw 70.9333vw;
	background-repeat: no-repeat;
	transform: rotateX(180deg);
	z-index: -1;
	position: absolute;
	bottom: -20.3333vw;
}

#mq_atnon2105 .block04_headings {
	width: 68.8666vw;
	margin: 0 auto 7.3333vw;
}

#mq_atnon2105 .block04_lead {
	margin-bottom: 8vw;
	padding: 0 6.4vw;
}

#mq_atnon2105 .tab-wrap {

}

#mq_atnon2105 .tab-headings {
	display: flex;
	flex-wrap: wrap;
}

#mq_atnon2105 .tab-headings li {
	width: 46vw;
	height: 16.4vw;
	background-size: 46vw 16.4vw;
	background-repeat: no-repeat;
}

#mq_atnon2105 .tab-headings li.active {
	/*display: block;*/
}

#mq_atnon2105 .tab-headings li:first-child {
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block04_item-headings01-off_sp.png);

}

#mq_atnon2105 .tab-headings li.active:first-child {
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block04_item-headings01-on_sp.png);

}

#mq_atnon2105 .tab-headings li:last-child {
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block04_item-headings02-off_sp.png);

}

#mq_atnon2105 .tab-headings li.active:last-child {
	background-image: url(https://s3-ap-northeast-1.amazonaws.com/3rd-special-maquia.hpplus.jp/special/mq/02/atnon2105/img/block04_item-headings02-on_sp.png);
}


#mq_atnon2105 .tab-contents li {
	/* background-color: #fff;
	padding: 6vw 5.3333vw 5.3333vw 6.2666vw; */
	display: none;
}

#mq_atnon2105 .tab-contents li.active {
	display: block;
	background-color: #fff;
	padding: 6vw 6.4vw 5.3333vw 6.4vw;
}

#mq_atnon2105 .tab-inner {

}

#mq_atnon2105 .tab-ph {
	width: 81.8666vw;
	margin: 0 auto 2.6666vw;
}

#mq_atnon2105 .tab-text {
	margin: 0 auto 8vw;
}

#mq_atnon2105 .tab-credit {
	font-size: calc(20 / 750 * 100vw);
	margin-top: 4vw;
}


#mq_atnon2105 .tab-ph.fadein,
#mq_atnon2105 .tab-text.fadein,
#mq_atnon2105 .tab-lead.fadein,
#mq_atnon2105 .tab-credit.fadein,
#mq_atnon2105 .btn_more.fadein {
	opacity: 1;
}

#mq_atnon2105 .tab-headings.fadeup {
	transform: translate(0,0);
}

#mq_atnon2105 .block04_sub {

}

#mq_atnon2105 .block04_catch {
	width: 87.6666vw;
	margin: 0 auto 6vw;
	position: relative;
	z-index: 0;
}

#mq_atnon2105 .block04_catch::after {
	display: block;
	position: absolute;
	content: '';
	bottom: -0.5vw;
	left: 30.1333vw;
	height: 2.6666vw;
	background-color: #fdebf1;
	z-index: -1;
	width: 0;
	transition: all .5s ease .5s;
}

#mq_atnon2105 .block04_catch.is-active::after {
	width: 31.3333vw;
	position: absolute;
	left: 30.1333vw;
	top: 4vw;
}

#mq_atnon2105 .block04_sub-ph {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 14.4vw;
}

#mq_atnon2105 .block04_sub {
	margin-top: 40vw;
}