@charset "utf-8";

/* mainArea */
#mainArea {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#mainBox {
	width: 100%;
}
#mainBox img{
	width: 100%;
}
@media screen and (max-width: 639px) {
	#mainBox {
		width: 100%;
	}
}
#mainBox .imgL{
}
#mainBox .imgS{
	width: 60%;
	margin: 0 auto;
	padding: 26% 0;
}
@media screen and (max-width: 840px) {
	.imgL { display: none; }
	.imgS { display: block; }
}
@media screen and (max-width: 639px) {
	#mainBox .imgS{
		width: 76%;
		padding: 22% 0;
	}
}
#mainBox img{
	width: 100%;
}
/* kakomiArea */
#kakomiArea {
	position: relative;
	z-index: 1;
	width: 77%;
	margin: 0 auto;
	background-color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 1.5% 3%;
}
#kakomiArea h2{
	font-weight: bold;
	border-bottom: solid 2px;
	padding-bottom: 5px;
	text-align: center;
}
#kakomiArea p{
	padding-top: 5px;
}
@media screen and (max-width: 639px) {
	#kakomiArea {
		width: 70%;
		padding: 3%;
	}
	#kakomiArea h2{
		text-align: left;
	}
}

/* ------ infoArea ------ */
#infoArea {
	position: relative;
	z-index: 1;
	width: 85%;
	margin: 0 auto;
	padding-top: 4%;
}
@media screen and (max-width: 639px) {
	#infoArea {
		width: 90%;
		max-width: inherit;
		padding-top: 10%;
	}
}
.areaTit {
	border-bottom: solid #fff 2px;
	width: 98%;
	margin: 0 auto 1.53%;
}
#infoArea h2 {
	width: 50%;
	padding-bottom: 15px;
}
@media screen and (max-width: 639px) {
	#infoArea h2 {
		width: 86%;
		margin: 0 auto;
	}
}
#infoArea h2 img{
	width: 100%;
}
#infoArea .mainTxt{
	font-size: 90%;
	text-align: center;
}
#infoArea .mainImg {
	text-align: center;
	padding: 10px 0;
}
#infoArea .mainImg img{
	width: auto;
	max-width: 80%;
}
#infoArea .item{
	float: left;
	width: 28%;
	padding: 1.53%;
	margin: 1%;
	background: url(/images/common/conBg.png) repeat;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#infoArea .item .phBox{
	width: 100%;
}
#infoArea .item .phBox img{
	width: 100%;
	height: auto;
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#infoArea .item .txtBox{
	width: 100%;
}
#infoArea .item .txtBox .blogDay{
	font-size: 60%;
	font-weight: bold;
	line-height: 110%;
	padding: 10px 0 5px;
}
#infoArea .item .txtBox .slug{
	float: left;
	margin-right: 3px;
	padding: 4px 10px;
	font-size: 70%;
	line-height: 100%;
	color: #fff;
	background-color: #888;
	text-align: center;
	border-radius: 50px; 
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}
#infoArea .item .txtBox h3{
	padding: 10px 0;
	line-height: 130%;
	font-size: 90%;
	font-weight: bold;
}
@media screen and (max-width: 600px) {
	#infoArea .item{
		float: none;
		width: 94%;
		padding: 2%;
		margin: 1%;
	}
	#infoArea .item .phBox{
		float: left;
		width: 40%;
	}
	#infoArea .item .txtBox{
		float: left;
		padding: 0 4%;
		width: 52%;
	}
	#infoArea .item .txtBox h3 {
		font-size: 80%;
	}
}

/* ------ container ------ */
#container {
	position: relative;
	z-index: 1;
	margin-top: 80px;
}
#topCover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#topCover img{
	width: 100%;
}

/* articleArea */
#articleArea {
	padding: 60px 0 0;
}
#articleTit {
	position:relative;
	width:50%;
	margin: 0 auto;
	padding-bottom: 10%;
}
@media screen and (max-width: 639px) {
	#articleArea .tit01 {
		padding: 18% 0 10%;
	}
	#articleTit {
		width: 72%;
		padding-bottom: 16%;
	}
}
#articleTit img{
	width: 100%;
}
#articleTit h2 img{
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
#articleTit h2 img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
#articleTit .spTxt{
	margin-top: 3%;
	padding: 5%;
	background: url(/images/common/conBg.png) repeat;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#articleTit .spTxt p{
	font-size: 120%;
	line-height: 160%;
	padding-bottom: 12px;
}
#articleTit .spTxt p span{
	font-weight: bold;
}
@media screen and (max-width: 639px) {
	#articleTit .spTxt p{
		font-size: 100%;
	}
}

#articleArea .tit03{
	padding-top: 6%;
	width: 70%;
}
@media screen and (max-width: 639px) {
	#articleArea .tit03{
		width: 90%;
	}
}
/* youtube */
.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
/* articleBox */
#articleBox {
	max-width: 1600px;
	margin: 0 auto;
}
#articleBox img{
	width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#articleBox img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
#articleBox dl{
	float: left;
	width: 44%;
	padding: 1% 3% 3%;
}
#articleBox dd{
	padding-top: 2%;
	color: #fff;
	font-size: 120%;
}
.btnOther {
	width: 35%;
	margin: 0 auto;
}
.btnOther img{
	width: 100%;
}
@media screen and (max-width: 639px) {
	#articleBox dl{
		float: none;
		width: 80%;
		margin: 0 auto;
		padding: 1% 0 3%;
	}
	#articleBox dd{
		font-size: 110%;
	}
	.btnOther {
		padding-top: 20px;
		width: 80%;
	}
}

/* products */
#products {
	padding: 20px 0 0;
}
#titProducts {
	position:relative;
	width: 80%;
	padding: 0 0 3%;
	margin: 0 auto;
}
#titProducts img{
	width: 100%;
}
@media screen and (max-width: 639px) {
	#titProducts {
		width:90%;
	}
}

/* itemPh
================================================== */
#itemPh li{
	padding: 40px 0;
	margin: 0;
    overflow: hidden;
}
#itemPh li img{
	width: 100%;
}
#itemPh li .btnBox{
	position: relative;
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
#itemPh li .btnBox:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.btnImg {
	position: relative;
}
@media (max-width: 600px) {
	#itemPh li{
		padding: 40px 0;
		margin: 0;
	}
}

/* TOPページスライダー
================================================== */
.photoArea {
	position: relative;
	background-color: #fff;
}
#owl-demo .itemBox{
	text-align: center;
	padding: 0;
}
#owl-demo .itemBox img{
	width:100%;
	height: auto;
}
#owl-demo .itemBox a:hover img {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	line-height:1px;
}
#owl-demo .txtBox h3{
	padding: 10px 0 0;
	line-height: 130%;
	font-size: 90%;
	font-weight: bold;
}
.customNavigation{
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 47%;
}
.customNavigation .fLeft{
	float: left;
	display:block;
	padding-left: 20px;
}
.customNavigation .fRight{
	float: right;
	display:block;
	padding-right: 20px;
}
.customNavigation .fLeft,
.customNavigation .fRight{
	width: 40px;
	position: relative;
	z-index: 100;
}
.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn img{
	width: 100%;
}
/* Owl Carousel */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
	padding-bottom: 0;
	z-index: 30;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}
/* Carousel Owl Demo Theme */
.owl-theme .owl-controls{
	width: 80%;
	text-align: center;
	position: relative;
	z-index: 40;
	padding: 16px 0;
	margin: 0 auto;
	display: none!important;
}
.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}
@media screen and (max-width: 800px) {
	.customNavigation .fLeft{
		padding-left: 10px;
	}
	.customNavigation .fRight{
		padding-right: 10px;
	}
	.customNavigation .fLeft,
	.customNavigation .fRight{
		width: 30px;
	}
}
@media screen and (max-width: 479px) {
	.owl-pagination {
		display: none;
	}
	.customNavigation .fLeft,
	.customNavigation .fRight{
		width: 30px;
	}
}
/* popup
================================================== */
.lock {
    overflow:hidden;
}
.modal-content {
    position:relative;
    display:none;
    width:70%;
    max-height:90%;
    padding: 20px;
    background:#fff;
    overflow:auto;
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.modal-overlay {
    z-index:10500;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.45);
}
.modal-wrap {
    z-index:10600;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}
.modal-open {
    color:#00f;
    text-decoration:underline;
}
.modal-open:hover {
    cursor:pointer;
    color:#f00;
}
@media (max-width: 960px) {
	.modal-content {
		width:90%;
		margin:0;
	}
}
@media (max-width: 600px) {
	.modal-content {
		width:80%;
		margin:0;
	}
}

/* modalBox
================================================== */
.modalBox {
}
.closeBtn {
	padding-top: 20px;
	float: right;
	width: 100px;
	display: block;
}
.closeBtn img {
	width: 100%;
}
.closeBtn a:hover img{
	opacity:0.3;
	filter: alpha(opacity=30);
	-ms-filter: "alpha( opacity=30 )";
	line-height:1px;
	transition: .3s;
}
@media (max-width: 800px) {
	.closeBtn {
		width: 60px;
	}
}
@media (max-width: 639px) {
}

/* thumbnail
================================================== */
.thumbnailData {
    float: left;
	width: 30%;
}
.thumbnail01 li,
.thumbnail02 li,
.thumbnail03 li,
.thumbnail04 li,
.thumbnail05 li,
.thumbnail06 li,
.thumbnail07 li,
.thumbnail08 li,
.thumbnail09 li,
.thumbnail10 li,
.thumbnail11 li,
.thumbnail12 li,
.thumbnail13 li,
.thumbnail14 li,
.thumbnail15 li,
.thumbnail16 li{
    float: left;
	padding: 1%;
}
.thumbnail01 li img,
.thumbnail02 li img,
.thumbnail03 li img,
.thumbnail04 li img,
.thumbnail05 li img,
.thumbnail06 li img,
.thumbnail07 li img,
.thumbnail08 li img,
.thumbnail09 li img,
.thumbnail10 li img,
.thumbnail11 li img,
.thumbnail12 li img,
.thumbnail13 li img,
.thumbnail14 li img,
.thumbnail15 li img,
.thumbnail16 li img{
    width: 100%;
	border: #eee solid 1px;
}
.thumbnail01 li a:hover img,
.thumbnail02 li a:hover img,
.thumbnail03 li a:hover img,
.thumbnail04 li a:hover img,
.thumbnail05 li a:hover img,
.thumbnail06 li a:hover img,
.thumbnail07 li a:hover img,
.thumbnail08 li a:hover img,
.thumbnail09 li a:hover img,
.thumbnail10 li a:hover img,
.thumbnail11 li a:hover img,
.thumbnail12 li a:hover img,
.thumbnail13 li a:hover img,
.thumbnail14 li a:hover img,
.thumbnail15 li a:hover img,
.thumbnail16 li a:hover img{
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	line-height:1px;
	transition: .3s;
}
#itemTxt {
	padding: 0 30px;
}
#itemTxt h3{
	padding: 30px 0 20px;
	font-weight: bold;
}
#itemTxt p{
	padding-top: 10px;
	font-size: 80%;
}
#itemTxt h4{
	padding-top: 10px;
	font-weight: bold;
	font-size: 80%;
}
.main_photo01,
.main_photo02,
.main_photo03,
.main_photo04,
.main_photo05,
.main_photo06,
.main_photo07,
.main_photo08,
.main_photo09,
.main_photo10,
.main_photo11,
.main_photo12,
.main_photo13,
.main_photo14,
.main_photo15,
.main_photo16{
	float: right;
	width: 64%;
	height: auto!important;
}
.main_photo01 img,
.main_photo02 img,
.main_photo03 img,
.main_photo04 img,
.main_photo05 img,
.main_photo06 img,
.main_photo07 img,
.main_photo08 img,
.main_photo09 img,
.main_photo10 img,
.main_photo11 img,
.main_photo12 img,
.main_photo13 img,
.main_photo14 img,
.main_photo15 img,
.main_photo16 img{
    width: 100%;
}
@media (max-width: 639px) {
	.thumbnailData {
		float: none;
		width: 100%;
	}
	.thumbnail li{
		padding: 1%;
		width: 18%!important;
	}
	#itemTxt {
		padding: 0;
	}
	#itemTxt h3{
		padding: 20px 0 5px;
		font-size: 80%;
		line-height: 130%;
	}
	#itemTxt p{
		padding-top: 5px;
		font-size: 70%;
		line-height: 130%;
	}
	#itemTxt h4{
		padding-top: 10px;
		font-size: 70%;
		line-height: 130%;
	}
.main_photo01,
.main_photo02,
.main_photo03,
.main_photo04,
.main_photo05,
.main_photo06,
.main_photo07,
.main_photo08,
.main_photo09,
.main_photo10,
.main_photo11,
.main_photo12,
.main_photo13,
.main_photo14,
.main_photo15,
	.main_photo16{
		float: none;
		width: 98%;
		margin: 0 auto;
		height: auto!important;
	}
}





#articleTit .spTxt h3{
	font-size: 140%;
	font-weight: bold;
	border: #000 solid 2px;
	margin-bottom: 16px;
	line-height: 180%;
	padding: 0 15px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background-color: #fff;
}
@media screen and (max-width: 639px) {
	#articleTit .spTxt h3{
		font-size: 100%;
	}
}

#articleTit .spTxt .kakomi{
}
#articleTit .spTxt .kakomi p{
	padding-bottom: 0;
}
#articleTit .spTxt .kakomi p a{
	display: block;
	background-color: #2cc8c2;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	padding: 5px 15px;
	color: #fff;
	margin-bottom: 16px;
}
#articleTit .spTxt .kakomi p a:hover{
	display: block;
	background-color: #258985;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}







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

}