/* ----------------------------------------
all
----------------------------------------*/
@media (min-width:768px){.sp {display: none!important;}}

* {
	/* color: #333; */
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size: inherit;
	line-height: inherit;}

body {
	min-width: 1180px;}
body.fix{
	overflow: hidden;}

.blank > a:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 10px;
	background-image: url(../images/common/blank.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 10px;}
.blank.clear5 > a:after {
	background-image: url(../images/common/blank-clear.png);
	opacity: 0.5;}
.blank.White > a:after {
	background-image: url(../images/common/blank-clear.png);}

span.blank {
	display: inline-block;
	width: 20px;
	height: 12px;
	background-image: url(../images/common/blank.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 10px;}
span.blank.clear5 {
	background-image: url(../images/common/blank-clear.png);
	opacity: 0.5;}
span.blank.White {
	background-image: url(../images/common/blank-clear.png);}
	.productBrandBtn span.blank {
		background-image: url(../images/common/blank-clear.png);
		opacity: 0.5;}

a {transition: color 0.12s, background 0.12s; text-decoration: none;}

	/*animation*/
.underLine,
ul.underLineWrap > li > a {
	position: relative;}
.underLine:after,
ul.underLineWrap > li > a:after {
		content: '';
		position: absolute;
			top: 0;
			bottom: 0;
		display: block;
		width: 0;
		margin: 0 0 0 50%;
		border-bottom: 1px solid #e6b333; /*適宜調整*/
		transform: translateX(-50%);
		transition: 0.2s cubic-bezier(0.18, 0.85, 0.5, 1.2);}
		ul.underLineWrap > li > a:after {
			bottom: -4px;}
			.underLine:hover:after,
			ul.underLineWrap > li > a:hover:after {width: 100%;}

/*figureの中のラベル*/
.itemImgWrap {
	letter-spacing: -0.4em;}
.labelWrap {
	position: absolute;
		z-index: 1;
	display: flex;
		flex-wrap: wrap;
	margin: 4px}
.itemImgWrap .label {
	display: block;
	margin: 0 4px 4px 0;
	line-height: 100%;
	letter-spacing: normal;}
.itemImgWrap .label:before {
	display: inline-block;
	padding: 4px 10px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 100%;}
.itemImgWrap .new:before {
	content: "NEW";
	color: #fff;
	background: #e6b333;}
.itemImgWrap .shop:before {
	content: "オンラインショップ限定品";
	color: #e6b333;
	background: #fff;
	outline: 1px solid #e6b333;
	outline-offset: -1px;}
.itemImgWrap .end:before {
	content: "製造終了品";
	color: #fff;
	background: #9d9d9d;}

/*ブランド絞り込み*/
.is-hide {
	display: none;}

/* トップページ カテゴリ一覧トップなどのカテゴリ選択-検索ボタン */
.cateUseBtn {
	border: 1px solid #e6b333;}
.cateUseBtn > a {
	position: relative;
	z-index: 1;
	display: flex;
		justify-content: center;
		align-items: center;
	height: 100%;
	min-height: 64px;
	padding: 16px 40px;
	color: #e6b333;
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.5;
	background: #fff;
	transition-duration: 0.2s;}
	.cateUseBtn > a.hover {
		color: #fff;
		background: #e6b333;}
.cateUseBtn > a .redArrowS {
	transition: 0.12s;
	transition-property: border, transform;}
	.cateUseBtn > a.hover .redArrowS {
		border-color: #fff;
		transform: translateX(5px) rotate(-45deg);}
.cateUseBtn > a .redArrowS {right: 20px;}



/* ----------------------------------------
Header
----------------------------------------*/
header {
	position: relative;
	min-width: 1180px;
	color: #333;
	/* border-bottom: 1px solid #e9ecee; */
	border-bottom: 1px solid #111727;
	background-color: #111727;}
@media (min-width:1181px){header{ padding: 0 calc((((100vw - 1180px) - 100vw) + 100%) / 2);}}
@media (min-width:1281px){header{ padding: 0 50px;}}
.headerWrap {
	display: flex;
	justify-content: space-between;
	background-color: #111727;
}

.globalHead {
	display: flex;}

.logo a {
	position: absolute;
		top: 20px;
	display: block;
	width: 433px; /*原139*/
	height: 100px; /*原76*/
	background: url(../images/common/logo.png) no-repeat;
	/* background-size: contain; */
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	z-index: 10;}

.globalNav-subNav {
	display: flex;
		justify-content: flex-end;
		align-items: center;
	height: 60px;}
.globalNav-subNav > li {
	line-height: 2rem}
	.globalNav-subNav > li:not(:last-child) {margin: 0 30px 0 0;}
	.globalNav-subNav > li:nth-child(2) {
		margin-right: 24px;
		padding-right: 24px;
		border-right: 1px solid #d0d5da;}
.globalNav-subNav > li > a {
	display: inline-block;
	padding: 0 0 0 34px;
	color: rgba(255,255,255,0.85);
	font-size: 1.2rem;
	text-decoration: none;
	background-repeat: no-repeat;
	transition-duration: 0.12s;}
	.globalNav-subNav > li > a:hover {
		color: #e6b333;
		transition-duration: 0.12s;}
	.support-icon {
		background: url(../images/common/icon_support.png);
		background-size: 22px;
		background-position: left center}
	.shop-icon {
		background: url(../images/common/icon_shop.png);
		background-size: 17px;
		background-position: left 5px center;}
	.lang-icon {
		background: url(../images/common/icon_lang.png);
		background-size: 15px;
		background-position: left 7px center;}

/* modal
------------------------------*/
/*OnlineShop*/
.shop-icon + div .modal-box {}
.shop-icon + div .modal-box ul {
	/* width: 780px; */
	/* margin: 0 auto; */
	justify-content: center;
}
.shop-icon + div .modal-box li {
	width: 360px;
	margin: 0 0 60px 0;}
	.shop-icon + div .modal-box li:nth-child(2n) {
		margin-right: 0;}
	.shop-icon + div .modal-box li:nth-last-child(-n+2) {
		margin-bottom: 0;}
.shop-icon + div .modal-box li a {
	display: block;
	font-size: 1.4rem;
	text-decoration: none;
	line-height: 1.4;
	transition: 0.2s;}
		.img-soft99shop a:before {background: url(../images/common/img-onlineShop.jpg) no-repeat center;background-size: contain;}
		/* .img-soft99shop a:before {background: url(../images/common/img-onlineShop.gif) no-repeat center;} */
		/* .img-cocotorico a:before {background: url(../images/common/img-cocotorico.gif) no-repeat center;} */
	.shop-icon + div .modal-box li a:before {
		content: "";
		display: block;
		min-height: 234px;
		margin: 0 0 10px 0;
		border: 1px solid #e9ecee;
		transition: opacity 0.35s cubic-bezier(0.18, 0.85, 0.5, 1.2);}
		.shop-icon + div .modal-box li a.hover {
			color: #e6b333;}
		.shop-icon + div .modal-box li a.hover:before {
			opacity: 0.8;}
.shop-icon + div .modal-box li a span {
	padding: 0 20px 0 0;}

/*Language*/
.lang-icon + div .modal-box {
/*	height: 580px;*/
}
.lang-icon + div .modal-box ul {
	justify-content: center;
}
.lang-icon + div .modal-box li {
	width: calc((100% - 61px) / 3);/*1px IE proparty*/
	margin: 0 30px 30px 0;}
	.lang-icon + div .modal-box li:nth-child(3n) {
		margin-right: 0;}
	.lang-icon + div .modal-box li:nth-last-child(-n+3) {
		margin-bottom: 0;}
.lang-icon + div .modal-box li a {
	display: flex;
		justify-content: space-between;
		align-items: center;
	position: relative;
		z-index: 1;
	padding: 20px 42px;
	color: #e6b333;
	font-size: 1.6rem;
	text-decoration: none;
	line-height: 100%;
	border: 1px solid #e6b333;
	background: #fff;
	transition: 0.2s ease-in-out;}
/* 	.lang-icon + div .modal-box li a:before {
	content: "";
	position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: 0.2s ease-in-out;} */
		/* .lang-icon + div .modal-box li a:hover:before {
			transform: scale(0);
			will-change: transform;} */
	.lang-icon + div .modal-box li a span {transition: 0.2s ease-in-out;}
	.lang-icon + div .modal-box li a span:after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		vertical-align: middle;
		border-top: 1px solid #e6b333;
		border-right: 1px solid #e6b333;
		transform: rotate(45deg);
		transition: 0.2s ease-in-out;}
		.lang-icon + div .modal-box li a:hover {
			color: #fff;
			background: #e6b333;
			transition-duration: 0.2s;}
				.lang-icon + div .modal-box li a:hover span:after {
					border-color: #fff;
					transform: translateX(10px) rotate(45deg);}

.modal-box ul {
	display: flex;
		flex-wrap: wrap;}
.modal-box h2 {
	font-size: 1.8rem;
	margin: 0 0 18px 0;}
.modal-box h3 {
	font-size: 1.8rem;
	margin: 0 0 18px 0;}
.modal-wrap .modal-box span.blank {
	background-image: url(../images/common/blank.png);}

.modal-wrap {
	position: fixed;
		top: 0;
		left: 0;
	display: none;
	width: 100vw;
	height: 100%;
	background-color: rgba(153,153,153,0.5);
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 100;}
.modal-box {
	position: relative;
	width: 1180px;
	/*min-height: 300px;*/
	margin: 200px auto 100px auto;
	padding: 60px 70px;
	background-color: rgba(255,255,255,0.9);
	z-index: 105;}
.modal-cancel {
	position: absolute;
		top: -25px;
		right: 20px;
	display: flex;
		justify-content: center;
		align-items: center;
	width: 50px;
	height: 50px;
	color: #fff;
	background-color: #e6b333;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	transition: 0.3s cubic-bezier(0.18, 0.85, 0.5, 1);}
.modal-cancel:hover {
	/* background-color: #e92534; */
	background-color: #2d2309; /* 本來是用土黃色，會不清楚 */
	box-shadow: 0 0 3px rgba(0,0,0,0);}
.modal-cancel-badge{
	position: absolute;
		top: 0;
		left: 0;
	display: flex;
		justify-content: center;
		align-items: center;
	height: 100%;
	width: 100%;}
	.modal-cancel-badge:before,
	.modal-cancel-badge:after {
		content: "";
		display: inline-block;
		width: 20px;
		height: 4px;
		background: #fff;
		transition-duration: 0.2s;}
	.modal-cancel-badge:before {transform: translateX(50%) rotate(45deg);}
	.modal-cancel-badge:after {transform: translateX(-50%) rotate(-45deg);}

.overlay-cancel-modal {
	position: absolute;
		top: 0;
		left: 0;
	display: none;
	width: 100%;
	min-height: 100%;
	z-index: 100;}
.modal-wrap.active .overlay-cancel-modal {display: block;}


/* megaMenu
------------------------------*/
.globalNav-megaMenu {
	display: flex;
		justify-content: flex-end;
		align-items: center;
	height: 70px;
	margin: 0 0 8px auto;
	/* border-bottom: 1px solid #e9ecee; */
}
	.globalNav-megaMenu li:not(:last-child) {margin-right: 50px;}

[class*="megaMenu-btn"] {
	position: relative;
	display: block;
	height: 100%;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 70px;
	text-decoration: none;
	transition-property: color;
	transition-duration: 0.2s;}
		/*active*/
		#Products .prod.megaMenu-btn,
		#Search .sear.megaMenu-btn,
		#Fun .fun.megaMenu-btn,
		#Business .busi.megaMenu-btn-link,
		#Corporate .corp.megaMenu-btn,
		#RD .rd.megaMenu-btn,
		#Sustainability .sust.megaMenu-btn,
		#IR .ir.megaMenu-btn,
		#News .news.megaMenu-btn-link,
		#Recruit .recr.megaMenu-btn-link {
			/* color: #e6b333; */
			color: #e6b333;}
	[class*="megaMenu-btn"]:hover {
		/* color: #e6b333 */
		color: #e6b333;}
	[class*="megaMenu-btn"]:after {
		/* border-bottom: 2px solid #e6b333 */
		border-bottom: 2px solid #e6b333;}
	[class*="megaMenu-btn"]:hover:after,
	.megaMenu-btn.megaMenu-open:after {width: 100%;}
		/*active*/
		#Products .prod.megaMenu-btn:after,
		#Search .sear.megaMenu-btn:after,
		#Fun .fun.megaMenu-btn:after,
		#Business .busi.megaMenu-btn-link:after,
		#Corporate .corp.megaMenu-btn:after,
		#RD .rd.megaMenu-btn:after,
		#Sustainability .sust.megaMenu-btn:after,
		#IR .ir.megaMenu-btn:after,
		#News .news.megaMenu-btn-link:after,
		#Recruit .recr.megaMenu-btn-link:after {
			width: 100%;}

.megaMenu-content {
	position: absolute;
	display: none;
		top: 130px;
		left: 0;
		right: 0;
	background: #fff;
	z-index: 8;}
.megaMenu-area {
	padding: 50px;}
.megaMenuHead {
	max-width: 1180px;
	margin: 0 auto 50px auto;}
.megaMenuHead a {
	position: relative;
	padding-right: 30px;
	/* color: #e6b333; */
	color:#e6b333;
	font-size: 2.4rem;
	font-weight: normal;
	line-height: 100%;}
.megaMenuHead .redArrowL {
	right: 0;
	transition-property: right;}
	.megaMenuHead a.hover .redArrowL {
		right: -5px;}
	/*consumer*/
.megaMenuWrap-Popen {
	display: flex;
		flex-wrap: wrap;
	max-width: 1180px;
	margin: 0 auto 20px auto;}
		.megaMenuWrap-Popen > li > figcaption > p > a > .redArrowS { /*特殊対応*/
			left: 0;
			top: calc(50% + 3.5px);}
.megaMenuWrap-Popen li {
	width: calc(100% / 4 - 20px * 3 / 4);
	margin: 0 0 30px 0;}
.megaMenuWrap-Popen li:not(:nth-child(4n)) {
	margin-right: 20px;}
.megaMenuWrap-Popen li:nth-child(4n) {
	margin-right: 0;}
.megaMenuWrap-Popen	.captionOver .thumb {
	margin: 0;}
.megaMenuWrap-Popen	figure .thumb img {
	width: 100%;
	height: auto;}
.megaMenuWrap-Popen figcaption {
	position: relative;
	padding: 15px 0 0 15px;
	font-size: 1.4rem;
	line-height: 100%;
	transition: color 0.12s;}
	.megaMenuWrap-Popen a figcaption .redArrowS {
		left: 0;
		top: calc(50% + 3.5px);}
	.megaMenuWrap-Popen a.hover figcaption {
		/* color: #e6b333; */
		color: #e6b333;}
	/*other*/
.megaMenuWrap-Other {
	display: flex;
		flex-wrap: wrap;
	max-width: 1180px;
	margin: 0 auto 50px auto;}
.megaMenuWrap-Other li {
	display: flex;
		align-items: center;
	width: calc(100% / 4 - 20px * 3 / 4);
	border-top: 1px solid #e9ecee;}
	.megaMenuWrap-Other li:not(:nth-child(4n)) {
		margin-right: 20px;}
	.megaMenuWrap-Other li:nth-child(4n) {
		margin-right: 0;}
.megaMenuWrap-Other a {
	display: inline-block;
	width: 100%;
	padding: 25px 0;
	transition: color 0.12s;
	font-size: 1.4rem;
		text-indent: -1.6rem;
		padding-left: 1.6rem;}
	.megaMenuWrap-Other a.hover {
		/* color: #e6b333; */
		color: #e6b333;}
.megaMenuWrap-Other .redArrowS {
	position: static;
	margin: 0 10px 0 0;
	transform: rotate(-45deg) translateY(-50%);}

.megaMenu-close {
	display: flex;
		justify-content: center;
	width: 100%;
	padding: 20px 0;
	color: #555;
	font-weight: bold;
	line-height: 100%;
	background: #d0d5d9;
	box-shadow: 0 3px 4px rgba(0,0,0,0.1);
	transition: opacity 0.12s;}
	.megaMenu-close.hover {
		opacity: 0.8;}
.megaMenu-close .arrow {
	padding: 0;}
.megaMenu-close .arrow:after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 0 2px 10px;
	border-top: 1px solid #555;
	border-right: 1px solid #555;
	transform: rotate(-45deg) translateY(50%);}

.globalNav-megaMenu a[class*="switchBtn"] {
	position: relative;
	z-index: 1;
	display: block;
	padding: 4px 15px;
	font-size: 20px;
	font-weight: 800;
	text-decoration: none;
	color: #111727;              
	background-color: #e6b333;   
	border: 2px solid #e6b333;
	border-radius: 50px;         
	transition: all 0.2s ease-in-out;
}
.globalNav-megaMenu a[class*="switchBtn"]:hover {
	color: #e6b333;              
	background-color: #fff;     
	border: 2px solid #e6b333;
}
.globalNav-megaMenu .arrow{
  font-size: 22px;
  font-weight: 600;
  margin-left: 4px;
  /* margin-top: 4px; */
  display: inline-block;
  transition: transform 0.2s ease;
}
.globalNav-megaMenu .switchBtn:hover .arrow{
  transform: translateX(6px);
}
.globalNav-megaMenu a.nav-link{
  color: rgba(255, 253, 249, 0.75);
  transition: color 0.2s ease;
  font-size: 18px;
  font-weight: 400;
  padding: 29px 10px;
  /* margin-bottom: 50px; */
  position: relative;
  transition: color 0.2s ease;
}
.globalNav-megaMenu a.nav-link::after{
  content: "";
  position: absolute;
  /* left: 0; */
  bottom: -6px;
  left: -15px;
  width: calc(100% + 30px);
  /* width: 100%; */
  height: 2px;
  background: #e6b333;
  opacity: 0;
  transition: 0.2s;
}
.globalNav-megaMenu a.nav-link:hover::after,
.globalNav-megaMenu a.nav-link.active::after{
  color: #e6b333;
  opacity: 1;
}
.globalNav-megaMenu a.nav-link:hover,
.globalNav-megaMenu a.nav-link.active {
  color: #e6b333;
}

/* localNav
------------------------------*/
@media (min-width:1181px){.localNav { padding-left: calc((((100vw - 1180px) - 100vw) + 100%) / 2);}}
@media (min-width:1281px){.localNav { padding-left: 50px;}}
@media (min-width:1281px){#News .localNav,#Important .localNav { padding:10px 50px 0 50px !important;}}


.localNav {
	display: flex;
		justify-content: space-between;
	width: 100%;
	color: #333;
	border-bottom: 1px solid #e9ecee;
	background-color: #fafafa;}

	#News .localNav,
	#Important .localNav{
		padding:10px 0 0 0 ;}

.pankuzu {
	display: flex;
		align-items: center;
	height: 48px;}
	
	#News .pankuzu,
	#Important .pankuzu{
		height: auto;
		min-height: 48px;
		flex-wrap: wrap;}
	
.pankuzu li {
	display: flex;
		align-items: center;
	height: 100%;
	color: #555;
	font-size: 1.2rem;}

	#News .pankuzu li,
	#Important .pankuzu li{
		height: auto;
		margin-bottom: 10px;}

	
.pankuzu li:not(:last-child)::after {
	content: ' > ';
	display: inline-block;
	margin: 0 5px;}
.pankuzu li a {
	color: #555;
	text-decoration: none;
	transition-duration: 0s;}
.pankuzu li:not(:first-child) a {
	transition-duration: 0.12s;}
	.pankuzu li a:hover {
		/* color: #e6b333; */
		color: #e6b333;
		transition-duration: 0.12s;}
.pankuzu li:last-child{ font-weight: bold;}

.localNav.fix {
	position: fixed;
		top: 0;
		left: 0;
	z-index: 10;
	min-width: 100%;}
.localNav.fix .pankuzu li:first-child a {
	display: inline-block;
	width: 65px;
	height: 100%;
	background: url(../images/common/logo.png) no-repeat center;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;}
.localNav.fix .pankuzu li:nth-child(n+2) {display: none;}
.localNav.fix .pankuzu li:nth-child(1):after {display: none;}

.nav {
	display: flex;
		align-items: center;}
	.nav:before  {
		content: "";
		position: relative;
			z-index: 7;
		display: block;
		width: 1px;
		height: 28px;
		margin: 0 -1px 0 0;
		background:#d0d5da;}

[class*="nav-button"] {
	position: relative;
		top: 0;
		right: 0;
		z-index: 1;
	display: flex;
		align-items: center;
		justify-content: center;
	width: 280px;
	height: 100%;
	cursor: pointer;
	font-size: 1.3rem;
	font-weight: bold;
	background: #fafafa;
	transition-property: color,background;
	transition-duration: 0.2s;}
.localNav.fix [class*="nav-button"] {
	margin: 0;}
	[class*="nav-button"]:hover {
		/* color: #e6b333; */
		color: #e6b333;
		background: #f3f5f7;}
	[class*="nav-button"] .arrow:after {
		content: "";
		display: inline-block;
		width: 12px;
		height: 12px;
		margin: 0 0 2px 10px;
		border-top: 2px solid #e6b333;
		border-right: 2px solid #e6b333;
		transform: rotate(135deg);}
.nav-content {
	position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
	width: 400px;
	padding: 100px 60px 0 30px;
	font-size: 1.6rem;
	background-color: #e6b333;
	overflow-y: scroll;
	z-index: 15;
	opacity: 1;
	transition: transform 0.5s ease-in-out;
	transform: translateX(100%);}
.nav-content.hidden {opacity: 0;}
	.nav-content > *:last-child {
		margin-bottom: 60px;}

.localNav-parentLink {
	margin: 0 0 50px 0;
	color: #fff;
	font-size: 2.4rem;
	font-weight: normal;}
.localNav-parentLink a {transition-duration: 0.2s;}
.localNav-parentLink a:hover {opacity: 0.8; transition-duration: 0.2s;}
.localNav-parentLink .arrow::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 0 2px 16px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);}

.localNav-parentLink a {
	text-decoration: none;}
.localNav-parentLink:after {}

.localNav-childLink {
	/* border-top: 1px solid #e73b49; */
	border-top: 1px solid #e6b333;}
.localNav-childLink li {
	/* border-bottom: 1px solid #e73b49; */
	border-top: 1px solid #e6b333;}
.localNav-childLink li a {
	display: block;
	width: 100%;
	padding: 22px 25px;
	color: #fff;
	text-decoration: none;
	transition-duration: 0.12s;}
	.localNav-childLink a:hover {opacity: 0.8; transition-duration: 0.12s;}

.localNav-otherLink {
	/* border-top: 1px solid #e73b49; */
	border-top: 1px solid #e6b333;}
.localNav-otherLink li {
	/* border-bottom: 1px solid #e73b49; */
	border-top: 1px solid #e6b333;}
.localNav-otherLink li a {
	display: block;
	width: 100%;
	padding: 22px 10px;
	color: #fff;
	text-decoration: none;}
	.localNav-otherLink a:hover {opacity: 0.8; transition-duration: 0.12s;}

	/*btn*/
.localNav-btn {
	display: flex;
	margin: 0 0 50px 0;
	/* border: 1px solid #e73b49; */
	border-top: 1px solid #e6b333;}
.localNav-btn li {
	width: 50%;}
	.localNav-btn li:first-child {
		/* border-right: 1px solid #e73b49; */
		border-top: 1px solid #e6b333;}
.localNav-btn li a {
	display: flex;
		align-items: center;
		justify-content: center;
	height: 100%;
	padding: 34px 16px;
	color: #fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.2s;}
	.localNav-btn li a:hover {background: rgba(255,255,255,0.2);transition-duration: 0.2s;}

	/*accordion*/
.localNav-accordion {
	display: flex;
		justify-content: space-between;
		flex-wrap: wrap;}
.localNav-accordion > ul {
	width: 100%;}
	.localNav-accordion > ul:before {
		content: "";
		display: block;
		margin: 0 0 0 -15px;
		/* border-top: 1px solid #e73b49; */
		border-top: 1px solid #e6b333;}
.localNav-otherLink .localNav-accordion > a {
	display: block;
	width: calc(100% - 70px);
	padding: 22px 34px 22px 10px;}
.accordion-btn {
	position: relative;
	display: block;
	min-width: 66px;
	color: #fff;}
	.accordion-btn:before,
	.accordion-btn:after {
		content: '';
		display: inline-block;
		position: absolute;
			top: 50%;
			right: calc(50% - 7px);
		width: 14px;
		height: 2px;
		background-color: #fff;}
	.localNav-accordion .accordion-btn.nonLink {
		width: 100%;}
	.accordion-btn.nonLink:after,
	.accordion-btn.nonLink:before {right: 14px;}
	.accordion-btn:before {
		transform: rotate(90deg);
			transition: 0.2s;}
	.accordion-btn.open:before {transform: rotate(180deg);}
.accordion-btn span {
	display: block;
	width: 1px;
	height: 40px;
	margin: 0 0 0 -4px;
	background: #e73b49;}

.localNav-accordion > ul > li:last-child {
	border-bottom: 0;}
.localNav-accordion > a {}

.localNav-accordion ul {
	display: none;
	margin-left: 15px;}
.localNav-accordion .quietTxt {
	font-size: 1.2rem;
	opacity: 0.8;}

	/*search*/
.searchArea {
	width: 737px;}
	.searchArea .localNav-search:after {
		content: "\203b複数キーワードでの検索はできません。";
		display: block;
		margin: 10px calc(74px + 2px) 0 0;
		color: #555;
		font-size: 1.1rem;
		text-align: right;}
	#Support .searchForm .localNav-search,
	#Products .searchForm .localNav-search {
		flex-wrap: wrap;}
		#Products .searchForm .localNav-search:after {
			content: "\203b複数キーワードでの検索はできません。";
			display: block;
			width: 714px;
			margin: 10px calc(100px + 2px) 0 0;
			color: #555;
			font-size: 1.1rem;
			text-align: right;}
		#Support .searchForm .localNav-search:after {
			content: "\203b複数キーワードでの検索はできません。";
			display: block;
			width: calc(714px - 74px - 2px);
			margin: 10px calc(74px + 2px) 0 0;
			color: #555;
			font-size: 1.1rem;
			text-align: right;}
			#Support.SearchResult .searchForm .localNav-search:after {
				width: calc(744px - 104px - 2px);
				margin-right: calc(104px + 2px);}
			#Products.SearchResult .searchForm .localNav-search:after {
				width: auto;}
.searchArea .localNav-search form {
	margin: 0;}
.searchArea .localNav-search input {
	border: 1px solid #e6b333;}
.searchArea .localNav-search button {
	background: #e6b333;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.searchArea .localNav-search button .icon-search {background-image: url(../images/common/icon-search-active.png)}
	.localNav .localNav-search:after {
		content: "\203b複数キーワードでの検索はできません。";
		display: block;
		margin: 10px 0 0 0px;
		color: #fff;
		font-size: 1.1rem;
		text-align: left;}
.localNav-search form {
	display: flex;
	/*align-items: center;*/
	margin: 50px 0 0 0;}
.localNav-search input {
	box-sizing: border-box;
	width: calc(100% - 74px);
	margin: 0 10px 0 0;
	padding: 2px 16px 0 16px;
	background: #fff;}
		/*placeholder*/
		.localNav-search input::placeholder {color: #f27f88;opacity: 1;}
		/* IE */
		.localNav-search input:-ms-input-placeholder {color: #f27f88;}
		/* Edge */
		.localNav-search input::-ms-input-placeholder {color: #f27f88;}
.localNav-search button {
	position: relative;
		z-index: 0;
		flex-shrink: 0;
	width: 74px;
	height: 100%;
	padding: 20px 0;
	background-size: 20px;
	background-position: center;
	background-color: #fff;
	transition-duration: 0.2s;}
	.localNav-search button:hover {opacity: 0.8;}
	.icon-search {
		position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		width: 100%;
		height: 100%;
		background: url(../images/common/icon-search.png) no-repeat center;
		background-size: 20px;}

		/*注目ワード*/
.pickupWord {
	padding: 36px 30px 0 0;}
.pickupHead {
	font-size: 1.8rem;
	font-weight: bold;}
.pickupWordWrap {
	display: flex;
		flex-wrap: wrap;
	color: #333;
	font-size: 1.4rem;
	line-height: 100%;}
.pickupWordWrap > li {
	position: relative;
    margin-right: 45px;
    margin-top: 20px;}
.pickupWordWrap > li > a {
	padding: 0 0 0 20px;
	transition-duration: color 0.12s}
.pickupWordWrap > li > a.hover {
	color: #e6b333;}
.pickupWordWrap > li > a .redArrowS {
		left: 0;}
	/*/search*/


.localNav-textLink {
	margin: 50px 0 0 0;
	font-size: 1.4rem;}
.localNav-textLink li {
	margin: 0 0 26px 10px;}
.localNav-textLink li a {
	padding: 0 20px 0 0;
	color: #fff;
	text-decoration: none;
	transition-duration: 0.12s;}
	.localNav-textLink a:hover {
		opacity: 0.8;
		transition-duration: 0.12s;}

/*blank-white*/
/*.localNav li.blank a {background-image: url(/images/common/blank-clear.png);}*/
/*.localNav-accordion li.blank a {padding-right: 50px; background-position: center right 30px;}*/

.nav.active .nav-content {transform: translateX(0);}
.nav-cancel {
	position: absolute;
		top: 30px;
		right: 30px;
	display: flex;
		justify-content: center;
		align-items: center;
	width: 50px;
	height: 50px;
	color: #fff;
	cursor: pointer;
	transition-duration: 0.2s;}
	.nav-cancel:before,
	.nav-cancel:after {
		content: "";
		display: block;
		width: 20px;
		height: 4px;
		background: #fff;
		transition-duration: inherit;}
	.nav-cancel:before {transform: translateX(50%) rotate(45deg);}
	.nav-cancel:after {transform: translateX(-50%) rotate(-45deg);}
		.nav-cancel:hover {
			opacity: 0.8;
			transition-duration: 0.2s;}

.overlay-cancel{
	display: none;
	background-color: rgba(153,153,153,0.5);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}
body.fix .overlay-cancel {display: block;}


/* ----------------------------------------
Footer
----------------------------------------*/
.pageTop {
	background: #e5e3d2;
	position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 5;
	width: 62px;
	height: 62px;
	transition: background 0.2s;}
	.pageTop:hover {
		background: #e6b333;
		box-shadow: 0 0 0 2px #e5e5e5;
	}
.pageTop button {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	color: #ff9699;
	font-size: 1rem;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;}
	.pageTop button span:before {
		content: "";
		position: absolute;
			top: 26px;
			right: 0;
			left: 0;
		display: block;
		width: 16px;
		height: 16px;
		margin: 0 auto;
		border: 2px solid #e6b333;
		border-bottom: 0;
		border-left: 0;
		transform: rotate(-45deg);
		transition: border 0.2s;}
		.pageTop:hover button span:before {
			border-color: #fff;}


footer {
	color: #333;
	background-color: #111727;
}

.fatFooter {
	display: flex;
	width: 1180px;
	margin: 0 auto;
	padding: 80px 0;}
	.flex-5-col > li {width: 20%;}
	.flex-4-col > li {width: 25%;}

.fatFooter a {
	text-decoration: none;
	transition-duration: 0.12s;}
.fatFooter a.hover {
	color: #e6b333;}
.fatFooter > li {
	line-height: 100%;}
.fatFooter > li:not(:last-child) {
	padding: 0 40px 0 0;}
.fatFooter > li > h3 {
	color: #333;}
.fatFooter li h3 a {
	display: inline-block;
	margin: 0 0 14px 0;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 2;}
	.fatFooter li h3 a:after {
		border-width: 2px;}
	.fatFooter li h3 a.hover {
		text-decoration: underline;}
	.fatFooter li h3.blank > a,
		.fatFooter li ul li.blank > a  {
		/*padding: 0 20px 0 0;*/
		background-position: right center;}
.fatFooter ul {
	margin: 0 0 16px 0;}
.fatFooter li > a {
	display: inline-block;
	margin: 0 0 8px 0;
	color: #666;
	font-size: 1.1rem;}
.fatFooter li > a.hover {
	text-decoration: underline;}
		@media (min-width:768px){
			.fatFooter > li > div.accordion-wrap {
				display: block !important;}
		}

.fatFooter-menu-wrap {
	/*padding: 0 0 0 1.1rem;*/
}
.fatFooter-menu-wrap h3 {
	margin: 0 0 12px 0;
	font-size: 1.1rem;
	font-weight: bold;
	/*text-indent: -1.1rem;*/}
	.fatFooter-menu-wrap h3 > a {
		text-indent: 0;
		margin-bottom: 0;}

.fatFooter li h3.onlineShopTit {
    display: inline-block;
    margin: 0 0 6px 0;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 2;}
/* .findShops {
	background: #e6b333;
	color: #111727;
}
.SNS {
	background: #e6b333;
} */
footer .wrap{
	background: #e6b333;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px;
	position: relative;
}
/* 左邊補一個跟 SNS 差不多寬的假空間 */
footer .wrap::before{
	content: "";
	display: block;
	width: 260px;
	flex-shrink: 0;
}
.findShops{
	text-align:center;
	flex: 1;
	padding:10px 10px 10px;
}
.findShops .title{
	font-size: 28px;
	font-weight: 500;
	/* line-height: 1.2; */
	margin-bottom: 10px;
	color: #111727;
}
.findShops .title strong{
	font-weight: 800;
	text-shadow:
     0.6px 0 currentColor,
    -0.6px 0 currentColor;
}
.findShops .switchBtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 10px 26px;
	border: 2px solid #111727;
	border-radius: 999px;

	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;

	color: #fff;
	background: linear-gradient(180deg, #16203f 0%, #111727 100%);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.findShops .switchBtn:hover{
	color: #111727;
	background: #fff;
	border-color: #111727;
}
.findShops .switchBtn .arrow{
	font-size: 28px;
	font-weight: 400;
	color: #e6b333;
	line-height: 1;
	display: inline-block;
	transition: transform 0.25s ease;
}
.findShops .switchBtn:hover .arrow{
	transform: translateX(6px);
	color: #111727;
}
.SNS{
	display: flex;
	justify-content: flex-end;
}
.snsWrap {
	display: flex;
	/* flex-wrap: wrap; */
	/* justify-content: center; */
	/* gap: 20px; */
}
.snsWrap li {
	width:75px;
	height: 75px;
	/* margin: 0 20px 0 0; */
}
.snsWrap li:last-child {
	margin-right: 0;
}
.snsWrap > li > a {
	position: relative;
	display: block;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	transition: background 0.2s;}
/*.snsWrap > li > a:hover {background: #e93341;}*/
	.snsWrap > li > a:after {
		content: "";
		position: absolute;
		top: 0;
		display: block;
		background: no-repeat center;
		width: 100%;
		height: 100%;
		transition: opacity 0.2s;
	}
	.snsWrap li a:after{
		filter: brightness(0) saturate(100%);
	}
	/* .snsWrap li a:hover:after{
		filter: brightness(0) invert(1);
	} */
		@media all and (-ms-high-contrast: none) {
				.snsWrap > li > a:after {
					transform: rotate(0.01deg);
				}
			}
		.snsWrap > li > a:hover:after {
			opacity:1;
			transform:scale(1.2);
		}
			/* .snsWrap li.icon-99blog a:after {
				background-image:url(../images/common/icon-99blog.png);
				background-size: 26px;} */
			.snsWrap li.icon-facebook a:after {
				background-image:url(../images/common/icon-facebook.png);
				background-size: 32px;}
			/* .snsWrap li.icon-twitter a:after {
				background-image:url(../images/common/icon-x.png);
				background-size: 30px;} */
			.snsWrap li.icon-youtube a:after {
				background-image:url(../images/common/icon-youtube.png);
				background-size: 35px;}
			/* .snsWrap li.icon-line a:after {
				background-image:url(../images/common/icon-line.png);
				background-size: 54px;} */
			.snsWrap li.icon-instagram a:after {
					background-image:url(../images/common/icon-instagram.png);
					background-size: 32px;}
			.snsWrap li.icon-tiktok a:after {
				background-image:url(../images/common/icon-tiktok.png);
				background-size: 34px;}

@media (max-width: 767px){
	footer .wrap{
		display: block;
		/* padding: 10px 10px; */
	}
	footer .wrap::before{
		display: none;
	}
	footer .findShops .title{
		font-size: 20px;
		margin-top: 10px;
	}
	.findShops{
		padding: 0;
		/* margin-bottom: 10px; */
	}
	.SNS{
		width: 100%;
		justify-content: center;
	}
	.snsWrap{
		justify-content: center;
	}
}


.footer-subNav {
	margin: 0 0 50px 0;
	background-color: #111727;}
.footer-subNav > h3 {
	color: #333;}
.colLast-sns > h3:last-of-type {
	margin-bottom: 50px;}

.footer-legal {
	display: flex;
		flex-wrap: wrap;
		justify-content: center;
	margin: 0 auto 12px auto;
	padding: 25px 0 0 0;
	color: #555;
	font-size: 1.1rem;
	line-height: 100%;
	border-top: 1px solid #e9ecee;}
.footer-legal li {
	margin-bottom: 12px;
	padding:0 20px;
	border-right: 1px solid #d0d5da;}
	.footer-legal li:last-child {
		border-right: 0;}
.footer-legal li a {
	text-decoration: none;
	transition-duration: 0.2s;}
	.footer-legal li a:hover {
		color: #e6b333;
		transition-duration: 0.12s;}

.copyright {
	margin: 20px 0 0 0;
	padding-bottom: 20px;
	/* font-size: 1rem; */
	font-size: 12px;
	text-align: center;
	line-height: 100%;
	color: #efefef;
	/* background-color: #555; */
}

/* -------- クッキー使用についての同意 -------- */
.cookieBanner {
	position: fixed;
		z-index: 9999;
		bottom: 0;
	display: flex;
	width: 100%;
	min-width: 1180px;
	min-height: 130px;
	background: rgba(255,255,255,0.85);
	border-top: 1px solid #e9ecee;}
.cookieBanner:after {/*IE11fix*/
	content: "";
	min-height: inherit;
	font-size: 0;}
.cookieBanner-wrap {
	display: flex;
		justify-content: space-between;
		align-items: center;
	width: 1180px;
	margin: 0 auto;}
.cookie-message {
	width: 920px;
	color: #333;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 2.2rem;}
.cookie-message > a {
	text-decoration: underline;}
	.cookie-message > a:hover {
		color: #e6b333;
		text-decoration: none;}
.cookie-btn {
	width: 240px;
	min-height: 50px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	background: #e6b333;
	border: 1px solid #d71921;
	border-radius: 2px;
	transition: background 0.12s;
	transition-property: opacity;
	transition-duration: 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.cookie-btn:hover {
		opacity: 0.8;}


/* ----------------------------------------
共通CSS
----------------------------------------*/

/*各ページのタイトル部分*/
.pageTitle {
	background-color: #f3f5f7;
	background-color: #f3f5f7;
	color: #333;
	font-weight: bold;
	font-size: 3.6rem;
	text-align: center;
	padding: 67px 0;
	position: relative;}
		.pageTitle::after {
			content: '';
			display: block;
			position: absolute;
			left: calc(50% - 30px);
			bottom: 50px;
			width: 60px;
			height: 2px;
			background-color: #e6b333;}
		.middleCategory {
			display: block;
			height: 0;
			color: #555;
			font-size: 1.8rem;
			font-weight: normal;
			transform: translateY(-2.4rem);}

/*WYSIWYG部分*/
.wysiwyg{
	font-size: 1.4rem;
	color: #333;
	line-height: 2.8rem;}

.wysiwyg a {
	color: #e6b333;
	text-decoration: underline;
	transition-property: color, background, text-decoration;
	cursor: pointer;}
	.wysiwyg a.blank {
		margin: 0 10px 0 0;}
	.wysiwyg a.blank:after {
		content: "";
		display: inline-block;
		width: 14px;
		height: 10px;
		background-image: url(../images/common/blank.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 10px;}
		
.wysiwyg img{
	display:block;
	max-width: 100%;
	height:auto;
	margin: 20px auto 20px;}		
		
@media (min-width:768px){.wysiwyg a:hover{ text-decoration: none;}}
.wysiwyg a.hover {text-decoration: none;}


/*downloadBtn*/
.icon-download {
	position: relative;
	display: inline-block;
	width: 9px;
	margin-right: 10px;
	height: 14px;
	border-bottom: 1px solid #e6b333;}
.icon-download, .icon-download:after {transition: border-color 0.12s;}
.icon-download::before {
	content: "";
	position: absolute;
		left: 4px;
		top: 0;
	width: 1px;
	height: 9px;
	background-color: #e6b333;
	transition: background 0.12s;}
.icon-download::after {
	content: "";
	position: absolute;
		left: 1px;
		bottom: 4px;
	width: 7px;
	height: 7px;
	border-right: 1px solid #e6b333;
	border-bottom: 1px solid #e6b333;
	transform: rotate(45deg);}

/*矢印*/
.redArrowL {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-bottom: 2px solid #e6b333;
	border-right: 2px solid #e6b333;
	position: absolute;
	top: calc(50% - 8px);
	transform: rotate(-45deg);
	transition-property: border-color;
	transition-duration: 0.12s;}

.redArrowS {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
	position: absolute;
	top: calc(50% - 3.5px);
	transition-property: border-color;
	transition-duration: 0.12s;}

/*フローティングバナー*/
.floatingBnrArea {
	position: relative;
	margin-bottom: 60px;}
.floatingBnrWrap {
	display: flex;
		justify-content: space-between;
		align-items: center;
	width: 1180px;
	margin: 0 auto;
	padding: 20px 40px 20px 20px;
	font-size: 1.8rem;
	background: #f3f5f7;
	opacity: 0;
	transition: opacity 0.12s;}
	.floatingBnrWrap.fix {
		position: fixed;
			bottom: -100%;
			left: calc(50% - 1180px / 2);
			z-index: 1;}
	.floatingBnrWrap.active {
			bottom: 0;
		opacity: 1;}
.floatingBnrWrap > p {
	width: calc(100% - 400px);
	color: #333;
	text-align: center;}
.floatingBnrWrap > .floatingBnrBtn {
	position: relative;
	display: inline-block;
	width: 400px;
	padding: 32px 40px;
	color: #fff;
	line-height: 100%;
	text-align: center;
	border: 1px solid #e6b333;
	background-color: #e6b333;
	box-shadow: 0 3px 7px rgba(0,0,0,0.25);
	transition: box-shadow 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	.floatingBnrWrap > .floatingBnrBtn.hover {
		box-shadow: 0 3px 7px rgba(0,0,0,0.0);}
.floatingBnrWrap > .floatingBnrBtn .redArrowS {
	right: 35px;
	margin: 0 0 0 10px;
	transition: border 0.12s;}
	.floatingBnrWrap > .floatingBnrBtn.hover .redArrowS {
		border-color: #fff;}


/* ----------------------------------------
画像のホバーエフェクト-figure.captionOver
----------------------------------------*/
figure.captionOver:not(.outerTxt) {
	position: relative;
	cursor: pointer;}
.captionOver .thumb {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
	margin: 0 0 20px 0;
	overflow: hidden;}
.captionOver .thumb.clip {
	padding: calc(56.25% / 2) 0;
	height: 0;
	overflow: hidden;}
	.captionOver .thumb:after {
		/*content: "";*/
		position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		margin: 10px;
		background: #fff;
		opacity: 0;
		transition: opacity 0.2s;}
	.captionOver .thumb.clip:after {
		width: calc(100% - 10px * 2);
		padding: calc(56.25% / 2 - 10px) 0;}
		.captionOver.hover:not(.outerTxt) .thumb:after {
				opacity: 0.8;}
.captionOver .thumb img {
	width: 100%;
	height: auto;
	transition: transform 0.5s ease-out, opacity 0.12s;}
	.captionOver.hover:not(.outerTxt) .thumb img {
		transform: scale(1.06) rotate(0.1deg);
		opacity: 0.8;}

.captionOver .thumb.clip img {
	/*transform: scale(1.01); not use for .ImScale*/}
.captionOver > figcaption {
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	display: flex;
		justify-content: center;
		align-items: center;
	height: 0;
	padding: calc(75% / 2) 0;/*適宜調整*/
	opacity: 0;
	transition: opacity 0.2s;}
.captionOver > .clip + figcaption {
	padding: calc(56.25% / 2) 0;}
.captionOver.hover:not(.outerTxt) > figcaption {
	opacity: 1;}
.captionOver .figureTitle {
	text-align: center;
	color: #333;}
.captionOver .figureTitle > h3 {
	margin: 0 0 5px 0;
	font-size: 1.8rem;}
	.hover .figureTitle > h3 {
		color: #e6b333;}
.captionOver .figureTitle > p {
	color: #555;
	font-size: 1.2rem;}
/* ----------------------------------------
/画像のホバーエフェクト-figure.captionOver
----------------------------------------*/



/* ----------------------------------------
タブ ハッシュ付き 設定
----------------------------------------*/
.tab-content {
	display: none;}
	/*アンカーの位置調整*/
	.Index .tab-content,
	.List .tab-content {
		margin-top: -155px !important;
		padding-top: 155px !important;}
.tab-content.active {
	display: block;}
.tab-content.pc {
	display: block;}



/* ----------------------------------------
include-こちらもご覧ください
----------------------------------------*/
.otherContent {
	width: 1180px;
	margin: 0 auto 120px auto;
	/* color:  */
	}
.otherContent > h4 {
	margin: 0 0 60px 0;
	text-align: center;
	font-size: 2.8rem;
	font-weight: normal;}
.otherContentWrap {
	display: flex;
		flex-wrap: wrap;
	margin: 0 0 0 0;}
.otherContentWrap > li {
	width:calc(25% - (24px * 3 / 4));
	max-height: 300px;
	margin: 0 24px 64px 0;
	opacity: 1;
	transition: 0.4s;
	transition-property: max-height, margin, opacity;}
	.otherContentWrap > li:nth-child(4n) {margin-right: 0;}
	/*.otherContentWrap > li:nth-last-child(n+4) {margin-bottom: 44px;}*/
	.otherContentWrap > li:last-child {margin-right: 0;}
	.otherContent.is-hide-content .otherContentWrap > li:nth-child(n+5) {
		max-height: 0;
		margin-bottom: 0;
		opacity: 0;
		overflow: hidden;}
.otherContentWrap figure {
	margin: 0 0 15px 0;}
.otherContentWrap > li > a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.otherContent figcaption strong {
	color: #333;
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin-bottom: 8px;
	display: block;
	transition: color 0.12s;}
	.otherContentWrap > li > a.hover figcaption strong {
		color: #e6b333;}


.otherContent figcaption strong.blank:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 10px;
    background-image: url(../images/common/blank.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
}

.otherContentWrap figcaption > p {
	color: #333;
	/*font-size: 1.4rem;*/
	font-size: 1.2rem;
	line-height: 2.2rem;}
.otherContent .moreBtn {}
.otherContent .moreBtn button {
	display: block;
	min-width: 280px;
	height: 64px;
	margin: 0 auto;
	padding: 24px 10px 24px 20px;
	color: #e6b333;
	font-size: 1.4rem;
	text-align: center;
	line-height: 100%;
	background: #fff;
	border: 1px solid #e6b333;
	transition: 0.12s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.otherContent .moreBtn button .redArrowS {
	position: static;
	margin: 0 0 0 10px;}
.otherContent .moreBtn button.is-hide-content {
	display: none;}
	.otherContent .moreBtn button.hover {
		color: #fff;
		background-color: #e6b333;}
.otherContent .moreBtn .redArrowS {
	right: 35px;
	transform: rotate(45deg) translateY(-50%);}
	.otherContent .moreBtn button.hover .redArrowS {border-color: #fff;}
.otherContent .moreBtn button.is-close-btn {
	min-width: 164px;
	height: auto;
	padding: 12px 40px 12px 50px;}
	.otherContent .moreBtn button.is-close-btn.hover {
		/*box-shadow: 0 3px 7px rgba(0,0,0,0);*/
	}
.otherContent .moreBtn button.is-close-btn .redArrowS {
	/*border-color: #fff;*/
	transform: rotate(-135deg);}

.productOtherLink {
	width: 1180px;
	margin: 0 auto 80px auto;}
.productOtherLinkWrap {
	display: flex;
		flex-wrap: wrap;}
.productOtherLinkWrap > li {
	width:calc(25% - (12px * 3 / 4));
	margin: 0 12px 0 0;}
	.productOtherLinkWrap > li:nth-child(4n) {margin-right: 0;}
		.cateUseBtn {border: 1px solid #e6b333;}
		.cateUseBtn > button {
			position: relative;
			z-index: 1;
			display: block;
			padding: 25px 0;
			color: #e6b333;
			font-size: 1.4rem;
			text-align: center;
			line-height: 100%;
			background: #fff;
			transition-duration: 0.2s;}


/*※印*/
.kome{
 padding-left: 1.5em;
 position: relative;
}
.kome::before{
 content: '※';
 position: absolute;
 top: 0;
 left: 0;
}


/*よく出てくるsectionやタイトルなどのスタイル*/
.mainSections section{
 padding-bottom: 80px;
 border-bottom: 1px solid #d0d5da;
 margin-bottom: 40px;
}
/*.mainSections a,*/
.mainSections button{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.mainSections section:last-of-type{
 border-bottom: none;
 padding-bottom: 0;
 margin-bottom: 0;
}
.mainSections h2{
 font-size: 2.8rem;
 color: #000;
 margin-bottom: 60px;
 font-weight: normal;
}
.mainSections p{
 font-size: 1.4rem;
 color: #333;
 line-height: 2.8rem;
}
.mainSections table{
 font-size: 1.4rem;
 color: #333;
}
.mainSections th,
.mainSections td{
 border: 1px solid #e9ecee;
 box-sizing: border-box;
 border-collapse: collapse;
 padding: 20px;
 text-align: left;
}



/*下側各ページへのリンク*/
.bottomLinks{
 background-color: #f3f5f7;
 padding: 40px 0 60px;
}

.bottomLinks > div{
 width: 1180px;
 margin: 0 auto;
}
.bottomLinks h2 a{
 display: inline-block;
 font-size: 1.8rem;
 padding-right: 30px;
 color: #e6b333;
 font-weight: normal;
 position: relative;
 margin-bottom: 25px;
}
.bottomLinks h2 .redArrowL{
 right: 0;
 transition-property: right;
}
.bottomLinks h2 a.hover .redArrowL{ right: -5px;}
.bottomLinks ul{
 display: flex;
 flex-wrap: wrap;
}
.bottomLinks ul li{
 margin-right: 12px;
 border: 1px solid #e1e5e8;
 box-sizing: border-box;
 width: 286px;
}
.bottomLinks ul li:nth-child(4n){ margin-right: 0;}
.bottomLinks ul li:nth-child(n+5){ margin-top: 12px;}
.bottomLinks ul a{
 display: block;
 font-size: 1.4rem;
 text-align: center;
 padding: 20px 0;
 color: #333;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

.bottomLinks ul a.hover,
.bottomLinks ul a.active {
 color: #fff;
 background-color: #e6b333;
}


/*アンカーリンク*/
.anchorLink{
 display: flex;
 justify-content: center;
 font-size: 1.4rem;
}
.anchorLink li:not(:last-child){ border-right: 1px solid #d0d5da;}
.anchorLink a{
 display: block;
 padding: 3px 25px;
 color: #333;
 text-decoration: none;
}
.anchorLink a.hover{ color: #e6b333;}
.anchorLink .bottomArrow{
 position: relative;
 display: inline-block;
 width: 9px;
 height: 14px;
 margin-right: 15px;
}
/*.anchorLink .bottomArrow::before{
 content: '';
 position: absolute;
 width: 1px;
 height: 10px;
 left: 4px;
 bottom: 2px;
 background-color: #e6b333;
}*/
.anchorLink .bottomArrow::after{
 content: '';
 position: absolute;
 width: 7px;
 height: 7px;
 left: 1px;
 bottom: 2px;
 border-right: 1px solid #e6b333;
 border-bottom: 1px solid #e6b333;
 transform: rotate(45deg) translate(-25%);
}



/* ----------------------------------------
ニュース
----------------------------------------*/
/*セレクトボックス*/
.selectWrap{
 position: relative;
 display: inline-block;
}
.selectWrap .selectArrow{
 display: inline-block;
 width: 7px;
 height: 7px;
 border-bottom: 1px solid #e6b333;
 border-right: 1px solid #e6b333;
 transform: rotate(45deg);
 position: absolute;
 top: calc(50% - 6px);
 right: 13px;
 z-index: -1;
}
.selectWrap select{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 0;
 outline: none;
 cursor: pointer;
 min-width: 220px;
 box-sizing: border-box;
 border: 1px solid #d0d5da;
 padding: 9px 30px 8px 20px;
 font-size: 1.6rem;
 color: #333;
 background-color: transparent;
 transition-property: border-color;
 transition-duration: 0.12s;
 z-index: 1;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.selectWrap select::-ms-expand { display: none;}
.selectWrap select.hover{ border-color: #e6b333;}

/*ニュースリスト*/
.newsList dl{
 border-bottom: 1px solid #e9ecee;
 color: #333;
 font-size: 1.4rem;
}
.newsList a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.newsList dl > a{
 display: block;
 transition-property: box-shadow;
}
.newsList dl > a.hover{ box-shadow: 0 10px 10px -4px rgba(0,0,0,0.1);}
.newsList dl > a dd span{ transition: color 0.12s;}
.newsList dl > a.hover dd span{ color: #e6b333;}
.newsList dt,
.newsList dd{
 padding: 15px 20px;
 display: inline-flex;
 justify-content: space-between;
 box-sizing: border-box;
}
.newsList dt{
 padding-right: 0;
 width: 270px;
 align-items: center;
}
/*アイコンスタイル*/
.newprod-icon,
.campaign-icon,
.event-icon,
.company-icon,
.sustainability-icon,
.ir-icon,
.disclosure-icon,
.blog-icon,
.youtube-icon,
.recruitNew-icon,
.recruitMid-icon,
.news-icon,
.other-icon,
.site-icon,
.kessan-icon{
 display: inline-block;
 width: 108px;
 text-align: center;
 font-size: 1.2rem;
 color: #666;
 padding: 3px 0;
 box-sizing: border-box;
 background-color: #fff;
 font-weight: normal;
}
.newprod-icon,
.campaign-icon,
.event-icon{
 border: 1px solid #e6b333;
 color: #e6b333;
}
.company-icon,
.sustainability-icon,
.ir-icon,
.disclosure-icon,
.blog-icon,
.youtube-icon{ background-color: #e4e7e9; border: 1px solid #e4e7e9;}
.recruitNew-icon,
.recruitMid-icon,
.news-icon,
.other-icon,
.site-icon{ border: 1px solid #d1d5d8;}
.kessan-icon{ background-color: #e8e1e9; border: 1px solid #e8e1e9}

.newsList dt{
	white-space: nowrap;}
.newsList dd{
 width: calc(100% - 275px);
 align-items: flex-start;
 line-height: 2.2rem;
 word-break: break-all;
}
.newsList .newsBlank::after{
 content: '';
 width: 15px;
 height: 10px;
 display: inline-block;
 background: url(../images/common/blank.png) no-repeat right center;
 background-size: 10px;
}
/*PDFicon*/
.icon-pdf{
 width: 23px;
 height: auto;
}
.newsList .icon-pdf{
 vertical-align: bottom;
 margin-top: -2px;
 margin-left: 12px;
 margin-right: 7px;
}
.newsList .newsThumb{
 margin-left: 15px;
 max-width: 240px;
}
/*ニュースないときのエラーメッセージ*/
.newsError{
	margin: 0 0 120px 0;
	padding: 30px 0;
	color: #333;
	font-size: 1.6rem;
	text-align: center;}

/*ページネーション*/
.pagination{
 display: flex;
 justify-content: center;
 font-size: 1.4rem;
 color: #333;
 height: 50px;
 margin-top: 80px;
}
.pagination a{
 display: block;
 background-color: #f3f5f7;
 line-height: 50px;
 padding: 0 20px;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.pagination a.current,
.pagination a.hover{
 color: #fff;
 background-color: #e6b333;
}
.pagination a.prev,
.pagination a.next{
 position: relative;
 padding: 1px 25px 0;
}
.pagination a.prev{ margin-right: 20px; padding-left: 45px;}
.pagination a.next{ margin-left: 20px; padding-right: 45px;}
.pagination .prevArrow,
.pagination .nextArrow{
 display: inline-block;
 position: absolute;
 height: 10px;
 width: 20px;
 top: calc(50% - 5px);
}
.pagination .prevArrow{ left: 15px;}
.pagination .nextArrow{ right: 15px;}
.pagination .prevArrow::before,
.pagination .nextArrow::before{
 content: '';
 display: block;
 width: 20px;
 height: 2px;
 background-color: #999;
 position: absolute;
 top: calc(50% - 1px);
 transition-property: background-color;
 transition-duration: 0.12s;
 left: 0;
}
.pagination .prevArrow::after,
.pagination .nextArrow::after{
 content: '';
 display: block;
 width: 10px;
 height: 10px;
 border-bottom: 2px solid #999;
 border-right: 2px solid #999;
 position: absolute;
 top: 0;
 transition-property: border-color;
 transition-duration: 0.12s;
}
.pagination .prevArrow::after{ left: 0; transform: rotate(135deg);}
.pagination .nextArrow::after{ right: 0; transform: rotate(-45deg);}
.pagination a.prev.hover .prevArrow::before,
.pagination a.next.hover .nextArrow::before{ background-color: #fff;}
.pagination a.prev.hover .prevArrow::after,
.pagination a.next.hover .nextArrow::after{ border-bottom-color: #fff; border-right-color: #fff;}
.pagination ol{ display: flex;}
.pagination ol li{ margin-right: 1px;}
.pagination ol li:last-child{ margin-right: 0;}

/*ニュース上部のタブ*/
.newsTab{
 display: flex;
 margin-bottom: 55px;
}
.newsTab a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.newsTab li{
 flex: 1 1 25%;
 box-sizing: border-box;
}
@media (min-width:768px){.newsTab li:not(:last-child){ border-right: 1px solid #fff;}}
.newsTab li a{
 display: block;
 position: relative;
 background-color: #e4e7e9;
 color: #e6b333;
 font-size: 1.6rem;
 font-weight: bold;
 text-align: center;
 padding: 15px 0 12px;
}
.newsTab li a > span{
 display: inline-block;
 position: relative;
}
.newsTab li a .redArrowS{
 left: -27px;
 top: calc(50% - 4.5px);
}
.newsTab li a.hover,
.newsTab li a.active{
 background-color: #e6b333;
 color: #fff;
}
.newsTab li a.hover .redArrowS,
.newsTab li a.active .redArrowS{ border-color: #fff;}
.newsTab li a.active .redArrowS{
 transform: rotate(45deg);
 top: calc(50% - 6px);
}
.newsTab li a.active::after{
 content: '';
 position: absolute;
 left: calc(50% - 7.5px);
 bottom: -13px;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 13px 7.5px 0 7.5px;
 border-color: #e6b333 transparent transparent transparent;
}




/* ----------------------------------------
all
----------------------------------------*/
.borderIm{
	border:1px solid #e9ecee;
	box-sizing: border-box;
}
.borderIm-color{
	border:1px solid #ff79b1;
	box-sizing: border-box;
}

.ImScale {
	overflow: hidden;
}
.ImScale img {
	display: block;
	transform : scale(1);
	transition: transform 0.5s ease-out, opacity 0.12s;
}
a.hover .ImScale img {
	transform : scale(1.06) rotate(0.1deg);
	opacity: 0.8;
}