/* font */
@font-face {
    font-family: 'Soehne';
    src: url('fonts/soehne-web-leicht.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* selection */
::selection {
	color: #aa2f35;
}
::-moz-selection {
  color: #aa2f35;
}

/* pace */
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.pace-inactive {
	display: none;
}
.pace .pace-progress {
	background: #000;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}

/* common parts */
html {
	text-rendering: optimizeLegibility;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body {
	color: #000;
	background: #eeefe9;
	margin: 0 auto;
	font-family: 'Soehne', "游ゴシック", "Yu Gothic", YuGothic, sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	line-height: 1.6em;
}

.mobile{ display: none!important; }

a:link    { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover   { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 2px; }
a:active  { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 2px; }
a { outline: none; }

.btn{
	padding: 9px 0;
	font-size: 1.1rem;
	background-size: 100%;
	text-align: center;
    border: 1px solid #000;
}
a .btn{
	background-color: #000;
	color: #eeefe9;
	text-decoration: none;
}
a:hover .btn{
	background-color: #aa2f35;
	border: 1px solid #aa2f35;
	color: #eeefe9;
	text-decoration: none;
}

.maru {
	width: 1.8rem;
	height: 1.8rem;
	background-color: #000;
	border-radius: 50%;
	color: #eeefe9;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.7rem;
	letter-spacing: 0em;
	margin-left: 7vw;
}

.photo{
	width: 65%;
	box-shadow: inset 0 0 0.3vw 0 rgba(0.2, 0.2, 0.2, .05);
	padding: 0.5vw;
}
.photo img{
	width: 100%;
}

h1{
	width: 16vw;
	left: 0;
	bottom: 0;
	position: fixed;
}
h1 img{
	width: 100%;
}
h1 span{
	display: none;
}
h2.logojp{
	width: 6vw;
	left: 3vw;
	top: 3vw;
	position: fixed;
}
h2.logoen{
	width: 1.8vw;
	right: 3vw;
	top: 3vw;
	position: fixed;
}
h2 img{
	width: 100%;
}
h2 span{
	display: none;
}
h3 {
	font-size: 1.2rem;
	line-height: 1.5em;
	letter-spacing: 0.08em;
}
.klein{
	font-size: 1.2rem;
	line-height: 1.5em;
	letter-spacing: 0.08em;
}

.sns{
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	width: 18vw;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#contents{
	width: 92vw;
	margin: 4vw auto;
}
.content{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.mt{
	margin-top: 20vw;
}
.column22{
	width: 22.75vw;
}
.column46{
	width: 46.5vw;
}
.column70{
	width: 70.25vw;
}
.column100{
	width: 40vw;
	margin: 0 auto;
}
.column22 img, .column46 img, .column70 img {
	width: 100%;
}

@media screen and (max-width:1440px){
body {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	line-height: 1.4em;
}
h1{
	width: 20vw;
}
h2.logojp{
	width: 10vw;
}
h2.logoen{
	width: 2.5vw;
}
h3 {
	font-size: 1.1rem;
}
.klein{
	font-size: 1.1rem;
}
}

@media screen and (max-width:1024px){
body {
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	line-height: 1.4em;
}

a:link    { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover   { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 1px; }
a:active  { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 1px; }

.btn{
	padding: 5px 0;
	font-size: 0.9rem;
	background-size: 100%;
	text-align: center;
    border: 1px solid #000;
}

a:hover .btn{
	background-color: #aa2f35;
	border: 1px solid #aa2f35;
	color: #eeefe9;
	text-decoration: none;
}

.maru {
	width: 1.3rem;
	height: 1.3rem;
	font-size: 0.9rem;
	line-height: 1.3rem;
	margin-left: 2vw;
}

.photo{
	width: 80%;
	padding: 1vw;
}

h1{
	width: 24vw;
	left: 0;
	bottom: 0;
	position: fixed;
}
h2.logojp{
	width: 9vw;
	left: 2vw;
	top: 2vw;
	position: fixed;
}
h2.logoen{
	width: 3vw;
	right: 3vw;
	top: 3vw;
	position: fixed;
}
h3 {
	font-size: 0.9rem;
	line-height: 1.3em;
	letter-spacing: 0.08em;
}
.klein{
	font-size: 0.9rem;
	line-height: 1.3em;
	letter-spacing: 0.08em;
}

.sns{
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	width: 25vw;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#contents{
	width: 94vw;
	margin: 4vw auto;
}
.content{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.mt{
	margin-top: 16vw;
}
.column22{
	width: 22.75vw;
}
.column46{
	width: 46.5vw;
}
.column70{
	width: 70.25vw;
}
.column100{
	width: 50vw;
	margin: 0 auto;
}
.column22 img, .column46 img, .column70 img {
	width: 100%;
}
}

@media screen and (max-width:599px){
body {
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	line-height: 1.4em;
}

a:link    { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover   { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 1px; }
a:active  { color: #aa2f35; text-decoration: none; border-bottom: 1px solid #aa2f35; padding-bottom: 1px; }

.btn{
	padding: 5px 0;
	font-size: 0.9rem;
	background-size: 100%;
	text-align: center;
    border: 1px solid #000;
}

a:hover .btn{
	background-color: #aa2f35;
	border: 1px solid #aa2f35;
	color: #eeefe9;
	text-decoration: none;
}

.maru {
	width: 1.3rem;
	height: 1.3rem;
	font-size: 0.9rem;
	line-height: 1.3rem;
	margin: 0 0 15vw 24vw;
}

.photo{
	width: 70%;
	padding: 2vw;
}

h1{
	width: 40vw;
	margin: 0 0 0 2vw;
	position: inherit;
}
h2.logojp{
	width: 20vw;
	left: auto;
	right: 5vw;
	top: 5vw;
	position: absolute;
}
h2.logoen{
	width: 6vw;
	right: auto;
	left: 3vw;
	top: auto;
	bottom: 3vw;
	position: fixed;
}
h2 img{
	width: 100%;
}
h2 span{
	display: none;
}
h3 {
	font-size: 0.9rem;
	line-height: 1.3em;
	letter-spacing: 0.08em;
}
.klein{
	font-size: 0.9rem;
	line-height: 1.3em;
	letter-spacing: 0.08em;
}

.sns{
	position: fixed;
	bottom: 3vw;
	right: 3vw;
	width: 50vw;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#contents{
	width: 90vw;
	margin: 10vh auto 10vh;
}
.content{
	width: 100%;
	margin: 0 auto;
	display: inherit;
}
.mt{
	margin-top: 30vw;
}
.column22{
	width: 80%;
	margin-left: 20%;
}
.column46{
	width: 80%;
	margin-left: 20%;
}
.column70{
	width: 80%;
	margin-left: 20%;
}
.column100{
	width: 80%;
	margin: 0 auto;
}
.column22 img, .column46 img, .column70 img {
	width: 100%;
}

.ohne{
	display: none;
}
.mobilemt{
	margin-top: 15vw;
}
}