@charset "utf-8";
/* CSS Document */
html {
font-size: 62.5%;
}
body {
width: 100%;
font-family:'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", "sans-serif";
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.1em;
line-height: 1.8em;
text-align: center;
color: #10181B;
background: url("../image/main_bg.jpg");
}
a {
display: inline-block;
cursor: pointer;
color: #10181B;
}
img {
width: 100%;
height: auto;
max-width: 100%;
vertical-align: bottom;
}
.of img{
-o-object-fit: contain;
   object-fit: contain;
font-family: 'object-fit: contain;';
}
/*Layout*/
.wrap {
width: 90%;
max-width: 1280px;
margin: auto;
}
.ttl-main,.ttl-sub{
font-family: 'Noto Serif JP','ヒラギノ明朝 Pro W3','Yu Mincho',"serif";
font-weight: bold;
line-height: 2em;
color: #70473F;
}
header {
position: relative;
overflow: hidden;
background: #190F0A;
}
.hero {
height: 100vh;
width: 100vw;
border-bottom: solid 16px #70473F;
border-collapse: separate;
overflow: hidden;
}
.hero img{
height: 100%;
-o-object-fit: cover;
   object-fit: cover;
-o-object-position: bottom left;
   object-position: bottom left;
}
.hero-icon {
position: absolute;
bottom: 36px;
left: 50%;
-webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
        transform: translate(-50%,0);
background: rgba(255,255,255,.6);
-webkit-animation: updown 3s infinite;
        animation: updown 3s infinite;
}
.hero-icon img{
width: auto;
}
@-webkit-keyframes updown {
0% {
-webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
}
50% {
-webkit-transform: translate(-50%,12px);
        transform: translate(-50%,12px)
}
100% {
-webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
}
}
@keyframes updown {
0% {
-webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
}
50% {
-webkit-transform: translate(-50%,12px);
        transform: translate(-50%,12px)
}
100% {
-webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
}
}
/*nav*/
.gnav {
padding: 16px;
background: url("../image/menu_bg.jpg") center no-repeat;
background-size: cover;
z-index: 998;
}
.nav_logo {
padding: 12px;
}
.navMenu_area {
text-align: left;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
padding: 16px;
margin: 24px auto;
}
.navMenu_area > a, .navMenu_area > p{
font-family: 'Noto Serif JP','ヒラギノ明朝 Pro W3','Yu Mincho',"serif";
margin-right: 16px;
color: #fff;
}
.nav_btn{
display: block;
padding: 16px;
border: solid 1px #fff;
-webkit-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
}
.icon{
-o-object-fit: contain;
   object-fit: contain;
vertical-align: baseline;
}
/*footer*/
footer {
background: #70473F;
color: #fff;
}
footer a{
padding: 4px 0;
-webkit-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
color: #fff;
}
footer > iframe{
display: block;
width: 100%;
height: 40vh;
-webkit-filter: grayscale(1);
        filter: grayscale(1);
}
.foo_logo {
margin: 24px 0;
}
.foo-nav a {
display: block;
}
.foo-nav a:nth-of-type(1) {
margin-bottom: 16px;
}
.foo-nav a:last-of-type {
margin-top: 16px;
}
.foot-copy{
padding: 8px 0;
font-size: 0.8em;
}

@media screen and (max-width: 560px){
.nav-sp {
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
padding: 8px;
background: url("../image/menu_bg.jpg");
z-index: 999;
}
.nav-sp_logo{
height: 40px;
width: auto;
}
.nav-sp_logo img{
height: 100%;
width: auto;
}
.navBtn {
position: relative;
width: 40px;
height: 40px;
}
.navBtn_line {
position: absolute;
width: 24px;
left: 8px;
border-bottom: solid 2px #FFF;
transition: .3s ease-in-out;
}
.navBtn_line:nth-child(1) {
top: 12px;
}
.navBtn_line:nth-child(2) {
top: 18px;
}
.navBtn_line:nth-child(3) {
top: 24px;
}
.navBtn.active .navBtn_line:nth-child(1) {
top: 18px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.navBtn.active .navBtn_line:nth-child(2),
.navBtn.active .navBtn_line:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*nav menu*/
.gnav{
position: absolute;
padding: 60px 16px;
width: 100%;
-webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
        transform: translateX(-100%);
transition: .5s ease-in-out;
}
.nav_logo img{
height: 120px;
width: auto;
}
.gnav.active{
-webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
        transform: translateY(0%);
}
}

@media screen and (min-width: 561px) {
.nav-sp {
display: none;
}
.gnav {
position: absolute;
top: 0;
right: 10%;
width: auto;
height: auto;
padding: 16px;
background: url("../image/menu_bg.jpg") center no-repeat;
background-size: cover;
z-index: 999;
}
.nav_logo img{
height: 200px;
width: auto;
}
}

@media (min-width:561px) and (max-width:959px){
}

@media screen and (max-width: 960px){
body{
font-size: 14px;
}
.hide-sp{
display: none;
}
.hide-pc{
display: block;
}
.wrap {
max-width: 600px;
}
.inner-t{
padding-top: 36px;
}
.inner-b{
margin-bottom: 36px;
}
.ttl-area{
margin-bottom: 36px;
}
.ttl-main{
font-size: 1.8em;
}
.ttl-sub{
font-size: 1.5em;
}
.icon{
width: auto;
height: 14px;
}
/*header*/
.hero-icon {
width: 48px;
height: 48px;
border-radius: 24px;
}
.hero-icon img{
height: 20px;
margin: 14px auto;
}
/*footer*/
.foo_logo img{
width: auto;
height: 56px;
}
}

@media screen and (min-width: 961px){
body {
font-size: 16px;
}
.hide-sp{
display: block;
}
.hide-pc{
display: none;
}
.ttl-main{
font-size: 2em;
}
.ttl-sub{
font-size: 1.4em;
}
.icon{
width: auto;
height: 16px;
}
/*header*/
.hero-icon {
width: 64px;
height: 64px;
border-radius: 32px;
}
.hero-icon img{
height: 24px;
margin: 20px auto;
}
/*nav*/
.nav_logo img{
height: 200px;
width: auto;
}
/*footer*/
.foo-main{
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.foo_logo img{
width: auto;
height: 80px;
}
.foo-address {
width: 75%;
}
.foo-nav {
width: 25%;
}
.foot-copy{
text-align: left;
}
/*hover animation*/
footer a:hover{
background: rgba(255,255,255,0.3);
}
.nav_btn:hover{
background: rgba(255,255,255,0.3);
}
}
@media (min-width:960px) and (max-width:1280px){
.inner-t{
padding-top: 48px;
}
.inner-b{
margin-bottom: 48px;
}
.ttl-area{
margin-bottom: 48px;
}
}
@media screen and (min-width: 1281px){
.inner-t{
padding-top: 60px;
}
.inner-b{
margin-bottom: 60px;
}
.ttl-area{
margin-bottom: 60px;
}
}