/*共通*/
body {
	background-image: url("../img/back.png") !important;
	background-color: #fff !important;
	font-size: 16px;
	letter-spacing: 0.1em;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
	color: #000 !important;
}
section div {
    max-width: 900px;
    margin: 0 auto;
	padding: 3em 0;
	text-align: center;
}
a {
    text-decoration: none;
}
h2 {
	font-size: 2.5em;
	font-weight: 400;
	letter-spacing: 0.2em;
}

/*head*/
#animate {
	animation-duration: 2s; /* アニメーションの時間 */
	animation-delay: 0.5s; /* アニメーション開始時間 */
    font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 100;
	font-size: 30px;
	margin-bottom: 1em;
}
div.head {
    background-color: #DCF8FF;
	color: #000;
    height: 705px;
}
div.head div.head-wrap {
	display: flex;
    margin: 0 auto;
    max-width: 900px;
	justify-content: center;
}
div.head-content {
	text-align: center;
}
.head div .small {
	display: block;
	font-size: 2em;
	line-height: 1.5em !important;
}
.head div .middle {
	display: block;
	font-size: 2.5em;
	white-space: nowrap;
	line-height: 1.5em !important;
}
.head div .large {
	font-size: 4.9em;
	line-height: 1.3em !important;
}
img.head-logo {
    display: block;
	margin: 0 auto;
}
.head-content > div > p {
	font-family: 'Sawarabi Mincho', sans-serif;
}
.head-image-warp {
	display: grid;
}
.head-image1,
.head-image2{
	display: block;
}
.sizuku {
	position: relative;
	z-index: -1;
	color: #fff;
}
.sizuku::before {
	position: absolute;
	display: inline-block;
	width: 190px;
	height: 270px;
	content: "";
	background-image: url(../img/sizuku.png);
	background-size: cover;
	z-index: -1;
	top: -76px;
	left: -23px;
}
/*head(END)*/



/*お悩みチェック*/
section.check {
	text-align: center;
}
.check h2 {
	background: linear-gradient(transparent 60%, #DCF8FF 50%);
	display: inline-block;
	margin-bottom: 0.3em;
}
.check div h2 + p {
	margin: 0;
}
ul.check-list{
	border: 1px #000 solid;
	display: table;
    list-style: none;
	margin: 3em auto;
	padding: 1.5em 1.5em 1.5em 3em;
	position: relative;
	text-align: left;
	width: 80%;
}
ul.check-list::before {
	content: url("../img/check.png");
	left: 40%;
	position: absolute;
	top: -25px;
}
ul.check-list > li:nth-child(2n+1) {
	clear: both;
}
ul.check-list > li {
	display: table-cell;
	float: left;
	padding: 0.5em 0;
	width: 50%;
	white-space: nowrap;
}
.check-list li::before {
	content: url("../img/check01.png");
}
a.purchase {
    background-color: #34bcea;
    color: #FFF;
	font-size: 1.3em;
	letter-spacing: 0.3em;
	padding: 0.5em 1.5em;
	position: relative;
	bottom: -20px;
}
a.purchase:hover {
	background-color: #0081ad;
}
.purchase::after {
	content: url("../img/awa.png");
	position: absolute;
	right: 0;
	top: 5px;
}
.purchase:hover::after {
	animation: rumble 0.32s linear infinite;
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
.dot{
	position: relative;
}
.dot::before {
	position: absolute;
	content: "・";
	color: #00CCFF;
	font-size: 2em;
	left: -48%;
	top: -40px;
}
.check-color {
	color: #00CCFF;
}
.check-under {
	background: linear-gradient(transparent 60%, #F6FF43 50%);
}
.check div > p:last-child {
	font-size: 2em;
	position: relative;
}
.check div > p:last-child::after {
	content: url("../img/line.png");
	left: 0;
	position: absolute;
	right: 0;
	top: 200%;
}
/*お悩みチェック(END)*/


/*プロモーション*/
section.prom {
	background: #F5F5F5;
}
div.slanting {
	position: relative;
	padding: 3em 1em;box-sizing: border-box;
	text-align: center;
}
.slanting > img {
	position: relative;
	right: -4%;
}
div.slanting::before {
	content: url("../img/line.png");
	left: 0;
	position: absolute;
	right: 0;
	top: 98%;
}
div.slanting h2{
	transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
}
.slanting h2 span {
	display: block;
	font-size: 16px;
	letter-spacing: 0.2em;
	position: relative;
}
.video {
	height: 0;
	margin: 2.5em 0 3em;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
}
.video iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
/*プロモーション(END)*/



/*選ばれる理由*/
.reason h2 .check-color {
	font-size: 2em;
	font-family: 'Sawarabi Mincho', sans-serif;
}
.border {
	border: 1px #000 solid;
	padding: 2em 3em 1.5em;
}
.point {
	padding: 3em 0;
	position: relative;
}
.point::before {
	background-color: #000;
	content: '';
	font-family: 'Sawarabi Mincho', sans-serif;
	font-size: 1.3em;
	height: 1.5em;
	left: 3%;
	position: absolute;
	top: 6%;
	transform: rotate(-6deg);
	width: 7em;
	-moz-transform: rotate(-6deg);
	-webkit-transform: rotate(-6deg);
}
#point1::before {
	content: 'Point１';
	color: #fff;
	top: 6%;
}
#point2::before {
	content: 'Point２';
	color: #fff;
}
#point3::before {
	content: 'Point３';
	color: #fff;
}
#point4::before {
	content: 'Point４';
	color: #fff;
}
.point div h3 {
	background: linear-gradient(transparent 60%, #F6FF43 50%);
	display: inline-block;
	font-size: 2em;
	font-weight: 400;
	margin: 0 0 0.5em 0;
}
.point div > p {
	line-height: 1.5;
	text-align: left;
}
.off-text {
	text-align: center !important;
}
small {
	display: inline-block;
	font-size: 1em;
	margin: 0;
	text-align: left;
}
.flex {
	display: flex;
	padding: 1em 0 0;
}
img.point1-image {
	display: block;
	height: auto;
	max-width: 72%;
	padding: 0 0 0 2em;
}
#point1 .flex > p {
	align-items: center;
	color: #fff;
	background: #919191;
	display: flex;
	font-size: 16px;
	height: 6.8em;
	margin: 1.7em 0;
	padding: 0 1em;
	position: relative;
	text-align: center;
	white-space: nowrap;
}
#point1 .flex > p::before {
	content: "";
	position: absolute;
	top: 15%;
	left: 99%;
	border: 15px solid transparent;
	border-left: 15px solid #919191;
	padding: 0 1em;
	white-space: nowrap;
	margin: 1.8em 0;
}
#point1 .border > p,
#point2 .border div,
#point3 .border div{
	display: flex;
	padding: 1.5em 0 0;
}
#point4 .border div {
	display: flex;
	padding: 1.5em 1.5em 0;
}
.point2-image {
	display: block;
	height: 280px;
	margin-left: 1.5em;
}
#point2 div > p,
#point3 div > p{
	margin-right: 0;
}
.point3-image {
	display: block;
	height: 280px;
	margin-left: 1.5em;
	width: 300px;
}
.point4-image,
.point5-image {
	display: block;
	max-height: 155px;
}
#point4 div > h3 {
	display: inline-block;
	margin-bottom: 16px;
}
#point4 div > p {
	margin: 0;
}
.vertical-align_middle{
	display: table;
}
.center-parent {
	background: #919191;
	box-sizing: border-box;
	color: #FFF;
	height: 6em;
	margin: 1.8em;
	padding-left: 2.2em !important;
	position: relative;
	width: 100%;
}
.center-parent-sp {
	display: none;
}
.center-parent::before {
	border: 15px solid transparent;
	border-left: 15px solid #919191;
	content: "";
	left: 99%;
	margin: 1.8em 0;
	padding: 0 1em;
	position: absolute;
	top: 10%;
}
.center-parent .large {
	display: contents;
	font-size: 2.3em;
	line-height: 1;
}
/*選ばれる理由(END)*/


/*プロモーション2*/
section.prom2 {
	background-color: #b6f1ff;
	color: #000;
	padding: 3em 0 1.5em;
}
section.prom2-wp {
	display: none;
}
img.prom2-logo {
	margin-bottom: 2em;
}
.prom2 .flex > div {
	padding: 0;
}
.prom2-text span.dot {
	font-size: 2em;
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 100;
}
img.prom2-image {
	padding: 7em 0 7em;
}
span.prom2-large {
	font-size: 4em;
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 100;
}
span.prom2-small {
	font-size: 2.5em;
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight: 100;
	position: relative;
}
span.prom2-small::before{
	bottom: -40%;
	content: "（税別）";
	color: #000;
	display: inline-table;
	font-size: 45%;
	position: absolute;
	right: 45%;
}
a.prom2-btn{
	color: #fff;
	background-color: #34bcea;
	display: block;
	line-height: 1.1;
	position: relative;
	padding: 0.8em 5em 0.2em;
}
a.btn-tel {
	margin: 0 auto 1.5em;
}
.yellow-text {
	color: #ff4545;
	font-size: 1.1em;
	letter-spacing: 0.14em;
	margin: 3em auto 0.5em;
}
a.btn-tel::before{
	content: url("../img/tel.png");
	left: 10%;
	position: absolute;
	top: 32%;
}
a.btn-tel::after{
	content: url("../img/awa.png");
	bottom: -3px;
	position: absolute;
	right: 3px;
}
a.btn-cart {
	font-size: 1.5em;
	letter-spacing: 0.2em;
	padding: 0.8em 5em 0.6em;
	margin-bottom: 1em;
}
.btn-cart:hover {
	background-color: #0081ad;
}
a.btn-cart::before{
	content: url("../img/cart.png");
	left: 10%;
	position: absolute;
	top: 22%;
}
a.btn-cart::after{
	content: url("../img/awa.png");
	bottom: -6px;
	position: absolute;
	right: 3px;
}
a.btn-tel span.large {
	display: block;
	font-size: 2em;
}
/*プロモーション2(END)*/


/*アプローチ*/
p.approach-desc {
	line-height: 2;
	text-align: left;
}
div.approach-flex {
	display: flex;
	padding: 3em 0 3em;
}
p.label {
	background-color: #34bcea;
	color: #fff;
	font-size: 1.3em;
	margin: 0;
	padding: 0.2em 0;
}
.approach-image {
	display: block;
	height: 160px;
}
.approach-flex div {
	padding: 0;
}
.approach-flex > p {
	line-height: 2;
	margin: 0;
	padding-left: 1.5em;
	text-align: left;
}
/*アプローチ(END)*/


/*よくあるご質問*/
section.question {
	background: #F5F5F5;
	position: relative;
}
.question div h2::before {
	content: url("../img/line.png");
	left: 0;
	position: absolute;
	right: 0;
	top: -21px;
}
.detail div {
	text-align: left;
}
.question div > p {
	line-height: 2;
	margin: 0;
	padding-bottom: 2.5em;
	text-align: left;
}
/*よくあるご質問(END)*/


/*詳細*/
.detail div > p {
	line-height: 2;
	margin: 0;
	padding-bottom: 2.5em;
}
/*詳細(END)*/


/*footer*/
section.footer {
	background-color: #DCF8FF;
	color: #000;
}
.footer div {
	padding: 2em 0 1em;
}
.footer address {
	text-align: left;
}
.footer address > p {
	line-height: 2;
	margin: 0;
}
.copy-rights {
	margin: 2.5em 0 0 0;
}
/*footer(END)*/


/*お問い合わせ(フォーム、確認、送信)*/
.contactForm-head {
	background-color: #040000;
}
.contactForm div > h1 {
	display: inline-block;
	font-size: 2.5em;
	font-weight: 400;
	letter-spacing: 0.2em;
}
.contactForm div > p,
.contactForm div > form {
	text-align: left;
}
.contactForm-wrap-desc {
	line-height: 2;
	margin-bottom: 3em;
}
p.contactForm-wrap-center {
	margin: 5em auto;
}
.warning {
	background-color: red;
}
.parent {
	border-top: 1px #000 solid;
	display: table;
	padding: 0;
	text-align: left;
	width: 100%;
	font-size: 1em;
}
.last-parent {
	border-bottom: 1px #000 solid;
}
.left {
	background-color: #d4d4d4;
	display: table-cell;
	padding: 1em 0.8em;
	width: 30%;
}
.right {
	box-sizing: border-box;
	display: table-cell;
	font-size: 0.9em;
	height: 2em;
	margin-left: 0.8em;
	padding: 0.8em;
	width: 100%;
}
.right2 {
	max-width: 46.5% !important;
	width: 100%;
	margin-bottom: 8px !important;
	margin-top: 8px !important;
}
input#contact_name_name01,
input#contact_kana_kana01{
	margin-left: 0.8em;
}
input#contact_email,
textarea#contact_contents{
	margin-bottom: 8px !important;
	margin-top: 8px !important;
}
.radioStyle {
	height: auto;
	width: auto;
}
.contactForm div .radio > p {
	margin: 1em 0.8em;
}
.parent textarea{
	height: 15em;
	vertical-align:top;
	font-family: auto;
	margin-bottom: 1em;
	resize: inherit;
}
.parent > textarea.right {
	margin-left: 0.8em;
	margin-bottom: 1em;
}
.conf-btn {
	background-color: #b1b1b1;
	border: none;
	color: #fff;
	font-size: 1.2em;
	max-width: 400px;
	padding: 0.4em;
	width: 100%;
}
.submit {
	background-color: #00CCFF;
	border: none;
	color: #fff;
	font-size: 1.2em;
	max-width: 400px;
	padding: 0.4em;
	width: 100%;
}
.submit:hover {
	background-color: #009ac1;
}
div.btn-wrap {
	display: flex;
	justify-content: space-between;
}
button.back-btn {
	background-color: #fff;
	border: 2px #00CCFF solid;
	margin-right: 0.5em;
	color: #00CCFF;
}
button.back-btn:hover {
	background-color: #00CCFF;
	color: #fff;
}
span.required {
	color: #ff0505;
	font-size: 0.9em;
	padding-left: 0.3em;
}
a.sp-tel {
	text-decoration: underline;
}
.agreement {
	border: 1px #a9a9a9 solid;
	margin: 3em 0 0;
	padding: 1em;
}
.agreement > p.agreement-text {
	margin-bottom: 2em;
	font-size: 0.8em;
}
.agreement > p:first-child {
	font-weight: 800;
	text-decoration: underline;
}
.annotation {
	text-align: left;
	display: block;
	font-size: 0.8em;
	line-height: 1.5;
	margin: 1em 0;
}
#num {
	height: 35px;
	text-align: right;
	width: 22%;
}
span.destination {
	display: none;
	margin: 0.5em 1em;
}
.text-under {
	text-decoration: underline;
}
.text-under:hover {
	color: #00b9ff;
}
#receipt-text {
	width: 100%;
	padding: 0.4em;
}
a.back-btn {
	margin-right: 0.5em;
	display: block;
}
ul > .faxList {
	text-align: left;
	font-size: 0.9em;
}
ul > .faxList > span a:first-child {
	padding-left: 1em;
}
ul > .faxList > span a {
	margin: 0 0.5em;
}
dd {
	margin: 0;
}
.ec-errorMessage {
	color: #e60000;
	font-size: 0.8em;
	padding-left: 1em;
	margin: 0.5em;
}
.productR {
	padding-left: 0.8em;
	padding-bottom: 0.7em;
}
.contactFormDesc {
	padding: 2em 0;
	font-size: 17px;
}
/*お問い合わせ(フォーム、確認、送信)END*/


/*バスタブ*/
.bath-wrap {
	margin-top: 4em;
	position: relative;
	padding: 3em 1em;
}
.bath-wrap > h2 {
	display: inline-block;
}
.bath-wrap > p.bathC {
	font-size: 1.5em;
	font-weight: 400;
	margin: 0;
}
.bath-video {
	border: 1px #000 solid;
	margin: 3em 0;
	padding: 3em 2.5em;
}
.bath-video > p {
	line-height: 2em;
	padding-bottom: 2em;
	text-align: left;
}
div.bath-wrap .bath-video > h2 {
	background: linear-gradient(transparent 60%, #F6FF43 50%);
	display: inline-block;
	font-size: 2em;
	font-weight: 400;
	margin: 0 0 0.5em 0;
	text-align: center;
}
.bath-video > div.bath-flex {
	display: flex;
	justify-content: space-between;
	padding: 0;
}
.bath-video > div.bath-flex iframe {
	width: 560px;
	height: 220px;
}
.bath-video > div.bath-flex iframe:last-child {
	margin-left: 2em;
}
div.bath-wrap > img {
	position: absolute;
	right: 4%;
	top: 0;
}
/*バスタブEND*/


/*追従ボタン*/
.following {
	display: none;
}
/*追従ボタンEND*/

/*戻るボタン*/
.pagetop {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 15px;
}
.pagetop a {
	display: block;
	background-color: #ccc;
	text-align: center;
	color: #222;
	font-size: 3em;
	text-decoration: none;
	padding: 5px 10px;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.pagetop a:hover {
	background-color: #b2d1fb;
	color: #fff;
}
/*戻るボタンEND*/

/**/
.fixed {
    position: fixed;
}
#page_homepage > .ec-headerNaviRole > .ec-headerNaviRole__right {
	right: 15px;
	display: none;
	position: fixed;
	top: 10px;
	z-index: 100000;
}
.ec-headerNaviRole__nav {
	background-color: #ffabab;
	padding: 5px 0 6px;
	z-index: 100;
}
.ec-headerRole__cart {
	background: #ffabab;
	padding: 2.8px 17px 2.8px 0;
	z-index: 100;
}
.ec-cartNaviIsset {
	background: #ffabab !important;
}
.ec-cartNaviIsset::before {
	border-color: transparent transparent #ffabab transparent !important;
}

.productR > label > span {
	display: none;
}
.ec-zipInput .p-postal-code,
.ec-telInput #contact_phone_number{
	margin: 0;
}
.ec-zipInput {
	margin: 0.8em 0.8em 0;
}
.ec-select,
.ec-input,
.ec-telInput{
	margin: 0.8em;
}
.ec-zipInput .p-postal-code,
.ec-input .p-locality,
.ec-input .p-extended-address,
.ec-telInput #contact_phone_number{
	height: 26px;
}
.p-locality,
.p-extended-address{
	max-width: 96%;
}
#contact_email {
	max-width: 110%;
}
#contact_email,
#contact_contents,
#contact_remarks{
	margin: 0;
}
.ec-input > #contact2_remarks {
	margin-left: 0;
}
.ec-halfInput > #contact2_name_name01,
.ec-halfInput > #contact2_kana_kana01{
	margin-left: 0.8em;
}

a[href^="tel:"] {
	pointer-events: none;
}