@charset "utf-8";
/* CSS Document ver1.9.1 */

/*
* コンテンツ
* メインカラム
* サイドカラム
* ヘッダー
* グローバルナビゲーション
* フッター
* リンク
* パーツ
* 汎用
* 横幅
* color
* font-size
* margin
*/

@media screen and (max-width:768px){
}

html {
	-webkit-text-size-adjust:100%;
}

body {
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	line-height:1.5;
	font-size:125%;
	color:#444;
}

p {
	margin-bottom:1em;
}

img {
	max-width:100%;
	height:auto;
}

strong {
}

@media screen and (max-width:768px){
	body {
		min-width:320px;
	}
}

hr {
	border:none;
	border-bottom:2px dashed #999;
	margin:30px 0;
}

/*+++++++++++++++++++++++++++++++++++++++++++ 
	メインカラム
+++++++++++++++++++++++++++++++++++++++++++ */
main {
	width:960px;
	margin:0 auto;
	background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(239,239,239,1) 28%,rgba(239,239,239,1) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 78%,rgba(239,239,239,1) 78%,rgba(239,239,239,1) 100%);
	background: linear-gradient(-45deg,   rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(239,239,239,1) 28%,rgba(239,239,239,1) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 78%,rgba(239,239,239,1) 78%,rgba(239,239,239,1) 100%);
	background-size:50px 50px;
}

/* +++++++++++++++++++++++++++++++++++++++++++ メインビジュアル */
main .mainVisual {
	background:url(/special/campaign/referral/img/mv-bg.png) no-repeat;
	width:960px;
	height:990px;
	padding:20px;
}

main .mainVisual h1 {
	box-shadow:12px 12px 12px rgba(0,0,0,0.35);
	margin:0 0 7px;
}

main .mainVisual p {
	margin:0 0 90px;
}

main .mainVisual a {
	display:block;
	margin:0 auto;
	text-align:center;
}

main .mainVisual a:hover {
	-webkit-transform:scale(0.97);
	transform:scale(0.97);
}

/* +++++++++++++++++++++++++++++++++++++++++++ arrow */
main .arrow {
	text-align:center;
	margin:0 0 -30px;
	position:relative;
	z-index:10;
}

main .arrow.arrow2 {
	margin-bottom:-40px;
}

/* +++++++++++++++++++++++++++++++++++++++++++ section */
main section {
	padding:0 25px 25px;
}

main section h2 {
	position:relative;
	z-index:9;
	margin:0 -25px 20px;
}

main section.sectionTop {
	padding-bottom:0;
}

main section.sectionTop h2 {
	margin-bottom:-24px;
}

main section.sectionTop p {
	margin:0 -25px 0;
}

/* +++++++++++++++++++++++++++++++++++++++++++ plan */

main section.planArea {
	background:url(/special/campaign/referral/img/bg_02.png);
}

main section.planArea > div {
	width:909px;
	min-height:540px;
	margin:0 0 20px;
	box-shadow:6px 6px 6px rgba(0,0,0,0.20);
	line-height:1.2;
	position:relative;
	z-index:8;
	overflow:hidden;
}

main section.planArea .plan_01 {
	/*background:url(/special/campaign/referral/svg/bg_plan_01.svg) no-repeat #FFF 442px;*/
	background:url(/special/campaign/referral/img/bg_06.png) #FFF no-repeat;
	background-size:cover;
	border:#5CC5CB 5px solid;
}

main section.planArea .plan_01 dt {
	color:#1583B4;
}

main section.planArea .plan_02 {
	background:url(/special/campaign/referral/img/bg_07.png) #FFF no-repeat;
	background-size:cover;
	border:#C292BC 5px solid;
}
main section.planArea .plan_02 dt {
	color:#885590;
}

main section.planArea .plan_03 {
	background:url(/special/campaign/referral/img/bg_08.png) #FFF no-repeat;
	background-size:cover;
	border:#CB9D62 5px solid;
}

main section.planArea .plan_03 dt {
	color:#996130;
}


main section.planArea dl {
	width:450px;
	padding:20px 0 10px 15px;

}

main section.planArea dt {
	font-size:160%;
	line-height:1;
	margin-bottom:10px;
}

main section.planArea dt span {
	font-size:80%;
}

main section.planArea dd {
	font-size:130%;
}

main section.planArea .price {
	padding:0 0 0 15px;
}

main section.planArea .images {
	position:absolute;
	top:10px;
	right:-80px;
	
}

/* +++++++++++++++++++++++++++++++++++++++++++ merit */
main .meritArea {
	background:url(/special/campaign/referral/img/bg_01.png);
}

main .meritArea h3 + p {
	text-align:center;
	margin:0 0 10px;
}


/* +++++++++++++++++++++++++++++++++++++++++++ voice */
main .voiceArea {
	background:url(/special/campaign/referral/img/bg_03.png);
}

main .voiceArea > div {
	padding:10px;
	margin-bottom:20px;
}

main .voiceArea h3 {
	margin-bottom:10px;
}

main .voiceArea .floatR {
	width:500px;
	padding:0 10px;
	font-size:125%;
}

main .voiceArea .floatL {
	width:380px;
}

main .voiceArea img.photo {
	border-radius:10px;
	margin-bottom:5px;
}

/* +++++++++++++++++++++++++++++++++++++++++++ feature */
main .featureArea {
	background:url(/special/campaign/referral/img/bg_05.png);
}

main .featureArea h3 + p {
	text-align:center;
	margin:0 0 10px;
}


/* +++++++++++++++++++++++++++++++++++++++++++ about */
main .aboutArea {
	background:url(/special/campaign/referral/img/bg_04.png);
}

main .aboutArea h3 {
	margin:0 0 10px;
}

main .aboutArea p {
	font-size:110%;
}

/* +++++++++++++++++++++++++++++++++++++++++++ flow */
main .flowArea {
	background:url(/special/campaign/referral/img/bg_02.png);
}

main .flowArea ol::after {
	content:'';
	display:block;
	clear:both;
}

main .flowArea ol li {
	float:left;
	width:49%;
	clear:both;
	background:#FFF;
	padding:15px;
	border-radius:8px;
	margin:0 0 20px;
}

main .flowArea ol li p {
	padding:10px;
	margin-bottom:0;
	font-size:130%;
}

main .flowArea ol li:nth-child(even) {
	float:right;
	clear:none;
}

/* +++++++++++++++++++++++++++++++++++++++++++ confirmとcomplete */

.confirmArea,
.completeArea {
	max-width:960px;
	margin:0 auto;
	width:100%;
	background:none;
}

.confirmArea .btnArea {
	text-align:center;
	padding:0 50px;
}

.confirmArea .btnArea::after {
	content:'';
	display:block;
	clear:both;
}

.completeArea h1 {
	background:#306BAC;
	padding:10px;
	color:#FFF;
	line-height:1.2;
}

.completeArea .message {
	padding:20px 3%;
	background:url(/special/campaign/referral/img/bg_01.png);
}

/* confirmとcompleteは必要なコンテンツの高さ（1440px）に足りず、
　viewportのdevice-widthでスマホの画面からはみでる端末があるので、調整する */

@media screen and (max-width:959px){
	.confirmArea .transf .btnSubmit,
	.confirmArea .transf .btnBack {
		display:block;
		float:none;
		margin:0 auto 50px;
	}
	
	.confirmArea .transf {
		padding:0 10px;
	}
}

@media screen and (max-width:481px){
	.confirmArea button,
	.completeArea input[type="button"] {
		max-width:320px;
		font-size:125%;
		margin:0;
	}

	.confirmArea form table {
		font-size:100%;
	}
}

/*+++++++++++++++++++++++++++++++++++++++++++ 
	フッター
+++++++++++++++++++++++++++++++++++++++++++ */
footer {
	text-align:center;
	line-height:1.2;
	width:960px;
	margin:20px auto;
}

footer small {
	font-size:90%;
}

.confirmArea + footer,
.completeArea + footer {
	max-width:960px;
	width:100%;
}

/*+++++++++++++++++++++++++++++++++++++++++++ 
	フォーム
+++++++++++++++++++++++++++++++++++++++++++ */
form {
	background:url(/special/campaign/referral/img/bg_01.png);
	padding:0 0 30px;
}

.label,
label {
	display:inline-block;
	margin:0 10px 0 0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
	font-family: "メイリオ", Meiryo, sans-serif;
	border:none;
	border-radius:6px;
	box-shadow:2px 2px #8EB8D1 inset;
	padding:10px 15px;
	font-size:24px;
	width:100%;
}
label,
input[type="submit"],
input[type="button"] {
	cursor:pointer;
}

input[type="submit"],
input[type="button"] {
	font-family:"メイリオ", Meiryo, sans-serif;
	-webkit-appearance: none;
}

input.btn {
	background:url(/special/campaign/referral/img/btn_02.png);
	width:788px;
	height:161px;
	margin:0 auto;
	border:none;
	text-indent:110%;
	white-space:nowrap;
	overflow:hidden;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	-webkit-transform:scale(0.97);
	transform:scale(0.97);
}

button,
input[type="button"] {
	max-width:400px;
	width:100%;
	border:#FFF 2px solid;
	border-radius:40px;
	font-size:175%;
	padding:10px 20px;
	font-weight:bold;
	color:#FFF;
	margin:0 10px;
	cursor:pointer;
	box-shadow:3px 3px 6px rgba(0,0,0,0.20);
}

.btnSubmit {
	background: rgb(150,216,18);
	background: -webkit-linear-gradient(top,  rgba(150,216,18,1) 0%,rgba(83,184,20,1) 100%);
	background: linear-gradient(to bottom,  rgba(150,216,18,1) 0%,rgba(83,184,20,1) 100%);
	text-shadow:#306000 0 0 5px;
}

.btnBack {
	background: rgb(206,220,231);
	background: -webkit-linear-gradient(top,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
	background: linear-gradient(to bottom,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
	text-shadow:#333 0 0 5px;
}

form table {
	width:100%;
	margin:30px 0;
	font-size:120%;
}

form table tr + tr {
	border-top:#4578AE 2px dashed;
}

form table th {
	width:30%;
	padding:40px 0 40px 4%;
}

form table td {
	padding:40px 4% 40px 4%;
	
}

.help {
	color:#666;
	font-size:92.8%;
	vertical-align:middle;
	line-height:1.2;
}

.submit {
	text-align:center;
	padding:10px 10px 30px;
	margin:10px 0 30px;
}

.transf {
	padding:0 50px;
	text-align:center;
}

.transf:after {
	content:'';
	display:block;
	clear:both;
}

.transf .btnSubmit {
	float:right;
}

.transf .btnBack {
	float:left;
}

.inputL {
	width:540px;
}

.inputM {
	width:300px;
}

.inputS {
	width:200px
}

.inputSS {
	width:120px;
}

.inputXS {
	width:60px;
}

.errorMessage {
	color:red;
	font-weight:bold;
	padding:20px 0 0 20px;
	margin:0;
}
/*+++++++++++++++++++++++++++++++++++++++++++ 
	リンク
+++++++++++++++++++++++++++++++++++++++++++ */
a:focus { outline:none;}
a { color: #000; }
a:hover,
a:active { text-decoration:none; }
a:hover img.imgOpacity {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
a.link:before{
	content:'';
	display:inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #2DA7E0;
	margin:0 2px 0 0;
	vertical-align:baseline;
}

/*+++++++++++++++++++++++++++++++++++++++++++ 
	パーツ（不特定のページで使うスタイル）
+++++++++++++++++++++++++++++++++++++++++++ */
.box_01,
.box_02,
.box_03,
.box_04,
.box_05,
.box_06,
.box_07 {
	background:#FFF;
	padding:5px;
	border:#B58140 4px solid;
	border-radius:10px;
}

.box_01 {
	border-color:#5DC1CF;
}

.box_02 {
	border-color:#1882BD;
}

.box_02 strong {
	color:#1882BD;
}

.box_03 {
	border-color:#E8597A;
}

.box_03 strong {
	color:#E8597A;
}

.box_04 {
	border-color:#8B5593;
}

.box_04 strong {
	color:#8B5593;
}

.box_05 {
	border-color:#27AD3D;
}

.box_05 strong {
	color:#27AD3D;
}


.box_06 {
	border-color:#E35F80;
}

.box_07 {
	border-color:#B58140;
}

.column2box::after {
	content:'';
	display:block;
	clear:both;	
}


.column2box .column {
	float:left;
	width:50%;
	padding:0 15px 15px 0;
	clear:both;
}

.column2box .column:nth-child(even) {
	float:right;
	padding:0 0 15px 15px;
	clear:none;
}

.column2box .column:nth-last-child(-n+2){
	padding-bottom:0;
}

.column2box .column .column {
	padding:0 5px 5px 0;
}

.column2box .column .column:nth-child(even) {
	padding:0 0 5px 5px;
}


.description {
	padding:0 20px;
	font-size:125%;
}

.description p.texCenter {
	margin-bottom:8px;
}

.description p {
	margin-bottom:0;
}



/*+++++++++++++++++++++++++++++++++++++++++++
	汎用
+++++++++++++++++++++++++++++++++++++++++++ */
.clear { clear:both; }
.texCenter { text-align:center!important; }
.texLeft { text-align:left!important; }
.texRight { text-align:right!important; }
.weightNormal { font-weight:normal!important; }
.weightBold { font-weight:bold!important; }
.floatL { float:left; }
.floatR { float:right; }
.imgL {
	float:left;
	margin:0 1em 1em 0;
}
.imgR{
	float:right;
	margin:0 0 1em 1em;
}

@media screen and (max-width:768px){
	.imgL,
	.imgR {
		display:block;
		float:none;
		margin:0 auto 1em;
	}
}
.boxCenter {
	display:block;
	margin:0 auto; 
}
.borderNone { border:none!important; }
.overflowHidden { overflow:hidden; }
.imeDisabled { ime-mode:disabled; }

.line-height18 { line-height:1.8; }
.line-height17 { line-height:1.7; }
.line-height16 { line-height:1.6; }
.line-height15 { line-height:1.5; }
.line-height14 { line-height:1.4; }
.line-height13 { line-height:1.3; }
.line-height12 { line-height:1.2; }
.inlineBlock { display:inline-block; }
.inline { display:inline; }
/*+++++++++++++++++++++++++++++++++++++++++++
	横幅
+++++++++++++++++++++++++++++++++++++++++++ */
.w500 { width:500px; }
.w450 { width:450px; }
.w400 { width:400px; }
.w350 { width:350px; }
.w300 { width:300px; }
.w250 { width:250px; }
.w200 { width:200px; }
.w150 { width:150px; }
.w100 { width:100px; }
.w50 { width:50px; }
.w100per { width:100%; }
.w90per { width:90%; }
.w80per { width:80%; }
.w70per { width:70%; }
.w60per { width:60%; }
.w50per { width:50%; }
.w40per { width:40%; }
.w33per { width:33.333%; }
.w30per { width:30%; }
.w20per { width:20%; }
.w10per { width:10%; }
/*+++++++++++++++++++++++++++++++++++++++++++ 
	color
+++++++++++++++++++++++++++++++++++++++++++ */
.color_red { color:#F00; }
.color_black { color:#000; }
/*+++++++++++++++++++++++++++++++++++++++++++ 
	font-size
+++++++++++++++++++++++++++++++++++++++++++ */
/*※font-size:100%(16px相当)を基準としたサイズ*/
/*.fs12px { font-size:75%!important; }
.fs13px { font-size:81.3%!important; }
.fs14px { font-size:87.5%!important; }
.fs15px { font-size:93.7%!important; }
.fs17px { font-size:106.3%!important; }
.fs18px { font-size:112.5%!important; }
.fs20px { font-size:125%!important; }
.fs22px { font-size:137.5%!important; }
.fs24px { font-size:150%!important; }
.fs26px { font-size:162.5%!important; }
.fs28px { font-size:175%!important; }
.fs30px { font-size:187.5%!important; }
*/

.fs300 { font-size:300%!important; }
.fs250 { font-size:250%!important; }
.fs200 { font-size:200%!important; }
.fs150 { font-size:150%!important; }
.fs120 { font-size:120%!important; }
.fs110 { font-size:110%!important; }
.fs90 { font-size:90%!important; }
.fs80 { font-size:80%!important; }
.fs70 { font-size:70%!important; }
.fs60 { font-size:60%!important; }
.fs50 { font-size:50%!important; }

/*+++++++++++++++++++++++++++++++++++++++++++ 
	margin 
+++++++++++++++++++++++++++++++++++++++++++ */
.mt0 { margin-top:0!important; }
.mt5 { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }
.mt35 { margin-top:35px!important; }
.mt40 { margin-top:40px!important; }
.mt45 { margin-top:45px!important; }
.mt50 { margin-top:50px!important; }
.mb0 { margin-bottom:0!important; }
.mb5 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }
.mb35 { margin-bottom:35px!important; }
.mb40 { margin-bottom:40px!important; }
.mb45 { margin-bottom:45px!important; }
.mb50 { margin-bottom:50px!important; }
.mr0 { margin-right:0!important; }
.mr5 { margin-right:5px!important; }
.mr10 { margin-right:10px!important; }
.mr15 { margin-right:15px!important; }
.mr20 { margin-right:20px!important; }
.mr25 { margin-right:25px!important; }
.mr30 { margin-right:30px!important; }
.mr35 { margin-right:35px!important; }
.mr40 { margin-right:40px!important; }
.mr45 { margin-right:45px!important; }
.mr50 { margin-right:50px!important; }
.ml0 { margin-left:0!important; }
.ml5 { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px!important; }
.ml20 { margin-left:20px!important; }
.ml25 { margin-left:25px!important; }
.ml30 { margin-left:30px!important; }
.ml35 { margin-left:35px!important; }
.ml40 { margin-left:40px!important; }
.ml45 { margin-left:45px!important; }
.ml50 { margin-left:50px!important; }

/*+++++++++++++++++++++++++++++++++++++++++++ 
	TB用、SP用 
+++++++++++++++++++++++++++++++++++++++++++ */
.tb_show,
.sp_show {
	display:none;
}

@media screen and (max-width:1023px){
	.tb_hide {
		display:none;
	}
	
	.tb_show {
		display:block;
	}
}

@media screen and (max-width:768px){
	.sp_hide {
		display:none;
	}
	
	.sp_show {
		display:block;
	}
}
/*+++++++++++++++++++++++++++++++++++++++++++ clearfix */
.clearfix:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}