/* **************************************************
	base
************************************************** */
.html { height: 100%; }

.body { position: relative; height: 100%; margin: 0; text-align: center; color: #696969; }

#layout { position: relative; width: 100%; min-height: 100%; text-align: center; height: auto !important; height: 100%; z-index: 0; background: #000; }

#upper { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 40px; -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); background: url("/image/pc/member/bg-header.png") repeat-x 0 0; border-bottom: 1px solid #595959\9; }

#upper:before, #upper:after { content: ''; position: absolute; display: block; width: 100%; height: 1px; }

#upper:before { bottom: 0; background-color: #fff; }

#upper:after { top: 0; height: 2px; background-color: #d90000; }

#lower { position: absolute; left: 0; bottom: 0; overflow: hidden; width: 100%; height: 300px; z-index: 1; background: url("/image/pc/bg-lower.png") repeat 0 0; }

.layout-btn { visibility: hidden; position: fixed; right: 0; bottom: 0; z-index: 999; display: block; width: 80px; height: 80px; color: #fff; background: transparent url("/image/pc/bg-headline.png") no-repeat 0 -500px; border: none; }

.layout-btn:hover { background: transparent url("/image/pc/bg-headline.png") no-repeat -100px -500px; }

#content-wrap { position: relative; padding-bottom: 300px; text-align: left; }

/* **************************************************
	header, regist
************************************************** */
.header-btn-sp { display: none; }

.header-h1 { position: absolute; overflow: hidden; margin: 0; width: 120px; height: 40px; background: url("/image/pc/bg-headline.png") no-repeat 0 -370px; }

.header-h1 > a > div { width: 200px; height: 40px; text-align: left; }

/* **************************************************
	menu
************************************************** */
.menu-nav { float: right; overflow: hidden; }

.menu-ul { position: relative; margin-top: 1px; height: 40px; overflow: hidden; }

.menu-navigation { position: absolute; top: 1px; left: 100%; display: block; width: 7px; height: 5px; background: url("/image/pc/bg-headline.png") no-repeat -150px -370px; }

.menu-li { float: left; margin: 3px 0 0 0; padding: 6px 3px 0; }

.menu-li.separator { margin: 0 7px 0; padding: 0; height: 35px; border-width: 1px; border-style: solid; border-color: transparent; border-left-color: rgba(0, 0, 0, 0.1); border-right-color: rgba(255, 255, 255, 0.7); border-left-color: #ccc\9; border-right-color: #fff\9; }

.menu-li > a > [class^="menu-"] { overflow: hidden; height: 25px; text-indent: -20em; font-size: 14px; background-image: url("/image/pc/bg-menu.png"); }

.menu-1 { width: 7em; background-position: center 0px; }

.menu-2 { width: 6em; background-position: center -50px; }

.menu-3 { width: 7em; background-position: center -100px; }

.menu-4 { width: 7em; background-position: center -150px; }

.menu-5 { width: 6em; background-position: center -200px; }

.menu-6 { width: 8em; background-position: center -250px; }

.menu-7 { width: 7em; background-position: center -598px; }

a:hover > .menu-1 { background-position: center -300px; }

a:hover > .menu-2 { background-position: center -350px; }

a:hover > .menu-3 { background-position: center -400px; }

a:hover > .menu-4 { background-position: center -450px; }

a:hover > .menu-5 { background-position: center -500px; }

.menu-li > a:hover > .menu-6 { background-color: #d90000; background-position: center -550px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

a:hover > .menu-7 { background-position: center -645px; }

/* **************************************************
	lower footer contact
************************************************** */
.footer { position: relative; width: 100%; height: 300px; }

.footer-p { position: absolute; left: 0; bottom: 0; margin: 0; width: 100%; height: 60px; line-height: 60px; text-align: center; color: #797979; font-size: 12px; font-family: 'MS ゴシック', sans-serif; background-color: #e0e0e0; border-top: 1px solid #000; }

.footer-p:before { content: ''; position: absolute; top: 0px; left: 0; display: block; width: 100%; height: 2px; background-color: #fff; }

.footer-h3 { padding: 20px 0 20px; }

.footer-h3 > span { width: 200px; height: 20px; background-image: url("/image/pc/bg-headline.png"); }

.footer-h3.contact > span { background-position: 0 -440px; }

.footer-h3.sitemenu > span { background-position: 0 -460px; }

.footer-ul { text-align: center !important; }

.footer-li { text-align: left; margin-bottom: 5px; }

.footer-li.contact { margin-bottom: 1em; }

.footer-li.contact > a.btn { padding: 5px 0 3px 0; min-width: 240px; text-align: left; text-indent: 1em; color: #393939; }

.footer-li.contact > a > i { top: -2px; font-size: 30px; height: 0.9em; }

.footer-li.contact > a > i[class^="icon-"]:before { top: -3px; }

.footer-nav { margin-left: 5px; font-size: 14px; }

.footer-ul.sitemenu { float: left; width: 50%; }

.footer-li > a { color: #fff; }

.footer-li > a:hover { color: #ffe000; }

.footer-li > a > div > i[class^="icon-triangle-"] { border-color: transparent; border-left-color: #fff; }

.footer-li > a:hover > div > i[class^="icon-triangle-"] { border-color: transparent; border-left-color: #ffe000; }

.icon-triangle-left { color: #393939; border-left-color: #fff; }

[class^="contact-"], [class^="lower-"] { text-align: left; }

.footer-border { position: relative; }

.footer-border:before, .footer-border:after { content: ''; position: absolute; top: 5px; width: 1px; height: 230px; }

.footer-border:before { right: 0px; background: rgba(0, 0, 0, 0.3); }

.footer-border:after { right: 1px; background: rgba(255, 255, 255, 0.1); }

/* **************************************************
	content regist
************************************************** */
.regist-section { position: relative; margin: 80px 0 50px 30px; padding: 0; min-height: 400px; background-color: #fff; background-color: rgba(255, 255, 255, 0.7); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; }

.regist-form, .login-form { margin: 0 0 20px 0; }

.regist-section:before, .regist-section:after { content: ''; position: absolute; width: 100%; height: 100%; }

.regist-section:before { bottom: -10px; height: 10px; background: url("/image/pc/bg-regist-x.png") no-repeat 0 0; }

.regist-section:after { top: 0; right: -10px; width: 10px; background: url("/image/pc/bg-regist-y.png") no-repeat 0 0; }

.regist-h1, .login-h1 { margin: 0 5px; height: 50px; }

.regist-h1 { background: url("/image/pc/bg-headline.png") no-repeat 0 -160px; }

.login-h1 { background: url("/image/pc/bg-headline.png") no-repeat 0 -220px; }

.login-h1.subdomain { background: url("/image/pc/bg-headline.png") no-repeat 0 -970px; }

.regist-dl { margin: 0 20px; padding: 0; }

.regist-dt > span { width: 300px; height: 35px; background-image: url("/image/pc/bg-headline.png"); background-repeat: no-repeat; }

.regist-dt.area > span { background-position: 0 -290px; }

.regist-dt.state > span { background-position: 0 -330px; }

.regist-dt.check > span { width: 350px; background-position: 0 -850px; }

.regist-dd { margin: 0 0 15px 0; padding: 0 5px; }

.regist-dd > ul { margin: 0; }

.regist-li { margin: 5px 5px 0 0; }

/* エリア選択ボタン */
.regist-li > button { position: relative; padding: 0 0.8em 0 1.5em; height: 2.2em; line-height: 2.2em; color: #393939; font-size: 12px; background-color: #c0c0c0; }

.regist-li > button:hover { color: #fff; background: #d90000; }

dl[data-regist="state"] .regist-li > button > span { letter-spacing: 0.3em; }

.regist-li > button > i { position: absolute; top: 7px; left: 5px; color: #eee; font-size: 15px; }

.regist-li > button:hover > i { color: #00c830; }

.regist-li > button.regist-select { cursor: default; padding: 0 0.8em 0 2em !important; color: #fff; background-color: #d90000; }

.regist-li > button.regist-select > i { position: absolute; top: 2px; left: 5px; color: #0dbb00; font-size: 20px; }

/* 確認画面へ進む */
ul.regist-check-ul { margin: 0 0 0 0px; padding: 10px 0 0 10px; background: #ccc\9; background: rgba(0, 0, 0, 0.1); }

ul.regist-check-ul.second { padding: 5px 0 15px 10px; }

.regist-check-li { position: relative; margin-bottom: 5px; font-size: 14px; }

.regist-check-li > i { position: relative; margin-right: -3px; color: #008c28; font-size: 18px; }

.regist-check-li > i:before { top: -2px; }

/*確認する 戻る ボタン*/
input[type="submit"].regist-btn { padding: 0; width: 160px; height: 30px; background-color: #d90000; background-image: url("/image/pc/bg-headline.png"); background-repeat: no-repeat; background-position: -300px -600px; }

input[type="submit"].regist-btn:hover { background-color: #cc0000; background-position: -300px -650px; }

input[type="button"].regist-btn-back { padding: 0; width: 50px; height: 30px; background-color: #3c535d; background-image: url("/image/pc/bg-headline.png"); background-repeat: no-repeat; background-position: -480px -600px; }

input[type="button"].regist-btn-back:hover { background-color: #2d444f; background-position: -480px -650px; }

/* ログインフォーム */
ul.login-ul { float: left; margin: 0 0px 0 20px; padding: 10px 0; width: 320px; }

.login-li { height: 35px; }

.login-li.small { margin-top:10px; margin-left: 85px; height: auto; }

.login-li.small > label { display: inline-block; *display: inline; *zoom: 1; margin-right: 15px; }

.login-li.small > label > input[type="checkbox"] { margin: 0; }

.login-li.small > label > span { padding: 0px 0 0 3px; font-size: 12px; vertical-align: bottom; }

.login-li.small > a { vertical-align: top; font-size: 12px; }

.login-area, .login-tel, .login-pass { width: 80px; height: 25px; vertical-align: top; background-image: url("/image/pc/bg-headline.png"); background-repeat: no-repeat; }

.login-area { background-position: 0 -415px; }

.login-tel { background-position: -100px -415px; margin-right: 5px; }

.login-pass { background-position: -200px -415px; margin-right: 5px; }

.login-li.button { position: absolute; top: 45px; right: 5px; }

.base-btn.login { display: block; margin-top: 45px; width: 65px; height: 65px; background-color: #08c; }

.login-dropdown { width: 240px; }

.login-button > span.in-block { width: 11em; text-align: left; }

.base-btn.login { display: block; margin-top: 15px; width: 65px; height: 65px; background: url("/image/pc/bg-headline.png") no-repeat -200px -900px; overflow:hidden; text-indent:-200px; }

.base-btn.login:hover{ background: url("/image/pc/bg-headline.png") no-repeat -300px -900px; }


/* **************************************************
	content mgi
************************************************** */
.container-mgi-wrap { width: 100%; padding-top: 30px; padding-bottom: 40px; background: url("/image/pc/bg-repeat-x.png") repeat-x 0 0; }

.mgi-wrap { position: relative; padding: 0 0 0px 0; z-index: 1; }

.mgi-dl { color: #494949; font-size: 14px; margin-bottom: 0; background: url("/image/pc/bg-repeat-x.png") repeat-x 0 -400px; }

.mgi-dt, .mgi-dd { margin: 10px; margin-bottom: 0; padding: 0; background: #fff; }

.mgi-dd { position: relative; margin: 10px; margin-top: 0; padding: 5px 15px 0; min-height: 100px; color: #696969; font-size: 12px; background: #fff; }

.mgi-dd > ul { margin: 0 0 0 10px; overflow: hidden; }

.mgi-dd > ul > li { padding: 0 0 4px 0; white-space: nowrap; }

.mgi-dd > ul > li > b { padding: 0 2px; border-bottom: 1px solid #f00c7e; }

.mgi-dd > ul > li > span { padding: 0 0 0 3px; }

.mgi-dd > span { position: absolute; right: 10px; bottom: 10px; padding: 0px; }

.mgi-dd > span > a { white-space: nowrap; }

.mgi-dt > b { padding: 0 0 0 10px; }

.mgi-dt > b > i { margin-right: -2px; color: #d90000; font-size: 18px; }

.mgi-dt > b > i:before { top: -2px; }

/* **************************************************
	content
************************************************** */
.content-header { height: 350px; }

#lower:before, .content.first:before, .content.howto:after, .content.program:after, .content.corner:after, .content.howpoint:after, .content.faq:after { content: ''; display: block; position: absolute; bottom: -5px; left: 0; z-index: 0; width: 100%; height: 5px; background: url("/image/pc/bg-bottom-shadow.png") repeat-x 0 0; }

#lower:before, .content.howto:after, .content.corner:after, .content.howpoint:after, .content.program:after, .content.faq:after { top: 0; }

.content.first, .content.howto, .content.corner, .content.howpoint, .content.program, .content.faq { position: relative; overflow: hidden; z-index: 200; margin: 0 auto; padding: 0 0 40px 0; }

.content.first { padding: 0; min-height: 100%; background: url("/image/pc/2022/202203_parallax-first-bg.webp") no-repeat 50% 20px fixed; }

.content.howto { min-height: 400px; background: url("/image/pc/parallax-third-bg.png") repeat 50% 0 fixed; }

.content.corner { background: url("/image/pc/parallax-third-bg.png") repeat 50% 0 fixed; }

.content.howpoint { background: #fff; }

.content.program { background: url("/image/pc/bg-lower.png"); }

.content.faq { margin-top: -1px; background: url("/image/pc/parallax-third-bg.png") repeat 50% 0 fixed; }

/* **************************************************
	content parallax
************************************************** */
.content.first > div.container { padding-top: 40px; }

.content.first > .bg.inner-1, .content.first > .bg.inner-2, .content.howto > .bg.inner-1, .content.howto > .bg.inner-2 { position: absolute; margin: 0 auto; padding: 0; width: 100%; height: 1200px; }

.content.howto > .bg.inner-1, .content.howto > .bg.inner-2 { height: 700px; }

.content.first > .bg.inner-1 { background: url("/image/pc/parallax-first-inner-1.png") no-repeat center 0 fixed; }

.content.first > .inner-1.m8 { background: url("/image/pc/parallax-first-inner-1-m8.png") no-repeat center 0 fixed; }

.content.howto > .bg.inner-1 { background: url("/image/pc/content-howto-inner-1.png") no-repeat center 0 fixed; }

.content.howto > .bg.inner-2 { background: url("/image/pc/2022/202203_content-howto-inner-2.webp") no-repeat center 0 fixed; }

/* **************************************************
	content common
************************************************** */
.content { position: relative; }

.content.howto:before, .content.program:before, .content.corner:before, .content.howpoint:before, .content.faq:before { content: ''; position: absolute; display: block; top: 100px; width: 50%; height: 3px; }

.content.howto:before, .content.corner:before, .content.faq:before { left: 0px; background: #d90000; }

.content.program:before { right: 0px; background: #fff; }

.content.howpoint:before { right: 0px; background: #d90000; }

.container.howto, .container.program, .container.corner, .container.howpoint, .container.faq { z-index: 999; position: relative; }

.container.howto:before, .container.program:before, .container.corner:before, .container.howpoint:before, .container.faq:before { content: ''; position: absolute; z-index: -1; top: 65px; width: 80%; height: 50px; }

.container.howto:before, .container.corner:before, .container.howpoint:before, .container.faq:before { right: 0; background: url("/image/pc/bg-headline-doco.png") no-repeat right 0; }

.container.program:before { left: 0; background: url("/image/pc/bg-headline-doco.png") no-repeat 0 -50px; }

.container.howpoint:before { left: 0; background: url("/image/pc/bg-headline-doco.png") no-repeat 0 -100px; }

.howto-h2, .program-h2, .corner-h2, .howpoint-h2, .faq-h2 { position: relative; margin: 0; height: 130px; overflow: hidden; line-height: 1.2em; }

.program-h2 { text-align: right; }

.howpoint-h2 { text-align: right; }

.howto-h2 > span, .program-h2 > span, .corner-h2 > span, .howpoint-h2 > span, .faq-h2 > span { margin-top: 50px; width: 300px; height: 40px; }

/* **************************************************
	content headline
************************************************** */
.howto-h2 > span { background: url("/image/pc/bg-headline.png") no-repeat 0px -600px; }

.program-h2 > span { background: url("/image/pc/bg-headline.png") no-repeat 0px -640px; }

.corner-h2 > span { background: url("/image/pc/bg-headline.png") no-repeat 0px -720px; }

.howpoint-h2 > span { background: url("/image/pc/bg-headline.png") no-repeat 0px -680px; }

.faq-h2 > span { background: url("/image/pc/bg-headline.png") no-repeat 0px -760px; }

/* **************************************************
	content headline
************************************************** */
.howto-p { padding: 0 10px; font-size: 14px; line-height: 1.3em; }

.howto-nav { position: relative; }

.howto-ul { padding: 10px 20px; font-size: 14px; }

.howto-li { margin-bottom: 5px; }

.howto-li > a > i { color: #393939; }

.howto-li > a:hover > i { color: inherit; }

/* **************************************************
	content carousel
************************************************** */
.carousel-caption { padding: 10px; }

.carousel-h4 { margin: 0; padding: 5px 10px; line-height: 1.1em; font-size: 16px; }

.carousel.slide { margin: 0 20px; }

.carousel-p { font-size: 14px; margin-left: 20px; padding: 5px 15px; border-left: 3px solid #fff; }

/* **************************************************
	content corner
************************************************** */
.corner.row-fluid { padding-bottom: 20px; }

.corner-dl { margin: 0; }

.corner-dt { margin: 0; height: 2em; line-height: 2.1em; text-indent: 0.5em; background-color: #e0e0e0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; border: 1px solid #c9c9c9; border-bottom: none; }

.corner-dd { margin: 0; padding: 10px; min-height: 12em; font-size: 14px; background-color: #fff; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 1px solid #c9c9c9; }

.corner-img { float: left; margin: 0 10px 0 0; width: 100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; }

/* **************************************************
	content howpoint
************************************************** */
.howpoint-p { margin: 0 20px 30px; }

.howpoint-h1 { position: relative; margin: 0 -5px 5px; height: 70px; font-size: 12px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; min-height: 70px; }

.howpoint-h1.max { background: #E7223D; }

.howpoint-h1.eye { background: #4D4484; }

.howpoint-h1.zero { background: #FF669E; }

.howpoint-h1.eclub { background: #544C2D; }

.howpoint-h1 > span { position: absolute; top: 5px; left: 5px; display: block; overflow: hidden; width: 150px; height: 60px; text-indent: 100%; white-space: nowrap; background-image: url("/image/pc/bg-headline.png"); }

.howpoint-h1.max > span { background-position: -300px -300px; }

.howpoint-h1.eye > span { background-position: -300px -360px; }

.howpoint-h1.zero > span { background-position: -300px -420px; }

.howpoint-h1.eclub > span { background-position: -300px -480px; }

.howpoint-ul { margin: 0; overflow: hidden; border: 1px #fff solid; }

.howpoint-li { font-size: 14px; border-bottom: 1px #fff solid; height: 2.8em; }

.howpoint-li.last { border-bottom: none; }

.howpoint-li > b { float: left; width: 63%; height: 2.8em; line-height: 2.8em; letter-spacing: 0; text-indent: 0.5em; color: #595959; font-weight: normal; border-top: 1px solid #fff; border-bottom: 1px solid #d0d0d0; border-right: 3px solid #d9d9d9; background-color: #e7e7e7; }

.howpoint-li > span { position: relative; float: right; width: 35%; height: 2.8em; line-height: 2.8em; text-align: right; border-top: 1px solid #fff; border-bottom: 1px solid #e0e0e0; }

.howpoint-li > span:after { content: ''; display: inline-block; width: 0.5em; height: 1em; }

/* **************************************************
	content faq
************************************************** */
.faq-dl { margin: 0; font-size: 14px; }

.faq-dt { margin: 10px 0; }

.faq-dd { display: none; }

.faq-dd.active { position: relative; display: block; margin: 0; padding: 10px 15px 20px 50px; min-height: 5em; background-color: #fff; border: 1px solid #d9d9d9; }

.faq-dd > ol { margin: 10px 10px 5px 30px; }

.faq-i { display: inline-block; *display: inline; *zoom: 1; margin-right: 8px; width: 30px; height: 30px; line-height: 31px; text-align: center; color: #fff; font-size: 26px; font-weight: normal; font-style: normal; font-family: 'corbelbold'; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

.faq-dt > i.faq-i { background-color: #66ba89; }

.faq-dd > i.faq-i { position: absolute; top: 10px; left: 10px; background-color: #d97474; }

.faq-a { color: #393939; }

.faq-a:hover { color: #08c; }

/* **************************************************
	実装後追加CSS
************************************************** */
.login-h1>span.login-h1-span{
	display: block;
	padding:13px 0 0 20px;
	font-size:20px;
	color:#d80000;
}
.login-wrap-div{
	margin:10px 20px;
}
.login-wrap-div>hr{
	margin:0 10px;
}
.login-inner-div{
	height:80px;
	background:url('/image/pc/bg-login-index.png') no-repeat 0 0;
}
.login-submit-btn{
	display:block;
	width:170px !important;
	height:30px;
	background: url('/image/pc/bg-login-index.png') no-repeat 0 -160px;
	border:none;
	overflow:hidden;
	text-indent:100%;
	white-space: nowrap;
}
.login-submit-btn:hover{
	background: url('/image/pc/bg-login-index.png') no-repeat -170px -160px;
}
.login-inner-ul{
	margin:0 20px !important;
	font-size:14px;
}
.login-inner-ul:before{
	content:'';
	display:block;
	height:45px;
	margin-bottom:10px;
	background: url('/image/pc/bg-login-index.png') no-repeat 0 -100px;
}

.login-end-wrap{
	height:100px;
	background: url('/image/pc/bg-login-form.png') no-repeat 0 0;
}
.login-yahoo{
	height:80px;
	background: url('/image/pc/bg-login-form.png') no-repeat 0 -200px;
}
.login-yahoo2{
	height:80px;
	background: url('/image/pc/bg-login-form.png') no-repeat 0 -410px;
}
.login-end-ul{
	margin:0 20px;
	padding-bottom:20px;
}
.login-end-li{
	padding-bottom:5px;
	font-size:20px;
	font-weight:bold;
}
.login-end-submit{
	display:block;
	width:220px !important;
	height:40px;
	background: url('/image/pc/bg-login-form.png') no-repeat 0 -100px;
	border:none;
	overflow:hidden;
	text-indent:100%;
	white-space: nowrap;
}
.login-end-submit:hover{
	background: url('/image/pc/bg-login-form.png') no-repeat -220px -100px;
}
.login-next{
	display:block;
	width:220px !important;
	height:40px;
	background: url('/image/pc/bg-login-form.png') no-repeat 0 -300px;
	border:none;
	overflow:hidden;
	text-indent:100%;
	white-space: nowrap;
}
.login-next:hover{
	background: url('/image/pc/bg-login-form.png') no-repeat -220px -300px;
}
.login-end-p{
	padding:10px 0;
}



.no-post{
	/* background-color: #ccc !important; */
	opacity: 0.8;
}