@charset "utf-8";

/* MEMBER(MM/SENIOR)
--------------------------------------------------- */
section#member {
	background: url("/img/top/33/bg_member.png") no-repeat center / cover;
}
section#member div.w940 {
	background: url("/img/top/33/member_app2007.png") no-repeat left 11% bottom -175px / 17% auto;
	padding: 4em 0;
}
section#member dl {
	width: 35%;
	display: inline;
	float: left;
	vertical-align: top;
	text-align: center;
	margin: 0;
	padding: 0;
}
section#member dl dt {
	font-weight: 500;
	font-size: 300%;
	margin: 0;
}
section#member dl dt span {
	border-bottom: 2px solid #1a1a1a;
	padding-bottom: 0.1em;
}
section#member dl dd {}
section#member dl dd p {
	margin: 1.5em 0 0.8em;
	font-size: 106%;
}
section#member dl dd p br.pcNone {
	display: none;
}
section#member ul {
	width: 60%;
	display: inline;
	float: right;
	vertical-align: top;
	list-style: none;
	font-size: 106%;
	margin: 0;
	padding: 3% 0 1%;
}
section#member ul li {
	display: inline-block;
	width: 31.6%;
	margin-right: 2.5%;
	vertical-align: top;
}
	section#member ul li:last-child { margin-right:0; }

section#member ul li a {
	-webkit-transition: all .3s;
	transition: all .3s;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #1a1a1a;
	padding: 80% 0.5em 2em;
	display: block;
}
	section#member ul li a:hover { color:#fff; }

	section#member ul li.app a { background:#fff url("/img/top/33/ic_app.svg") no-repeat center top 10% / 70%; }
	section#member ul li.app a:hover { background:#e60012 url("/img/top/33/ic_app_wh.svg") no-repeat center top 8% / 75%;  }
	section#member ul li.card a { background:#fff url("/img/top/33/ic_m_card.png") no-repeat center top 10% / 70%; }
	section#member ul li.card a:hover { background:#e60012 url("/img/top/33/ic_m_card_wh.png") no-repeat center top 8% / 75%; }
    section#member ul li.senior p,
    section#member ul li.business p { line-height:2.8em; }
	section#member ul li.senior a { background:#fff url("/img/top/33/ic_m_senior.svg") no-repeat center top 10% / 70%; }
	section#member ul li.senior a:hover { background:#e60012 url("/img/top/33/ic_m_senior_wh.svg") no-repeat center top 8% / 75%; }
	section#member ul li.business a { background:#fff url("/img/top/33/ic_m_business.svg") no-repeat center top 10% / 70%; }
	section#member ul li.business a:hover { background:#e60012 url("/img/top/33/ic_m_business_wh.svg") no-repeat center top 8% / 75%; }

section#member ul li h3 {
	font-size: 137%;
	margin: 0 0 0.5em;
}
section#member ul li p {
	font-size: 87%;
	line-height: 140%;
}
div.btnOl-bk a {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	padding: 0.3em 1.5em;
	border: 1px solid #1a1a1a;
	color: #1a1a1a;
}
div.btnOl-bk a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #1a1a1a;
}
div.btnOl-bk a::before,
div.btnOl-bk a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
div.btnOl-bk a,
div.btnOl-bk a::before,
div.btnOl-bk a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 979px) {
	section#member { padding:2% 0; }
	section#member ul { font-size:112%; }
	section#member div.w940 { background:url("/img/top/33/member_app1906.png") no-repeat right 10% top 5% / 25% auto; width:96%; padding:0; }
	section#member dl,
	section#member ul { width:auto; display:block; float:none; }
	section#member dl { padding:1em 30% 2.5em 0; }
	section#member ul { padding:0; }
}

/* Less than SP-LANDSCAPE
----------------------------------------------------------------- */
@media screen and (max-width:568px) {
	section#member { padding-top:4%; }
	section#member ul { font-size:87%; }
	section#member ul li { width:32%; margin-right:2%; }
	section#member dl dt { font-size:8vw; }
	section#member dl dd p br.pcNone { display:block; }
}

/* ==============================================================
 Less than SP-PORTRAIT
================================================================= */
@media screen and (max-width:480px) {
	section#member dl dd p { font-size:4vw; }
	section#member ul li h3 { font-size:5vw; }
		section#member ul li.app h3 { font-size:4vw; line-height:185%; }
	section#member ul li p { font-size:2.5vw; }
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
	section#member ul li { width:31.3%; margin-right:3%; }
	section#member ul li a { padding:80% 0em 2em; }
	section#member ul li h3 { font-size:131%; }
}