@charset "utf-8";

/*
	Theme Name: R-You
	Theme URI: https://ludhaus.com/
	Description: R-You Theme by Hirofumi Yasutomi.
	Author: Ludhaus Funs.
	Author URI: https://rx-you.net/
	Version: 1.0
*/


@import url(//fonts.googleapis.com/css?family=Inter:200,400,600);
@import url(//fonts.googleapis.com/css?family=Oswald:200,500);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

html {
	background-color: #faf7f0;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%
}

body {
	margin: auto;
	color: #654;
	font: 12px 'Inter', Noto Sans JP, Arial, Meiryo, sans-serif;
	font-weight: 400;
	letter-spacing: .04em;
	-webkit-font-smoothing: antialiased
}

h1, h2, h3, h4, h5, h6 {
	color: #654;
	margin: 1.4em 0 0;
	font-weight: 500;
	line-height: 1.4
}
h1 {
	margin-top: 2.2em;
	font-size: 2.6em
}
h2 { font-size: 2em }
h3 { font-size: 1.6em }
h4 { font-size: 1.4em }
h5 { font-size: 1.2em }

p,
ul {
	margin: 1em 0;
	line-height: 1.8;
}
ul p {
	font-size: .9em;
	line-height: 1.6;
	margin: .2em 0 1em
}

img {
	border-width: 0;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic
}

a {
	color: #654;
	text-decoration: none
}
a:hover {
	text-decoration: none
}

table {
	border-collapse: collapse;
	color: #321;
	margin: 2em auto;
	width: 100%
}
table small {
	font-size: .7em
}
table span {
	letter-spacing: -.2em
}

#ladies,
#mens,
#kids {
	padding-top: 8em
}


hr {
	border-width: 0;
	clear: both;
	height: 1px;
	margin: 4em auto
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
	display: block
}
main {
	transition: 1s
}
nav ul {
	padding-left: 0
}
nav li a {
	display: block;
	overflow: hidden;
	font-weight: 500;
	position: relative;
	padding: 20px 0
}
nav li a > span {
	display: block;
	font-size: .95em;
	overflow: hidden;
	height: 20px
}
nav li a i {
	display: block;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .15em;
	line-height: 20px;
	transition: .4s
}
nav li a:hover i {
	transform: translateY( -100%)
}

/* WordPress Class
------------------------------ */
.aligncenter,
.alignleft,
.alignright {
	display: block;
	text-align: center;
	margin: 2.4em auto auto
}
.aligncenter.active img {
	animation: fadeUp 3s;
}
.alignleft.active img {
	animation: fadeLeft 3s;
}
.alignright.active img {
	animation: fadeRight 3s;
}
.middle {
	width: 50% 
}

/* Universal Class
------------------------------ */
h2.title {
	clear: both;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	position: relative;
	margin: 4em auto 2em
}
h2.title span {
	display: block;
	font: .5em 'Noto Sans JP', sans-serif;
}
h2.title::before,
h2.title::after {
	background-color: #f2eada;
	border-radius: 50%;
	content: "";
	position: absolute;
	transition: 2s;
	top: -20px;
	left: -40px;
	width: 35px;
	height: 35px;
	z-index: -1
}
h2.title::after {
	background-color: #f2eada;
	top: -10px;
	left: -30px;
	width: 15px;
	height: 15px
}
h2.title::before {
	top: -15px;
	left: -20px
}
h2.title.active:after {
	top: -25px;
	left: -35px
}

.sub {
	display: block;
	font-size: .5em
}

.clear {
	clear: both
}

.notice {
	font-size: .8em
}

ul.asterisk {
	list-style-type: none;
	padding-left: 0;
}
p.asterisk,
.asterisk li {
	padding: 0 0 .5em 1em;
	font-size: .9em;
	text-indent: -1.2em;
}
p.asterisk::before,
.asterisk li::before {
	content: '※ ';
}

.thumbnail {
	margin: 2em auto
}
[class^="column"] > a,
[class^="column"] span a,
.thumbnail a {
	display: block;
	overflow: hidden
}
[class^="column"] > a:hover img,
[class^="column"] span a:hover img,
.thumbnail a:hover img {
	transform: scale(1.04, 1.04);
	transition: 1s all ease
}

.post {
	margin: 0 0 6em
}
.post .thumbnail {
	margin: 0 -12.5%
}

.button {
	clear: both;
	text-align: center
}
.button a {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: .8em;
	font-weight: 600;
	height: 50px;
	letter-spacing: .2rem;
	line-height: 50px;
	margin: 2.5rem auto 5rem;
	position: relative;
	text-transform: uppercase;
	transition: .5s;
	z-index: 10
}
.button a span {
	display: block;
	font-size: .8em;
	font-weight: 400;
	letter-spacing: .06em;
	margin-top: -1em
}
.button a i {
	border-bottom: 1px solid #321;
	position: absolute;
	transition: .5s;
	margin: 24px 0 0 10px;
	width: 13px
}
.button a i::before,
.button a i::after {
	border-radius: 50%;
	content: '';
	position: absolute;
	z-index: -1
}
.button a i::before {
	background-color: #f2eada;
	top: -25px;
	right: -25px;
	width: 50px;
	height: 50px
}
.button a i::after {
	background-color: #321;
	top: -2px;
	right: -2px;
	width: 5px;
	height: 5px
}
.button a:hover i {
	width: 40px
}
.button a:hover i::before {
	transition: .5s;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px
}
.button .laptop {
	border-radius: 2px;
	border: solid 1px currentColor;
	color: #000;
	display: block;
	position: relative;
	margin: 4em auto -2em;
	width: 42px;
	height: 28px
}
.button .laptop::before {
	content: '';
	position: absolute;
	left: -6px;
	bottom: -5px;
	width: 52px;
	height: 1px;
	border-radius: 0 0 2px 2px;
	border: solid 1px currentColor;
}
.button .mobile {
	display: block;
	color: #000;
	position: relative;
	margin: 4em auto -2em;
	width: 22px;
	height: 30px;
	border-radius: 2px;
	border: solid 1px currentColor;
}
.button .mobile::before,
.button .mobile::after {
	background-color: currentColor;
	content: '';
	position: absolute;
	width: 2px
}
.button .mobile::before {
	top: 1px;
	left: 10px;
	height: 1px
}
.button .mobile::after {
	border-radius: 50%;
	bottom: 1px;
	left: 10px;
	height: 2px
}

main .button a,
footer .button a {
	background-color: #f2eada;
	border-radius: 100vh;
	padding: 0 40px 0 30px;
}
main .button a:hover,
footer .button a:hover {
	background-color: transparent;
	letter-spacing: .3em
}
main .button a i::before,
footer .button a i::before {
	top: -24px
}

.item {
    display:flex;
    flex-wrap:wrap;
	line-height: 1.2em;
	list-style-type: none;
    justify-content: center;
	margin: 4em auto;
	padding: 0;
	text-align: center
}
.item li {
    width: calc(25% - 1%);
    margin-right: 1%;
    margin-bottom: 2%
}
.item li:nth-child(4n),
.item li:last-child {
    margin-right: 0
}
.item img {
	margin: 0 0 .8em
}


.balloon {
	position: relative;
	background: #f2eada;
	border-radius: 10px;
	font-size: 1em;
	margin: 2em auto auto;
	padding: 2em 2em
}
.balloon::before {
	border-top: 15px solid #f2eada;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	content: '';
	display: block;
	position: absolute;
	margin: 0 auto;
	right: 0;
	bottom: -15px;
	left: 0;
	width: 0;
	height: 0
}

.border {
	border-bottom: 1px solid #654;
	width: 90%
}

.circle {
	background: #fff;
	border-radius: 50%;
	border: 5px solid #fff;
	margin-top: -6em !important;
	position: relative;
	transition: 4s;
	width: 30% !important
}

.column {
	overflow: hidden;
	margin-top: 2em;
	margin-bottom: 2em
}
.column h3 {
	margin-top: 1em
}
.column [class^="column"] {
	position: relative;
	float: left;
	margin-right: 6px;
	margin-bottom: 6px;
	width: calc((100% - 6px * 1) / 2)
}
.column .column1 {
	width: calc((100% - 6px * 1) / 1)
}
.column .column5 {
	width: calc((100% - 6px * 2) / 3)
}
.column2:nth-child(2n),
.column3:nth-child(2n),
.column4:nth-child(2n),
.column5:nth-child(3n) {
	margin-right: 0
}

.panel {
	overflow: hidden;
	margin: 4em -25%;
	text-align: center
}
.panel .column2 span {
	display: block;
	margin: auto -50px
}
.panel [class^="column"] {
	position: relative;
	float: left;
	margin-bottom: 10px
}
.panel .column2 {
	width: calc((100% - 99px * 1) / 2)
}
.column2:nth-child(2n+1) {
	clear: both
}
.column2:nth-child(2n) {
	float: right;
	margin-right: 0
}

.gallery {
	background-color: #fff;
	margin: 2em auto;
	max-width: 980px;
	overflow: hidden;
	padding: 20px
}
.gallery li {
	float: left;
	list-style-type: none;
	margin: .25%;
	width: 19.5%
}
.gallery a {
	display: block;
	overflow: hidden
}
.gallery a:hover img {
	transform: scale(1.04, 1.04);
	transition: 1.8s all ease
}

.note {
	background-color: #fff;
	margin: 2em auto 10%;
	max-width: 980px;
	overflow: hidden
}
.note p {
	margin: 2em 6%
}

.check,
.qa {
	margin: 3em 0;
	padding: 0
}
.information {
	margin: 2em auto
}
.check li,
.information li,
.qa li {
	overflow: hidden
}
.information li,
.qa li {
	margin: 0 0 1.8em;
	width: 100%
}
.information li {
	overflow: hidden;
	max-height: 58px
}

.check li::before,
.information li::before,
.qa li::before {
	box-sizing: border-box;
	color: #a58866;
	float: left;
	font-family: quasimoda, sans-serif;
	text-align: center;
	height: 38px
}

.check li::before {
	content: '✓';
	font-size: 2em;
	font-weight: 400;
	line-height: .8em;
}
.information li::before {
	content: '-';
	line-height: 38px;
	width: 10px
}
.qa li::before {
	border: 1px solid #a58866;
	border-radius: 16px;
	content: 'Q';
	line-height: 36px;
	width: 38px
}
.information li time {
	margin-right: 1em
}
.information li > a,
.qa li > a,
.qa li > span {
	float: right;
	width: calc(100% - 4em);
	display: inline-block;
	padding: .6em 0 0;
	transition: all .3s;
}
.qa li li {
	margin-top: 0;
	padding-top: 3em
}
.qa li li::before {
	background-color: #a58866;
	color: #fff;
	content: 'A'
}
.qa li li span {
	width: calc(100% - 4em)
}

.charge tr {
	border-bottom: solid 2px white
}
.charge th {
	background-color: #f2eada;
	overflow: hidden;
	position: relative;
	text-align: center;
	padding: 10px 0
}
.charge th::before,
.charge th::after {
	background-color: #faf7f0;
	content: "";
	display: block;
	position: absolute;
	transform: rotate(-45deg);
	top: calc(50% - 37px);
	right: -18px;
	width: 32px;
	height: 32px
}
.charge th::after {
	top: calc(50% - -5px)
}
.charge td {
	background-color: #faf7f0;
	text-align: center;
	padding: 10px
}
.lumix td:nth-child(4), .lumix td:nth-child(5) {
	opacity: 1
}
@media only screen and (max-width: 736px) {
	.lumix {
		width: 160%;
	}
	.lumix td:nth-child(4), .lumix td:nth-child(5) {
		opacity: 0
	}
}
.lumix .s th { background-color: #f29db3; color: #fff }
.lumix .s th::before, .lumix .s th::after, .lumix .s td { background-color: #ffe5ec; color: #e55c73 }
.lumix .m th { background-color: #a1b8e5; color: #fff }
.lumix .m th::before, .lumix .m th::after, .lumix .m td { background-color: #e5eeff; color: #3d85cc }
.lumix .l th { background-color: #a3cc52; color: #fff }
.lumix .l th::before, .lumix .l th::after, .lumix .l td { background-color: #f6ffe5; color: #a3cc52 }
.lumix .ll th { background-color: #bea3cc; color: #fff }
.lumix .ll th::before, .lumix .ll th::after, .lumix .ll td { background-color: #f6e5ff; color: #8f6bb3 }

/* Loupe */
#loupe {
	cursor: pointer;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.96)
}
#loupe::before,
#loupe::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 40px;
	right: 20px;
	width: 34px;
	height: 1px;
	background-color: #000;
	transform: rotate(45deg);
}
#loupe::after {
	transform: rotate(-45deg)
}
#loupe img {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto
}
#loupe p {
	opacity: 0;
	position: relative;
	top: 40%;
	z-index: -1;
	font-size: 1.4em;
	text-align: center;
	text-transform: uppercase;
	animation: loupe 1s
}
@keyframes loupe {
	  0% { opacity: 1; transform: scale(.9) }
	100% { opacity: 0; transform: scale(1 ) }
}

/* Animation */
@keyframes fade {
	  0% { opacity: 0 }
	100% { opacity: 1 }
}
@keyframes fadeScale {
	  0% { opacity: 0; transform: scale(1.2) }
	100% { opacity: 1; transform: scale(1) }
}
@keyframes fadeUp {
	  0% { opacity: 0; transform: translateY(10%) }
	 80% { opacity: 0; transform: translateY(10%) }
	100% { opacity: 1; transform: translateY( 0 ) }
}
@keyframes fadeDown {
	  0% { opacity: 0; transform: translateY(-90px) }
	100% { opacity: 1; transform: translateY( 0) }
}
@keyframes fadeRight {
	  0% { opacity: 0; transform: translateX( 10%) }
	100% { opacity: 1; transform: translateX(  0 ) }
}
@keyframes fadeLeft {
	  0% { opacity: 0; transform: translateX(-10%) }
	100% { opacity: 1; transform: translateX(  0 ) }
}

/* Spine Header
------------------------------ */
#spine {
	color: #654;
	position: fixed;
	transition: 1s;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10
}
#spine::after,
#spine::before {
	content: '';
	position: absolute;
	top: 0;
	height: 60px;
	z-index: -1
}
#spine::after  {
	background-color: #f2eada;
	left: 0;
	width: 40%
}
#spine::before  {
	background-color: #fff;
	right: 0;
	width: 60%
}

#logo a {
	background: url(image/logo.png) no-repeat 50% #a58866;
	background-size: 50px;
	float: left;
	overflow: hidden;
	padding: 60px 0 0;
	position: relative;
	width: 60px;
	height: 0;
	z-index: 11
}


#contact a,
#menu {
	cursor: pointer;
	float: right;
	position: relative;
	padding: 20px 25px;
	width: 20px;
	height: 20px;
	z-index: 1
}
#contact span:nth-child(1),
#menu span:nth-child(1) {
	position: absolute;
	overflow: hidden;
	right: 10px;
	top: 38px;
	text-align: center;
	height: 10px;
}
#menu span:nth-child(1) {
	right: 18px
}
#contact span:nth-child(1) i,
#menu i {
	display: block;
	font-size: .8em;
	font-style: normal;
	font-weight: 600;
	line-height: 10px;
	text-transform: uppercase;
	transition: .4s
}
#contact span:nth-child(1) i:nth-child(2),
#menu i:nth-child(2) {
	font-size: .6em
}
#contact:hover span:nth-child(1) i,
#menu:hover i {
	transform: translateY( -100%)
}

#contact span:nth-child(2) {
	background: #fff;
	border: solid 2px currentColor;
    border-radius: 25px;
    color: #654;
    height: 20px;
    margin: -10px 0 0 -8px;
    position: absolute;
    transform: scale(.8);
    width: 32px
}
#contact span:nth-child(2):before {
    background: #fff;
    border: solid 2px currentColor;
    border-width: 0 2px 2px 0;
    content: '';
    height: 6px;
    left: 3px;
    position: absolute;
	top: 16px;
    transform: rotate(75deg);
    width: 4px
}
#contact span:nth-child(3) {
    content: '';
    left: 26px;
    position: absolute;
	top: 12px;
}
#contact span:nth-child(3) > i {
	display: inline-block;
	background: #a58866;
	margin: 0 1px;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	animation: contact 4s infinite;
	transform: scale(.3)
}
#contact span:nth-child(3) > i:nth-child(1) {
	animation-delay: .2s
}
#contact span:nth-child(3) > i:nth-child(2) {
	animation-delay: .4s
}
#contact span:nth-child(3) > i:nth-child(3) {
	animation-delay: .6s
}
@keyframes contact {
	0% { opacity: 1; transform: scale(1.4) }
  100% { opacity: .4; transform: scale(.3) }
}

#menu span:nth-child(2),
#menu span:nth-child(2)::before,
#menu span:nth-child(2)::after {
	background: #654;
	content: "";
	display: block;
	position: relative;
	right: 1px;
	width: 24px;
	height: 2px;
	transition: .3s .3s, transform .3s
}
#menu span:nth-child(2) {
	top: 2px
}
#menu span:nth-child(2)::before {
	right: 0;
	top: -6px;
}
#menu span:nth-child(2)::after {
	right: 0;
	top: 4px
}

#spine nav {
	background-color: #f2eada;
	position: fixed;
	top: 0;
	right: 0;
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
	transform: translateX(100%);
	transition: 1s;
	width: 70%;
	height: 100%
}
#spine ul {
	position: absolute;
	list-style-type: none;
	top: 16%;
	padding: 0;
	width: 100%;
}
#spine li {
	display: block;
	text-align: center
}
#spine .button {
	position: fixed;
	transform: scale(.6) rotate(90deg);
	left: -7px;
	bottom: 75px;
	margin: 0;
	height: 50px
}

.active #spine .button {
	opacity: 0
}
.tight.active #spine .button {
	opacity: 1
}

#spine .button i {
	width: 55px
}
#spine .button a:hover i {
	width: 70px
}
#spine .button a:nth-child(2) {
	top: -30px;
	left: 100px
}
#spine .button a:nth-child(2) i {
	width: 55;
	left: -80px
}
#spine .button a:nth-child(2) i::before {
	left: -28px
}
#spine .button a:nth-child(2) i::after {
	left: -4px
}
#spine .button a:nth-child(2):hover i {
	left: -100px
}
#spine .button a:nth-child(2):hover i::before {
	left: -18px
}
#spine .button a:nth-child(2),
.active #spine .button a:nth-child(1) {
	display: none
}
#spine .button a:nth-child(1),
.active #spine .button a:nth-child(2) {
	display: inline-block
}

.open #cover,
.open main,
.open footer {
	opacity: .3;
	transform: translateX(-70%);
	transition: 1s
}
.open #spine nav {
	transform: translateX(0%)
}
.open #menu span {
	background-color: transparent
}
.open #menu span::before,
.open #menu span::after {
	transition: .3s, transform .3s .3s
}
.open #menu span::before {
	top: -2px;
	transform: rotate(45deg)
}
.open #menu span::after {
	transform: rotate(-45deg);
	top: -4px
}

/* Cover
------------------------------ */
#cover {
	background-color: #fff;
	overflow: hidden;
	position: relative
}
#cover {
	text-align: center;
	text-transform: uppercase
}
#cover h1 {
	font-weight: 600;
	margin-top: 14rem;
}
#cover .thumbnail {
	margin-bottom: 0
}
#cover .thumbnail img {
	animation: fadeScale 2s;
	position: relative;
	margin-top: 34px;
	z-index: 1
}
.billboard {
	animation: fadeRight 2s;
	box-sizing: border-box;
	color: #654;
	font: 2.4em 'Oswald', sans-serif;
	font-weight: 200;
	position: absolute;
	letter-spacing: normal;
	text-transform: uppercase;
	top: 26%;
	margin: 0;
	padding: 0 20%;
	width: 100%;
	z-index: 2
}
.billboard span {
	display: block;
	font-weight: 500
}

/* Main
------------------------------ */
#wrapper {
	position: relative;
	background-color: #faf7f0;
	z-index: 1
}
main {
	background-color: #fff;
	position: relative;
	transform-origin: 50% 100% 0;
	z-index: 1
}
main img {
	opacity: 0
}
main img.active {
	animation: fade 3s;
	opacity: 1
}
main > article,
main > section,
#cover > section {
	overflow: hidden;
	position: relative;
	margin: auto;
	padding: 6% 8%
}
main > section .thumbnail {
	margin: 2em -24%
}

hr#qa {
	padding-top: 6em
}
#access {
	padding-top: 0
}
#access .thumbnail {
	margin: auto -24% 4em
}

main section section {
	padding: 8em 0
}

main .column .button {
	margin-top: -2em;
	margin-left: -10%;
	transform: scale(.8)
}

/* Footer
------------------------------ */
#colophon {
	background-color: #fff;
	position: relative;
	transition: 1s;
	margin: 8% 6%;
	padding: 8%;
	z-index: 1
}
.tight #colophon {
	background-color: #fff;
	box-shadow: 5px 5px #bfa68a;
	position: relative;
	margin: 8%;
	z-index: 1
}
.tight #colophon > * {
	transform: scale(.90)
}
#colophon .balloon {
	margin-bottom: 40px
}
#colophon .column {
	margin: -2em  -12%
}
#colophon .button {
	margin-top: -2.4em;
	margin-bottom: -2.4em
}
#copyright {
	background-color: #f2eada;
	clear: both;
	padding: 2em 0;
	font-size: .7em;
	text-align: center
}

/* Page by page
------------------------------ */
.page-child #spine::before,
.page-child #spine::after {
	background: #faf7f0;
	background: transparent
}
.page-child #cover .thumbnail,
.page-child #cover .thumbnail img {
	margin: 0
}
.page-child .billboard span,
.page-id-562 #cover {
	display: none
}
.page-child h1 {
	font-size: 1em;
	text-align: center
}
.page-child main {
	background-color: #faf7f0
}
.page-child main {
	background-color: #faf7f0
}

/* Front Page */
.home #cover {
	overflow: hidden;
	position: fixed;
	transition: 1s;
	top: 0;
	left: : 0;
	width: 100%;
	height: 100%
}
.home #cover::before,
.home #cover::after {
	content: '';
	position: absolute;
	transition: 1s;
	top: 0;
	height: 100%;
	z-index: 1
}
.home #cover::before {
	animation: coverBefore 3s;
	background-color: #f2eada;
	left: 0;
	margin-top: -60px;
	width: 45%
}
.home #cover::after {
	animation: coverAfter 3s;
	background: url(image/cover.jpg) 100% 50% no-repeat;
	background-size: cover;
	left: 15%;
	width: 85%
}
.home #cover .thumbnail img {
	display: none
}
@keyframes coverAfter {
	0% { width: 100% } 100% { width: 85% }
}
@keyframes coverBefore {
	0% { height: 50% } 100% { height: 100% }
}
@keyframes coverThumbnail {
	0% { margin-bottom: -20% } 100% { margin-bottom: 0 }
}
.home .billboard {
	color: #fff
}
.home main nav {
	animation: mainNav 3s;
	background-color: #f2eada;
	box-sizing: border-box;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	margin: -60px 0 0;
	padding: 0;
	width: 85%;
	height: 60px;
	z-index: 1
}
@keyframes mainNav {
	  0% { margin-top:   0   }
	100% { margin-top: -60px }
}
.home main nav ul {
	margin: 2em 0
}
.home main nav li {
	display: block;
	overflow: hidden;
	text-align: center;
	font-size: .9em;
	float: left;
	margin-top: -28px;
	padding: 20px 0;
	width: 50%;
	height: 20px
}
.home main nav a {
	padding: 0
}
.home #information {
	margin-bottom: -20%;
}
.home #information::before {
	background-color: #faf7f0;
	content: "";
	position: absolute;
	transition: all 5s ease-out;
	top: 0;
	right: 0;
	width: 55%;
	height: 0%;
	z-index: -1
}
#information.active::before {
	height: 100%
}
#information.active .button {
	margin-bottom: 10em
}
.home #qa {
	position: relative
}
.home #qa::before {
	background-color: #faf7f0;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2
}

/* Fixed Page */
.page .qa > li:first-child  {
	padding: 0
}
.page .qa > li {
	padding-top: 10em;
	margin-bottom: -4em
}

/* Single Page */
.single main > section {
	padding-top: 20%
}
.single main > section .thumbnail img {
	animation: inherit;
	opacity: 1
}

/* Course Page */
#floor::before,
.troubles::before {
	background-color: #faf7f0;
	content: "";
	position: absolute;
	transition: all 2s ease-out;
	top: 0;
	right: 0;
	width: 0%;
	height: 100%;
	z-index: -1
}
#floor.active::before,
.troubles.active::before {
	width: 60%
}
.course > h3,
.troubles > h3 {
	text-align: center;
}
.course dl,
.troubles dl {
	overflow: hidden
}
.course img,
.troubles img {
	opacity: 1
}
.course img.active,
.troubles img.active {
	animation: none
}
.course .post {
	margin: 3em 0 6em
}
.course .post h5 {
	margin-top: 1em
}
.course .post .button {
	clear: none
}
.course .post .button a {
	margin-bottom: 2.5rem;
}
.course .post dt {
	border: solid 1px #654;
	border-radius: 5px;
	float: left;
	letter-spacing: .5rem;
	margin: 0 1rem 0 0;
	padding: .2rem 1rem .2rem 1.5rem;
	text-align: center
}
.course .post dd {
	margin: 0 0 1rem;
}
.course .post dd strong {
	font-size: 1.7em;
}
.course .post dd strong::before,
.course .post dd strong::after {
	font-size: .6em;
	font-weight: normal
}
.course .post dd:nth-child(2) strong::before {
	content: '約'
}
.course .post dd:nth-child(2) strong::after {
	content: '分 '
}
.course .post dd:nth-child(4) strong::before {
	content: ' ¥'
}
.course .post dd:nth-child(4) strong::after {
	content: '(税込) '
}
.course .post dd span {
	background-color: #a58866;
	border-radius: 100vh;
	color: #fff;
	display: block;
	font-size: .8em;
	float: left;
	margin: 3px 2px 3px 0;
	padding: .3rem .8rem
}
.troubles .column5 {
	border-radius: 6px;
	overflow: hidden;
}
.troubles .column span {
	background-color: rgba(51,34,17,.6);
	color: #fff;
	display: block;å
	line-height: 20px;
	margin-top: -30px;
	padding: 5px 10px;
	position: relative;
	white-space: nowrap
}
.troubles .column i {
	font-style: normal;
	display: none
}

/* Device Width
------------------------------ */
@media only screen and (min-height: 321px) {
	.home #cover .thumbnail img {
		animation: coverThumbnail 3s;
		background-size: cover;
		display: block;
		position: absolute;
		bottom: 0;
		left: 15%;
		width: 15%;
		z-index: 2
	}
	.home main nav,
	.home #information::before {
		width: 70%
	}
}
@media only screen and (min-height: 415px) {
	.home #cover .thumbnail img {
		width: 20%
	}
	.home main nav,
	.home #information::before {
		width: 65%
	}
}
@media only screen and (min-height: 569px) {
	.home #cover .thumbnail img {
		width: 25%
	}
	.home main nav {
		width: 60%
	}
	.home #information::before {
		width: 60%
	}
}
@media only screen and (min-width: 736px) {
	section {
		clear: both;
		margin: auto
	}
	article .content-left,
	section .content-left {
		float: left;
		width: 36%
	}
	article .content,
	section .content {
		float: right;
		width: 60%
	}
	.button a {
		font-size: 1em
	}
	.column .column3 {
		width: calc((100% - 6px * 2) / 3)
	}
	.column .column4 {
		width: calc((100% - 6px * 3) / 4)
	}
	.column .column5 {
		width: calc((100% - 6px * 3) / 4)
	}
	.column .column3:nth-child(2n),
	.column .column4:nth-child(2n),
	.column .column5:nth-child(3n) {
		margin-right: 6px;
	}
	.column .column3:nth-child(3n),
	.column .column4:nth-child(4n),
	.column .column5:nth-child(4n)	{
		margin-right: 0;
	}
	.billboard {
		font-size: 4em
	}
	.tight #colophon {
		box-shadow: 15px 15px #bfa68a;
	}
	.troubles .column i {
		display: inline-block
	}
	#colophon .column1 {
		width: calc((100% - 6px * 1) / 2)
	}
	#colophon .column1:nth-child(2n) {
		margin-right: 0
	}
	#colophon .column1:nth-child(2n) {
		float: right;
		margin-right: 0
	}
}
@media only screen and (min-width: 834px) {
	h2.title {
		margin-bottom: 3em
	}
	.alignright {
		float: right;
		margin: 0 0 2em 2em;
		width: 50%
	}
	.alignleft {
		float: left;
		margin: 0 2em 2em 0;
		width: 50%
	}
	.alignclear {
		margin-right: auto !important;
		margin-left: auto !important
	}
	.post {
		overflow: hidden
	}
	.post h3 {
		margin-top: 0
	}
	.post .thumbnail {
		float: left;
		width: 50%;
		margin-left: 0;
		margin-right: 2rem
	}
	.middle {
		width: 30% !important
	}
	main > section .thumbnail {
		margin: 1em auto
	}
}
@media only screen and (min-width: 1023px) {
	body {
		font-size: 14px
	}
	h1, h2, h3, h4, h5, h6 {
		margin: 2.4em 0 0
	}
	.thumbnail + h2,
	.thumbnail + h2 + h4,
	.thumbnail + h2 + h4 + p {
		margin: 1.6em 0 0
	}
	.post .thumbnail {
		width: 60%
	}
	.item li {
		width: calc(20% - 1%);
	}
	.item li:nth-child(4n) {
		margin-right: 1%
	}
	.item li:nth-child(5n) {
		margin-right: 0
	}
	.button {
		margin-left: 0
	}
	.panel .column2 span {
		margin: auto -1px
	}
	.panel .column2 {
		width: calc((100% - 0px * 1) / 2)
	}
	#spine::before  {
		width: 60%;
		height: 80px
	}
	#spine::after  {
		width: 40%;
		height: 80px
	}
	.scroll #spine::before  {
		display: block;
		background-color: #faf7f0;
	}
	.scroll #spine::after  {
		display: block;
		background-color: #fff;
	}
	#spine.active::before,
	#spine.active::before {
		background-color: #fff;
	}
	#menu,
	#contact a {
		font-size: 12px;
		top: 10px;
		right: 23px;
		transform: scale(1.2)
	}
	#menu {
		right: 10px
	}
	#logo a,
	.active #logo a {
		background-image: url(image/logo.png);
		background-size: 70px;
		padding: 80px 0 0;
		width: 80px
	}
	.scroll #logo a {
		display: block
	}
	#spine .button,
	.scroll #spine .button {
		transform: scale(.8) rotate(90deg);
		left: -7px;
		bottom: 116px
	}
	#cover::before {
		width: 40%
	}
	#cover::after {
		left: 20%
	}
	#cover .thumbnail img {
		margin-top: 0
	}
	.billboard {
		font-size: 5em;
		text-align: right;
		padding: 0 10%
	}
	main article,
	main section {
		padding-top 12%
	}
	.troubles .column span {
		font-size: 1.2em;
		margin-top: -54px;
		padding: 10px 20px 12px
	}
	.home main nav li {
		font-size: 1em
	}
	.home .alignright {
		display: block
	}
	.information {
		margin: -6em auto 2em
	}
	#colophon .column {
		margin: auto
	}
}
@media only screen and (min-width: 1100px) {
	#logo a {
		background-image: url(image/billboard.png);
		background-size: 100px;
		padding: 180px 0 0;
		width: 180px
	}
	#spine li a {
		padding-left: 15px
	}
	main > article,
	main > section,
	#cover > section {
		padding: 6% 10%
	}
}