/* IMPORT CSS */
@import url("grid.css");

#wrapper {
  width:100%;
  overflow:hidden;
}
img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

.img98 {
	max-width:98%;
    padding:0 10%;
	height: auto;/*高さ自動*/
}


.img80 {
	max-width:76%;
    padding:0 10%;
	height: auto;/*高さ自動*/
}


@media (max-width: 768px) {
	/* タブレット以下画面用の設定 */
	img {
	max-width:95%;
   	height: auto;/*高さ自動*/
	}
	.kaiten{transform: rotate(90deg);}
}

	}
	

a {
    display:block;
    color: #737373;
    text-decoration-line: none;
}
a:hover { 
  color: #404040;
}
a img:hover {
	opacity: 0.8;
}

.text_blue {color:#0099FF;}

.bold {font-weight: bold;}

.text_center {
 text-align: center;}

.text_right {
 text-align: right;}

.text_left {
 text-align: left;}

.meincolor{color: #404040;}

.font-sizel{font-size: 2.4rem;} 

.frightkara{
flex-diretion: row;
 display: flex;
 padding: 0;
 width: 100%;
	text-align: right;
}
.mb0 {margin-bottom: 0px;}
.mb05 {margin-bottom: 05px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}
.mb100 {margin-bottom: 100px;}
.mb170 {margin-bottom: 170px;}
.mb200 {margin-bottom: 200px;}


.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml100 {margin-left: 100px;}

.mt020 {margin-top: -20px;}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt40 {margin-top: 40px;}
.mt100 {margin-top: 100px;}
.mt150 {margin-top: 150px;}
.mt200 {margin-top: 200px;}
.mt300 {margin-top: 300px;}



/*メイン画像
-------------------------------------*/
.mainimg img {
	width: 100vw;
}

.smh {display:none;      
}

/* コンテンツA： メインイメージ */




.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
}

.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: url("../img/nl_main.jpg");
}


.crinkusaki{ 
	display: flex;
justify-content: flex-start;
align-items: left;}


@media (max-width: 768px) {

.smh {display:none;}

	.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height:100px;
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);

}
	.conA.compact {
	width: 100% !important;
	background-image: url(../img/nl_mv_s1.jpg);
}


	
}

@media (max-width: 600px) {

.smh {display:none;}
	
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height:100px;
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	
}
	.conA.compact {
	width: 100% !important;
	background-image: url(../img/nl_mv_s3.jpg);
}

	
}

@media (max-width: 450px) {
.conA {
	display:none;
}

.smh {
    display: flex;
    background- color: #FFFFFF !important;
}


.pd2{padding: 0 2.0rem;}	
}

@media print, screen and ( min-width : 1200px ) {

.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 600px;
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
}

.conA.compact {
	height: 600px;
	min-height: 0;
	background-image: url(../img/nl_main.jpg);
}

}

@media print, screen and ( min-width : 1380px ) {

.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 600px;
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
}

.conA.compact {
	height: 600px;
	min-height: 0;
	background-image: url("../img/main_min-width1500.jpg");
}

}


/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 5rem 0;
}

/*新着情報
-------------------------------------*/
.news {
    border-bottom: 3px solid #000;
	padding-bottom: 0.5rem;
}
.news li {
    list-style-type: none;
	border-bottom: 1px solid #ccc;
	padding: 0.5rem 0;
}

/*フッター
-------------------------------------*/
footer {
    background- color: #404040;
   padding-top: 10px;
	
}

footer .fotmenu li {
    border-right: 1px solid #ccc;
	list-style:none;
	padding:7px;
	font-size:70%;
}

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

footer .fotmenu { margin-left:400px;}
}



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

footer .fotmenu li {
 border-right: 1px solid #FFF;
  list-style:none;
	padding:2px;
	font-size:70%;
}
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
 
}

.copyright p {
  font-size: 60%;
}
.copyright a {
    color: #FFFFFF;
    text-decoration: none;
	display: inline-block;
}



/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: #959fa5;
}



/* ボタン
-----------------------------------*/
.btn-icon {
  display: inline-block;
  max-width: 400px;
    background-color: #FFF;
  font-size: 15px;
 color: #404040;
  text-decoration: none;
  font-weight: bold;
  padding: 7px 30px 7px 30px;
  border-radius: 4px;
  position: relative;
	border:solid 1px #0099FF;
}

.btn-icon:before {
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -8px;
}

.btn-icon:hover {
  opacity: 0.8;
 color: #404040;
}

.indent01 {
padding-left:1em;
text-indent:-1em;
}



/* video 
-----------------------------------*/

.movie {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: auto;
}

/* youtube
-----------------------------------*/

.youtube-re{
width: 100%;
}

/*製品タイトル
-----------------------------------*/

.conh3 { font-size: 2.3rem; line-height: 1.30; letter-spacing: -.05rem; color: #404040; 
	padding-bottom: 5px;
    border-bottom: solid 1px black;}

.conh3blue { font-size: 2.3rem; line-height: 1.30; letter-spacing: -.05rem; color:#0099FF; }
	
.conhh5blue { font-size: 1.8rem; line-height: 1.10; letter-spacing: -.03rem; color: #0099FF; }	
	


/*ボタン装飾
-----------------------------------*/

.hidden_box label {
   padding: 7px;
  
   font-weight: bold;
   border-radius: 100vh;
   text-align: center;
   color:#0099FF;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #FFFFFF;
   
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

@media all and (-ms-high-contrast: none) {
 .hidden_box label {
   padding: 7px;
   width: 500px!important;
   font-weight: bold;
 	text-align: left;
	color:#0099FF;
	border: none;
	}
	
	.hidden_box .hidden_show {
	  width: 500px!important;	
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
 /* IE11 */
}
/*4つのBOX
-----------------------------------*/

.box30 {
    margin: 2em 0;
	border-radius: 10px; 
    background: #FFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
	
}
.box30 .box-title {
  text-align: center;
padding-top: 20px;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}

.fwrapper{
 
   background-color: #808080;
}

/*contact
-----------------------------------*/

.btn-gradient-radius {
  display: inline-block;
  padding: 7px 120px;
  border-radius: 25px;
 border: solid 2px black;
  border-color: #0099FF;
  text-decoration: none;
  background-color: #FFF;
color: #0099FF;
font-weight: bold;
  transition: .4s;
}

.btn-gradient-radius:hover {
 background-color: #F2F2F2;
}

/*Go to the Inquiry form
-----------------------------------*/
/*ボタン白*/
.btn-goto {
  display: inline-block;
  padding: 7px 80px;
  border-radius: 25px;
 border: solid 2px black;
  border-color: #0099FF;
  text-decoration: none;
  background-color: #FFF;
color: #0099FF;
font-weight: bold;
  transition: .4s;
}

.btn-goto:hover {
 background-color: #F2F2F2;
}


/*ボタンオレンジ*/
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.3em 2em;
  text-decoration: none;
  color: #FFF;
	font-size: 25px;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;

}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/* q&a
-----------------------------------*/
.qaContainer dt {
padding: 10px 10px 10px 60px;
border-radius: 5px;
background: #FFFFFF;
text-indent: -40px;
font-weight: bold;
}
.qaContainer dt:before {
content: "Q.";
font-weight: bold;
margin-right: 4px;
}
.qaContainer dd {
margin: 20px 10px 50px 40px;
text-indent: -25px;
}
.qaContainer dd:before {
content: "A.";
color: #0099FF;
font-weight: bold;
margin-right: 7px;
}


/* kirikae
-----------------------------------*/


.pc { display: block !important; }
.sp { display: none !important; }
 

@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



#gdpr_content01, #gdpr_content02 {
	display: none;
	position: fixed;
	width: 100%;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #666;
}
#gdpr_content01 > div, #gdpr_content02 > div {
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#gdpr_content01 > div .left, #gdpr_content02 > div .left {
	width: calc(100% - 300px);
}
#gdpr_content01 > div .left p, #gdpr_content02 > div .left p {
	margin-bottom: 0px;
}
#gdpr_content01 > div .left ul, #gdpr_content02 > div .left ul {
	margin-top: 15px;
	margin-bottom: 0;
}
#gdpr_content01 > div .left li, #gdpr_content02 > div .left li {
	margin-bottom: 0px;
}
#gdpr_content01 > div .left ul label, #gdpr_content02 > div .left ul label {
	cursor: pointer;
}
#gdpr_content01 > div .right, #gdpr_content02 > div .right {
	width: 300px;
	text-align: center;
}
#gdpr_content01 > div .right .button, #gdpr_content02 > div .right .button {
	text-align: center;
}
#gdpr_content01 > div .right .button > a, #gdpr_content02 > div .right .button > a {
	display: inline-block;
	background: #828182;
	color: #fff;
	padding: 5px 15px;
	min-width: 100px;
	text-decoration: none;
}
#gdpr_content01 > div .right .button > a:hover, #gdpr_content02 > div .right .button > a:hover {
	opacity: 0.7;
	text-decoration: none;
}
#gdpr_content01 > div .right .button + .button, #gdpr_content02 > div .right .button + .button {
	margin-top: 15px;
}
#gdpr_content01 .close, #gdpr_content02 .close {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
#gdpr_content01 .close:hover, #gdpr_content02 .close:hover {
	opacity: 0.7;
}
#gdpr_content01 .close::before, #gdpr_content02 .close::before {
	position: absolute;
	content: "";
	top: 1px;
	left: 9px;
	width: 2px;
	height: 20px;
	background: #666;
	transform: rotate(45deg);
}
#gdpr_content01 .close::after, #gdpr_content02 .close::after {
	position: absolute;
	content: "";
	top: 1px;
	left: 9px;
	width: 2px;
	height: 20px;
	background: #666;
	transform: rotate(-45deg);
}

@media screen and (max-width:640px) { 
	
#gdpr_content01 > div, #gdpr_content02 > div {
	padding: 20px 10px;
	display: block;
	height: 300px;
	overflow-y: scroll;
}
#gdpr_content01 > div .left, #gdpr_content02 > div .left {
	width: auto;
	padding-right: 20px;
}
#gdpr_content01 > div .right, #gdpr_content02 > div .right {
	width: auto;
	margin-top: 20px;
}
#gdpr_content01 .close, #gdpr_content02 .close {
	right: 5px;
	top: 10px;
}
}