@charset "utf-8";

@import url("reset.css");


/**************************************************
 * ANIMATION
 **************************************************/

/*ベーシック*/
@keyframes basic-animation{
    from{opacity:0;}
    to{opacity:1;}
}

/*　TOPスクロール　*/
@keyframes slider-animation{
    0%{margin-left:0px;}
    50%{margin-left:-6660px;}
    100%{margin-left:0px;}
}

/* TOP-メニュー表示用 */
@keyframes popup-animation{
    0%{margin-left:0px;}
    50%{margin-left:-7400px;}
    100%{margin-left:0px;}
}

/*TOPドロップダウンメニュー用(スマホ対応共通？)*/





/**************************************************
 * BASE
 **************************************************/

img{
  -webkit-user-select: none;  /* Chrome or Safari */
  -moz-user-select: none;     /* FireFox */
  -ms-user-select: none;      /* IE */
  -o-user-select: none;       /* Opera */
  user-select:none;
}

html {
        background-color:rgba(247,247,247,255);
/*	background:url(../img/common/bg.jpg) center repeat;*/
        height:100%;
        /*以下アニメーション処理*/
        animation-name:basic-animation;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode: both;
}
body {
	color:#000;
	line-height:1.5;
        height:100%;
}
#wrap {
	position:relative;
        margin: 120px auto;
        width:100%;
        height:100%;
}

#wrap_2 {
	position:relative;
        margin: 80px auto;
        width:100%;
        height:100%;
}

#top_contents {
	position:relative;
/*	width:960px;*/
	width:100%;
        height:auto;
	margin:0 auto;
        z-index:3;
}

#contents {
	position:relative;
	width:960px;
        height:auto;
	margin:0 auto 100px;
        z-index:3;
}

#tit {
	position:absolute;
	top:30px;
	right:0;
}
#path {
	padding:20px 0;
}
.red {
	color:#B20000;
}
#path a {
	color:#B20000;
}
#pagetit {
         width:322px; 
         height:24px;
	margin-top:30px;
	margin-bottom:10px;
}
section h3 {
        max-width:960px;
        min-width:960px;
	margin-top:25px;
	padding-bottom:5px;
	background:url(../img/products/line.png) left bottom no-repeat;
}
.shadow-box {
	margin:0 -5px -5px -5px;
        max-width:920px;
        min-width:920px;
	width:920px;
	padding:20px 25px 25px 25px;
        background-color: white;
	/*background:url(../img/common/shadow_bg.png) center bottom no-repeat;*/
}
#contents table {
	width:100%;
	border-spacing:0;
	border-collapse:separate;
	border-bottom:1px solid #333;
	border-top:1px solid #000;
}
#contents th {
	width:120px;
	text-align:center;
	font-weight:normal;
	vertical-align:top;
	white-space:nowrap;
}
#contents th,
#contents td {
	border-top:1px solid #333;
	border-bottom:1px solid #000;
	padding:10px 0;
}
#contents th span {
	display:block;
	padding:0 10px;
	border-right:1px solid #333;
}
#contents td span {
	display:block;
	padding:0 10px;
	border-left:1px solid #000;
}
#contents th span.red {
	display:inline;
	padding:0;
	border:none;
}
#contents td a {
	color:#B20000;
}
#contents td a:hover {
	color:#000;
}

.mt10 {margin-top:10px!important;}

/*20180508*/
.flex-between{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	
    display: flex;

    flex-wrap: wrap;
    justify-content:space-around; 
}
/*20180508*/
.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	
    display: flex;	
 
}

.flex-nowarp{
    flex-wrap: nowrap;
}


.flex-bas{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;     
}


/*20180508*/
.vertical{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/**************************************************
 * header
 **************************************************/

header {
	position:relative;
/*	min-width:960px;*/
        position:fixed;
        top:0px; 
	min-width:100%;
	text-align:center;
	background:rgba(255,255,255,1);
        z-index: 99;
	border-bottom:2px solid #6A6A6A;
}

header #information{
        position:fixed;
        top:50px; 
        left:0px;
}

#logo {
        position:relative;
        height:auto;
        max-width:765px;
        margin:0 0;
	padding:0 0 0 0;
/*	border-bottom:2px solid #6A6A6A;*/
}

#logo a img{
        position:relative;
}

nav {
	background:url(../img/common/gnav_bg.png) center center repeat;
}
nav ul {
/*	width:960px;*/
	width:100%;
	margin:0 auto;
}
nav li {
	float:left;
}

.submenu{
    min-width:728px;
}

/*ドロップダウンメニュー*/
.dropdown_menu{
    position:absolute;
    padding:0px auto;
    width:auto;
    cursor: default;
}

.menu_list{
    position:absolute;
    font-size:16px;
    padding:30px auto;
    text-align:left;
    width:200px;
    display:none;
}

.menu_list li{
    font-size:16px;
    height:50px;
    border:1px solid rgba(120,120,120,255);
    background:url(../img/common/gnav_bg.png) center center repeat;
    
}

.dropdown_menu:hover >.menu_list,menu_list:hover{
    display:block;
}

/**************************************************
 * footer
 **************************************************/

#pagetop {
/*	width:960px;*/
	width:100%;
	margin:70px auto 0 auto;
	text-align:right;
}
footer {
/*	min-width:960px;*/
	min-width:100%;
	text-align:center;
	padding:0px 0;
	background:rgba(255,255,255,0.8);
        position:fixed;
        bottom:0px;
        z-index:99;
}

footer div{
    text-align:right;
    position:relative;
    left:0%;
    top:-28px;
}

/*メールフォーム専用（擬似フッター）*/
.footer_dummy{
    width:100%;
    text-align: center;
	padding:0px 0;
	background:rgba(255,255,255,1);
        position:relative;
        bottom:0px;
        z-index:99;
}

.footer_dummy div{
    text-align:right;
    position:relative;
    left:0%;
    top:-28px;
}

/*
footer address {
/*	width:670px;
	width:50%;
	height:38px;
	margin:0 auto;
	padding:-30px 0 20px 290px;
	font-size:12px;
	font-style:normal;
	line-height:1.3;
	background:url(/img/f_logo.png) left 20px no-repeat;
}*/

/**************************************************
 * home
 **************************************************/

#home {
	width:100%;
	height:80%;
}

#title {
        position:relative;
        text-align: left;
	height:38px;
	padding:0px 0;
}

#sel_main {
	position:relative;
/*	width:960px;
        min-height:205px;
        max-height:410px;*/
        width:90%;
        max-width:960px;
        height:auto;
        text-align: center;
        margin:15px auto 0px auto;
        background-color: white;
        display:flex;
        overflow:hidden;
        /*影*/
        box-shadow: 5px 5px 5px 5px rgba(200,200,200,4);
        /*ボーダーライン*/
        border:1px solid rgba(120,120,120,255);
}

#sel_main .details-rows{
    left:0px;
    width:100%;
    height: auto;
    justify-content: flex-start;
    flex-direction: row;
    margin-left: 0%;
    /*以下アニメーション処理
    animation-name:slider-animation;
    animation-duration: 300s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;*/
}

#sel_main .details-block{
    border:1px solid rgba(240,240,240,255);
}

#sel_main a > .main_img{
    position:relative;
    top:-24px;
    left:auto;
/*    z-index:50;*/
}

.sp-previous-arrow:before,
.sp-previous-arrow:after,
.sp-next-arrow:before,
.sp-next-arrow:after {
/*	content: '';
	position: absolute;*/
        width: 100%;
	height: 50%;
	background-color: rgba(128,128,128,0.6);
/*        z-index:52;*/
}

#sel_main .details-block a > .top_tit{
    top:0px;
/*    z-index:51;*/
}

#sel_main .details-block a > .top_img{
    width:auto;
    height:533px;
}

#main{
	position:relative;
	margin:10px auto auto auto;
	width:50%;
        height:auto;
        display:flex;
        flex-direction: column;
 
}

#main #information{
        position:relative;
        margin:0px auto;
        max-width:232px;
        max-height:50px;
        width:50%;
        height:auto;
}

#doc_main{
	margin:0px auto;
        min-width:465px;
        min-height:auto;
        text-align:left;
	width:100%;
}

#doc_main img.pngfix{
	position:relative;
        width:425px; 
        height:45px;
	margin:10px auto;
}

#doc_main p.txt {
	position:relative;
	top:10px;
	left:10px;
        min-width:465px;
	max-width:740px;
/*	width:60%;*/
	font-size:14px;
}

#main p.btn {
	position:absolute;
/*	width:960px;*/
	width:100%;
	bottom:49px;
	text-align:center;
	text-align:center;
}

#doc_main_about{
    position:relative;
    min-width:465px;
    width:100%;
    text-align:left;
}

div#about_title{
    position:relative;
/*    border:10px solid black;*/
    margin:0 auto 0 auto;
    width:100%;
    height:30px;
    text-align:right;
    background: linear-gradient(to right,rgba(0,0,0,0),rgba(180,0,0,1));
}

div#about_title img{
    position:relative;
    height:30px;
}

div#about_image{
    position:relative;
    padding-top:20px;
}

#about_text{
    position:relative;
    width:100%;
    padding: 0%,auto;
    font-size: 14px;
}

/*#main h2 {
	position:absolute;
	top:50px;
	right:10px;
/*	width:860px;
	width:90%;
	height:469px;
}*/

/*#main h3 {
	position:absolute;
	top:420px;
	left:10px;
}*/

/**************************************************
 * sub
 **************************************************/

#product-list {
	position:relative;
	width:1050px;
        height:auto;
	margin-top:0px;
	margin-right:-15px;
}

#product-list li {
	float:left;
/*	width:180px;*/
	width:18%;
	margin:50px 15px 0 0;
	text-align:center;
}
#product-list div .img{
        width:20%;
        height:auto;
	display:block;
	text-decoration:none;
}

.product-detail{
        width:80%;
}

.product-detail .image {
        max-width:960px;
        min-width:960px;
        background-color: white;
	text-align:center;
        box-shadow: 10px 10px 10px 10px rgba(200,200,200,0.5);
        border:1px solid rgba(180,180,180,255);
        
}

.product-detail .image .remarks{
    position:relative;
    top:390px;
    right:0px;
    font-size: 12px;
}

.product-detail h3{
        min-width:960px;
}

#product-list .selecting{
        border:1px solid rgba(200,200,200,255);
        max-width:180px;
        min-width:200px;
        max-height:200px;
        min-height:180px;
        background-color: white;
}

#product-list .selecting img{
        max-width:180px;
        min-width:180px;
        max-height:180px;
        min-height:180px;
}

#product-list .selecting:hover{
        border:1px solid rgba(255,0,0,255);
}

#spec-list dt {
	border-top:1px solid #333;
	padding-top:20px;
	padding-bottom:10px;
}
#spec-list dd {
	padding:0 0 0 15px;
	border-bottom:1px solid #000;
	padding-bottom:15px;
}
#spec-list .none {
	border:none;
	padding-top:0,auto;
}
.spec-catch {
	position:relative;
	margin-top:40px;
	min-height:320px;
	height:auto!important;
	height:320px;
}
.spec-catch .inner {
/*	width:420px;*/
	width:50%;
}

#products #sec01 .inner{
    width:110%;
}

#products #sec010101 .inner {
	margin:30px 0 0 520px;
}
#products #sec010102 .inner {
	margin:30px 0 0 30px;
}
.spec-catch  figure {
	position:absolute;
	top:0;
	text-align:center;
}
.spec-catch  figcaption {
	margin-top:10px;
}
#products #sec010101 figure {
	left:0;
}
#products #sec010102 figure {
	right:0;
}
.shadow-box-spec {
        background-color: rgba(217,217,217,1.0);
/*	background:url(../img/products/spec_bg.png) center bottom no-repeat;*/
}
.shadow-box-movie {
        background-color: rgba(217,217,217,1.0);
        /*background:url(../img/products/movie_bg.png) center bottom no-repeat;*/
	text-align:center;
}
#mainswf{
        z-index: 50;
}


#back-btn {
	text-align:center;
	margin-top:20px;
}
.tbox {
	border:1px solid #CCC;
	padding:4px;
}
.taria{
        resize: none;
}
#confirmWindow {
	color:#000!important;
}
#about #sec010101 .inner {
	margin:30px 0 0 520px;
}
#about #sec010102 .inner {
	margin:30px 0 0 30px;
}
.spec-catch  figure {
	position:absolute;
	top:0;
	text-align:center;
}
.spec-catch  figcaption {
	margin-top:10px;
}
/*
#about #sec010101 figure {
	left:0;
}
#about #sec010102 figure {
	right:0;
}*/