@charset "utf-8";
/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
header, section, article { display: block; clear: both; }
/* base */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-family: YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; letter-spacing: 1px; font-size: 16px; font-weight: normal; }
img { vertical-align: bottom; height: auto; width: 100%; }
/* link */
a:link, a:visited, a:active { color: #000;
text-decoration: none; opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha(opacity=40)"; }
a:hover { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; }
/* clear */
.clear { clear: both; }
.cbox { zoom: 100%; }
.cbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }
/* wrapper */
#wrapper { width: 100%; position: relative; margin-right: auto; margin-left: auto; }

/* header */
#header { margin-top: 4em; margin-bottom: 4em; }
#header h1 { width: 200px; margin-right: auto; margin-left: auto; vertical-align: middle; }
#header nav { top: 0.75em; right: 4em; position: absolute; display: block; }
#header nav ul li { display: inline-block; width: 35px; }
#header nav ul li:nth-child(2) { margin-left: 0.75em; }

/* photo */
#contents .photo { width: 100%; }
#contents .photo div { position: relative; margin-right: auto; margin-left: auto; }
#contents .photo div:nth-child(2n) { padding-top: 1.5em; }
#contents .photo .box { position: absolute; top: 10em; right: 4em; }

/* credit */
.modal-open img { width: 35px; opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha(opacity=40)"; }
a.modal-open img:hover { cursor: pointer; opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; } /*カーソルをポインタに*/
/*
.modal-overlay {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color:rgba(0,0,0,.5)}
	*/
#contents .photo #credit { width: auto; min-width: 300px; background: #fff; position: absolute; top: 10em; right: 4em; }
#credit .modal-content { display: none; z-index: 2; text-align: left; padding: 30px; }
#credit .modal-content h1 { padding-left: 30px; padding-right: 30px; font-size: 200%; margin-bottom: 0.1em }
#credit .modal-content p { padding-top: 15px; padding-left: 30px; padding-right: 30px; }
#credit .modal-content p:nth-child(3) { padding-top: 15px; padding-left: 30px; padding-right: 30px; padding-bottom: 15px; }
#credit .modal-content p:nth-child(4) { padding-top: 0px; padding-left: 30px; padding-right: 30px; }
#credit .modal-content img { width: 35px; }
a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/ position: absolute; top: 0; padding-top: 0px; right: 0px; color: #000; font-size: 35px; line-height: 1; font-weight: bold; text-decoration: none }
a.modal-close:hover { cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha(opacity=40)"; } /*カーソルをポインタに*/

/* works */
#contents .works { font-size: 2.2em; line-height:2.25em; width: 90%; margin-right: auto; margin-left: auto; text-align: left; text-align:justify }
#contents .works #category li { display: inline; }
#contents .works .works_list { width:100%; }
#contents .works .works_list ul li { display: inline; vertical-align: middle; }
#contents .works .works_list ul li img { width: 40px; border: 3px solid #000; vertical-align: middle; }

#contents .info { background-color: #f2f2f2; padding:8em; text-align:left; }
#contents .info #about { width: 50%; margin-right:auto; margin-left:auto; }


/* footer */
#footer { margin-top: 4em; margin-bottom: 4em; font-size: 12px; }
#footer ul { bottom: 0em; right: 5em; position: absolute; display: block; }
#footer ul li { display: inline-block; width: 35px; }
#footer ul li:nth-child(2) { margin-left: 1em; }


/* sp */
body { }
@media screen and (max-width: 1380px) {
body { font-size: 14px; }
}
@media screen and (min-width: 1381px) and (max-width: 1450px) {
body { font-size: 15px; }
}
@media screen and (min-width: 1451px) and (max-width: 1550px) {
body { font-size: 16px; }
}
 @media screen and (max-width: 480px) {
body { font-size: 4px; }
#wrapper { width: 100%; }
}
/* sp
@media screen and (max-width: 480px) {
* { -webkit-appearance: none; }
#wrapper { width: 96%; min-width: 0px;  }
.pc { display: none; }
.sp { display: block; }
nav { display: none; }
}
@media screen and (min-width: 481px) and (max-width: 800px) {
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
} */