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

.pc-only {
	display: block;
}

.sp .pc-only {
	display: none;
}

.sp-only {
	display: none;
}

.sp .sp-only {
	display: block;
}

.pc-break {
	display: block;
}

.sp .pc-break {
	display: none;
}

.sp .sp-break {
	display: block;
}


.contents {
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	background: url(../img/bg-pc.jpg) center top no-repeat;
	box-sizing: border-box;
	padding-bottom: 100px;
}

.sp .contents {
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	background: none;
	box-sizing: border-box;
	padding-bottom: 4%;
}
section {
	margin: 0 auto;
	width: 970px;
	position: relative;
}

.sp section {
	margin: 0 2%;
	width: 96%;
	position: relative;
}

a:link {
	-webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all  0.4s ease;
}

a:hover {
	opacity: 0.6;
}

/*-------------------------------
contents
--------------------------------*/

#mv {
	margin: 0 auto;
	width: 970px;
	padding-top: 22px;
	height: 464px;
	text-align: right;
}

.sp #mv {
	display: none;
}

.sp #sp-header {
	width: 100%;
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	background: url(../img/header_sp02.png) center top no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	box-sizing: border-box;
	padding-bottom: 4rem;
}

#mv h1 {
	background: url(../img/header_pc02.png) right top no-repeat;
	height: 418px;
}

.sp #mv h1 {
	display: none;
}

#lead-block {
	color: #fff;
	text-align: center;
	padding-top: 42px;
	padding-bottom: 42px;
	font-size: 22px;
	font-weight: bolder;
	line-height: 40px;
}

.sp #lead-block {
	padding-top: 100%;
	font-size: 124%;
	line-height: 170%;
}

.ttl-friend {
	background: url(../img/ttl-friend_pc.png) 132px top no-repeat;
	text-indent: -1000%;
	height: 61px;
}

.ttl-id {
	margin-top: 4rem;
	background: url(../img/ttl-cooperation_pc.png) 132px top no-repeat;
	text-indent: -1000%;
	height: 61px;
}

.sp .ttl-friend {
	background: url(../img/ttl-friend_sp.png) left top no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	text-indent: -1000%;
	height: 0;
	padding-bottom: 12%;
}

.sp .ttl-id {
	margin-top: 4rem;
	background: url(../img/ttl-cooperation_sp.png) left top no-repeat;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	text-indent: -1000%;
	height: 0;
	padding-bottom: 12%;
}

ul.howto {
	display:flex;
  flex-flow :row wrap;
  justify-content:flex-start;
	background: #f4ece1;
	margin-left: 118px;
	margin-bottom: 14px;
	max-height: 162px;
}

.sp ul.howto {
	display:flex;
  flex-flow :row wrap;
  justify-content:flex-start;
	background: #f4ece1;
	margin-left: 0;
	margin-bottom: 14px;
	max-height: 100%;
}

ul.howto li {
	display:flex;
  flex-flow :row wrap;
  justify-content:flex-start;
	align-items: center;
}

ul.howto li:first-child img {
	width: 176px;
	position: relative;
	top: -12px;
	margin-left: -114px;
	z-index: 10;

}

.sp ul.howto li:first-child {
	width: 34%;
	margin-right: 2%;
}

.sp ul.howto li:first-child img {
	width: 100%;
	position: relative;
	top: 10px;
	margin-left: 4%;
	z-index: 10;
}

ul.howto li:nth-child(2) {
	width: 840px;
	font-size: 25px;
	font-weight: bolder;
	line-height: 40px;
	padding: 16px 14px 16px 70px;
	position: absolute;
	left: 130px;
}

.sp ul.howto li:nth-child(2) {
	width: 64%;
	font-size: 130%;
	font-weight: bolder;
	line-height: 170%;
	padding: 16px 14px;
	position: relative;
	left: 0;
}

ul.icon li img {
	width: 50%;
}

.icon01 {
	width: 122px;
	margin-left: 84px;
	position: relative;
	z-index: 10;
}

a .icon02 {
	display: block;
	width: 114px;
	margin-left: 2px;
}

.sp .icon01, .sp a .icon02,.sp .icon03 {
	margin-left: 0;
	position: relative;
	z-index: 10;
	margin-top: 1rem;
}

.icon03 {
	width: 114px;
	position: absolute;
	right: 26px;
}

.sp .icon03 {
	width: 114px;
	position: relative;
	right: 0;
}

.sp .icon04 {
	width: 100%;
}

.fitting-you {
	margin-top: 8.2rem;
	background: url(../img/bg-line-rakuten.png) center top no-repeat;
	height: 64px;
	text-align: center;
}

.fitting-you img {
	margin: 0 auto;
}

.sp .fitting-you img {
	width: 100%;
}

ul.fontofsmth {
	display:flex;
  flex-flow :row wrap;
  justify-content:space-between;
}

ul.fontofsmth li {
	width: 470px;
	margin-top: 4.3rem;
	display:flex;
  flex-flow :row wrap;
  justify-content:flex-start;
	align-items: center;
}

ul.fontofsmth li h3.ttl-movie {
	width: 470px;
	height: 50px;
	font-size: 25px;
	font-weight: bolder;
	text-align: center;
	background: url(../img/ttl-movie.jpg) center top no-repeat #fff;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	padding-top: 10px;
	text-indent: -1000%;
}

ul.fontofsmth li h3.ttl-sports {
	width: 470px;
	height: 50px;
	font-size: 25px;
	font-weight: bolder;
	text-align: center;
	background: url(../img/ttl-sports.jpg) center top no-repeat #fff;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	padding-top: 10px;
	text-indent: -1000%;
}


.sp ul.fontofsmth li {
	width: 100%;
}

ul.fontofsmth li h3 {
	width: 100%;
}

.white-area {
	margin-top: -0.3rem;
	width: 470px;
	background-color: #fff;
	padding: 14px 14px 0;
	width: 470px;
	display:flex;
  flex-flow :row wrap;
	position: relative;
  align-items: center;
}

.sp .white-area {
	width: 100%;
}

.balloon2-right {
	width: 256px;
  position: relative;
  display: inline-block;
  margin: 0.6em 15px 1em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
	border: 2px solid #00c402;
  box-sizing: border-box;
	border-radius: 10px;
}

.sp .balloon2-right {
	font-size: 14px;
	width: 46%;
	padding: 2%;
}

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -42px;
  margin-top: -18px;
  border: 14px solid transparent;
  border-left: 28px solid #fff;
  z-index: 2;
}

.balloon2-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  margin-top: -22px;
  border: 18px solid transparent;
  border-left: 32px solid #00c402;
  z-index: 1;
}

.balloon2-right p {
	font-size: 16px;
	font-weight: bolder;
	line-height: 28px;
  margin: 0;
  padding: 12px 4px;
}

.sp-img {
	width: 160px;
}

.sp .sp-img {
	width: 48%;
}
.sp-pos {
	margin-top: 7px;
}

.sml-font {
	font-size: 1.6rem;
	line-height: 2.8rem;
}

.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.section--register {
    background-color: #f3ece1;
    padding: 20px 12px !important;
}