@charset "utf-8";
/*
Theme Name: li-oiwai
Theme URI: https://www.maboroshinosake.com/present/
Template: lightning
Description: lightning の子テーマです
Author: 幻の酒
Tags:
Version: 0.1.2
*/

/* =======================================
  スタイルの上書きや調整
======================================= */
body,
html {
	font-size: 16px;
}

body {
	background: #f9f9f9;
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}

h1.entry-title {
	font-size: 20px;
}

h2.title-red,
h3 {
	font-size: 1.3rem;
}

ul {
	margin: 0 0 1rem 0;
}

ul li {
	list-style: none;
}

.entry-body {
	margin-bottom: 50px;
}

img {
	border-radius: 6px;
}

.entry-body img {
	width: 100%;
}

@media (min-width: 768px) {
	h1.entry-title {
		font-size: 26px;
	}

	h2.title-red,
	h3 {
		font-size: 1.6rem;
	}
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

/* =======================================
  Lightning 調整
======================================= */
/* 問い合わせカード */
.veu_card {
	border-radius: 6px;
}

/* レイアウト調整 */
#products {
	margin: 0 -15px;
}

.siteHeader {
	background-color: #f8f8f8;
}

/* 商品一覧表示調整 */
.media-type .media-body .media-heading a {
	color: #464646;
}

.media-thumb {
	margin-bottom: 1rem;
}

/* ソーシャルボタン調整 */
.veu_socialSet.veu_contentAddSection ul li {
	margin: 5px;
}

.veu_socialSet li {
	width: calc(50% - 10px);
}

.follow_feedly {
	max-width: 97px;
	margin: 0 auto;
}

.veu_followSet .followSet_title {
	text-align: center;
}

/*.siteFooter {
  background-color: #f5f3ed;
}*/

/*.mainSection {
  background: #fff;
  border-radius: 6px;
  padding: 15px;
}*/

/*.mainSection-col-one {
  padding: 0;
}*/

/*.sideSection {
  background: #fff;
  padding: 0 15px;
  border: 3px solid #f5f3ed;
  border-radius: 6px;
}*/

/* プロフィール用 sns_アイコン */
.veu_profile .sns_btns li {
	float: none !important;
	display: inline-block;
}

/* レイアウト調整 */
@media (min-width: 480px) {
	#products {
		margin: 0;
	}
}

@media (max-width: 576px) {
	.page-header_pageTitle,
	h1.page-header_pageTitle:first-child,
	.h2,
	.mainSection-title,
	h2 {
		font-size: 1.5rem;
	}
	.single .page-header_pageTitle {
		font-size: 1rem;
		margin: 1em 0;
	}
	.siteContent {
    padding: 1.5rem 0 2rem;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 1080px;
	}

	/*.mainSection-col-one {
    max-width: 840px;
    margin: 0 auto;
  }*/

	.mainSection-col-two {
		width: 72.22222%;
	}

	.sideSection-col-two {
		width: calc(100% - 72.22222% - 20px);
		/*width: calc(100% - 66.66667% - 30px);*/
	}

}

.infoList .infoListBox div.thumbImage {
	float: left;
}

.infoList .infoListBox div.entryTxtBox.haveThumbnail {
	float: right
}

/* 画面幅によって別々の内容を表示 */
.sp,
.sp-menu {
	display: inherit;
}

.pc {
	display: none;
}

@media screen and (min-width:768px) {

	.sp,
	.sp-menu {
		display: none;
	}

	.pc {
		display: block;
	}

}

@media screen and (max-width:992px) {
	.pc-menu {
		display: none;
	}

}

/* パンくず調整 */
.fa_v5_css .entry-meta_updated::before {
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	content: "\f073";
	font-weight: 900;
}

/* ヘッダー調整 */
.siteHeader_logo {
	width: 100%;
	text-align: center;
}

.siteHeader_logo img {
	margin: 0 auto;
}

.mb-cart {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 49px;
	padding-top: 10px;
	box-shadow: -1px 0 3px rgba(0, 0, 0, .1);
	z-index: 1100;
	transition: border-color .5s ease-out;
	text-align: center;
}

.mb-cart .fa-shopping-cart {
	color: #212529;
}

.mb-cart .fa-shopping-cart::after {
	content: 'CART';
	display: block;
	padding-top: 5px;
	font-size: 10px;
}

.vk-mobile-nav-menu-btn {
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	border: none;
	box-shadow: 1px 0 3px rgba(0, 0, 0, .1);
	width: 60px;
	height: 49px;
	font-size: 10px;
	text-indent: 0;
	text-align: center;
}

.vk-mobile-nav-menu-btn::before {
	font-family: "Font Awesome 5 Free";
	content: '\f0c9';
	font-weight: 900;
	display: block;
	font-size: 26px;
	text-align: center;
	margin-bottom: -7px;
}

.vk-mobile-nav-menu-btn.menu-open {
	background: rgba(255, 255, 255, .8);
	border: none;
}

.vk-mobile-nav-menu-btn.menu-open::before {
	font-family: "Font Awesome 5 Free";
	content: '\f00d';
	font-weight: 900;
}

.vk-mobile-nav {
	padding: 49px 10px;
}

.admin-bar .siteHeader.fixed,
.admin-bar .vk-mobile-nav-menu-btn,
.admin-bar .mb-cart {
	top: 46px;
}

.header-right .contact .tel {
	color: var(--color-key);
}

@media (min-width: 783px) {

	.admin-bar .siteHeader.fixed,
	.admin-bar .vk-mobile-nav-menu-btn,
	.admin-bar .mb-cart,
	.header_scrolled.admin-bar .header-right {
		top: 32px;
	}
}

@media (min-width: 992px) {
	.siteHeader_logo {
		float: left;
		width: auto;
	}

	.siteHeader_logo img {
		margin: 0;
	}

	.navbar-brand img {
		max-height: 100px;
	}

	.navbar-header {
		height: auto;
	}

	.header-right {
		display: flex;
		flex-wrap: wrap;
		float: right;
		margin-bottom: 10px;
	}

	fas fa-phone-square .header-right .contact {
		margin-right: 1rem;
	}

	.header-right .contact span {
		display: block;
	}

	.header-right .contact .time {
		font-size: 12px;
		text-align: right;
	}

	.header-right .contact .tel {
		padding-top: 18px;
		font-size: 1.75rem;
		font-weight: bold;
		line-height: 1;
	}

	.gMenu_outer {
		/*clear: both;*/
		width: auto;
		min-height: 4em;
		display: table;
		margin: 0 auto;
	}

	.nav-cart {
		display: none;
	}

	.header_scrolled .nav-cart {
		display: block;
		background: #212529;
	}

	.header_scrolled .nav-contuct {
		background: #ff0000;
	}

	.header_scrolled .nav-cart a,
	.header_scrolled .nav-contuct a {
		color: #fff;
		transition: all .3s linear;
	}

	.header_scrolled .nav-cart a:hover {
		background: #fff;
		border: 1px solid #212529;
		color: #212529;
	}

	.header_scrolled .nav-contuct a:hover {
		background: #fff;
		border: 1px solid #ff0000;
		color: #ff0000;
	}

	/*.header_scrolled .gMenu_outer nav {
    width: 1080px;
  }*/

	/*.header_scrolled .gMenu_outer {
    display: none;
  }

  .header_scrolled .siteHeader {
    clear:both;
    z-index:1000;
    position:fixed;
    top: 0;
    left:0;
    width: 100%;
    min-height:unset;
    background-color:#fff;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
    box-shadow:0 1px 3px rgba(0,0,0,.1)
  }
  .header_scrolled .siteHeader .container {
    padding: 0;
  }

  .header_scrolled .siteHeader_logo img {
    max-height: 60px;
  }

  .header_scrolled .navbar-header {
    margin-bottom: 0;
  }

  .siteHeader.fixed {
    animation: fade-in 1s ease-out 0s 1 normal;
  }*/

	/*.header_scrolled .contact .tel {
    padding-top: 0;
  }

  .header_scrolled .fa-shopping-cart {
    margin-top: 0;
  }*/

	.cart {
		background: #212529;
		border-radius: 4px;
		width: 200px;
		height: 48px;
		margin: 16px 0 0 20px;
		text-align: center;
	}

	.cart a {
		display: block;
		padding: 12px 12px 11px;
		color: #fff;
		transition: all .3s linear;
	}

	.cart a:hover {
		border: 1px solid #212529;
		border-radius: 4px;
		background: #fff;
		color: #212529;
	}

	.fa-shopping-cart::after {
		content: 'カートを見る';
		padding-left: 5px;
		font-size: 14px;
	}

	.mb-cart {
		display: none;
	}

}

/*　サイドバー画像　*/
.side-mbs {
	text-align: center;
	margin: 0px auto;
}

.side-mbs-txt {
	font-family: 'Franklin Gothic Medium';
	color: #888;
}

.side-ico-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 100px;
	margin: auto;
}

.side-ico-wrap a:not(:last-child) {
	margin-right: 5px;
}

.side-icon {
	width: 100%;
	max-width: 30px;
	height: auto;
}

.subSection .textwidget img {
	display: block;
	margin: 0 auto;
}

.subSection ul {
	padding-left: 1rem;
}

.item-list {
	max-width: 100%;
	font-size: 14px;
}


/* フッター調整 */
.footer-info,
.footer-sitemap .menu {
	font-size: 14px;
}

.footer-info img {
	margin: 0 auto;
}

.footer-sitemap a {
	color: #464646;
}

.footer-sitemap ul {
	padding-left: 0;
}

.footer-sitemap .menu {
	padding-bottom: 1px;
	vertical-align: text-top;
}

.footer-sitemap .menu li {
	display: block;
	vertical-align: text-top;
	line-height: 116.7%;
}

.footer-sitemap .menu li a {
	display: block;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	box-shadow: 0 1px #fff;
	padding: 10px 0 10px;
	overflow: hidden;
}

.footer-sitemap .menu li li a {
	padding: 8px 1em;
}

#footerSiteMap .menu a:hover {
	color: #f00;
}

.copySection {
	font-size: 14px;
}

@media (min-width: 992px) {
	.footer-sitemap {
		font-size: 12px;
	}
}

@media (min-width: 768px) {
	.footer-info img {
		margin: 0;
	}

	.footer-sitemap .menu {
		font-size: 14px;
	}

	.footer-sitemap .menu li {
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 6px;
		min-width: 100px;
	}

	.footer-sitemap .menu li a {
		border-bottom: 1px solid rgba(0, 0, 0, .05);
		box-shadow: 0 1px #fff;
	}

	.footer-sitemap .sub-menu {
		margin-top: 8px;
	}

	.footer-sitemap .sub-menu li {
		display: block;
		margin-right: 0;
	}

	.footer-sitemap .sub-menu li a {
		border: 0;
		box-shadow: none;
	}

	.footer-sitemap .menu li li a {
		background-position: 3px 3px;
		padding: 0;
		font-size: 91.7%;
	}

}

/* 調整クラス */

.pw-15 {
	padding: 0 15px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.fs-14 {
	font-size: 14px;
}

.bg-red {
	background: #cc0000;
}

.bg-grn {
	background: #007900;
}

.bg-pnk {
	background: #ff8080;
}

.bg-gld {
	background: #d5bf85;
}

.fixed {
	position: fixed;
	-webkit-animation: fade-in 1s ease-out 0s 1 normal;
	animation: fade-in 1s ease-out 0s 1 normal;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (min-width: 992px) {
	.fixed {
		position: static;
		-webkit-animation: none;
		animation: none;
	}
}

/* =======================================
  トップページ
======================================= */
.lp section {
	margin-bottom: 50px;
}

/* ファーストビュー */
.fv-wrap {
	position: relative;
}

.copy {
	position: absolute;
	top: 25%;
	left: 1rem;
	font-size: calc(20px + ((1vw - 3.75px) * 3.2415));
	color: #ffffff;
	text-shadow: 1px 1px 2px #212529, 2px 2px 3px #333;
	line-height: 1.5;
}

/* 特徴 */
.feature-wrap {}

.feature .feature-content {
	padding: 0 5px;
}

.feature-img {
	margin-bottom: 10px;
}

.feature-txt h3 {
	border-top: 2px solid #212529;
	border-bottom: 2px solid #212529;
	padding: 6px 0;
}

/* 種類 */
.type {}

.type .row {
	position: relative;
	/*margin-bottom: 50px;*/
	z-index: 0;
	overflow: hidden;
}

.type .row::before {
	content: '';
	display: block;
	position: absolute;
	top: 45%;
	right: 0;
	bottom: 8%;
	left: 0;
	transform-origin: bottom right;
	transform: skewY(-5deg);
	outline: 1px solid #fff;
	outline-offset: -5px;
	z-index: -1;
}

.type .row:nth-child(odd)::before {
	background: #ddd;
}

.type .row:nth-child(even)::before {
	background: var(--color-key);
}

.type .row:nth-child(even) p {
	color: #fff;
}

.type .col-sm-6 {
	height: 250px;
}

.type-nihonsyu.lazyloaded {
	background: url(//www.maboroshinosake.com/img-naire/common/top/top-nihonsyu.jpg) no-repeat top left;
}

.type-syouchu.lazyloaded {
	background: url(//www.maboroshinosake.com/img-naire/common/top/top-syouchu.jpg) no-repeat top right;
}

.type-wine.lazyloaded {
	background: url(//www.maboroshinosake.com/img-naire/common/top/top-wine.jpg) no-repeat top left;
}

.type-juice.lazyloaded {
	background: url(//www.maboroshinosake.com/img-naire/common/top/top-juice.jpg) no-repeat top right;
}

.type h3,
.type p {
	position: absolute;
}

.type h3 {
	background: rgba(33, 37, 41, .5);
	top: 50%;
	left: 50%;
	padding: 10px 20px;
	border-radius: 4px;
	transform: translateY(-50%) translateX(-50%);
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.type p {
	top: 40%;
	left: 20%;
	transform: translateY(-50%) translateX(-10%);
	color: #212529;
}

/* レビュー */
.review {
	list-style-type: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.review li {
	display: block;
	float: left;
	margin-right: 10px;
}

@media (min-width: 576px) {
	.type .row:nth-child(odd)::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 45%;
		bottom: 0;
		left: 0;
		background: #ddd;
		transform-origin: bottom left;
		transform: skewX(15deg);
		outline: 1px solid #fff;
		outline-offset: -5px;
		z-index: -1;
	}

	.type .row:nth-child(odd)::before {
		top: 0;
		left: 0;
		bottom: 0;
		background: inherit;
		transform: none;
		outline: none;
	}

	.type .row:nth-child(even)::before {
		top: 0;
		left: 45%;
		bottom: 0;
		transform-origin: bottom right;
		transform: skewX(-15deg);
	}

	.type p {
		top: 50%;
	}
}

@media (min-width: 768px) {
	.feature-txt {
		width: 100%;
		height: 360px;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.feature-txt h3 {
		display: inline-block;
		border-top: none;
		border-right: 1px solid #212529;
		border-bottom: none;
		border-left: 1px solid #212529;
		padding: 0 6px;
	}

	.feature-txt h3::after {
		content: "";
		border: none;
	}

	.feature-txt p {
		line-height: 1.4;
	}

	.type .row:nth-child(odd)::after {
		right: 45%;
		bottom: 0;
		transform: skewX(20deg);
	}

	.type .row:nth-child(even)::before {
		left: 45%;
		bottom: 0;
		transform: skewX(-20deg);
	}
}

@media (min-width: 992px) {
	.copy {
		/*2カラムなら削除*/
		/*left: 3rem;*/
		font-size: 48px;
		/*2カラムなら40px*/
	}

	/*2カラムなら削除*/
	/*.feature .feature-wrap {
    padding: 0 10px;
  }*/

	.feature-img {
		margin-bottom: 20px;
	}

	/*2カラムなら削除*/
	/*.feature-txt {
    height: 260px;
    display: flex;
    flex-wrap: wrap;
    writing-mode: vertical-rl;
    align-items: center;
  }*/

	/*2カラムなら削除*/
	/*.feature-txt p {
    font-size: 18px;
    line-height: 1.6;
  }*/

	.type .row:nth-child(odd)::after {
		right: 45%;
		transform: skewX(23deg);
	}

	.type .row:nth-child(even)::before {
		left: 45%;
		transform: skewX(-23deg);
	}
}



/* =======================================
  固定ページ
======================================= */

/* 共通 */
.page-wrap {
	width: 100%;
	margin-bottom: 50px;
	/*padding: 10px;*/
	border-radius: 6px;
}

.page-wrap h2 {
	border-top: initial;
	text-align: center;
}

.page-wrap>div {
	background: #fff;
	border-radius: 6px;
}

.page-wrap>div:not(:last-child) {
	margin-bottom: 20px;
}

.content-wrap {
	padding: 0 10px;
}

@media (min-width: 576px) {
	.page-wrap>div {
		padding: 20px;
		border: 3px solid #f5f3ed;
	}
}

/* 電話をかける ボタン */
.btn-tel {
	display: block;
	border-radius: 5px;
	background: #f75065;
	max-width: 300px;
	margin: auto;
	padding: .375rem .75rem;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}

/* LINE ボタン */
.line-btn {
	background: #01b902;
	max-width: 300px;
	border-radius: 5px;
	text-align: center;
	margin: 0 auto;
}

.line-btn a {
	text-decoration: none;
	font-weight: bold;
	line-height: 44px;
	color: #fff;
}

/* 送信 ボタン */
.wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	font-size: 1.5rem;
}


/* FAX注文用紙ダウンロード */

.dl-btn {
	border: 3px solid;
	border-radius: 4px;
}

.dl-btn-red {
	border-color: #ff0000;
}

.dl-btn-ppl {
	border-color: #8000FF;
}

.dl-btn-yel {
	border-color: #FFFF00;
}

.dl-btn-grn {
	border-color: #088A29;
}

.dl-btn-pnk {
	border-color: #F7819F;
}

.form-img img {
	max-width: 303px;
}

.sample-img img {
	max-width: 180px;
}

.dl-btn,
.sample-btn {
	text-align: center;
}

.sample-btn {
	border: 5px dashed #F90;
	border-radius: 4px;
	background: #FFDBA6;
	margin-top: 1rem;
	color: #337ab7;
	font-weight: bold;
}

.ar-wrap img {
	max-width: 658px;
}

/* ラベルサンプル */
.label-sample ul {
	padding: 0;
}

/* メッセージカード */
.ms-card {
	padding: 0;
}

.ms-card img {
	border-radius: 0;
}

/* 休刊日 */
.closed-day {
	padding: 0;
}

.closed-day div {
	border-bottom: 1px solid #212529;
	padding-left: 1em;
	font-size: 14px;
}

.btn.btn-outline-qa {
	color: #212529;
	border: 1px solid #8a8987;
	background: #f4f2e6;
	box-shadow: none;
	font-size: 18px;
}

.bg-attention {
	background: #CC0000;
	border-radius: 4px;
	padding: 8px;
	font-size: calc(14px + ((1vw - 3.2px) * 1.3393));
	font-weight: bold;
	color: #fff;
}

@media (min-width: 768px) {
	.bg-attention {
		font-size: 20px;
	}
}

/* 紙面状態 */
.y-table div {
	display: inline-block;
	padding: 3px;
}

/* Q&A */
.question::before {
	display: block;
	content: 'Q.';
}

.answer {
	font-size: 1.3rem;
	color: #0000ff;
	font-weight: bold;
	text-align: center;
}

.answer::before {
	content: 'A.';
}

/* ランキング */
.lanking {
	background: url('//www.maboroshinosake.com/img-naire/aite/bg.jpg');
	padding: 0 15px;
}

/* 世相 */
.seso {
	background: bottom / 100% auto no-repeat url('//www.maboroshinosake.com/img-naire/common/info/seso/under.jpg'),
		center / 100% auto url('//www.maboroshinosake.com/img-naire/common/info/seso/back.jpg');
	padding: 0 15px 30px;
	font-size: 15px;
}

.seso .h-doubleline {
	padding: 15px;
}

.seso ul {
	padding: 0;
}

/* お急ぎ */
.oisogi-h4 {
	font-size: 1.2rem;
}

.oisogi-tb,
.oisogi-tb th,
.oisogi-tb td {
	border: 1px solid #000;
}

.oisogi-tb th:nth-child(1),
.oisogi-tb td:nth-child(1) {
	width: 40%;
}

.oisogi-tb th {
	background: #EEE8AA;
	text-align: left;
}

.oisogi-tb td:nth-child(1) {
	background: #F5F5DC;
}

.oisogi-tb td:nth-child(2) {
	background: #FFFFF0;
}

@media (min-width: 576px) {
	.lanking {
		padding: 0 30px;
	}

	.seso {
		padding: 0 30px 30px;
	}

	.seso .h-doubleline {
		padding: 15px 30px;
	}
}

/* レビュー */

.review-box {
	color: #000000;
	line-height: 140%;
	margin: 0 auto;
}

.review-box tr:nth-child(odd) {
	background-color: #ffffcc;
}

.review-box tr:nth-child(even) {
	background-color: #fdf5e6;
}

.review-box td {
	padding: 15px;
}

.review-box td img {
	float: left;
	max-width: 30px;
	margin-right: 10px;
}

.review-box .age-gender {
	margin: 5px 0;
	font-size: 12px;
	height: 30px;
}

.review-box .review-txt {
	margin: 5px 0;
	font-weight: bold;
}

/*
  下部案内
==================== */

.guidance p {
	margin-bottom: 10px;
}

.guidance h4 {
	margin-bottom: 15px;
}

/* =======================================
  商品ページ用のスタイル
======================================= */
.product-info {
	background-color: #110602;
	color: #fff;
}

.product-info .row,
.product-info>section>p {
	padding: 0 1rem;
}

.product-info img.alignleft {
	margin-right: 10px;
}

.product-info p {
	font-size: 15px;
	line-height: 1.5;
}

.product-info h3 {
	padding-bottom: 0;
	position: relative;
	border-bottom: none;
}

.product-info h3::after {
	position: static;
	bottom: 0;
	width: auto;
	border-bottom: none;
}

.product-info ol {
	margin-top: 0;
	padding-left: 20px;
	font-size: 15px;
}

.title-img {
	padding: .8em 0 .7em;
	border-top: none;
	border-bottom: none;
}

.title-yel,
.title-red,
.title-grn {
	margin-bottom: 10px;
	padding: 8px;
	color: #fff;
}

.title-yel {
	background-color: #b3a313;
}

.title-red {
	background-color: #c20009;
}

.title-grn {
	background-color: #1b4f29;
}

h3.title-yel::after,
h3.title-red::after,
h3.title-grn::after {
	border: none;
}

.h-doubleline {
	position: relative;
	padding: 10px 0;
}

.h-doubleline::before,
.h-doubleline::after {
	position: absolute;
	left: 0px;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}

.h-doubleline::before {
	top: 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}

.h-doubleline::after {
	bottom: 0;
	border-top: 1px solid #000;
	border-bottom: 2px solid #000;
}

.tab-content .h-supplement {
	text-align: left;
}

.h-supplement {
	position: relative;
	border-bottom: 2px solid #faa183;
	margin: 0 15px 10px 30px;
	font-size: 18px;
}

.h-supplement::before,
.h-supplement::after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	color: #faa183;
	font-weight: 900;
}

.h-supplement::before {
	top: 0;
	left: -25px;
	content: "\f0a9";
}

.h-supplement::after {
	right: -15px;
	bottom: -3px;
	content: "\f303";
}

.h-yellowtag {
	display: inline-block;
	background-color: #fedb0d;
	border-bottom: none;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	margin: 0 0 1.2em;
	padding: 5px 20px;
}

.h-yellowtag::after {
	border-bottom: none;
}

.h-border {
	margin: 1em 0 .5em;
	border: 1px solid #543226;
	;
	font-weight: bold;
	text-align: center;
	color: #543226;
}

.delivery ul li {
	list-style: disc;
}

.about .inner {
	padding: 0 15px;
	line-height: 1.5;
	font-size: calc(16px + ((1vw - 3.2px) * 0.893));
	font-weight: bold;
	color: #543226;
}

.about .inner>p,
.about .box>p {
	line-height: 1.4;
}

.about .box-brn {
	background-color: #543226;
	padding: 5px 5px;
	line-height: 1.5;
	font-size: calc(16px + ((1vw - 3.2px) * 0.893));
	font-weight: bold;
	color: #fff;
	text-align: center;
}

h3.title {
	border-bottom: none;
	padding-bottom: 0;
	font-size: 1.4rem;
}

h3.title::after {
	border-bottom: none;
}

.label .title {
	margin: .5em 0;
}

.label .title>.sub-txt {
	position: relative;
	padding-top: 20px;
}

.label .title>.sub-txt::before {
	position: absolute;
	top: 2px;
	left: 0;
	content: 'ご希望のお客様のみ';
	font-size: 14px;
}

.memorial-np h4 {
	margin: 0 0 10px;
}

.lelectier {
	background: url(//www.maboroshinosake.com/img-naire/juice/lelectier/bg.jpg);
}

.lelectier>h2 {
	margin: 0 0 10px;
	padding: 0;
}

.lelectier h3 {
	border-bottom: none;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.lelectier h3::after {
	border-bottom: none;
}

.lelectier h4 {
	margin: 1.5em 0 10px;
}

.txt-wrap {
	padding: 0 15px;
}

@media (min-width: 768px) {
	.about .inner {
		padding: 0 20px;
		font-size: 180%;
	}

	.about .box-brn {
		padding: 5px 20px;
		font-size: 200%;
	}

	.txt-wrap {
		padding: 0 30px;
	}
}

/* =======================================
  bootstrap 調整
======================================= */
/* ナビ */
.nav-tabs .nav-item {
	position: relative;
	background: #d3d3d3;
	margin-top: 5px;
	border-radius: 5px 5px 0 0;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	flex: 1;
	order: -1;
	z-index: 1;
}

.nav-tabs .nav-link {
	color: #fff;
}

.nav-item:not(:last-of-type) {
	margin-right: 5px;
}

/* モーダルウィンドウ */
/*.modal-header {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: fixed;
  justify-content:space-between;
}

.modal-body {
  top: 63px;
}*/

.my_modal-dialog-scrollable {
	display: flex;
	max-height: calc(100% - 1rem)
}

.my_modal-dialog-scrollable .modal-content {
	max-height: calc(100vh - 1rem);
	overflow: hidden
}

.my_modal-dialog-scrollable .modal-footer,
.my_modal-dialog-scrollable .modal-header {
	flex-shrink: 0
}

.my_modal-dialog-scrollable .modal-body {
	overflow-y: auto
}

.modal-dialog-centered.my_modal-dialog-scrollable {
	flex-direction: column;
	justify-content: center;
	height: 100%
}

.modal-dialog-centered.my_modal-dialog-scrollable .modal-content {
	/*max-height:none*/
}

.modal-dialog-centered.my_modal-dialog-scrollable::before {
	/*content:none*/
}

a:hover {
	text-decoration: none;
}

/* アコーディオン */
.accordion h4 {
	font-size: 1.25rem;
	line-height: 1.2;
}

/* カード */
.card-header {
	position: relative;
	padding: 0 1.25rem;
}

.card-header a[data-toggle="collapse"].collapsed::after,
.card-header a[data-toggle="collapse"]::after {
	position: absolute;
	top: 33%;
	right: 20px;
	font-family: "dashicons";
	float: right;
}

.card-header a[data-toggle="collapse"].collapsed::after {
	content: "\f132";
}

.card-header a[data-toggle="collapse"]::after {
	content: "\f460";
}

/* =======================================
  モジュール
======================================= */


/*
  ボタン
==================== */

.line-btn,
.page-back {
	border-radius: 5px;
	text-align: center;
	margin: 0 auto 10px;
}

.line-btn a,
.page-back a {
	text-decoration: none;
	font-weight: bold;
	line-height: 44px;
	color: #fff;
}

.line-btn {
	background: #01b902;
	max-width: 300px;
}

.line-btn a {
	color: #fff;
}

/* 前のページに戻る：present */
.page-back {
	width: 90%;
	margin: 0 auto;
}


/*
  囲いや背景の指定
==================== */
/* 子サイト共通 */
.box-info {
	background: #ffffea;
	padding: 15px;
	border: 2px solid #99cc00;
	border-radius: 6px;
	word-break: break-all;
}

.box-note {
	border: 5px solid #F00;
	padding: 15px;
	border-radius: 6px;
}

/* oiwai */
.box-round {
	border: 1px solid #442f22;
	border-radius: 5px;
	padding: 5px;
}

.box-round img.alignleft {
	margin-right: 5px;
}

.box-brn {
	background-color: #2f1c1e;
	margin-bottom: 20px;
	padding: 15px 15px 5px;
}

.box-blk {
	background-color: #212121;
	padding: 5px 20px;
	color: #fff;
}

.box-gry {
	border: 1px solid #ccc;
	padding: 10px 15px;
}

.product .box-gry ol,
.product .box-gry li,
.product .box-gry p {
	margin: 0;
}

.box-grn {
	background-color: #647833;
	border-radius: 5px;
	padding: 10px;
}

.box-lgrn {
	background-color: #dffbb0;
	padding: 10px;
}

.box-lgrn p {
	margin-bottom: 0;
}

.box-wht {
	background-color: #fff;
	padding: 10px 15px;
}

.box-red {
	background-color: #c20009;
	border-radius: 24px 24px;
	padding: 5px 10px;
	color: #fff;
	font-size: 150%;
	vertical-align: middle;
}

.sinbun {
	position: relative;
	background: url(//www.maboroshinosake.com/img-naire/common/top/02-kinenbishinbun.jpg) center center /cover no-repeat;
	padding: 1px;
}

.sinbun::after {
	content: url(//www.maboroshinosake.com/img-naire/juice/shiso/shinbun-1.png);
	position: absolute;
	top: 10px;
	right: 10px;
}

.box-red2 {
	width: 95%;
	background-color: rgba(194, 0, 9, .7);
	border-radius: 10px;
	margin: 150px auto 10px auto;
	padding: 15px;
	color: #fff;
	font-weight: bold;
}

.box-pink {
	background-color: #ec6273;
	border-radius: 0 0 10px 10px;
	margin: 0 -15px;
	padding: 20px 10px 1px;
	color: #fff;
	font-weight: bold;
}

.box-pink p {
	line-height: 1.5;
}

.box-gold {
	position: relative;
	background-color: #b3a313;
	border-radius: 6px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
}

.box-yel {
	background-color: #fbf7ec;
	padding: 10px 15px;
}

.box-supplement {
	background-color: #fff;
	border: 1px solid #442f22;
	padding: 20px 10px 0;
}

.box-lectier,
.bg-dot {
	background-color: #fff;
	background-image: radial-gradient(#fcf7e2 10%, transparent 70%), radial-gradient(#fcf7e2 10%, transparent 70%);
	background-position: 0 0, 15px 15px;
	background-size: 30px 30px;
}

.box-lectier {
	margin-top: -30px;
	padding: 30px 20px 20px;
}

.box-note {
	background: #eee;
	border: 1px solid #d4d4d4;
	border-radius: 5px;
	padding: 1em;
}

@media (min-width: 768px) {
	.box-yel {
		padding: 10px 30px 30px;
	}

	.box-pink {
		margin: 0 -30px;
		padding: 20px 20px 1px;
	}

	.box-gold::after {
		position: absolute;
		top: 20%;
		left: -150px;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		pointer-events: none;
		border: 10px solid transparent;
		border-right: 150px solid rgba(179, 163, 19, .9);
		transform: rotate(15deg);
	}

	.box-red2 {
		width: 70%;
		margin: 150px 10px 10px auto;
	}

	.box-lectier {
		margin-top: -40px;
	}
}

/* ランキングボックス */
.lank-box {
	display: grid;
	display: -ms-grid;
	grid-template-rows: auto;
	-ms-grid-rows: auto;
	grid-template-columns: 1fr;
	-ms-grid-columns: 1fr;
	align-content: end;
	margin-bottom: 30px;
}

.lank-box:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

.lank-box .price,
.lank-box .bottle {
	-ms-grid-row-align: baseline;
	align-self: baseline;
}

.lank-box .txt {
	line-height: 1.7;
	font-size: 15px;
}

.lank-box .link {
	-ms-grid-column-align: center;
	justify-self: center;
}

@media (min-width: 480px) {
	.lank-box {
		-ms-grid-rows: auto auto auto;
		grid-template-rows: auto auto auto;
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}

	.lank-box .price {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1 / 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1 / 2;
		vertical-align: middle;
	}

	.lank-box .bottle {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1 / 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
	}

	.lank-box .txt {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2 / 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1 / 3;
		padding: 1rem 0;
	}

	.lank-box .link {
		-ms-grid-row: 3;
		-ms-grid-row-span: 1;
		grid-row: 3 / 4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1 / 3;
	}
}

/* ○○で選ぶ */
.select-box img {
	max-width: 180px;
}

/*
  要素の調整
==================== */

.arign-center {
	align-items: center;
}

.mt--30 {
	margin-top: -30px;
}

.mt--70 {
	margin-top: -70px;
	width: 68%;
}

.mt--100 {
	margin-top: -100px;
	width: 68%;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mr-s {
	margin-right: 5px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pd-10 {
	padding: 10px;
}

.pl-20 {
	padding-left: 20px;
}

.mp-0 {
	margin: 0 -15px;
	padding-top: 0;
}

.lh-4 {
	line-height: 1.4;
}

.bb-sol {
	border-bottom: 1px solid #000;
}

.bb-dot {
	border-bottom: 1px dashed #fff;
}

.before-exclamation {
	position: relative;
	padding-left: 25px;
}

.before-exclamation::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "!";
	height: 20px;
	width: 20px;
	background-color: #c20009;
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

@media (min-width: 320px) {
	.mt--70 {
		margin-top: calc(-70px - ((1vw - 3.2px) * 14.84375));
	}
}

@media (min-width: 576px) {
	.mt--70 {
		margin-top: -108px;
	}

	.mt--100 {
		margin-top: -130px;
	}
}

@media (min-width: 768px) {
	.pr-0-pc {
		padding-right: 0;
	}

	.pl-0-pc {
		padding-left: 0;
	}

	.pd-0-pc {
		padding: 0;
	}

	.mt--70 {
		margin-top: -140px;
	}

	.mt--100 {
		margin-top: -160px;
	}

	.mp-0 {
		margin: 0 -30px;
	}

	.w-100-pc {
		width: 100%;
	}
}

/*
  画像調整
==================== */
.max-66 {
	max-width: 66px;
}

.max-90 {
	max-width: 90px;
}

.max-120 {
	max-width: 120px;
}

.max-140 {
	max-width: 140px;
}

.max-180 {
	max-width: 180px;
}

.max-200 {
	max-width: 200px;
}

.max-250 {
	max-width: 250px;
}

.max-300 {
	max-width: 300px;
}

.max-340 {
	max-width: 340px;
}

.max-400 {
	max-width: 400px;
}

.max-500 {
	max-width: 500px;
}

.max-555 {
	max-width: 555px;
}

.max-570 {
	max-width: 570px;
}

.max-600 {
	max-width: 600px;
}

.max-640 {
	max-width: 640px;
}

.max-680 {
	max-width: 680px;
}

.max-745 {
	max-width: 745px;
}

.border-r-0 {
	border-radius: 0;
}

@media (max-width: 768px) {
	.clearfix>img {
		float: none;
	}
}

/*@media (min-width: 768px) {
  .tel {
    pointer-events: none;
    cursor: default;
  }
}*/

/*
  見出し
==================== */

h2.no-dec {
	border-top: initial;
	border-bottom: none;
}

h3.no-dec,
h3.no-dec::after {
	border-bottom: none;
}

h3.no-border::after {
	border-bottom: none;
}

.title {
	margin: 0 auto;
	border-radius: 6px;
	font-size: 16px;
	color: #ffffff;
}

.title-bg {
	padding: 10px 0 10px 15px;
	border-radius: 6px;
	font-size: calc(18px + ((1vw - 3.2px) * 2.2321));
}

.title-attention {
	padding: 8px;
	border-left: 10px solid #CC0000;
}

.title-dark {
	background: #333333;
	padding: 8px;
	color: #fff;
}

.title-noshi {
	padding: 0 0 0 30px;
	font-size: calc(18px + ((1vw - 3.2px) * 3.125));
	background: url(https://www.maboroshinosake.com/common/img/ico-noshi.png) no-repeat left center / 26px 26px;
}

.h-doubleline {
	position: relative;
	padding: 10px 0;
}

.h-doubleline::before,
.h-doubleline::after {
	position: absolute;
	left: 0px;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}

.h-doubleline::before {
	top: 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}

.h-doubleline::after {
	bottom: 0;
	border-top: 1px solid #000;
	border-bottom: 2px solid #000;
}

.chouju-contents>div {
	padding: 5px;
	font-size: 14px;
}

@media (min-width: 768px) {
	h3.no-dec {
		font-size: 1.5rem;
	}

	.title-bg {
		font-size: 28px;
	}

	.title-noshi {
		font-size: 24px;
	}
}

/*
  テーブル
==================== */

/* テーブル：共通 */
table {
	border: 1px solid #333;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
}

/* テーブル：即日出荷で使用 */
.table-01 {
	margin-bottom: 20px;
	font-size: 12px;
}

.table-01 th {
	background: #eee8aa;
}

.table-01 th,
.table-01 tr:not(:last-child) td {
	border-bottom: 1px solid #333;
}

.table-01 th+th,
.table-01 td+td {
	border-left: 1px solid #333;
}

.table-01 td:nth-child(n) {
	background: #f5f5dc;
}

.table-01 td:nth-child(2n) {
	background: #fffff0;
}

/* テーブル：メッセージサンプルで使用 */
.table-02 {
	margin: 20px auto 40px;
	width: 95%;
	font-size: 15px;
}

.table-02 th {
	background: #f8f8f8;
	width: 50%;
}

.table-02 th,
.table-02 tr:not(:last-child) td {
	border-bottom: 1px solid #333;
}

.table-02 th+th,
.table-02 td+td {
	border-left: 1px solid #333;
}

/* テーブル：特定商取引法に関する表示で使用 */
.table-03 {
	border: 1px solid #f8f8f8;
}

.table-03 th {
	background-color: #eee;
	width: 100%;
	text-align: center;
}

.table-03 th,
.table-03 td {
	display: block;
}

.table-03 ul {
	padding: 0;
}

@media (min-width: 576px) {
	.table-03 th {
		width: 30%;
	}

	.table-03 th,
	.table-03 td {
		display: table-cell;
	}
}

/* テーブル：のしサンプルで使用 */
.table-04 {
	border: 1px solid #333;
}

.table-04 .img,
.table-04 .ttl {
	display: block;
}

.table-04 .ttl {
	font-size: 1rem;
}

.table-04 tr:not(:last-child) .txt {
	border-bottom: 1px solid #333;
}

@media (min-width: 576px) {

	.table-04 tr:not(:nth-last-child(2)) .img,
	.table-04 .ttl,
	.table-04 tr:not(:last-child) .txt {
		border-bottom: 1px solid #333;
	}

	.table-04 .ttl,
	.table-04 .txt {
		border-left: 1px solid #333;
	}

	.table-04 .img {
		width: 40%;
	}

	.table-04 .ttl {
		width: 60%;
		height: 40px;
	}

	.table-04 .img,
	.table-04 .ttl {
		display: table-cell;
	}
}

/* テーブル：のし一覧で使用 */
.table-05 th {
	background: #ffdab9;
}

.table-05 tr:not(:nth-child(98)) th,
.table-05 tr:not(:last-child) td {
	border-bottom: 1px solid #333;
}

.table-05 thead th:not(:first-child),
.table-05 tr:not(:first-child),
.table-05 td {
	border-left: 1px solid #333;
}

/* テーブル：お祝い年齢早見表で使用 */
.table-06 thead {
	background: #212529;
	color: #fff;
}

.table-06 tr:nth-child(odd) td {
	background: #fdee98;
}

.table-06 tr:not(:last-child) td {
	border-bottom: 1px solid #333;
}

.table-06 td:not(:last-child) {
	border-right: 1px solid #333;
}

/* テーブル：還暦祝いの由来で使用 */
.table-07 tr:first-child td {
	border-bottom: 1px solid #333;
}

.table-07 th {
	background: #212529;
	color: #fff;
}

/*
  テキストの装飾
==================== */

/* =======================================
  文字装飾
======================================= */

.redline {
	background: linear-gradient(transparent 60%, #faa2b1 0%);
}

.pinkline {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffdfef 0%) repeat scroll 0 0;
}

.pinkline-s {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffdfef 0%) repeat scroll 0 0;
}

.yellowline {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;
}

.yellowline-s {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffffbc 0%) repeat scroll 0 0;
}

.blueline {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;
}

.blueline-s {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #cce5ff 0%) repeat scroll 0 0;
}

.txt-supplement {
	margin-left: 30px;
}

.txt-b {
	font-weight: bold;
}

.txt-red,
.txt-red-b {
	color: #c20009;
}

.txt-blu,
.txt-blu-b {
	color: #0000ff;
}

.txt-org,
.txt-org-b {
	color: #ff6600;
}

.txt-pnk,
.txt-pnk-b {
	color: #ff99cc;
}

.txt-ppl,
.txt-ppl-b {
	color: #993366;
}

.txt-red-b,
.txt-blu-b,
.txt-org-b,
.txt-pnk-b,
.txt-ppl-b {
	font-weight: bold;
}

.txt-wht {
	color: #fff;
}

.txt-brn {
	color: #bfa17d;
}

.txt-org {
	color: #faa183;
}

.txt-org2 {
	color: #f0b514;
}

.txt-grn {
	color: #3ab265;
}

.txt-yel {
	color: #b3a313;
}

.txt-yel2 {
	color: #ecea00;
}

.txt-ppl {
	color: #ba4a8c;
}

.underline-yel {
	background: linear-gradient(transparent 50%, #ffffbc 50%);
}

.underline-pink {
	background: linear-gradient(transparent 50%, #ffdfef 50%);
}

.underline-blue {
	background: linear-gradient(transparent 50%, #cce5ff 50%);
}

.underline-yel-t {
	background: linear-gradient(transparent 80%, #ffffbc 80%);
}

.underline-pink-t {
	background: linear-gradient(transparent 80%, #ffdfef 80%);
}

.underline-blue-t {
	background: linear-gradient(transparent 80%, #cce5ff 80%);
}

.underline {
	border-bottom: 2px solid;
}

.underline-red {
	border-bottom: 2px solid #c20009;
}

.bg-yel {
	background: #ecea00;
}


.txt-s {
	font-size: 12px;
}

.txt-80 {
	font-size: 80%;
}

.txt-85 {
	font-size: .85rem;
}

.txt-100 {
	font-size: 1rem;
}

.txt-110 {
	font-size: 110%;
}

.txt-120 {
	font-size: 120%;
}

.txt-130 {
	font-size: 130%;
}

.txt-140 {
	font-size: 140%;
}

.txt-150 {
	font-size: 150%;
}

.txt-160 {
	font-size: 160%;
}

.txt-170 {
	font-size: 170%;
}

.txt-180 {
	font-size: 180%;
}

.txt-190 {
	font-size: 190%;
}

.txt-200 {
	font-size: 200%;
}

.txt-300 {
	font-size: 300%;
}

.txt-space {
	letter-spacing: .2rem;
}

.txt-right {
	text-align: right;
}

.txt-center {
	text-align: center;
}

.txt-bold {
	font-weight: bold;
}

.txt-indent {
	padding-left: 1em;
	text-indent: -1em;
}

.txt-indent2 {
	padding-left: 2em;
	text-indent: -2em;
}

@media (min-width: 768px) {
	.txt-vertical {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.txt-110-pc {
		font-size: 110%;
	}

	.txt-120-pc {
		font-size: 120%;
	}

	.txt-130-pc {
		font-size: 130%;
	}

	.txt-140-pc {
		font-size: 140%;
	}

	.txt-150-pc {
		font-size: 150%;
	}

	.txt-160-pc {
		font-size: 160%;
	}

	.txt-170-pc {
		font-size: 170%;
	}

	.txt-180-pc {
		font-size: 180%;
	}

	.txt-190-pc {
		font-size: 190%;
	}

	.txt-200-pc {
		font-size: 200%;
	}
}

/*
  その他
==================== */

.fixed {
	position: fixed;
	-webkit-animation: fade-in 1s ease-out 0s 1 normal;
	animation: fade-in 1s ease-out 0s 1 normal;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* 誘導バナー */
.bn-to-product {
	width: 250px;
	margin-left: -195px;
	transition: all .8s;
	z-index: 1000;
	-webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .6));
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .6));
}

.is-show {
	margin-left: 0;
}

.is-fixed {
	position: fixed;
	bottom: 3%;
	left: 0;
	-webkit-animation: fade-in-l 1s ease-out 0s 1 normal;
	animation: fade-in-l 1s ease-out 0s 1 normal;
}

@-webkit-keyframes fade-in-l {
	0% {
		opacity: 0;
		transform: translate3d(-34px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fade-in-l {
	0% {
		opacity: 0;
		transform: translate3d(-34px, 0, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (min-width: 768px) {
	.flex {
		display: flex;
	}
}

@media (min-width: 992px) {
	.fixed {
		position: static;
		-webkit-animation: none;
		animation: none;
	}
}

/* 検索ボックス */
.search-form {
  display: inline-block;
  padding: 10px;
  max-width: 250px;
  height: 40px;
}
.search-btn {
  display: inline-block;
  padding: 0 10px;
  height: 40px;
  vertical-align: top;
}

/* =======================================
  リスト
======================================= */

/* 関連記事 */
.related {
	margin-bottom: 1rem;
}

.related h2,
.populer h2 {
	margin-bottom: 5px;
}

.related ul {
	margin: 0;
	padding: 0;
}

.related li a {
	display: block;
	flex: 1;
	border: none;
	padding: 5px 0;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
}

.related li a:hover {
	background-color: #eeeeee;
}

@media (max-width: 599px) {
	.related ul {
		display: flex;
		flex-direction: column;
	}

	.related li a {
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: 1fr 16px;
		grid-template-rows: 1fr 16px;
		-ms-grid-columns: 80px 1fr;
		grid-template-columns: 80px 1fr;
		-moz-column-gap: 10px;
		column-gap: 10px;
	}

	.related li .thumb {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1 / 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
		grid-column: 1 / 2;
	}

	.related li .thumb img {
		width: 80px;
		height: 80px;
		max-width: 100%;
		max-height: 100%;
	}

	.related li .text {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1 / 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
	}

	.related li a:after {
		content: "";
		display: block;
		clear: both;
	}

	.related li .price {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2 / 3;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
	}
}

@media (min-width: 600px) {
	.related ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.related li {
		flex-basis: calc(100% / 4);
		padding: 0 5px;
		box-sizing: border-box;
	}

	.related li .thumb {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	.related li .thumb img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	.related li .thumb-related {
		width: 100%;
		height: 115px;
		margin-bottom: 10px;
	}

	.related li .thumb-related img {
		width: 100%;
		height: 115px;
		max-height: 100%;
	}

	.related li .text {
		margin-bottom: 5px;
	}

	.related li .price {
		color: #CC002F;
	}
}

/* 人気記事 */
.veu_postList .postList_miniThumb .postList_thumbnail a {
	border: none;
}

.chouju-contents {
	width: 100%;
	text-align: center;
}

.chouju-contents .bnr {
	display: inline-block;
	padding: 5px;
}

/* =======================================
  旧スタイル：要検証
======================================= */

/* リスト横並び */
ul.navi {
	padding: 0;
	margin: 0;
	width: 100%;
}

ul.navi li {
	padding: 5px 0;
	margin: 0;
	float: left;
	width: 15.8%;
	box-sizing: border-box;
	display: block;
	text-align: center;
	font-size: 20px;
}

ul.navi li+li {
	border-left: 1px solid #333;
}

@media screen and (max-width: 640px) {

	/* 640px以下は3列 */
	ul.navi li {
		width: 33.3%;
	}
}

@media screen and (max-width: 320px) {

	/* 320px以下は２列 */
	ul.navi li {
		width: 50%;
	}
}



/* リスト横並び2 */

.block-grid {
	width: auto;
	overflow: hidden;
	list-style-type: none;
	margin: 0 -1% 30px;
	padding: 0;
}

.block-grid li {
	width: 47%;
	display: inline-block;
	vertical-align: top;
	margin: 0 1% 30px;
	padding: 0;
}

.block-grid img {
	margin-bottom: 10px;
}

.block-grid a {
	text-decoration: none;
	font-size: 18px;
}

.block-grid p {
	line-height: 1.5;
}

@media screen and (max-width: 360px) {
	.block-grid li {
		width: 100%;
	}

	.block-grid li {
		clear: both;
	}
}

@media (min-width: 600px) {
	.block-grid-1-2-3 li {
		width: 47%;
	}

	.block-grid-1-2-3 li:nth-child(2n+1) {
		clear: both;
	}
}

@media (min-width: 800px) {
	.block-grid-1-2-3 li {
		width: 30%;
	}

	.block-grid-1-2-3 li:nth-child(2n+1) {
		clear: none;
	}

	.block-grid-1-2-3 li:nth-child(3n+1) {
		clear: both;
	}
}

/* 2カラム */

.myrow {
	display: flex;
}

.myrow p {
	font-size: 11px;
}

.myrow section {
	margin: 0px;
	padding: 0;
	flex: 1;
}

.myrow .col-1 {
	flex: 1;
}

.myrow .col-2 {
	flex: 2;
}

.myrow .col-3 {
	flex: 3;
}

.myrow .col-4 {
	flex: 4;
}

.myrow .col-5 {
	flex: 5;
}

.myrow .col-6 {
	flex: 6;
}

@media screen and (max-width: 600px) {
	.myrow {
		flex-direction: column;
	}
}

/* トップページのデザイン */

/* ボックス（2重線） */

.box-3 {
	border: 4px double #ddd;
	margin: 2em 0;
	padding: 2em;
}

/* レビュー */

.review {
	list-style-type: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.review li {
	display: block;
	float: left;
	margin-right: 10px;
}

.orange {
	color: #FF8C00;
}

span.green {
	color: #9dc01c;
	font-size: 2em;
}

p.title {
	font-weight: bold;
	font-size: 1.5em;
}

/* 要素横並び（〇〇で選ぶ） */

.t-list {
	text-align: center;
	width: 100%;
	margin: auto;
	padding-bottom: 15px;
	overflow: hidden;
}

.in-block {
	display: inline-block;
	padding-bottom: 5px;
}

.px {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

/* 商品一覧 4列 */

.itemlist {
	display: flex;
	flex-wrap: wrap;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.itemlist li {
	display: block;
	max-width: 23.5%;
	margin: 5px;
}

@media screen and (max-width: 767px) {
	.itemlist li {
		max-width: 46%;
	}
}

.itemlist dl,
.itemlist dd {
	margin: 0;
}

.itemlist dl {
	text-align: right;
}

.itemlist dt,
.itemlist .txt {
	text-align: left;
}

.itemlist dt {
	font-size: .9em;
	font-weight: 700;
}

.itemlist dd {
	margin-top: .2em;
	font-size: .8em;
}

.itemlist .price {
	display: inline-block;
	padding: .1em .5em;
	background: #eee;
}

.itemlist img {
	width: 100%;
	height: auto;
}

/* 商品一覧 3列 */

.itemlist2 {
	display: flex;
	flex-wrap: wrap;
	max-width: 1024px;
	margin: 0 auto;
	list-style: none;
	justify-content: center;
}

.itemlist2 li {
	display: block;
	max-width: 31.5%;
	margin: 5px;
}

@media screen and (max-width: 600px) {
	.itemlist2 li {
		max-width: 47.5%;
	}
}

@media screen and (max-width: 360px) {
	.itemlist2 li {
		max-width: none;
	}
}

.itemlist2 dl,
.itemlist dd {
	margin: 0;
}

.itemlist2 dl {
	text-align: right;
}

.itemlist2 dt,
.itemlist .txt {
	text-align: left;
}

.itemlist2 dt {
	font-size: .9em;
	font-weight: 700;
}

.itemlist2 dd {
	margin-top: .2em;
	font-size: .8em;
}

.itemlist2 .price {
	display: inline-block;
	padding: .1em .5em;
	background: #eee;
}

.itemlist2 img {
	width: 100%;
	height: auto;
	margin: auto;
}



/* 調整 */
#pageTitBnr {
	display: none;
}



/* =======================================
  Chat Bubbles　CSS Setting
======================================= */
/* 全体のスタイル */
.voice {
	margin-bottom: 40px;
}

/* 左画像 */
.voice-img-left {
	margin-left: 4px;
	margin-top: -1px;
	float: left;
	width: 60px;
	height: 60px;
}

/* 右画像 */
.voice-img-right {
	margin-right: 4px;
	margin-top: -1px;
	float: right;
	width: 60px;
	height: 60px;
}

.voice figure img {
	width: 100%;
	height: 100%;
	border: 2px solid #eee;
	border-radius: 50%;
	margin: 0;
}

/* 画像の下のテキスト */
.voice-img-description {
	padding: 5px 0 0;
	font-size: 10px;
	text-align: center;
}

/* 左からの吹き出しテキスト */
.voice-text-right {
	color: #444;
	position: relative;
	margin-left: 100px;
	padding: 1.2em;
	border: 3px solid #eee;
	background-color: #fff;
	border-radius: 5px;
}

/* 右からの吹き出しテキスト */
.voice-text-left {
	position: relative;
	margin-right: 100px;
	padding: 1.2em;
	border: 3px solid #eee;
	background-color: #fff;
	border-radius: 5px;
}

p.voice-text {
	margin: 0 0 8px;
}

p.voice-text:last-child {
	margin-bottom: 0px;
}

/* 左の三角形を作る */
.voice-text-right:before {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-right: 10px solid #eee;
	top: 15px;
	left: -20px;
}

.voice-text-right:after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-right: 10px solid #fff;
	top: 15px;
	left: -16px;
}

/* 右の三角形を作る */
.voice-text-left:before {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-left: 10px solid #eee;
	top: 15px;
	right: -23px;
}

.voice-text-left:after {
	position: absolute;
	content: '';
	border: 10px solid transparent;
	border-left: 10px solid #fff;
	top: 15px;
	right: -19px;
}

/* 回り込み解除 */
.voice:after,
.voice:before {
	clear: both;
	content: "";
	display: block;
}