@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:960px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color:#a02808;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}



.pc{
display:none;
}
@media screen and (min-width:960px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
-webkit-text-size-adjust: 100%;
}
body.stop{
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}
@media screen and (min-width:960px) {
}
@media screen and (min-width:1200px) {
}



/* ==============================================
header
============================================== */

header{
position: absolute;
top: 16px;
left: 16px;
}
header p{
}
header p a{
}
header p a img{
width: 64rem;
}
header figure{
display: none;
}
header figure img{
}



@media screen and (min-width:1200px) {
header{
position: fixed;
top: 0;
left: 0;
width: calc(50% - 300px);
height: 100%;
overflow: hidden;
}
header::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 64px;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.32) 100%);
}
header p{
display: block;
position: absolute;
top: 0;
bottom: 360px;
left: 0;
right: 0;
width: 105px;
height: 32px;
margin: auto;
}
header p a{
}
header p a img{
width: 105px;
}
header figure{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 186px;
height: 240px;
margin: auto;
}
header figure img{
}
header .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/knp_cmn_bg-l.png");
background-size: 1280px auto;
transform: rotate(-12deg);
z-index: -1;
animation: header 32s linear 0s infinite normal forwards;
}
@keyframes header {
from { background-position: 1280px 0; }
to { background-position: 0 0; }
}
}



/* ==============================================
nav
============================================== */

nav{
}
nav .menu{
position: fixed;
top: 0;
right: 0;
z-index: 10;
}
nav .menu a{
display: block;
width: 60rem;
height: 64rem;
padding: 16rem 0 0 0;
text-align: center;
}
nav .menu a img{
width: 24rem;
}



nav #menu{
position: fixed;
top: 0;
right: -100%;
display: table;
width: 100%;
height: 100%;
overflow: hidden;
transition: 0.2s ease-out;
z-index: 10;
}
nav #menu.on{
right: 0;
}
nav #menu .inner{
display: table-cell;
vertical-align: middle;
}
nav #menu .inner p{
text-align: center;
}
nav #menu .inner p img{
width: 157rem;
}
nav #menu .inner p + ul{
margin: 40rem 0 0 0;
}
nav #menu .inner p + ul li{
}
nav #menu .inner p + ul li a{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 1.6rem;
font-weight: 700;
color: #FFF;
text-align: center;
display: block;
padding: 6rem 0;
}
nav #menu .inner p + ul + ul{
text-align: center;
margin: 32rem 0 0 0;
}
nav #menu .inner p + ul + ul li{
display: inline-block;
margin: 0 16rem;
}
nav #menu .inner p + ul + ul li a{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 1.6rem;
font-weight: 700;
color: #FFF;
text-align: center;
display: block;
}
nav #menu .inner p + ul + ul li:nth-child(2) a{
letter-spacing: 0;
}
nav #menu .inner p + ul + ul li a img{
width: 64rem;
display: block;
margin: 0 auto 4rem auto;
}
nav #menu .close{
position: absolute;
top: 0;
right: 0;
width: 60rem;
height: 64rem;
padding: 16rem 0 0 0;
text-align: center;
}
nav #menu .close a{
font-size: 24rem;
line-height: 32rem;
font-weight: 400;
color: #ffd79a;
text-align: center;
display: inline-block;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: #000000;
}
nav #menu .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/knp_cmn_bg-r.png");
background-size: 640rem auto;
transform: rotate(-12deg);
z-index: -1;
animation: nav 16s linear 0s infinite normal forwards;
}
@keyframes nav {
from { background-position: 640rem 0; }
to { background-position: 0 0; }
}



@media screen and (min-width:960px) {
nav{
position: fixed;
top: 0;
right: 0;
width: calc(100% - 600px);
height: 100%;
}
nav .menu{
display: none;
}
nav #menu{
position: absolute;
right: 0;
}
nav #menu::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.0) 100%);
}
nav #menu .inner p img{
width: 157px;
}
nav #menu .inner p + ul{
margin: 40px 0 0 0;
}
nav #menu .inner p + ul li a{
font-size: 17px;
line-height: 21px;
letter-spacing: 1.6px;
padding: 6px 0;
}
nav #menu .inner p + ul + ul{
margin: 32px 0 0 0;
}
nav #menu .inner p + ul + ul li{
margin: 0 16px;
}
nav #menu .inner p + ul + ul li a{
font-size: 13px;
line-height: 21px;
letter-spacing: 1.6px;
}
nav #menu .inner p + ul + ul li:nth-child(2) a{
letter-spacing: 0;
}
nav #menu .inner p + ul + ul li a img{
width: 64px;
margin: 0 auto 4px auto;
}
nav #menu .close{
display: none;
}
nav #menu .bg{
background: url("../images/knp_cmn_bg-r.png");
background-size: 1280px auto;
animation: nav 32s linear 0s infinite normal forwards;
}
@keyframes nav {
from { background-position: 1280px 0; }
to { background-position: 0 0; }
}
}



@media screen and (min-width:1200px) {
nav{
width: calc(50% - 300px);
}
}




/* ==============================================
main
============================================== */

main{
max-width: 100%;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
main{
max-width: 600px;
}
}
@media screen and (min-width:1200px) {
main{
margin: auto;
}
}



/* ==============================================
#hero
============================================== */

#hero{
background: #fff7d2 url("../images/knp_hr_bg.png") top no-repeat;
background-size: 100% auto;
padding: 0 0 40rem 0;
}
#hero .inner{
}
#hero .inner h1{
text-align: center;
padding: 48rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:1200px) {
#hero .inner h1{
padding: 32rem 0 16rem 0;
}
}
#hero .inner h1 img{
width: 314rem;
}
#hero .inner figure{
text-align: right;
margin: 20rem 16rem 0 0;
}
#hero .inner figure img{
width: 198rem;
}
#hero .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #a02808;
text-align: center;
position: relative;
margin: 12rem 0 0 0;
z-index: 1;
}
#hero .inner .image{
position: relative;
height: 124rem;
margin: -8rem 0 0 0;
}
#hero .inner .image .image-01{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 124rem;
background: url("../images/knp_hr_img-01.png");
background-size: 375rem 124rem;
}
#hero .inner .image .image-02{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 124rem;
background: url("../images/knp_hr_img-02.png");
background-size: 576rem 124rem;
animation: image-02 32s linear 0s infinite normal forwards;
}
@keyframes image-02 {
from { background-position: 576rem 0; }
to { background-position: 0 0; }
}
#hero .inner .image .image-03{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 124rem;
background: url("../images/knp_hr_img-03.png");
background-size: 375rem 124rem;
animation: image-03 16s linear 0s infinite normal forwards;
}
@keyframes image-03 {
from { background-position: -375rem 0; }
to { background-position: 0 0; }
}



/* ==============================================
#profile
============================================== */

#profile{
background: #ffd79a url("../images/knp_prf_bg.png") top no-repeat;
background-size: 100% auto;
padding: 0 0 64rem 0;
}
#profile .inner{
position: relative;
}
#profile .inner h2{
text-align: center;
padding: 96rem 0 20rem 0;
}
#profile .inner h2 img{
width: 211rem;
}
#profile .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #501404;
text-align: justify;
margin: 8rem 24rem 0 24rem;
}
#profile .inner figure{
position: relative;
margin: 28rem 0 0 0;
z-index: 1;
}
#profile .inner figure img{
}
#profile .inner .bg-01{
position: absolute;
bottom: 0;
left: 0;
}
#profile .inner .bg-01 img{
}
#profile .inner .bg-02{
position: absolute;
bottom: 0;
right: 0;
}
#profile .inner .bg-02 img{
}
#profile .inner ul{
}
#profile .inner ul li{
}
#profile .inner ul li a{
position: absolute;
z-index: 1;
}
#profile .inner ul li.profile-01 a{
bottom: 350rem;
right: 24rem;
}
#profile .inner ul li.profile-02 a{
bottom: 240rem;
left: 16rem;
}
#profile .inner ul li.profile-03 a{
bottom: 190rem;
right: 32rem;
}
#profile .inner ul li.profile-04 a{
bottom: -20rem;
left: 24rem;
}
#profile .inner ul li.profile-05 a{
bottom: 50rem;
right: 24rem;
}
#profile .inner ul li a img{
width: 104rem;
filter: drop-shadow(4rem 8rem 2rem rgba(160,80,0,0.32));
}



#profile .inner ul li .profile{
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/knp_prf_bg.jpg") center;
background-size: auto 100%;
transition: 0.2s ease-out;
z-index: -1;
opacity: 0;
pointer-events: none;
cursor: auto;
}
@media screen and (min-width:960px) {
#profile .inner ul li .profile{
max-width: 600px;
}
}
@media screen and (min-width:1200px) {
#profile .inner ul li .profile{
right: 0;
margin: auto;
}
}
#profile .inner ul li .profile.on{
opacity: 1;
z-index: 100;
cursor: pointer;
pointer-events: auto;
}
#profile .inner ul li .profile .profile-inner{
display: table-cell;
vertical-align: middle;
}
#profile .inner ul li .profile .profile-inner div{
position: relative;
background: #fff;
border: solid 8rem #000;
border-radius: 32rem;
margin: 0 24rem;
padding: 0 16rem 20rem 16rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
@media screen and (max-height:800px) {
#profile .inner ul li .profile .profile-inner div{
border: solid 8px #000;
border-radius: 32px;
margin: 0 96px;
padding: 0 24px 32px 24px;
}
}
}
#profile .inner ul li .profile .profile-inner div::after{
content: "×";
font-size: 24rem;
line-height: 32rem;
font-weight: 400;
color: #ffd79a;
text-align: center;
display: block;
width: 32rem;
height: 32rem;
border-radius: 16rem;
background: #000000;
position: absolute;
top: 12rem;
right: 12rem;
}
#profile .inner ul li .profile .profile-inner div h3{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 1.6rem;
font-weight: 900;
color: #501404;
text-align: center;
padding: 32rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
@media screen and (max-height:800px) {
#profile .inner ul li .profile .profile-inner div h3{
font-size: 25px;
line-height: 33px;
letter-spacing: 1.6px;
padding: 32px 0 0 0;
}
}
}
#profile .inner ul li .profile .profile-inner div h3 img{
width: auto;
height: 128rem;
display: block;
margin: 0 auto 20rem auto;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
@media screen and (max-height:800px) {
#profile .inner ul li .profile .profile-inner div h3 img{
height: 128px;
margin: 0 auto 20px auto;
}
}
}
#profile .inner ul li .profile .profile-inner div p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #501404;
margin: 8rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:960px) {
@media screen and (max-height:800px) {
#profile .inner ul li .profile .profile-inner div p{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
margin: 16px 0 0 0;
}
}
}



/* ==============================================
#town
============================================== */

#town{
background: #ffda00 url("../images/knp_twn_bg.png") bottom no-repeat;
background-size: 100% auto;
}
#town .inner{
}
#town .inner h2{
padding: 0 0 12rem 0;
}
#town .inner h2 img{
}
#town .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #a02808;
text-align: center;
margin: 8rem 0 0 0;
}



#town .inner #hotspot{
position: relative;
margin: 32rem 0 0 0;
padding: 75rem 0 0 0;
}
#town .inner #hotspot h3{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#town .inner #hotspot h3 img{
}



#town .inner #hotspot .slider{
position: relative;
overflow: hidden;
background: #ffda00;
border: solid 8rem #fff;
border-radius: 32rem;
margin: 0 24rem;
}



#town .inner #hotspot .slider .slick-dots {
position: absolute;
bottom: 16rem;
display: block;
width: 100%;
padding: 0;
text-align: center;
}
#town .inner #hotspot .slider .slick-dots li {
position: relative;
display: inline-block;
width: 16rem;
height: 16rem;
}
#town .inner #hotspot .slider .slick-dots li button {
display: block;
width: 8rem;
height: 8rem;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
#town .inner #hotspot .slider .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 8rem;
height: 8rem;
background: #fff;
border-radius: 4rem;
content: ' ';
}
#town .inner #hotspot .slider .slick-dots li.slick-active button:before {
background-color: #000;
}
#town .inner #hotspot .slider .slick-prev,
#town .inner #hotspot .slider .slick-next {
font-size: 0;
line-height: 0;
display: block;
position: absolute;
top: 128rem;
padding: 0;
width: 35rem;
height: 32rem;
cursor: pointer;
border: none;
outline: none;
z-index: 1;
background: url("../images/knp_twn_arw.png");
background-size: 35rem 32rem;
}
#town .inner #hotspot .slider .slick-prev{
left: 8rem;
transform: scale(-1, 1);
}
#town .inner #hotspot .slider .slick-next{
right: 8rem;
}



#town .inner #hotspot .slider .slick-slide{
float: left;
padding: 0 24rem 48rem 24rem;
}
#town .inner #hotspot .slider .slick-slide figure{
padding: 32rem 0 0 0;
}
#town .inner #hotspot .slider .slick-slide figure img{
}
#town .inner #hotspot .slider .slick-slide h4{
font-size: 17rem;
line-height: 21rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #a02808;
text-align: center;
margin: 24rem 0 0 0;
}
#town .inner #hotspot .slider .slick-slide p{
font-size: 13rem!important;
line-height: 21rem!important;
letter-spacing: 0.4rem!important;
font-weight: 700;
color: #a02808;
text-align: justify;
margin: 8rem 0 0 0;
}



#town .inner #hotspot + figure{
position: relative;
margin: -28rem 0 0 0;
z-index: 1;
}
#town .inner #hotspot + figure img{
}



/* ==============================================
#sns
============================================== */

#sns{
background: #ffd79a;
padding: 0 0 60rem 0;
}
#sns .inner{
}
#sns .inner h2{
text-align: center;
}
#sns .inner h2 img{
width: 99rem;
}
#sns .inner ul{
text-align: center;
margin: 32rem 0 0 0;
}
#sns .inner ul li{
display: inline-block;
margin: 0 28rem;
}
#sns .inner ul li a{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 1.6rem;
font-weight: 700;
color: #a02808;
text-align: center;
display: block;
}
#sns .inner ul li:nth-child(2) a{
letter-spacing: 0;
}
#sns .inner ul li a img{
width: 64rem;
display: block;
margin: 0 auto 4rem auto;
}



/* ==============================================
footer
============================================== */

footer{
background: #fff7d2;
padding: 0 0 32rem 0;
}
footer figure{
}
footer figure img{
}
footer p{
font-size: 10rem;
line-height: 18rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #501404;
text-align: center;
margin: 28rem 0 0 0;
}



@media screen and (min-width:960px) {
footer{
max-width: 600px;
}
}



@media screen and (min-width:1200px) {
footer{
margin: auto;
}
footer p{
position: fixed;
top: 320px;
bottom: 0;
left: 0;
margin: auto;
width: calc(50% - 300px);
height: 16px;
font-size: 10px;
line-height: 18px;
letter-spacing: 0.4px;
color: #fff;
}
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(16rem);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-16rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-16rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(16rem);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8,0.8);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}



.pon {
animation-name: pon;
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(0.7);
}
20% {
opacity: 1;
transform: scale(1.2);
}
40% {
opacity: 1;
transform: scale(0.8);
}
60% {
opacity: 1;
transform: scale(1.1);
}
80% {
opacity: 1;
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}