@charset "UTF-8";

/*

/common/css/common.css
2019.04.18

*/

a {
color:#000;
text-decoration:underline;
}
a:visited {
color:#000;
text-decoration:underline;
}
a:hover {
color:#000;
min-height:1em; /* Mac Firefox */
text-decoration:none;
}
a:active {
color:#000;
text-decoration:none;
}
/*Win Firefox用*/
:focus {
-moz-outline-style:none;
}
/*Mac Firefox用*/
a { outline:none; } 

html { overflow-y:scroll; }
body, html {
min-width:1000px;
font-size:14px;
*font-size:small;
*font:x-small;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
color:#555;
}
#wrap {
width:1000px;
margin:0 auto;
background:none;
background-color:#fff;
}

/* font size */
table { font-size:inherit;font:100%; }
.text10 { font-size:72%; }
.text11 { font-size:79%; }
.text12 { font-size:86%; }
.text13 { font-size:93%; }
.text14 { font-size:100%; }
.text15 { font-size:108%; }
.text16 { font-size:115%; }
.text17 { font-size:122%; }
.text18 { font-size:129%; }
.text19 { font-size:136%; }
.text20 { font-size:143%; }
.text21 { font-size:150%; }
.text22 { font-size:158%; }
.text23 { font-size:165%; }
.text24 { font-size:172%; }
.text25 { font-size:179%; }
.text26 { font-size:186%; }
.text28 { font-size:200%; }
.text30 { font-size:214%; }
.text32 { font-size:229%; }
.text34 { font-size:243%; }
.text36 { font-size:257%; }
.text38 { font-size:271%; }
.text40 { font-size:286%; }
.text46 { font-size:326%; }
.text60 { font-size:429%; }

.leftbox { float:left; }
.rightbox { float:right; }
.p-left { text-align:left; }
.p-right { text-align:right; }
.p-center { text-align:center; }
.nowrap { white-space:nowrap; }
.line-h14 { line-height:1.4; }
.line-h16 { line-height:1.6; }
.line-h18 { line-height:1.8; }
.line-h20 { line-height:2; }

/* image */
a img {
opacity:1;
-webkit-transition:.2s ease-in-out;
transition:.2s ease-in-out;
}
a:hover img {
opacity:.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
.smp-display { display:none; }

/* list style */
ul.list li {
margin:0 0 15px 20px;
padding:0;
line-height:1.6;
list-style-type:disc;
}
ol li {
margin:0 0 10px 20px;
padding:0;
line-height:1.6;
list-style-type:decimal;
background:none !important;
}
ol li ol li {
margin:0 0 10px 20px;
padding:0;
line-height:1.6;
list-style-type:decimal;
background:none !important;
}
li.list-last {
margin-right:0 !important;
}
li.list-bottom {
margin-bottom:0 !important;
}

/* border */
.border-top {
border-top:1px solid #c4c3b5;
}
.border-bottom {
border-bottom:1px solid #c4c3b5;
}
.right-border {
border-right:1px solid #ccc;
}

/* font style */
.note { color:#ff0000; }
.txt-bold { font-weight:bold; }
.txt-normal { font-weight:normal; }
.white-txt { color:#fff; }
.gray-txt { color:#555; }

/* width style */
.w100 { width:100px; }
.w140 { width:140px; }
.w180 { width:180px; }
.w200 { width:200px; }
.w220 { width:220px; }
.w250 { width:250px; }
.w260 { width:260px; }
.w280 { width:280px; }
.w295 { width:295px; }
.w300 { width:300px; }
.w360 { width:360px; }
.w400 { width:400px; }
.w410 { width:410px; }
.w430 { width:430px; }
.w440 { width:440px; }
.w452 { width:452px; }
.w480 { width:480px; }
.w490 { width:490px; }
.w500 { width:500px; }
.w540 { width:540px; }
.w580 { width:580px; }
.w600 { width:600px; }
.w640 { width:640px; }
.w680 { width:680px; }
.w700 { width:700px; }
.w710 { width:710px; }
.w860 { width:860px; }
.w920 { width:920px; }

/* margin style */
.m-auto { margin:0 auto; }
.mt0 { margin-top:0 !important; }
.mt5 { margin-top:5px !important; }
.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt27 { margin-top:27px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt70 { margin-top:70px !important; }
.mt80 { margin-top:80px !important; }
.mt90 { margin-top:90px !important; }
.mt100 { margin-top:100px !important; }
.mt120 { margin-top:120px !important; }

.mb0 { margin-bottom:0 !important; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb100 { margin-bottom:100px !important; }
.mb200 { margin-bottom:200px !important; }

.mr5 { margin-right:5px !important; }
.mr10 { margin-right:10px !important; }
.mr15 { margin-right:15px !important; }
.mr20 { margin-right:20px !important; }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr50 { margin-right:50px !important; }
.mr60 { margin-right:60px !important; }
.mr80 { margin-right:80px !important; }
.mr100 { margin-right:100px !important; }

.ml10 { margin-left:10px !important; }
.ml15 { margin-left:15px !important; }
.ml20 { margin-left:20px !important; }
.ml30 { margin-left:30px !important; }
.ml40 { margin-left:40px !important; }

/* padding style */
.pdd-lr10 { padding:0 10px; }
.pdd-lr20 { padding:0 20px; }
.pdd-lr30 { padding:0 30px; }
.pdd-lr10 { padding:0 10px; }
.pdd-tb10 { padding:10px 0; }
.pdd-tb20 { padding:20px 0; }
.pdd-tb30 { padding:30px 0; }

/* label style */
input, textarea { color:#000; }
input.text-box,
textarea.text-box {
padding:3px;
border:1px #ebebeb solid;
vertical-align:top;
}
textarea.text-box { width:400px; }
select { margin:5px 0; }
.input60 { width:60px; }
.input300 { width:300px; }

.price-txt {
 line-height:1.6;
 }
.sample-icon {
 margin-right:8px;
 padding:3px 8px;
 font-size:86%;color:#fff;
 background-color:#EA0003;
 }

/*--------------------------------------
  table
---------------------------------------*/
/* normal */
table.normal {
margin:0;
padding:0;
border-collapse:collapse;
}
table.normal th {
padding:3px 10px 3px 0;
font-weight:bold;
line-height:1.6;
text-align:left;
white-space:nowrap;
vertical-align:top;
}
table.normal td {
padding:5px 0;
line-height:1.6;
vertical-align:top;
}


@media screen and (max-width:768px) {

body, html { min-width:0; }

/* header */
header {
position:fixed;
top:0;
width:100%;
height:70px;
padding:0;
border-bottom:none;
z-index:996;
}
#logo {
position:absolute;
top:10px;
left:10px;
display:block;
margin:0;
padding:0;
text-align:center;
}
#logo img { width:160px; }

/* global navi */
#global-nav { display:none; }
#btn-smp {
display:block;
position:fixed;
top:25px;
right:15px;
width:30px;
height:22px;
background:#000;
border-top:10px solid #fff;
border-bottom:10px solid #fff;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s;
cursor:pointer;
z-index:1001;
}
#btn-smp:before {
content:'';
position:absolute;
width:30px;
height:2px;
background:#000;
top:-9px;
right:0;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s;
}
#btn-smp:after {
content:'';
position:absolute;
width:30px;
height:2px;
background:#000;
bottom:-9px;
right:0;
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s;
}
#btn-smp.active {
background:#fff;
}
#btn-smp.active:before {
-moz-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
top:0;
right:0;
}
#btn-smp.active:after {
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
bottom:0;
right:0;
}
#btn-smp span { position:absolute;top:10px;left:0;font-size:86%;}
#smp-nav {
dispaly:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:0 auto;
padding:70px 0 20px;
background-color:#fff;
z-index:1000;
opacity:0.95;
overflow:auto;
}
#smp-nav ul li {
display:block;
margin:0;
padding:20px 20px 20px 36px;
font-size:108%;
line-height:1;
letter-spacing:0.02em;
text-align:left;
border-bottom:1px solid #e2e2e2;
cursor:pointer;
background:url(/common/images/btn-arrow-s-b.png) no-repeat 20px 28px;
}
#smp-nav ul li a, #smp-nav ul li a:visited {
text-decoration:underline;
}
#smp-nav ul li a:hover, #smp-nav li a.active {
text-decoration:none;
}

/* contents */
.contents {
margin-top:71px;
padding:0 0 20px;
}
.contents-inner {
width:96%;
}
#main img { width:100%; }
.txt-copy01 {
font-size:129%;
letter-spacing:normal;
}
.txt-copy02 {
font-size:115%;
letter-spacing:normal;
}

/* top */
#txt p {
margin:12px 0 0;
font-size:100%;
line-height:1.8 !important;
text-align:left;
letter-spacing:normal;
}
.line-h18 { line-height:1.4; }
.line-h20 { line-height:1.6; }
.h2-title {
padding:10px;
font-size:129%;
line-height:1.2;
}
#product-nav  { width:100%;margin:0; }
.product-detail {
width:auto;
padding:30px 10px;
background-color:#f4f1e7;
}
.product-detail h3 {
margin-bottom:20px;
padding-bottom:10px;
font-size:129%;
text-align:center;
border-bottom:1px solid #333;
}
.js-tab > div {
width:40%;
margin:0 10px 10px;
padding:10px 0;
font-size:158%;
}
.js-tab > p {
width:90%;
margin-top:20px;
text-align:center;
}
.js-tab_content {
display:none;
padding:40px 10px;
background-color:#fff;
}
.js-tab_content.active { display:block; }
.h2-info { font-size:129%; }

/* footer */
footer { padding:20px 0 10px; }
.footer-inner {
width:90%;
padding:0;
}
#footer-logo {
float:none;
width:100%;
margin-bottom:10px;
font-size:186%;
text-align:center;
}
.footer-right {
float:none;
width:100%;
margin-bottom:10px;
text-align:center;
}
address { line-height:1.6 !important; }
.tel-fax {
margin:10px 0;
font-size:143%;
}
#pagetop {
bottom:30px;
right:20px;
}
#pagetop img {
width:50px;
height:50px;
}

/* contact */
#contact-box {
margin:0 0 60px;
padding:60px 20px;
}
table.mailform tr th {
width:40%;
}
table.mailform tr th { padding:10px 10px 10px 0; }
table.mailform tr td { padding:10px 0; }
input.text-f { width:90%; }
textarea.text-a { width:80%;height:100px; }
input[type="submit"], input[type="reset"] { width:100%; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea {
width:90%;
}

.balloon1 {
width:auto;
margin:20px 0 0;
padding:20px;
}
.balloon1:before{
top: -30px;
left: 50%;
border: 15px solid transparent;
border-bottom: 15px solid #999;
}
.balloon1:after{
top: -30px;
left: 50%;
border: 15px solid transparent;
border-bottom: 15px solid #fdebd1;
}
.balloon1 p {
font-size:129%;
}
.balloon2 {
width:auto;
margin:0;
padding:20px;
}
.balloon2 p {
font-size:129%;
}

/* width */
.w100,
.w140,
.w180,
.w200,
.w220,
.w250,
.w260,
.w280,
.w295,
.w300,
.w360,
.w400,
.w410,
.w430,
.w440,
.w452,
.w480,
.w490,
.w500,
.w540,
.w580,
.w600,
.w640,
.w680,
.w700,
.w710,
.w860,
.w920  { width:auto; }
.h2-title img { width:100%; }
.leftbox { float:none; }
.rightbox {
float:none;
margin:0 0 20px;
}

.mr10, .mr30, .mr40, .mr60 { margin-right:0 !important; }
.mr50 { margin-right:0 !important;margin-bottom:20px; }
.mb60 { margin-bottom:40px !important; }
.mb100 { margin-bottom:60px !important; }
.pdd-lr30 { padding:0; }

.smp-img { width:100%; }
.smp-img20 { width:100%; margin-bottom:20px; }
.smp-mb20 { margin-bottom:20px; }
table th, table td { line-height:1.6; }
.smp-display { display:block; }
.smp-txt { width:100%; }

}