html, body, div, header, footer, h1, h2, h3, p, ol, ul, li, dl, dt, dd, img, a {padding: 0; margin: 0; outline: 0;}
a {color: inherit; text-decoration: none;}
i {font-style: normal;}
li {list-style-type: none;}
img {vertical-align: top; border: 0;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0;}
pre {font-family: Meiryo, sans-serif;}
a, button, div, span, p, li {-webkit-tap-highlight-color: transparent;}
body {-webkit-text-size-adjust: 100%;}
html, body, #page {width: 100%; min-width: 960px;}
html.submode, html.submode body {height: 100%; min-width: 0;}
body {background-color: #fff; color: #4d4d4d; font-family: Meiryo, sans-serif; overflow-y: scroll;}
/* Common */
#page {position: relative;}
#page > header h1 {padding: 52px 0 0 3%;}
#page > header h1 a {
display: block;
width: 212px; height: 31px;
color: #000058; font-size: 18px; font-weight: bold; line-height: 1; letter-spacing: 0;
overflow: hidden; white-space: nowrap;
}
#page > header h1 a:before {content: url(/i/logo.png);}
nav {position: absolute; right: 3%; top: 48px;}
nav:after {display: block; content: ''; clear: both;}
nav a {
display: block; float: left;
height: 27px; padding-top: 8px;
margin-left: 38px;
text-align: center;
font-size: 16px; line-height: 1; letter-spacing: 0.1em; color: #000058;
font-family: Arial, sans-serif;
}
nav a span {display: block; margin-top: 9px; visibility: hidden; font-size: 11px; letter-spacing: 0.1em; color: #999; font-family: Meiryo, sans-serif;}
nav a:hover span {visibility: visible;}
nav a[class="active"]:hover span {visibility: hidden;}
nav a.active {border-bottom: 1px solid #000058;}
#page > footer {position: relative; padding: 74px 0 56px 0; margin: 0 3%; border-top: 1px solid #ccc;}
#page > footer > span {display: block;}
#page > footer > address {
margin-top: 27px;
font-style: normal; font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 0.1em; line-height: 1; color: #333;
}
#bnav {
position: absolute; right: 0; bottom: 56px;
font-size: 11px; color: #333; letter-spacing: 1px; line-height: 1;
font-family: Arial, sans-serif;
}
#bnav:after {display: block; content: ''; clear: both;}
#bnav a {display: block; float: left; margin-left: 34px;}
#bnav a:hover {text-decoration: underline;}
#topimage {margin: 70px 3%; width: 94%;}
#topimage img {width: 100%;}
/* Top */
#slideshow {
position: relative;
height: 700px; margin-top: 40px;
pointer-events: none;
overflow: hidden;
}
#slideshow .center {position: relative; left: -600px; width: 0; height: 100%; margin: auto;}
#slideshow .all {position: absolute; left: 0; top: 0; height: 100%;}
#slideshow .all:after, #slideshow .set:after {content: ''; display: block; clear: both;}
#slideshow .set {position: relative; float: left; height: 100%;}
#slideshow .set > img {float: left; display: block; width: 1200px; height: 700px;}
#slideshow #mesh {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#slideshow #mesh:before {
content: '';
position: absolute; left: 0; top: 0;
display: block; width: 100%; height: 100%;
background: url(/i/dotmesh.png);
}
#slideshow #mesh:after {position: absolute; right: 3%; bottom: 20px; content: url(/i/artstorage_mark.png);}
#top-main {padding-top: 30px; text-align: center;}
#top-main h1 {
display: inline-block; vertical-align: top;
border-bottom: 2px solid yellow; margin-bottom: 15px;
font-family: "Times New Roman", serif; font-size: 16px; line-height: 1; letter-spacing: 0.14em; color: #000; font-weight: normal;
}
#top-main h1 > span {letter-spacing: 0;}
#top-main p {margin: 0; font-size: 12px; line-height: 1.75; letter-spacing: 0.1em;}
#top-news {padding-top: 30px; text-align: center;}
#top-news h1 {
display: inline-block; vertical-align: top;
border-bottom: 2px solid yellow; margin-bottom: 15px;
font-family: "Times New Roman", serif; font-size: 16px; line-height: 1; letter-spacing: 0.14em; color: #000; font-weight: normal;
}
#top-news h1 > span {letter-spacing: 0;}
#top-news a {font-size: 13px; line-height: 1; letter-spacing: 0.2em;}
#top-news a:hover {text-decoration: underline;}
#top #page > footer {border-top: 0; padding-bottom: 30px;}
#top #bnav {bottom: 30px;}
/* News */
#news #main {display: table; margin: auto; padding-top: 40px; padding-bottom: 166px;
}
#news #main > div {display: table-cell; text-align: left; vertical-align: top;}
#news .contents {width: 720px;}
#news .contents h2 {
display: table;
padding-bottom: 9px; border-bottom: 1px solid #000058; margin-bottom: 40px;
font-family: Arial, sans-serif; font-size: 27px; line-height: 1; letter-spacing: 0.1em; color: #000058; font-weight: normal;
}
#news .contents h2 > span {letter-spacing: 0;}
#news article {padding-bottom: 37px;}
#news article > time {
display: block; margin-bottom: 14px;
font-size: 13px; font-family: Arial, sans-serif; font-weight: normal; line-height: 1; letter-spacing: 0.1em;
}
#news article > h1 {margin-bottom: 31px; font-size: 16px; line-height: 1; letter-spacing: 0.1em;}
#news article > .body {width: 646px; margin-left: 20px; font-size: 13px; line-height: 2; letter-spacing: 0.1em;}
#news article > .body a:hover {text-decoration: underline;}
#news article > .body img {position: relative; left: -20px; margin: 24px 0;}
#news .archive {padding-top: 20px;}
#news .archive h1 {
margin-bottom: 29px;
font-size: 17px; line-height: 1; font-family: Arial, sans-serif; letter-spacing: 0.1em; color: #000058; font-weight: normal;
}
#news .archive ol {width: 200px; margin-left: 5px;}
#news .archive ol > li + li {margin-top: 15px;}
#news .archive a {font-size: 13px; line-height: 1; letter-spacing: 0.1em;}
#news .archive a:hover {text-decoration: underline;}
#news .archive time {display: block; margin-bottom: 5px; font-size: 12px;}
#news .archive b {display: block; font-weight: normal; line-height: 1.75;}
/* Concept */
#concept #main {display: table; margin: auto; padding-top: 18px; padding-bottom: 166px;}
#concept #main > div {display: table-cell; text-align: left; vertical-align: top;}
#c_concept {width: 658px; padding-left: 13px;}
#c_concept h2,
#c_concept h3 {width: 123px; height: 27px; overflow: hidden; white-space: nowrap;}
#c_concept h2 {
padding-bottom: 9px; border-bottom: 1px solid #000058; margin-bottom: 64px;
font-size: 27px; line-height: 1; letter-spacing: 0.1em; color: #000058;
}
#c_concept h2:before {content: url(/i/concept_h.png);}
#c_concept h3 {
width: 296px; height: 16px; margin-bottom: 42px;
font-size: 17px; line-height: 1; letter-spacing: 0.14em; color: #000;
}
#c_concept h3:before {content: url(/i/concept_h2.png);}
#c_concept p + h3 {margin-top: 91px; width: 294px; height: 19px;}
#c_concept p + h3:before {content: url(/i/concept_h3.png);}
#c_concept p {font-size: 13px; line-height: 2.2; letter-spacing: 0.1em;}
#concept #main .images img {display: block; width: 260px; margin-bottom: 28px;}
/* Artist */
#anav {margin: 43px 3% 0 0; text-align: right; font-size: 0; line-height: 0;}
#anav a {
display: inline-block; vertical-align: top;
width: 15px; height: 52px;
padding-right: 3px;
border-right: 1px solid #ccc;
margin-left: 12px; padding-left: 12px;
overflow: hidden;
font-size: 13px; line-height: 1; color: #333; font-family: serif;
}
#anav a:hover, #anav a.active {border-right-color: #333;}
#anav #anav-1 {height: 68px;}
#anav #anav-2 {height: 68px;}
#anav #anav-3 {height: 68px;}
#anav #anav-4 {height: 68px;}
#anav #anav-5 {height: 68px;}
#anav #anav-7 {height: 68px;}
#anav #anav-6 {height: 100px;}
#anav #anav-9 {height: 68px;}
#anav-1:before{content: url(/i/artist/abe-yusaku/anav.png);}
#anav-2:before{content: url(/i/artist/ohki-mari/anav.png);}
#anav-3:before{content: url(/i/artist/ono-takaya/anav.png);}
#anav-4:before{content: url(/i/artist/goto-harue/anav.png);}
#anav-5:before{content: url(/i/artist/sato-tatsuo/anav.png);}
#anav-6:before{content: url(/i/artist/nakano-mark-shusaku/anav.png);}
#anav-7:before{content: url(/i/artist/akamine-katsuro/anav.png);}
#anav-8:before{content: url(/i/artist/himeno-satoru/anav.png);}
#anav-9:before{content: url(/i/artist/fujita-nozomi/anav.png);}
#artist #page > ul {width: 902px; margin: auto; padding-bottom: 260px;}
#artist #page > ul:after {content: ''; display: block; clear: both;}
#artist #page > ul > li {position: relative; height: 240px; margin-top: 152px; opacity: 0; clear: both;}
#artist #page > ul > li:first-child {margin-top: 148px;}
#artist #page > ul > li:before {position: absolute; left: 627px; top: -100px; content: url(/i/separator_slash.png);}
#artist #page > ul > li:last-child:after {position: absolute; left: 627px; bottom: -100px; content: url(/i/separator_slash.png);}
#artist #page > ul > li > a {display: block; height: 240px; overflow: hidden; background-repeat: no-repeat;}
#artist #page > ul > li > a img {transition: opacity 200ms ease; -webkit-transition: opacity 200ms ease;}
#artist #page > ul > li > a:hover > img:first-child {opacity: 0;}
#artist #page > ul > li > a > img + img {float: right;}
/* Artist Info */
.abox {margin-bottom: 220px;}
.abox > hgroup {position: relative; margin-top: 83px; margin-bottom: 48px;}
.abox > hgroup > h1 {
position: absolute; left: 5%; top: -115px;
width: 82px; height: 377px;
overflow: hidden;
font-size: 82px; line-height: 1; color: #333; font-family: serif;
}
.abox > hgroup > h2 {padding-right: 3%; text-align: right; line-height: 0;}
.abox > hgroup > h2 > span {
display: inline-block; vertical-align: middle;
width: 52px; height: 13px; margin-right: 20px;
background: url(/i/artist_name-eng-pre.png);
text-indent: 110%; overflow: hidden; white-space: nowrap;
}
.abox > hgroup > h2 > i {display: inline-block; vertical-align: middle; text-indent: 110%; overflow: hidden; white-space: nowrap;}
.abox > img {width: 100%;}
#works > h1 {
width: 91px; height: 22px; margin-left: 3%; margin-top: 130px; padding-bottom: 13px; border-bottom: 1px solid #000058;
font-size: 26px; line-height: 1; color: #000058;
overflow: hidden; white-space: nowrap;
}
#works > h1:before {content: url(/i/artist_works_h.png);}
#works > ul {width: 960px; margin: 28px auto auto auto;}
#works > ul:after {display: block; content: ''; clear: both;}
#works > ul li {
display: table; float: left;
width: 120px; height: 120px; margin: 20px;
cursor: pointer;
}
#works > ul li span {display: table-cell; text-align: center; vertical-align: middle;}
#works > ul li img {transition: opacity 200ms ease; -webkit-transition: opacity 200ms ease;}
#works > ul li:hover img {opacity: 0.6;}
.abox > dl {margin: 155px 0 84px 3%; color: #4d4d4d;}
.abox > dl > dt {margin-bottom: 18px; font-size: 21px; line-height: 1; letter-spacing: 0.14em;}
.abox > dl > dd {font-size: 13px; line-height: 1; letter-spacing: 0.1em;}
#artist_photo {position: relative; margin: 0 3%; width: 94%; padding-bottom: 58px;}
#artist_photo img {width: 100%;}
#artist_photo i {
position: absolute; right: 0; bottom: 0;
font-size: 12px; font-family: Arial, sans-serif; line-height: 1; letter-spacing: 0.17em;
}
#artist-sublayer {
position: relative; z-index: 10;
display: none; width: 100%; height: 100%;
background-image: url(/i/sublayer_bg.png);
overflow: hidden;
}
#artist-sublayer > div {
visibility: hidden;
position: absolute; left: 100px; top: 100px; right: 100px; bottom: 100px;
background-position: center center; background-repeat: no-repeat; background-size: contain;
text-align: center;
pointer-events: none;
}
.IE8 #artist-sublayer > div {background-image: none !important;}
#artist-sublayer > div.active {visibility: visible;}
#artist-sublayer > div img {height: 100%;}
#asbox_close {cursor: pointer; position: absolute; right: 45px; top: 0;}
#asbox_left_wrap {display: block; position: absolute; left: 28px; top: 50%;}
#asbox_right_wrap {display: block; position: absolute; right: 28px; top: 50%;}
#asbox_left {cursor: pointer; position: relative; top: -60px;}
#asbox_right {cursor: pointer; position: relative; top: -60px;}
#abe-yusaku > hgroup > h1 {width: 82px; height: 381px;}
#abe-yusaku > hgroup > h1:before {content: url(/i/artist/abe-yusaku/name.png);}
#abe-yusaku > hgroup > h2 i {width: 183px; height: 23px; background: url(/i/artist/abe-yusaku/name-eng.png);}
#ohki-mari > hgroup > h1 {width: 82px; height: 377px;}
#ohki-mari > hgroup > h1:before {content: url(/i/artist/ohki-mari/name.png);}
#ohki-mari > hgroup > h2 i {width: 163px; height: 23px; background: url(/i/artist/ohki-mari/name-eng.png);}
#ono-takaya > hgroup > h1 {width: 82px; height: 380px;}
#ono-takaya > hgroup > h1:before {content: url(/i/artist/ono-takaya/name.png);}
#ono-takaya > hgroup > h2 i {width: 185px; height: 30px; background: url(/i/artist/ono-takaya/name-eng.png);}
#goto-harue > hgroup > h1 {width: 82px; height: 383px;}
#goto-harue > hgroup > h1:before {content: url(/i/artist/goto-harue/name.png);}
#goto-harue > hgroup > h2 i {width: 181px; height: 22px; background: url(/i/artist/goto-harue/name-eng.png);}
#sato-tatsuo > hgroup > h1 {width: 82px; height: 380px;}
#sato-tatsuo > hgroup > h1:before {content: url(/i/artist/sato-tatsuo/name.png);}
#sato-tatsuo > hgroup > h2 i {width: 188px; height: 22px; background: url(/i/artist/sato-tatsuo/name-eng.png);}
#nakano-mark-shusaku > hgroup > h1 {width: 82px; height: 618px;}
#nakano-mark-shusaku > hgroup > h1:before {content: url(/i/artist/nakano-mark-shusaku/name.png);}
#nakano-mark-shusaku > hgroup > h2 i {width: 357px; height: 22px; background: url(/i/artist/nakano-mark-shusaku/name-eng.png);}
#akamine-katsuro > hgroup > h1 {width: 82px; height: 381px;}
#akamine-katsuro > hgroup > h1:before {content: url(/i/artist/akamine-katsuro/name.png);}
#akamine-katsuro > hgroup > h2 i {width: 276px; height: 23px; background: url(/i/artist/akamine-katsuro/name-eng.png);}
#himeno-satoru > hgroup > h1 {width: 82px; height: 280px;}
#himeno-satoru > hgroup > h1:before {content: url(/i/artist/himeno-satoru/name.png);}
#himeno-satoru > hgroup > h2 i {width: 237px; height: 23px; background: url(/i/artist/himeno-satoru/name-eng.png);}
#fujita-nozomi > hgroup > h1 {width: 82px; height: 381px;}
#fujita-nozomi > hgroup > h1:before {content: url(/i/artist/fujita-nozomi/name.png);}
#fujita-nozomi > hgroup > h2 i {width: 230px; height: 28px; background: url(/i/artist/fujita-nozomi/name-eng.png);}
/* Contact */
#contact #main {
position: relative;
width: 960px; margin: auto; margin-top: 149px;
}
#contact #main > h2 {
position: absolute; left: 22px; top: 0;
width: 114px; height: 21px; overflow: hidden; white-space: nowrap;
padding-bottom: 9px; border-bottom: 1px solid #000058; margin-bottom: 64px;
font-size: 27px; line-height: 1; letter-spacing: 0.1em; color: #000058;
}
#contact #main > h2:before {content: url(/i/contact_h.png);}
#contact #main > h3 {
position: absolute; left: 250px; top: 14px;
font-size: 18px; line-height: 1; letter-spacing: 0.1em; font-weight: normal; font-family: Arial, sans-serif;
}
#contact #main > div {
padding: 58px 0 30px 250px;
font-size: 12px; line-height: 2.1; letter-spacing: 0.1em;
}
#contact #main > div a:hover {
text-decoration: underline;
}
form {display: block; width: 426px; margin: 40px 0 0 250px}
form:after {display: block; clear: both; content: ''}
form ul {
margin: 0; padding: 0;
border-top: 1px dashed #e5e5e5;
}
form ul > li {
border-bottom: 1px dashed #e5e5e5;
list-style: none;
}
form ul > li:last-child {
padding-bottom: 13px;
}
form label {
color: #000058; font-size: 13px; line-height: 55px; letter-spacing: 0.2em; font-weight: normal;
}
form ul label {
box-sizing: border-box;
display: inline-block; vertical-align: middle;
width: 143px; padding: 0 0 0 4px;
}
form input, form textarea {
box-sizing: border-box;
border: 1px solid #999;
background: white;
font-family: Meiryo, sans-serif;
}
form input {
vertical-align: middle;
width: 274px; height: 28px; padding: 2px 8px 0;
font-size: 12px; line-height: 26px; letter-spacing: 0.075em; color: #333;
}
form div label {
display: block;
line-height: 1;
margin: 0 0 13px 0;
}
form textarea {
box-sizing: border-box;
display: block;
vertical-align: middle;
width: 418px; height: 198px; margin: auto; padding: 2px 8px 0;
font-size: 12px; line-height: 26px; letter-spacing: 0.075em; color: #333;
}
form button {
transition: opacity 200ms ease-in-out;
display: block;
width: 190px; height: 38px; margin: 56px auto 93px; padding: 0; border: 0; outline: 0;
background: url(i/contact-button-confirm) 0 0 no-repeat;
cursor: pointer;
overflow: hidden; text-indent: 110%; white-space: nowrap;
}
form button:hover {
opacity: 0.6;
}
html.swap, html.swap body {
height: 100%;
}
html.swap #page {
position: fixed;
width: 100%;
}
#sublayer {
position: relative; z-index: 101;
display: none; table-layout: fixed; border-collapse: collapse; border-spacing: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
}
#sublayer > .cell {
display: table-cell; padding: 0;
text-align: center; vertical-align: middle;
}
#sublayer .container {
width: 800px; margin: 100px auto; padding: 38px 0 48px 0;
background: white;
text-align: center;
}
#sublayer .container table {
border-collapse: collapse; border-spacing: 0;
width: 618px; margin: 0 auto 33px;
text-align: left;
}
#sublayer .container th, #sublayer .container td {
padding: 7px 0; border-top: 1px dashed #f2f2f2;
vertical-align: top; text-align: left;
}
#sublayer .container th {
width: 164px;
font-size: 13px; line-height: 28px; letter-spacing: 0.2em; font-weight: normal; color: #000058;
}
#sublayer .container td, #sublayer .container pre {
font-size: 12px; line-height: 28px; letter-spacing: 0; font-weight: normal;
}
#sublayer .container pre {
margin: 0;
font-family: inherit;
white-space: pre-wrap;
}
#sublayer .container button {
@include transition(opacity 200ms ease-in-out);
display: inline-block; vertical-align: top;
width: 190px; height: 38px; margin: 0; padding: 0; border: 0; outline: 0;
background: 0 0 no-repeat;
cursor: pointer;
overflow: hidden; text-indent: 110%; white-space: nowrap;
}
#sublayer .container button + button {
margin-left: 62px;
}
#sublayer .container button:hover {
opacity: 0.6;
}
#sublayer .container #contact-return {
background-image: url(i/contact-button-return);
}
#sublayer .container #contact-send {
background-image: url(i/contact-button-send);
}
html.swap #sublayer {
display: table;
}
#contact #main #complete {
padding: 0 0 335px; border-bottom: 0;
text-align: center;
}
#complete p {
margin: 0;
}
#complete p:first-child {
font-size: 16px; font-weight: bold; color: #333; letter-spacing: 0.2em;
}
#complete p:first-child + p {
margin: 37px 0;
font-size: 13px; color: #4d4d4d; line-height: 30px; letter-spacing: 0.2em;
}
#complete p:first-child + p {
font-size: 11px; color: #4d4d4d; line-height: 30px;
}
/* Policies */
.policy #main {
box-sizing: border-box;
position: relative;
width: 960px; margin: auto; margin-top: 149px; padding-left: 300px; padding-bottom: 140px;
}
.policy #main > h1 {
position: absolute; left: 22px; top: 0;
overflow: hidden; white-space: nowrap;
padding-bottom: 9px; border-bottom: 1px solid #000058; margin: 0 0 64px;
font-size: 26px; line-height: 0.8; letter-spacing: 0.1em; color: #000058; letter-spacing: 0; font-family: Arial, sans-serif;
}
.policy #main section {
margin-right: 22px;
font-size: 12px; line-height: 30px;
}
.policy #main section + section {
padding-top: 30px;
}
.policy #main section h1 {
font-size: 13px; font-weight: normal;
}
.policy #main > p {
margin-right: 22px;
font-size: 12px; line-height: 30px;
}
/* User Agreement */
#agreement #main {
width: 916px; margin: 0 auto; padding: 41px 0 97px;
}
#agreement #main > h2 {
margin-bottom: 59px;
color: #000058; font-size: 27px; font-family: Arial, sans-serif;
}
#agreement #main > section {
font-size: 13px; line-height: 2.23; letter-spacing: 0.1em;
}
#agreement #main > section + section {
margin-top: 62px;
}
#agreement #main > section > h3 {
margin: 0 0 33px;
font-weight: bold; font-size: 16px; letter-spacing: 0.1em; line-height: 1.2;
}
#agreement #main > section .limit {
width: 884px; margin: 0 auto;
}
#agreement #main > section ol {
width: 680px; margin-top: 23px;
}
#agreement #main > section ol > li {
margin-left: 1em;
text-indent: -1em;
}
#agreement #main > section .limit-center {
width: 650px; margin: -60px auto 0;
}
#agreement #main .link-contact {
margin-top: 26px;
}
#agreement #main .link-contact .style-1 {
letter-spacing: 1.1em;
}
#agreement #main .link-contact .style-2 {
text-decoration: underline;
}
#agreement #main .text-price {
display: table;
width: auto; margin-bottom: 23px; padding-bottom: 4px; border-bottom: 3px solid #221815;
line-height: 1.2;
}
#agreement #main .text-price .style-1 {
display: inline-block;
margin-right: 28px;
letter-spacing: 0.15em;
}
#agreement #main .text-price .style-2 {
display: inline-block;
margin-right: 5px;
font-size: 26px;
}
#agreement #main .text-price .style-3 {
font-size: 18px;
}
#agreement #main .text-price .style-4 {
font-size: 14px;
}
#agreement #main .text-price .style-5 {
letter-spacing: -0.4em;
}