@charset "utf-8";
/* CSS Document */



/*-----------------------------
		common
  -----------------------------*/

body{
	font-family: Roboto, "Noto Sans Japanese", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
}

ul{	
	list-style: none;	
	margin-left: 0;
}
ul.sytleDisc{
	list-style: disc;
}

section > .flex > *{
	padding: 0 2%;
}
@media screen and (max-width: 360px){
	section > .flex > *{
		padding: 0 4%;
	}
}

img {
    display: block;
		width: 100%;
    max-width: 100%;
    height: auto;
}
a:hover img{
	opacity: 0.8;
}

h1, h2, h3, h4, h5, h6, strong, .fwB{
	font-weight: bold;
}

.headding h2, h2.headding{
	font-size: 1.6em;
	font-weight: normal;
	letter-spacing: 0.02em;
}
.headding h3, h3.headding{
	font-weight: normal;
	font-size: 1em;
	line-height: 1.2em;
}
.headding h2 + h3{
	padding-top: 0;
}
.headding small{
	padding-left: 1em;
}

.headding h4, h4.headding{
	font-weight: normal;
	font-size: 1.1em;
	line-height: 1.2em;
	margin-top: 1em;
}
.headding h4:after, h4.headding:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(51,51,51), transparent);
	background: -webkit-linear-gradient(to right, rgb(51,51,51), transparent);
	background: linear-gradient(to right, rgb(51,51,51), transparent);
}

.headdingLineDGray:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(51,51,51), transparent);
	background: -webkit-linear-gradient(to right, rgb(51,51,51), transparent);
	background: linear-gradient(to right, rgb(51,51,51), transparent);
}
.headdingLineLGray:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(204,204,204), transparent);
	background: -webkit-linear-gradient(to right, rgb(204,204,204), transparent);
	background: linear-gradient(to right, rgb(204,204,204), transparent);
}
.headdingLineBlue:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(0,0,153), transparent);
	background: -webkit-linear-gradient(to right, rgb(0,0,153), transparent);
	background: linear-gradient(to right, rgb(0,0,153), transparent);
}
.headdingLineRed:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(221,0,17), transparent);
	background: -webkit-linear-gradient(to right, rgb(221,0,17), transparent);
	background: linear-gradient(to right, rgb(221,0,17), transparent);
}

@media screen and (min-width: 500px){
	.headding h3, h3.headding{
		font-size: 1.1em;
	}
	.headding h4, h4.headding{
		font-size: 1.2em;
	}
}

.wrap{
	margin: 0 auto;
	padding: 0 2%;
}

.dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px;
}
.dl-horizontal dd:before, 
.dl-horizontal dd:after{
    display: table;
    content: " ";
}
.dl-horizontal dd:after{
    clear: both;
}

a.underline{
	text-decoration: underline;
}
a.underline:hover{
	text-decoration: none;
}

.baseline{	align-items: baseline;	}
.flex-end{	align-items: flex-end;	}
.flex-start{	align-items: flex-start;	}

.dgray.button{
	background-color: #333;
}
.red.button{
	background-color: #d01;
}

.mainButton{	font-size: 1.5em; }

.tcLGray{	color: #999; }
.tcRed{		color: #d01; }
.tcBlue{	color: #009; }

.taL{ text-align: left; }
.taC{ text-align: center; }
.taR{ text-align: right; }

.mtx1{	margin-top: 1em !important; }
.mtx2{	margin-top: 2em !important; }
.mtx3{	margin-top: 3em !important; }

.fs150{	font-size: 1.5em; }

ul.inlineList li{
	display: inline-block;
	margin-right: 1em;
}

ul.styleCircle li{
	list-style-type: circle;
}
ul.styleDisc li{
	list-style-type: disc;
}

.indent1em{
	text-indent: -1em;
	padding-left: 1em;
}
.indent1emFw{
	text-indent: -1.25em;
	padding-left: 2em;
}

.textbox{
	background-color: #eee;
	color: #000;
	border: thin solid #ddd;
	padding: 1em;
	margin: 1em auto;
}

/*-----------------------------
		ページヘッダー
  -----------------------------*/

header h1{
	padding: 0.2em;
	max-width: 250px;
}
header .another h1{
	max-width: 200px;
}

header #top #navTopBtn{
	padding-left: 0;
}
header #top ul{
	text-align: right;
	margin: 1em auto 0.2em;
}
header #top ul li{
	display: inline-block;
	font-size: 0.75em;
}

@media screen and (min-width: 1000px){
	#top{
		padding: 0.6em 10% 0.4em;
	}
}


/*-----------------------------
		グローバルナビ
  -----------------------------*/
	
[type] + .toggle{
  color: #fff;
	border: thin solid #ccc;
}

#gnav{
	background-color: #009;
	color: #fff;
}

#gnav ul{
	margin: 0 auto;
}
	
#gnav ul li{
	position: relative;
	display: inline-block;
	margin: 0.3em 0;
	padding: 0.6em 0.6em 0.3em;
	font-size: 1.06em;
	line-height: 0.9em;
	vertical-align: middle;
}
#gnav ul li#gnav_p00{
	display: none;
}
#gnav ul li a{
	display: block;
	color: #fff;
	transition: all 0.3s;
	height: auto;
	vertical-align: baseline;
}
#gnav ul li a:hover,
#gnav ul li a:focus{
	color: #ccc;
}
#gnav ul li a span{
	font-size: 0.6em;
	opacity: 0.8;
}

nav .menu {
	text-align: center;
	position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%); 
}

@media screen and (max-width: 60em) {

  nav .menu {
    float: right;
		text-align: left;
	}
	nav .burger ~ .menu {
    background: #009;
	}
	#gnav ul{
		padding-left: 1em;
	}	
	#gnav ul li{
		display: block;
	}
	#gnav ul li.indent{
		margin-left: 1em;
	}
	#gnav ul li a span{
		padding-left: 1em;
	}
	
	#gnav ul li#gnav_p00{
		display: inline-block;
		font-size: 0.9em;
	}
}
@media screen and (max-width: 60em) and (min-width: 360px) {
	#gnav ul li a span br{
		display: none;
	}
}
	
body#home 			#gnav_home a{	color: #cff; }
body#news 			#gnav_news a{	color: #cff; }
body#full-auto 	#gnav_p01 a{	color: #cff; }
body#roll-type 	#gnav_p02 a{	color: #cff; }
body#pouch-type #gnav_p03 a{	color: #cff; }
body#film 			#gnav_p04 a{	color: #cff; }
body#support		#gnav_support a{	color: #cff; }
body#contact		#gnav_contact a{	color: #cff; }


.underMaintenance:before{
	content: "";
	display: block;
	background-color: #009;
	height: 3em;
}
.underMaintenance{
	padding-bottom:	3em;
}


/*-----------------------------
		パンくずリスト
  -----------------------------*/

#breadcrumb {
  overflow: hidden;
	font-size: 0.8em;
	padding: 0.2em 0.3em;
}
#breadcrumb ul li{
  display:inline;
}
#breadcrumb ul li::after{
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
	font-weight: bold;
  padding: 0 0.4em;
}
#breadcrumb ul li:last-child::after{
  content: '';
}
#breadcrumb ul li:first-child a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f015";
	font-weight: bold;
	padding-right: 0.1em;
}
#breadcrumb ul li a:hover {
    text-decoration: underline;
}

@media screen and (min-width: 1000px){
	#breadcrumb {
		padding: 0.6em 11% 0.4em;
	}
}


/*-----------------------------
		ページフッター
  -----------------------------*/

#pageTop{
	text-align: right;
	margin-top: 3em;
	margin-right: 10%;
}
#pageTop.justified{
  margin-right: 2%;
}
#pageTop a{
	color: #333;
}
#pageTop a:hover{
	color: #666;
}
#pageFooter{
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 1em 0;
}

#footerInfo{
	background-color: #009;
	color: #fff;
	font-size: 0.8em;
	padding: 0.2em 0;
}
#footerInfo a{
	color: #fff;
}
#footerInfo a:hover,
#footerInfo a:focus{
	color: #ccc;
}
#footerInfo ul{
	padding-left: 1em;
}
#footerInfo ul li{
	margin-right: 1em;
	vertical-align: middle;
	line-height: 2em;
}
#footerInfo .logo{
	max-width: 110px;
}
@media screen and (max-width: 499px){
	#footerInfo ul li{
		margin: 1em auto;
	}
}
@media screen and (min-width: 500px){
	#footerInfo ul li{
		display: inline-block;
	}
}
@media screen and (min-width: 1000px){
	#footerInfo{
		padding: 0.2em 10%;
	}
}


/*-----------------------------
		home(index.html)
  -----------------------------*/
	
#visual{
	background-color: #000;
	background-image: url(../images/home/visual_img.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
  position: relative;
	min-height: 24em;
	display: none;
}
@media screen and (min-width: 500px){
	#visual{
		display: block;
	}
}
@media screen and (min-width: 500px) and (max-width: 699px){
	#visual{
		background-size: 150%;
		min-height: 18em;
	}	
}
@media screen and (min-width: 700px) and (max-width: 60em){
	#visual{
		background-size: 130%;
		min-height: 20em;
	}	
}
@media screen and (min-width: 1400px){
	#visual{
		background-size: 90%;
	}
}
#visual .bg{
	background-color: rgba(102,102,102,0.6); 
	position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
	transform: translateY(-50%); 
}
#visual .headding{
	font-size: 1.2em;
}


.menuBnrBox{
	background-color: #000;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	position: relative;
	min-height: 14em;
}
#menuBnrBox_01{
	background-image: url(../images/home/menuBnr_bg_01.png);
	background-position: top center;
}
#menuBnrBox_02{
	background-image: url(../images/home/menuBnr_bg_02.png);
	background-position: top center;
}
#menuBnrBox_03{
	background-image: url(../images/home/menuBnr_bg_03.png);
}
#menuBnrBox_04{
	background-image: url(../images/home/menuBnr_bg_04.png);
}
.menuBnrBox a{
	display: block;
}
.menuBnrBox a:hover h2{
	opacity: 0.9;
}
.menuBnrBox a:hover .ruby{
	font-weight: bold;
}

.menuBnrBox .title{
	position: absolute;
		top: 10%;
		-webkit-transform: translateY(-10%);
		left: 50%;
		-webkit-transform: translateX(-50%);
	transform: translateY(-10%) translateX(-50%); 
}
.menuBnrBox .sub{
	position: absolute;
		top: 90%;
		-webkit-transform: translateY(-90%);
		left: 50%;
		-webkit-transform: translateX(-50%);
	transform: translateY(-90%) translateX(-50%); 
}
.menuBnrBox h2{
	color: #fff;
	font-size: 1.6em;
	font-weight: normal;
	line-height: 1.4em;
	letter-spacing: 0.02em;
	text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px, rgba(0, 0, 0, 0.8) -1px -1px 1px;
	padding-top: 0;
}
.menuBnrBox .ruby{
	color: #fff;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.2em;
	letter-spacing: 0.02em;
	border-top: thin solid #fff;
	padding-top: 0.5em;
	text-align: center;
}
.menuBnrBox .button{
	font-size: 92%;
}

.menuBnrBox#menuBnrBox_05 h2{
	font-size: 1.1em;
}
.menuBnrBox#menuBnrBox_05 h2 span{
	font-size: 0.9em;
}
@media screen and (max-width: 359px){
	.menuBnrBox h2{
		font-size: 1.4em;
	}
	.menuBnrBox .button{
		font-size: 0.9em;
	}
}
@media screen and (min-width: 360px) and (max-width: 499px){
	.menuBnrBox{
		min-height: 14em;
	}
	.menuBnrBox .title{
		position: absolute;
			top: 15%;
			-webkit-transform: translateY(-15%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-15%) translateX(-50%); 
	}
}
@media screen and (min-width: 500px){
	.menuBnrBox{
		min-height: 16em;
		background-size: auto;
	}
	.menuBnrBox .title{
		position: absolute;
			top: 10%;
			-webkit-transform: translateY(-10%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-10%) translateX(-50%); 
	}
}
@media screen and (max-width: 799px){
	.menuBnrBox{
		text-align: center;
	}

	#menuBnrBox_01 .ruby .hidden{
		display: none;
	}
	#menuBnrBox_05 .title{
		position: absolute;
			top: 30%;
			-webkit-transform: translateY(-30%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-30%) translateX(-50%); 
	}
}
@media screen and (min-width: 800px){
	.menuBnrBox{
		min-height: 20em;
	}
	.menuBnrBox .title{
		position: absolute;
			top: 10%;
			-webkit-transform: translateY(-10%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(10%) translateX(-50%); 
	}
	.menuBnrBox .sub{
		position: absolute;
			top: 90%;
			-webkit-transform: translateY(-90%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-90%) translateX(-50%); 
	}
	#menuBnrBox_05{
		min-height: 10em;
	}
}
@media screen and (min-width: 800px) and (max-width: 1199px){
	.menuBnrBox .button{
		font-size: 0.8em;
		padding: 0.3em 0.6em;
	}	
}
@media screen and (min-width: 1100px){
	#menuBnrBox_01 .ruby .hidden{
		display: none;
	}
}
@media screen and (max-width: 999px){
	#menuBnrBox_05{
		min-height: 8em;
	}
	#menuBnrBox_05 img{
		max-width: 160px;
	}
}
@media screen and (min-width: 1000px){
	.menuBnrBox{
		min-height: 18em;
	}
	.menuBnrBox .title{
		position: absolute;
			top: 10%;
			-webkit-transform: translateY(-10%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-10%) translateX(-50%); 
	}
	.menuBnrBox .sub_yt{
		position: absolute;
			top: 50%;
			-webkit-transform: translateY(-50%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-50%) translateX(-50%); 
	}
	.menuBnrBox#menuBnrBox_05 .yt_logo{
		margin-top: 1.5em;
	}
}
@media screen and (min-width: 1000px) and (max-width: 1099px){
	.menuBnrBox#menuBnrBox_05 h2{
		font-size: 1em;
	}
}
@media screen and (min-width: 1400px){
	.menuBnrBox{
		min-height: 18em;
	}
	.menuBnrBox .title{
		position: absolute;
			top: 20%;
			-webkit-transform: translateY(-20%);
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateY(-20%) translateX(-50%); 
	}
}

#newsArea{
	margin-top: 2em;
}
#newsArea h2.headding{
	font-size: 2em;
	text-align: center;
	border-bottom: 1px solid #999;
}
#newsArea h3{
	font-size: 1em;
	padding: 0.2em 0;
}
#newsArea p{
	margin: 0.2em 0;
	font-size: 0.9em;
}
#newsArea .date{
	color: #666;
}
#newsArea .newsBox{
	margin: 2em 1em 4em;
}
@media screen and (min-width: 800px){
	#newsArea, #cubic, #bplog{
		padding: 0 6%;
	}
}
@media screen and (min-width: 1000px){
	#newsArea, #cubic, #bplog{
		padding: 0 16%;
	}
}
@media screen and (min-width: 1400px){
	#newsArea, #cubic, #bplog{
		padding: 0 26%;
	}
}

#cubic .wrapInner{
	border: 1px solid #ccc;
	padding: 1em 2em;
}
#cubic h2{
	font-size: 1.2em;
	font-weight: 500;
	margin: 2em auto;
}
#cubic dl dt{
	margin: 2em auto 1em;
	font-weight: 700;
}
#cubic dl dd{
	margin-left: 1em;
}
#cubic img{
	max-width: 248px;
	margin: 1em;
}
#cubic .indentBox p{
	text-indent: 1em;
	margin: 0;
}
#cubic .textbox{
	color: #009;
	font-size: 1.1em;
}
@media screen and (max-width: 500px){
	#cubic .wrapInner{
		font-size: 0.9em;
	}
}
@media screen and (min-width: 600px){
	#cubic h2{
		text-align: center;
	}
}

/*-----------------------------
		製品情報 - ラミネーター
  -----------------------------*/
	
#product .flex{
	align-items: center;
}
#product ul.listMenu{
	margin-bottom: 2em;
	padding-left: 0;
}
#product ul.listMenu li{
	font-size: 1.1em;
	letter-spacing: 0.06em;
	display: inline-block;
	margin-right: 0.6em;
}
#product ul.listMenu li a{
	padding-right: 1.2em;
}

.productBox a{
	display: block;
}
.productBox p{
	margin: 0;
}

.productName{
	font-size: 1.3em;
	text-align: right;
}
@media screen and (max-width: 499px){
	.productBox{
		margin-bottom: 3em;
	}
}
@media screen and (max-width: 599px){
	.productName{
		font-size: 1.1em;
	}
	.productBox > a > p > img{
		padding: 0 0.5em; 
	}
	.productBox .button{
		font-size: 0.9em;
	}
}
@media screen and (min-width: 600px){
	.productBox{
		max-width: 360px;
	}
	.productBox > a > p > img{
		padding: 0 0.6em; 
	}
	.productBox > a > p{
		text-align: center;
	}
	.productBox > a > p > img{
		max-width: 320px;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1200px){
	.productBox{
		max-width: 360px;
	}
}

@media screen and (max-width: 699px){
	#product .headding h4 small:before{
		content: '';
		display: block;
		height: 1px;
	}
}

/*-----------------------------
		製品詳細 - ラミネーター
  -----------------------------*/

#productDetails header{
	border-bottom: 3px solid #ccc;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px;
}

#productDetails header h2{
	font-size: 1.5em;
}
#productDetails header p{
	font-size: 0.9em;
	padding-top: 0.2em;
}
#productDetails header ul.btn-list{
	text-align: center;
}
#productDetails header .infoEnd{
	color: #999;
	border: 1px solid #999;
	padding: 1em;
	margin-bottom: 1em;
}


#productImg .flexslider{
	margin-bottom: 1em;
}
#productImg .flex-control-thumbs{
  display: -ms-flexbox;
	-js-display: flex;
	display: flex;
	flex-direction: row;
}
#productImg .flex-control-thumbs li{
	flex: 0 0 auto;
	border: 1px solid #ccc;
	margin: 1%;
}

#productDetails .youtubeArea{
	margin: 2em auto;
	border-bottom: 3px solid #ccc;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0px;
}
#productDetails .youtubeBox p{
	margin: 0 auto 1em;
	text-align: center;
}
#productDetails .youtubeBox iframe{
	position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
	transform: translateX(-50%); 
	max-width: 100%;
}

#productDetails .spec{
	font-size: 0.9em;
	margin-top: 2em;
}
#productDetails .spec > div{
	margin-bottom: 2em;
}
#productDetails .spec h3{
}
#productDetails .spec h3:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(204,204,204), transparent);
	background: -webkit-linear-gradient(to right, rgb(204,204,204), transparent);
	background: linear-gradient(to right, rgb(204,204,204), transparent);
}
#productDetails .spec dl dt{
	font-weight: bold;	
}
#productDetails .spec dl dd{
	margin: 0 0 1em;
}
#productDetails .spec dl ul{
	margin-top: 0;
	padding: 0;
}
#productDetails .spec dl ul li{
	display: inline-block;
}
#productDetails .spec dl ul li::after{
  content: '、';
}
#productDetails .spec dl ul li:last-child::after{
  content: '';
}
#productDetails .spec ul{
	padding-left: 0;
}

@media screen and (max-width: 599px){
	#productImg .slides{
		width: 80%;
		float: right;
	}
	#productImg .flex-control-thumbs{
		width: 20%;
		flex-direction: column;
	}
	#productImg .flex-control-thumbs li{
		width: 80%;
	}
}
@media screen and (min-width: 600px){
	#productDetails header h2{
		text-align: right;
		padding-right: 1em;
	}

	#productImg .slides{
		width: 60%;
		float: right;
	}
	#productImg .flex-control-thumbs{
		width: 36%;
		margin-right: 4%;
		flex-wrap: wrap;
	}
	#productImg .flex-control-thumbs li{
		width: 48%;
	}
}
@media screen and (max-width: 699px){
	#productDetails .youtubeBox{
		position: relative;
			left: 50%;
			-webkit-transform: translateX(-50%);
		transform: translateX(-50%); 
	}
}
@media screen and (max-width: 999px){
	#productDetails header ul.btn-list li{
		display: inline-block;
	}	
}
@media screen and (min-width: 1000px){
	#productDetails {
		padding: 0.6em 10% 0.4em;
	}
}
@media screen and (min-width: 1000px) and (max-width: 1099px){
	#productDetails header ul.btn-list{
		font-size: 90%;
	}
}
@media screen and (min-width: 1400px){
	#productImg .slides{
		max-width: 560px;
		width: 50%;
		float: right;
	}
	#productImg .flex-control-thumbs{
		width: 40%;
		padding-left: 10%;
		flex-wrap: wrap;
	}
	#productImg .flex-control-thumbs li{
		width: 48%;
	}
}


/*-----------------------------
		製品情報 - フィルム
		製品詳細 - フィルム 		
  -----------------------------*/

#film ul.listMenu{
	margin-bottom: 2em;
	padding-left: 0;
}
#film ul.listMenu li{
	font-size: 1.1em;
	letter-spacing: 0.06em;
	display: inline-block;
	margin-right: 0.6em;
}
#film ul.listMenu li a{
	padding-right: 1.2em;
}
	
.filmBox a{
	display: block;
	color: #333;
}
.filmBox p{
	margin: 0;
}
.filmBox .inner{
	font-size: 0.9em;
}

.filmDetailBox{
	width: 100%;
	margin-bottom: 3em;
}
.filmDetailBox h3{
	background-color: #333;
	color: #fff;
	font-weight: normal;
	letter-spacing: 0.06em;
	padding: 0.4em 0.4em 0.2em 1em;
}
.filmDetailBox h3 small{
	padding-left: 1em;
	opacity: 0.8;
}

.filmDetailBox p{
	font-size: 0.94em;
}
.filmDetailBox .flex p{
	margin: 0.4em 0;
	font-size: 0.9em;
}

.filmDetailTable{
	overflow-x:auto;
}
.filmDetailTable table{
	width:100%;
}
.filmDetailTable table th{
	font-weight: normal;
	text-align: center;
	font-size: 0.9em;
	white-space: nowrap;
	border: thin solid #fff;
}
.filmDetailTable table td{
	text-align: center;
	font-size: 0.9em;
	white-space: nowrap;
	border: thin solid #ccc;
}
.filmDetailTable table td.taL{
	text-align: left;
}

.filmDetailBox ul.notes{
	font-size: 0.8em;
	padding-left: 0;
}

.machines{
	border: 1px solid #333;
	margin-top: 2em;
}
.machines p{
	margin: 1em;
}
.machines .button{
	letter-spacing: 0.02em;
}

ul.imgPouchFilm li{
	width: 44%;
	margin-right: 4%;
	font-size: 0.9em;
}
ul.imgPouchFilm li img{
	max-height: 100%;
	height: auto;
	width: auto;
}

@media screen and (min-width: 500px){

	.filmBox{
		padding-right: 1em;
	}

}
@media screen and (min-width: 400px){
	
	ul.imgPouchFilm li{
		width: 28%;
	}
}
@media screen and (min-width: 700px){

	ul.imgPouchFilm li{
		width: 20%;
	}
}
@media screen and (min-width: 1300px){

	ul.imgPouchFilm li{
		width: 16%;
	}
}

/*-----------------------------
		サポート
  -----------------------------*/

.supportMenu ul{
	padding-left: 0em;
}
.supportMenu ul li{
	display: block;
	max-width: 14em;
}
.supportMenu ul li a{
	display: block;
	padding: 0.6em;
	border-radius: 4px;
	background-color: #333;
	color: #fff;
}
.supportMenu ul li a:hover{
	box-shadow: inset 0 0 0 99em rgba(255, 255, 255, 0.3);
  border: 0;
}

.faqWrap dl{
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
}
.faqWrap dl:nth-of-type(1){
	border-top: 1px solid #ccc;
	padding-top: 16px;
}
.faqWrap .dl-horizontal dt{
	text-align: center;
	font-size: 1.6em;
	width: 1.6em;
}
.faqWrap .dl-horizontal dd{
	margin-left: 3.5em;
}
.faqWrap .dl-horizontal dt,
.faqWrap .dl-horizontal dd{
	margin-bottom: 4px;
}
.faqWrap .dl-horizontal dt:nth-of-type(1){
	border: thin solid #d01;
	background-color: #d01;
	color: #fff;
}
.faqWrap .dl-horizontal dt:nth-of-type(2){
	border: thin solid #333;
}
.faqWrap .dl-horizontal dd:nth-of-type(1){
	color:  #d01;
}

@media screen and (min-width: 500px) and (max-width: 699px){
	.supportMenu ul li{
		width: 48%;
		margin-right: 1%;
		display: inline-block;
	}
}
@media screen and (min-width: 700px) and (max-width: 799px){
	.supportMenu ul li{
		width: 31%;
		margin-right: 1%;
		display: inline-block;
	}
}

@media screen and (min-width: 800px){
	.supportMenu{
		order: 2;
	}
	.faqWrap{
		order: 1;
	}

	.supportMenu ul{
		padding-left: 1em;
	}
	.supportMenu ul li a{
		padding: 0.6em 1em;
	}
	
}
@media screen and (min-width: 1000px){
	#support .wrap{
		padding: 0 11%;
	}
}

.rollInfo{
	border-top: 1px solid #ccc;
	margin-top: 1em;
	padding-top: 1em;
}
.rollInfo:last-child{
	border-bottom: 1px solid #ccc;
}

.cautionImg img{
	margin: 0 auto;
	max-width: 340px;
}


/*-----------------------------
		販売店様専用
  -----------------------------*/

#bplog .wrapInner{
	border: 1px solid #ccc;
	padding: 1em 2em;
}
#bplog h1, #bp h1{
	font-size: 1.2em;
}
#bplog h2, #bp h2{
	font-size: 1.1em;
}

.balloon{
	position: relative;
	display: inline-block;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 98%;
	font-size: 0.9em;
 	color: #fff;
	background: #333;
	border-radius: 4px;
}
.balloon:before{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #333;
}
.balloon p{
	margin: 0 auto;
	padding: 0;
}
@media screen and (max-width: 420px){
	.balloon p br{
		display: none;
	}	
}


#bp .title{
	text-align: center;
	font-size: 1.2em;
	background-color: #333;
	color: #fff;
	margin: 0;
	padding: 2px 0 0;
}
#bp .img{
	margin: 0;
	border: thin solid #333;
}

#bp .col-L{
	max-width: 150px;
}

#bp .col-R{
	overflow-x:auto;
	padding: 0;
	margin: 0 0 0 0.6em;
}
#bp .col-R table{
	width: 99%;
}

@media screen and (max-width: 899px){
	.linkToList{
		font-size: 0.9em;
		text-align: right;
	}
	.linkToList:before{
		content: "";
		display: block;
	}
}
@media screen and (min-width: 900px){
	.linkToList{
		display: none;
	}
	#bp .col-R{
		margin-bottom: 1em;
	}
	#bp .col-R:after{
		content: "";
		display: block;
	}
}

#bp table{
	font-size: 0.9em;
}
#bp table tr th{
	font-weight: normal;
}
#bp table tr th,
#bp table tr td{
	text-align: center;
	white-space: nowrap;
}
#bp table tr td{
	border: thin solid #ccc;
}
#bp table tr > td:first-child{
	text-align: left;
}


#machineList{
	margin-bottom: 2em;
}
#machineList .img{
	margin: 1em;
	max-width: 486px;
}

#machineList label {
    display: block;
		font-size: 1.1em;
		font-weight: normal;
		padding: 0.6em 0 0.2em;
		margin-bottom: 0.2em;
    cursor: pointer;
    transition: all 0.5s;
}
#machineList label:before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
		font-weight: 900;
    padding-right: 0.2em;
		color: #009;
}
#machineList label:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(204,204,204), transparent);
	background: -webkit-linear-gradient(to right, rgb(204,204,204), transparent);
	background: linear-gradient(to right, rgb(204,204,204), transparent);
}
#machineList label:hover:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(0,0,153), transparent);
	background: -webkit-linear-gradient(to right, rgb(0,0,153), transparent);
	background: linear-gradient(to right, rgb(0,0,153), transparent);
}
#machineList input {
    display: none;
}
#machineList .listShow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
#machineList .listCheck:checked + label:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(0,0,153), transparent);
	background: -webkit-linear-gradient(to right, rgb(0,0,153), transparent);
	background: linear-gradient(to right, rgb(0,0,153), transparent);
}

#machineList .listCheck:checked + label + .listShow {
    height: auto;
    padding: 5px;
    background: #eee;
    opacity: 1;
}
#machineList .listCheck:checked + label:before {
    content: "\f13a";
}

#bplog #machineList label {
    display: block;
		font-size: 1.1em;
		font-weight: normal;
		padding: 0.6em 0 0.2em;
		margin-bottom: 0.2em;
    cursor: pointer;
    transition: all 0.5s;
}
#bplog #machineList label:before {
    content: "\f13a";
    font-family: "Font Awesome 5 Free";
		font-weight: 900;
    padding-right: 0.2em;
		color: #009;
}
#bplog #machineList label:after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.2em;
	background: -moz-linear-gradient(to right, rgb(0,0,153), transparent);
	background: -webkit-linear-gradient(to right, rgb(0,0,153), transparent);
	background: linear-gradient(to right, rgb(0,0,153), transparent);
}
#bplog #machineList input {
    display: none;
}
#bplog #machineList .listShow {
    height: auto;
    padding: 5px;
    background: #eee;
    opacity: 1;
}


#machineList ul{
	padding-left: 0;
	margin: 0 0.4em 0.2em;
}
#machineList ul:after{
	content: "";
	display: block;
	clear: both;
}
#machineList ul li{
	float: left;
	margin-right: 0.3em;
}
#machineList ul li a{
	display: inline-block;
	width: 7em;
	padding: 0.5em 1em;
	border-bottom: thin solid #009;
}
#machineList ul li a:hover{
	font-weight: bold;
}

#flowBox p{
	padding-left: 2em;
	text-indent: -2em;
	position: relative;
	margin-bottom: 3em;
}
#flowBox p span{
	padding: 0.2em 0.5em;
	height: 1.6em;
	line-height: 1.6em;
	font-weight: bold;
	background-color: #eee;
	border: thin solid #ccc;
	margin-right: 0.4em;
}
#flowBox .flow:after{
	content: "";
	position: absolute;
	bottom: -48px;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #333;
}

#bp .charge {
	text-align: center;
}
#bp .charge table{
	margin: 0 auto;
}
#bp .charge table tr td:last-child{
	text-align: right;
}

@media screen and (max-width: 599px){
	#bp .detail{
		width: 100%;
	}

}
@media screen and (min-width: 600px){
	#bplog h1, #bp h1{
		text-align: center;
		font-size: 1.4em;
	}
	#bplog h2, #bp h2{
		text-align: center;
		font-size: 1.2em;
	}
}
@media screen and (min-width: 1200px){
	#bp .wrapInner{
		padding: 0 10%
	}
}

@media screen and (min-width: 900px){
	#bp .wrapInner{
		position: relative;
	}
	#bp .wrapInner #machineList{
		position: fixed;
	}
	#bp .detail{
		position: relative;
	}
	
	#bp #machineList .listCheck:checked + label + .listShow {
		height: 420px;
		overflow: hidden;
	}
	#bp #machineList ul{
		overflow-y: scroll;
		height: 100%;
	}


}
@media screen and (min-width: 900px){
	#bp .wrapInner #machineList{
		width: 30%;
	}
	#bp .detail{
		margin-left: 32%;
		width: 68%;
	}
}
@media screen and (min-width: 1200px){
	#bp .wrapInner #machineList{
		width: 22%;
	}
	#bp .detail{
		margin-left: 30%;
		width: 70%;
	}
}
	

/*-----------------------------
		お問い合わせ
  -----------------------------*/

table.formTable tr:nth-child(even) {
	background-color: transparent;
}
table.formTable tr th,
table.formTable tr td{
	color: #333;
	background-color: transparent;
	display: block;
	width: 100%;
}
table.formTable tr td{
	margin-bottom: 1em;	
}

.short input{
	width: 10em;
}

.framePrivacy{
	max-width: 620px;
	width: 100%;
	height: 10em;
}

@media screen and (min-width: 1000px){
	#contact .wrap{
		padding: 0 11%;
	}
}