@charset "Shift_JIS";
/**
 * index.css
 * modified : 2015.02.03
 */

/*--------------------------------------------------------------------------------
	.intro
--------------------------------------------------------------------------------*/
.intro {
	margin: 27px auto 0;
	max-width: 1240px;
}
.intro:after {
	clear: both;
	display: block;
	content: "";
}
.intro h2 {
	float: left;
	margin: 0 0 0 -53px;
	width: 430px;
}

.intro .navi {
	float: left;
	margin-left: 35px;
	padding-left: 40px;
	line-height: 0;
	border-left: 2px solid #000;
}
.intro ul {
	max-width: 630px;
	*zoom: 1;
}
.intro ul:after {
	clear: both;
	display: block;
	content: "";
}
.intro li {
	position: relative;
	float: left;
	margin: 8px 3px 0 0;
}
.intro li.top-line {
	margin: 0 3px 0 0;
}
.intro li.current img {
	opacity: 0.3;
}
.ielegacy .intro li.current img {
	filter: alpha(opacity=30);
}
.intro li .frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.intro li.current .frame {
	border: 3px solid #a5a5a5;
}

@media screen and (max-width:1320px) {
	.intro {
		margin-top: 35px;
		padding: 0 30px;
	}
	.intro h2 {
		margin: 0 0 0 -35px;
		width: 34.6774193%;
	}
	.intro h2 img {
		width: 100%;
		height: auto;
		max-width: 430px;
	}
	.intro .navi {
		margin-left: 3.2%;
		margin-bottom: 2%;
		padding-left: 3.2%;
		width: 60%;
	}
	.intro li {
		margin-top: 1.2698412%;
		margin-right: 0.47619% !important;
		width: 9.5238%;
		*width: 9.4%;
	}
	.intro li img {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width:640px) {
	.intro {
		padding: 0 4.6875%;
	}
	.intro h2 {
		float: none;
		margin: 0;
		width: auto;
		text-align: center;
	}
	.intro h2 img {
		margin-left: -15%;
	}
	.intro .navi {
		float: none;
		margin: 0;
		padding: 0;
		width: auto;
		border: none;
	}
	.intro ul {
		padding-bottom: 25px;
	}
	.intro li.current .frame {
		border: 2px solid #a5a5a5;
	}
	.intro li a {
		display: block;
	}
}

/*--------------------------------------------------------------------------------
	.main
--------------------------------------------------------------------------------*/
.main.blue {
	background: #e8eef0;
}
.main .inner {
	position: relative;
	margin: 0 auto;
	max-width: 1240px;
	*zoom: 1;
}
.main .inner:after {
	clear: both;
	display: block;
	content: "";
}

@media screen and (max-width:1320px) {
	.main .inner {
		margin: 0 25px 0 15px;
	}
}
@media screen and (max-width:640px) {
	.main .inner {
		margin: 0;
	}
}

/* .info
--------------------------------------------------------------------------------*/
.main .info {
	float: right;
	width: 30.9677419%; /*384px;*/
}
.main .info em {
	display: block;
	padding: 42px 0 26px 0;
	padding: 10.9375% 0 6.7708333%;
}
.main .info img {
	width: 90%;
	height: auto;
	max-width: 384px;
}

@media screen and (max-width:640px) {
	.main .info {
		float: none;
		padding: 0 5.9375% 5%;
		width: auto;
	}
	.main .info em {
		padding: 8% 0 3%;
	}
}

/* .gallery
--------------------------------------------------------------------------------*/
.main .gallery {
	float: left;
	width: 69.032258%; /*856px;*/
	opacity: 0.0;
	visibility: hidden;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
}
.main .gallery.loaded {
	opacity: 1.0;
	visibility: visible
}

@media screen and (max-width:640px) {
	.main .gallery {
		float: none;
		padding: 0 1.5625%;
		width: auto;
	}
}

/* .exif
--------------------------------------------------------------------------------*/
.main .exif {
	position: absolute;
	bottom: 0;
	left: 69.032258%; /*856px;*/
	margin-bottom: 5.4%;
	width: 30.9677419%; /*384px;*/
}
.main .exif li {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	font-size: 83.7%;
	line-height: 1.7;
	color: #444;
}

@media screen and (max-width:640px) {
	.main .exif {
		position: relative;
		left: 0;
		margin: 5% 5.9375% 0;
		padding: 0 0 5% 0;
		width: auto;
		font-size: 100% !important;
	}
	.main .exif li {
		top: 0;
		bottom: auto;
		font-size: 68.8%;
		line-height: 1.5;
	}
}


/*--------------------------------------------------------------------------------
	.carousel-viewport
--------------------------------------------------------------------------------*/
.carousel-viewport {
	position: relative;
	margin: 0 auto;
	width: 90.6542056%;
	overflow: hidden;
}
.carousel-inner {
	position: relative;
}
.carousel-slider {
	position: relative;
	width: 20000px;
	*zoom: 1;
}
.carousel-slider:after {
	clear: both;
	display: block;
	content: "";
}
.carousel-slider .item {
	position: relative;
	float: left;
}
.carousel-slider .item a {
	display: block;
}
.carousel-slider .item img {
	width: 100%;
	height: auto;
}
.carousel-slider .item .zoom {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: url("../img/carouse_zoom.png") no-repeat 0 0;
}

.carousel-slider .item.vertical .zoom {
	position: absolute;
	right: 27.9%;
}

/* .carousel-thum
--------------------------------------------------------------------------------*/
.carousel-thum {
	margin: 10px auto 0;
	width: 90.6542056%;
}
.carousel-thum ul {
	margin-left: 0px;
	line-height: 0;
	*zoom: 1;
}
.carousel-thum ul:after {
	clear: both;
	display: block;
	content: "";
}
.carousel-thum li {
	position: relative;
	float: left;
	margin: 0 10px 0 0;
	width: 11.5979381%; /*90px;*/
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color 0.2s;
	-ms-transition: border-color 0.2s;
	-moz-transition: border-color 0.2s;
	-webkit-transition: border-color 0.2s;
}
.carousel-thum li.current,
.pc .carousel-thum li:hover {
	opacity: 0.6;
}
.ielegacy .carousel-thum li.current,
.ielegacy .carousel-thum li:hover {
	filter: alpha(opacity=60);
}
.carousel-thum li img {
	width: 100%;
	height: 100%;
}
/*.gallery.vt .carousel-thum li:first-child {
	margin-left:37.5%;
}*/
.gallery.vt .carousel-thum li {
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}


/* .carousel-prev, .carousel-next
--------------------------------------------------------------------------------*/
.carousel-prev,
.carousel-next {
	position: absolute;
	top: 50%;
	width: 4.6728971%;
	height: 4.6728971%;
}
.carousel-prev em,
.carousel-next em {
	position: absolute;
	top: -20px;
	display: block;
	width: 100%;
	height: 40px;
	cursor: pointer;
	transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
}
.carousel-prev em:hover,
.carousel-next em:hover {
	opacity: 0.5;
}
.carousel-prev {
	left: 0;
}
.carousel-prev em {
	left: 0;
	background: url("../img/carouse_prev.png") no-repeat left center;
}

.carousel-next {
	right: 0;
}
.carousel-next em {
	right: 0;
	background: url("../img/carouse_next.png") no-repeat right center;
}

@media screen and (max-width:940px) {
	.carousel-prev em,
	.carousel-next em {
		background-size: 70% auto;
	}
}
@media screen and (max-width:640px) {
	.carousel-prev em,
	.carousel-next em {
		background-size: 10px 19px;
	}
}
@media screen and (max-width:479px) {
	.carousel-prev,
	.carousel-next {
		display: none !important;
	}
}

/*--------------------------------------------------------------------------------
	.section-line
--------------------------------------------------------------------------------*/
.section-line {
	margin: 0 auto;
	max-width: 1240px;
	*zoom: 1;
}
.section-line:after {
	clear: both;
	display: block;
	content: "";
}

@media screen and (max-width:1320px) {
	.section-line {
		padding: 0 30px;
	}
}
@media screen and (max-width:640px) {
	.section-line {
		padding: 0 4.6875%;
	}
}

/*--------------------------------------------------------------------------------
	section
--------------------------------------------------------------------------------*/
section {
	position: relative;
	margin-top: 60px;
}
section h3 {
	font-size: 125%;
	font-weight: 500;
	line-height: 1.2;
}
section p {
	line-height: 1.9;
	color: #444;
}
section .img-box img {
	width: 100%;
	height: auto;
}

section.line {
	border-bottom: 4px solid #000;
}
section.line h3 {
	position: relative;
	z-index: 1;
	padding-bottom: 10px;
	width: 264px;
	border-bottom: 4px solid #000;
}
section.frame .inner {
	padding: 30px 30px 40px;
	*zoom: 1;
}
section.frame h3 {
	margin-bottom: 18px;
}
section.frame .img-box {
	margin-top: 25px;
}

@media screen and (max-width:1240px) {
	section h3 {
		font-size: 112.5%;
	}
	section p {
		font-size: 87.5%;
	}
}
@media screen and (max-width:1080px) {
	section.line {
		border-width: 3px;
	}
	section.line h3 {
		width: auto;
		border-width: 3px;
	}
}
@media screen and (max-width:640px) {
	section {
		margin-top: 9.375%;
	}
	section.line {
		border-width: 2px;
	}
	section.line h3 {
		padding-bottom: 7px;
		border-width: 2px;
	}
	section.frame .inner {
		padding: 7.8125% 6.25% 7.8125%;
	}
	section.frame .img-box {
		margin-top: 20px;
	}
}

/* .recommend
--------------------------------------------------------------------------------*/
section.recommend {
	float: left;
	width: 580px;
}
section.recommend .setting {
	position: relative;
	z-index: 0;
	margin-top: -38px;
	padding-bottom: 15px;
	text-align: right;
}

@media screen and (max-width:1320px) {
	section.recommend {
		width: 46.7741935%;
	}
	section.recommend .setting img {
		width: 100%;
		height: auto;
		max-width: 580px;
	}
}
@media screen and (max-width:1080px) {
	section.recommend .setting {
		margin-top: 30px;
	}
}
@media screen and (max-width:767px) {
	section.recommend {
		float: none;
		width: auto;
	}
}
@media screen and (max-width:640px) {
	section.recommend {
		margin-top: 14%;
	}
	section.recommend .setting {
		margin-top: 20px;
	}
}

/* .point
--------------------------------------------------------------------------------*/
section.point {
	float: right;
	width: 600px;
}
section.point .inner {
	padding: 30px 0 25px;
	*zoom: 1;
}
section.point .inner:after {
	clear: both;
	display: block;
	content: "";
}
section.point .img-box {
	float: right;
	margin-left: 35px;
	width: 290px;
}
section.point .img-box.vt {
	width: 200px;
	margin-top: -65px;
}
@media screen and (max-width:1080px) {
	section.point .img-box.vt {
		margin-top: 0px;
	}
}
section.point p {
	overflow: hidden;
}

@media screen and (max-width:1320px) {
	section.point {
		width: 48.387%;
	}
}
@media screen and (max-width:1200px) {
	section.point p {
		overflow: visible;
	}
}
@media screen and (max-width:1000px) {
	section.point .img-box {
		float: none;
		margin: 0 0 15px;
	}
}
@media screen and (max-width:767px) {
	section.point {
		float: none;
		width: auto;
	}
	section.point .img-box {
		float: left;
		margin: 0 20px 0 0;
	}
}
@media screen and (max-width:640px) {
	section.point {
		margin-top: 60px;
	}
	section.point .inner {
		padding: 20px 0 25px;
	}
	section.point .img-box {
		float: none;
		margin: 0 0 15px 0;
		width: auto;
	}
}

/* .knack
--------------------------------------------------------------------------------*/
section.knack {
	float: left;
	width: 580px;
	background: #e8eef0;
}
section.knack .img-box {
	max-width: 290px;
}

@media screen and (max-width:1320px) {
	section.knack {
		width: 46.7741935%;
	}
}
@media screen and (max-width:640px) {
	section.knack {
		float: none;
		width: auto;
	}
	section.knack .img-box {
		max-width: 600px;
	}
}

/* .further
--------------------------------------------------------------------------------*/
section.further {
	float: right;
	width: 600px;
	background: #f0ece8;
}
section.further .img-box {
	max-width: 360px;
}

@media screen and (max-width:1320px) {
	section.further {
		width: 48.387%;
	}
}
@media screen and (max-width:640px) {
	section.further {
		float: none;
		width: auto;
	}
	section.further .img-box {
		max-width: 600px;
	}
}