@charset "UTF-8";
/*
style index
#00.common
#01.header
#02.globalnavi
#03.contents
#04.swiper
#05.ad banner1
#06.main contents
#07.news
#08.ad banner2
#09.footer
#10.title headline
#11.LOGO animation
*/


/* #00.common ################################################################ */



.pnkzArea {display: none;}
/*
.pnkzList {
	padding-top: 30px;
	padding-bottom: 30px;
}
.pnkzList > li {
	float: left;
	padding-right: 15px;
	font-size: 12px;
}
.pnkzList > li:after {
	content: ">";
	padding-left: 15px;
}
.pnkzList > li:last-child:after {
	content: "";
}
.pnkzList > li > a {
	color: #666;
}
*/


/* tab +++++++++++++++++++++++++++++++ */

.tabLink {
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	padding-top: 8px;
}
.tabLink > li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	min-width: 33%;
	border-right: 1px solid rgba(255,255,255,0);
}
.tabLink > li:last-child {
	border-right:none;
}
.tabLink > li > .tabLinkItem {
	font-size: 15px;
	line-height: 1.2;
}
.tabLink > li > .tabLinkItem > span,
.tabLink > li > .tabLinkItem > a {
	padding: 8px 0 10px;
}
.tabLink > li > .tabLinkItem:not(.select) > span:active,
.tabLink > li > .tabLinkItem:not(.select) > a:active {
	color: #323232;
	border-color:  #f66;
}
.tabLink > li .ttlJp {
	display: block;
	font-size: 10px;
}







/* #01.header ################################################################ */
header {
	border-top-width: 1px;
}
div.headerArea { background-color: none;}

.logo {
	background-color:rgba(0,0,0,.8);
	margin-right:43px;
	padding-left: 8px;
}
.logo > a {
	height: 43px;
	width: auto;
	box-sizing: border-box;
	padding: 7px 0;
}
.logo > a > .headIcon {
	height: 26px;
	position: relative;
	top: -1px;
	padding-left: 4px;
}


/* #02.globalnavi ################################################################ */

/* 可変メニューボタン *************************** */
.globalnaviBtn {
	position: fixed;
	top: 1px;
	right: 0;
	z-index: 9999;
	display: block;
	height: 43px;
	width: 43px;
	background-color: rgba(0,0,0,.8);

	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/* close btn */
.globalnaviBtn:before,
.globalnaviBtn:after {
	content: "";
	display: block;
	position: absolute;
	top: 21px;
	right: 13px;

	width: 17px;
	height: 0px;

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.globalnaviBtn:before {
	transform: rotate(45deg);
	border-bottom: 1px solid #fff;
}
.globalnaviBtn:after {
	transform: rotate(-45deg);
	border-top: 0px solid #fff;
	border-bottom: 1px solid #fff;
}

/* open btn */
input.globalnaviBtnInput:checked + .globalnaviBtn:before {
	top: 21px;
	right: 13px;
	height: 0px;
	transform: none;
}
input.globalnaviBtnInput:checked + .globalnaviBtn:after {
	top: 14px;
	right: 13px;
	height: 13px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: none;
}

/* menu **************************** */
ul.globalnavi {
	position: fixed;
	margin-top: 44px;
	top:0;
	left: 0;
	z-index: 10;
	width: 100%;
}
.globalnaviBtnInput:checked~ul.globalnavi {
	display: none;
}
ul.globalnavi > li {
	float: left;
	box-sizing: border-box;
	width: 50%;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}
ul.globalnavi > li a {
	display: block;
	text-decoration: none;
	width: 100%;
	padding:10px 0;
	height: auto;
	line-height: 1.1;

	font-size: 12px;
	color: #fff;
	text-align:center;
	background-color: rgba(255,255,255,.2);
}
ul.globalnavi > li a span.en {
	display: block;
	font-size: 16px;
}
ul.globalnavi > li a span.jp {
	display: block;
	padding-top: 2px;
	font-size: 12px;
}

.globalnaviBtnInput:checked~.globalnaviSeat {
	display: none;
}
.globalnaviSeat {
	position: fixed;
	margin-top: 0;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,.8);
}


/* #03.contents ################################################################ */
.contents{}
.topSlide{}


/* #04.swiper ################################################################ */
/* スライダまわりは暫定 流用するためには要調整 */
.swiper-container {
	width: 100%;
	height: 160px;

	padding-bottom:2px;
}
ul.slideList {}
ul.slideList > li {
	background-position: top center;
	background-size:auto 160px;
}
ul.slideList > li > a {
	display: block;
	text-align: center;
}
ul.slideList > li > a > img {
	width: 314px;
	height: 160px;
}


.bulletArea {
	width: 100%;
	height: 2px;
	background-color: #ddd;
}
.swiper-pagination {
	position: relative;

	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: flex;

	margin: 0 auto;
	width: 100%;

	bottom: 0 ;
	padding: 0 ;
	height: 2px;
	z-index: 1;
}
.swiper-pagination-bullet {
	display: block;
	border-radius: 0;
	min-width: 10px;

	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
	flex: 1;

	background-color: #ffa7ce;
	opacity: 1;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #e5337e;
}




/* #05.ad banner1 ################################################################ */
.topAd01{}
ul.adBnr01 {
	padding: 8px 0;
	width: 100%;
	display: block;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space:nowrap;
	-webkit-overflow-scrolling: touch;
}
ul.adBnr01 > li {
	display: table-cell;
	padding-left: 8px;
}
ul.adBnr01 > li > a {
	display: block;
	width: 180px;
	font-size: 14px;
}
ul.adBnr01 > li > a > img {
	width: 100%;
	height: auto;
}

ul.adBnr01 > li.noAdBnr01 {
	display: none;
}


/* #06.main contents ################################################################ */
.top2Calam {}


/* #07.news ################################################################ */
.topNews{}

ul.newsList {
}
ul.newsList > li {
	padding-top: 4px;
}
ul.newsList > li > a {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden;

/*	background-color: #efefef;*/
	box-shadow: 0 1px 0 rgba(0,0,0,.15);

	line-height: 1.3;
}

ul.newsList > li > a > .newsImg {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;

	height: 70px;
	width: 70px;
	background-size: cover;
	background-position: center;
	z-index: 4;
}
ul.newsList > li > a > .newsTxt {
	width: 100%;
	box-sizing: border-box;
}
ul.newsList > li > a .newsHeadline {
	position: relative;
	background-color: #777;
	box-shadow: 0 1px 0 rgba(0,0,0,.1);
	padding: 3px 5px 0;
	color: #fff;
	height: 35px;
	z-index: 5;
}
ul.newsList > li > a .newsDate {
	font-size: 10px;
}
ul.newsList > li > a .newsTtl {
	font-size: 15px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
ul.newsList > li > a .newsDetail {
	padding: 5px 5px 0 75px;
	line-height: 1.4;
	font-size: 12px;
	color: #444;
	height: 70px;

	box-sizing: border-box;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.newsDetail br {
	display: none;
}

ul.newsList > li:nth-child(4),
ul.newsList > li:nth-child(5),
ul.newsList > li:nth-child(6),
ul.newsList > li:nth-child(7),
ul.newsList > li:nth-child(8),
ul.newsList > li:nth-child(9) {
	display: none;
}

.topReadMore {
	padding-top: 3px;
}
.topReadMore a {
	position: relative;
	display: block;
	line-height: 40px;

	font-size: 14px;
	font-weight: 200;
	color: inherit;
	text-align: center;
	text-decoration: none;

	background-color: #efefef;
	box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.topReadMore a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	right: 15px;
	top: 50%;
	margin-top: -6px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}
.acdOpen a:after {
	transform: rotate(45deg);
}
.linkNewsList a:after {
	transform: rotate(-45deg);
}
.linkNewsList {
	display: none;
}



/* #08.ad banner2 ################################################################ */
.topAd02{}
ul.linkBnr {
	padding:0 5px 5px;
}
ul.linkBnr li {
	padding-top: 8px;
}
ul.linkBnr li.linkBnrChild {
	margin-top: 3px;
}
ul.linkBnr li a {
	position: relative;
	display: block;
	color: #fff;
	text-decoration: inherit;
	line-height: 50px;
	box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
ul.linkBnr li a:before {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	right: 15px;
	top: 50%;
	margin-top: -6px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
}

.linkBnr .txt {}

.bnrYt a { 
	padding-left: 110px;
	background-color: #e21818;
}
.bnrFb a {
	padding-left: 80px;
	background-color: #3564a2;
}
.ad02Icon {
	position: absolute;
	display: block;
	top: 0;
	height: 50px;
	background-position: center;
}
.ad02Icon.icnYtWh {
	left: 10px;
	background-image:url(../img/logo_yt_wh.png);
	background-size:90px 60px;
	width: 90px;
}
.ad02Icon.icnFbWh {
	left: 10px;
	background-image:url(../img/logo_fb_wh.png);
	background-size: 60px;
	width: 60px;
}

/* Youtube */
ul.linkBnr li.linkBnrChild.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
ul.linkBnr li.linkBnrChild.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}



/* #09.footer ################################################################ */
.footLink {}
ul.footLink {
	width: 100%;
	padding-top: 50px;
}
ul.footLink > li {
	float: left;
	width: 50%;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0,0,0,0);
}
ul.footLink > li:nth-child(odd) {
	border-right: 1px solid rgba(0,0,0,0);
}
ul.footLink > li > a {
	position: relative;
	display: block;
	padding-left: 20px;
	line-height: 30px;

	text-decoration:none;
	font-size: 12px;
	color: #666;
	background-color: #eee;
}
ul.footLink > li > a:before {
	content: "";
	display: block;
	position: absolute;
	
	left: 8px;
	top: 50%;
	margin-top: -5px;

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-color: transparent transparent transparent #666;
}

ul.footLink > li > a > span {
}
ul.footLink > li > a > span.en {
	display: none;
}
ul.footLink > li > a > span.jp {
}
ul.footLink > li > a:hover {
}


.copyArea {
	background-color:rgba(0,0,0,.8);
	color: #fff;
}
.copy {
	padding: 7px 5px;
	margin: 0 auto;
	font-size: 10px;
	line-height: 1.2;
	font-weight: 100;
}
.copy > .comName {
	display: block;
	font-size: 12px;
}
.copy > .comName:after {
}

.copyArea {}
.copy {}




/* #10.title headline ################################################################ */
.hl01 {
	margin-top: 10px;
	position: relative;
	padding: 8px 0;
	line-height: 1.2;
}
.hl01:before {
	content: "";
	display: block;
	position: absolute;
	
	left: 0;
	top: 50%;
	margin-top: -7px;

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 7px;
	border-color: transparent transparent transparent #f00;
}

.hlTxt {
	float: left;
	padding-left: 16px;
	font-size: 20px;
}
.hlTxt > span.hlJp {
	font-size: 14px;
	padding-left: 6px;
}
.hlLinkBtn {
	float: right;
	padding-right: 5px;
}
.hlLinkBtn > a {
	display: block;
	padding: 0 14px;
	line-height: 24px;

	background-color: #eee;
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(0,0,0,.15);

	font-size: 12px;
	color: #333;
	text-decoration: none;
}
.hlLinkBtn > a:hover {
	box-shadow: 0 2px 2px rgba(0,0,0,.15);
	color: #999;
	background-color: #f0f0f0;

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}


/* #11.LOGO animation ################################################################ */
/* only pc */







/* descriptionList ++++++++++++++++++++++++++++++++++++++++++++ */
.descriptionLinkList {
	padding: 6px 0 6px 30px;
	font-size: 13px;
}
/*
.descriptionLinkList > li {}
.descriptionLinkList > li > a,
.descriptionLinkList > li > a:visited {}
.descriptionLinkList > li > a:hover {}
*/

.descriptionDlList {
	font-size: 13px;
}
/*
.descriptionDlList > dt {}
.descriptionDlList > dd {}
.descriptionDlList > dd > a,
.descriptionDlList > dd > a:visited {}
.descriptionDlList > dd > a:hover {}
*/

.descriptionSubDlList {
	padding-left: 14px;
}
/*
.descriptionSubDlList > dt {}
.descriptionSubDlList > dd {}
.descriptionSubUlList {}
*/
.descriptionSubUlList > li {
	padding-left: 14px;
}
/*
.descriptionSubUlList > li:before {}
*/





/* columnDlList ++++++++++++++++++++++++++++++++++++++++++++ */

.columnDlList {
	width: 100%;
}
.columnDlList > dt {
	padding-top: 20px;
	font-size: 14px;
	font-weight: bold;
	color: #e5337e;
}
.columnDlList > dt:before {
/*
	content: "▼";
	position: relative;
	top: -1px;
	font-size: 12px;
*/
}
.columnDlList > dd {
}

.columnDlList > dt > .supTxt {
	font-size: 12px;
}
.columnDlList > dd > .supTxt {
	font-size: 12px;
}


.columnDlListSub01 {}
.columnDlListSub01 > dt {}
.columnDlListSub01 > dt:before {
	content: "・";
	position: relative;
	top: -2px;
	font-size: 10px;
	letter-spacing: 0.1;
}
.columnDlListSub01 > dd {
	font-size: 12px;
	padding-bottom: 10px;
}
.columnDlListSub01 > dd:last-child {
	padding-bottom: 0;
}

.columnDlListSub02 {
	font-size: 13px;
	padding-left: 12px;
}
.columnDlListSub02 > dt {
	display: block;
	font-weight: bold;
}
.columnDlListSub02 > dt:before {
	content: "・";
	margin-left: -12px;
	font-size: 12px;
	font-weight: normal;
}
.columnDlListSub02 > dd {
	display: block;
}


.columnUlListSub01 {}
.columnUlListSub01 > li {
	font-size: 14px;
	padding:3px 0 6px;
	line-height: 1.3;
}
.columnUlListSub01 > li:last-child {
	padding-bottom: 0;
}

.columnUlListSub02 {}
.columnUlListSub02 > li {
	padding-top: 2px;
}
.columnUlListSub02 > li:last-child {
}

.columnUlListSub03 {}
.columnUlListSub03 > li {
	padding-left: 1em;
}
.columnUlListSub03 > li:before {
	display: inline-block;
	content: "・";
	margin-left: -1em;
}
.columnUlListSub03 > li:last-child {}




/* form ###################################################### */

.ttlForm {
	border-bottom: 1px solid #000;
	padding: 5px 0;
}

.formArea{
}
.formInputDl{
	padding-top: 10px;
}
.formInputDl.widthMax {}
.formInputDl.widthQuarter {
	width: 50%;
	float: left;
}
.formInputDl.formInputDlTel {
	clear: both;
}
.formInputTtl{
	font-size: 13px;
}
.formInputTtl > span {
	font-size: 10px;
}
.formInputSup {
	padding: 2px 4px 0;
	line-height: 11px;

	font-size: 10px;
	color: #999;
}
.formInputArea{
	padding:0;
}
.formInputArea input,
.formInputArea textarea,
.formInputArea select,
.formInputArea option {
	-webkit-appearance: none;
	appearance: none;

	border: none;
	padding: 4px;
	margin: 0;

	font-size: 18px;

	width: 100%;
	box-sizing: border-box;

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.formInputArea select,
.formInputArea option {
	background-color: #fff;
}
.formInputArea.selectbox {
	position: relative;
	z-index: 1;
}
.formInputArea.selectbox:after {
	content: "";
	position: absolute;
	display: block;
	width: 7px;
	height: 7px;
	top: 50%;
	right: 10px;
	margin-top: -5px;
	transform: rotate(45deg);

	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	z-index: 5;
}

.formInputArea textarea {
	min-height: 5em;
}
.formInputArea input:focus,
.formInputArea textarea:focus,
.formInputArea select:focus {
	outline: none;
	background-color: #ffffe3;
}

input.zipSearch,
input.orderSubmit {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	top:-1px;

	border: none;
	color: #333;
	background-color: #efefef;

	box-shadow: 0 1px 0 rgba(0,0,0,.15);
	border-radius: 3px;

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
input.zipSearch {
	padding: 3px 12px;
	margin-left:4px; 
	width: auto;
}
input.orderSubmit {
	padding: 4px 16px;
}
input.zipSearch:focus,
input.zipSearch:active,
input.orderSubmit:focus,
input.orderSubmit:active {
	top:0px;
	outline: none;
	background-color: #f0f0ff;
	box-shadow: 0 1px 0 rgba(0,0,0,.0);
}

.checkBoxCtrl {
}
.preCheckbox {
	display: none;
}
.preCheckbox+.wpcf7-not-valid-tip:before {
	content:"このページ上部の商品を選択、または" !important;
}
.wpcf7-not-valid-tip {
	font-size: 12px !important;
}
div.wpcf7-validation-errors {
	border: 3px double #f00 !important;
	text-align: center;
}

.formInputTtl.zipcode~.formInputArea input  {
}
.formInputTtl.zipcode~.formInputArea input:first-child  {
	width: 25%;
}

.formInputTtl.nameA{}
.formInputTtl.nameB{}
.formInputTtl.mailA{}
.formInputTtl.mailB{}
.formInputTtl.telephone{}
.formInputTtl.zipcode{}
.formInputTtl.address{}
.formInputTtl.building{}
.formInputTtl.comment{}
.formInputTtl.age{}
.formInputTtl.age~.formInputArea {
	font-size: 14px;
	vertical-align: bottom;
}
.formInputTtl.age~.formInputArea input[type=number]{
	width: 50%;
}
.formInputTtl.sex{}
.formInputTtl.sex~.formInputArea{
	font-size: 14px;
	height: 28px;
	line-height: 28px;
}
.formInputTtl.sex~.formInputArea input[type=radio]{
	display: none;
}

.sexSelectRadio input[type=radio]~span {
	display: inline-block;
	padding-right: 10px;
}
.sexSelectRadio input[type=radio]~span:before {
	content: "";
	display: inline-block;
	position: relative;
	top: 2px;
	margin: 0 2px 0 0;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background-color: #fff;
	border: 2px solid #f0f0f0;
	box-sizing: border-box;
}
.sexSelectRadio input[type=radio]:checked~span:before {
	background-color: #fff092;
	border:none;
}


.required:after{
	content: "*";
	color: #f00;
}
.submitBtn {/*div*/
	text-align: center;
	padding-top: 12px;
}