﻿/*----------------------------------------------------------
	edit by toshio maeoka / pm studio co.,ltd.
	mail:maeoka@pmstudio.co.jp
	url:http://www.pmstudio.com/
-----------------------------------------------------------*/

/*----------------------------------------------------------
	slide
-----------------------------------------------------------*/

#main_title{
	position:fixed;
	background:rgba(255,255,255,1);
	width:100%;
	height:700px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	overflow:hidden;
	z-index: 10;
}

#slide_center{
	position:relative;
	width: 100%;
	height:750px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	z-index: 30;
}

#loading{
	position:absolute;
	width: 30px;
	height:30px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	top:50%;
	left:50%;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	z-index: 30;
}

ul#slide_image{
	position:absolute;
	width: 10500px;
	height:750px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	z-index: 30;
}

ul#slide_image li{
	width:750px;
	height:750px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

ul#slide_image li img{
	width:750px;
	height:750px;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}


#mask{
	position:absolute;
	width:100%;
	height:100%;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	top:0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	background-size:cover;
	z-index: 60;
}

#mask:after{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
	content: '';
	border: 0px solid #CCC;
	width: 100%;
	height: 50%;
	background: linear-gradient(rgba(229, 229, 229, 0) 0, rgba(229, 229, 229, 0.7) 60%, rgba(229, 229, 229, 1) 100%);
}



/*----------------------------------------------------------
	pm title
-----------------------------------------------------------*/
#pm_title{
	position:relative;
	width: 100%;
	height:50px;
	margin: 0px auto;
	padding: 0px 0px 50px 0px;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	z-index: 40;
}

#pm_title .block{
	position:absolute;
	padding: 0px 0px 5px 0px;
	top:-1px;
	left:-1px;
	color: rgba(0,0,0,0.9);
	font-size: 2.4rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	line-height: 1;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
	z-index: 30;
}

#pm_title .block2{
	padding: 0px 0px 0px 0px;
	color: rgba(255,255,255,0.6);
	font-size: 1.3rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	line-height: 1;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#pm_title .block_back{
	padding: 0px 0px 5px 0px;
	color: rgba(255,255,255,0.3);
	font-size: 2.4rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	line-height: 1;
	z-index: 25;
}


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

#show_cont{
  position:relative;
	width: 100%;
	height:auto;
	margin: 0px 0px;
	padding: 150px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	z-index: 30;
}

#show_cont_frame{
	position:relative;
	width:95%;
	max-width: 1200px;
	height:auto;
	margin: 0px auto;
	padding: 0px 0px 50px 0px;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	z-index: 30;
}

#show_cont_list{
	position:relative;
	background:rgba(255,255,255,0.93);
    width:100%;
	height:auto;
	margin: 0px auto;
	padding: 60px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	font-size: 1.2rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 2px 2px 10px #e5e3e3;
	-moz-box-shadow: 2px 2px 10px #e5e3e3;
	box-shadow: 2px 2px 10px #e5e3e3;
	z-index: 30;
}

.articl_frame{
	width:90%;
	height:auto;
	margin:0px auto;
	border: 0px solid #CCC;
}

#left_frame{
	position:relative;
	width:70%;
	height:auto;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	font-size: 1.2rem;
	z-index: 30;
}

#right_frame{
	position:relative;
	width:30%;
	height:auto;
	margin-left:auto;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	font-size: 1.2rem;
	z-index: 30;
}

#author_frame{
	position:relative;
	width: 100%;
	height:auto;
	margin: 0px auto;
	padding: 0px 0px 50px 0px;
	border: 0px solid #CCC;
	font-size: 1.2rem;
	z-index: 30;
}


/*----------------------------------------------------------
	news
-----------------------------------------------------------*/
.content{
	width: 100%;
	height:auto;
	margin: 0px auto;
	padding: 0px 0px 50px 0px;
	border: 0px solid #CCC;
	display:block;
	z-index: 30;
}

ul.news_feed{
	width:95%;
	height:auto;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	z-index: 30;
}


ul.news_feed li.date{
	width:100%;
	height:20px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
	z-index: 30;
}

ul.news_feed li.category{
	width:78%;
	height:40px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

ul.news_feed li.sns{
	width:22%;
	height:40px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	cursor: pointer;
	z-index: 30;
}

ul.news_feed li.title{
	width:100%;
	height:auto;
	min-height:20px;
	margin: 0px 0px;
	padding: 20px 0px 20px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.6rem;
	font-weight: bold\9;
	line-height: 130%;
	text-shadow: rgba(0,0,0,0.2) 1px 1px 2px;
	cursor: pointer;
	z-index: 30;
}

ul.news_feed li.cont_img{
	width:100%;
	height:auto;
	max-height:400px;
	min-height:300px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	cursor: pointer;
	overflow:hidden;
	z-index: 30;
}

ul.news_feed li.sumary{
	width:100%;
	height:auto;
	margin: 0px 0px;
	padding: 20px 0px 0px 0px;
	border: 0px solid #CCC;
	color: #707070;
	font-size: 1.4rem;
	line-height: 160%;
	z-index: 30;
}

ul.news_feed li.readmore{
	width:100%;
	height:20px;
	margin: 0px 0px;
	padding: 10px 10px 0px 0px;
	border: 0px solid #CCC;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

ul.news_feed li.line{
	width:100%;
	height:10px;
	margin: 0px 0px;
	padding: 10px 0px 0px 0px;
	border-bottom: 1px dotted #CCC;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

ul.news_feed li.cont_img img{
	width:100%;
	height:auto;
	z-index: 30;
}

ul#link{
	position:absolute;
	list-style-image:url('../image/triangle.png');
	width: 100px;
	height:20px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	right:0px;
	display:block;
	border: 0px solid #ccc;
	z-index: 30;
}

ul#link li{
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #ccc;
	color:#252525;
	font-size: 1.2rem;
	cursor: pointer;
	z-index: 30;
}

ul#link li a{
	color: rgba(0,84,166,1);
	z-index: 30;
}

ul#link li a:hover{
	color: rgba(0,84,166,0.6);
	z-index: 30;
}


.news{
	background:rgba(235,235,235,0.2);
	width:200px;
	height:25px;
	margin: 0px 0px;
	padding: 10px 0px 0px 20px;
	border: 1px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.6rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-webkit-transition: All 0.5s ease;
	-moz-transition: All 0.5s ease;
	-o-transition: All 0.5s ease;
	-ms-transition: All 0.5s ease;
	transition: All 0.5s ease;
	cursor: pointer;
	z-index: 30;
}

.news:hover{
	background:rgba(235,235,235,0.9);
	color: #fff;
	z-index: 30;
}

ul.sns_icons{
    position:absolute;
	width: 115px;
	height:30px;
	margin: 0px 0px;
    right:5%;
	padding: 0px 0px 0px 0px;
	border: 0px solid #ccc;
	z-index: 60;
}

/*----------------------------------------------------------
	product
-----------------------------------------------------------*/
#r_back{
	position:relative;
	background:rgba(235,235,235,0.3);
	width:100%;
	height:auto;
	min-height:500px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid rgba(235,235,235,0.4);
	font-size: 1.2rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	z-index: 30;
}


.product_frame{
	position:relative;
	width:95%;
	height:auto;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

.product{
	position:relative;
	width:100%;
	height:auto;
	margin: 0px auto;
	padding: 0px 0px 10px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	overflow:hidden;
	z-index: 30;
}

.priduct_t{
	position:relative;
	background:rgba(0,0,0,0.7);
	width:100%;
	height:25px;
	margin: 0px 0px;
	padding: 5px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #fff;
	font-size: 1.2rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	text-align: center;
	font-weight: bold;
	z-index: 30;
}

.priduct_t2{
	position:relative;
	background:rgba(255,255,255,0.6);
	width:100%;
	height:25px;
	margin: 0px 0px;
	padding: 5px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	text-align: center;
	font-weight: bold;
	z-index: 30;
}

.product_img{
	position:relative;
	width:100%;
	height:auto;
	margin: 0px 0px;
	padding: 5px 0px 10px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	cursor: pointer;
	z-index: 30;
}

.product_img img{
	position:relative;
	width:100%;
	height:100%;
	z-index: 30;
}

/*--scroll for box--*/
.product_img2{
	position:relative;
	width:100%;
	height:690px;
	margin: 0px 0px;
	padding: 5px 0px 10px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	cursor: pointer;
	overflow-y: hidden;
  overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	z-index: 30;
}

.product_img2::-webkit-scrollbar {
  width: 1px;
	height: 1px;
}

.product_img2:hover{
	overflow-y: auto;
  overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/*--scroll for box chart--*/
.product_img3{
	position:relative;
	width:100%;
	height:345px;
	margin: 0px 0px;
	padding: 5px 0px 10px 0px;
	border: 0px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	cursor: pointer;
	overflow-y: hidden;
  overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	z-index: 30;
}

.product_img3::-webkit-scrollbar {
    width: 1px;
	height: 1px;
}

.product_img3:hover{
	overflow-y: auto;
  overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}


#product_1{
	position:absolute;
	background:rgba(255,255,255,0.9);
	width:95%;
	max-width:230px;
	height:500px;
	margin: 0px 0px;
	padding: 10px 10px 10px 10px;
	top:70px;
	border: 0px solid #CCC;
	display:none;
	color: #000;
	font-size: 1.2rem;
	line-height: 150%;
	cursor: pointer;
	z-index: 30;
}

#product_2{
	position:absolute;
	background:rgba(255,255,255,0.9);
	width:95%;
	height:500px;
	margin: 0px 0px;
	padding: 10px 10px 10px 10px;
	top:70px;
	border: 0px solid #CCC;
	display:none;
	color: #000;
	font-size: 1.2rem;
	line-height: 150%;
	cursor: pointer;
	z-index: 40;
}

#product_3{
	position:absolute;
	background:rgba(255,255,255,0.9);
	width:95%;
	height:500px;
	margin: 0px 0px;
	padding: 10px 10px 10px 10px;
	top:70px;
	border: 0px solid #CCC;
	display:none;
	color: #000;
	font-size: 1.2rem;
	line-height: 150%;
	cursor: pointer;
	z-index: 40;
}

#product_4{
	position:absolute;
	background:rgba(255,255,255,0.9);
	width:95%;
	height:500px;
	margin: 0px 0px;
	padding: 10px 10px 10px 10px;
	top:70px;
	border: 0px solid #CCC;
	display:none;
	color: #000;
	font-size: 1.2rem;
	line-height: 150%;
	cursor: pointer;
	z-index: 30;
}

.go_product{
	position:relative;
	background:rgba(0,0,0,0.1);
	width:150px;
	height:20px;
	margin: 0px auto;
	padding: 5px 0px 0px 0px;
	border: 1px solid #CCC;
	display:block;
	color: #000;
	font-size: 1.2rem;
	text-align: center;
	line-height: 150%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: All 0.5s ease;
	-moz-transition: All 0.5s ease;
	-o-transition: All 0.5s ease;
	-ms-transition: All 0.5s ease;
	transition: All 0.5s ease;
	cursor: pointer;
	z-index: 40;
}

.go_product:hover{
	background:rgba(0,0,0,0.3);
	color: #fff;
	z-index: 40;
}

ul.pop_1{
	width:100%;
	min-width:200px;
	height:auto;
	margin: 0px auto;
	padding: 5px 0px 5px 0px;
	color: #000;
	border: 0px solid #CCC;
	z-index: 30;
}

ul.pop_1 li.pop_1a{
	width:35%;
	height:80px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	color: #000;
	font-size: 1.2rem;
	overflow:hidden;
	z-index: 30;
}

ul.pop_1 li.pop_1b{
	width:60%;
	height:auto;
	max-height:80px;
	margin: 0px 0px;
	padding: 0px 0px 0px 10px;
	font-size: 1.2rem;
	line-height: 120%;
    overflow:hidden;
	z-index: 30;
}

li.pop_1b a{
	color: #707070;
}

.pop_1a img{
	width:100%;
	height:100%;
	object-fit: cover;
	cursor:pointer;
	font-family: 'object-fit: cover;'
	z-index: 30;
}

/*----------------------------------------------------------
	Editor
-----------------------------------------------------------*/

ul.editor{
	width:100%;
	height:auto;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}


ul.editor li.edit_1{
	width:100%;
	height:5px;
	margin: 0px 0px;
	padding: 10px 0px 10px 0px;
	border-bottom: 1px dotted #CCC;
	color: #000;
	font-size: 1.2rem;
	z-index: 30;
}

ul.editor li.edit_2{
	width:100%;
	height:30px;
	margin: 0px 0px;
	padding: 30px 0px 0px 0px;
	color: #000;
	font-size: 1.2rem;
	line-height: 150%;
	z-index: 30;
}

.editor:last-child{
	margin-left:auto;
}

/*----------------------------------------------------------
page number
-----------------------------------------------------------*/


ul#pageNum{
	width: 100%;
	height:30px;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #CCC;
	display:block;
	z-index: 20;
}

ul#pageNum li{
	width: 30px;
	height:30px;
	margin: 0px 5px;
	padding: 0px 0px 0px 5px;
	border: 0px solid #CCC;
	float:left;
	display:block;
	color: #000;
	font-size: 12px;
	cursor:pointer;
	z-index: 20;
}
ul#pageNum:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

ul#pageNum li a{
	color: #000;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	line-height:140%;
	cursor:pointer;
	z-index: 20;
}

ul#pageNum li a:hover{
	color: rgba(0,84,166,0.5);
}

/*
.more_btn{
	display:none;
}
*/

.more_btn{
	background: rgba(235,235,235,0.2);
	width:200px;
	height:40px;
	margin:0px auto;
	font-family: 'Quicksand','Century Gothic',"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CCC;
  transition-duration: 0.5s;
	cursor:pointer;
}

.more_btn:hover{
	background: rgba(235,235,235,0.9);
  color: rgba(255,255,255,0.8);
  transition-duration: 0.5s;
	cursor:pointer;
}

