@charset "utf-8";
/* CSS Document */
body,html{
	font-family: Gotham,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
	font-size: 14px;
	color: #595757;
	counter-reset: number 0;
}
a,
a:visited,
a:focus,
a:active,
a:hover
{
	outline: none !important;
}

/****************************************************************
Margin/padding
*****************************************************************/

.mt0{margin-top:0px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}


.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}
.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;}

.mtb5{margin-top:5px; margin-bottom:5px;}
.mtb15{margin-top:15px; margin-bottom:15px;}
.mtb20{margin-top:20px; margin-bottom:20px;}
.mtb30{margin-top:30px; margin-bottom:30px;}
.mtb50{margin-top:50px; margin-bottom:50px;}
.mtb80{margin-top:80px; margin-bottom:80px;}


.ml0{margin-left:0px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}

.mr0{margin-right:0px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr-30{margin-right:-30px;}

.p0{padding:0px;}
.p5{padding:5px;}
.p10{padding:10px;}
.p20{padding:20px;}

.pt0{padding-top:0;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top: 30px;}

.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}

.ptb5{padding-top: 5px; padding-bottom: 5px;}
.ptb10{padding-top: 10px; padding-bottom: 10px;}
.ptb20{padding-top: 20px; padding-bottom: 20px;}
.ptb30{padding-top: 30px; padding-bottom: 30px;}
.ptb40{padding-top: 40px; padding-bottom: 40px;}

.pl0{padding-left:0;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl25{padding-left:25px;}
.pl30{padding-left:30px;}

.pr0{padding-right:0;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr25{padding-right:25px;}
.pr30{padding-right:30px;}

.prl0{padding-right: 0; padding-left:0;}
.prl5{padding-right: 5px; padding-left:5px;}
.prl10{padding-right: 10px; padding-left:10px;}
.prl15{padding-right: 10px; padding-left:15px;}

.bold{font-weight: bold;}

.b_tb_w{border-top:#FFF 1px solid; border-bottom: #FFF 1px solid;}
.b_tb_g{border-top:#4D4D4D 1px solid; border-bottom: #4D4D4D 1px solid;}
.b_t_g{border-top: #4D4D4D 1px solid;}
.b_b_g{border-bottom: #4D4D4D 1px solid;}
.d_b_g{border-bottom: #4D4D4D 1px dotted;}

/****************************************************************
5分割のレイアウト
*****************************************************************/
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}
.d-flex {
	display: flex;
}

.justify-content-between {
	justify-content: space-between;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
}

/*---------- nav ----------*/

section#nav{
	width: 100%;
	position: absolute;
	top:0;
}
body:not(#index) section#nav{
	min-height: 90px;
}

.navbar-default{
	background: transparent;
	border: none;
	margin: 0;
}
.navbar-brand{
	padding: 0 20px 0 10px;
	max-width:200px;
}
@media(max-width:991px){
	.navbar-brand{
		max-width: 160px;
	}
}
.navbar-nav{
	margin-top: 36px;
	font-size: 14px;
	letter-spacing: 0.15em;
	float: right;
}
body#index .navbar-default .navbar-nav>li>a{color: #FFF; font-weight: normal;}
.navbar-default .navbar-nav>li>a{color: #000; font-weight: normal;}
.navbar-default .navbar-nav>li>a:hover{color: #78baf3 !important;}
.nav>li>a{padding: 10px 8px;}

.navbar-collapse{
	border: none;
	box-shadow:none;
	webkit-box-shadow: inset 0;
}
header.fixed {
	width: 100%;
  position: fixed;
	top: 0;
	left: 0;
	z-index: 130;
}
header.fixed #nav,
body:not(#index) #nav{
  background: rgba(255, 255, 255, 0.9);
	padding: 0 0 5px ;
	color: #000 !important;
	z-index: 130;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
header.fixed #nav a,
body:not(#index) #nav a{
	color: #000 !important;
}
header.fixed #nav a:hover,
body:not(#index) #nav a:hover{
	color: #0038BC !important;
}
.navbar-toggle{
	border-radius: 50%;
	padding: 10px;
	width: 42px;
	height: 42px;
}
.navbar-default .navbar-toggle .icon-bar{background: #000; width: 20px;}
/*@media (max-width: 991px) {
	.navbar-nav,.navbar-header,.navbar-nav>li{float: none;}
	header.fixed h1{margin: 5px;}
	header.fixed .navbar-brand{padding: 0 10px;}
	header .navbar-brand img{ width: 160px;}
}*/

@media (min-width: 768px) and (max-width: 991px){
	.navbar-toggle {
    display: inline;
	}
	.navbar-toggle {
    position: relative;
    float: right;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
	}
	.navbar-header {
    float: none;
	}
	.navbar-nav>li {
    float: none;
	}
	.navbar-collapse.collapse {
    display: none !important;
	}
	.navbar-collapse.collapse.in {
    display: block!important;
	}
}
@media (max-width: 991px){
	.nav>li{padding-left: 30px;
	}
	body#index header:not(.fixed) .collapse.in,
	body#index header:not(.fixed) .collapsing{
		background: rgba(255,255,255,0.90);
		margin-top: 10px;
	}
	header:not(.fixed) .collapse.in a,
	header:not(.fixed) .collapsing a{
		color: #000 !important;
	}
}
@media(min-width:992px){
	body#index .navbar-nav li{
		border-right: 1px solid #fff;
		padding: 0 8px;
	}
	.navbar-nav li{
		border-right: 1px solid #000;
		padding: 0 8px;
	}
	header.fixed .navbar-nav li{
		border-right: 1px solid #000 !important;
	}
	.nav>li>a {
    padding: 0px 8px;
	}
	header.fixed #nav{
		height: 90px;
	}
}

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

.title-area {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
	z-index: 0;
	height: 200px;
	background: url(../img/title_bg.jpg);
	background-position: 50% 50%;
	background-size: cover;
	margin-top: 90px;
}
.page-title{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
	text-align: center;
	color: #fff;
	font-weight: normal;
	font-size: 30px;
}
.page-title span{
	display: block;
	font-size: 16px;
	margin-top: 15px;
	color: rgba(255,255,255,0.60);
}
.title-area ul{
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin: 0 auto;
	display: table;
	transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
	padding: 0;
}
.title-area ul li {
	float: left;
	list-style-type: none;
	margin: 0 5px;
	display: table-cell;
}
.title-area ul li a{
	padding: 0px 10px;
	vertical-align: middle;
	display: block;
	line-height: 40px;
	border-bottom: 40px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	margin: 0 auto;
	font-size: 20px;
	opacity: 0.8;
	text-decoration: none;
	color: #000;
}
@media (max-width: 767px){
	.title-area ul li {margin: 0 3px;}
	.title-area ul li a{
		padding: 0px 5px;
		font-size: 16px;
	}
	.navbar-nav{
			float: none;
	}
}

.title-area ul li a:hover,
.title-area ul li a.active{
	color: #1d2088;
	opacity: 1;
}

section#contents{line-height: 2;}


.balloon-title{
	width: 100%;
	padding: 30px 0;
	background: #000;
	text-align: center;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
	font-weight: normal;
	position: relative;
	margin-bottom: 50px;
	margin-top: 0px;
}
.balloon-title span{
	display: block;
	font-size: 0.6em;
	margin-top: 10px;
	color: #727171;
}
.balloon-title:after{
	content:'';
	position: absolute;
	bottom:-30px;
	left:50%;
	margin:0 0px 0 -30px;
	width:0;
	height:0;
	border-right:30px solid transparent;
	border-top:30px solid #000;
	border-left:30px solid transparent;
}

h2.title{
	border-left: 10px solid #1d2088;
	color: #1d2088;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding-left: 0.5em;
	margin-bottom: 20px;
}
h2.title span{
	display: inline-block;
	background: #f3994f;
	padding: 5px;
	margin: 5px 15px;
	color: #fff;
	font-size: 13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
	vertical-align: middle;
}
h2.title span.glsm{
	color: #999;
	background: transparent;
}
.title02 {
	color: #6D0072;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 24px;
	position: relative;
	display: flex;
	gap: 9px;
}
.title02::after {
	content: "";
	display: block;
	width: 100%;
	border-bottom: #999 1px solid;
	flex: 1;
	margin-bottom: 3px;
}
/*feature*/
#light,#safety,#beauty,#clear,#madeinjapan{
	margin-top : -80px;
  padding-top : 80px;
}
.feature-title{
	margin-top: 10px;
	margin-bottom: 10px;
}
.feature-title p {
	border-left: 1px solid #9fa0a0;
	padding: 0.5em;
	margin-left: 140px;
	margin-top: 15px;
}
.feature-title img{
	float: left;
}
.feature-title hr{
	margin: 10px 0;
}
.feature-title h2{
	margin-left: 140px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: normal;
	font-size: 24px;
}
.feature-title h2 span{
	font-size: 1.4em;
}
.feature-wrap{
	margin-bottom: 20px;
}
.karui{
	color: #b0b7e5;
	border-color: #b0b7e5;
}
.warenai{
	color: #eab5e5;
	border-color: #eab5e5;
}
.kirei{
	color: #44bad6;
	border-color: #44bad6;
}
.kukkiri{
	color: #44d6d6;
	border-color: #44d6d6;
}
.nihonsei{
	color: #ffbe59;
	border-color: #ffbe59;
}
.feature-box{overflow: hidden;}
.feature-box h4{
	background: #fffab5;
	padding: 10px;
	margin: 0;
	font-weight: normal;
	line-height: 1.5em;
}
.feature-box h4 span{
	display: block;
	color: #ff4a40;
}
.feature-box ul{
	background: #f3f3f3;
	margin: 0;
	padding: 10px 10px 10px 2em;
}
.feature-box ul li{
	list-style-type: square;
	margin-bottom: 1em;
}
.br_size{font-size: 22px;}

@media (max-width: 991px){
.br_size{margin: 40px 0;}
.br_size span{display: block;}
}
/*spec*/
.spec-list dl{
	margin: 0;
	padding: 10px;
}
.spec-list dl:nth-child(odd){
	background: #c8e6ff;
}
.spec-list dl:nth-child(even){
	background: #eaf6ff;
}
.spec-list dl dt{
	width: 5em;
	float: left;
	color: #596fe3;
}
.spec-list dl dd{
	margin-left: 5em;
}

.variety table tr td{
	text-align: right;
	font-size: 0.8em;
	vertical-align: middle;
	min-width: 60px;
}
.variety table td {
	border: 1px solid #dddddd;
	padding: 8px;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
}
.text-center td{
	text-align: center !important;
}
.bg-gray{
	background: #eee;
}

.spec-flex {
	padding: 0 15px;
	display: flex;
	justify-content: space-between;
}

.spec-flex-item {
	width: 47.37%;
}

@media (min-width: 992px){
	.variety_scroll{display: none;}
}
@media (max-width: 991px){
	.table-responsive {
		width: 100%;
		margin-bottom: 15px;
		overflow-x: scroll;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #ddd;
	}
	
	.table-responsive::-webkit-scrollbar{
 height: 5px;
}
.table-responsive::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.table-responsive::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
.variety_scroll{
	color: #1d2088;
	margin: 8px 5px 5px;
	text-align: left;
	font-size: 12px;
}
.variety_scroll.ml0 {
	margin-left: 0;
}
.spec-flex {
	padding: 0 15px;
	flex-direction: column;
	row-gap: 40px;
}
.spec-flex-item {
	width: 100%;
}
}
.price_list{padding: 0;}
.price_list table{
	width: 100%;
	color: #64697B;
	font-size: 0.8em;
	table-layout:fixed;
	border-collapse: separate;
	border-spacing: 0;
}
.price_list table td{
	border-right: #64697B 1px solid;
	border-bottom: #64697B 1px solid;
	height: 80px;
	padding: 0 8px;
	z-index: -1;
}
.price_list table td div.material{
	border:#64697B 1px solid;
	width: 34px;
	text-align: center;
	letter-spacing: 0.15em;
	display: block;
	margin-bottom: 5px;
}
.price_list table td div.color{
	background: #64697B;
	color: #FFF;
	padding: 2px 0 2px 15px;
	margin-bottom: 5px;
}

.price_list table caption{
	border: #64697B 1px solid;
	background: #D3DEF1;
	padding: 5px 10px;
	font-size: 14px;
}

tr.listitem th{
	border-right: #64697B 1px solid;
	font-size: 10px;
	font-weight: normal;
	padding: 3px !important;
	color: #93A8BD !important;
	font-feature-settings : "palt";
}
.bb{border-bottom: #64697B 1px solid !important;}
.bbno{border-bottom: none !important;}
.btno{border-top:none !important;}
div.type,div.type2,div.type3,div.type4{
	padding: 10px 3px;
	position: relative;
	vertical-align: text-top;
	height: 100%;
}
div.type span{
	display: block;
	text-align: left;
	position: absolute;
	top: -18px;
	line-height: 1.1;
}
div.type2 span{
	display: block;
	text-align: left;
	position: absolute;
	top: -12px;
	line-height: 1.1;
}
div.type3 span{
	display: block;
	text-align: left;
	position: absolute;
	top: -95px;
	line-height: 1.1;
}
div.type4 span{
	display: block;
	text-align: left;
	position: absolute;
	top: -68px;
	line-height: 1.1;
}
div.accessory {
	position: relative;
	text-align: center;
}
div.accessory span{
	position: absolute;
	top: -28px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
 font-feature-settings : "palt";
	border: none !important;
}
div.accessory2,
div.accessory3 {
	position: relative;
	text-align: center;
}
div.accessory2 span{
	position: absolute;
	top: -107px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
 font-feature-settings : "palt";
	border: none !important;
}
div.accessory3 span{
	position: absolute;
	top: -65px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
 font-feature-settings : "palt";
	border: none !important;
}
td.p0{padding: 0!important;}

.price_list table td.accessory{
	position: relative;
	text-align: center;
}
td.accessory span{
	position: absolute;
	top: 3px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
	font-feature-settings : "palt";
	border: none !important;
}
th.part_number{
	border-left: #64697B 1px solid;
	border-right: #64697B 1px solid;
	text-align: center;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
}
tr.bg_p{
	background: #FCE5E8;
}
.listitem th.bg_p{
	background: #FCE5E8;
	border-left: #64697B 1px solid;
}

td.bg_y{background: #FFFEEE;}
th.bg_y{
	background: #FFFEEE;
	border-bottom: #FFFEEE 1px solid;
}
.red{color: red;}
span.depth,span.size{
	font-size: 10px;
 font-feature-settings : "palt";
}

.price_list table .listitem-new {
	height: 168px;
}

@media (min-width: 1200px) {
	p.tablescroll{display: none;}
}
@media (max-width: 1199px) {
	.price_list{
		border: #ddd 1px solid;
	}
	p.tablescroll{
		margin: 5px;
		color: #1d2088;
	}
}
/*history*/
.con-his-title{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
	color: #9fa0a0;
}
.con-his-title span{
	font-size: 35px;
	border-right: solid 1px #9fa0a0;
	margin-right: 1em;
	padding-right: 0.5em;
	vertical-align: bottom;
	letter-spacing: 0.5em;
}
/** timeline box structure **/
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
	top: 0;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 1px;
	background-color: #595757;
	left: 50%;
	margin-left: -1.5px;
}

.timeline:after {
	top: 0;
	position: absolute;
	content: "";
	width: 1px;
	background-color: #595757;
	width: 7px;
	height: 7px;
	left: calc(50% - 3px);
	margin-left: -1.5px;
	border-radius: 50%;
}

.tldate {
	position: absolute;
	bottom: -1em;
	left: calc(100% + 15px);
	width: 100px;
  color: #595757;
  margin: 0 auto;
	text-align: center;
  padding: 3px 0;
}
li.timeline-inverted .tldate {
	position: absolute;
	bottom: -1em;
	right: calc(100% + 15px);
	left: auto;
	width: 100px;
  color: #595757;
  margin: 0 auto;
	text-align: center;
  padding: 3px 0;
}

.timeline li {
  margin-bottom: 25px;
  position: relative;
}

.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}
.timeline li:after {
  clear: both;
}
.timeline li:before, .timeline li:after {
  content: " ";
  display: table;
}
@media (min-width: 768px) {
	.history_r p{text-align: right}
	.history_r img{float: right;}
}

/** timeline panels **/
.timeline li .timeline-panel {
  width: 50%;
  float: left;
  position: relative
}
.tl-heading {
	border-bottom: solid 1px #595757;
	padding: 20px 20px 0;
}
@media (min-width: 768px) and  (max-width: 1199px){
	.tl-heading {padding: 20px 0 0;}
}

.tl-body{
	padding: 20px;
}
.tl-body img{max-width: 292px;}

/** panel arrows **/


.timeline li.timeline-inverted .timeline-panel {
  float: right;
}



/** timeline circle icons **/
.tl-heading{
	position: relative;
}
.timeline li .tl-circ {
  position: absolute;
  bottom: -4px;
	right: -2px;
  background: #595757;
  color: #fff;
  width: 7px;
  height: 7px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
li.timeline-inverted .tl-circ {
  position: absolute;
  bottom: -4px;
	left: -5px;
  background: #595757;
  color: #fff;
  width: 7px;
  height: 7px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

/** timeline content **/

.tl-heading h4 {
  margin: 0;
  color: #c25b4e;
}

.tl-body p, .tl-body ul {
  margin-bottom: 0;
}

.tl-body > p + p {
  margin-top: 5px;
}

/** media queries **/
@media (max-width: 991px) {
  .timeline li .timeline-panel {
    width: 50%;
  }
}

@media (min-width: 768px) {
	ul.timeline li{
		margin-top: -50px;
	}
	ul.timeline li:first-child{
		margin-top: 0px;
	}
}

@media (max-width: 700px) {
  .page-header h1 { font-size: 1.8em; }
}
@media (max-width: 767px) {
  ul.timeline:before {
    left: 40px;
  }
  
  .tldate { width: 140px; }

  ul.timeline li .timeline-panel {
    width: calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
  }

  ul.timeline li .tl-circ {
    bottom: -3px;
    left: -3px;
    margin-left: 0;

  }
  ul.timeline > li > .tldate {
    margin: 0;
  }

  ul.timeline > li > .timeline-panel {
    float: right;
  }
	li .tldate{
		position: relative !important;
		text-align: left;
		margin: 0;
		bottom: auto;
		left: auto;
	}
	.timeline:after{
		left: 37px;
	}
}

/*Construction Example*/
.examplebox {
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}
.examplebox a.link_bg:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.70);
}
.examplebox a.link_bg:hover:before{
	background: transparent;
}
.examplebox a:hover h2{
	color:  #0077E2;
	background: rgba(255,255,255,0.4);
}
.examplebox a.link_bg{
}
.examplebox img{
	width: 100%;
}
.examplebox a img{
	background: rgba(0,0,0,0.8);
}
.examplebox a h2{
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 10px 0;
	font-size: 15px;
	font-weight: normal;
	color:  #fff;
	text-decoration: none;
}
.examplebox h2.counterplan{	top: 33%;}

.examplebox p{
	position: absolute;
	bottom: 10%;
	width: 100%;
	color: #FFF;
	z-index: 100;
}

.slider_case{
    text-align: center;
}

.slider_case h2{
    font-size: 20px;
    margin-bottom: 5px;
}

.slider_case p{
    margin-bottom: 20px;
}

#sliderPro01,#sliderPro02{
    margin: 0 auto;
    padding: 0;
}

#sliderPro01 li,#sliderPro02 li{
    list-style-type: none;
}







@media (min-width: 560px) and (max-width: 767px) {
	.examplebox {
		width: 46%;
		float: left;
		margin: 0 2% 20px;
	}
}
@media (max-width: 559px) {
.examplebox a{font-size: 18px;}
}
@media (max-width: 449px) {
	div.pp_pic_holder{
		display: none;
    position: absolute;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000;
		padding: 5px 0 5px 2%;
	}
	div.pp_content_container{
		width: 100% !important;
		height: 100% !important;
		overflow: hidden;
	}
	.pp_right{overflow: hidden;}
	div.pp_hoverContainer{width: 92% !important;}
	div.pp_content{width: 96% !important;}
	#pp_full_res{width: 102%; margin: 0;}
	#pp_full_res img{width: 100% !important; height: 100% !important;}
	.pp_details {width: 102% !important; background: #FFF; margin:-1px 0 0 !important;}
	div.pp_default .pp_expand {display: none !important;}
}
/*installation*/
h3.title-green{
	color: #4ac1cc;
	font-size: 19px;
}
.text-orange{
	color: #f3994f;
}
a.border{
	color: #f3994f;
	border: 1px solid #f3994f;
	padding: 1px;
	font-size: 12px;
	text-decoration: none;
}

.fw-normal{
	font-weight: normal;
}
a.andmore{
	max-width: 320px;
	padding: 15px 5px;
	border: #595757 1px solid;
	border-radius: 0;
	color: #595757;
	font-size: 15px;
	letter-spacing: 0.25em;
	text-align: center;
}
a.andmore:hover{
		background: rgba(89,87,87,0.05);
}

.installation-img {
	width: 85.71%;
}

.installation-img02 {
	width: 82%;
}

.ceiling-merit {
	background-color: #E6E5EC;
	padding: 25px 20px;
	margin-bottom: 60px;
}
.ceiling-merit-ttl {
	border-radius: 6px;
	background: #FFF;
	text-align: center;
	font-size: 19px;
	color: #6D0072;
	line-height: 50px;
	margin: 0 0 20px 0;
}
.ceiling-merit-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 0;
	margin: 0 0 0px 0;
	gap: 40px;
}
.ceiling-merit-list-item {
	list-style: none;
}
.ceiling-merit-list-number {
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 10px;
}

.ceiling-merit-list-number::after {
	counter-increment: number 1;
	content: counter(number);
	font-size: 11px;
	background-color: #595757;
	border-radius: 50%;
	color: #fff;
	width: 20px;
	aspect-ratio: 1;
	line-height: 1;
	display: grid;
	place-content: center;
}

.ceiling-merit-list-ttl {
	text-align: center;
	width: 120px;
	aspect-ratio: 1;
	background-color: #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	line-height: 1.3;
	color: #6D0072;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 24px;
	font-weight: 600;
	margin-inline: auto;
	margin-bottom: 20px;
}

.ceiling-merit-list-under {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ceiling-merit-list-under-item {
	position: relative;
	padding-left: 10px;
	line-height: 1.4;
}

.ceiling-merit-list-under-item::before {
	content: "";
	display: block;
	width: 4px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #595757;
	position: absolute;
	left: 0;
	top: 7px;
}

.ceiling-merit-list-under-item:not(:first-child) {
	margin-top: 10px;
}

.ceiling-table {
	margin-bottom: 60px;
}

.ceiling-table-tr {
	border-bottom: #595757 1px solid;
	height: 30px;
}

.ceiling-table-tr:not(:first-child) {
	height: 40px;
}

.ceiling-table-tr:first-child td {
	font-size: 15px;
}

.ceiling-table-tr:not(:first-child) td:first-child {
	font-size: 13px;
}

.ceiling-table-tr:not(:first-child) td:not(:first-child) {
	font-size: 11.3px;
}

.ceiling-table-tr td {
	padding-right: 20px;
}

.ceiling-table-tr td:first-child {
	width: 32%;
	white-space: nowrap;
}

.ceiling02 {
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 60px;
}

.ceiling02-content {
	width: 29.1%;
	counter-reset: number 0;
}

.ceiling02-content ol {
	padding-left: 5px;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.ceiling02-content ol li {
	list-style: none;
	position: relative;
	display: flex;
	gap: .3em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
}

.ceiling02-content ol li::before {
	counter-increment: number 1;
	content: counter(number)".";
}

.ceiling02-img {
	flex: 1;
}

.ceiling02-img img {
	max-width: 100%;
}

.ceiling02-img-small {
	width: 88.52%;
	margin-inline: auto;
}

.ceiling02-img02 img {
	max-width: 100%;
}

.ceiling02-content-ttl {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
}

.size-order {
	gap: 30px;
}

.size-order-img {
	width: 46.77%;
}

.size-order-img img {
	max-width: 100%;
}

.size-order-content {
	flex: 1;
}

.size-order-txt {
	font-size: 30px;
}

.size-order-list {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding-left: 0;
	margin: 0;
}

.size-order-list li {
	list-style: none;
	line-height: 1.4;
	position: relative;
	padding-left: 24px;
}

.size-order-list li::before {
	content: "";
	display: block;
	width: 4px;
	aspect-ratio: 1;
	background-color: #595757;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	left: 10px;
}

@media (max-width: 991px) {
	.movie p{
		text-align: center;
	}

	.ceiling-merit-list {
		grid-template-columns: auto;
	}

	.size-order,
	.ceiling02 {
		flex-direction: column;
	}

	.size-order-img {
		width: 100%;
	}

	.ceiling-table-wrapper {
		white-space: nowrap;
		overflow-x: auto;
	}

	.ceiling-table-wrapper {
		margin-bottom: 60px;
	}

	.ceiling-table {
		margin-bottom: 0;
	}

	.ceiling02-content {
		width: 100%;
	}
}
p.grid{
	background: #B765A5;
	font-size: 9px;
	color: #FFF;
	padding: 3px;
	width: 140px;
	text-align: center;
}

@media (min-width: 1200px) {
	.inbox{position: relative;}
	.inbox p{
		position: absolute;
		top: 30px;
		margin-top: 10px;
	}
	.img_r{float: right;}
}
@media (max-width: 1199px) {
	.inbox p{margin-top: 20px;}
}

.img100{width: 100%;}



/*product*/
.product-spec-wrap{
overflow: auto;
white-space: nowrap !important;
}
.product-spec-wrap::-webkit-scrollbar{
 height: 5px;
}
.product-spec-wrap::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.product-spec-wrap::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
table.product-spec{
width: 100%;
}
table.product-spec tr td{
	white-space: nowrap;
	font-size: 12px;
	padding-right: 0.5em;
}
.border-b{
	border-bottom: 1px solid #999;
}
.border-b-dot{
	border-bottom: 1px dotted #999;
}
h2.product-title{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	border-left: 10px solid #9fa0a0;
	padding-left: 0.5em;
	color: #9fa0a0;
}
h3.product-title{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 19px;
	color: #9fa0a0;
	display: block;
	border-bottom: 1px solid #999;
}
h3.product-title span{
	border-bottom: solid 1px #fff;
	display: inline-block;
	margin-bottom: -1px;
	padding-right: 0.5em;
}
h4.product-title{
	color: #1079bd;
}
h4.product-title span{
	font-size: 0.8em;
	margin-left: 1em;
}
.order{
	background: #727171;
	color: #FFF;
	padding: 3px 8px;
	margin-top: 15px;
	font-size: 13px;
}

/*shop*/

h2.dealer-title{
	background: #1d2088;
	color: #fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 22px;
	padding: 0.3em 0.5em;
	margin-bottom: 0;
}
.dealer-table>tbody>tr{
	border-bottom: #ddd 1px dotted;
}
.dealer-table>tbody>tr>td{
	padding: 16px 8px;
	border: none;
}
.dealer-table ul{padding: 0; margin-bottom: 0;}
.dealer-table ul li{
	list-style: none;
	border: #ccc 1px solid;
	width: 123px;
	margin-bottom: 8px;
}
.dealer-table a.btn-tel{
	font-size: 14px;
	display: inline;
	padding: 0;
}
.dealer-table a{
	color: #595757;
	text-decoration: none;
	font-size: 12px;
	display: table-cell;
	vertical-align: middle;
	padding: 2px 10px;
}
.dealer-table a span.glyphicon{
	font-size: 6px;
	color: #1d2088;
	padding-right:5px;
}
@media (max-width: 767px) {
	.dealer-table>tbody>tr>td{padding: 8px;}
	.dealer-table th,.dealer-table td{
		width: 100%;
    display: block;
		border-top: none;
	}
.dealer-table ul li{
	float: left;
	margin: 10px 10px 20px 0;
	}
}
@media (min-width: 321px) {
	.tel{display: inline;}
}

.mfp-content {
  max-width: 80%;
	padding-top: 60px;
}
/*.mfp-close-btn-in .mfp-close {
	color: #fff !important;
  background: #333;
  border-radius: 22px;
	position: absolute;
	top: 0;
}*/
.gmap{
	position: absolute;
	top: 55px;
	width: 100%;
	height: 520px;
	display: block;
}
@media (max-width: 519px) {
	.gmap{
		height: 320px;
	}
}

/*shop*/

.inquiry .btn_submit,.inquiry .btn_link{
	background: linear-gradient(#0058A9, #053290);
	color: #FFF;
	border: none;
}
.inquiry .btn_submit:hover{
	background: linear-gradient(#053290, #0058A9);
	color: #FFF;
}
.inquiry .btn-default{
	background: linear-gradient(#e6e6e6, #d1d1d1);
	color: #000;
	border: none;
}
.inquiry .btn-default:hover{
	background: linear-gradient(#d1d1d1, #e6e6e6);
}
.inquiry th{
	background: #fafafa;
}

@media (max-width: 767px) {
	.inquiry th,.inquiry td{
		width: 100%;
		display: block;
	}
}

.dealer-table tr td:first-child{
	white-space: nowrap;
}



/*---------- footer ----------*/
	
#footer{
	background: #000;
	position: relative;
	z-index: 120;
}
#footer footer{
	padding: 30px 0 15px;
	color: #D4D4D4;
	font-feature-settings : "palt";
}

.footerlink img.logo{width: 160px}
.footerlink a{color: #D4D4D4;}
.footerlink p{letter-spacing: 0.1em;}
.footerlink ul{
	padding:0 5px 0 1.5em;
}
.footerlink li{
	list-style: disc;
	font-size: 12px;
	margin-bottom: 10px;
}
.sitelink{overflow: hidden;}
.sitelink a{
	border: #D4D4D4 1px solid;
	border-radius: 0;
	padding: 0 10px;
	margin-bottom: 15px;
}
.sitelink a.is-jfps {
	padding: 6px 30px;
}
.sitelink a.is-jfps img {
	width: 83px;
}
@media (min-width: 768px) {
	.sitelink	a{
		float: right;
	}
}
@media (max-width: 767px) {
	.sitelink{
		width: 90%;
		margin: 20px 5% 47px;
	}
	.sitelink a{
		width: 48%;
		margin:0 1% 2%;
		float: left;
	}
	.sitelink a.is-jfps {
		display: block;
		margin: 0 auto;
		float: none;
		max-width: max-content;
}
}
@media (max-width: 520px) {
	.footerlink ul{
		width: 100%;
	}
}


#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
		z-index: 150;
}
#page-top a {
    background: rgba(85,69,69,0.05);
		border: #595757 1px solid;
		width: 55px;
		height: 55px;
		padding: 8px;
    text-decoration: none;
    color: #595757;
    text-align: center;
    display: block;
    border-radius: 50%;
}
#page-top a:hover {
    background: rgba(0,0,0,0.1);
		border: #595757 1px solid;
    text-decoration: none;
}

.mw472{
	max-width:472px;
}