html { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar {display: none; }
body { background-color: #121212; width: 100%; color: #ddd; font-size: 3.5vw; line-height: 1.5; font-family: 'Noto Sans JP', sans-serif; }
h1 { font-size: 5vw; line-height: calc( 100vw / 3 ); margin: 0 auto; text-align: center; letter-spacing: 0.3em; font-family: 'Oranienbaum', serif; }
h1 a { display: block; }
.pc { display: none; }
img { width: 100%; vertical-align: middle; }
#kimono { width: 100vw; height: 100vw; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; text-align: center; background-image: url(../img/kimono_top-sp.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }
#kimono::before { content: ''; position: absolute; bottom: 5vw; right: 5vw; width: calc( 100vw / 3 - 5vw ); height: 1px; background-color: #fff; }
#kimono::after { content: ''; position: absolute; bottom: 5.9vw; right: 4.6vw; width: 2.5vw; height: 1px; transform: rotate(45deg); background-color: #fff; }
#kimono img { width: 50%; }
#kimono p { width: 100%; font-size: 5vw; }
#kimono p:first-of-type { margin-top: 5vw; }
#tile { display: flex; flex-wrap: wrap; }
#tile div { width: calc( 100vw / 3 ); height: calc( 100vw / 3 ); margin-bottom: 5vw; }
#tile div img { width: 100%; }
#profilebox { background-color: #333; font-family: 'Oranienbaum', serif; letter-spacing: 0.2em; }
#profilebox a { display: block; }
#design { margin: calc( 100vw / 3 - 15vw - 30px ) auto 3vw; padding: 0 6vw; line-height: 6vw; font-family: 'Oranienbaum', serif; letter-spacing: 0.05em; }
.prf { margin: 0 auto 10vw; padding: 0 6vw; }
.prf h2 { font-size: 5vw; }
.prf h3 { font-size: 5vw; font-family: 'Oranienbaum', serif; margin-bottom: 0.7em; letter-spacing: 0.1em; }
.prf ul { margin: 1em auto; }
.prf ul li:first-of-type { color: #ff47c5; }
.prf ul li:nth-of-type(n+2) { padding-left: 1.25em; }
.prf h2.career { margin-bottom: 1em; letter-spacing: 0.1em; }
.prf h2.position { font-family: 'Oranienbaum', serif; font-size: 4vw; letter-spacing: 0.2em; }
#kimonotile { display: flex; flex-wrap: wrap; align-items: flex-start; }
#kimonotile div { width: 50vw; height: 50vw; }
#kimonotile div.halfsize {
	width: 100%;
	height: auto;
}
#kimonotile img { width: 100%; }
#kimonotile div.credit { width: 100%; height: auto; font-size: 2.5vw; text-align: right; padding: 2vw 3vw 5vw; font-family: 'Oranienbaum', serif;}
div#office {
 width: calc( 100vw / 3 * 2 ); font-family: 'Oranienbaum', serif; background-color: #333; letter-spacing: 0.1em; }
div#tel { font-family: 'Oranienbaum', serif; background-color: #3a3a3a; letter-spacing: 0.2em; }
div#tel a { display: block; }
div#repair { background-color: #2a2a2a; font-family: 'Oranienbaum', serif; letter-spacing: 0.1em; }
div#repair a { display: block; }
#prfimg { margin-bottom: 5vw; }
#foot { display: flex; flex-wrap: wrap; }
#foot div { width: calc( 100vw / 3 ); height: calc( 100vw / 3 ); margin-bottom: 5vw; font-family: 'Oranienbaum', serif; letter-spacing: 0.1em; }
#foot div a { display: block; }
#foot div:first-of-type { background-color: #444; }
#foot div:nth-child(2) { background-color: #333; }
#foot div:nth-child(3) { background-color: #222; }
#foot div:last-of-type { width: 100%; background-color: #333; }
.line { line-height: calc( 100vw / 3 ); text-align: center; }
.mbo { padding-bottom: 5vw; }
@media screen and (min-width:768px) {
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
h1 { font-size: 2.5rem; line-height: 160px; }
.sp { display: none; }
.pc { display: block; }
#kimono { height: 50vw; text-align: center; background-image: url(../img/kimono_top-pc.jpg); }
#kimono:hover { opacity: 0.5; transition: all .5s; }
#kimono img { width: 40%; }
#kimono p { font-size: 2rem; }
#kimono:hover { background-color: #3a3a3a; transition: all .5s; }
#kimono::before { bottom: 20px; right: 20px; width: calc( 25vw - 20px ); }
#kimono::after { bottom: 25px; right: 18px; width: 15px; transform: rotate(45deg); }
#tile div { width: 25vw; height: 25vw; margin-bottom: 30px; }
#tile div img:hover { opacity: 0.2; transition: all .5s; }
#profilebox { font-size: 2rem; }
#profilebox:hover { background-color: #000; transition: all .5s; }
#design { display: flex; justify-content: flex-end; margin: 0 auto 30px; padding: 0 18px; font-size: 1.2rem; line-height: inherit; }
#design p { margin-right: 24px; }
.prf { margin: 0 auto 80px; padding: 0 50px; }
.prf h2.position { font-size: 2rem; }
.prf h2.career { font-size: 2.5rem; }
.prf h3 { font-size: 3rem; margin-bottom: 3rem; }
.prf ul { margin: 0 auto 3rem; }
#kimonotile div.halfsize img {
	width: 45%;
	margin: auto;
	display: block;
}
#kimonotile div.halfsize .credit {
	width: 45%;
	margin: auto;
	padding-right: 0;
}
#kimonotile div:hover { opacity: 0.2; transition: all .5s; }
#kimonotile div.halfsize:hover,#kimonotile div.nonhover:hover { opacity: 1; transition: all 0; }
	#kimonotile div.nonhover a {
		pointer-events: none;
	}
div#repair { width: 25vw; font-size: 2rem; }
div#repair:hover { background-color: #000; transition: all .5s; }
#kimonotile div.credit { font-size: 1.2rem; padding: 1em 1.5em 30px; }
#kimonotile div.credit:hover { opacity: 1; }
div#office { width: 100%; font-size: 1.8rem; }
div#tel { width: 25vw; font-size: 1.8rem; }
div#tel a { cursor: text; }
#foot div { width: 33.3333%; font-size: 1.8rem; height: 25vw; margin-bottom: 30px; }
#foot div:nth-child(2):hover { background-color: #000; transition: all .5s; }
#foot div:nth-child(3):hover { background-color: #000; transition: all .5s; }
#prfimg { margin-bottom: 30px; }
.line { line-height: 25vw; }
.mbo { padding-bottom: 30px; }
}
 @media screen and (min-width:1000px) {
#tile div { width: 20vw; height: 20vw; }
div#repair { width: 20vw; }
#kimono::before { width: calc( 20vw - 20px ); }
div#office { width: 100%; }
div#tel { width: 20vw; }
#foot div { height: 20vw; }
.line { line-height: 20vw; }
}
 @media screen and (min-width:1250px) {
#tile div { width: calc( 100vw / 6 ); height: calc( 100vw / 6 ); }
div#repair { width: calc( 100vw / 6); }
#kimono::before { width: calc( 100vw / 6 - 20px ); }
div#office { width: calc( 100vw / 3); }
div#tel { width: calc( 100vw / 6 ); }
#foot div { height: calc( 100vw / 6 ); }
.line { line-height: calc( 100vw / 6 ); }
}
 @media screen and (min-width:1500px) {
#tile div { width: calc( 100vw / 7 ); height: calc( 100vw / 7 ); }
div#repair { width: calc( 100vw / 7 ); }
#kimono::before { width: calc( 100vw / 7 - 20px ); }
div#office {  width: calc( 100vw / 7 * 2 );
}
div#tel { width: calc( 100vw / 7 ); }
#foot div { height: calc( 100vw / 7 ); }
.line { line-height: calc( 100vw / 7 ); }
}
 @media screen and (min-width:2000px) {
#tile div { width: calc( 100vw / 8 ); height: calc( 100vw / 8 ); }
#kimono::before { width: calc( 100vw / 8 - 20px ); }
div#office { width: 100%; }
#foot div { height: calc( 100vw / 8 ); }
.line { line-height: calc( 100vw / 8 ); }
}