@charset "utf-8";

/*
	Reset
*/
body{ font-size: 0.9em; font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; text-align: center; word-wrap : break-word; overflow-wrap : break-word; background: #f6fdff url(../img/bg.jpg) left top repeat-x; }
a{ color: #264af2; }a:hover{ color: #e41b1b; }img{ border: none; vertical-align: bottom; }
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,img,address{ margin: 0px; padding: 0px; }
address,h1,h2,h3,h4,h5,h6,th,td,p{ font-size: 1.0em; font-style: normal; font-weight: normal; }
p{ color: #333; line-height: 1.6em; }
li{ list-style: none none outside; }

input,textarea{ font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; }


.clearfix:after, nav:after, #container:after, .inner:after, div:after, ul:after, ol:after, table:after, thead:after { content:" "; display:block; clear:both; }


/*
		Common　-　LP用の共通設定および上書き設定
 ----------------------------------------------------------------------------------------------------　*/
body{ background-color: #fff; }
.inbox{ position: relative; width: 980px; margin: 0px auto; }
h2{ margin: 50px 0px 0px; text-align: center; background: url(../img/h2-bg.gif) left center repeat-x; }



/*
		header　-　ヘッダー
 ----------------------------------------------------------------------------------------------------　*/

#header{ position: relative; width: 100%; height: 120px; }
#header h1{ position: absolute; left: 0px; top: 18px; margin: 0px; }
#header p.guide{ position: absolute; top: 45px; left: 240px; margin: 0px; text-align: left; }
#header .offer{ position: absolute; top: 22px; right: 0px; }
#header .offer ul li{  }
#header .offer ul li:last-child{ display: none; }





/*
		eyecatch　-　メインキャッチ
 ----------------------------------------------------------------------------------------------------　*/

.eyecatch{ position: relative; margin: 0px; padding: 10px 0px; border-bottom: 1px #dfdfdf solid; background-color: #fcfcfc; }
.eyecatch img{ margin: 8px 0px 0px; border: 5px #dfdfdf solid; }

.eyecatch .news{ width: 980px; margin: 0px auto; padding: 0px; background: url(../img/news-bg.gif) left top no-repeat; }
.eyecatch .news dl{ margin: 0px; padding: 0px; }
.eyecatch .news dl dt{ float: left; display: inline; margin: 0px 15px 0px 150px; font-weight: bold; line-height: 42px; }
.eyecatch .news dl dd{ line-height: 42px; font-weight: bold; text-align: left; }
.eyecatch .news dl dd.ttl{ color: #0000ff; text-decoration: underline; }
.eyecatch .news dl dd.ttl:hover{ color: #ff0000; }
.eyecatch .news dl dd.info{ margin: 5px 0px; padding: 15px 20px; line-height: 1.6em; border: 3px #fbdec4 solid; background-color: #fff; }


/*
		realtime　-　リアルタイム表示
 ----------------------------------------------------------------------------------------------------　*/

.realtime{ margin: 10px auto 0px; width: 970px; background: #fff url(../img/realtime-bg.jpg) 5px 45px no-repeat; }
.realtime .realtime-in{ border: 3px #efefef solid; height: 130px; overflow: auto; }
.realtime p{ padding: 8px 0px 0px; font-size: 1.15em; color: #cf0000; font-weight: bold; background-color: #efefef; }
.realtime p span{ color: #4f4f4f; font-size: 0.9em; font-weight: normal; }
.realtime dl{ margin: 5px 15px 15px 150px; padding: 0px 0px 0px 0px; text-align: left; }
.realtime dl dt{ float: left; display: inline; margin: 5px 5px 0px 0px; }
.realtime dl dd{ margin: 0px 10px 0px -10px; padding: 5px 0px 0px; font-size: 1.0em; border-bottom: 1px #ccc dotted; }
.realtime dl dd span{ padding: 0px 8px; font-weight: bold; }
.realtime dl dd span.area{ color: #47b511; }
.realtime dl dd span.age{ color: #119cb1; }
.realtime dl dd span.type{ color: #e71847; }


/*
		Anchor　-　フォームへのアンカー
 ----------------------------------------------------------------------------------------------------　*/

.anchor{ margin: 50px 0px; padding: 0px; height: 270px; background: url(../img/anchor-bg.png) center top no-repeat; }
.anchor dl{ margin: 0px; }
.anchor dl dt{ margin: 0px; padding: 10px 0px 0px; }
.anchor dl dd{ margin: 15px 0px 0px 455px; }
.anchor dl dd ul li{ margin: 0px 0px 8px; }



/*
		anxious　-　不安・悩み
 ----------------------------------------------------------------------------------------------------　*/

.anxious{ margin: 0px; padding: 0px;  }
.anxious p.txt{ margin: 30px 0px 40px; color: #2f2f2f; font-size: 1.4em; letter-spacing: 0.02em; font-weight: bold; text-align: center; }



/*
		Promise　-　5つの約束
 ----------------------------------------------------------------------------------------------------　*/

.promise{}
.promise h2{ background: none; }

.bx-wrapper{ position: relative !important; width: 100% !important; overflow: hidden; }
.bx-wrapper img { max-width: 100% !important; display: block !important; }
.bx-viewport{ width: 1020px !important; margin: 0px; margin: 0px auto !important; overflow: visible !important; _overflow: hidden !important; }
.bx-viewport:before, .bx-viewport:after{ content: ""; position: absolute; top: 0; bottom: 0; background-color: #efefef; opacity: 0.8; z-index: 1; }
.bx-viewport:before{ right: 100%; left: -100%; margin-right: 10px; }
.bx-viewport:after{ left: 100%; right: -100%; margin-left: 10px; }

#slider{ width: 1020px; margin: 20px auto 0px; }
#slider .main{ margin: 0px; }
#slider .main div{ width: 1020px; height: 500px; margin: 0px 20px; text-align: left; background: url(../img/promise-box-bg.gif) left top no-repeat; }

#slider .main div h3{ margin: 0px; padding: 30px 0px 0px 50px; }
#slider .main div dl{ width: 880px; margin: 40px 50px 0px; }
#slider .main div dl dt{ float: left; margin: 0px 20px 0px 20px; }
#slider .main div dl dd{ margin: 0px; padding: 10px 20px 10px 300px; font-size: 1.2em; }

#slider ul.menu{ margin: 5px 20px 0px 21px; }
#slider ul.menu li{ float: left; display: inline; margin: 5px 7px 0px 0px; }
#slider ul.menu li:last-child{ margin: 5px 0px 0px; }
#slider ul.menu li a img{  opacity: 0.2 !important; filter: alpha(opacity=20) !important; border: 5px #999 solid; }
#slider ul.menu li a:hover img{ opacity: 1.0 !important; filter: alpha(opacity=100) !important; border: 5px #ef1200 solid; }
#slider ul.menu li a.active img{  opacity: 1.0 !important; filter: alpha(opacity=100) !important; border: 5px #007282 solid; }

.prev-next{ position: relative; width: 1020px; margin: 0 auto; z-index: 10; }
.bx-prev, .bx-next{ position: absolute; display: block; width: 40px; height: 40px; top: -250px; }
.bx-prev{left: 5px; background: url(../img/promise-prev.png) left top no-repeat; z-index: 1; }
.bx-next{ right: 5px; background: url(../img/promise-next.png) left top no-repeat; z-index: 1; }
.bx-prev:hover{ background: url(../img/promise-prev_on.png) left top no-repeat; }
.bx-next:hover{ background: url(../img/promise-next_on.png) left top no-repeat; }
*:first-child+html .bx-prev, *:first-child+html .bx-next{ top:-250px; }


/*
		Compare　-　比較
 ----------------------------------------------------------------------------------------------------　*/

.compare{ margin: 100px 0px 0px; }
.compare p{ margin: 30px 0px; }

.compare .differ{ margin: 30px auto 0px; width: 980px; }
.compare .differ .party{ float: left; width: 460px; margin: 0px 0px 10px 10px; border: 5px #efefef solid; }
.compare .differ .site{ float: right; width: 460px; margin: 0px 10px 10px 0px; border: 5px #efefef solid; }
.compare .differ h3{ padding: 12px 0px 10px; font-weight: bold; background-color: #efefef; }
.compare .differ dl{}
.compare .differ dl dt{ margin: 10px 0px 0px 15px; padding: 0px 0px 0px 25px; text-align: left; font-size: 0.95em; font-weight: bold; cursor: pointer; background: url(../img/differ-list-bg_off.gif) left top no-repeat; }
.compare .differ dl dt:hover{ color: #cd0000; text-decoration: underline; background: url(../img/differ-list-bg_on.gif) left top no-repeat; }
.compare .differ dl dd{ margin: 10px 20px; padding: 15px; font-size: 0.95em; text-align: left; border: 1px #dfdfdf solid; background-color: #f9f9f9; }
.compare .differ p{ clear: both; margin: 0px 10px; padding: 10px 0px; color: #7f7f7f; font-size: 0.9em; font-weight: bold; border: 5px #efefef solid; background-color: #fcfcfc; }



/*
		Flow　-　流れ
 ----------------------------------------------------------------------------------------------------　*/

.flow{ margin: 100px 0px 0px; }
.flow p{ margin: 30px 0px; color: #2f2f2f; font-size: 1.4em; letter-spacing: 0.02em; font-weight: bold; text-align: center; line-height: 1.4em; }

.flow .step{ margin: 30px auto 0px; width: 980px; }
.flow .step h3{ float: left; display: inline; width: 300px; }
.flow .step dl{ margin: 15px 0px 0px 320px; text-align: left; }
.flow .step dl dt{ font-size: 1.1em; font-weight: bold; }
.flow .step dl dd{ margin: 5px 0px 0px; }
.flow .step p{ float: right; display: inline; margin: 0px 0px 0px 15px; }
.flow .step p img{ border: 5px #dfdfdf solid; }

.flow p.concierge{ margin: 20px auto 50px; }




/*
		System　-　システム
 ----------------------------------------------------------------------------------------------------　*/

.system{ margin: 100px 0px 0px; }
.system p{ margin: 50px 0px; color: #2f2f2f; font-size: 1.4em; letter-spacing: 0.02em; font-weight: bold; text-align: center; line-height: 1.4em; }



/*
		price　-　キャンペーン
 ----------------------------------------------------------------------------------------------------　*/

.price{ margin: 100px 0px 0px; }
.price h2{ margin-bottom: 50px; }
.price p{ margin: 30px 0px; color: #2f2f2f; font-size: 1.25em; letter-spacing: 0.02em; font-weight: bold; text-align: center; line-height: 1.4em; }
.price p img{ margin: 20px 0px 50px; }




/*
		Message　-　メッセージ
 ----------------------------------------------------------------------------------------------------　*/

.message{ margin: 70px 0px 0px; padding: 40px 0px 20px; background-color: #f9f9f9; }
.message h2{ margin: 0px; }
.message p{ margin: 20px 0px; }

.message dl{ width: 980px; margin: 30px auto; }
.message dl dt{ float: right; margin-left: 10px; }
.message dl dt img{ margin-bottom: 15px; padding: 3px; border: 5px #dfdfdf solid; }
.message dl dd{ margin: 0px 0px 15px; font-size: 1.05em; text-align: left; }





/*
		Voice　-　声
 ----------------------------------------------------------------------------------------------------　*/

.voice{ margin: 0px; padding: 50px 0px; background-color: #fcf7e0; }
.voice p{ margin: 30px 0px; color: #2f2f2f; font-size: 1.25em; letter-spacing: 0.02em; font-weight: bold; text-align: center; line-height: 1.4em; }
.voice h2{ margin: 0px; padding: 0px; }
.voice .box{ width: 940px; margin: 20px auto; border:5px #efefef solid; background-color: #fff; }
.voice .box p{ margin: 25px 40px; text-align: left; font-size: 1.2em; font-weight: normal; }
.voice .box p img{ float: right; margin: 0px 0px 0px 20px; border: 5px #efefef solid; }
.voice .box p.name{ margin: 25px 20px 10px; padding: 10px 20px 0px; font-size: 1.05em; font-weight: bold; border-top: 5px #efefef solid; }





/*
		story　-　成婚者の声
 ----------------------------------------------------------------------------------------------------　*/

.story{ margin: 0px; padding: 50px 0px; background-color: #f9f9f9; border-top: 1px #dfdfdf solid; border-bottom: 1px #dfdfdf solid; }
.story p{ margin: 30px 0px 20px; color: #2f2f2f; font-size: 1.25em; letter-spacing: 0.02em; font-weight: bold; text-align: center; line-height: 1.4em; }
.story h2{ margin: 0px; padding: 0px; }
.story ul{ width: 880px; margin: 0px auto; padding: 20px 0px; border: 3px #efefef solid; background-color: #fff; box-sizing: border-box; }
.story ul li{ position: relative; display: inline-block; width: 160px; height: 80px; margin: 10px 0px 0px 5px; padding: 0px; background-color: #efefef; cursor: pointer; border: 1px #dfdfdf solid; border-radius: 5px; }
.story ul li:hover{ color: #fff; background-color: #007282; }
.story ul li span{ position: absolute; display: inline-block; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 160px; font-size: 0.9em; font-weight: bold; text-align:center; }


/*
		Form　-　フォーム
 ----------------------------------------------------------------------------------------------------　*/

.form{ margin: 80px 0px 0px; }
body#confirm .form{ margin: 30px 0px 0px; }
.form h2{ margin: 0px 0px 0px; }

.form p{ margin: 20px 0px 0px; color: #2f2f2f; font-size: 1.1em; font-weight: bold; text-align: center; line-height: 1.4em; }
.form p img{ margin-bottom: 10px; }

.form p.notice{ margin: 15px 20px; padding: 10px 0px; font-size: 1.0em; border: 2px #efefef solid; border-radius: 5px; background: #fff; }

.form .matching-info{ margin: 0px; width: 880px; margin: 0px auto; }
.form .matching-info dl dt{ padding: 8px 0px; color: #ae0000; font-size: 1.2em; font-weight: bold; background-color: #ffffaa; }
.form .matching-info dl dd{ margin: 10px 0px 0px 50px; text-align: left; }
.form .matching-info dl dd span{ color: #ad0000; font-weight: bold; }

.form form{ width: 880px; margin: 50px auto 0px; padding: 0px 0px 50px; border: 3px #efefef solid; background-color: #fcfcfc; }
.form form label{ margin: 0px 15px 0px 0px; cursor: pointer; }
.form form input{ padding: 7px; font-size: 1.2em; border: 4px #dfdfdf solid; }
.form form select{ padding: 7px; margin: 0px 5px; font-size: 1.2em; border: 4px #dfdfdf solid; }
.form form textarea{ width: 500px; height: 200px; margin: 0px; padding: 7px; font-size: 1.2em; border: 4px #dfdfdf solid; }
.form form input[type="text"]:hover, .form form select:hover, .form form textarea:hover{ border: 4px #007282 solid; background-color: #ffffee; }
.form form input[type="text"]:focus, .form form select:focus, .form form texxtarea:focus{ border: 4px #007282 solid; background-color: #ffffbb; }
.form form input[type="radio"]{ width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.form form input[type="radio"] { -moz-transform-origin: right bottom; -moz-transform: scale( 1.4 , 1.4 ); }
.form form input[type="checkbox"]{ width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.form form input[type="checkbox"] { -moz-transform-origin: right bottom; -moz-transform: scale( 1.2 , 1.2 ); }
.form form input[type="image"]{ padding: 0px; border: none; }

.form form h3{ margin: 50px 20px 20px; font-size: 1.5em; font-weight: bold; border-bottom: 3px #007282 solid; }

.form form table{ width: 840px; margin: 0px 20px 10px; padding: 0px; font-size: 1.1em; border-collapse: collapse; }
.form form table tr th{ width: 230px; margin: 0px; padding: 20px 30px 20px 0px; font-weight: bold; text-align: right; border-bottom: 1px #dfdfdf solid; }
.form form table tr th img{ display: inline-block; margin: 0px 0px 0px 5px; vertical-align: middle; }
.form form table tr td { padding: 20px 0px; color: #191919; text-align: left; border-bottom: 1px #dfdfdf solid; }
.form form table tr:last-child th, .form form table tr:last-child td{ border: none; }

.form form .w50{ width: 50px; }
.form form .w100{ width: 100px; }
.form form .w400{ width: 400px; }

.thanks{ width: 880px; margin: 30px auto 0px; padding: 30px 0px; border: 5px #efefef solid; background-color: #fcfcfc; }
.thanks h2{ margin: 0px 0px 0px; }
.thanks p{ margin: 20px 40px; font-size: 1.2em; text-align: left; }

.ssl{ margin: 40px 0px 0px; text-align: center;}
.ssl p{ margin: 8px 0px 0px; font-size: 0.9em; }


/*
		Footer - フッター
 ----------------------------------------------------------------------------------------------------　*/

#footer address{ margin: 30px 0px 0px; padding: 0px; line-height: 60px; color: #fff; font-size: 1.0em; text-align: center; background-color: #007282; }

#pagetop{ position: fixed; bottom: 70px; right: 30px; font-size: 0.8em; cursor: pointer; }
#pagetop a{ display: block; width: 80px; padding: 20px 0px; color: #fff; text-align: center; text-decoration: none; border-radius: 5px; background: #007282; }
#pagetop a:hover{ text-decoration: none; background: #0081bf; }


p#story-banner{ position: fixed; top: 70px; width: 245px; right: -145px; _display: none !important; cursor: pointer; z-index: 100000; }