/* ==================== 1_base.css ==================== */

@media (max-width: 768px) {
	main,
	main img {
		font-size: 4vw;
	}
}


@media (min-width: 769px) {
	main,
	main img {
		font-size: 20px;
    overflow: hidden;
	}
}


main img {
	max-width: 100%;
	vertical-align: bottom;
}


main ul {
	padding: 0;
	list-style-type: none;
}


/* ==================== 2_images.css ==================== */

img[src$="/features_auth_image_pc.png"] {width: 42.1em}
img[src$="/features_auth_image_sp.png"] {width: 21.27em}
img[src$="/features_auth_title.svg"] {width: 28.15em}
img[src$="/features_back_pc.jpg"] {width: 60em}
img[src$="/features_back_sp.jpg"] {width: 25em}
img[src$="/features_head_image.png"] {width: 9.67em}
img[src$="/features_head_text_pc.svg"] {width: 28.3em}
img[src$="/features_head_text_sp.svg"] {width: 10.65em}
img[src$="/features_point_1.svg"] {width: 9.9em}
img[src$="/features_point_2.svg"] {width: 9.9em}
img[src$="/features_point_3.svg"] {width: 9.9em}
img[src$="/features_point_4.svg"] {width: 9.9em}
img[src$="/features_point_title.svg"] {width: 19.95em}
img[src$="/features_table_pc.svg"] {width: 41.4em}
img[src$="/features_table_sp.svg"] {width: 23em}
img[src$="/features_title.svg"] {width: 27.15em}
img[src$="/lineup_buy1.svg"] {width: 10.15em}
img[src$="/lineup_buy2.svg"] {width: 10.15em}
img[src$="/lineup_buy3.svg"] {width: 10.15em}
img[src$="/lineup_buy4.svg"] {width: 10.15em}
img[src$="/lineup_iteminfo1.svg"] {height: 5em}
img[src$="/lineup_iteminfo2.svg"] {height: 5.8em}
img[src$="/lineup_iteminfo3.svg"] {height: 5em}
img[src$="/lineup_iteminfo4.svg"] {height: 5em}
img[src$="/lineup_iteminfo5.svg"] {height: 5em}
img[src$="/lineup_itemname.svg"] {width: 15em}
img[src$="/lineup_itempic1.jpg"] {width: 11em}
img[src$="/lineup_itempic2.jpg"] {width: 6em}
img[src$="/lineup_itempic3.jpg"] {width: 6.4em}
img[src$="/lineup_itempic4.jpg"] {width: 6.4em}
img[src$="/lineup_itempic5.jpg"] {width: 6.4em}
img[src$="/lineup_title.svg"] {width: 22.7em}
img[src$="/lineup_type_pc.svg"] {width: 56em}
img[src$="/lineup_type_sp.svg"] {width: 19.7em}
img[src$="/reason_back_pc.jpg"] {width: 60em}
img[src$="/reason_back_sp.jpg"] {width: 25em}
img[src$="/reason_body1.svg"] {width: 20.15em}
img[src$="/reason_body2.svg"] {width: 20.15em}
img[src$="/reason_title.svg"] {width: 24.55em}
img[src$="/top_buy_pc.svg"] {width: 21.05em}
img[src$="/top_buy_sp.svg"] {width: 25em}
img[src$="/top_copy.svg"] {width: 20.95em}
img[src$="/top_logo.svg"] {width: 6.55em}
img[src$="/top_mv_back_pc.jpg"] {width: 120em}
img[src$="/top_mv_pc.jpg"] {width: 60em}
img[src$="/top_mv_sp.jpg"] {width: 25em}
img[src$="/top_point.svg"] {width: 21.35em}
img[src$="/trouble_arrow.svg"] {width: 5.15em}
img[src$="/trouble_back_image.png"] {width: 10.67em}
img[src$="/trouble_body_pc.svg"] {width: 26.05em}
img[src$="/trouble_body_sp.svg"] {width: 18.36em}
img[src$="/trouble_frame_pc.svg"] {width: 48.25em}
img[src$="/trouble_frame_sp.svg"] {width: 22.25em}
img[src$="/trouble_title_pc.svg"] {width: 23.05em}
img[src$="/trouble_title_sp.svg"] {width: 11.9em}


/* ==================== features.css ==================== */

.Features {
	margin: 1em 0 -70px;
}
@media (max-width: 768px) {
  .Features {
    margin: 1em 0 0;
  }
}

.Features > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}



.Features .body {
	position: relative;
	/*background: rgba(241,241,241,0.5);*/
  background: #2ea7e0;
}

.Features .body > * {
	position: relative;
}

.Features .body::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60%;
	background: no-repeat center top;
	background: cover;
}


@media (max-width: 768px) {
	.Features .body::before {
		background-image: url(../img/faburuas/features_back_sp.jpg);
	}
}


@media (min-width: 769px) {
	.Features .body::before {
		background-image: url(../img/faburuas/features_back_pc.jpg);
	}
}


/* ==================== features_auth.css ==================== */

.Features .auth {
	padding: 1px 1em;
	text-align: center;
}

.Features .auth > * {
	margin: 2em auto;
}


/* ==================== features_compare.css ==================== */

.Features .compare {
	padding: 1.5em 0;
}


/* ==================== features_head.css ==================== */

.Features .head {
	padding: 0 1em;
}

.Features .head p {
	display: grid;
	align-items: center;
	grid-template-columns: max-content max-content;
	grid-gap: 2em;
	margin: 1.5em 0;
}


/* ==================== features_point.css ==================== */

.Features .point {
	position: relative;
	box-sizing: border-box;
	margin-top: 1em;
	padding: 0.25em;

	background:
		linear-gradient(0deg, white, white) no-repeat left top,
		linear-gradient(90deg, rgba(125, 204, 243, 1) 3.88%, rgba(84, 194, 240, 1) 20.7%, rgba(0, 146, 211, 1) 46.1%, rgba(0, 133, 205, 1) 83.09%) no-repeat left top;
	background-size: 100% 100%;
	background-clip:
		content-box,
		padding-box;
}

.Features .point h4 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0.125em 0 0;
	transform: translateY(-50%);
	font-size: inherit;
	text-align: center;
}

.Features .point ul {
  grid-gap: 1em;
}

@media (min-width: 769px) {
  .Features .point ul {
    width: 850px;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {

	.Features .point ul {
		margin: 2em 1em 1em;
		grid-template-columns: repeat(2, 1fr);
    display: grid;
	}
}


@media (min-width: 769px) {

	.Features .point {
		display: flex;
		justify-content: center;
		width: 980px;
	}

	.Features .point ul {
		margin: 2.5em 0 1.5em;
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==================== lineup.css ==================== */

.Lineup {
	margin-top: 4em;
}

.Lineup:last-child {
	margin-bottom: 3em;
}

.Lineup .body {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0 -0.25em;
	padding: 0.25em;
	background:
		linear-gradient(0deg, white, white) no-repeat left top,
		linear-gradient(90deg, rgba(125, 204, 243, 1) 3.88%, rgba(84, 194, 240, 1) 20.7%, rgba(0, 146, 211, 1) 46.1%, rgba(0, 133, 205, 1) 83.09%) no-repeat left top;
	background-size: 100% 100%;
	background-clip:
		content-box,
		padding-box;
}
@media (min-width: 769px) {
  .Lineup .body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .Lineup .body h4 {
    width: 100%;
  }
  .Lineup .body h4 img {
    display: block;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .Lineup .body {
    flex-direction: column;
  }
}


.Lineup h3 {
	padding: 2em 0 1em;
}

.Lineup h3 img:nth-of-type(1) {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	margin-top: 0.125em;
}

.Lineup h3 span {
  width: 3.8em;
  display: block;
  margin: -5em 0 0.5em -5em;
}
.Lineup h3 span img {
  display: block !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

.Lineup ul {
	margin: 1em 1em 2em;
}

.Lineup figure {
	margin: 0;
}

.Lineup .info {
	margin: 1em 0;
}


@media (max-width: 768px) {

	.Lineup .body {
		margin: 0 1em;
	}

	.Lineup .body h3 img {
		font-size: 70%;
	}
  
  .Lineup h3 span {
    width: 3em;
    margin: -5.5em 0 2em -3.5em;
  }

	.Lineup li {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0 1em;
		text-align: center;
	}

	.Lineup li:nth-of-type(n+2) {
		margin-top: 1em;
	}

	.Lineup li figure {
		grid-column: 1;
		grid-row: 1/3;
	}

	.Lineup li .info {
		align-self: flex-end;
	}
	.Lineup li .buy {
		align-self: flex-start;
	}

}


@media (min-width: 769px) {

	.Lineup ul {
		/*display: grid;
    align-items: end;*/
		grid-template-columns: repeat(5, 1fr);
		width: calc(100% - 8rem);
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: space-around;
	}

	.Lineup li {
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
		/*flex-direction: column;*/
		align-items: center;
	}
  
  .Lineup .info {
    width: 100%;
    text-align: center;
  }

}


/* ==================== reason.css ==================== */

.Reason {
	margin-top: 3em;
	padding: 1px 2em;
	background: no-repeat top center;
	background-size: cover;
}

.Reason h3,
.Reason ul {
	margin: 2em 0;
}

.Reason h3 {
	text-align: center;
	margin: 2em 0;
}


@media (max-width: 768px) {
	.Reason {
		background-image: url(../img/faburuas/reason_back_sp.jpg);
	}

	.Reason h3 img {
		width: 90%;
	}

	.Reason li {
		width: 80%;
	}

	.Reason li:nth-of-type(2) {
		margin-top: 1em;
		margin-left: auto;
	}

}


@media (min-width: 769px) {
	.Reason {
		background-image: url(../img/faburuas/reason_back_pc.jpg);
	}

	.Reason ul {
		display: flex;
		justify-content: center;
	}

	.Reason li {
		margin: 0 0.5em;
	}
}


/* ==================== top.css ==================== */

.Top figure {
	margin: 0;
	text-align: center;
}

.Top .body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.Top h2 {
	margin: 0;
}


@media (max-width: 768px) {
	
	.Top figure {
		margin-bottom: -2.5em;
	}
	
	.Top h2 img {
		width: 10em;
	}

	.Top h3 {
		margin: 1.5em 0 0;
	}
	.Top p {
		margin: 1.5em 0 0;
	}
	.Top a {
		box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    margin: 1.5em 0;
	}
  .Top a img {
    width: 22em;
  }
}
	

@media (min-width: 769px) {

	.Top {
		position: relative;
	}
	.Top figure {
		background: url(../img/faburuas/top_mv_back_pc.jpg) repeat-x center center;
		background-size: auto 100%;
	}
	.Top .body {
		position: absolute;
		right: 50%;
		top: 1.8em;
		margin-right: 4em;
	}
	
	.Top h2 {
		align-self: flex-start;
		transform: translateX(-2em);
	}
	.Top h3 {
		margin: 1em 0 0;
	}
	.Top p {
		margin: 1.5em 0 0;
	}
	.Top a {
		margin-top: 1em;
	}
	
}

/* ==================== news ==================== */

.news {
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.news p {
  font-size: 16px;
  line-height: 22px;
  margin: 0 10px;
}
.news p a {
  color: #333;
  text-decoration: underline;
}
.news p.new {
  padding: 4px 10px;
  background-color: #f00;
  color: #fff;
}
.news p.date {
  font-weight: bold;
}
@media (max-width: 768px) {
  .news {
    padding: 20px 1em;
    justify-content: flex-start;
  }
  .news p {
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0;
  }
  .news p br {
    display: none;
  }
  .news p.new {
    padding: 0 10px;
    margin-right: 10px;
  }
}

/* ==================== trouble.css ==================== */

.Trouble {
	padding: 2em 0 0;
	background: #dcdddd;
}

.Trouble::after {
	content: '';
	display: block;
	width: 100%;
	height: 2.35em;
	margin-top: 2em;
	background: white url(../img/faburuas/trouble_arrow.svg) no-repeat center bottom;
	background-size: auto 101%;
}

.Trouble .body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: no-repeat center center;
}

.Trouble .body p {
	margin-top: 2em;
}


@media (max-width: 768px) {
	.Trouble .body {
		height: 37.6em;
		padding-bottom: 9em;
		background-image:
			url(../img/faburuas/trouble_frame_sp.svg),
			url(../img/faburuas/trouble_back_image.png);
		background-position:
			center top,
			50% 100%;
		background-size:
			contain,
			auto 11.2em;
	}
}


@media (min-width: 769px) {
	.Trouble .body {
		width: 60em;
		height: 17.65em;
		margin: 0 auto;
		padding-top: 1em;
		background-image:
			url(../img/faburuas/trouble_frame_pc.svg),
			url(../img/faburuas/trouble_back_image.png);
		background-position:
			center top,
			85% 100%;

		background-size:
			contain,
			auto 14.8em;
	}

	.Trouble .body p {
		transform: translateX(-3em);
	}
}


.auth figure {
  display: flex;
  justify-content: center;
}
.auth figure a {
  width: 12em;
  margin: 0 0.5em;
  position: relative;
}
.auth figure a:after {
  content: "+";
  width: 50px;
  padding: 5px 0;
  background-color: #fff;
  border: 2px #2ea7e0 solid;
  border-radius: 50%;
  font-size: 36px;
  line-height: 100%;
  position: absolute;
  top: -10px;
  right: 0;
}
.modal {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  margin: 0 !important;
}
.modal > div {
  width: 63vh;
  height: 90vh;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.modal > div p {
  height: 30px;
  font-size: 50px;
  line-height: 35%;
  color: #fff;
  position: absolute;
  top: 0;
  right: -50px;
  z-index: 999;
  cursor: pointer;
}
.modal > div > div {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.modal > div > div img {
  height: 100%;
  margin-bottom: 20px;
}
.modal > div > div img:last-child {
  margin: 0;
}
.modal span {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media (max-width: 768px) {
  .auth figure {
    flex-wrap: wrap;
  }
  .auth figure a {
    width: 10em;
    margin: 0.5em;
  }
  .auth figure a:after {
    width: 30px;
    padding: 3px 0;
    font-size: 20px;
    top: -5px;
  }
  .modal > div {
    width: 45vh;
    height: 64vh;
  }
  .modal > div p {
    top: -40px;
    right: 0;
  }
}

/* ==================== magazine ==================== */

.magazine {
  margin-top: 70px;
}
.magazine img {
  width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .magazine {
    margin-top: 30px;
  }
}

/* ==================== movie ==================== */

.movie {
  width: 930px;
  margin: 70px auto 100px;
}
.movie h3 {
  width: 100%;
  margin-bottom: 35px;
}
.movie .movie_box {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
.movie .movie_box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  .movie {
    width: calc(100% - 2em);
    margin: 30px auto;
  }
  .movie h3 {
    margin-bottom: 10px;
  }
}

/* ==================== collaboration ==================== */

#collaboration {
  margin-bottom: -3em;
  overflow: hidden;
}
#collaboration img {
  width: 100%;
  display: block;
}
#collaboration > div {
  padding: 50px 0 70px;
  background-color: rgba(201,188,156,0.4);
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
#collaboration > div > img {
  width: 435px;
  margin-right: 60px;
}
#collaboration > div .text_box {
  width: 495px;
  position: relative;
  z-index: 2;
}
#collaboration > div .text_box:after {
  content: "";
  width: 665px;
  height: 690px;
  background: url(../img/faburuas/collaboration_bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -160px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}
#collaboration > div .text_box h4 {
  width: 455px;
  margin: 0 auto 20px;
}
#collaboration > div .text_box p {
  font-size: 16px;
  line-height: 28px;
}
#collaboration > div .text_box > div {
  width: 100%;
  padding: 35px 20px 15px;
  background-color: #fff;
  border: 10px rgba(247,168,157,0.3) solid;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 60px;
  position: relative;
}
#collaboration > div .text_box > div h5 {
  width: 250px;
  position: absolute;
  top: -30px;
  left: -10px;
}
#collaboration > div .text_box > div p a {
  font-size: 14px;
  text-align: right;
  text-decoration: underline;
  color: #333;
  display: block;
}
@media (max-width: 768px) {
  #collaboration > div {
    padding: 30px 1em;
    display: block;
  }
  #collaboration > div > img {
    width: 60%;
    margin: 0 auto 20px;
  }
  #collaboration > div .text_box {
    width: 100%;
  }
  #collaboration > div .text_box:after {
    display: none;
  }
  #collaboration > div .text_box h4 {
    width: 100%;
    margin-bottom: 15px;
  }
  #collaboration > div .text_box p {
    font-size: 14px;
    line-height: 24px;
  }
  #collaboration > div .text_box > div {
    padding: 20px 10px 10px;
    margin-top: 30px;
  }
  #collaboration > div .text_box > div h5 {
    width: 160px;
    top: -20px;
    left: -10px;
  }
  #collaboration > div .text_box > div p a {
    font-size: 12px;
  }
}

/* ==================== instagram ==================== */
.instagram {
  width: 930px;
  display: flex;
  flex-wrap: wrap;
  margin: 60px auto 100px;
}
.instagram h3 {
  width: 100%;
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
}
.instagram a {
  width: 32%;
  height: 295px;
  margin: 20px 2% 0 0;
  overflow: hidden;
}
@media (min-width: 769px) {
  .instagram a:nth-of-type(-n+3) {
    margin-top: 0;
  }
  .instagram a:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .instagram {
    width: calc(100% - 2em);
    margin: 30px auto;
  }
  .instagram h3 {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .instagram a {
    width: 49%;
    height: 45vw;
    margin: 8px 2% 0 0;
  }
  .instagram a:nth-of-type(-n+2) {
    margin-top: 0;
  }
  .instagram a:nth-of-type(2n) {
    margin-right: 0;
  }
}