@charset "UTF-8";
/* ---------------------------------------- file info */
/* filename:common.css */
/* creation date:2016年4月24日 */
/* last updated:2016年4月25日 */
/* -------------------------------------------------- */

/* --------------------------------------------------
	000.margin and padding
-------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
object, iframe, pre, code, p, blockquote,
form, fieldset, legend,
table, th, td, caption, tbody, tfoot, thead,
article, aside, figure, footer, header,
hgroup, menu, nav, section, audio, video, canvas, main {
	margin:0;
	padding:0;
}

article, aside, figure, figcaption, footer,
h1, h2, h3, h4, h5, h6, header, hgroup, menu, nav, section, main {
	display:block;
}

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/* --------------------------------------------------
	001.HTML, Body, Anchor
-------------------------------------------------- */

html {
	overflow-y:scroll;
	overflow-x:hidden;
	_overflow:auto;
}

html, body {
	width:100%;
	height:100%;
	min-height:100%;
}

a {
	color:#fff;
	text-decoration:none;
}
a:visited {
	color:#fff;
	text-decoration:none;
}

a:link {
	color:#fff;
	text-decoration:none;
}


/* --------------------------------------------------
	002.Heading, Paragraph
-------------------------------------------------- */
h2{
	font-size: 140%;
    line-height: 1.4;
    text-align: center;
    color:white;
}

h3{
	font-size: 120%;
    color:black;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center
}
p{
	font-size: 14px;
    color:black;
    margin-bottom: 15px;
}
/* --------------------------------------------------
	003.List
-------------------------------------------------- */
ol , ul , li {
	list-style:none;
	zoom:1;
	overflow:hidden;
}



/* --------------------------------------------------
	006.Other
-------------------------------------------------- */

object {
	vertical-align:middle;
	outline:none;
}
x
i ,em {
	font-style:normal;
}

b ,
strong {
	font-weight:normal;
}

small {
	font-size:100%;
}

abbr, acronym {
	border:none;
	font-variant:normal;
}

address, caption, cite, code, dfn, var {
	font-weight:normal;
	font-style:normal;
}

code, pre {
	font-family:monospace;
}

sup {
	vertical-align:text-top;
}

sub {
	vertical-align:text-bottom;
}

hr {
	display:none;
}

/* ------------------------------------------------------------
	007.For IE6/7
------------------------------------------------------------ */
*:first-child + html body,
*:first-child + html br {
	letter-spacing:0;
}


/* ------------------------------------------------------------
	100 Common Style css
------------------------------------------------------------ */

section{
	 text-align: center;
	 margin-bottom: 40px;
}
.main_visual h1{
	text-align: left;
	position: absolute;
	bottom:4rem;
	left: 2rem;
	color: white;
	font-size:36px;
    font-weight: 800;
    font-family: "Mplus 1p","メイリオ",Meiryo,"MS Pゴシック",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",sans-serif;
}
.main_visual span {
	text-align: left;
	position: absolute;
	bottom:2rem;
	left: 2rem;
	color:white;
	font-family: "Mplus 1p","メイリオ",Meiryo,"MS Pゴシック",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3",sans-serif;
}
.row {
    margin: 0 auto;
    max-width: 62.5rem;
  	width: 100%;
}
.f_title {
    color: black;
    font-size: 16px;
    margin-top: 40px;
}

.line-title {
	position: relative;
    background: #07B53B;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 8px 8px 0 0;
    padding: 22px 0;
    text-align: center;
}

.line-title:before {
    position: absolute;
    bottom: -14%;
    content: " ";
    border-bottom: 14px solid;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #07B53B;
    transform: rotate(-180deg);
    left: calc(48%);
}
.btn-area {
    margin-top: 40px;
}
.btn-area p{
   font-size: 14px;
   color: #F63876;
   margin-bottom: 2px;
}
.button{
	border-radius: 8px;
	width: 280px;
    color: white;
    font-size: 18px;
	position: relative;
	display:inline-block;
    background: #07B53B;
    color: #fff;
    padding: 20px 40px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
	color: #fff;
}
.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
	animation: shine 5s infinite ease-in-out;
}
@keyframes shine {
	 20%, 100% {
    opacity: 0;
   left: 125%;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
.merite{
	    margin-top: 40px;
	}
.merite img{
	width: 50%;
}
.type_1{
    border-bottom: 2px solid #eee;
}
.method_search_01{
	position: relative;
	width: 100%;
}
.method_search_02{
	margin-top: 40px
}
.method_search_01:after{
	position: absolute;
    content: " ";
    border-bottom: 14px solid;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #07B53B;
    transform: rotate(-180deg) translateX(50%);
}

.method_qr_01:after{
	position: absolute;
    content: " ";
    border-bottom: 14px solid;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #07B53B;
    transform: rotate(-180deg) translateX(50%);
}
.method_qr_w{
	width: 100%;
}
.method_1{
	width: 100%;
    border-bottom: 2px solid #eee;
    padding-bottom: 40px;
    margin-top: 40px;
    text-align: center;
}
.method_1 img{
	display: inline-block;
	width: auto;
	height: auto;
	text-align: center;
	width: 90%;
}
.method_2{
	width: 100%;
    margin-top: 40px;
    text-align: center;
}
.method_qr_02 {
    width: 100%;
    display: flex;
    padding-top: 29px;
    flex-flow: wrap;
}
.method_qr_01 img{
	width: 90%;
}
.method_qr_02 p{
		margin: 0 auto;
    padding-top: 10px;
}
.qr_area{
	display: inline-flex;
    justify-content: space-around;
    width: 80%;
}
.qr_area>div:first-child{
	margin-right: 20px;
}
.qr_area>div:first-child p{
	margin-top: 15px;
}
.qr_area>div:last-child p{
	margin-top: 15px;
}

.qr{
	width: 50%;
	margin: 0 auto;
}
.qr img{
	border:2px solid #07B53B;
	border-radius: 5px;
	width: 65%;
	display: block;
	margin:0 auto;
}
.m{
	background-color: #5D89FF;
}
.w{
	background-color: #F63876;
}
.m_type{
	color: #5D89FF;
	font-weight:bold;
}
.w_type{
	color: #F63876;
	font-weight:bold;
}
.method_qr{
    display:block;
}
/* footer-select */
.footer-select{
	position: fixed;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.842);
	display: flex;
	justify-content: space-around;
	padding: 2% 0;
}
.footer-select>a{
	width: 30%;
}
.friend{
	width: 33%;
	display: flex;
	justify-content: center;
	align-items: center;

}
.friend>img{
	width:22%;
	height: 61%;
	margin-right: 8%;
}
header{
	position: absolute;
	margin: 2em;
	z-index: 11;
}
header img{
	width: 80%;
}

/* footer */
footer{
	background-color: #07b53b;
	color: #fff;
	text-align: center;
	padding-top: 20px
}
.top-btn{
	display: inline-block;
	color: #fff;
	text-decoration: none;
    border: #fff 2px solid;
    padding: 2% 3%;
   	margin: 4%;
    border-radius: 25px;
}
.top-btn>p{
	color: #fff;
	text-decoration: none;
	margin-bottom: 0;
}
.footer-right {
    font-size: 10px;
    padding-bottom: 2%;
    margin-bottom: 0;
    color: white;
    text-align: center;
}
.row{
    margin: 0 auto;
    max-width: 800px;
    margin-bottom: 40px;
}
.method_search{
	width: 100%;
}
/* --------------------------------------
		101 outline
-------------------------------------- */
@media screen and (min-width: 640px) {
	
	header img{
		width: 100%;
	}
	.top-main {
    width: 930px;
    margin: 0 auto 30px;
	}
	body .wrap {
		font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
		width:100%;
		margin:0 auto;
		position: relative;
	}
	p {
    	font-size: 16px;
	}
	h2{
		font-size: 200%;
	}
	h3 {
	    font-size: 20px;
	    margin-bottom: 18px;
	    text-align: center;
	}
	section{
		background-color: #fff;
	}
	.select{
		padding: 5% 0;
	}
	.women>a>img{
		width: 80%;
	}
	.men>a>img{
		width: 80%;
	}
	.friend-headline {
		margin-bottom: 4%;
	}
	.merite{
		display: flex;
    	justify-content: space-between; 
	}
	footer {
		margin-bottom: 0;
		padding-top: 20px;
	}
	.top-btn {
	    padding: 1% 5%;
	    margin: 2%;
	}
	.top-main {
	    width: 930px;
	    margin: 0 auto 30px;
	}
	.sp_only{
		display: none;
	} 
	.main_visual{
		position: relative;
		width: 100%;
		height: 85vh;
	    background: url(/cmp/line/common/images/pc.png) center no-repeat;
    	background-size: cover;
	}
	article{
		margin:0 auto;
		max-width: 1100px;
		margin-bottom: 40px;
	}
	.f_title {
    	font-size: 24px;
	}
	.line-title {
	    font-size: 24px;
	}
	.arrow{
		transform: rotate(89deg);
	}
	.main_visual h1 {
	    bottom: 9rem;
	    left: 9rem;
	    font-size: 54px;
	}
	.main_visual span {
	    bottom: 6rem;
	    left: 9rem;
	    font-size: 24px;
	}
	.method_search{
		max-width: 1100px;
		display: flex;
		align-items: center;
		margin: 0 auto;	
	}
	.method_search:after{
		max-width: 1100px;
		display: flex;
		margin: 0 auto;	
	}
	.method_search_01{
		width: 50%;
	}
	.method_search_01 img{
		width: 60%;
	}
	.method_search_02{
		width: 50%;
		margin-top: 0px
	}
	.method_search_02 img{
		width: 60%;
	}
	.type_1{
	    border-right: 2px solid #eee;
	    border-bottom: 0px solid #eee;
	}
	.merite img{
		width: 50%;
	}
	.merite section{
    	padding: 0px 20px;
	}
	.merite section:first-child{
    	margin-left: 0px;}
    .merite section:last-child{
    	margin-right: 0px;}
	.method_qr{	
    display: flex;
    align-items: center;
	}
	.method_qr_01{
		width: 50%;
	}
	.method_qr_01 img{
	width: 60%;
	}	
	.method_search_01:after{
	position: absolute;
    content: " ";
    border-bottom: 14px solid;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #07B53B;
    transform: rotate(90deg);
    right: 0;
    top: 35%
	}
	.method_qr_01:after{
	position: absolute;
    content: " ";
    border-bottom: 14px solid;
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-right: 15px solid rgba(0, 0, 0, 0);
    color: #07B53B;
    transform: rotate(90deg) translateX(50%);;
    right: 0;
    top: 35%
	}
	.method_qr_02 {
    padding-top: 0px;
    width: 50%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	}
	.method_qr_02 span{
		margin-top:10px;
	}
	.method_qr_01{
		position:relative;
	}
	.qr_m{
		margin-right: -100px;
    }
}

@media screen and (max-width: 639px) {
	body .wrap {
		font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
		width:100%;
		max-width: 100%;
		overflow:hidden;
		zoom:1;
	}
	.hide-for-small-only {
		display:none;
	}
	.top-main {
	    width: 930px;
	    margin: 0 auto 30px;
	}
	.pc_only{
		display: none;
	}
	.main_visual{
		position: relative;
	    height: 70vh;
	    background: url(/cmp/line/common/images/spn.png) center no-repeat;
	    text-align: center;
	        background-size: cover;
	}

}