@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');

html {
font-size: 100%;/*16px*/
line-height: 2;/*32px*/
color: black;
-webkit-text-size-adjust: 100%;
background-color:white;
font-family: ten-mincho-text, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: 400;
letter-spacing:.125em;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

body, ul, ol, dl, dd,tr,th,td,blockquote,footer{
margin: 0;
padding: 0;
}

img {
max-width: 100%;
height: auto;
}

img,iframe {
vertical-align: bottom;
}

/* -- contents -- */

.contents,.contents_mini{
margin: 0 auto;
}

.contents {
width: 91.6666%;
padding: 3em 0;
}

.contents section {
margin: .75em 0;
}

.contents_mini {
width: 83.3333%;
}

.width_sp91,
.width_sp91r{
width: 91.6666%;
}

.width_sp91r{
margin-left:auto;
}

/* -- google video -- */

.google,.video{
position: relative;
width: 100%;
padding-top: 56.25%;
}

.google iframe,
.video video{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

/* --com---*/

#com dl{
padding:1.5em 0;
border-bottom:.0125em solid gray;
}

#com section dl:last-child{
border-bottom:none;
}

#com dt,#com dd{
margin:0 2.08333%;
}

#com dt{
float:left;
text-align:center;
width:30.3333%;
}

#com dd {
overflow:hidden;
width:60.8333%;
}

#com dd li{
list-style:none;
}

/* -- font -- */

h1,h2,h3 {
font-weight:400;
}


h1 {
font-size: 250%;/*40px*/
line-height: 1.2;/*48px*/
}
h2 {
font-size: 200%;/*32px*/
line-height: 1.5;/*48px*/
}
h3 {
font-size: 150%;/*24px*/
line-height: 1.3333;
}

a {
color: black;
text-decoration: none;
background: transparent;
}

.eng {
font-family: EB Garamond,serif;
letter-spacing: .125em;
padding-right:-.125em;
}

.small {
font-size: 75%;
}

.big {
font-size: 150%;
}

.text_r,a.text_r{
text-align: right;
}
a.text_r{
display: block;
}

.title{
text-align: center;
}

/* -- color -- */


.red{
color: #a51f24;
}

.b_black,.b_black a{
background-color: black;
}
.b_white,.b_white a{
background-color: white;
}
.b_beige{
background-color: #ecece8;
}

.b_black,.b_black a{
color: white;
}


/* -- img -- */

.bg_img{
width: 100%;
height:auto;
}

.pc {
display:none;
}

.sp {
display:block;
}

/* ----- cta ----- */

a.cta{
text-align:center;
padding:.75em 4.1666%;
font-size:125%;
display:block;
-webkit-transition: color .3s, background-color .3s, box-shadow .3s, -webkit-transform .3s;
transition: color .3s, background-color .3s, box-shadow .3s, transform .3s;
}

a.cta:hover {
background-color:white;
color:black;
box-shadow:none;
-webkit-transform: translateY(.125em);
transform: translateY(.125em);
}

.cta:active {
transition-duration: .1s;
}


/* ----- waku ----- */

.waku{
box-sizing: border-box;
padding: 1.5em 4.1666%;
}

.waku>h1,.waku>h2,.waku>h3,
.waku>.hide>h1,.waku>.hide>h2,.waku>.hide>h3{
margin-top:-.5em;
}

.waku>p,.waku>.hide>p{
margin-top:0;
}

/*--col--*/

.col2>li,.col3>li, .col4>li{
margin: 3em 2.5%;
list-style: none;
box-sizing: border-box;
position:relative;
}

.col2,.col3,.col4{
margin:0 -2.5%;
}

.col2>li img,
.col3>li img,
.col4>li img{
width: 100%;
}

.col3>li{
width: 28.3333%;
float:left;
display: flex;
justify-content: center;
align-items: center;
}


/*--float_kiji--*/

.float_l, .float_r{
overflow:hidden;
}

.float_l_kiji, .float_r_kiji {
padding: 1.5em 4.1666%;
box-sizing:border-box;
position:relative;
margin-top: -1.5em;
}
.float_l_kiji p br, .float_r_kiji p br {
display: none;
}
.float_l_img, .float_r_img{
position:relative;
}
.float_l_img img, .float_r_img img {
width: 100%;
}


.float_l_img.waku,
.float_r_img.waku{
padding:1.5em 8.3333%;
}


/* ----- anime ----- */

.anime_line_right,
.anime_line_left{
position: relative;

}

.anime_line_right:after,
.anime_line_left:after {
display: inline;
content: '';
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #E7EAE1;
}

.anime_line_right .hide,
.anime_line_left .hide {
-webkit-transition: all 0s 1.75s ease;
-moz-transition: all 0s 1.75s ease;
transition: all 0s 1.75s ease;
opacity: .75;
}
.anime_line_right.on .hide,
.anime_line_left.on .hide{
opacity: 1;
}

.anime_line_right.on:after{
-webkit-animation: anime_line_right 1.75s ease .875s 1 normal both running;
animation: anime_line_right 1.75s ease .875s 1 normal both running;
}

@-webkit-keyframes anime_line_right {
0% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(0);
}
50% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(1);
}
50.001% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(1);
}
100% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(0);
}
}
@keyframes anime_line_right {
0% {
transform-origin:left center;
transform:scaleX(0)
}
50% {
transform-origin:left center;
transform:scaleX(1)
}
50.001% {
transform-origin:right center;
transform:scaleX(1)
}
100% {
transform-origin:right center;
transform:scaleX(0)
}
}
.anime_line_left.on:after {
-webkit-animation: anime_line_left 1.75s ease .875s 1 normal both running;
animation: anime_line_left 1.75s ease .875s 1 normal both running;
}

@-webkit-keyframes anime_line_left {
0% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(0);
}
50% {
-webkit-transform-origin:right center;
-webkit-transform:scaleX(1);
}
50.001% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(1);
}
100% {
-webkit-transform-origin:left center;
-webkit-transform:scaleX(0);
}
}
@keyframes anime_line_left {
0% {
transform-origin:right center;
transform:scaleX(0)
}
50% {
transform-origin:right center;
transform:scaleX(1)
}
50.001% {
transform-origin:left center;
transform:scaleX(1)
}
100% {
transform-origin:left center;
transform:scaleX(0)
}
}

.anime_fadein{
  transform:translatey(3em);
  opacity:.75;
  transition:opacity 2s,transform 1.25s;
}

.anime_fadein.on{
  opacity:1;
  transform:translateX(0);
}

.anime_fadeindown,.fixed{
-webkit-animation-name: fadeindown;
animation-name: fadeindown;
}

.anime_fadeindown{
-webkit-animation-duration:2s;
animation-duration:2s;
}

.fixed {
position: fixed !important;
display: block !important;
top: 0;
-webkit-animation-duration:1s;
animation-duration:1s;
visibility: visible !important;
}

@-webkit-keyframes fadeindown {
 0% { opacity: .75; -webkit-transform: translateY(-3em); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeindown {
 0% { opacity: .75; transform: translateY(-1em); transform: translateY(-3em); }
 100% { opacity: 1; transform: translateY(0); transform: translateY(0); }
}

/* --selection---*/

::selection {
background: #deded7;
}
::-moz-selection {
background: #deded7;
}

/*---header---*/

#header {
z-index: 9998;
position: fixed;
box-sizing: border-box;
width:100%;
}

@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}

.header_pc{
margin:0 auto;
width:83.3333%;
}

#logo,.header_pc{
position: relative;
}

#logo {
padding:.75em 0;
}

#logo img{
width:45%;
opacity:0;
}

#drawer_menu {
display: none;
text-align:center;
}

#drawer_menu li {
float: left;
width:100%;
list-style: none;
}

#drawer_menu li a i{
margin-right:.5em;
}


#drawer_menu.block{
display: block;
}

#drawer_menu li a{
display: block;
background-color: #E7EAE1;
padding:.75em;
box-sizing:border-box;
color:black;
border-bottom: 1px solid white;
}

#drawer_menu li a:hover{
background-color: black;
color: white;
}

#drawer_menu li:last-child a{
border-bottom:none;
}

/**menu_btn**/

#menu_btn {
position: absolute;
width: 8.3333%;
top:50%;
right:0;
z-index: 9990;
}

#menu_btn span,
#menu_btn span:before,
#menu_btn span:after {
cursor: pointer;
border-radius: .5em;
height: .25em;
width: 100%;
background-color: white;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#menu_btn span:before {
top: -.75em;
}
#menu_btn span:after {
bottom: -.75em;
}
#menu_btn.active span {
background-color: transparent;
}
#menu_btn.active span:before, #menu_btn.active span:after {
top: 0;
}
#menu_btn.active span:before {
transform: rotate(45deg);
}
#menu_btn.active span:after {
transform: rotate(-45deg);
}

/**--fixed header--**/

#header.fixed #logo img{
opacity:1;
}

#header.fixed {
animation-name: fadein;
animation-duration: .5s;
}

#header.fixed #drawer_menu li a{
color:black;
}

#header.fixed #menu_btn span,
#header.fixed #menu_btn span:before,
#header.fixed #menu_btn span:after{
background-color: black;
}

#header.fixed #menu_btn.active span {
background-color: transparent;
}


/* --- top --- */

#top_slide{
background-position:center bottom;
text-align:center;
position:relative;
}

#top_slide h1{
margin:0;
}

#top_slide img{
width:47.5%;
}

#top_slide a{
width: 100%;
display:block;
padding:35vh 0;
}

#top_slide a,.click {
  color:white;
}

.click span {
  position:absolute;
  left: 50%;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin-left: -.5em;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;

}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

/* --access---*/

#copy,#footer_s{
text-align:center;
}

#footer{
width:91.6666%;
margin:0 auto;
padding:3em 0;
}

#footer_map{
margin-bottom:1.5em;
}

#copy{
font-size:75%;
font-weight:300;
}

/*--clear--*/

#drawer_menu:after,
#footer:after,#com dl:after,

.contents:after,
.col2:after,.col2_half:after,.col3:after, 

.float_r:after,.float_r_image:after,
.float_l:after,.float_l_image:after{
display: block;
clear: both;
content: ''
}

@media screen and (min-width:480px) {
.contents {
width: 83.3333%;
}



#mail th,#mail td{
display:table-cell;
}

#mail table th{
width: 30%;
color: white;
}

#mail table br{
display:inline-block;
}

#mail table strong{
margin-left:0;
}
}

@media screen and (min-width:640px) {
.col2>li,.col4>li{
float: left;
width:45%;
}
}

@media screen and (min-width:960px) {
.eng {
letter-spacing:.25em;
padding-right:-.25em;
}

#header{
padding:1.5em 0;
}

.header_pc {
width: 83.3333%;
}

#logo{
padding:0;
}

#logo img{
width: 25%;
}

#drawer_menu{
position: absolute;
right: 0;
top: -.5em;
font-size:1.25em;
display:block;
}

#header.fixed {
background-color: rgba(255,255,255,.75);
}

#drawer_menu li {
width:auto;
}

#drawer_menu li a,
#drawer_menu li a:hover{
background-color:transparent;
}

#drawer_menu li a{
border-bottom:none;
color: white;
}

#drawer_menu li a:hover{
color: #B25959 !important;
}

#menu_btn,.sp{
display:none;
}

.click{
bottom: -6em;
}

.header_pc {
width: 83.3333%;
margin: 0 auto;
position: relative;
}

#footer{
width:83.3333%;
margin:0 auto;
}

#footer_map,#footer_s{
float:left;
}

#footer_map{
width:42.5%;
margin-bottom:0;
}

#footer_s{
width:50%;
margin-left:7.5%;
}

.width_sp91,
.width_sp91r{
width: auto;
}

.waku>h1,.waku>h2,.waku>h3,
.waku>.hide>h1,.waku>.hide>h2,.waku>.hide>h3{
margin-top:0;
}


.float_l_img, .float_r_img{
width: 45% !important;
}

.float_l_kiji,.float_r_img{
float: right;
}
.float_r_kiji,.float_l_img{
float: left;
}

.float_l_kiji, .float_r_kiji {
width:55% !important;
padding:4.1666%;
margin-top: 0;
}

.float_l_kiji{
padding: 3em 4.1666% 3em 8.3333%;
}

.float_r_kiji {
padding: 3em 8.3333% 3em 4.1666%;
}

.anime_line_right .hide,
.anime_line_left .hide {
-webkit-transition: all 0s 1.5s ease;
-moz-transition: all 0s 1.5s ease;
transition: all 0s 1.5s ease;
}

.anime_line_right.on:after{
-webkit-animation: anime_line_right 1s ease 2s 1 normal both running;
animation: anime_line_right 1s ease 1s 1 normal both running;
}
.anime_line_left.on:after {
-webkit-animation: anime_line_left 1s ease 2s 1 normal both running;
animation: anime_line_left 1s ease 1s 1 normal both running
}

.anime_fadein{
  transition:opacity 1s,transform .75s;
}
.anime_fadeindown{
-webkit-animation-duration:1s;
animation-duration:1s;
}
}

@media screen and (min-width:1280px) {
html {
font-size: 125%;/*20px*/
}
.contents {
width: 75%;
}
}

@media screen and (min-width:1600px) {
#footer,.header_pc {
width: 75%;
}
.contents{
width: 66.6666%;
}
#drawer_menu li a, #drawer_menu li a:visited {
padding: .75em;
}

}

@media screen and (min-width:1900px) {
#footer,.header_pc {
width: 66.6666%;
}
#footer{
padding:6em 0;
}
.contents{
width: 50%;
}

.float_l_img.waku,
.float_r_img.waku{
padding:3em 16.6666%;
}


.float_l_kiji{
padding: 6em 4.1666% 6em 16.6666%;
}
.float_r_kiji {
padding: 6em 16.6666% 6em 4.1666%;
}
}

/*IE*/
@media all and (-ms-high-contrast: none) {
body {
font-family: Meiryo, sans-serif;
}
}