/* contents */

#contents {
width: 1050px; padding: 10px;
margin: 0 auto;
line-height:200%;
}
#contents .newsBox2{
margin: 5px auto; padding:5px ;
font-size: 90%;
line-height:180%;
border: 1px solid #CCC;
height: 200px;
overflow-y: scroll;
}
#contents .newsBox2 p{
padding: 10px;
}
#contents .newsBox{
margin: 5px auto; padding:5px ;
font-size: 90%;
line-height:180%;
border: 1px solid #CCC;
}
#pdf .newsBox div{ padding: 0px!important; margin: 0px!important; }
#contents .newsBox p{ padding: 10px; margin-bottom: 5px; }
#contents .newsBox dl{ padding: 10px; margin-bottom: 5px; }
#contents .newsBox ul,ol{ margin-left: 40px; }
#contents .newsBox input[type="checkbox"].on-off{
    display: none;
}
#contents .n-hidden input[type="checkbox"].on-off + p{
    height: 0;
    overflow: hidden;
    padding: 0;
}
#contents .n-hidden input[type="checkbox"].on-off:checked + p{
    height: 100%;
    padding: 10px;
}
#contents .n-hidden input[type="checkbox"].on-off + div{
    height: 0;
    overflow: hidden;
    padding: 0;
}
#contents .n-hidden input[type="checkbox"].on-off:checked + div{
    height: 100%;
    padding: 10px;
}
#contents .n-hidden label{
display: block;
}

#contents .form{ text-align: center; }
#contents .low { height: 200px; overflow-y: scroll ; }
#contents .low ul { list-style: none!important; }

#contents .pickup1{ margin: 10px auto; display: flex; justify-content: space-evenly; }
#contents .pickup1 img{  }
#contents .pickup2{ margin: 10px auto; }
#contents .pickup2 div{ width: 50%; float: left; }
#contents .pickup2 img{ margin: 5px; }
#contents .pickup3{ margin: 10px auto; }
#contents .pickup3 img{ margin: 5px; }

/* genreBox */
.genre-inner{
	float:left;
	width:240px;
	margin:5px 0px 5px 15px;
}
.genre-inner p{
	margin:5px 10px 0;
}

/* pickup */
.pickup img{ margin: 5px; }

/* navigation */

#contents .navigation{
padding: 10px; margin: 5px;
background-color: #eee;
}
#contents .navigation li{ list-style: none; float: left; }
#contents .navigation li a{
margin-right: 5px; padding-left: 10px; padding-right: 10px; display: block; float: left;
list-style : none;
font-size: 90%;
}

/* post & main */

#post{
width: 780px;
padding: 10px; margin-top: 5px; float: right;
}

#post .p-main-img img{ max-width: 350px; max-height: 350px; }

#post .main{ width: 100%; }

#post .post-title{
margin:5px; padding: 5px; margin-top: -2px;
font-size:110%; font-weight: bold;
border-bottom: 1px solid #999;
}
#post .post-title2{
margin:0px; padding: 0px!important; margin-top: -5px!important;
font-size:110%; font-weight: bold;
border-bottom: 1px dotted #999!important;
}
#post .post-title .red-box{ background-color: brown; padding:5px 10px 5px 10px; color: #FFF; font-size: 90%; margin: 5px; border: none; }
#post .post-title span{ border-left: 5px solid brown; padding-left:10px; padding-right: 10px; }
#post .post-box{ margin:10px auto; padding: 10px; border: 1px solid #CCC; }
#post .post-box a {
color:blue;
border-bottom: 1px dotted #eee;
text-decoration:none;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
padding-bottom: 2px;
}
#post .post-box a:hover {
border-bottom: 1px dotted #666;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}

#post .left-box{ width: 360px; float:left; font-size:90%; line-height:160%; }

#stage{
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 380px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	}

#thumbs{ text-align: center; display: flex; color: #CCC; justify-content: center; margin-bottom: 20px; z-index: 100; }
#thumbs label{ padding: 1px; }
#thumbs label img{ max-width: 40px; max-height: 40px; border-radius: 50%; border: 3px solid #CCC; cursor: pointer; }

#photos{
position:absolute;
width:3000px;
}
.photo{
position:relative;
opacity: 0;
float:left;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.photo img{ max-width: 300px!important; transition-duration: 0.3s; }

#r1, #r2, #r3, #r4, #r5, #s1, #s2, #s3, #s4, #s5, #sson {
	display: none;
}
#sson:checked ~ #photos #photo6, #r1:checked ~ #photos #photo1,#r2:checked ~ #photos #photo2,#r3:checked ~ #photos #photo3, #r4:checked ~ #photos #photo4, #r5:checked ~ #photos #photo5 {
	opacity: 1;
}
#sson:checked ~ #photos {
	left:0%;
}
#r1:checked ~ #photos {
	left:-100%;
}
#r2:checked ~ #photos {
	left:-200%;
}
#r3:checked ~ #photos {
	left:-300%;
}
#r4:checked ~ #photos {
	left:-400%;
}
#r5:checked ~ #photos {
	left:-500%;
}

#post .sns-button{ width: 340px; padding: 5px; border: 1px solid #CCC; margin-top: 10px; }
#post .com{ margin: 5px auto; padding:10px; width: 320px; border-bottom: 2px dotted #CCC; }
#post .com-title{ margin-left: -10px; margin-bottom: 5px; padding-left: 10px; border-left: 3px solid brown; font-weight: bold; }

#post .right-box{ width: 340px; float:right; padding: 20px; background-color: #eee; }
#post .right-box li{ list-style: none; padding: 3px; line-height: 160%; display: block; }
#post .right-box .price{ font-weight: bold; margin-bottom: 10px; width:100%; }
#post .right-box .copy{ border-bottom: 1px solid #666; margin-bottom: 10px; font-size: 80%; }
#post .right-box .p-left{ width: 30%; float: left; margin-bottom: 5px; text-align: right; font-size: 100%; }
#post .right-box .p-right{ width: 50%;float: left; margin-bottom: 5px; font-size: 110%; text-align: right; }
#post .right-box .p-right span{ font-size: 100%; color: red; }
#post .right-box .red{ font-size: 90%; line-height: 150%; font-weight: bold; }
#post .right-box .red span{ color: red; font-size: 95%; }
#post .right-box .juchu{ border: 1px solid #CCC; padding: 5px; margin-bottom: 10px; background-color: #FFF; }
#post .right-box .juchu li:first-child{ width: 60px; margin: 0 auto; padding-top: 10px; }
#post .right-box .juchu li:last-child{ width: 250px; font-size: 80%; margin: 0; }
#post .right-box .come{ border: 1px solid #CCC; padding: 5px; margin-bottom: 10px; }

#post .right-box .discontinued{ width: 320px; border: 3px solid red; padding: 5px; margin-bottom: 10px; }
#post .right-box .texttype3{
background-image:url("https://cdn.ok-depot.jp/img/doubleline.gif");
background-repeat:repeat-x;
background-position: center;
color:#660000;
font-size:1.0em !important;
}
#post .right-box .post-op{ border: 1px solid #666; padding: 5px; margin-bottom: 10px; background-color: #FFF; }
#post .right-box .post-op .op-box{ border-bottom: 1px dotted #CCC; }
#post .right-box .post-op select{
max-width: 100%; padding: 2px; /*margin-left: 15px; margin-bottom:10px;*/
background-color: #eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#post .right-box .post-op-title{ margin-bottom: 5px; color: #FFF; background-color: #666; padding: 5px; font-size: 90%; font-weight: bold; }
#post .right-box .op-title{ padding-left: 5px; font-weight: bold; }
#post .right-box .comme-link{ padding-left: 5px; font-size: 85%; margin-bottom: 10px; }
#post .right-box .cart table{ margin-bottom: 10px; padding: 0px; width: 100%; }
.cartjs_product_table table{ width: 100%!important; border: 1px solid #CCC; background-color: #FFF; margin: 0px!important; }
.cartjs_product_table table td,th{ padding: 5px; }
.detail-cart th{ width: 30%!important; font-size: 85%;}
#post .right-box .cart select{ width: 100%; }
#post .right-box .form{ text-align: center; }
#post .right-box .form span{ font-size: 85%; line-height: 150%; font-weight: bold; }

#post .post-text{ margin:10px auto; padding: 5px; border: 1px solid #CCC; }
#post .post-text h2{ font-size:90%; }
#post .post-text2{ margin:10px auto; padding: 10px; border: 1px solid red; }
#post .post-text .text-box{ margin:5px auto; padding: 5px 20px 5px 20px; }
#post .post-text .text-box img{ max-width: 100%; max-height: auto; }
#post .text-box a { color: blue; }
#post .text-box ul{ margin-left: 10px; }
#post .text-box .mglt{ margin-left: 40px; }
#post .text-box h3{ margin-bottom: 5px; margin-top: 5px; padding: 5px; border-bottom: 1px solid brown; }
#post .text-box h4{ margin-bottom: 5px; margin-top: 5px; padding: 5px; border-bottom: 1px solid brown; }
#post .text-box h5{ margin-bottom: 5px; margin-top: 5px; padding: 5px; border-bottom: 1px solid brown; font-size: 90%; }

#post .tokucho-box{  }
#post .tokucho{ width: 335px; margin: 5px; padding: 5px; border: 1px solid #eee; float: left; }
#post .tokucho ul{ list-style: none!important; }
#post .tokucho li{ list-style: none!important; padding: 5px; }
#post .tokucho img{ max-width: 315px; max-height: 236px; margin: 0 auto; display: block; }
#post .tokucho span{ font-weight: bold; background-color: #eee; display: block; padding: 5px; margin: -5px; }
#post .tokucho p{ font-size: 90%; line-height: 160%; padding: 5px; }

#post .related-post a{ width: 140px; margin: 6px; display: block; float: left; }
#post .related-post a:hover{ filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; }
#post .related-post a:hover img{
box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
}
#post .related-post img{ max-width: 140px; max-heigth: 140px; max-width: 140px; max-heigth: 140px; display: block;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
border: 1px solid #CCC;
}
#post .related-post span{ width: 130px; padding:10px 10px 5px 10px; display: block; font-size: 85%; line-height: 140%; }

#post .comment { margin:5px auto; padding: 5px 20px 5px 20px; }
#post .comment ul { display: block; }
#post .comment ul li{ list-style: none; border-left: 3px solid #666; }
#post .com-author{ border-bottom: 1px dotted #666; padding: 10px; }
#post .com-text{ background-color: #FFF; padding: 15px; margin-bottom: 20px; }
#post .comment .children{ margin-top: 15px; }
#post .comment .children li{ margin-left: 40px; background-color: #eee; margin-bottom: -5px; border: none; }

#post .pdf-dl { display: block;
	width: 300px;
    padding: 15px;
    margin: 4px auto;
    border: 1px solid #FFFFFF;
    text-align: center;
    color: #FFFFFF!important;
    font-weight: bold;
    box-shadow: 4px 4px 4px #CCC;
    -moz-box-shadow: 4px 4px 4px #CCC;
    -webkit-box-shadow: 4px 4px 4px #CCC;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    background-color: #f96275; }

#post .iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
#post .iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* guide */

#guide{ border: 1px solid #666; padding: 10px; line-height: 160%; font-size: 85%; }
#guide .g-box{ width: 220px; margin: 15px; float: left; }
#guide .g-box span{ font-weight: bold; }

/* page */

#post .companydata{
width:99%;
margin-right:20px;
margin-bottom:20px;
border-collapse:separate;
border-spacing:3px;
font-size: 90%;
line-height: 240%;
}
#post .companydata td{ padding: 5px; }
#post td.t1{
padding:10px; margin: 5px;
text-align:left;
font-weight:bold;
background-color:#e9e9e9;
}
#post td.t2{
padding:10px; margin: 5px;
border:none;
text-align:left;
border:1px solid #ccc;
}
#post .title{
border-left:5px solid brown;
line-height:1%!important;
margin:10px;
padding:10px;
font-weight:bold;
}

/* jirei */

#post .jirei{ list-style: none!important; display: block; margin: 5px; padding: 5px; border: 1px solid #eee; }
#post .jirei li{ list-style: none!important; padding: 5px; float: left; }
#post .jirei img{ max-width: 315px; max-height: 236px; text-align: center; }
#post .jirei span{ width: 420px; display: block; padding: 10px; line-height: 160%; }
#post .jirei p{ font-size: 90%; line-height: 160%; padding: 5px; }

/* list */

#cat-list{
width: 780px;
padding: 10px; margin-top: 5px; float: right;
}
#cat-list .cat-title{
margin:5px; padding: 5px;
font-size: 120%;
background-color: #7f0019;
}
#cat-list .cat-title span{ padding-left:10px; color: #FFF; }

#cat-list ul{ display: flex; margin: 0 auto; list-style: none; flex-wrap: wrap; }
#cat-list li{
width: 235px; min-height: 25px; margin: 10px; display: block; list-style: none;
}
#cat-list a{
width: 235px; min-height: 25px; display: block; padding-left: 5px;
font-size: 90%; font-weight: bold;
border-bottom: 1px solid #CCC;
}
#cat-list a:hover{ border-bottom: 1px solid brown; color: #666; }

#cat-list2{
width: 780px;
padding: 10px; margin-top: 5px; float: right;
}
#cat-list2 .cat-title{
margin:5px; padding: 5px;
font-size: 120%;
background-color: #7f0019;
}
#cat-list2 .cat-title span{ padding-left:10px; color: #FFF; }

#cat-list2 .explanation{
margin:10px 10px 0px 10px; padding: 10px;
border: 1px solid #CCC;
}
#cat-list2 .explanation span{ padding-left:20px; color: #666; }

#cat-list2 ul{ display: block; margin: 0 auto; list-style: none; }
#cat-list2 li{
width: 230px; height: 310px; float:left; margin: 10px 10px 5px 15px; display: block; list-style: none;
}
#cat-list2 a{
width: 230px; height: 310px; display: block;
border: 1px solid #CCC;
}
#cat-list2 a:hover{ border: 1px solid brown; color: #666; }
#cat-list2 .list-title{
width: 210px; height: 20px; display: block;
margin:5px; padding:5px;
font-size: 110%; font-weight: bold;
background-color: #dcdcdc;
}
#cat-list2 .list-img{
margin: 5px;
}
#cat-list2 img{ max-width: 220px; max-height: 147px;}
#cat-list2 .list-txt{
width: 210px; display: block;
margin: 5px; padding:5px;
font-size: 90%;
line-height: 180%;
}
#cat-list2 .list-price{
width: 250px; height: 30px; float:left;
font-size:90%; font-weight: bold; line-height: 140%;
color: red;
text-align: right;
}


#cat-list3{
width: 780px;
padding: 10px; margin-top: 5px; float: right;
}
#cat-list3 .cat-title{
margin:0px; padding: 0px;
font-size: 100%;
background-color: #7f0019;
}
#cat-list3 .cat-title span{ padding-left:10px; color: #FFF; }
#cat-list3 .list3{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#cat-list3 ul{ list-style: none; width: 32%; margin: 0 auto; }
#cat-list3 li{ margin: 10px; display: block; list-style: none; }
#cat-list3 a{ display: block; padding-left: 5px; font-size: 90%; font-weight: bold; border-bottom: 1px solid #CCC; }
#cat-list3 a:hover{ border-bottom: 1px solid brown; color: #666; }

#cat-list3 ul ul{ margin: 0 auto; list-style: none; width: 90%; }
#cat-list3 li li{ margin: 3px; display: block; list-style: none; }
#cat-list3 li li a{ padding-left: 10px; font-size: 90%; font-weight: bold; border-bottom: 1px dotted #CCC;  width: 95%; }
#cat-list3 li li a:hover{ border-bottom: 1px solid brown; color: #666; }

.sample-title{ margin: 3px 5px; padding: 0px 10px; background-color: #CCC; font-size: 95%; }
.sample-title2{ margin:0px 5px; padding: 0px 10px; border-bottom: 1px dotted brown; font-size: 85%; }

.list a{
width: 365px; height: 140px; float: left; display: block;
padding: 5px; margin: 5px;
border: 1px solid #CCC;
}
.list ul li{ list-style-type: none; }
.list .list-img{
width: 120px; height: 120px; float:left;
margin-right: 10px;
}
.list .list-img img{ max-width: 120px; max-height: 120px; }
.list .list-review{ width: 120px; height: 20px; float: left; padding: 2px; font-size: 80%; }
.list .list-ivent{
background-color: purple;
color: #FFF;
width: 100px; height: 20px; float:left;
font-size:80%;
text-align: center;
}
.list .list-news{
background-color: green;
color: #FFF;
width: 100px; height: 20px; float:left;
font-size:80%;
text-align: center;
}
.list .list-media{
background-color: orange;
color: #FFF;
width: 100px; height: 20px; float:left;
font-size:80%;
text-align: center;
}
.list .list-end{
background-color: red;
color: #FFF;
width: 100px; height: 20px; float:left;
font-size:80%;
text-align: center;
margin-left: 10px;
}
.list .list-title{
width: 230px; height: 80px; float:left;
line-height: 140%;
font-size:90%;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
line-break: strict;
}
.list .list-title2{
width: 230px; height: 80px; float:left;
line-height: 140%;
font-size:90%;
overflow: hidden;
margin-top: 10px;
}
.list .list-price{
width: 230px; height: 40px; float:left;
font-size:90%; font-weight: bold; line-height: 140%;
color: red;
text-align: right;
}

.list-sort{ padding: 10px; display: block; list-style: none; }
.list-sort li{ width: 110px; margin: 3px; float: right; }
.list-sort li span{ font-weight: bold; width: 110px; padding: 3px; display: block; }
.list-sort .sortby a{
width: 100px; padding: 3px; display: block;
text-align: center;
background-color: #7f0019; color: #fff;
border-style: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.list-sort a:hover{ background-color: #666; }

.list2 a{
width: 165px; height: 185px; float: left; display: block;
padding: 7px; margin: 7px;
border: 1px solid #CCC;
}
.list2 ul li{ list-style-type: none; }
.list2 .list-img{
width: 160px; height: 130px;
margin-right: 10px;
}
.list2 .list-img{ text-align: center; }
.list2 .list-img img{ max-width: 130px; max-height: 130px; margin: 0 auto; }
.list2 .list-title{
width: 165px; height: 30px;
line-height: 140%;
font-size:80%;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
line-break: strict;
}
.list2 .list-price{
width: 165px; height: 40px;
font-size:80%; font-weight: bold; line-height: 140%;
color: red;
text-align: center;
}

/* union */
.union { padding: 10px; border: 1px solid #CCC; margin: 5px; }
.union h5 { color: #FFF; background-color: brown; margin-bottom: -5px; padding: 10px; line-height: 120%; margin-top: 10px; }
.union ul { list-style: none!important; }
.union ul li { list-style: none; padding: 10px; margin: 5px; border: none; }
.union ul li .union-title { display: block; font-weight: bold; color: brown; }
.union ul li .union-area { display: block; font-size: 90%; background-color: #eee; padding: 10px; margin: 5px; line-height: 140%; }
.union ul li a { display: block; padding: 10px; color: #666!important; border: 1px solid #CCC!important; }
.union ul li a:hover { border: 1px solid brown!important; }

#post .right-box .price2{ margin-bottom: 10px; width:100%; }
#post .right-box .p-left2{ width: 25%; float: left; margin-bottom: 5px; text-align: right; font-size: 100%; }
#post .right-box .p-right2{ width: 70%;float: left; margin-bottom: 5px; font-size: 100%; }

/* contact form 7 */

form.wpcf7-form .form-txt  { ime-mode: active;}
form.wpcf7-form .form-notxt{ ime-mode: inactive;}

/* topics */

#topics { width: 100%;}
#topics .topics-title{
margin:5px; padding: 5px; margin-top: -2px;
font-size:110%; font-weight: bold;
display: block;
}
#topics .topics-title span{ border-left: 5px solid brown; padding-left:10px; }
#topics .topics-box li{
width: 310px; height: 100px;
margin: 0px 10px 10px 10px;  padding: 10px;
border: 1px solid #CCC;
list-style: none;
float:left;
}

#post .topics-box { margin: 10px 10px 20px 10px; }
#post .topics-box p { margin: 10px 0px 20px 0px; }
#post .topics-box .price2{ margin-bottom: 10px; width:100%; }
#post .topics-box .p-left2{ width: 20%; float: left; margin: 5px; padding: 5px; text-align: right; font-size: 100%; list-style: none; background-color: #eee; }
#post .topics-box .p-right2{ width: 70%;float: left; margin: 5px; padding: 5px; font-size: 100%; list-style: none; border: 1px solid #eee; }

#post .topics-box .topics-img { width: 200px; padding: 5px; margin: 10px; border: 1px solid #CCC; float: left; text-align: center; }
#post .topics-box .topics-img img { max-width: 200px; max-height: 200px; margin: 0 auto; }

#topics .topics-box .media{ border: 1px solid #bc8f8f!important; }
#topics .topics-box img{ height: 100px; border: 0; align: center; float:left; }
#topics .topics-box .txt{
width:190px; height: 60px;
padding: 10px;
float: left;
color: #696969; font-size: 80%;
line-height: 200%;
display: block;
}
#topics .topics-box .txt2{
width:80px; height: 20px;
margin-bottom: 10px; padding-bottom: 3px;
float: right;
background-color: #993333; color: #fff;
font-size: 80%; text-align: center;
display: block;
}
#topics .topics-box a {
color:blue;
border-bottom: 1px dotted #eee;
text-decoration:none;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
padding-bottom: 2px;
}
#topics .topics-box a:hover {
border-bottom: 1px dotted #666;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}

/* event */
#event { width: 100%; padding-top: 10px; }
#event .image{ margin: 10px; }
#event .image li{
display: block;
max-height: 200px; height: 200px;
float: left;
margin: 10px 20px 0px 0px;
list-style: none;
}
#event .image img{ border: 1px solid #CCC; max-height: 170px; height: 170px; align: center; }
#event .image .txt{
text-align: center;
width: 170px; height: 10px;
color: gray;
display: block;
}
#event .schedule{ width: 95%; margin: 5px; border: 1px solid #CCC;
}
#event .schedule table{ width: 100%; }
#event .schedule .td1{
width: 20%;
text-align: center; font-weight: bold;
background-color: lightgray;
color: dimgray;
}
#event .schedule .td2{
width: 80%;
text-align: left; padding-left: 10px;
border-bottom: 1px dotted lightgray;
}
#event a {
color:blue;
border-bottom: 1px dotted #eee;
text-decoration:none;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
padding-bottom: 2px;
}
#event a:hover {
border-bottom: 1px dotted #666;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
#event .syuryo {
width: 100%;
margin-top: 10px;
background-color: #993333;
color: #fff;
text-align: center;
}
#event .back {
width: 100%;
margin-top: 20px;
text-align: center;
display: block;
}

/* color-simulation */
#color-simulation { width: 100%; }

#color-simulation .door{
list-style: none;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#color-simulation .door img{
max-width: 50px;
max-height: 30px;
box-shadow: 2px 2px 2px #bdbdbd;
-moz-box-shadow: 2px 2px 2px #bdbdbd;
-webkit-box-shadow: 2px 2px 2px #bdbdbd;
margin: 3px;
}

#color-simulation .frontdoor-img{
max-width: 620px;
max-height: 315px;
}

/* form-link */

.form-link a{
display: block;
width: 30%;
padding: 5px;
margin: 4px;
border: 1px solid #767676;
text-align: center;
color: #494949;
font-weight: bold;
box-shadow: 2px 2px 2px #CCC;
-moz-box-shadow: 2px 2px 2px #CCC;
-webkit-box-shadow: 2px 2px 2px #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: -moz-linear-gradient(top,#ffffff 0%,#cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
}
.form-link a:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: -moz-linear-gradient(top,#FFFFFF, #91d3ce 50%,#80c3be 50%,#91d3ce);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5,#91d3ce),color-stop(0.5,#80c3be), to(#91d3ce));
}

/* txt-form */

.txt-form{
display: block;
width: 90%;
padding: 15px;
margin: 4px auto;
border: 1px solid #767676;
text-align: center;
font-size: 110%;
color: #FFFFFF!important;
font-weight: bold;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: -moz-linear-gradient(top,#c20026, #7f0019 50%,#7f0019 50%,#c20026);
background: -webkit-gradient(linear, left top, left bottom, from(#c20026), color-stop(0.5,#7f0019),color-stop(0.5,#7f0019), to(#c20026));
}
.txt-form:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: -moz-linear-gradient(top,#c20026, #c20026 50%,#c20026 50%,#c20026);
background: -webkit-gradient(linear, left top, left bottom, from(#c20026), color-stop(0.5,#c20026),color-stop(0.5,#c20026), to(#c20026));
}

.txt-form2{
display: block;
width: 70%;
padding: 15px;
margin: 4px auto;
border: 1px solid #767676;
text-align: center;
font-size: 110%;
color: #FFFFFF!important;
font-weight: bold;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
background-color: red;
font-size: 120%;
font-weight: bold;
}
.txt-form2:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #333;
}

/* koteipage-form */

.koteipage-form{
display: block;
width: 80%;
padding: 15px;
margin: 4px auto;
border: 1px solid #FFFFFF;
text-align: center;
font-size: 200%;
color: #FFFFFF!important;
font-weight: bold;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background-color: #f5021b;
}
.koteipage-form:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #e30531;
}

/* seminer-form */

.seminer-form{
display: block;
width: 80%;
padding: 15px;
margin: 4px auto;
border: 1px solid #FFFFFF;
text-align: center;
font-size: 200%;
color: #FFFFFF!important;
font-weight: bold;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background-color: #87CEEB;
}
.seminer-form:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #007FBF;
}

.seminer-link{
display: block;
width: 80%;
padding: 5px;
margin: 4px auto;
border: 1px solid #FFFFFF;
text-align: center;
font-size: 100%;
color: #FFFFFF!important;
font-weight: bold;
box-shadow: 4px 4px 4px #CCC;
-moz-box-shadow: 4px 4px 4px #CCC;
-webkit-box-shadow: 4px 4px 4px #CCC;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background-color: #3cb371;
}
.seminer-link:hover{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #228b22;
}


/* �Œ��y�[�W�F���ߐ؂����p */
dt { list-style: none; font-size: 110%; font-weight: bold; }
dd { list-style: none; }
.shime{ font-size: 140%; }



/* mypage cart info */

#vacation{
width: 1010px;
padding: 10px; margin: 5px 0px 5px 0px;
border: 1px solid #CCC;
}

#vacation .vacation-title{
margin:5px; padding: 5px; margin-top: -2px;
font-size:110%; font-weight: bold;
border-bottom: 1px solid #999;
}
#vacation .vacation-title span{ border-left: 5px solid brown; padding-left:10px; padding-right: 10px; }

#pdf{margin:auto; font-size:100%; line-height:200%; margin: 10px;}
#pdf a{ line-height: 280%; }
#pdf p{ margin-left: 20px; }
#pdf .mokuji{border:1px solid #CCC; margin: 5px; padding: 5px; }
#pdf .pdf-title{background-color: #666; color: #FFF; padding: 15px;}
#pdf .pdf-title a{background-color: #FFF; color: brown; font-size: 90%; padding: 5px; }
#pdf .pdf-sub{list-style: none; border-bottom: 1px solid brown; padding: 5px; margin-top: 10px; font-weight: bold;}
#pdf ul{margin-right: 10px;}
#pdf ul li{list-style: none; padding: 5px; }
#pdf ul ul li{list-style: none; margin-left: 10px; padding: 5px;}
#pdf ul ul ul li{list-style: none; margin-left: 10px; padding: 5px;}

#pdf2{margin:auto; font-size:90%; line-height:200%; margin: 10px;}
#pdf2 .mokuji{border:1px solid #CCC; margin: 5px; padding: 5px; }
#pdf2 .pdf-title{background-color: #666; color: #FFF; padding: 15px;}
#pdf2 .pdf-title a{background-color: #FFF; color: brown; font-size: 90%; padding: 5px; }
#pdf2 .pdf-sub{list-style: none; border-bottom: 1px solid brown; padding: 5px; font-weight: bold;}
#pdf2 ul{margin-right: 10px; border: 1px solid #CCC; padding: 5px;}
#pdf2 ul li{list-style: none; padding: 5px; font-weight: bold; margin: 0px; }
#pdf2 ul ul{border: none; padding: 0px;}
#pdf2 ul ul li{list-style: none; margin-left: 10px; display: block;}
#pdf2 ul ul li a{width: 100%; display: block; border-bottom: 1px dotted blue; padding: 3px;}
#pdf2 ul ul li a:hover{background-color: #E0F2F7;}
#pdf2 ul ul ul{border: none; padding: 0px;}
#pdf2 ul ul ul li{list-style: none; margin-left: 10px; display: block;}
#pdf2 ul ul ul li a{width: 100%; display: block; border-bottom: 1px dotted blue; padding: 3px;}
#pdf2 ul ul ul li a:hover{background-color: #E0F2F7;}


/* online soudan page */

.process1 {
	background-image: url("https://www.ok-depot.jp/img/online/online-7.png");
	background-repeat: no-repeat;
	text-align:center;
	margin:20px;
	width:200px;
}

.process2 {
	background-image: url("https://www.ok-depot.jp/img/online/online-8.png");
	background-repeat: no-repeat;
	text-align:center;
	margin:20px;
	width:200px;
}

/* ���n�X�R�[�g���ʌv�Z */

#product-in{
width: 90%; max-width: 900px;
margin: 0 auto; padding: 20px;
background-color: #FFF;
}
#product-in img{
max-width: 100%;
}
#product-in h1{
margin-top: -20px;
padding: 5px;
font-size: 90%;
text-align: left;
}
#product-in h2{
padding: 5px;
font-size: 140%;
color: #f59446;
text-shadow: 1px 2px 3px #CCC;
}
#product-in h3{
padding: 10px;
font-size: 110%;
text-align: center;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

#product-in .txt-box{
margin: 10px;
padding: 10px;
line-height: 160%;
}
#product-in .txt-box ol{
margin: 20px;
}
#product-in .txt-box2{
width: calc(90%/2);
float: left;
margin: 10px;
padding: 10px;
line-height: 160%;
}
#product-in .txt-box2 ul{
margin: 20px;
}
#product-in .img-box2{
width: calc(90%/2);
float: right;
margin: 10px;
padding: 10px;
}
#product-in .img-box2 img{
max-width: 100%;
}

#product-in form{
padding: 20px;
background-color: #CCC;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#product-in .total{
padding: 20px;
background-color: #f4f2f2;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#product-in form input[type="text"]{
font-size: 120%;
font-weight: bold;
text-align: center;
}
#product-in form input[type="button"],input[type="reset"]{
width: 80px;
padding: 3px;
margin: 5px;
font-weight: bold;
background: -moz-linear-gradient(top,#fff 50%,#ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5,#ccc));
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #767676;
}
#product-in form select{
padding: 5px;
}

/* lohascoat-contents
----------------------------------------------------------- */

/* ��flot */

#lohascoat-contents {
width: 90%; max-width: 900px;
margin: 0 auto; padding: 20px;
background-color: #FFF;
}

#lohascoat-contents h3{
padding: 10px;
font-size: 110%;
text-align: center;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

#lohascoat-contents .type-img{
margin: 0 0 30px 0;
text-align: center;
}

#lohascoat-contents .type{
font-weight: bold;
padding: 5px;
font-size: 110%;
text-align: center;
border: 1px solid #CCC;
border-radius: 4px;
}

#index-sub-contents-left2 div { margin: 5px ;padding: 10px; }

.merit-bm { border-bottom: 1px dotted #109cda; border-top: 1px dotted #109cda; }
.merit-bm2 { border-bottom: 1px dotted #109cda; }

.item {
text-align: center;
color: #109cda;
}





/*OK-DEPOT�I���W�i������PDF�f�[�^�@�����_�E�����[�h�i���J�p�j*/
html{
    scroll-behavior: smooth;
}
.gotop{
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}
.gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
.gotop:hover{
    opacity: 1;
}
@media(max-width:750px){
    .gotop{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        opacity: 1;
        border: none;
        background: none;
        bottom: 10px;
        right: 10px;
    }
    .gotop::before{
        bottom: 0;
    }
}