@charset "UTF-8";

/*
Theme Name: ミラブル
Description: 
Author: 
Author URI: 
Version: 1
*/

html{width:100%;height:100%;}body,div{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}
q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

html,body { width:100%; color:#333333; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
.cf { zoom: 1; } .cf:before,.cf:after { content: ""; display: table; } .cf:after { clear: both; }

/* ------------------------------小見出し属性------------------------------　*/
h1 , h2 ,h3 ,h4 ,h5 { margin:0; padding:0; line-height:1.7; font-weight:normal; }
h1 { font-size:40px; }
h2 { font-size:40px; margin:0 0 40px 0; line-height:1; }
h2 img { margin:0 auto; }
h3 { font-size:30px; margin:0 0 40px 0; }
h4 { font-size:20px; text-align:left; }

@media screen and (max-width:768px){
	h2 { font-size:36px; margin:0 0 40px 0; }
	h3 { font-size:18px; }
	h4 { font-size:16px; }
}

/* ------------------------------コンテンツエリア------------------------------　*/
p { font-size:20px; margin:0; padding:0; line-height:1.7; display:block; }
a { text-decoration:none; }
a:hover,a:active { text-decoration:none; }
ul { margin:0; padding:0; }
li { margin:0; padding:0; }
i { padding-right:6px; }
img { max-width:100%; height:auto; display:block; }
img.center,.aligncenter { margin:0 auto; display:block; }
img.left { float:left; margin:0 30px 30px 0; }
img.right { float:right; margin:0 0 30px 30px; }
img.photo00 { background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-left { transform:rotate(-4deg); -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-right { transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
.bold { font-weight:bold; }
.underline { text-decoration:underline; font-weight:bold; }
.red { color:#ff0000; font-weight:bold; }
.red_underline { background:linear-gradient(transparent 60%, #ff9999 60%); }
.yellow { color:#000000; font-weight:bold; background:linear-gradient(transparent 60%, #ffff00 60%); }
.center { text-align:center; }
.big { font-size:20px; line-height:150%; }
.ma00 { margin-top:0 !important; }
.ma10 { margin-top:10px !important; }
.ma20 { margin-top:20px !important; }
.ma30 { margin-top:30px !important; }
.ma50 { margin-top:50px !important; }
.ma70 { margin-top:70px !important; }
.ma100 { margin-top:100px !important; }
.space { padding:50px 0 0 0; }
.space100 { padding:100px 0 0 0; }
.align_left { text-align:left; }
.align_right { text-align:right; }
.align_center { text-align:center; }

@media screen and (max-width:768px){
	p { font-size:14px; }
	img.left , img.right  { float:none; margin:0 auto 20px auto; display:block; }
	img.left_sm { float:left; }
	.big { font-size:16px; }
}

.pc { display:block!important; }
.sp { display:none!important; }
@media screen and (max-width:768px){
	.pc { display:none!important; }
	.sp { display:block!important; }
}

/* ------------------------------ヘッダー部分------------------------------　*/
html { overflow:auto; }

@media screen and (max-width:1000px){
	body { width:1000px; }
}

@media screen and (max-width:768px){
	body { width:100%; background:none; }
}

/* ------------------------------ヘッダー------------------------------　*/
header#index { width:100%; height:830px; background:url(img/header210105.png) no-repeat 50% 0; background-size:1600px 830px; }
header#index ul { position:relative; width:1000px; height:auto; margin:0 auto; padding:0; }
header#index ul.logo_area { position:relative; }
header#index ul.logo_area li { position:absolute; }
header#index ul.logo_area li:nth-child(1) { top:20px; }
header#index ul.logo_area li:nth-child(2) .description { margin:32px 0 0 280px; font-size:10px; }

@media screen and (max-width:768px){
	header#index { background:none; height:auto; }
	header#index #inner { width:100%; height:auto; padding-top:50px; }
	header#index ul.logo_area li { display:none }
}

/* ------------------------------グローバルナビゲーション------------------------------　*/
nav#header-nav { clear:both; width:100%; height:40px; margin:0 auto; padding:0; z-index:999; background:#333333; }
nav#header-nav ul { position:relative; width:1000px; margin:0 auto; padding:0; }
nav#header-nav ul li { list-style:none; width:16.66%; height:40px; float:left; margin:0; padding:0; text-align:center; display:table; }
nav#header-nav ul li:first-child {  }
nav#header-nav ul li a{ width:100%; height:40px; color:#ffffff; display:block; margin:0; padding:0; font-size:12px; line-height:150%; display:table-cell; vertical-align:middle;}
nav#header-nav ul li a:before { padding-right:5px }
nav#header-nav ul li a:hover{ text-decoration:none; }

/* ------------------------------グローバルナビゲーション（モバイル）------------------------------　*/
#check-menu,#btn-menu { display:none; }
.logo_sp { display:none; }
@media screen and (max-width:768px){
	.logo_sp { display:block; position:absolute; top:20px; left:10px; width:200px; }
	nav#header-nav { background:rgba(0,0,0,0.6); width:100%; height:auto; margin:0; position:fixed; top:0; display:block; }
	nav#header-nav a { text-decoration:none; }
	input[type="checkbox"]#check-menu:checked + #btn-menu { width:60px; height:60px; background:url(images/mobile.svg) no-repeat; }
	input[type="checkbox"]#check-menu:checked ~ #menu-nav { display:block; }
	#btn-menu { width:60px; height:60px; display:block; background:url(images/mobile.svg) no-repeat; color:#ffffff; float:right; }
	#menu-nav { display:none; list-style:none; }
	nav#header-nav ul { width:100%; background:none; top:60px; left:0; }
	nav#header-nav ul li { width:50%; text-shadow:none; border:none; padding:0; text-align:left; padding:0; }
	nav#header-nav ul li:last-child { width:50%; }
	nav#header-nav ul li a { display:block; height:50px; background:rgba(0,0,0,0.6); color:#ffffff!important; padding:15px 20px 0  20px; font-size:12px; }
	nav#header-nav ul li a:before { content:none; padding-right:0; }
	nav#header-nav ul li a:hover { background:rgba(0,0,0,0.8); border:none; }
	nav#header-nav ul li a:before { font-family:"Font Awesome 5 Free"; font-weight:900; padding-right:10px; }
	nav#header-nav ul li:nth-child(1) a:before { content:'\f015'; }
	nav#header-nav ul li:nth-child(2) a:before { content:'\f0c0'; }
	nav#header-nav ul li:nth-child(3) a:before { content:'\f0cb'; }
	nav#header-nav ul li:nth-child(4) a:before { content:'\f03e'; }
	nav#header-nav ul li:nth-child(5) a:before { content:'\f1ad'; }
	nav#header-nav ul li:nth-child(6) a:before { content:'\f0e0'; }
	nav#header-nav ul li:nth-child(5) { padding-bottom:10px; }
	nav#header-nav ul li:nth-child(6) { padding-bottom:10px; }
	#btn-menu:hover, #menu-nav li a:hover { background:url(images/mobile.svg) no-repeat; }
}

/* ------------------------------共通------------------------------　*/
article { width:100%; background:#ffffff; }
section { width:1000px; margin:0 auto; padding:70px 0; }

@media screen and (max-width:1000px) {
	section { width:1000px; }
}
@media screen and (max-width:768px) {
	article { width:100%; }
	section { width:94%; padding:30px 0; }
}

section img { margin:0 auto; }

.opening section { padding-top:0; padding-bottom:30px; }

@media screen and (max-width:768px) {
	.opening .ma50 { margin-top:30px!important; }
}
.opening02 { background:url(img/opening02_bg.png) repeat-x 50% 0; }
.opening03 section { padding-top:30px; }


.demonstration { background:url(img/demonstration_bg.png) repeat-x 50% 0; }

.demonstration .tv { width:100%; height:682px; background:url(img/tv.png) no-repeat 50% 0; padding:35px 0 0 40px; }
.different .tv { width:100%; height:682px; background:url(img/tv.png) no-repeat 50% 0; padding:35px 0 0 40px; }
.demonstration .tv iframe { width:920px; height:517px }
.different .tv iframe { width:920px; height:517px }
@media screen and (max-width:768px) {
	.demonstration .tv { width:100%; height:auto; background-size:contain; padding:3.5% 4% 25% 4%; }
	.demonstration .tv iframe { width:100%; height:100%; }
	.different .tv { width:100%; height:auto; background-size:contain; padding:3.5% 4% 25% 4%; }
	.different .tv iframe { width:100%; height:100%; }
}

.video iframe { width:100%; height:500px; }
@media screen and (max-width:768px){
	.video { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:0; }
	.video iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
}

/* ------------------------------今すぐボタン------------------------------　*/
.cta {  }
.cta section { }
.cta .box { margin:0 auto; border:10px solid #333333; padding:30px 30px 50px 30px; margin:0 0 50px 0; }

.note { background:#f7f7f7; width:100%; margin:50px auto 0 auto; padding:0 0 30px 0; overflow:hidden; }
.note h3 { color:#ff0000; font-weight:bold; text-align:center; margin:50px 0 20px 0; font-size:36px; }
.note li { margin:0px 50px; font-size:16px; font-weight:bold; }
.note p { font-size:18px; margin:30px 50px; }

@media screen and (max-width:768px){
	.cta .box { width:100%; border:6px solid #333333; padding:10px; margin:0 0 30px 0 }

	.note h3 { margin:50px 0 20px 0; font-size:20px; }
	.note p { margin:30px 15px; font-size:16px; }
}

.point { background:#eef5fb url(img/point_bg.png) repeat-x 50% 0; }
.point .box { width:90%; background:#ffffff url(img/point_box_bg.png) no-repeat 50% 100%; border-top:6px solid #2fb0ca; padding:30px 60px 60px 60px; box-shadow:0 0 10px rgba(22,73,81,0.3); margin:60px auto 0 auto; }
.point .box h3 { border-bottom:1px #333333 dotted; }
.point .box p img { margin-top:50px; }
.point .box .discription { border:1px #cccccc solid; background:#ffffff; margin-top:50px; }
.point .box .discription p { font-size:14px; padding:30px 30px 10px 30px; color:#666666; }
.point .box ul { width:100%; margin:30px auto 0 auto; }
.point .box li:nth-child(1) { width:48%; float:left; }
.point .box li:nth-child(2) { width:48%; float:right; }
.point .box li p { font-size:16px; }

@media screen and (max-width:768px){
	.point .box { width:100%; border-top:4px solid #2fb0ca; padding:30px 15px 60px 15px; margin:30px auto 0 auto; }
	.point .box .discription p { font-size:12px; padding:30px 15px 10px 15px; color:#666666; }
.point .box li:nth-child(1) { width:100%; float:none; margin-bottom:30px; }
.point .box li:nth-child(2) { width:100%; float:none; }
.point .box li p { font-size:14px; }

}

.different section { padding:0 0 60px 0; }
@media screen and (max-width:768px){
	.different section { padding:0 0 30px 0; }
}

.interview section { padding:0; }
.interview h2 { margin-bottom:30px; }
@media screen and (max-width:768px){
	.interview h2 { margin-bottom:10px; }

}


.bonus section { padding-bottom:0; }
.bonus li:nth-child(1) { margin-top:60px; }
.bonus li { margin-bottom:100px; }
@media screen and (max-width:768px){
	.bonus section { padding:0; }
	.bonus li:nth-child(1) { margin-top:0px; }
	.bonus li { margin-bottom:30px; }
}

.cart ul {  }
.cart h2 { margin-bottom:10px }
.cart ul li:nth-child(1) { width:100%; border:10px solid #333333; padding:30px; margin-bottom:50px; }
.cart ul li:nth-child(2) { width:100%; border:10px solid #333333; padding:30px; margin-bottom:50px; }
.cart ul li:nth-child(3) { width:100%; border:10px solid #b6272d; padding:30px; }

@media screen and (max-width:768px){
	.cart p.center br { display:none }
	.cart ul li:nth-child(1) { width:100%; border:6px solid #333333; padding:30px 10px; margin-bottom:30px; }
	.cart ul li:nth-child(2) { width:100%; border:6px solid #333333; padding:30px 10px; margin-bottom:30px; }
	.cart ul li:nth-child(3) { width:100%; border:6px solid #b6272d; padding:30px 10px; }
}

input[type="submit"] { 
	width:50%!important;
	height:100px!important;
	font-weight:bold;
	font-size:20px!important;
	box-shadow: 0 6px 0px #279338!important;
	background: -moz-linear-gradient(top, #7ec594, #31ad37)!important;
	background: -webkit-linear-gradient(top, #7ec594, #31ad37)!important;
	background: linear-gradient(to bottom, #7ec594, #31ad37)!important;
	/*グラデーション以外は省略*/
	border: 1px solid #7ec594!important;
	text-shadow: 0 -1px #31ad37!important;
}

@media screen and (max-width:768px){
	input[type="submit"] { width:100%!important; }
}


/* ------------------------------アコーディオン------------------------------　*/
dl.accordion , .accordion dt, .accordion dd { margin:0; padding:0; }
dl.accordion { margin:20px 0; padding-bottom:20px; border-bottom:1px dotted #057980; }
.accordion dt { display:block; width:100%; height:auto; line-height:1.4; cursor:pointer; margin:0; font-size:20px; color:#278da3; font-weight:bold;  }
.accordion dt:after { font-family:"Font Awesome 5 Free"; content:'\f107'; font-weight:900; float:right;margin:10px 0 0 0; }
.accordion dt.close { box-shadow:none }
.accordion dt.close:after { content:'\f106'; }
.accordion dd { width:100%; height:auto; display:none; margin:0; padding:30px 0 10px 0; }
.accordion dd p { color:#000000; }
.accordion dd img { border-radius:20px; border:3px solid #000000; box-shadow:6px 6px rgba(0,0,0,0.3); margin:0 0 30px 0;}
.accordion br { display:inline; }
.accordion dt:before { content:'Q.'; font-size:30px; margin-right:20px; }
.accordion dd:before { content:'A.'; font-size:30px; margin-right:20px; color:#057980; font-weight:bold; }

@media screen and (max-width:768px){
	dl.accordion { font-size:14px; }
	.accordion dt { font-size:16px; }
	.accordion dt:before { font-size:20px; margin-right:10px; }
	.accordion dd:before { font-size:20px; margin-right:10px; }
	.accordion dd p { font-size:14px; }
}

.text {  }
.text h2 { font-size:20px; font-weight:bold; text-align:center; background:#278da3; color:#ffffff; padding:30px 15px; line-height:1.7; }
.text h3 { font-size:16px; font-weight:bold; margin:30px 0 10px 0; color:#278da3; }
.text p { font-size:14px; }
.text li { font-size:14px; }
.text li:before { content:"●"; }
.text table { font-size:14px; width:100%; }
.text table tr { border-bottom:1px dotted #333333; }
.text table tr th { padding-right:30px; padding:10px 0; width:20%; }
.text table tr td { padding:10px 0; width:80%; }

@media screen and (max-width:768px){
	.text h2 { font-size:14px; padding: 15px; }
	.text h3 { font-size:14px; margin:30px 0 0 0; }
	.text table { font-size:12px; }
	.text p { font-size:12px; }
	.text li { font-size:12px; }

}


dl.form dl,dt,dd {margin:0; padding:0; }
dl.form{ width:100%; }
dl.form dt,dd { padding:20px 0; }
dl.form dt { clear:left; float:left; width:27%; font-size:14px; border-top:1px solid #ccc; }
dl.form dd { margin-left:27%; border-top:1px solid #ccc; }

@media screen and (max-width:768px){
	dl.form dt,dd { padding:0; }
	dl.form dt { clear:both; float:none; width:100%; border-top:1px solid #ccc; padding:20px 0 10px 0; }
	dl.form dd { margin-left:0%; border-top:none; padding-bottom:20px; }
}

/* ------------------------------プレースホルダーの色・サイズ指定------------------------------　*/
input::-webkit-input-placeholder {color:#ccc; font-size:14px; }
input:-moz-placeholder {color:#ccc; font-size:14px; }
textarea::-webkit-input-placeholder {color:#ccc; font-size:14px; }
textarea:-moz-placeholder {color:#ccc; font-size:14px; }

/* ------------------------------コンタクトフォーム７------------------------------　*/
form {  }
div.wpcf7 { display:block; width:100%; margin:0 auto!important; box-shadow:none; background:transparent; }
div.wpcf7 br { display:none; }

@media screen and (max-width:768px){
	div.wpcf7 { width:100%; }
}

/* １列の場合 */
div.wpcf7 ul li { padding:30px 0 0 0; margin:0; font-size:16px; line-height:2; color:#455A64; }
div.wpcf7 ul li:first-child { padding:0 0 0 0!important; }
div.wpcf7 ul.question li { padding:80px 0 0 0; margin:0; font-size:16px; line-height:2; color:#455A64; }
div.wpcf7 ul.question li:first-child { padding:0 0 0 0!important; }
div.wpcf7 ul.question li:before { content:'Q,'; padding-right:10px; font-size:26px; color:#ED1E79; font-weight:bold; }

/* ２列の場合 */
div.wpcf7 dl{ border-top:none; width:100%; }
div.wpcf7 dl dt { clear:left; float:left; width:30%; border-top: 1px dotted #cccccc; padding:10px 0; font-size:14px; }
div.wpcf7 dl dd { margin-left:30%; border-top: 1px dotted #cccccc; padding:10px 0; }
div.wpcf7 dl dd span { font-size:12px; color:#666666; }

@media screen and (max-width:768px){
	div.wpcf7 dl dt { float:none; width:100%; padding-bottom:0; }
	div.wpcf7 dl dd { margin:0; border:none;}
}

div.wpcf7 input, .wpcf7 textarea , .wpcf7 select { width:100%; border:1px solid #CDCDDF; padding:14px; font-size:16px; border-radius:2px; }
div.wpcf7 textarea { height:215px; }
div.wpcf7 select { height:60px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
.wpcf7-captchac { border:1px solid #ccc; }
/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid { background: #ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip {font-size: 80%;}
.wpcf7 .wpcf7-response-output {margin: 10px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.wpcf7 .wpcf7-validation-errors {color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7;}
.wpcf7 .wpcf7-mail-sent-ok {color: #3A87AD; background-color: #D9EDF7; border: 1px solid #BCE8F1;}
/* 必須赤色表示 */
.wpcf7 .required { color: #000000;}
/* 任意緑色表示 */
.wpcf7 .any{ color: #080;}
select { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:100%; }

/* 必須or任意 */
.hissu,
.nini { color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:10px; font-weight:bold; border-radius:3px; }
.hissu { background:#D8544F; }
.nini { background:#78919C; }
::placeholder { color:#999999; }

.time { width:60px!important; }
.time02 { width:100px!important; }
.postal-code { width:60%!important; }

/* ------------------------------送信ボタン------------------------------　*/
input[type="submit"] { -webkit-appearance:none; margin:0 auto; }
input.wpcf7-submit{ background:linear-gradient(90deg, #009efd, #2af598);
	display:block; font-size:24px!important; color:#000000; width:100%!important; height:110px; border-radius:55px!important; margin:0 auto; border:none!important; color:#ffffff;}

/* ------------------------------チェックボックスのデザイン------------------------------　*/
input[type=checkbox] { display:none; }
.wpcf7-list-item-label { position:relative; padding:0 0 0 56px; top:0px; }
.wpcf7-list-item-label:hover:after { border-color:#00b498; }
.wpcf7-list-item-label:after,  .wpcf7-list-item-label:before{position:absolute; content:""; display:block; top:50%; }
.wpcf7-list-item-label:after { left:0px; margin-top:-20px; width:36px; height:36px; border:2px solid #ccc; border-radius:3px; }
.wpcf7-list-item-label:before { left:18px; margin-top:-7px; width:5px; height:9px; border-right:3px solid #00b498; border-bottom:3px solid #00b498; transform:rotate(45deg); opacity:0; }
input[type=checkbox]:checked + .wpcf7-list-item-label:before {opacity:1; }

@media screen and (max-width:768px){
	.wpcf7-list-item  { padding:15px 0; } /* チェックボックス下に14pxのスペース */
}

/* ------------------------------フッターエリア------------------------------　*/
footer { position:relative; width:100%; margin:0; padding:0px 0 80px 0; z-index:999; border-top:1px solid #e5e5e5; }
#footer { max-width:1000px; margin:0 auto; }
footer p { font-size:14px; text-align:center; font-weight:normal; }
footer p span { color:#4d4d4d; }
footer .inner02 img { width:300px; margin:40px auto 20px auto; }
footer .inner01 { width:100%; border-bottom:1px solid #e5e5e5; }
footer .inner02 { width:100%; padding:0; }
footer ul { display:block; clear:both; width:60%; margin:0 auto; padding:20px 0; }
footer ul li { list-style:none; width:100%; float:left; margin:0; padding:0; text-align:center; }
footer li a { font-size:12px; color:#000000; }
address { font-size:10px; text-align:center; padding:30px 0 0 0; }

@media screen and (max-width:768px){
	footer { padding:0px 0 80px 0px; }
	#footer { max-width:320px; margin:0 auto; }
	footer .inner02 img { margin:0 auto; }
	footer p { font-size:10px; text-align:center; margin:0; }
	footer img.logo { width:200px; margin:0 auto 20px auto; }
	address { font-size:14px; text-align:center; }
	footer .inner01 { width:94%; margin:0 auto; }
	footer .inner02 { width:94%; margin:0 auto; padding:20px 0 0 0; }
	footer ul { margin:0 auto; width:100%; padding:10px 0; }
	footer ul li { width:100%; }
	footer li a { font-size:10px; }
	address { font-size:10px; }
}

footer table { margin:0 auto 10px auto; font-size:12px }
footer table tr { border-bottom:1px solid #000000; }
footer table th { width:20%; }
footer table td { width:11.4285%; text-align:center }
footer table th,
footer table td { padding:10px 0; }

@media screen and (max-width:768px){
	footer table { font-size:10px }
}

/* ------------------------------ページトップへ戻る------------------------------　*/
#pageTop { position:fixed; bottom:20px; right:20px;}
#pageTop a { display:block; z-index:999; margin:0; padding:0; width:60px; height:60px; background:url(img/top.png) no-repeat 0 0; }
#pageTop a:hover { text-decoration:none; opacity:0.7; }
@media screen and (max-width:768px){
	#pageTop , #pageTop a { display:none; }
}

/* ------------------------------グローバルナビ上部固定------------------------------　*/
.fixed { position:fixed; top:0; width:100%; z-index:10000; }
@media screen and (max-width:768px){
.fixed { position:static; }
}

/* ------------------------------ページ下部固定CTA_SP------------------------------　*/
#buttonTow , #buttonTow a { display:none; }
@media screen and (max-width:768px){
#buttonTow { position:fixed; bottom:0; background:rgba(0,0,0,0.5); width:100%; height:auto; z-index:1000; }
#buttonTow #box01 { width:50%; float:left; background:#33b3ff; background-size:contain; padding:15px 10px;}
#buttonTow #box02 { width:50%; float:right; background:#00d6c1; background-size:contain; padding:15px 10px;}
#buttonTow a { display:block; text-align:center; font-size:14px; color:#ffffff; font-weight:bold; }
#buttonTow a img { margin:0 auto; padding:0; }
#buttonTow a:hover { text-decoration:none; opacity:0.7; }
}

/* ------------------------------ページ下部固定CTA_PC------------------------------　*/
#buttonPc { position:fixed; bottom:0; width:100%; height:auto; z-index:1000; background:linear-gradient(90deg, #009efd, #2af598); }
#buttonPc a#pc_box { display:block; width:100%; height:auto; color:#ffffff; padding:15px 0; text-align:center; font-size:16px; }
 i { padding-right:5px; }
 #buttonPc a:hover { text-decoration:none }

@media screen and (max-width:768px){
	#buttonPc { display:none; }
	#buttonPc a#pc_box { display:none; }
}

.fadein { opacity:0; transform:translate(0, 50px); transition:all 300ms; }
.fadein.scrollin { opacity:1; transform:translate(0, 0); }
.fadein02 { transform:translate(0, -50px); transition:all 1000ms; }

/* ------------------------------スクロールを促すアニメーション------------------------------　*/
a.scroll { position:absolute; top:240%; left:50%; z-index:999; display:inline-block; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); text-decoration:none; color:#ffffff; font-size:12px; padding-top:80px; }
a.scroll span { position:absolute; top:0; left:50%; width:10px; height:10px; margin-left:-5px; border-left:1px solid #fff; border-bottom:1px solid #fff; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-animation:sdb 2s infinite; animation:sdb 2s infinite; opacity:0; box-sizing:border-box; }
a.scroll span:nth-of-type(1) {-webkit-animation-delay:0s; animation-delay:0s; }
a.scroll span:nth-of-type(2) {top:16px; -webkit-animation-delay:.15s; animation-delay:.15s; }
a.scroll span:nth-of-type(3) {top: 32px; -webkit-animation-delay:.3s; animation-delay:.3s; }
@-webkit-keyframes sdb { 0% {opacity:0; } 50% {opacity:1; } 100% {opacity:0; } }
@keyframes sdb {0% {opacity:0; } 50% {opacity:1; } 100% {opacity:0; } }
@media screen and (max-width:768px){a.scroll { top:160%; } }

/* ------------------------------ ボタンアニメーション------------------------------　*/
.fill:hover,
.fill:focus {box-shadow: inset 0 0 0 2em var(--hover); }
.pulse:hover,
.pulse:focus {-webkit-animation: pulse 1s; animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }
@-webkit-keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
.pulse {--color: #009efd; --hover: #2af598; border-radius:50px }
.pulse {color: var(--color); transition: 0.25s; }
.pulse:hover, .pulse:focus {border-color: var(--hover); color: #fff; }

/* ------------------------------詳しく見るのボタンアニメーション------------------------------　*/
.pulse02:hover,
.pulse02:focus {-webkit-animation: pulse 1s; animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }
@-webkit-keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
.pulse02 {--color: #37414f; --hover: #37414f; }
.pulse02 {color: var(--color); transition: 0.25s; }
.pulse02:hover, .pulse02:focus {border-color: var(--hover); }

/* ------------------------------詳しく見るのボタンアニメーション------------------------------　*/
.pulse03:hover,
.pulse03:focus {-webkit-animation: pulse 1s; animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }
@-webkit-keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
.pulse03 {--color: #ffffff; --hover: #ffffff; }
.pulse03 {color: var(--color); transition: 0.25s; }
.pulse03:hover, .pulse02:focus {border-color: var(--hover); }

/* ------------------------------フェードインアニメーション------------------------------　*/
.sa {opacity: 0; transition: all .5s ease; } /* ノーマル */
.sa.show {opacity: 1; transform: none; } /* ノーマル */
.sa-lr {transform: translate(-100px, 0); } /* 右から */
.sa-rl {transform: translate(100px, 0); } /* 左から */
.sa-up {transform: translate(0, 100px); } /* 下から */
.sa-down {transform: translate(0, -100px); } /* 上から */
.sa-scaleUp {transform: scale(.5); } /* 縮小→拡大 */
.sa-scaleDown {transform: scale(1.5); } /* 拡大→縮小 */
.sa-rotateL {transform: rotate(180deg); } /* 左回転 */
.sa-rotateR {transform: rotate(-180deg); } /* 右回転 */

/* ------------------------------ふわふわ------------------------------　*/
@keyframes horizontal {
    0% { transform:translateX( -5px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
img.huwahuwa { animation: horizontal 2s ease-in-out infinite alternate; }
img.huwahuwa { animation: vertical 2s ease-in-out infinite alternate; }
img.huwa01 { animation-duration: 1.1s}
img.huwa02 { animation-duration: 1.3s}
img.huwa03 { animation-duration: 1.5s}

/* ------------------------------リンク透過------------------------------　*/
a:hover img { opacity:0.6; }

#top_realtime_num { position: fixed; top: 26px; left: 50%; transform: translate(-50%, -50%); border-radius: 1em; background-color: #868686; color: #FFF; padding: 7px; opacity: 0.7; z-index: 999; }

/* ------------------------------点滅------------------------------　*/
.blinking{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* ------------------------------ プライバシーポリシー ------------------------------　*/

#footer a.policy_link{
	display: inline-block;
}
#footer a.policy_link:after{
    content: ' ▼';
}
#footer .policy_main{
	text-align: left;
	font-size:0.8rem;
	display: none;
}
#footer .policy_main p{
	font-size:0.8rem;
	text-align: left;
}
#footer .policy_main dt{
	font-weight: bold;
	margin-top: 1em;
}
#footer .policy_main dd{
	padding:0;
}
#footer .policy_main ol {
	list-style-type: none;
	padding-left: 1.5em;
    text-indent: -1.5em;
}
#footer .policy_main ol li{
	text-align: left;
	counter-increment: cnt;
}
#footer .policy_main ol li:before{
	content: "(" counter(cnt) ") ";
}
.pmark{
	display:flex;
	align-items: center;
	justify-content: space-between;
    padding: 0 40%;
}

.pmark img{
	width:30%;
}

/*----------------------
商品エリア 
----------------------*/

.product_cnt{
	margin-top: 50px;
	width:80%;
	margin:50px auto 0;
}
@media screen and (max-width: 768px) {
	.product_cnt{
		width:100%;
	}
}
.product_cnt .product_image{
	text-align: center;
}
.product_cnt img{
	max-width: 350px;
	width: 100%;
}

.product_cnt table{
	margin: 0 auto;
	font-size: 18px;
	max-width: 350px;
}

@media screen and (max-width: 768px) {
	.product_cnt table{
		width:100%;
		font-size: 14px;
	}
}

.product_cnt table th{
	text-align: left;
	padding: 20px 0 10px 0 ;
}

.product_cnt table td{
	padding: 20px 0 10px 25px ;
}
@media screen and (max-width: 768px) {
	.product_cnt table th{
		padding: 0 0 10px 0 ;
		white-space: nowrap;
	}
	
	.product_cnt table td{
		padding: 0 0 10px 16px ;
	}
}
.product_cnt .shortRed{
	color:#ea6363;
	font-size: small;
	font-weight: normal;
}

/* 購入数のプラスマイナスボタンの調整 */
.product_cnt .spinner_btn{
	font-size:16px;
	text-align: center;
	vertical-align: middle;
	width: 40px;
	height:40px;
	cursor:pointer;
	/* padding: 5px; */
    background-color: #ddd;
	border: 1px solid #333;
	border-radius: 5px;
	display: inline-block;
	line-height: 40px;
}

/* 購入数のフォームサイズ */
.product_cnt #product1_amount, .product_cnt #product2_amount{
	width: 50px;
	height:40px;
}
.product_cnt select{
	width: 190px;
	height: 40px;
}

/* セレクトボックスのエラーメッセージ */
.errorMessage{
	display: none;
	font-size: 12px;
	color:#ea6363;
}

/*---------------------
ボタンの設定 
---------------------*/

.product_cnt .getbasket{
	margin-top: 32px;
}

@media screen and (max-width: 768px) {
	.product_cnt .getbasket{
		margin-top: 16px;
	}
}

/* ボタンを画像にする場合 */
.product_cnt .getbasket input[type="image"]{
	width: 100%;
	max-width: 350px;
	transition: all 0.9s;
	text-align: center;
	display: block;
	margin: 0 auto;
}
.product_cnt .getbasket input[type="image"]:hover{
	opacity: 0.8;
}

/* ボタンデザインをCSSで設定する場合 */
.addCart {
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	padding:5px 30px !important;
	background:#333;/* ボタンの色指定*/
	color:#fff;/* ボタンの文字色指定*/
	font-size:14px;
	line-height:2;
	font-weight:bold;
	cursor:pointer;
}

