@charset "UTF-8";
/*------------------------------------------------------------------------------
 * 注意：CSSセレクタの優先順位が同一の時は後方に記述されたCSSが優先されます。
 *----------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
 * HTMLタグ
 *----------------------------------------------------------------------------*/
body {
	font-family : Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ",
		Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック",
		sans-serif;
	font-size   : 15px;
	color       : #5A5A5A;
	background-color: #FFFFFF;
}
h1 {
	margin      : 0;
	padding     : 10px 0px;
	text-align  : center;
	border-bottom : 1px solid #EBECED;
}
h3 {
	margin      : 0 0 20px 0;
	padding     : 0 0 0 10px;
	font-size   : 24px;
	border-left : 4px solid crimson;
}
h4 {
	margin      : 0 0 5px 0;
	padding     : 0 0 0 5px;
	font-size   : 16px;
}
a {
	margin      : 0px 2px;
	color       : #157191;
	text-decoration : underline;
}
.dummylink {   /* aタグと同じデザインにする */
	margin      : 0px 2px;
	color       : #157191;
	text-decoration : underline;
}
a:hover {
	font-weight : bold;
}
a[target=_blank] {
	background  : url(/images/external_link-232c07153c4ae0d704608ad0f96d2a76.png) right / 16px no-repeat;
	padding     : 0 16px 0 0;
}
.not-external-link {
	background-image: none !important;
}
input[type=radio] {
	width           : 18px;
	height          : 18px;
	vertical-align  : middle;
	margin-bottom   : 8px;
}
/*------------------------------------------------------------------------------
 * 共通Class属性
 *----------------------------------------------------------------------------*/
.main-box {
	margin      : auto;
	padding     : 20px;
	max-width   : 768px;
	min-height  : 320px;
}
.mb10 {
	margin-bottom   : 10px;
}
.mb20 {
	margin-bottom   : 20px;
}
.mb30 {
	margin-bottom   : 30px;
}
.mb50 {
	margin-bottom   : 50px;
}
.red {
	color       : crimson;
}
.brue {
	color       : #28549D;
}
.green {
	color       : #55C072
}
.form-control {
	display     : inline;
	height      : 50px !important;  /* !important → bootstrapの設定を上書きし、selectボックスにも適用 */
	font-size   : 18px;
}
.display-none {
	display     : none;
}
/*------------------------------------------------------------------------------
 * 共通 - Remodalプラグイン カスタマイズ
 *----------------------------------------------------------------------------*/
.remodal-close {
	left        : auto;
	right       : 15px;
	top         : 15px;
}
.remodal-close:before {
	font-size   : 50px;
}
/*------------------------------------------------------------------------------
 * 共通 display-table - divに付与することで子要素含めてtableレイアウトにする
 *----------------------------------------------------------------------------*/
.display-table {
	display     : table;
	margin      : auto;
}
.display-table > div,
.display-table > span {
	display     : table-cell;
	vertical-align  : middle;
}
/*------------------------------------------------------------------------------
 * 共通 table-detail - tableに付与してフレキシブルレイアウトに対応させる
 *----------------------------------------------------------------------------*/
.table-detail {
	width       : 100%;
}
.table-detail th {
	background-color: #EFEFEF;
	font-weight : normal;
}
.table-detail th,
.table-detail td {
	padding     : 12px 20px;
}
@media (max-width:480px) {
	.table-detail th,
	.table-detail td {
		width   : 100%;
		display : block !important;  /* !important → bootstrapの設定を上書きし、1行表示させる */
	}
}
@media (max-width:580px) {
	.flexible-table-580 th,
	.flexible-table-580 td {
		width   : 100%;
		display : block !important;  /* !important → bootstrapの設定を上書きし、1行表示させる */
	}
}
/*------------------------------------------------------------------------------
 * 共通 - 注意メッセージ
 *----------------------------------------------------------------------------*/
.attention-msg {
	margin      : 0 0 20px 0;
	padding     : 20px;
	border      : 3px solid #FF0000;
}
/*------------------------------------------------------------------------------
 * 共通 - 確認メッセージ
 *----------------------------------------------------------------------------*/
.confirm-msg {
	margin      : 0 0 20px 0;
	padding     : 20px;
	border      : 1px solid #000000;
	border-radius   : 10px;
}
/*------------------------------------------------------------------------------
 * 共通 - 必須/任意アイコン
 *----------------------------------------------------------------------------*/
.required {
	padding     : 2px 8px;
	margin      : 0 5px 0 0;
	color       : #FFFFFF;
	font-size   : 0.8em;
	background-color : #E62320;
	border-radius    : 3px;
}
.optional {
	padding     : 2px 8px;
	margin      : 0 5px 0 0;
	color       : #FFFFFF;
	font-size   : 0.8em;
	background-color : #595757;
	border-radius    : 3px;
}
/*------------------------------------------------------------------------------
 * 共通 - フッタボタン
 *----------------------------------------------------------------------------*/
 /* ボタンのエリア定義 */
.button-next {
	position    : fixed;
	left        : 0px;
	bottom      : 0px;
	width       : 100%;
	height      : 100px;
	text-align  : center;
	z-index     : 999;
	background-color: rgba(0, 0, 0, 0.3);
}
.button-next-margin {
	margin-top  : 120px;
}
.button-back {
	margin      : 40px auto;
	width       : 180px;
	text-align  : center;
}
.button-cancel {
	margin      : 20px auto;
	width       : 180px;
	text-align  : center;
}
/* ボタンのデザイン定義 */
.btn-footer {
	height      : 60px;
	line-height : 1em;
	font-size   : 22px;
	font-weight : 700;
	cursor      : pointer;
	border      : none;
	border-radius   : 35px;
}
.btn-footer:disabled {
	opacity     : 0.5;
}
.btn-next {
	color       : #FFFFFF;
	background-color: #25BA72;
	width       : 80%;
	max-width   : calc(768px * 0.8);
	margin      : 20px 0 0 0;
}
.btn-paytype {
	color       : #FFFFFF;
	background-color: #25BA72;
	width       : 100%;
	max-width   : calc(768px * 0.8);
	margin      : 20px 0 0 0;
}
.btn-back {
	color       : #808080;
	background-color: #EFEFEF;
	width       : 100%;
}
.btn-cancel {
	color       : #FFFFFF;
	background-color: #E62320; /* 赤 */
	width       : 100%;
}
.btn-cancel:hover {
	background-color: #CC1F1C; /* 濃い赤 */
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - お知らせ表示
 *----------------------------------------------------------------------------*/
.notice-area {
	margin      : 0 0 20px 0;
	padding     : 6px 8px;
	position    : relative;
	background-color: #EFEFEF;
}
.notice-area ul {
	padding     : 0 5px;
	list-style-type : none;
}
.notice-title {
	color       : #E62320;
	font-weight : bold;
	font-size   : 17px;
	margin      : 0 0 10px 0;
}
.notice-hidden {
	height      : 4.2em;
	overflow-y  : hidden;
}
.notice-readmore {
	position    : absolute;
	right       : 5px;
	bottom      : 1px;
	z-index     : 999;
	padding     : 2px 2px 2px 10px;
	background-color: #EFEFEF;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 心当たりのない方へ
 *----------------------------------------------------------------------------*/
.unrelated {
	background-color: #FDFFB4;
}
.unrelated-title {
	padding     : 5px;
	text-align  : center;
}
.unrelated-message {
	padding     : 5px 10px;
	display     : none;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 案内メッセージ
 *----------------------------------------------------------------------------*/
.auth-guide {
	margin      : 0 0 20px 0;
	padding     : 0;
	width       : 100%;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 利用規約ボックス
 *----------------------------------------------------------------------------*/
.terms {
	padding     : 50px 20px;
	text-align  : left;
}
.terms ul {
	list-style-type : disc;
	margin      : 0 0 15px 0;
	padding     : 0 0 0 22.5px;
}
.terms ol {
	list-style-type : decimal;
	margin      : 0;
	padding     : 0 10px 0 20px;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - 同意ボタン
 *----------------------------------------------------------------------------*/
.agree-box {
	margin      : 30px auto 40px auto;
	width       : 90%;
	text-align  : center;
}
.agree-box label {
	margin      : 0;
	padding-left: 10px;
}
.btn-agree {
	margin-top  : 30px;
	width       : 100%;
	max-width   : 420px;
	height      : 73px;
	font-size   : 28px;
	font-weight : 500;
	border      : none;
	border-radius   : 35px;
}
.btn-agree {
	box-shadow  : 2px 4px 4px #8A9BA6;
	color       : #FFFFFF;
	background-color: #E62320; /* 赤 */
}
.btn-agree:hover {
	box-shadow  : 2px 4px 4px #8A9BA6;
	color       : #FFFFFF;
	background-color: #CC1F1C; /* 濃い赤 */
}
.btn-agree:disabled {
	opacity     : 0.2;
}
/*------------------------------------------------------------------------------
 * 1.認証画面 - SSL証明書導入文言メッセージ
 *----------------------------------------------------------------------------*/
.ssl-msg {
	margin      : 0 0 30px 0;
	font-size   : 13px;
}
/*------------------------------------------------------------------------------
 * 2.内容確認画面 - 内訳ラベル
 *----------------------------------------------------------------------------*/
.product-label {
	margin      : 20px 0 0 0;
	padding     : 1em;
	background  : #808080;
	color       : #FFFFFF;
	font-weight : bold;
	cursor      : pointer;
}
.product-label-mark-plus {
	display     : block;
	float       : right;
	text-align  : right;
}
.product-label-mark-cross {
	display     : block;
	float       : right;
	text-align  : right;
	font-size   : 110%;
}
/*------------------------------------------------------------------------------
 * 2.内容確認画面 - 内訳
 *----------------------------------------------------------------------------*/
.product-contents {
	display     : none;
}
.product-contents p {
	margin      : 20px 5px 0px 5px;
}
.product-contents div {
	margin      : 20px 0 0 0;
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 4.各決済選択画面 - 支払方法
 *----------------------------------------------------------------------------*/
.pay-type {
	margin      : 0 0 20px 0;
	padding     : 0;
	border-top  : 1px solid #E6E6E6;
}
.pay-type > div {
	padding     : 20px 15px;
	border-bottom   : 1px solid #E6E6E6;
}
.pay-type > li {
	padding     : 20px 15px;
	list-style  : none;
	border-bottom   : 1px solid #E6E6E6;
}
.pay-type label {
	display     : block;
	margin      : 0;
	font-weight : normal;
}
.pay-type-name {
	display     : block;
	float       : left;
	font-size   : 18px;
}
.pay-type-image {
	display     : block;
	text-align  : right;
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 4.各決済選択画面 - 支払方法のロゴ
 *----------------------------------------------------------------------------*/
.logo_credit {
	width       : 185px;
	height      : 25px;
}
.logo_linepay {
	width       : 85px;
	height      : 25px;
}
.logo_paysle {
	width       : 83px;
	height      : 30px;
}
.logo_paypay {
	width       : 97px;
	height      : 25px;
}
.logo_merpay {
	width       : 68px;
	height      : 25px;
}
.logo_docomo {
	width       : 84px;
	height      : 25px;
}
.logo_aupayapp {
	width       : 96px;
	height      : 25px;
}
@media (max-width:480px) {
	.logo_credit {
		width   : 50%;
		height  : 50%;
	}
}
@media (max-width:365px) {
	.logo_paysle {
		width   : 30%;
		height  : 30%;
	}
}
/*------------------------------------------------------------------------------
 * 3.支払方法選択画面 - 決済アプリの案内
 *----------------------------------------------------------------------------*/
.tooltips {
	margin-top  : 10px;
	text-align  : left;
}
.payment-introduction {
	display     : none;
	margin      : 20px 0 0 0;
	padding     : 20px;
	border      : 1px solid #E6E6E6;
	border-radius   : 10px;
}
.download {
	text-align  : center;
}
.download img {
	width       : 150px;
	margin      : 15px;
}
@media (max-width:480px) {
	.download img {
		width   : 100px;
		margin  : 10px
	}
}
/*------------------------------------------------------------------------------
 * 4.クレジットカード選択画面 - カード番号入力ボックス
 *----------------------------------------------------------------------------*/
.creditNo {
	width       : 68px;
	padding     : 6px 10px;
}
/*------------------------------------------------------------------------------
 * 6.PAYSLE決済完了画面 - 支払未完了メッセージ
 *----------------------------------------------------------------------------*/
.unpaid-msg {
	margin-top  : 10px;
	font-weight : bold;
	text-decoration : underline;
}