@charset "utf-8";


@import "reset.css";
@import "common.css";
@import "layout.css";


/* ----------------------------------------------------------------------------
	プロジェクト
	./project/
---------------------------------------------------------------------------- */


/* -------------------
	content
------------------- */

#content .jaTxt {
	letter-spacing:0.05em;
	font-feature-settings : "palt";
}
#content .enTxt {
	letter-spacing:0.05em;
	font-family:Arial, Helvetica, sans-serif;
	display:none;
}
#content .enTxt i {
	font-style:italic;
}
#content .openBtn {
	display:none;
}

/*  mainBox  */

#content #mainBox {
	overflow:hidden;
	position: relative;
	min-height:600px;
}
#content #mainBox .img {
	position:absolute;
	left: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

/*  about  */

#content #about {
	width:784px;
	margin:0 auto;
	padding:200px 0 0;
	text-align:left;
}
#content #about h2 {
	padding:0 0 20px;
	font-size:240%;
	line-height:1.2;
}
#content #about h2 span {
	font-weight:bold;
}
#content #about h2 strong {
	font-size:125%;
	letter-spacing:0.1em;
}
#content #about h2 .enTxt strong {
	letter-spacing:0.1em;
}
#content #about .lead {
	padding:0 0 50px;
	font-size:125%;
	line-height:1.4;
}
#content #about h3 {
	padding:70px 0 0;
	font-size:125%;
	line-height:1.4;
}
#content #about h3.top {
	padding:10px 0 0;
}
#content #about h3 span {
	font-weight:bold;
}
#content #about h3 span i {
	font-weight:bold;
}
#content #about h3:after {
    content: "";
	display:block;
	width:50px;
	height:1px;
	margin:20px 0 50px;
	font-size:0;
	background:#0068B7;
}
#content #about .txt {
	padding:0 0 2em;
	font-size:113%;
	line-height:1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
#content #about .btn {
	padding:30px 0 0;
	letter-spacing:0.15em;
}
#content #about .btn a {
	display:inline-block;
	padding:0 28px 0 0;
	font-size:125%;
	line-height:1.2;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	background: url(../img/common/arrow01.png) no-repeat right 3px center;
	background-size:10px auto;
	-webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
#content #about .btn a:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
	background: url(../img/common/arrow01.png) no-repeat right 0 center;
	background-size:10px auto;
	text-decoration:none;
}

/*  photo  */

#content #photo {
	width: auto;
	margin:0 auto;
	padding:200px 0 0;
}
#content #photo .list {
	width: auto;
	margin:0 auto;
	padding:0 12px;
}
#content #photo .list li {
	width: 100%;
	box-sizing:border-box;
	margin:0 auto;
	padding:0 12px 24px;
	float:left;
	font-size:0;
}
#content #photo .list li.half {
	width: 50%;
}
#content #photo .list li img {
	width:100%;
}

#content .credit {
	text-align: center;
	margin:0 auto;
	padding:100px 0 0;
}
#content .credit .txt {
	display:inline-block;
	text-align:left;
	margin:0 auto;
	font-size:100%;
	line-height:2.0;
}

/*  project  */

#content #project {
	width: auto;
	margin:0 auto;
	padding:200px 0 0;
}
#content #project.index {
	padding:280px 0 0;
}
#content #project .list {
	width: auto;
	margin:0 auto;
	padding:0 40px;
	display:flex;
	flex-wrap: wrap;
}
#content #project .list li {
	width: 50%;
	box-sizing:border-box;
	margin:0;
	padding:0 12px 100px;
}
#content #project .list li a {
	display: block;
	-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
#content #project .list li a:hover {
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	text-decoration:none;
}
#content #project .list li a .img {
	font-size:0;
}
#content #project .list li a .img img {
	width:100%;
}
#content #project a h2 {
	padding:20px 0 0;
	font-size:188%;
	line-height:1.2;
}
#content #project a h2 span {
	font-weight:bold;
}
#content #project a h2 .enTxt {
	letter-spacing:0.15em;
}
#content #project a .txt {
	padding:15px 0 0;
	font-size:113%;
	line-height:1.3;
}

/*  moreBtn  */

#content .moreBtn {
	margin:120px auto 0;
	text-align: center;
}
#content .moreBtn a {
	display:inline-block;
	padding:0 17px 25px;
	font-size:125%;
	line-height:1.2;
	letter-spacing:0.1em;
	text-align: center;
	background: url(../img/common/nami.gif) repeat-x center bottom;
}
#content .moreBtn a:hover {
	background: url(../img/common/nami_on.gif) repeat-x center bottom;
	text-decoration:none;
}
#content .moreBtn a .enTxt {
	letter-spacing:0.15em;
}



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



/* -------------------
	content
------------------- */

#content .openBtn {
	display: block;
	width: auto;
	margin:20px auto 0;
	padding:20px;
	text-align: right;
	background:url(../img/common/arrow02.png) no-repeat 15px center;
	background-size:24px auto;
	border-bottom:1px solid #BEBDAB;
	font-size:188%;
	line-height:1.2;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:0.15em;
}
#content #photo .openBtn {
	margin:20px 30px 0;
}
#content .openBtn.close {
	background:url(../img/common/arrow03.png) no-repeat 15px center;
	background-size:24px auto;
}
#content .openBox {
	display:none;
}

/*  mainBox  */

#content #mainBox {
	overflow:hidden;
	position: relative;
	min-height: auto;
}
#content #mainBox .img {
	position:absolute;
	left: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

/*  about  */

#content #about {
	width: auto;
	margin:0 auto;
	padding:100px 30px 0;
	text-align:left;
}
#content #about h2 {
	padding:0 0 20px;
	font-size:200%;
	line-height:1.2;
	text-align: center;
}
#content #about h2 span {
	font-weight:bold;
}
#content #about h2 strong {
	font-size:125%;
	letter-spacing:0.1em;
}
#content #about h2 .enTxt strong {
	letter-spacing:0.1em;
}
#content #about .lead {
	padding:0 0 40px;
	font-size:125%;
	line-height:1.4;
	text-align: center;
}
#content #about .openBox {
	padding:30px 0;
}
#content #about h3 {
	padding:30px 0 0;
	font-size:125%;
	line-height:1.4;
}
#content #about h3.top {
	padding:10px 0 0;
}
#content #about h3 span {
	font-weight:bold;
}
#content #about h3:after {
    content: "";
	display:block;
	width:80px;
	height:1px;
	margin:15px 0 30px;
	font-size:0;
	background:#0068B7;
}
#content #about .txt {
	padding:0 0 1.5em;
	font-size:113%;
	line-height:1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}
#content #about .btn {
	padding:15px 0;
	letter-spacing:0.15em;
}
#content #about .btn a {
	display:inline-block;
	padding:0 28px 0 0;
	font-size:125%;
	line-height:1.2;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	background: url(../img/common/arrow01.png) no-repeat right 3px center;
	background-size:10px auto;
	-webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}
#content #about .btn a:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;
	background: url(../img/common/arrow01.png) no-repeat right 3px center;
	background-size:10px auto;
	text-decoration:none;
}

/*  photo  */

#content #photo {
	width: auto;
	margin:0 auto;
	padding:0;
}
#content #photo .list {
	width: auto;
	margin:0 auto;
	padding:40px 15px 0;
}
#content #photo .list li {
	width: 100%;
	box-sizing:border-box;
	margin:0 auto;
	padding:0 0 10px;
	float: none;
	font-size:0;
}
#content #photo .list li.half {
	width: 100%;
}
#content #photo .list li img {
	width:100%;
}

#content .credit {
	text-align: center;
	margin:0 auto;
	padding:50px 30px 0;
}
#content .credit .txt {
	display:inline-block;
	text-align:left;
	margin:0 auto;
	font-size:100%;
	line-height:2.0;
}

/*  project  */

#content #project {
	width: auto;
	margin:0 auto;
	padding:100px 0 0;
}
#content #project.index {
	padding:130px 0 0;
}
#content #project .list {
	width: auto;
	margin:0 auto;
	padding:0;
	display:flex;
	flex-wrap: wrap;
}
#content #project .list li {
	width: 50%;
	box-sizing:border-box;
	margin:0;
	padding:0 6px 50px 0;
}
#content #project .list li:nth-child(2n) {
	padding:0 0 50px 6px;
}
#content #project .list li a {
	display: block;
	-webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}
#content #project .list li a:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;
	text-decoration:none;
}
#content #project .list li a .img {
	font-size:0;
	position:relative;
	width:100%;
	height:45vw;
	overflow:hidden;
}
#content #project .list li a .img img {
	width: auto;
	height:45vw;
	position: absolute;
	top:0;
	left:-9vw;
}
#content #project a h2 {
	padding:20px 10px 0;
	font-size:138%;
	line-height:1.2;
}
#content #project a h2 span {
	font-weight:bold;
}
#content #project a h2 .enTxt {
	letter-spacing:0.1em;
}
#content #project a .txt {
	padding:10px 10px 0;
	font-size:94%;
	line-height:1.3;
}

/*  moreBtn  */

#content .moreBtn {
	margin:80px auto 50px;
	text-align: center;
}
#content .moreBtn a {
	display:inline-block;
	padding:0 17px 25px;
	font-size:125%;
	line-height:1.2;
	letter-spacing:0.1em;
	text-align: center;
	background: url(../img/common/nami_sp.png) repeat-x center bottom;
	background-size:44px auto;
}
#content .moreBtn a:hover {
	background: url(../img/common/nami_sp.png) repeat-x center bottom;
	background-size:44px auto;
	text-decoration:none;
}
#content .moreBtn a .enTxt {
	letter-spacing:0.15em;
}




}