@charset 'UTF-8';

/* ------------------------------
ビマケモール
------------------------------ */

/* ボタン横並びレイアウト */
.container_btn {
	text-align: center;
}

.container_btn:nth-child(1) {
	border: 1px solid #b9b9b9;
}

.container_btn:nth-child(2) {
	background-color: #f2f2f2;
	border: 1px solid #f2f2f2;
}

/* ボタン見出し */
.container_btn_title {
	color: #253a64;
	font-weight: bold;
	line-height: 1;
}

/* ボタン説明 */
.container_btn_txt {
	color: #333;
	line-height: 1.5;
}

.container_btn_txt_ex {
	margin-top: 0.5em;
}

/* ボタン共通 */
.btn_intoroduction {
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.btn_intoroduction span {
	display: inline-block;
	color: #fff;
	font-weight: bold;
	line-height: 1.2;
}

.btn_intoroduction::after {
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -0.5em;
	color: #fff;
	font-weight: normal;
	font-size: 75%;
	font-family: 'icomoon' !important;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	content: '\e902';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ボタン（ログイン） */
.btn_intoroduction_login {
	background-color: #253a64;
}

/* ボタン（新規会員登録） */
.btn_intoroduction_add {
	background-color: #22ac38;
}

/* バナー効果 */
.effect {
	opacity: 1;
}

.effect:hover {
	animation: effect 1s ease;
}

@keyframes effect {
	0% {
		opacity: 0.3;
	}

	100% {
		opacity: 1;
	}
}

@media only screen and (max-width: 768px) {
	/* レイアウト */
	#Main > .container {
		background-color: #fff;
	}

	.container-sp {
		margin: 1.25rem;
	}

	/* メイン下テキスト */
	.txt-normal {
		font-size: 188%;
	}

	/* ボタン横並びレイアウト */
	.container_btns {
		margin-bottom: 2.5rem;
	}

	.container_btn {
		padding: 1rem;
	}

	.container_btn:nth-child(1) {
		position: relative;
		margin-bottom: 2.5rem;
	}

	.container_btn:nth-child(1)::after {
		position: absolute;
		bottom: -1.25rem;
		left: 0;
		width: 100%;
		border-bottom: 1px dotted #b9b9b9;
		content: '';
	}

	/* ボタン見出し */
	.container_btn_title {
		margin-bottom: 1rem;
		font-size: 250%;
	}

	/* ボタン説明 */
	.container_btn_txt {
		margin-bottom: 1rem;
		font-size: 172%;
		text-align: left;
	}

	.container_btn_txt_ex {
		margin-top: 0.5rem;
		font-size: 100%;
	}

	/* ボタン共通 */
	.btn_intoroduction {
		padding: 1rem;
	}

	.btn_intoroduction span {
		font-size: 235%;
	}

	.btn_intoroduction::after {
		font-size: 150%;
	}

	/* ボタン（ログイン） */
	.btn_intoroduction_login span {
		padding-left: 25px;
		background: url(../img/page-introduction/ico_login.png) no-repeat 0 center / 15px auto;
	}

	/* ボタン（新規会員登録） */
	.btn_intoroduction_add span {
		padding-left: 30px;
		background: url(../img/page-introduction/ico_add.png) no-repeat 0 center / 20px auto;
	}
}

@media only screen and (min-width: 769px) {
	/* レイアウト */
	#Main > .container {
		width: 1176px;
	}

	/* メイン下テキスト */
	.txt-normal {
		margin: 40px;
		font-size: 18px;
	}

	/* ボタン横並びレイアウト */
	.container_btns {
		margin-bottom: 60px;
	}

	.container_btn {
		box-sizing: border-box;
		padding: 44px 69px;
		text-align: center;
	}

	/* ボタン見出し */
	.container_btn_title {
		margin-bottom: 30px;
		font-size: 24px;
	}

	/* ボタン説明 */
	.container_btn_txt {
		margin-bottom: 20px;
		font-size: 16px;
	}

	.container_btn_txt_ex {
		margin-top: 10px;
		font-size: 14px;
	}

	/* ボタン共通 */
	.btn_intoroduction {
		padding: 25px;
	}

	.btn_intoroduction span {
		font-size: 22px;
	}

	/* ボタン（ログイン） */
	.btn_intoroduction_login span {
		padding-left: 51px;
		background: url(../img/page-introduction/ico_login.png) no-repeat 0 center / 21px 24px;
	}

	/* ボタン（新規会員登録） */
	.btn_intoroduction_add span {
		padding-left: 58px;
		background: url(../img/page-introduction/ico_add.png) no-repeat 0 center / 28px 18px;
	}

	/* ピックアップ商品バナー */
	.bnr_pickup {
		display: block;
		width: 780px;
		margin: 0 auto;
	}
}

/*
--------------------------------------------------------------------------------
 END OF CSS
--------------------------------------------------------------------------------
*/