@charset "utf-8";

/* INITIALIZE ********************************************************* */
*{ margin:0;padding:0;font-weight:normal;}
table{ border-collapse:collapse;border-spacing:0; }
th{ text-align:left; }
ul{ list-style-type:none; }
img,a img{ border:0;vertical-align:top; }

/* FONT COSTORMIZE **************************************************** */
body{font-size:small;font-family:Meiryo,'メイリオ',Osaka,Hiragino;line-break:strict;}
table,h1,h2,h3,h4,h5{font-size:small;}
@-moz-document url-prefix(){body,table,h1,h2,h3,h4,h5{font-size:medium;}}
strong,em,b{ font-weight:bold;font-style:normal;}
input,select,textarea{font-size:medium;}

body{color:#333333; }
a{color: #FF0000;text-decoration:none;}
a:hover{text-decoration:underline;}

/* TEXT SIZE --------------------------
.font-10px{ font-size:80%; }
.font-11px{ font-size:90%; }
.font-12px{ font-size:95%; }
.font-13px{ font-size:100%; }
.font-14px{ font-size:110%;}
.font-16px{ font-size:120%;}
/*------------------------------------ */


/* LAYOUT ************************************************************* */
body{
	background:#FFF url(../img/common/body_bg.png) repeat-x;
}
#header,#gnavi,#contents{
	width:980px;
	margin:0px auto;
}
#header{
	position:relative;
	height:90px;
	background:#FFF url(../img/common/head_bg.png) no-repeat;
}
#gnavi{
	background:#FFF;
	padding-bottom:18px;
}
#contents{
	background:#FFF;
	min-height:800px;
	padding-bottom:50px;
}
#main{
	float:left;
	width:680px;
	margin:0 0 0 20px;
	font-size:105%;
	line-height:170%;
}
#side{
	float:right;
	width:230px;
	margin:0 20px 0 0;
	line-height:140%;
}
/* clear fix */
.clr{/zoom:1;}
.clr:after{content:'';display:block;clear:both;}


/* HEADER ------------------------------------------------------------*/
#header:before,#header:after{
	z-index: -1;
	position:absolute;
	content: "";
	height:500px;
	top:-10px;
	right:10px;
	left:auto;
	width:50%;
	bottom: 80%;
	max-width:300px;
	background:#777;
	-webkit-box-shadow: 15px 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 15px 0 10px rgba(0,0,0,0.5);
	box-shadow: 15px 0 10px rgba(0,0,0,0.5);
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	display:none\9;/* IE8 and below */
}
#header:before{
	left:10px;
	right:auto;
	-webkit-box-shadow: -15px 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow: -15px 0 10px rgba(0,0,0,0.5);
	box-shadow: -15px 0 10px rgba(0,0,0,0.5);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	display:none\9;/* IE8 and below */
}
h1{
	padding:10px 10px 0 0;
	text-align:right;
	font-size:11px;
	line-height:11px;
	color:#666666;
}
#header-logo{
	position:absolute;
	left:10px;top:15px;
	width:300px;
}
#header-info{
	position:absolute;
	left:780px;top:40px;
	width:200px;
}
#header-info .tel{
	font-size:26px;
	font-family:'Open Sans',sans-serif;
	line-height:100%;
	letter-spacing:1px;
}


/* GNAVI ------------------------------------------------------------*/
#gnavi ul{
	height:60px;
	overflow:hidden;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
#gnavi li{
	float:left;
	width:140px;
}
#gnavi li a{
	display:block;
	width:140px;
	height:60px;
	overflow:hidden;
}
#gnavi li a:hover img{
	margin-top:-60px;
}
#gnavi01 a img{}
#gnavi02 a img{margin-left:-140px;}
#gnavi03 a img{margin-left:-280px;}
#gnavi04 a img{margin-left:-420px;}
#gnavi05 a img{margin-left:-560px;}
#gnavi06 a img{margin-left:-700px;}
#gnavi07 a img{margin-left:-840px;}

#topicpath{
	padding:15px 15px 0;
	font-size:95%;
}
#topicpath p{
	padding:0 0 0 25px;
	background:url(../img/common/bg_tpath.gif) no-repeat left bottom;
	line-height:160%;
}

/* FOOTER ------------------------------------------------------------*/
#footer{
	background:#515151;
}
#footer-inner{
	width:840px;
	margin:0 auto;
	padding:20px 70px;
	background: url(../img/common/foot_logo.png) no-repeat 20px 20px;
}
#footer dl{
	margin:15px 10px 15px 20px;
	color:#FFFFFF;
}
#footer a{
	color:#FFFFFF;
	text-decoration:none;
}
#footer a:hover{
	color:#FF9999;
}
#footer dl dt{
	font-size:120%;
}
#footer dl dd{
	padding:6px 20px;
	font-size:90%;
}
#footer dl dd.mess{
}
#footer dl dd.fnavi{
	line-height:200%;
	color:#999;
}
#footer .copyright{
	padding:10px 0;
	text-align:right;
}
#pagetop{
	position:fixed;
	bottom:50px;
	right:50px;
	z-index:10;
}

/* SIDE ------------------------------------------------------------*/
#side-prod-navi{
	margin:0 0 15px 0;
	padding:0 0 5px 0;
	width:230px;
	background:url(../img/common/side_prod_bg.png);
	line-height:100%;
}
#side-prod-navi ul{
	margin:10px 15px;
	width:198px;
	background:#FFFFFF;
	border:solid 1px #DD0000;
}
#side-prod-navi ul li{
	margin:2px;
}
#side-prod-navi ul li a{
	display:block;
	padding:10px 3px 8px 28px;
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,-webkit-gradient(linear, left top, left bottom, color-stop(1.00, #F3F3F3), color-stop(0.47, #D3D3D3), color-stop(0.42, #E6E6E6), color-stop(0.00, #FFF));
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,-webkit-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,-moz-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,-o-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,-ms-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 50%,linear-gradient(to bottom, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	font-weight:bold;
	font-size:110%;
	line-height:1.2;
	border:solid 1px #CCCCCC;
	text-decoration:none;
	color:#333333;
}
#side-prod-navi ul li a#ca{
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,-webkit-gradient(linear, left top, left bottom, color-stop(1.00,#F3F3F3), color-stop(0.42,#D3D3D3), color-stop(0.47,#E6E6E6), color-stop(0.00,#FFF));
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,-webkit-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,-moz-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,-o-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,-ms-linear-gradient(top, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
	background:url(../img/common/side_prod_arr.png) no-repeat 2px 12px,linear-gradient(to bottom, #FFF 0%, #E6E6E6 42%, #D3D3D3 47%, #F3F3F3 100%);
}
#side-prod-navi ul li a:hover{
	background-color:#CCCCCC;
	color:#CC0000;
}

#side-pr{
	margin:5px 0;
}
#side-pr li{
	margin:10px 0;
}
#side-deli{
	margin:20px 0;
	border:solid 5px #ff7f7f;
}
#side-deli dd{
	padding:10px;
	font-size:95%;
}
#side-info{
	margin:20px 0;
	padding:5px;
	background:url(../img/common/side_info_bg.gif) no-repeat center -5px;
	border:solid 5px #e6e6e6;
}
#side-info dt{
	margin-bottom:7px;
	padding:7px 0 3px;
	border-bottom:solid 1px #999;
	font-size:110%;
	text-align:center;
}
#side-info dd{
	font-size:12px;
	margin:0 15px 6px;
}
#side-info dd.tel{
	margin-top:-5px;
	font-size:14px;
	font-family:'Open Sans',sans-serif;
	letter-spacing:1px;
}
#side-info dd.tel span{
	display:inline-block;
	width:30px;
}


/* MAIN ------------------------------------------------------------*/
.lv01{
	margin:0 0 20px 0;
}
.lv02{
	clear:both;
	height:32px;
	margin:30px 0 15px 0;
	padding:8px 5px 0 22px;
	background:url(../img/common/bg_lv2.png) no-repeat;
	font-size:120%;
	font-weight:bold;
}
.lv03{
	clear:both;
	margin:10px 0 5px 0;
	padding:3px;
	font-weight:bold;
	line-height:100%;
	background:#CCCCCC;
}
.lv04{
	clear:both;
	margin:20px 0 10px;
	border-bottom:dotted 1px #C00;
	font-size:115%;
	font-weight:bold;
}
.section01{
	margin:0 0 0 15px;
}
.section02{
	margin:10px 0;
}
.section01 p{
	margin-bottom:10px;
}

.float-right{float:right;}
.float-left{float:left;}
.align-center{text-align:center;}
.align-right{text-align:right;}
.align-left{text-align:left;}
.img-right{float:right;margin:0 0 20px 20px;}
.img-left{float:left;margin:0 20px 20px 0;}
.f-clr{clear:both;}

/* unit ---------- */
/* img3layout */
.board-img3{
}
.board-img3 li{
	float:left;
	width:180px;
	margin-right:12px;
}
.board-img3 li.end{
	margin-right:0;
}
.board-img3 li img{
	margin:5px 0;
}

/* separatable */
.board-sep2{
	margin:10px 0 10px 15px;
}
.board-sep2 .left-sp{float:left;}
.board-sep2 .right-sp{float:right;}
.board-sep2 .img-cont{width:220px;}
.board-sep2 .txt-cont{width:410px;}

/* img */
.pframe img{
	padding:1px;
	border:solid 1px #999;
}

/* table */
.tbl01{
	width:640px;
	margin:10px auto;
	border-left:solid 1px #CCCCCC;	
	border-top:solid 1px #CCCCCC;
}
.tbl01 th,.tbl01 td{
	padding:5px;
	vertical-align:top;
	border-right:solid 1px #CCCCCC;	
	border-bottom:solid 1px #CCCCCC;
}
.tbl01 th{
	width:20%;
	background:#E2ECF4;
	font-weight:bold;
}

/* text */
.font-blue{color:#00F;}
.font-line01{border-bottom:solid 1px #C30;}
.text-st01{font-weight:bold;font-size:105%;}

/* link */
a.left-arrow{
	padding:4px 0 2px 18px;
	background:url(../img/common/mark_arr01.png) no-repeat 0 50%;
	color:#333333;
}
a.left-arrow:hover{color:#FF0000;}
.btn-on:hover img,
#side a:hover img{filter:alpha(opacity=70);-moz-opacity: 0.7;opacity:0.7;}

/* option */
.btm-space{
	margin-bottom:400px;
}
hr.line01{
	border:none;
	border-bottom:dotted 2px #FFCC00;
	height:2px;
	margin:10px 0;
}
.vertical-mid{
	vertical-align:middle;
}
.frame01{
	padding:10px 20px;
	border:solid 1px #CCCCCC;
}
.frame01 dd{
	padding:10px 30px;
}
.icon-square{
	padding:4px 0 0 20px;
	background:url(../img/common/icon_sq1.gif) no-repeat left center;
	font-weight:bold;
}
.btn01{
	display:inline-block;
	margin-top:10px;
	padding:8px 10px 10px;
	background:linear-gradient(#fefefe,#f2f2f2 49%,#e1e1e1 50%,#f5f5f5);/*(#fefefe,#f2f2f2 50%,red 51%.blue);*/
	border:solid 1px #b3b3b3;
	border-radius:4px;
	box-shadow:2px 2px 2px 1px rgb(0 0 0 / .1);
	font-size:13px;
	line-height:13px;
	letter-spacing:1px;
	color:#333;
}
.btn01:hover{
	opacity:.7;
	text-decoration:none;
}
.btn01::before{
	display:inline-block;
	content:"";
	width:8px;
	height:10px;
	margin:3px 5px 0 0;
	background:#c71c1c;
	clip-path:polygon(0 0,0% 100%,100% 50%);
}


/* PAGE OPTION STYLE ************************************************** */

/* INDEX  ---------------------------------------------------------*/
#index #header{
	background:#FFF url(../img/top/top_head_bg.png) no-repeat;
}
#index #main{
	float:none;
	width:910px;
	margin:0 35px;
}
#index #catch{
	width:980px;
	height:200px;
	overflow:hidden;
	margin:0 auto;
	background:#FFF;
}
#index #catch .swiper-slide img{
}
#index #products-navi{
	background:url(../img/top/prod_bg.png);
	margin:0 0 40px;
}
#index #products-navi ul{
	overflow:hidden;
}
#index #products-navi ul li{
	float:left;
	box-sizing:border-box;
	width:440px;
	background:#FFF;
	margin:10px 0 -1000px 10px;
	padding:30px 35px 1030px 35px;
}
#index #products-navi ul li p{
	margin:5px 0 10px;
	line-height:170%;
}
#products-navi h4{
	margin:0px;
	padding:2px 0 0 20px;
	background:url(../img/common/icon_sq1.gif) no-repeat left center;
	font-size:110%;
	font-weight:bold;
}
#index #products-navi .jis{
	margin:15px 0 0;
	padding:5px 7px 3px;
	border:solid 1px #999;
}
#index #products-navi .jis img{
	float:left;
}
#index #products-navi .jis p{
	float:left;
	margin:0;
	padding:5px;
	font-size:11px;
	line-height:130%;
}
#index #products-navi .jis a{
	float:right;
	display:inline-block;
	margin-top:7px;
	padding:0 0 0 20px;
	background:url(../img/common/mark_arr02.png) no-repeat left 7px;
	font-size:12px;
}
#index .padding-b20{
	padding-bottom:20px;
}

#index #mc-navi{
	clear:both;
	float:left;
	width:500px;
	margin:10px;
}
#index #mc-navi a{
	display:block;
	height:130px;
	text-decoration:none;
	color:#333;
	background:#FFF;
}
#index #mc-navi span{
	display:block;
	position:relative;
	z-index:2;
	margin:-60px 0 0 20px;
	font-size:12px;
	line-height:160%;
}

#index #delivery-navi{
	float:left;
	width:380px;
	height:125px;
	padding:0 0 5px;
	overflow:hidden;
	margin:10px 10px 10px 0;
	background:#FFF;
	font-size:95%;
	line-height:140%;
}
#index #delivery-navi p{
	margin:0 15px;
}

#index #info{
	float:right;
	width:280px;
	padding-bottom:10px;
	border:solid 1px #CCCCCC;
}
#index #info dt{
	min-height:28px;
	padding:17px 0 0 50px;
	background:url(../img/top/info_bg.png) no-repeat center 5px;
	font-size:110%;
	font-weight:bold;
	letter-spacing:1px;
}
#index #info dd{
	margin:5px 45px 11px;
	line-height:140%;
}
#index #info dd.tel{
	font-size:120%;
	font-family:'Open Sans',sans-serif;
	letter-spacing:1px;
	line-height:140%;
}
#info dd.tel span{
	display:inline-block;
	width:30px;
}

.index_topics{
	float:left;
	width:600px;
}
.index_topics ul{
	margin:5px 0;
}
.index_topics li{
	padding:0 5px 5px;
	border-bottom:dotted 1px #999;
}
.index_topics span{
	display:block;
	width:150px;
	padding:8px 0 0 0;
}
.index_topics span.new{
	background:url(../img/top/mark_new.png) no-repeat right 10px;
}
.index_topics ul a{
	display:inline-block;
	margin-left:50px;
	text-decoration: none;
	color:#333;
}
.index_topics ul a:hover{
	color:#f00;
}


/* EXAMPLE  -------------------------------------------------------*/
.example-list{
	margin-left:-5px;
}
.example-list ul li{
	float:left;
	width:210px;
	margin:20px 0 0 15px;
	font-size:95%;
	line-height:140%;
}
.example-list ul li img{
	padding:1px;
	border:solid 1px #999;
}
.example-list ul li p{
	margin:5px 0;
	min-height:60px;
}


/*** PRODUCTS ***/
/* PRODUCTS COMMON STYLE  -------------------------------------------------------*/ 
.board-pdf{
	padding:8px 8px 4px;
	background:url(../products/img/bg_gray.gif) no-repeat;
	text-align:right;
	font-size:80%;
	line-height:140%;
}
.board-pdf .btn{
	padding-bottom:8px;
	margin-bottom:8px;
	border-bottom:solid 1px #999;
}
#product-lead{
	float:left;
	width:350px;
}
#product-rbend-pr{
	float:right;
	width:290px;
	border:solid 1px #CCC;
	border-radius:4px;
}
#product-rbend-pr dt{
	text-align:center;
}
#product-rbend-pr dd{
	margin:0 20px 15px;
}

.product-example{
	margin:15px;
	border:solid 1px #B8C7D1;
	background:#EFF2F4;
}
.product-example-title{
	height:30px;
	line-height:34px;
	margin:1px;
	padding:0 0 0 25px;
	background:#C6D7E2 url(../img/common/mark_cc01.png) no-repeat 5px 50%;
	font-size:105%;
	font-weight:bold;
}
.product-example ul{
	width:606px;
	margin:0 auto;
}
.product-example li{
	float:left;
	width:180px;
	margin:15px 10px;
}
.product-example li img{
	padding:1px;
	border:solid 1px #999;
}
.product-example-other{
	text-align:right;
	margin:0 20px 10px;
}

.product-use{
	margin:10px 0;
}
.product-use dt{
	display:inline-block;
	margin-right:5px;
	padding:5px 8px 3px;
	background:#CCC;
	font-weight:bold;
	line-height:100%;
}
.product-use dd{
	display:inline;
}

.products-parts{
	margin:0 10px 0 0;
}
.products-parts-sample{
	margin-bottom:10px;
}
.products-parts li{
	float:left;
	width:110px;
	padding:0 0 5px 0;
}
.products-parts li.wide{
	width:160px;
}
.products-parts p{
	padding:4px 0 0 0;
	font-size:85%;
	line-height:120%;
}

#board-delivery{
	margin-top:30px;
	padding:5px;
	border:solid 1px #CCCCCC;
}
#board-delivery .float-left{
	margin:30px 20px;
}
#board-delivery dl{
	width:480px;
}
#board-delivery dt{
	margin:10px 0 0 0;
	font-weight:bold;
	color:#3366CC;
}
#board-delivery dd{
	margin:0 20px 10px 12px;
}
#products-end{
	margin-top:30px;
}

/* STEELBASE  -------------------------------------------------------*/
.product-jis{
	margin:10px 20px 20px 0;
	padding:5px;
	border:solid 1px #999;
}
.product-jis img{
	float:left;
}
.product-jis p{
	float:left;
	padding:5px 5px 0;
	font-size:11px;
	line-height:130%;
}
.product-jis a{
	display:inline-block;
	margin:7px 0 0 10px;
	padding:0 0 0 20px;
	background:url(../img/common/mark_arr02.png) no-repeat left 7px;
	font-size:12px;
}

/* ECOWALL  -------------------------------------------------------*/
#ecowall-spec{
	width:600px;
	margin:20px auto;
}
#ecowall-spec dt{
	float:left;
	width:140px;
}
#ecowall-spec dd{
	float:right;
	width:450px;
	margin-bottom:20px;
	padding-top:5px;
	color:#339966;
}
#ecowall-compare{
	width:600px;
	margin:0 auto;
	border-top:solid 1px #339966;
	border-left:solid 1px #339966;
}
#ecowall-compare th,#ecowall-compare td{
	padding:3px;
	border-bottom:solid 1px #339966;
	border-right:solid 1px #339966;
}
#ecowall-compare th{
	font-weight:bold;
	text-align:center;
}
#ecowall-compare th.past{
	background:#CCCCCC;
}
#ecowall-compare td.past{
	background:#F6F6F6;
}
#ecowall-compare th.new{
	background:#99FF99;
}
#ecowall-compare td.new{
	background:#CCFFCC;
}
#ecowall-compare .no{
	background:#66CC99;
}

/* RBEND  -------------------------------------------------------*/
#rbend-sample-list{
	margin:10px 15px;
	border-top:dotted 1px #999999;
}
#rbend-sample-list div{
	border-bottom:dotted 1px #999999;
}
#rbend-sample-list dl{
	float:right;
	width:300px;
	margin:10px 0;
}
#rbend-sample-list dt{
	margin-bottom:5px;
	font-weight:bold;
}
#rbend-sample-list ul{
	float:left;
	width:340px;
	padding:10px 0;
}
#rbend-sample-list ul li{
	float:left;
	width:165px;
}

/* MCSTRONG  -------------------------------------------------------*/
.mc-box .txt-cont{
	float:left;
	width:400px;
	margin:0 0 10px 15px;
}
.mc-box .img-cont{
	float:right;
	width:240px;
}
#mc-relate{
	margin:30px 0;
	padding:10px 10px 5px;
	border-top:dotted 1px #999;
	border-bottom:dotted 1px #999;

}

/* COMPANY  -------------------------------------------------------*/
#comp-jismark{
	margin:10px 0;
	min-height:100px;
	padding-left:80px;
	background:url(../company/img/jis.gif) no-repeat;
}
#comp-eco{
	width:600px;
	margin:10px auto;
	padding:5px 0 20px 0;
	background:url(../company/img/bg_eco.gif) repeat-y;
	border:solid 1px #FFFFFF;
}
#comp-eco li{
	min-height:30px;
	margin-left:100px;
	line-height:30px;
	color:#339933;
}

/* POLICY  -------------------------------------------------------*/
#policy-mess{
	margin:0 75px;
}

/*** INFO ***/
.info-tel{
	font-size:140%;
	line-height:160%;
	font-weight:bold;
	font-family:'Open Sans',sans-serif;
}
.info-tel span{
	display:inline-block;
	width:40px;
}
ul.info-item{
	margin:10px 20px;
	padding:10px 40px;
	background:#E2ECF4;
	list-style-type:circle;
}
ul.info-item li{
	margin:5px 0;
}
.info-mail{
	margin:10px 20px;
	font-size:110%;
}

.privacy{
	margin:30px 20px;
	padding:10px;
	border-top:solid 3px #999999;
	border-bottom:solid 3px #999999;
}
.privacy dt{
	margin-bottom:10px;
	font-weight:bold;
}
.privacy ol{
	margin:10px 20px;
}
.privacy ol li{
	margin-bottom:10px;
	line-height:120%;
}


/* SITEMAP  -------------------------------------------------------*/
#sitemap{
}
#sitemap .toppage{
	margin-bottom:30px;
	padding:4px 0 0 18px;
	background:url(../img/common/icon_arrow02.gif) no-repeat left center;
}
#sitemap h4{
	margin:20px 0 5px 0;
	padding:2px 5px;
	background:#CCCCCC;
	font-weight:bold;
}
#sitemap dl{
	margin:20px 40px;
}
#sitemap dt{
	padding:4px 0 0 18px;
	background:url(../img/common/icon_arrow02.gif) no-repeat left center;
}
#sitemap dd{
	margin:0 0 15px 30px;
}


/* for Safari */
/*body:last-child:not(:root:root) *{letter-spacing:-1px;}*/


/* TOPICS  -------------------------------------------------------*/
.topics_list{
	margin: 20px 0 0;
	line-height:1.5;
	& li{
		display:flex;
		padding:15px 10px 12px;
		border-top: dotted 1px #999;
		&:last-child{
			border-bottom: dotted 1px #999;
		}
		& span{
			display:block;
			width:150px;
			margin-right: 10px;
			&.new{
				background:url(../img/top/mark_new.png) no-repeat right 2px;
			}
		}
		.txt{
			flex:1;
		}
		& a,  p{
			display:inline-block;
			text-decoration: none;
			color:#333;
			&:hover{
				color:#f00;
			}
		}
	}
}

.topics_detail{
	box-sizing:border-box;
	margin: 5% auto;
	padding: 0;
	overflow: hidden;
	.title{
		background:#E2ECF4;
		padding:8px;
		font-size:16px;
		line-height:1.4;
	}
	.date{
		margin-top:5px;
		text-align: right;
	}
	.cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: min(4%,30px) auto 0;
		width: 100%;
		.txt{
			width: 100%;
			line-height: 1.7;
			margin-bottom: 0;
			flex:1;
		}
		& figure{
			width: 100%;
			margin-top: min(4%,30px);
			width:35%;
			margin: 0 0 0 5%;
			& img{
				object-fit: scale-down;
				width: 100%;
			}
		}
	}

	.linklist{
		box-sizing:border-box;
		width: 100%;
		margin: min(3%,30px) 0 0;
		padding: min(3%,30px);
		border: double 3px #ccc;
		& dt{
			font-weight: 600;
		}
		& dd{
			margin: 1em 0.5em;
			&:before{
				display: inline-block;
				content: "";
				width: 0.5em;
				height: 0.7em;
				margin-right: .5em;
				background: #c00;
				clip-path: polygon(0 0, 100% 50%, 0 100%);
			}
			& a{
				text-decoration: none;
				display: inline-block;
				color: #333;
				text-decoration:underline;
				&:hover{
					color:#f00;
				}
			}
		}
	}
}

.pagenavi{
	display: flex;
	justify-content: space-between;
	gap: 5px;
	width: 100%;
	margin: 0 auto;
	padding: 1em 0;
	li{
		width: min(90%,200px);
	}
	.btn01{
		padding:8px 15px 10px;
	}
	& li:first-child .btn01:before{
	  clip-path: polygon(0 50%, 100% 0, 100% 100%);
	}
	& li:last-child{
		text-align:right;
	}
	& li:last-child .btn01:before{
		display:none;
	}
	& li:last-child .btn01:after{
		display:inline-block;
		content:"";
		width:8px;
		height:10px;
		margin:3px 0 0 5px;
		background:#c71c1c;
	  clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.list{ 
		text-align:center;
	}
	.list .btn01:before{
		width: 10px;
		margin: 3px 8px 0 0;
		clip-path: none;
	}
}
.overray{
	display: block;
	visibility: hidden;
	position: fixed;
	top: 0; left: 0;
	z-index: 10;
	width: 100%;
	height: 100vh;
	background: #000;
	opacity: 0;
	transition: opacity .3s, visibility .3s;
}
.photo_thumb{
	position: relative;
	width: 100%;
	cursor: pointer;
	transition: .3s ease;
	&:before{
		content: "";
		display: block;
		position: absolute;
		bottom: 8px; right: 8px;
		width: min(8vw,40px);
		height: min(8vw,40px);
		border-radius: 50%;
		background: rgb(0 0 0 /.6) center center /60% auto url(../img/mark_zoomin.svg) no-repeat;
		text-align: center;
		line-height: min(8vw,40px);
		font-size: min(4.8vw,24px);
		transition: .3s ease;
		color: #fff;
	}
	@media(any-hover:hover){
		&:hover{
			opacity: .8;
			&:before{
				background-color: rgb(235 118 118 /.8);
			}
		}
	}
	& img{
		width: 100%;
		height: auto;
		object-fit: scale-down;;
	}
}
.photo_viewer{
	visibility: hidden;
	position: fixed;
	top: 0; left: 0; z-index: 9990;
	width: 100%;
	height: 100svh;
	&.is-show{
		visibility: visible;
	}
	.inner{
		position: relative;
		width: min(100%,1000px);
		height: min(100%,1000px);
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box{
		position: relative;
		z-index: 10;
		margin: 4%;
		width: fit-content;
		height: fit-content;
		& img{
			width: 100%;
			height: auto;
			max-height: 90svh;
			object-fit: contain;
		}
	}
	.close{
		display: block;
		position: fixed;
		top: 5px; right : 5px;
		padding: 3px;
		border: solid 1px #fff;
		background: #333;
		&:before{
			display: block;
			content:"";
			width: 36px;
			height: 36px;
			background: center center / contain url(../img/mark_clear.svg) no-repeat;
		}
	}
	&.is-show .overray{
		visibility: visible;
		opacity: .8;
	}
}

/* limit index_topics style */
.index_topics dt{
	padding:8px 0 0 10px;
}
.index_topics dd{
	padding:0 5px 5px 60px;
	border-bottom:dotted 1px #999999;
}
.index_topics  dd.new{
	background:url(../img/top/mark_new.png) no-repeat 10px 2px;
}