@charset "shift_JIS";
/**
 * common.css
 * modified : 2014.01.10
 * modified : 2017.08.07
 */

/*--------------------------------------------------------------------------------
	Reset
--------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;vertical-align:top;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}a{outline:none;}nav{display:block;}a,a:link,a:active,a:visited,a:hover {color: #000;text-decoration: none;}img{-ms-interpolation-mode: bicubic;}

/*--------------------------------------------------------------------------------
	body
--------------------------------------------------------------------------------*/
body {
	font-family: "\30D2\30E9\30AE\30CE\89D2\30B4\20\50\72\6F\20\57\33","Hiragino Kaku Gothic Pro","\30E1\30A4\30EA\30AA",Meiryo,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif;
	min-width: 320px;
}

/*--------------------------------------------------------------------------------
	#header
--------------------------------------------------------------------------------*/
#header {
	margin: 0 auto 13px;
	width: 1280px;
	zoom: 1;
	position:relative;
	z-index:2 !important;
}
@media (max-width:1280px){
	#header {
	width: 100%;
	}
}
#header:after {
	clear: both;
	display: block;
	content: "";
}
#header h1 {
	float: left;
	margin: 25px 0 0 25px;
}
#header .rightfix {
	float: right;
	margin: 10px 10px 0 0;
}
#header .button {
	display: inline-block;
	padding: 10px 20px 10px;
	font-size: 0.813em;
	background-color: #f2f2f2;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	box-shadow: 0 0 3px rgba(0,0,0,.15);
	-o-box-shadow: 0 0 3px rgba(0,0,0,.15);
	-ms-box-shadow: 0 0 3px rgba(0,0,0,.15);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.15);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
}
#header .button.close {
	padding: 10px 22px 10px 30px;
	background: url("../img/header_close.gif") no-repeat 16px 51%, /*linear-gradient(to bottom,whitesmoke 0,#efefef 100%)*/;
	background: url("../img/header_close.gif") no-repeat 16px 51%, -o-linear-gradient(top,whitesmoke 0,#efefef 100%);
	background: url("../img/header_close.gif") no-repeat 16px 51%, -ms-linear-gradient(top,whitesmoke 0,#efefef 100%);
	background: url("../img/header_close.gif") no-repeat 16px 51%, -moz-linear-gradient(top,whitesmoke 0,#efefef 100%);
	background: url("../img/header_close.gif") no-repeat 16px 51%, -webkit-linear-gradient(top,whitesmoke 0,#efefef 100%);
	background: url("../img/header_close.gif") no-repeat 16px 51%, -webkit-gradient(linear,left top,left bottom,color-stop(0%,whitesmoke),color-stop(100%,#efefef));
	background: url("../img/header_close.gif") no-repeat 16px 51%\9; /* IE8 */
	*background: url("../img/header_close.gif") no-repeat 16px 51%; /* IE7 */
}

@media (max-width:640px){
	#header {
		margin: 15px 20px 10px;
		width: auto;
		position:static;
	}
	#header h1 {
		margin: 3.0% 0 0 0;
		width: 20%;
		line-height: 0;
	}
	#header h1 img {
		max-width: 100px;
		width: 100%;
	}
	#header .rightfix {
		margin: 0;
	}
	#header .button {
		padding: 6px 16px 6px;
		font-size: 0.75em;
	}
	#header .button.close {
		padding: 6px 18px 6px 26px;
	}
}

/*--------------------------------------------------------------------------------
	.naviback
--------------------------------------------------------------------------------*/
.naviback{
	margin:0px;
	padding:0px;
	width:100%;
}
@media (max-width:640px){
	.naviback{
		margin:0px;
		padding:0px;
		width:100%;
	}
}

/*--------------------------------------------------------------------------------
	.navigation
--------------------------------------------------------------------------------*/
.navigation {
	margin:0 auto;
	width: 1280px;
	zoom: 1
}
.naviback .navimain{
	margin:0 auto;
	width: 1280px;
	height:348px;
	zoom: 1;
	position:relative;
	background:url("../../common/img/navi_mainvisual.jpg") no-repeat;
}
@media (max-width:1280px){
	.naviback .navimain{
	width: 100%;
}
}

.naviback .navimain h2 {
	width:950px;
}
.naviback .navimain h2 img{
	z-index: 100;
	position:absolute;
	bottom: 30px;
	right: 30px;
}
.naviback .navimain h3{
	margin:0 auto;
	width: 1280px;
	zoom: 1;
}
.naviback .navimain h3 img{
	margin: -65px auto 0 auto;
	margin: -67px auto 0 auto\9;
	position:relative;
	top:0px;
	z-index:1 !important;
}

.naviback .navimain h3 img:not(:target) {
	margin: -64px auto 0 auto\9; /* IE9 */
}


.navigation em {
	display: block;
	padding-bottom: 13px;
}

.navigation ul {
	margin: 0;
	zoom: 1;
}
.navigation ul:after {
	clear: both;
	display: block;
	content: "";
}
.navigation ul.bottom {
	border-top: 1px solid #ccc;
}
.navigation li {
	float: left;
	width: 237px;
	text-indent: -9999em;
}
.navigation li.landscape {
	width: 238px;
}
.navigation li a {
	display: block;
	height: 74px;
	background: url("../img/navi.gif") no-repeat 0 0;
}

.navigation li.landscape a {
	background-position: 0px 0;
}
.navigation li.landscape a:hover,
.navigation li.landscape.current a {
	background-position: 0px -74px;
}
.navigation li.airline a {
	background-position: -238px 0;
}
.navigation li.airline a:hover,
.navigation li.airline.current a {
	background-position: -238px -74px;
}
.navigation li.undoukai a {
	background-position: -475px 0;
}
.navigation li.undoukai a:hover,
.navigation li.undoukai.current a {
	background-position: -475px -74px;
}

.navigation li.family a {
	background-position: -713px 0;
}
.navigation li.family a:hover,
.navigation li.family.current a {
	background-position: -713px -74px;
}


@media (max-width:640px){
	.navigation {
		margin: 0 10px;
		width: auto;
		position:static;
	}
	.naviback .navimain{
		width: 100%;
		height:auto;
		background-size:cover;
		background-position: 35% 50%;
	}
	.naviback .navimain h2{
		margin: 0px;
		padding:170px 20px 30px;
		width: auto;
		zoom: 1;
		text-align:center;
	}
	.naviback .navimain h2 img{
		margin: 0 auto;
		position:static !important;
		top:0px;
		z-index:1 !important;		
		width: 100%;
		max-width: 452px;
	}
	.navigation h2 img {
		width: 100%;
		margin:0px;
		position:static !important;
	}
	.navigation em {
		text-align: center;
	}
	.navigation ul.top {
		display: none;
	}
	.navigation li {
		width: 25% !important;
		font-size: 1.063em;
		text-indent: 0;
		text-align: center;
		border: 1px solid #ccc;
		border-right: none;
		box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	.navigation li:last-child {
		border-right: 1px solid #ccc;
	}
	.navigation li.current {
		background: #000;
	}
	.navigation li a{
		padding: 12px 0;
		height: auto;
		background: none !important;
	}
	.navigation li.current a,
	.navigation li.current a:link,
	.navigation li.current a:active,
	.navigation li.current a:visited,
	.navigation li.current a:hover {
		color:#FFFFFF;
		text-decoration: none;
	}
	.navigation li span {
		display: block;
		margin-top: 3px;
		font-size: 0.688em;
		color: #555;
	}
	.navigation li.current span {
		color:#FFFFFF;
	}
}
@media (max-width:480px){
	.navigation li {
		margin-top: -1px;
		width: 50% !important;
	}
	.navigation li:nth-child(even) {
		border-right: 1px solid #ccc;
	}
}

/*--------------------------------------------------------------------------------
	#content
--------------------------------------------------------------------------------*/
#content {
	margin: 0 auto;
	max-width: 950px;
}
#content a {
	outline: none;
}


/* .heading
--------------------------------------------------------------------------------*/
#content .heading {
	text-align: center;
}
#content .heading h3 {
	display: none;
}

@media (max-width:640px){
	#content .heading {
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}
	#content .heading h3 {
		display: block;
		font-size: 1.688em;
	}
	#content .heading h3 span {
		margin-left: 5px;
		font-size: 0.438em;
		vertical-align: middle;
	}
	#content .heading img {
		display: none;
	}
}

/* .thumbnail
--------------------------------------------------------------------------------*/
#content .thumbnail {
	line-height: 0;
}
#content .thumbnail ul {
	display: block;
	margin: 1.0526315% auto 0;
	max-width: 940px;
	font-size: 0;
}
#content .thumbnail ul:first-child {
	margin-top: 0;
}
#content .thumbnail li {
	display: inline-block;
	margin-left: 1.0638297%;
	/*width: 19.14%;*/
	width: 15.76%;
}
#content .thumbnail li:first-child {
	margin-left: 0;
}
#content .thumbnail li img {
	width: 100%;
	height: auto;
}

#content .thumbnail li a {
	opacity:1;
	filter: alpha(opacity=100);
	transition: opacity 0.2s ease-in;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
}
#content .thumbnail li a:hover {
	opacity:0.5;
	filter: alpha(opacity=50);
}

@media (max-width:640px){
	#content .thumbnail {
		display: none;
	}
}

/* .section
--------------------------------------------------------------------------------*/
#content .section {
	position: relative;
	margin: 50px auto;
}
#content .section .img-box {
	position: relative;
	display: inline-block;
	width: 580px;
	vertical-align: bottom;
	*display: inline;
	*zoom: 1;
}
#content .section .img-box img {
		max-width: 580px;
	}
#content .section .img-box img.zoom {
	position: absolute;
	bottom: 5px;
	left: 5px;
}
#content .section .txt-box {
	position: relative;
	display: inline-block;
	right: -1px;
	padding-left: 18px;
	padding-bottom: 29px;
	width: 346px;
	vertical-align: bottom;
	*display: inline;
	*padding-left: 24px;
	*zoom: 1;
}
#content .section .txt-box em {
	display: block;
	padding: 3px 0 2px 7px;
	font-size: 1em;
	line-height: 1.2;
	color: #fff;
	background: #777;
}
#content .section .txt-box ul {
	margin-top: 10px;
	font-size: 0.85em;
}
#content .section .txt-box ul span {
	display: block;
}
#content .section .txt-box ul span.name {
	float: left;
	margin-right: 5px;
	width: 110px;
}
#content .section .txt-box li {
	padding: 4px 0;
}
#content .section .txt-box h4 {
	padding: 4px 0 8px;
	font-size: 0.85em;
}
#content .section .txt-box a {
	display: block;
	background: #f2f2f2;
	cursor: pointer;
}
#content .section .txt-box a:hover {
	background-color: #e9e9e9;
	color: #000;
	text-decoration: none;
}
#content .section .txt-box dl {
	padding: 20px 0;
}
#content .section .txt-box dt {
	display: inline-block;
	padding-left: 10px;
	width: 120px;
	text-align: center;
	vertical-align: middle;
	*display: inline;
	*zoom: 1;
}
#content .section .txt-box .lens_short img {
	width:45% !important;
}
#content .section .txt-box .lens_long img {
	width:85% !important;
}
#content .section .txt-box dt img {
	width:65%;
}
#content .section .txt-box dd {
	display: inline-block;
	padding-left: 1px;
	width: 200px;
	font-size: 0.82em;
	vertical-align: middle;
	*display: inline;
	*padding-left: 6px;
	*zoom: 1;
}
.txt-box a .lens dd .laea {
	font-size: 1em;
}
#content .section .txt-box dd .detail {
	margin-top: 8px;
}
#content .section .txt-box .lens_long img.detail  {
	width: 115px !important;
}
#content .section .txt-box .lens_short img.detail  {
	width: 115px !important;
}
#content .section .pagetop {
	position: absolute;
	left: 90px;
	bottom: 0;
	*bottom: -5px;
	line-height: 0;
}

@media (max-width:1030px){
	#content .section {
		margin: 25px auto;
		padding-bottom: 25px;
		border-bottom: 1px dotted #ccc;
	}
	#content .section .img-box {
		display: block;
		width: auto;
		text-align: center;
	}
	#content .section .img-box img {
		width: 100%;
		max-width: none;
	}
	#content .section .img-box img.zoom {
		display: none;
	}
	#content .section .txt-box {
		position: static;
		display: block;
		right: 0;
		margin-top: 10px;
		padding: 0;
		width: auto;;
	}
	
	#content .section .txt-box em {
		float: left;
		margin-right: 5%;
		padding: 3px 0;
		width: 15%;
		font-size: 1.00em;
		text-align: center;
	}
	#content .section .txt-box ul {
		margin-top: 0;
		padding-left: 5%;
		width: 74%;
		font-size: 0.813em;
		border-left: 1px dotted #ccc;
		overflow: hidden;
	}
	#content .section .txt-box ul span.name {
		width: 120px;
	}
	
	#content .section .txt-box h4 {
		display: none;
	}
	#content .section .txt-box a {
		background: url("../img/cnt_lens_arrow.gif") no-repeat right center #f2f2f2;
		background-size: 20px 13px;
	}
	#content .section .txt-box dl {
		margin-top: 10px;
	}
	#content .section .txt-box dt {
		padding: 0 10px 0 15px;
		width: auto;
	}
	#content .section .txt-box dd {
		font-size: 0.813em;
	}
	.txt-box a .lens dd .laea {
		font-size: 0.8em;
	}
	#content .section .txt-box dt img,
	#content .section .txt-box .lens_short img,
	#content .section .txt-box .lens_long img{
		height:54px !important;
		width:auto !important;
	}
	#content .section .txt-box dd .detail {
		display: none;
	}
	#content .section .pagetop {
		display: none;
	}
}
@media (max-width:320px){
	#content .section .txt-box dd {
		font-size: 0.75em;
	}
	#content .section .txt-box dt img,
	#content .section .txt-box .lens_short img,
	#content .section .txt-box .lens_long img {
		height:30px !important;
		width:auto !important;
	}
}

/*--------------------------------------------------------------------------------
	.photographer
--------------------------------------------------------------------------------*/
.photographer {
	margin: 50px auto 0;
	width: 950px;
	text-align: right;
}
.photographer img {
	height:18px;
}

@media (max-width:640px){
	.photographer {
		margin: 40px 10px 0;
		width: auto;
		text-align: center;
	}
}

/*--------------------------------------------------------------------------------
	.footer
--------------------------------------------------------------------------------*/
.footer {
	margin: 60px auto 0;
	padding-bottom: 50px;
	width: 950px;
}
.footer .copyright {
	margin-top: 20px;
	font-size: 0.625em;
	color: #bbb;
	text-align: right;
}

@media (max-width:640px){
	.footer {
		margin: 50px 10px 0;
		width: auto;
	}
	.footer .copyright {
		text-align: center;
	}
}