@charset "utf-8";

/* ////////////////////////////////////////////////////////////////////////////
	common.css（共通定義）
//////////////////////////////////////////////////////////////////////////// */


/* ==================================================================================
  ブラウザstyle リセット
================================================================================== */
body {
	background-color: #FFF;
	line-height: 1.5;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Arial, Helvetica, Verdana, sans-serif;
/*	font-size: 81.25%;	*/
	color: #000000;
    -webkit-font-smoothing: antialiased;
}
img {
	border: none;
	line-height: 0;
	vertical-align: bottom;
	text-decoration: none;
	
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
a {
	text-decoration: underline;
	color: #000000;
}
a:hover {
	text-decoration: none;
}

input {
	font-size: 13px !important;
}
input[type="text"][disabled]{
    background-color: #b2b2b2;
	border: 2px solid #b2b2b2;
}
@media screen and (max-width: 640px) {
	body {
		font-size: 100%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}
/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

/* clear */
.clr { clear: both;}

/* scroll top button */
#topcontrol {
	z-index: 10000;
}
.nmp_sponly {
	display: none;
}
@media screen and (max-width: 640px) {
	#topcontrol {
		background: url(/excludes/sp/common/images/img_sclolltop.png) 0 0 no-repeat;
		background-size: 52px 52px;
		display: block;
		width: 52px;
		height: 52px;
		bottom: 20px !important;
	}
	#topcontrol img {
		display: none;
	}
	.nmp_sponly {
		display: block;
	}
}

/* ==================================================================================
  メインコンテンツ配置
================================================================================== */

#MainBody {
	width: 1100px;
	margin: 0 auto;
	padding: 20px 0;
}

/* シングル */
#SB {
	width: 1100px;
}

/* 2カラム メイン */
#LM {
	float: left;
	width: 896px;
}
#RM {
	float: right;
	width: 896px;
}

/* サイドカラム */
#LI {
	float: left;
	width: 180px;
}
#RI {
	float: right;
	width: 180px;
}

/* 3カラム メイン（中央） */
#MB {
	width: 692px;
}
#LM #MB {
	float: right;
}
#RM #MB {
	float: left;
}

@media screen and (max-width: 640px) {
	#MainBody {
		width: auto;
		padding: 15px 0;
	}
	#SB {
		width: auto;
	}
	#LM {
		float: none;
		width: auto;
	}
	#RM {
		float: none;
		width: auto;
	}
	#LI {
		float: none;
		width: auto;
	}
	#RI {
		float: none;
		width: auto;
	}
}


/* ブランクウィンドウ用 */
/*-------------------------------------------------------------------------------- */
/* 通常版 */
#BK {
	width: 692px;
	margin: 0 auto;
	padding: 20px 0;
}

/* ワイド版 */
#BKW {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0;
}

/* プリントエリア */
/*-------------------------------------------------------------------------------- */
#printArea {
	width: 1000px;
	margin: 0 auto;
}

/* ==================================================================================
  ヘッダー
================================================================================== */
#header {
	position: relative;
	z-index: 100;
}

/* カスタマイズ */
/*-------------------------------------------------------------------------------- */
#customize {
    min-height: 28px;
    background-color: #f9f3e9;
    line-height: 1.6;
    font-size: 13px;
}
#customize .inner {
	min-width: 1100px;
	width: 1100px;
	margin: 0 auto;
    padding: 4px 0;
    color: #8c6c43;
}
#customize #fontSizer {
    float: right;
}
#customize #fontSizer dt {
    float: left;
    padding-right: 4px;
    font-weight: bold;
}
#customize #fontSizer dd {
    float: left;
    margin-left: 3px;
    padding: 3px 4px 2px;
    background-color: #FFFFFF;
    border: 1px solid #8c6c43;
    line-height: 1;
    font-weight: bold;
    color: #8c6c43;
    cursor: pointer;

    -webkit-border-radius: 2px;
    border-radius: 2px;

	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#customize #fontSizer dd:hover {
    opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}
#customize #fontSizer dd.current {
    background-color: #8c6c43;
    color: #FFFFFF;
}

/* よみあげくん */
#customize #yomiage {
    float: right;
    margin-right: 20px;
}
#customize #yomiage a {
    padding-left: 14px;
    background: url(../images/common/blt_add_rarr_bw.png) no-repeat left center;
    text-decoration: none;
    font-weight: bold;
    color: #8c6c43;
    
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#customize #yomiage a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

@media screen and (max-width: 640px) {
	#customize {
		display: none;
	}
	#accountGuest {
		display: none;
	}
	#accountLogin {
		display: none;
	}
	#entryRoute {
		display: none;
	}
	#accountFaq {
		display: none;
	}
	#customize .inner {
		min-width: 0;
		width: auto;
	}
}

/* ヘッダートップ */
/*-------------------------------------------------------------------------------- */
#headerTop {
	min-width: 1100px;
	width: 1100px;
	height: 54px;
	margin: 0 auto;
    padding-top: 8px;
    font-size: 13px;
}

/* ロゴ */
#headerTop h1 {
    float: left;
    width: 296px;
    padding: 10px 20px 0 0;
    vertical-align: middle;

}
#headerTop h1 a {
	text-decoration: none;
}
#headerTop h1 a img {
    line-height: 1;
}

/* アカウントステータス */
#headerTop div {
    float: left;
    height: 36px;
    padding: 18px 0 0 20px;
    text-align: left;
    vertical-align: middle;
    color: #333333;
}
#headerTop div a {
    text-decoration: none;
	
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#headerTop div a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

/* アカウントステータス - ゲスト*/
#headerTop #accountGuest {}
#headerTop #accountGuest p {
    font-weight: bold;
}
/* アカウントステータス - ユーザー名*/
#headerTop #accountUser {}
#headerTop #accountUser p {
    font-weight: bold;
}
#headerTop #accountUser p span {
    display: inline-block;
    max-width: 12em;
    margin-left: 0.5em;
    vertical-align: top;
    line-height: 1.4;
}
#headerTop #accountUser p span:after {
    content: "さん";
    display: inline-block;
    margin-left: 0.5em;
}

/* アカウントステータス - マイページメニュー*/
#headerTop #accountMyPage {
    padding-left: 41px;
    background: url(../images/header/nav_sep.gif) no-repeat 20px center;
}
#headerTop #accountMyPage > *:first-child {
    margin-left: 0;
}
#headerTop #accountMyPage a {
    margin-left: 20px;
}
#headerTop #accountMyPage span {
    margin-left: 4px;
}
#headerTop #accountMyPage span img {
    line-height: 19px;
    vertical-align: middle;
}
#headerTop #accountMyPage .nmp_coupon {
    display: inline-block;
    height: auto;
    margin: 0 0px 0 20px;
    padding: 7px 12px;
    line-height: 1;
    background-color: #ff7600;
    font-size: 12px;
    color: #FFFFFF;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}

/* アカウントステータス - ログイン*/
#headerTop #accountLogin,
#headerTop #accountLogout {
    /*width: 1px;*/
}

/* アカウントステータス - 入会案内*/
#headerTop #entryRoute {}
#headerTop #entryRoute a {
    display: block;
    padding: 4px 8px 3px;
    background-color: #ff7600;
    line-height: 1;
    font-weight: bold;
    color: #FFFFFF;
    
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
#headerTop #entryRoute a:hover {
    text-decoration: none;
}

/* アカウントステータス - よくある質問*/
#headerTop #accountFaq {
    float: right;
    text-align: right;
}
#headerTop #accountFaq a {
    display: inline-block;
    padding: 0 0 1px 14px;
    background:  url(../images/common/blt_add_rarr_bk.png) no-repeat left center;
    font-weight: bold;
    font-size: 12px;
    color: #333333;
}

@media screen and (max-width: 640px) {
	#headerTop {
		min-width: 0;
		width: auto;
		height: auto;
	}
	#headerTop h1 {
		float: none;
		padding: 10px 10px 0;
		max-width: 150px;
		width: auto;
	}
	#headerTop h1 img {
		max-width: 100%;
		height: auto;
	}
}

/* 重要なお知らせ */
/*-------------------------------------------------------------------------------- */
table#headerInfo {
	width: 1100px;
    margin: 20px auto;
	font-size: 13px;
}
table#headerInfo th {
	width: 108px;
	padding: 4px 8px 4px 24px;
	background-image: url(../images/common/blt_att_wh.png);
	background-repeat: no-repeat;
	background-position: 5px center;
	background-color: #e6211a;
	vertical-align: middle;
	border: 1px solid #e6211a;
	font-weight: bold;
	color: #FFFFFF;
}
table#headerInfo td {
	width: 940px;
	padding: 4px 8px;
	background-color: #FFFFFF;
	border: 1px solid #e6211a;
	vertical-align: middle;
	font-weight: bold;
}
table#headerInfo td ul li {
	-ms-word-break: break-all;
	word-break: break-all;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
table#headerInfo td ul li a {
	text-decoration: none;
	text-decoration: underline;
	color: #e6211a;
}
table#headerInfo td ul li a:hover {
	text-decoration: none;
}

/* アナウンス */
p.headerAnnounce {
	padding: 4px 8px 4px 24px;
	background-image: url(../images/common/blt_att_gy.png);
	background-repeat: no-repeat;
	background-position: 5px center;
	border: 1px solid #4d4d4d;
	font-weight: bold;
	font-size: 108%;
}




/* ==================================================================================
  フッター配置
================================================================================== */
/* フッター */
#footer {
	min-width: 1100px;
	width: 100%;
}


/* フッターナビ */
#fNav {
	padding: 30px 0 0;
    background-color: #f9f3e9;
}

/* フッターナビ：ウイークリー */
#fNav .serviceList {
    position: relative;
    z-index: 10;
	width: 1100px;
	margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px dotted #a78e6d;
}
#fNav .serviceList .serviceCategory {
    float: left;
    width: 425px;
    margin-left: 25px;
}
#fNav .serviceList .serviceCategory:first-child {
    width: 200px;
    margin-left: 0;
}
#fNav .serviceList .serviceCategory h3 {
    border-bottom: 1px solid #a78e6d;
    font-weight: bold;
    color: #8c6c43;
}
#fNav .serviceList .serviceCategory .column {
    float: left;
    width: 200px;
    margin-left: 25px;
}
#fNav .serviceList .serviceCategory h3 + .column {
    margin-left: 0;
}
#fNav .serviceList .serviceCategory .column h4 {
    margin-top: 20px;
    font-weight: bold;
    font-size: 92%;
    color: #8c6c43;
}
#fNav .serviceList .serviceCategory .column ul li {
    margin-top: 5px;

}
#fNav .serviceList .serviceCategory .column ul li a {
    padding-left: 14px;
    background:  url(../images/common/blt_add_rarr_bk.png) no-repeat left 0.1em;
    text-decoration: none;
    font-size: 92%;
    color: #333333;
}
#fNav .serviceList .serviceCategory .column ul li a:hover {
    text-decoration: underline;
}

/* フッターナビ:補足 */
#fNav .fb {
	clear: both;
	width: 1100px;
	margin: 8px auto 0;
}
#fNav .fb iframe {
	margin-left: -10px;
}


/* フッター：お酒の取り扱い */
#alcohol {
    position: relative;
	margin: 0 auto;
	padding: 30px 0 120px;
    min-height: 60px;
    background: url(../images/footer/fnav_bg_grass.png) repeat-x center bottom #f9f3e9;
}
#alcohol:before {
	    content: "";
	    display: block;
	    position: absolute;
	    right: 50%;
	    bottom: 10px;
	    z-index: 0;
	    width: 200px;
	    height: 120px;
	    margin-right: -515px;
	    background: url(../images/footer/fnav_bg_hopetan.png) no-repeat center center;
}
#alcohol .inr {
	position: relative;
	z-index: 10;
	width: 1100px;
	margin: 0 auto;
}
#alcohol .inr h3 {
    float: left;
	font-weight: bold;
    color: #8c6c43;
}
#alcohol .inr p {
    float: left;
    margin-left: 20px;
    line-height: 1.6;
	font-size: 92%;
    color: #8c6c43;
}
#alcohol .inr p a {
    padding-left: 14px;
    background: url(../images/common/blt_add_rarr_bk.png) no-repeat left center;
    text-decoration: none;
}
#alcohol .inr p a:hover {
    text-decoration: underline;
}


/* ユーティリティ関連なナビ */
#utilNav {
	padding: 30px 0 10px;
}
#utilNav .inr {
	width: 1100px;
	margin: 0 auto;
}
#utilNav h2 {
	float: left;
}
#utilNav .utilListBox {
	float: right;
}
#utilNav .utilListBox ul {
	float: left;
	margin-left: 20px;
}
#utilNav .utilListBox ul li a {
	padding-left: 14px;
	background: url(../images/common/blt_add_rarr_bk.png) no-repeat left 5px;
	line-height: 1.8;
	text-decoration: none !important;
	font-size: 12px;
	display: inline-block;
	color: #333333;
}
#utilNav .utilListBox ul li a:hover {
	text-decoration: underline !important;
}

/* シグネチャー */
#sig {
	padding: 20px 0;
	font-size: 12px;
}
#sig .inr {
	width: 1100px;
	margin: 0 auto;
}
#sig address {
	float: left;
}
#sig address strong {
	margin-right: 1em;
	font-weight: bold;
}
#sig #copyright {
	float: right;
}
#sig #copyright a {
	text-decoration: none;
}

/* ページの先頭へ */
.returnTop {
	margin: 0 10px -38px 0;
	text-align: right;
}

@media screen and (max-width: 640px) {
	#footer {
		min-width: 0;
	}
	#alcohol .inr {
		padding: 25px 10px 20px;
		width: auto;
	}
	#utilNav {
		padding: 15px 10px;
	}
	#utilNav h2 {
		padding-top: 25px;
		text-align: center;
	}
	#utilNav .inr {
		display: flex;
		flex-direction: column;
		width: auto;
	}
	#utilNav .inr .utilListBox {
		float: none;
		order: -1;
	}
	#utilNav .utilListBox ul {
		display: flex;
		flex-wrap; wrap;
		float: none;
		margin: 0;
	}
	#utilNav .utilListBox ul li {
		width: 50%;
	}
	#utilNav .utilListBox ul li a {
		font-size: 11px;
	}
	#sig {
		font-size: 14px;
		text-align: center;
		padding: 0;
		background: url(/excludes/sp/common/images/bg_footer_bottom.png) center bottom repeat-x;
		background-size: 320px auto;
	}
	#sig .inr {
		width: auto;
	}
	#sig address {
		display: block;
		float: none;
		padding-bottom: 20px;
	}
	#sig address strong {
		display: block;
		margin: 0 auto;
	}
	#copyright {
		height: 135px;
		background: url(/excludes/sp/common/images/bg_footer_hopetan.png) center bottom no-repeat;
		background-size: 320px auto;
	}
	#alcohol {
		padding: 0;
		background-image: none;
		font-size: 14px;
		line-height: 1.6;
	}
	#alcohol:before {
		display: none;
	}
	#alcohol .inr p {
		font-size: 100%;
		margin: 0;
	}
	#alcohol h3 {
		font-size: 13px;
		font-weight: bold;
	}
}

/* 共通：ログイン */
/*-------------------------------------------------------------------------------- */
#loginItems {}

#loginItems p {
	display: block;
	min-height: 56px;
	padding-left: 58px;
	background-image: url(../images/common/mark_hopetan.png);
	background-repeat: no-repeat;
	background-position: left center;
	font-weight: bold;
}
#loginItems .btnWB {
	margin-top: 8px;
}

#loginItems ul {}
#loginItems ul li {
	margin-top: 6px;
	font-size: 92%;
}


#loginItems:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}


/* 規約表示 */
/*-------------------------------------------------------------------------------- */
#termArea {
	overflow-y: auto;
	height: 330px;
	padding: 9px 29px 9px 19px;
	border: 1px solid #b2b2b2;
}
#termArea h2,
#termArea h3 {
	font-weight: bold;
	font-size: 116%;
}
#termArea dl dt {
	font-weight: bold;
	font-size: 108%;
}
#termArea dl dd {
	font-size: 92%;
}
#termArea dl dd ul {
	margin: 0.5em 0 0 0;
}
#termArea dl dd li {
	margin-top: 0.25em;
}
.nmp_termAgree {
	text-align: center;
	margin-bottom: 50px;
}
@media screen and (min-width: 641px) {
	#termArea dl {
		padding-top: 1em;
	}
	#termArea dl dt {
		margin-top: 1.5em;
	}
	#termArea dl dd {
		margin-top: 0.5em;
	}
	#termArea dl dd ol {
		list-style: decimal;
		margin: 0.5em 0 0 20px;
	}
}
@media screen and (max-width: 640px) {
	#termArea {
		padding: 10px;
	}
	#termArea dl dt {
		margin: 10px 0 5px;
	}
	#termArea dl dd ol {
		list-style: none;
		margin: 0;
	}
}


/* ==================================================================================
  エラーメッセージ
================================================================================== */
.errorMessage {
	padding: 60px 28px;
	border: 2px solid #b2b2b2;
	text-align: center;
}
.errorMessage .componentBlock {
	margin: 0;
}

.errorMessage p {
	margin-top: 1em;
}
.errorMessage p:first-child {
	margin-top: 0;
}
.errorMessage p em {
	color: #e51e18;
}
.errorMessage p strong {
	font-weight: bold;
	font-size: 132%;
}
.errorMessage .nmp_large {
	font-size: 116%;
}
.errorMessage ul {
	margin-top: 2em;
	text-align: center;
}
.errorMessage ul li {
	display: inline-block;
	margin-left: 60px;
}
.errorMessage ul li:first-child {
	margin-left: 0;
}

/* 左寄せ */
.errorMessage.left-align {
    text-align: left;
}
.errorMessage.left-align ul {
	text-align: left;
}
.errorMessage.left-align ul li {
	display: block;
    margin: 10px 0 0 0;
}
.errorMessage.left-align ul li:first-child {
	margin: 0;
}


/* ==================================================================================
  ローディング画像
================================================================================== */
#loading{
	position: fixed;
	top:0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: rgba(255,255,255,0.8);
}
#loading #loadingBox {
	position: fixed;
	top: 50%;
	left: 50%;
}
#loading #loadingBox > div {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	width: 5px;
	height: 15px;
	border-radius: 2px;
	margin: 2px;
	background: #666;
	box-sizing: border-box;
}
#loading div.load01{
	top: 20px;
	left: 0;
	-webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
}
#loading div.load02{
	top: 13.64px;
	left: 13.64px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
}
#loading div.load03{
	top: 0;
	left: 20px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
}
#loading div.load04{
	top: -13.64px;
	left: 13.64px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
}
#loading div.load05{
	top: -20px;
	left: 0;
	-webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
}
#loading div.load06{
	top: -13.64px;
	left: -13.64px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
}
#loading div.load07{
	top: 0;
	left: -20px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
}
#loading div.load08{
	top: 13.64px;
	left: -13.64px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
	animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
}
@keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}

/* 文字列関連 */
.nmp_bold {
	font-weight: bold;
}
.nmp_black {
	color: #000000;
}
.nmp_red {
	color: #ff0000;
}



/* ==================================================================================
  マイページ登録導線
================================================================================== */
.myPageContents {
	margin-bottom: 30px;
	padding: 16px;
	background-color: #ffefdf;
}
.myPageContents .pageTitle h2 {
	margin-top: -16px;
	padding: 16px 0 10px;
	font-weight: bold;
	line-height: 1.2;
	font-size: 197%;
}
.myPageContents .myPageBody {
	min-height: 240px;
	padding: 16px 0;
	background-color: #FFFFFF;
}
.myPageContents .myPageBody .lead {
	padding: 1px 20px;
}
.myPageContents .myPageBody .lead p {
	padding-top: 6px;
}
.myPageContents .myPageBody .lead p:first-child{
	padding-top: 0;
}
.myPageContents .ancList {
	padding-top: 6px;
}
.myPageContents h2 {
	font-weight: bold;
	line-height: 1.2;
	font-size: 150%;
}
.myPageContents h3 {
	font-weight: bold;
	line-height: 1.2;
	font-size: 130%;
}
.nmp_supporticon {
	background: url(/excludes/images/common/icon_screensharing.png) 30px 0 no-repeat;
	background-size: 30px;
	line-height: 30px;
	padding: 0 0 15px 65px;
}
.myPageBody .att {
	background-color: #efbebe;
	margin: 8px 0;
	padding: 5px 2px 5px 20px;
	color: #e61f19;
	font-size: 14px;
	font-weight: bold;
	word-break: break-all;
	word-wrap: break-word;
}
.registrationEditor {
	border-top: 1px dotted #b2b2b2;
}
.registrationEditor.nmp_noline {
	border-top: none;
}
.registrationEditor table {
	margin-top: 8px;
	width: 100%;
}
.registrationEditor table td.itmReq {
	vertical-align: middle;
	color: #e61f19;
}
.btnArea ul {
	text-align: center;
}
.btnArea ul li {
	margin: 0;
	display: inline-block;
	vertical-align: top;
}
.btn a {
	position: relative;
	display: block;
	padding: 3px 6px 3px 6px;
	background-color: #E99C15;
	text-align: center;
	text-decoration: none;
	line-height: 18px;
	font-weight: bold;
	font-size: 14px;
	color: #FFFFFF;
	border-radius: 3px;
	transition: all 0.4s ease;
}
.operationFlow {
	display: flex;
	padding: 20px 0;
}
.operationFlow > li {
	position: relative;
	text-align: center;
	width: calc(100% / 3);
}
.operationFlow > li:before {
	display: block;
	position: absolute;
	content: "";
	background: #d0d0d0;
	height: 1px;
	left: 0;
	right: 0;
	top: 2em;
}
.operationFlow > li:first-child:before {
	left: 50%;
}
.operationFlow > li:last-child:before {
	right: 50%;
}
.operationFlow strong {
	display: block;
	background: #ffffff;
	border: 1px solid #d0d0d0;
	border-radius: 50%;
	text-align: center;
	width: 3em;
	height: 3em;
	line-height: 3em;
	font-weight: bold;
	margin: 5px auto;
	position: relative;
}
.operationFlow .current strong {
	background: #acacac;
	color: #ffffff;
}
.nmp_email {
	padding-top: 1em;
}
.nmp_must {
	background-color: #FFE2C1;
	border: 2px solid #FFCC8E;
	color: #FF2636;
	display: inline-block;
	font-weight: bold;
	margin: 15px 0;
	padding: 3px 10px;
	border-radius: 5px;
	font-size: 90%;

}
.nmp_select {
	background-color: #8989FF;
	border: 2px solid #7070FF;
	color: #FFFFFF;
	display: inline-block;
	font-weight: bold;
	margin: 15px 0;
	padding: 3px 10px;
	border-radius: 5px;
	font-size: 90%;
}
.nmp_selectArea {
	padding-bottom: 30px;
}
.nmp_selectArea input {
	margin: -2px 5px 0 0;
	vertical-align: middle;
	width: 16px;
	height: 16px;
}
.nmp_selectArea label {
	display: inline;
	font-weight: bold;
	line-height: 2;
}
.nmp_selectArea label:after {
	content: "\a";
	white-space: pre;
}
.nmo_note {
	font-size: 85%;
}
.nmp_category {
	font-weight: bold;
	margin: 1em 0;
}
.nmp_category:before {
	content: "●";
}
.nmp_allCheck {
	padding: 1em 0 0 1em;
}
.nmp_checkbox {
	padding: 1em 0 0 2em;
}
.nmp_mt2em {
	margin-top: 2em;
}
.nmp_mb1em {
	margin-bottom: 1em;
}
.nmp_mb2em {
	margin-bottom: 2em;
}

@media screen and (min-width: 641px) {
	.myPageBody .att {
		text-align: center;
	}
	.myPageBody .att span:before {
		content: url(/excludes/sp/common/images/icon_error.png);
		display: inline-block;
		transform: scale(0.5);
		vertical-align: middle;
	}
	.myPageContents .myPageBody .myPageBlock {
		padding: 15px 20px;
	}
	.myPageContents .myPageBody .myPageBlock h2 {
		margin-bottom: 10px;
	}
	.registrationEditor table th {
		width: 180px;
	}
	.registrationEditor table td.itmReq {
		width: 40px;
	}
	.registrationEditor table td.itmForm input#memberCode {
		width: 135px;
	}
	.registrationEditor table td.itmForm input#tel01,
	.registrationEditor table td.itmForm input#tel02,
	.registrationEditor table td.itmForm input#tel03 {
		width: 60px;
	}
	.registrationEditor table td.itmForm input#mail01,
	.registrationEditor table td.itmForm input#mail02 {
		width: 360px;
	}
	.registrationTerm {
		margin-top: 20px;
	}
	.registrationTerm #termArea {
		width: 570px;
	}
	.myPageContents .btnArea ul li,
	#BK .btnArea ul li {
		min-width: 180px;
		width: auto !important;
	}
	.registrationEditor table th {
		padding: 8px 0;
		vertical-align: top;
	}
	.registrationEditor table td {
		padding: 8px 0;
	}
	table.editorTable td.itmForm span {
		margin-left: 16px;
	}
	.registrationTerm #termArea {
		margin: 30px auto;
	}
	.registrationTerm .btnArea {
		margin: 60px 0;
	}
	table.passwordNow {
		width: 100%;
	}
	table.passwordNow th {
		width: 160px;
		padding: 8px 0;
		vertical-align: top;
	}
	table.passwordNow td {
		padding: 8px 0;
	}
	.freeHtmlEdit {
		clear: both;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 640px) {
	.myPageContents {
		margin-bottom: 0;
	}
	.myPageBody .att {
		background: url(/excludes/sp/common/images/icon_error.png) 5px 7px no-repeat #efbebe;
		background-size: 13px;
	}
	.nmp_supporticon {
		background-size: 25px;
		background-position: 0 2px;
		padding: 0 0 10px 30px;
	}
	.myPageContents {
		padding: 0 10px;
	}
	.myPageContents h2 {
/*		font-size: 15px;	*/
		margin-bottom: 15px;
	}
	.myPageContents h3 {
		font-size: 14px;
	}
	.myPageContents .myPageBody {
		padding: 1px 0 0;
	}
	.myPageContents .pageTitle {
		background-color: #FFFFFF;
		padding: 5px 0 1px;
	}
	.myPageContents .pageTitle h2 {
		margin-top: 0;
		padding: 0;
		font-size: 18px;
	}
	.myPageBody .att {
		display: block;
		margin: 10px 10px 10px;
		white-space: normal;
	}
	.operationFlow {
		margin: 0 0 15px;
		padding: 0;
	}
	.myPageContents .myPageBody .myPageBlock {
		padding: 10px 0 5px;
	}
	table.editorTable {
		display: block;
	}
	table.editorTable tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	table.editorTable th,
	table.editorTable td {
		display: block;
		padding-bottom: 5px;
	}
	table.editorTable .itmName br {
		display: none;
	}
	table.editorTable td.itmForm {
		padding-bottom: 10px;
		width: 100%;
	}
	table.editorTable input {
		line-height: 2;
	}
	.registrationEditor table td.itmForm input#memberCode {
		box-sizing: border-box;
		margin-bottom: 5px;
		width: 100%;
	}
	.registrationEditor table td.itmForm input#tel01,
	.registrationEditor table td.itmForm input#tel02,
	.registrationEditor table td.itmForm input#tel03 {
		box-sizing: border-box;
		margin-bottom: 5px;
		width: calc((100% - 3em) / 3);
	}
	.registrationEditor table td.itmForm input#mail01,
	.registrationEditor table td.itmForm input#mail02 {
		box-sizing: border-box;
		margin-bottom: 5px;
		width: 100%;
	}
	.registrationEditor table td.itmForm input#newPass,
	.registrationEditor table td.itmForm input#renewPass {
		box-sizing: border-box;
		margin-bottom: 5px;
		width: 100%;
	}
	table.passwordNow {
		display: block;
		font-size: 12px;
	}
	table.passwordNow tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	table.passwordNow th,
	table.passwordNow td {
		display: block;
		padding-bottom: 5px;
	}
	.registrationTerm #termArea {
		margin: 10px auto;
	}
	.registrationTerm .btnArea {
		margin: 10px 0;
	}
	.btnArea ul li {
		display: block;
	}
	.btn a {
		border-radius: 5px;
		font-size: 16px;
		padding: 10px 0;
	}
	.passwordNow {
		border-top: 1px dotted #666;
		margin: 10px 0;
		padding: 10px 0;
	}
	.passwordNow tbody {
		display: block;
	}
	.passwordNow .itmForm {
		width: 100%;
	}
	.passwordNow .itmForm input {
		box-sizing: border-box;
		width: 100%;
	}
	.nmp_must {
		margin: 35px 0 0;
	}
	.nmp_select {
		margin: 35px 0 1em;
	}
}



/* ==================================================================================
  ウェルカムページ
================================================================================== */




@media screen and (min-width: 641px) {
	#welcomeArea {
		width: 1100px;
		margin: 0 auto;
	}
	#leadArea {
		position: relative;
		width: 690px;
		margin: 0 auto;
	}
	#leadArea:after {
		content: "";
		position: absolute;
		right: -30px;
		bottom: 0;
		display: block;
		width: 64px;
		height: 82px;
		background: url(../images/welcome_img02.png) no-repeat center center;
	}
	#leadArea h2 {
		padding: 3px 0 1px;
		border-top: 1px dotted #E99C15;
		border-bottom: 1px dotted #E99C15;
		text-align: center;
		font-weight: bold;
		font-size: 200%;
		color: #DA7A05;
	}
	#leadArea p {
		margin-top: 10px;
		text-align: center;
	}
	#leadArea .btnArea {
		margin: 32px 0;
		position: relative;
	}
	#leadArea .btnArea .btn {
		min-width: 20%;
	}
	#leadArea .btn a {
		width: 12em;
	}
	#leadArea .btn a:after {
		position: absolute;
		right: 6px;
		top: 50%;
		content: url(../images/common/blt_rarr_wh.png);
		display: block;
		margin-top: -6px;
		vertical-align: middle;
	}
}
@media screen and (max-width: 640px) {
	#welcomeArea {
		padding: 23px 8px 0;
	}
	#welcomeArea h2 {
		padding: 5px 0 3px;
		color: #da7a05;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		line-height: 1;
		border: 1px dotted #da7a05;
		border-left: none;
		border-right: none;
		background-color: #fff;
		margin-bottom: 10px;
	}
	#welcomeArea .btnArea {
		margin: 20px 0;
	}
}