@charset "UTF-8";
/* CSS Document */
/* GLOBAL */

/* Code Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box; }

/* ---------- BASE ---------- */
body {
	line-height: 1.5em;
	margin: 0;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "Yu Gothic", sans-serif;
	background-color: #123e87;
	-webkit-text-size-adjust: none;
	height: 100%; }

/* ---------- FORM SPACE ---------- */
.wpd1 { width: 90%; }
.wpd2 { width: 70%; }
.wpd3 { width: 20%; }
.wpd4 { width: 20%; }
.wpd5 { width: 50%; }
.wpd_zip { width: 50%; }
.wpd_com { width: 90%; }
.wpd_name { width: 46%; }

/* ---------- PC/SP ---------- */
.onlyPC { }
.onlySP { display: none; }

/* ---------- Contents Area ---------- */
	/* ---------- for Main, Sub Page ---------- */
div#pageContents { width: 100%; background-color: #ffffff; text-align: center; margin: 0; padding-bottom: 3em; }

	/* ---------- Page Breadcrumb ---------- */
div#breadcrumbArea { width: 100%; background-color: #99cce5; }
div#breadcrumbArea div.breadcrumbBlc { width: 980px; padding: 4px; text-align: left; margin: 0 auto; }
div#breadcrumbArea div.breadcrumbBlc > ul > li { list-style: none; display: inline-block; padding-right: 1em; color: #000000; }
div#breadcrumbArea div.breadcrumbBlc > ul > li::after { content: "＞" ; position: relative; margin-left: 1em; color: #666666; }
div#breadcrumbArea div.breadcrumbBlc > ul > li:last-child::after { content: ""; }
div#breadcrumbArea div.breadcrumbBlc > ul > li > a { color: #000000; }

	/* ---------- TOP PAGE ---------- */
	/* ---------- MAIN IMAGE ---------- */
div#topMainImage {
	width: 100%;
	height: 0;
	/* Image Height / Image Width * 100(Width%) */
	padding-top: 49%;
	background: url(image/top_main_image.jpg) ;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; }

	/* ---------- TOP FEATURE ---------- */
div#topFeature { width: 100%; }
div#topFeature > ul > li { width: 50%; display: inline-block; position: relative; }
div#topFeature > ul > li.featureUL01 {
	margin-bottom: -7px;
	width: 50%;
	height: 0;
	/* Image Height / Image Width * 50(Width%) */
	padding-top: 33%;
	background: url(image/top_feature_01.jpg) ;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; }
div#topFeature > ul > li.featureUL02 {
	margin-bottom: -7px;
	width: 50%;
	height: 0;
	/* Image Height / Image Width * 50(Width%) */
	padding-top: 33%;
	background: url(image/top_feature_02.jpg) ;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; }
div#topFeature > ul > li.featureUL03 {
	width: 50%;
	height: 0;
	/* Image Height / Image Width * 50(Width%) */
	padding-top: 33%;
	background: url(image/top_feature_03.jpg) ;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; }
div#topFeature > ul > li.featureUL04 {
	width: 50%;
	height: 0;
	/* Image Height / Image Width * 50(Width%) */
	padding-top: 33%;
	background: url(image/top_feature_04_v2.jpg) ;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover; }
div.featureBox01, div.featureBox04 {
	text-align: left;
	padding: 8px 16px;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	display: block;
	height: 7em;
	position: absolute;
	bottom: 0; }
div.featureBox01 > h4, div.featureBox04 > h4 { font-size: 120%; color: #32ce85; }
div.featureBox01 > p, div.featureBox04 > p { color: #32ce85; margin-top: 1em; }
div.featureBox01 > a, div.featureBox04 > a {
	padding: 4px 16px;
	float: right;
	display: block;
	border-radius: 3px;
	background-color: #32ce85;
	color: #ffffff;
	text-decoration: none;
	margin-top: -2em; }
div.featureBox02, div.featureBox03 {
	text-align: left;
	padding: 8px 16px;
	width: 100%;
	background-color: rgba(50,206,133,0.7);
	display: block;
	height: 7em;
	position: absolute;
	bottom: 0; }
div.featureBox02 > h4, div.featureBox03 > h4 { font-size: 120%; color: #ffffff; }
div.featureBox02 > p, div.featureBox03 > p { color: #ffffff; margin-top: 1em; }
div.featureBox02 > a, div.featureBox03 > a {
	padding: 4px 16px;
	float: right;
	display: block;
	border-radius: 3px;
	background-color: #ffffff;
	color: #32ce85;
	text-decoration: none;
	margin-top: -2em; }
div.featureBox01 > a:hover,
div.featureBox02 > a:hover,
div.featureBox03 > a:hover,
div.featureBox04 > a:hover { opacity: 0.7; }

	/* ---------- TOP ORDER ---------- */
div#topOrder, div#topOrderFooter, div#topOrderMiddle { padding-bottom: 2em; }
div#topOrder > h4 {
	display: block;
	width: 944px;
	height: 115px;
	background-image: url("image/top_order_phrase.png") ;
	margin: 1em auto; }
div.orderPrice {
	display: block;
	width: 622px;
	height: 311px;
	background-image: url("image/top_order_price_v2.png") ;
	margin: 1em auto; }
div.orderCampaign {
	display: block;
	width: 582px;
	height: 160px;
	background-image: url("image/top_order_campaign.png") ;
	margin: 0 auto;
	margin-top: -2em; }
div.link2cashbackBtn {
	width: 582px;
	display: block;
	text-align: right;
	margin: 0 auto;
	margin-top: -1em; }
div.link2cashbackBtn > a {
	font-weight: bold;
	color: #000000; }
a.mainOrderBtn {
	display: inline-block;
	text-decoration: none;
	color: #000000;
	font-size: 200%;
	padding: 16px 100px;
	letter-spacing: 0.2em;
	background-color: #6eb7da;
	border-radius: 35px;
	margin: 1em auto; }
a.mainOrderBtn:hover { opacity: 0.7; text-decoration: none; }
a.linkCashBack:hover { text-decoration: none; color: #dc143c; }
div.topOrderAlert {
	margin: 1em auto;
	width: 750px;
	padding: 8px;
	border: 2px solid #fe0032;
	border-radius: 3px;
	text-align: left; }

/* ---------- Feature Box ---------- */
div#feature01Detail, div#feature03Detail {
	width: 100%;
	padding: 2em 0;
	background-color: #6edca9; }
div#feature02Detail, div#feature04Detail {
	width: 100%;
	padding: 2em 0;
	background-color: #ffffff; }

div.featureDetailBox { width: 1000px; margin: 0 auto; }
div.featureDetailBox > h3 { font-size: 200%; }
div.featureDetailBox > h4 {
	display: inline-block;
	font-size: 120%;
	margin: 2em 0;
	margin-bottom: 1em;
	background: linear-gradient(transparent 70%, #ff99ab 70%); }
div.featureDetailBox > p {
	display: block;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 2em;
	padding: 8px 16px;
	border-radius: 3px;
	background-color: #cbffd4;
	text-align: left; }


/* ---------- mineralWaterBox ---------- */
div#mineralWaterBox { background-color: #6da3fe; }
div.categoryBox { width: 1000px; margin: 0 auto; padding: 2em 0; }
div.categoryBox > h3 {
	display: inline-block;
	padding: 16px 64px;
	font-size: 200%;
	border-radius: 32px;
	letter-spacing: 10px; }
div.categoryBox > h3.bg_white { background-color: #ffffff; }
div.categoryBox > h3.bg_blue { background-color: #6da3fe; }
div.categoryBox > p { display: block; margin: 1em auto; font-size: 120%; line-height: 1.5em; }

ul.waterListUL { list-style: none; padding: 5px; background-color: #ffffff; border-radius: 5px; }
ul.waterListUL li { width: 25%; display: inline-block; vertical-align: top; }
dl.waterDetailDL { padding: 8px; }
dl.waterDetailDL dt > span { display: block; background-color: #0c6af8; color: #ffffff; }
dl.waterDetailDL dd.waterFeature { text-align: center; color: #2a6496; }
dl.waterDetailDL dd.waterSpec { text-align: left; padding-left: 2em; }
dl.waterDetailDL dd.waterFree { font-size: 80%; line-height: 1.3em; border-radius: 16px; background-color: #b2d03e; margin-top: 4px; }

/* ---------- WaterServerBox ---------- */
div#WaterServerBox { background-color: #ffffff; }
ul.waterServerListUL { list-style: none; }
ul.waterServerListUL li { width: 33%; display: inline-block; vertical-align: top; border-right: 1px solid #2a6496; }
ul.waterServerListUL li:last-child { border-right: none; }
dl.waterServerListDL dt { text-align: center; font-weight: bold; }
dl.waterServerListDL dd { padding: 8px; }
dl.waterServerSpecDL {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	font-size: 80%;
	line-height: 1.3em;
	border-left: 1px solid #999999;
	border-top: 1px solid #999999; }
dl.waterServerSpecDL dt {
	font-weight: normal;
	display: inline-block;
	width: 30%;
	padding: 4px;
	background-color: #ededed;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	vertical-align: top; }
dl.waterServerSpecDL dd {
	display: inline-block;
	width: 70%;
	padding: 4px;
	text-align: left;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	vertical-align: top; }
dl.waterServerSpecDL dd > strong { font-weight: bold; color: #666666; }
ul.waterServerSpecUL { margin-left: 1em; }
ul.waterServerSpecUL li { display: block; border: none!important; width: 100%; text-indent: -1em; }
a.link2ServerLeaflet {
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	font-size: 100%;
	padding: 8px 16px ;
	background-color: #fa0f00;
	border-radius: 3px;
	margin: 0.5em auto; }
a.link2ServerLeaflet:hover { opacity: 0.7; text-decoration: none; }
div.getAdobeReader {
	background-color:#ececed;
	padding: 8px 16px;
	margin: 2em auto; }
div.getAdobeReader img { margin-top: 4px; }
table.getAdobeTable { border: none!important;}
table.getAdobeTable tr { border: none!important; }
table.getAdobeTable th { width: 158px!important; vertical-align:top; padding: 0px; border: none!important; }
table.getAdobeTable td {
	font-size: 80%;
	text-align: left;
	line-height: 1.8em;
	padding: 0px;
	vertical-align: top;
	border: none; }


/* ---------- priceBox ---------- */
div#priceBox { background-color: #6da3fe; }
ul.planListUL { list-style: none; padding: 20px 5px; background-color: #ffffff; border-radius: 5px 5px 0 0; }
ul.planListUL li { width: 33%; display: inline-block; vertical-align: top; padding: 8px; }
ul.planListUL li > dl > dt { background-color: #123e87; border-radius: 30px; padding: 8px 0; font-weight: bold; font-size: 120%; color: #ffffff; }

ul.planListUL li > dl > dd.planPrice { text-align: center; font-weight: bold; font-size: 200%; color: #ff607c; padding-top: 0.5em; letter-spacing: 0.1em; }
ul.planListUL li > dl > dd.planQuality { text-align: left; padding: 8px; }
ul.planListUL li > dl > dd.planExplanation { text-align: left; padding: 8px; background-color: #ebebeb; }
ul.planListUL li > dl > dd.planQuality > table.planTable th { text-align: right; }
div.minTermNote {
	text-align: left;
	background-color: #ffffff;
	padding-bottom: 1em;
	margin: 0 auto;
	margin-top: -1em; }
div.minTermNote  > p { padding: 1em; }
div.minTermNote  > p > strong { font-weight: bold; }
div.minTermNote > table { margin: 0 auto;  width: 95%; border-collapse: collapse; border: 1px solid #999999; }
div.minTermNote > table th { border: 1px solid #999999; background-color: #ededed; padding: 2px; text-align: center; }
div.minTermNote > table td { border: 1px solid #999999; padding: 2px; text-align: center; }
div.minTermNote > table td strong { font-weight: bold; font-size: 120%; }
div.minTermNote > ul { list-style: none; width: 95%; margin: 1em auto; margin-top: 2em; }
/* ---------- Init Price ---------- */
div.minTermNote > table.initPriceTable { width: 70%; margin: 0 auto; }

/* ---------- how2orderBox ---------- */
div#how2orderBox { background-color: #ffffff; }
ul.how2orderUL { list-style: none; width: 470px; margin: 0 auto; }
ul.how2orderUL li {
	position: relative;
	overflow: hidden;
	text-align: left;
	padding: 1.5rem 2rem 1.5rem 130px;
	border-top: 3px solid #9acde5;
	margin-bottom: 1.5em;
	font-size: 120%; }
ul.how2orderUL li:before {
	position: absolute;
	top: -150%;
	left: -100px;
	width: 200px;
	height: 300%;
	content: "";
	-webkit-transform: rotate(25deg) ;
	transform: rotate(25deg) ;
	background-color: #9acde5; }
ul.how2orderUL li:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-width: 14px 12px 0 12px;
	border-style: solid;
	border-color: #6da3fe transparent transparent transparent ; }
ul.how2orderUL li:last-child:after { border: none; }
ul.how2orderUL li > span {
	font-size: 250%;
	position: absolute;
	font-style: italic;
	z-index:1 ;
	top: 0;
	left: 0;
	display: block;
	padding-top: 20px;
	padding-left: 32px;
	color: #ffffff; }
div.afterOrderBox {
	padding: 8px 16px;
	background-color: #9acde5;
	border-radius: 3px; }
div.afterOrderBox > h4 { font-size: 140%; padding: 8px 24px; color: #ffffff; }
div.afterOrderBox > ul { list-style: none; }
div.afterOrderBox > ul > li {
	padding: 8px;
	border-radius: 3px;
	background-color: #ffffff;
	text-align: left; }
div.afterOrderBox > ul > li:nth-child(2n) { background-color: #9acde5; text-align: center; color: #ffffff; }

div.afterOrderBox > ul > li > strong { font-weight: bold; font-size: 120%; color: #123e87; }
div.afterOrderBox ul.afterOrderWarningUL { list-style: none; }
div.afterOrderBox ul.afterOrderWarningUL > li { text-indent: -1em; margin-left: 1em; }

/* ---------- faqBox ---------- */
div#faqBox { background-color: #6da3fe; }
dl.faqDL { width: 800px; margin: 0 auto; padding: 16px 8px; background-color: #ffffff; border-radius: 5px; }
dl.faqDL dt {
	padding: 8px 16px;
	padding-top: 32px;
	text-align: left;
	font-weight: bold;
	color: #333333;
	font-size: 140%; }
dl.faqDL dd {
	padding: 8px 16px;
	padding-bottom: 32px;
	text-align: left;
	border-bottom: 1px solid #6da3fe }
dl.faqDL dd:last-child { border-bottom: none; }
dl.faqDL dd > strong { font-weight: bold; }
dl.faqDL dd > ul { margin-left: 1em; list-style: none; }
dl.faqDL dd > ul > li { text-indent: -1em; }
span.fdtime { display: inline-block; margin-left: 3em; }

	/* ---------- Page Title ---------- */
h2.pageTitle {
	width: 980px;
	margin: 1em auto;
	padding: 16px;
	border-left: 1px solid #63b7da;
	font-size: 120%;
	color: #63b7da;
	text-align: left; }

	/* ---------- Company Information / EC Commerce Information ---------- */
dl.companyDL, dl.infoCommerceDL {
	width: 1000px;
	margin: 1em auto;
	display: flex;
	flex-wrap: wrap;
	text-align: left; }
dl.companyDL dt {
	display: inline-block;
	width: 20%;
	padding: 8px 16px;
	border-bottom: 1px solid #63b7da;
	vertical-align: top; }
dl.companyDL dd {
	display: inline-block;
	width: 79%;
	padding: 8px 16px;
	border-bottom: 1px solid #63b7da;
	vertical-align: top; }
dl.companyDL dd > ul { list-style: none; }

dl.infoCommerceDL dt {
	display: inline-block;
	width: 25%;
	padding: 8px 16px;
	border-bottom: 1px solid #63b7da;
	vertical-align: top; }
dl.infoCommerceDL dd {
	display: inline-block;
	width: 74%;
	padding: 8px 16px;
	border-bottom: 1px solid #63b7da;
	vertical-align: top; }
dl.infoCommerceDL dd strong { font-weight: bold; }
dl.infoCommerceDL dd > ul { list-style: none; }
dl.infoCommerceDL dd > ul > li { margin-left: 1em; text-indent: -1em; }


	/* ---------- Privacy Policy ---------- */
div#lichaPP { width: 1000px; margin: 0 auto; text-align: left; }
div#lichaPP p.ppIntro { }
div#lichaPP div.ppEstablish { float: right; }
div#lichaPP div#ppBlock { clear: both; overflow: auto; }
div#lichaPP div#ppBlock > dl { margin: 1em 0; }
div#lichaPP div#ppBlock > dl > dt { font-weight: bold; margin-top: 1em; }
div#lichaPP div#ppBlock > dl > dd { }
div#lichaPP div.infoPP { width: 100%; margin: 0.5em 0; background-color: #ededed; border-radius: 3px; padding: 4px 8px; }
div#lichaPP div#ppAboutBlock { }
div#lichaPP div#ppAboutBlock div.ppAboutTitle { font-weight: bold; margin: 1em 0 0.5em 0; font-size: 120%; }
div#lichaPP div#ppAboutBlock p { }
div#lichaPP div#ppAboutBlock > dl > dt { font-weight: bold; margin-top: 1em; }
div#lichaPP div#ppAboutBlock > dl > dd { }
div#lichaPP div#ppAboutBlock > dl > dd > ul { list-style: none; margin: 0; }
div#lichaPP strong { font-weight: bold; }

div#lichaPP div#ppAboutBlock dl.how2PP {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	border-bottom: 1px solid #999999;
	border-right: 1px solid #999999; }
div#lichaPP div#ppAboutBlock dl.how2PP > dt {
	display: inline-block;
	width: 20%;
	font-weight: bold;
	background-color: #eeeeee;
	padding: 8px 16px;
	vertical-align: top;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999; }
div#lichaPP div#ppAboutBlock dl.how2PP > dd {
	display: inline-block;
	width: 80%;
	padding: 8px 16px;
	vertical-align: top;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999; }
ol.privacyOL { margin-left: 1em; }
ul.policyUL2 { margin: 0 1em!important; }
ul.policyUL2 li { list-style: disc; }

	/* ---------- Rule Box ---------- */
div.ruleBox { width: 1000px; text-align: left; margin: 0 auto; }
div.ruleBox > h3 { text-align: center; font-weight: bold; margin: 1em 0; }
div.ruleBox > dl { margin: 1em 0; margin-bottom: 1.5em; }
div.ruleBox > dl > dt { font-weight: bold; font-size: 120%; }
div.ruleBox > dl > dd { }
div.ruleBox > dl > dd > ol { margin-left: 1em; }
div.ruleBox > dl > dd ul { list-style: none; margin-left: 1em; text-indent: -1em; }
div.ruleBox table.ruleTable {
	border: 1px solid #cccccc;
	border-collapse: collapse;
	padding: 3px;
	margin: 8px }

div.ruleBox table.ruleTable th { padding: 3px 6px; background-color: #d9e1f2; text-align: left; font-weight: normal; border:1px solid #cccccc; }
div.ruleBox table.ruleTable td { padding: 3px 6px; text-align: left; font-weight: normal; border:1px solid #cccccc; }

div.ruleBox > div.pw_point_sign { margin-top: 1em; text-align: right; }

	/* ---------- Cooling Off Box ---------- */
div.coolingoffBox { width: 1000px; text-align: left; margin: 2em auto; }
div.coolingoffBox > h3 { text-align: center; font-weight: bold; margin: 1em 0; }

	/* ---------- Inquiry Box ---------- */
dl.inquryDL { width: 1000px; margin: 0 auto; }
dl.inquryDL dt { text-align: left; font-size: 120%; font-weight: bold; color: #123e87; }
dl.inquryDL dd { text-align: left; padding: 8px 0; padding-left: 0.5em; line-height: 200%!important; }
span.inquiryTelNo { font-size: 200%; }

	/* ---------- for Order Page ---------- */
div#contents_area { width: 100%; background-color: #ffffff; text-align: center; margin:0; padding-bottom: 2em; }

/* ---------- Contents Box ---------- */
div#contents_box { width: 980px; margin: 0 auto; }
div#thanx_box { border: 1px solid #ffffff; }

/* ---------- Page Header ---------- */
header#pageHeader {
	width: 100%;
	text-align: center;
	background-color: #ffffff;
	border-top: 5px solid #6eb7da }
div#pageHeadrBox {
	width: 980px;
	margin: 0 auto; }
div#pageLogo {
	background: url("image/clytia_logo.png") no-repeat;
	display: block;
	width: 116px;
	height: 96px; }
div#pageLogo a {
	display: block;
	width: 116px;
	height: 96px; }

div#headerOrderBox {
	display: block;
	float: right;
	margin-right: 2em;
	position: relative;
	top: -60px; }
div#headerOrderBox ul { list-style:none; }
div#headerOrderBox ul li {
	display: inline-block;
	margin-left: 1em; }
div#headerOrderBox ul li a {
	padding: 4px 56px;
	display: block;
	font-size: 120%;
	color: #000000; }
div#headerOrderBox ul li a:hover { text-decoration: none; opacity: 0.7; }
div#headerOrderBox ul li a.headerlink2myPage {
	background-color: #b2d03e;
	border-radius: 15px; }
div#headerOrderBox ul li a.headerlink2Order {
	background-color: #6eb7da;
	border-radius: 15px; }
div#headerOrderBox ul li p.clytia_call_no {
	position: absolute;
	left: -370px;
	top: -10px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	width: 400px;
	height: 48px;
	background-image: url("image/clytia_call_no.png") ;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: contain; }
nav { clear: both; overflow: auto; }
nav.topNavi { }
nav.topNavi > ul { list-style: none; margin-bottom: 1em; }
nav.topNavi > ul > li {
	display: inline-block;
	padding: 0 12px 0 24px ;
	font-size: 120%; }
nav.topNavi > ul > li::after { content: ""; border: 1px solid #8a8a8a; position: relative; left: 12px; }
nav.topNavi > ul > li:first-child { border-left: none; }
nav.topNavi > ul > li > a { color: #000000;  }
nav.topNavi > ul > li > a:hover { text-decoration: none; }
/* IE10-11対応 */
@media all and (-ms-high-contrast: none){
	nav.topNavi > ul > li {
		display: inline-block;
		padding: 0 12px!important ;
		font-size: 120%; }
}
/* Safari対応 */
_::-webkit-full-page-media, _:future, :root nav.topNavi > ul > li {
		display: inline-block;
		padding: 0 12px!important ;
		font-size: 120%;
}
	/* ---------- Navigation Link ---------- */
a.bar_link {
	position: relative;
	padding: 4px 1px;
	display: inline-block;
	transition: .3s; }
a.bar_link::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: "";
	width: 0;
	height: 2px;
	background-color: #6eb7da;
	transition: .3s;
	transform: translateX(-50%); }
a.bar_link:hover::after { width: 100%; }

/* ---------- Form Header ---------- */
header#formHeader {
	width: 100%;
	text-align: center;
	background-color: #ffffff;
	border-top: 5px solid #6eb7da }
div#formHeaderBox {
	width: 980px;
	margin: 2em auto; }
ul.progressbar,
ul.progressbar_clbotk {
	margin: 0 auto;
	padding: 0;
	counter-reset: step;
	z-index: 0;
	position: relative; }
ul.progressbar li {
	list-style-type: none;
	width: 20%;
	float: left;
	font-size: 100%;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	color: #333333; }
ul.progressbar_clbotk li {
	list-style-type: none;
	width: 25%;
	float: left;
	font-size: 100%;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	color: #333333; }
ul.progressbar li:before,
ul.progressbar_clbotk li:before {
	width: 30px;
	height: 30px;
	content: counter(step);
	counter-increment: step;
	line-height: 30px;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: #cccccc; }
ul.progressbar li:after,
ul.progressbar_clbotk li:after{
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	background-color: #aaaaaa;
	top: 15px;
	left: -50%;
	z-index: -1; }
.progressbar li:first-child:after,
.progressbar_clbotk li:first-child:after {
	content: none; }
.progressbar li.active,
.progressbar_clbotk li.active {
	color: #478dc8; }
.progressbar li.active:before,
.progressbar_clbotk li.active:before {
	background-color: #478dc8; color:#ffffff; }

div.areaNote { width: 980px; margin: 0 auto; color: #dc143c; font-size: 120%; font-weight: bold; text-align: left; }
div.taxNote { width: 980px; margin: 0 auto; text-align: left; font-size: 60%; }

div.form_BG { background-color: #fcfcfc!important; }
div.entry_message { font-size: 150%; margin: 1em auto; line-height: 1.5em; }
div.error_message {
	text-align: left;
	padding: 1em;
	background-color: #dc143c;
	color: #ffffff; }
div.note_message { font-size: 120%; margin: 1em auto; }
textarea.WaterFormWarningFrame { width: 100%; height: 7em; background-color: #ffffff; font-size: 80%; padding: 0.5em; margin: 0.5em 0; }

h2.separator_h2 { font-size: 180%; color: #123e87; }

/* ---------- DL Style / order_box ---------- */
dl.entry_dl { text-align: left; margin: 3em 0; }
dl.entry_dl dt {
	font-size: 120%;
	font-weight: bold;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle; }

/* ---------- DL Style / personal_box ---------- */
dl.entry_dl_2 { text-align: left; margin: 1px 0 ; width: 100%; display: flex; flex-wrap: wrap; }
dl.entry_dl_2 > dt {
	display: inline-block;
	font-size: 120%;
	font-weight: bold;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle;
	margin: 0;
	width: 27%;
	background-color: #dddddd;}
dl.entry_dl_2 > dd {
	display: inline-block;
	font-size: 120%;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle;
	margin-left: 3px;
	width: 72%;
	background-color: #efefef;}
/* ---------- DL Style / confirm_box ---------- */
dl.entry_dl_check { text-align: left; margin: 1px 0 ; width: 100%; display: flex; flex-wrap: wrap; }
dl.entry_dl_check > dt {
	display: inline-block;
	font-size: 120%;
	font-weight: bold;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle;
	margin: 0;
	width: 38%;
	background-color: #dddddd;}
dl.entry_dl_check > dd {
	display: inline-block;
	font-size: 120%;
	padding: 0.5em 0 0.5em 0.5em;
	vertical-align: middle;
	margin-left: 3px;
	width: 60%;
	background-color: #efefef;}

/* ---------- DL Style / address_dl ---------- */
dl.address_dl { margin; 0 0 6px 0; padding: 0; }
dl.address_dl > dt { display: inline-block; width: 25%; padding: 0.7em 0; }
dl.address_dl > dd { display: inline-block; width: 65%; }

/* ---------- UL Style / order_box  ---------- */
ul.ul_3column, ul.ul_4column, ul.ul_1column, ul.ul_3column_b, ul.ul_2column { list-style: none; margin: 0; padding: 0; }
ul.ul_3column > li { width: 33%; display: inline-block; text-align: center; }
ul.ul_3column_b > li { width: 33%; display: inline-block; text-align: center; }
ul.ul_4column > li { width: 24%; display: inline-block; text-align: center; }
ul.ul_1column > li { width: 100%; display: inline-block; text-align: left; }
ul.ul_2column > li { width: 49%; display: inline-block; text-align: center; }

/* ---------- UL Style / personal_box ---------- */
ul.select_ul,
ul.name_ul,
ul.company_ul,
ul.select_ul_2 { list-style: none; margin: 0; padding: 0; }
ul.select_ul > li,
ul.name_ul > li,
ul.company_ul > li { display: inline-block; margin-right: 1em; padding: 3px; }
ul.select_ul_2 > li { display: block; }

/* ---------- subscription_day_box / subscription_monthly_box  */
div#subscription_day_box, div#subscription_monthly_box {
	border-radius: 3px;
	border: 1px solid #dddddd;
	width: 95%;
	padding: 0.2em 1em;
	background-color: #f5f5f5;
	margin-right: 4px;
}

strong.require {
	font-size: 80%;
	display: inline;
	vertical-align: top;
	font-weight: normal;
	margin-left: 10px;
	margin-right: 5px;
	background-color: #dc143c;
	color: #ffffff;
	border-radius: 10px;
	padding: 2px 10px; }
strong.optional {
	font-size: 80%;
	font-weight: normal;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #7790d8;
	color: #ffffff;
	border-radius: 2px;
	padding: 1px 5px 1px 5px; }

/* ---------- Card Entry ---------- */
div.ccard_message { margin: 0 auto; padding-top: 2em; }
/* ---------- Input Form ---------- */
input, textarea, select {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-radius: 3px;
	border: 1px solid #cccccc;
	background-color: #fafafc;
	padding: 5px;
	font-size: 100%;
	-webkit-appearance: none; }
input.w_members { width: 97%; margin-left: 0.5em; }
p.p_members { margin: 8px; }

/* radioボタン、checkボタン非表示 / order_box */
input[type="radio"],input[type="checkbox"] { display: none; }
label img { pointer-events: none; }

label.btn_label {
	display: block;
	text-align: center;
	margin: 5px;
	border: 3px solid #e5e5e5;
	border-radius: 3px;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 3em 0 ;
	background-color: #fafafc; }
label.btn_label:hover { border-color: #85abf5; }
label.btn_label:before {
	position: absolute;
	bottom: 1em;
	left: 48%;
	width: 10px;
	height: 10px;
	content: '';
	border: 0.2em solid #cccccc;
	border-radius: 50%; }
input[type="radio"]:checked + label.btn_label { border: 3px solid #0e5186; color: #0e5186; background-color: #ffffff; }
input[type="radio"]:checked + label.btn_label:before {
	position: absolute;
	width: 10px;
	height: 10px;
	content: '';
	border: 0.2em solid #0e5186;
	border-radius: 50%; }

label.btn_label_2 {
	text-align: left;
	margin: 5px;
 	cursor: pointer;
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 0 0 1.5em;
	overflow: hidden; }

label.btn_label_2:before {
	position: absolute;
	top: 0.3em;
	left: 0em;
	width: 10px;
	height: 10px;
	content: '';
	border: 0.2em solid #cccccc;
	border-radius: 50%; }
input[type="radio"]:checked + label.btn_label_2:before {
	position: absolute;
	top: 0.3em;
	left: 0em;
	width: 10px;
	height: 10px;
	content: '';
	border: 0.2em solid #0e5186;
	border-radius: 50%; }

/* ---------- CheckBox ---------- */
	/* ---------- Option Select ---------- */
label.check_label {
	display: block;
	text-align: left;
	margin: 5px;
	border: 3px solid #e5e5e5;
	border-radius: 3px;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 1em 0 ;
	padding-left: 3em;
	background-color: #fafafc; }
label.check_label:hover { border-color: #85abf5; }
label.check_label:before {
	display: block;
	position: absolute;
	top: 1em;
	left: 1em;
	width: 20px;
	height: 20px;
	content: '';
	border: 3px solid #cccccc;
	background-color: #fafafc;
	transition: 0.1s ease-in-out; }
input[type="checkbox"]:checked + label.check_label { border: 3px solid #0e5186; color: #0e5186; background-color: #ffffff; }
input[type="checkbox"]:checked + label.check_label:before {
	transform: rotate(45deg);
	border-color: #0e5186;
	border-top: none;
	border-left: none;
	width: 10px;
	top: 0.8em;
	left: 1.2em;
	background-color: transparent; }

	/* ---------- Campagin Select ---------- */
/* ---------- CheckBox ---------- */
label.check_label_2 {
	text-align: left;
 	cursor: pointer;
	position: relative;
	overflow: hidden;
	padding: 1em 0 ;
	padding-left: 3em; }
label.check_label_2:before {
	display: block;
	position: absolute;
	top: 0.9em;
	left: 1em;
	width: 20px;
	height: 20px;
	content: '';
	border: 3px solid #cccccc;
	background-color: #fafafc;
	transition: 0.1s ease-in-out; }
input[type="checkbox"]:checked + label.check_label_2:before {
	transform: rotate(45deg);
	border-color: #0e5186;
	border-top: none;
	border-left: none;
	width: 10px;
	top: 0.8em;
	left: 1.2em;
	background-color: transparent; }

/* ---------- Submit Button ---------- */
input.submitBtn {
	cursor: pointer;
	font-size: 140%;
	font-weight: bold;
	color: #ffffff;
	padding: 12px 18px;
	border: 3px solid #4590cb;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #4590cb;
	margin: 1em auto;
	letter-spacing: 0.3em; }
input.submitBtn:hover { border-color: #85abf5; background-color: #aec6f6; }

input.submitNGBtn {
	font-size: 140%;
	font-weight: bold;
	color: #ffffff;
	padding: 12px 18px;
	border: 3px solid #cdcdcd;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #dedede;
	margin: 1em auto;
	letter-spacing: 0.3em; }

/* ---------- Submit Card Button ---------- */
input.submitCardBtn {
	cursor: pointer;
	font-size: 140%;
	font-weight: bold;
	color: #ffffff;
	padding: 6px 18px;
	border: 1px solid #4590cb;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #4590cb;
	margin: 1em 0;
	letter-spacing: 0.3em; }
input.submitCardBtn:hover {
	color: #4590cb;
	padding: 6px 18px;
	border: 1px solid #4590cb;
	background-color: #e5eeff; }

/* ---------- Back Button ---------- */
div.formPrevBtn { width: 20%; margin: 1em auto; }
.prevBtn {
	display: block;
	cursor: pointer;
	font-size: 100%;
	color: #000000;
	padding: 6px;
	border: 1px solid #cdcdcd;
	border-radius: 3px;
	-webkit-appearance: none;
	text-decoration: none;
	background-color: #dedede;
	letter-spacing: 0.3em; }
.prevBtn:hover {
	text-decoration: none;
	border: 1px solid #cdcdcd;
	background-color: #cdcdcd; }

/* ---------- Address Auto Input ---------- */
input.supportBtn {
	cursor: pointer;
	font-size: 70%;
	color: #000000;
	padding: 6px 18px;
	border-radius: 3px;
	-webkit-appearance: none;
	background-color: #cdcdcd; }
input.supportBtn:hover { border-color: #dedede; background-color: #dedede; }

/* ---------- Error Check Message ---------- */
span.emes {
	font-size: 100%;
	display: inline-block;
	position: relative;
	padding: 4px 8px;
	background: #000000;
	color: #ffffff;
	text-align: center;
		/* border */
	border-radius: 3px;
 	margin-bottom: 1em;}
span.emes:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
/*	border-color: rgba(220, 20, 60, 0);*/
	border-top-color: #000000;
	border-width: 10px;
	margin-left: -10px;
	margin-bottom: 2em; }

/* ---------- Prev / Next ---------- */
ul.footerLinkUL { list-style: none; width: 80%; margin: 1em auto; }
ul.footerLinkUL li.nextStep {  }
ul.footerLinkUL li.prevStep { text-align: center; }

/* ---------- FOOTER ---------- */
	/* ---------- Pgae Footer ---------- */
footer#pageFooter { background-color: #123e87; width: 100%; }
ul.footerNaviUL { width: 100%; margin: 1em auto; }
ul.footerNaviUL > li {
	width: 33%;
	display: inline-block;
	list-style: none;
	vertical-align: top; }
ul.footerNaviUL > li > ul > li {
	list-style: none;
	margin: 8px 0; }
ul.footerNaviUL > li > ul > li > a { color: #ffffff; }
ul.footerNaviUL > li > ul > li > a:hover { text-decoration: none; }

	/* ---------- Footer Link ---------- */
a.footer_Link {
	position: relative;
	padding: 3px 1px;
	display: inline-block;
	transition: .3s; }
a.footer_Link::after {
	position: absolute;
	bottom: 4px;
	left: 0;
	content: "";
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	transition: .3s;
	opacity: 0; }
a.footer_Link:hover::after { bottom: 0; opacity: 1; }


	/* ---------- Form Footer ---------- */
footer#formFooter { background-color: #123e87; width: 100%; margin-top: -1em; }

div#footer_box, div#pageFooterBox {
	width: 980px;
	margin: 0 auto;
	padding: 0.5em; }

div.go2top { text-align: right; }
div.go2top > p {
	display: inline-block;
	width: 70px;
	height: 70px;
	border-radius: 3px;
	border: 3px solid #1654b7;
	background-color: #1654b7;
	text-align: center; }
div.go2top > p:hover  { border-color: #85abf5; }
div.go2top > p > a {
	text-decoration: none;
	display: block;
	width: 64px;
	height: 64px;
	font-family: "Arial", "Meiryo", sans-serif;
	font-size: 10px;
	line-height: 150%;
	font-weight: bold;
	padding: 16px 3px 4px 2px; }
span.go2t4 { font-size: 200%; }

.selectMessage, .selectMessageCover { color: #ff1100; padding-left: 1em; }

p.acheck_p { text-align: left; margin: 1em auto; }


/* ---------- Float Orde Button ----------*/
div#floatOrderBtn {
	position: fixed;
	width: 160px;
	height: 140px;
	background: url(image/float_order_button.png) 0 0 no-repeat;
	background-size: 100%;
	right: 10px;
	bottom: 100px;
	text-indent: -9999px; }
div#floatOrderBtn a { display: block; width: 160px; height: 140px; }

/* ---------- SP Only ---------- */
div#fixHeaderSpace { display: none; }
div#fixheader { display: none; }
navi.spNavi { display: none; }
div#fixFooterSpace { display: none; }
div#fixFooter { display: none; }

/* ---------- Shipping Table ---------- */
div.shippingTable { margin-top: -2em; }
div.shippingTable > h4 { font-size: 100%; text-align: left;}
div.shippingTable > table { width: 100%; border: 1px solid #cccccc; border-collapse: collapse; font-size: 80%; line-height: 1.3em; }
div.shippingTable > table th { vertical-align: middle; background-color: #eaeaea; border: 1px solid #cccccc; padding: 8px 0; }
div.shippingTable > table td { border: 1px solid #cccccc; padding: 8px 0; }
div.shippingTable > table td.freeCell { background-color: #ffff00; }
div.shippingTable > table td.noService { background-color: #666666; }

/* ---------- Otokuna Hikari Collabo ---------- */
div.otk_blk {
	width: 90%;
	text-align: center;
	margin: 1em auto 3em; }
div.otk_blk > h3 {
	padding-bottom: 10px;
	font-size: 160%;
	color: #28a95a;
	background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
	background-size: 4px 4px;
	background-repeat: repeat-x;
	background-position: center bottom; }
div.otk_blk > p {
	font-size: 110%;
	line-height: 1.5em;
	margin: 1em 0;
	padding: 8px 8px;
	text-align: left; }

/* ---------- Otokuna + Clytia Set ---------- */
.access_error_message {
	font-size: 1.2rem;
	line-height: 150%;
	padding: 2em 0 10em; }
.access_error_message a { color: #6da3fe; }
table.isp_clytia_table { width: 90%; margin: 0 auto; margin-bottom: 2rem; border-collapse: collapse; color: #666666; }
table.isp_clytia_table th { border: 1px solid #b0a884; background-color: #fafafa; }
table.isp_clytia_table td { border: 1px solid #b0a884; background-color: #ffffff; text-align: right; padding-right: 2.2rem; }
table.isp_clytia_table th.noBorder { border-top: none!important; border-left:none!important; background-color: #ffffff; }
table.isp_clytia_table th.cp_0 { background-color: #e0e0e0; }
table.isp_clytia_table th.cp_1 { background-color: #f9d6da; font-weight: 600; color: #e43e50; }
table.isp_clytia_table td.cp_2 { font-weight: 600; color: #e43e50; }
.clytia_bold { font-weight: 600; }