@charset "utf-8";


body { position: relative; }


/*============================
pageSet
============================*/

#pageSet.top { padding: 0 0 40px 220px; }

/*============================
panelArea
============================*/

.panelArea { position: relative; min-width: 750px; }
.panelArea .text { opacity: 0; position: absolute; width: 420px; top: 50%; left: 50%; margin-left: -210px; margin-top: -95px; padding: 30px 0; background: rgba(255, 255, 255, 0.8); text-align: center; }
.panelArea .text .name { position: relative; display: inline-block; font-size: 22px; letter-spacing: 0.2em; }
.panelArea .text .name:before { position: absolute; bottom: -8px; left: 0px; right: 0px; height: 1px; background: #666; content: ""; }
.panelArea .sub { margin-top: 25px; }
.panelArea .sub .line { font-size: 16px; letter-spacing: 0.1em; }
.panelArea .sub .line + .line { margin-top: 5px; }
.panelArea .sub .line.line--02 { letter-spacing: 0.36em; text-indent: -6px; } 
.panelArea .sub .line.line--03 { letter-spacing: 0.41em; text-indent: 5px; } 


/* ------------ Slide Show ------------ */

#slideshow { position: relative; width: 100%; height: 450px; background: #444; }
#slideshow ul li { position: absolute; top: 0; left: 0; width: 100%; height: 450px; margin:0; padding:0; background-position:center center; background-repeat:no-repeat; background-size: 1450px; }

#slideshow ul li.slide01 { background-position: center -230px; }
#slideshow ul li.slide02 { background-position: center -280px; }
#slideshow ul li.slide03 { background-position: center -290px; }
#slideshow ul li.slide04 { background-position: center -250px; }


/*============================
mainArea
============================*/

.mainWrap { display: table; width: 100%; min-width: 750px; max-width: 1000px; margin: 30px auto 0; padding: 0 20px; }
.mainWrap .leftArea,
.mainWrap .rightArea { display: table-cell; vertical-align: top; }

.mainWrap .btnArea { margin-top: 30px; text-align: center; }


/*============================
leftArea
============================*/

.leftArea { width: 54%; padding-right: 50px; }
.leftArea .title { padding-bottom: 10px; border-bottom: 1px solid #aaa; font-size: 20px; letter-spacing: 0.2em; }


/* ------------ Feed ------------ */

#feed { margin-top: 30px; }
#feed .blogKoma { position: relative; overflow: hidden; }
#feed .blogKoma + .blogKoma { margin-top: 25px; }
#feed .blog_date { position: absolute; right: 0; bottom: 0; font-size: 11px; color: #888; }
#feed .blog_title { padding-bottom: 10px; font-size: 16px; }
#feed .blog_body { float: left; display: inline; width: 65%; min-height: 130px; padding-left: 15px; line-height: 1.6; font-size: 13px; }
#feed img { float: left; width: 35%; }
#feed .blog_more { margin-left: 5px; }


/*============================
rightArea
============================*/

.rightArea { width: 46%; padding: 25px; background: #f7f5f0; } 

.rightArea .sub { font-size: 16px; color: #666; font-weight: bold; letter-spacing: 0.1em; }
.rightArea .name { margin-top: 20px; font-size: 16px; letter-spacing: 0.25em; }
.rightArea .name .kana { padding-left: 10px; font-size: 11px; color: #888; }
.rightArea .img { margin-top: 15px; min-height: 170px; background: url(../../imgFile/bg_yoshi.jpg); background-size: cover; background-position: center center; }
.rightArea .body { margin-top: 10px; line-height: 1.65; }
.rightArea .info { margin-top: 5px; color: #888; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; }



/*============================
index_modal
============================*/

.index_modal { display: none; position: fixed; z-index: 990; }
.index_modal .layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; }
.index_modal .content { position: fixed; display: table; width: calc(100% - 60px); height: calc(100% - 60px); left: 30px; right: 30px; top: 30px; bottom: 30px; background-color: #fff; box-sizing: border-box;  }
.index_modal .content .link { display: table-cell; width: 50%; position: relative; vertical-align: middle; overflow: hidden; }
/*.index_modal .content .link--left { background: url(../../imgFile/slide_top_01.jpg)center center; background-size: cover; }
*/.index_modal .content .link.link--left:after { 
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background: url(../../imgFile/slide_top_01.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	-webkit-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.index_modal .content .link.link--left:hover:after {
	opacity: .7;
	-moz-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.index_modal .content .link--right { background: url(../../imgFile/bg_yoshi.jpg)center center; background-size: cover; }
.index_modal .content .name { position: relative; width: 250px; height: 260px; margin: 0 auto; padding-top: 200px; background: rgba(255, 255, 255, 0.85); text-align: center; font-size: 18px; letter-spacing: 0.3em; color: #555; z-index: 10; }
.index_modal .content .name img { position: absolute; top: 30px; left: 50%; }
.index_modal .content .link--left .name img { margin-left: -44px; }
.index_modal .content .link--right .name img { top: 35px; width: 140px; margin-left: -70px; } 
.index_modal .content .link--right .info { position: absolute; bottom: 10px; left: 0; display: block; width: 100%; color: #ff4700; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.2em; }



/*----------------------------------------
　　　　　　　　以下、SP用の指定
----------------------------------------*/


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

#pageSet.top { padding-left: 0; width: 100%; }

.panelArea { min-width: inherit; }
.panelArea .text { width: 90%; left: 5%; margin-left: 0; }
.panelArea .text .name { font-size: 18px; }
.panelArea .sub .line { font-size: 13px; letter-spacing: 0.01em; }
.panelArea .sub .line.line--02 { letter-spacing: 0.25em; }
.panelArea .sub .line.line--03 { letter-spacing: 0.3em; }

.mainWrap { display: block; min-width: inherit; max-width: inherit; }
.mainWrap .leftArea, .mainWrap .rightArea { display: block; width: 100%; }
.mainWrap .leftArea { padding-right: 0; }
.mainWrap .rightArea { margin-top: 50px; padding: 25px 20px; }

#slideshow { height: 300px; }
#slideshow ul li { height: 300px; background-size: cover; }
#slideshow ul li.slide01 { background-position: center center; }
#slideshow ul li.slide02 { background-position: center center; }
#slideshow ul li.slide03 { background-position: center center; }
#slideshow ul li.slide04 { background-position: center center; }


}