@charset "utf-8";

html {
	font-size: 15px;
}
@media only screen and (max-width:640px){
	html {
		font-size: 25px;
	}
}


/* main */

.main {
	position: relative;
    width: 100%;
    height:100vh;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.main > div {
    width: 100%;
    height:100vh;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    position:absolute; top:0; left:0; right:0;
}
.main > div:after {
    content: "";
    width: 100%;
    height:100vh;
    position:absolute; top:0; left:0;
    background: linear-gradient(25deg, rgba(190,145,100, 0.6), rgba(137,130,125, 0.6));
}
.main h2 {
    width:100%;
    height:620px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center; flex-direction:column;
    font-size: 4rem;
    font-family: 'Kaisei Tokumin', serif;
    font-weight: 500;
    color: #fff;
    text-align:center;
    line-height: 1.3;
    text-shadow: 1px 1px 10px #585250;
    position:relative;
    z-index: 1;
    background:url("../img/waku.svg") center no-repeat;
    background-size: contain;
}
.main h2 b {
    width:50%;
    margin: 20px 0 0;
    font-size: 2rem;
    font-family: 'Dancing Script', cursive;
    font-weight: 400;
    letter-spacing: 0;
    position:relative;
}
.main h2 span {
    display: block;
    mix-blend-mode:difference;
}
.main h2 small {
    margin:8px 0;
    font-size: 1.1rem;
    font-weight:500;
    font-family: YakuHanMP, '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'Noto Serif JP', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
    line-height: 1.5;
    letter-spacing: 0.15rem;
}

@media only screen and (max-width:640px){
    
    .main h2 {
        height:682px;
        font-size: 2rem;
        line-height: 1.7;
        background:url("../img/waku-sp.svg") center no-repeat;
    }
    .main h2 b {
        font-size: 1.1rem;
        line-height: 1.8;
    }
    .main h2 small {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
        letter-spacing: 0.1rem;
    }
}




/* slide */

.slide {
    width: 100%;
    height:100%;
    position:absolute; top:0; left:0; right:0;
    margin: 0;
    padding:0;
    z-index: -1;
}
.slide .item {
    height: 100%;
    position: relative;
}
.slide .item img {
    height:100%;
    margin:auto;
    position:absolute; top:0; bottom:0; right:0; left:0;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
    height:100%;
    position:relative;
}
.slide-animation {
    animation: fadezoom 10s 0s forwards;
}
@keyframes fadezoom {
      0% {transform:scale(1.1);}
    100% {transform:scale(1.2);}
}

@media only screen and (max-width:640px){
}



/* about */

.about {
    width:100%;
    margin:0 auto;
    padding: 150px 0 0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    background: linear-gradient(25deg, rgba(70,48,47, 1), rgba(35,25,25, 1));
}
.about h3 {
    width:100%;
    margin: 0 0 30px;
    text-align: center;
}
.about h3 div {
    font-size:2.8rem;
    color:#fff;
    line-height: 1.7;
}
.about h3 small {
    font-size: 1.5rem;
    font-family: 'Dancing Script', cursive;
    color: #be9b53;
}
.about p {
    color:#fff;
}
.about img {
    max-width:100%;
    margin: 80px auto 0;
    display:block;
}

@media only screen and (max-width:640px){

    .about {
        padding:70px 0 0;
    }
    .about h3 {
        margin: 0 0 30px;
    }
    .about h3 div {
        font-size:1.5rem;
    }
    .about h3 small {
        font-size: 1.3rem;
    }
    .about p {
        width:80%;
    }
    .about img {
        margin:50px auto 0;
    }
}



/* point */

.point {
    width:100%;
    padding:150px 0;
}
.point > div {
    width:100%;
    margin: 0 auto;
    padding:0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;
}
.point > div img {
    max-width:50%;
    margin: 0;
}
.point > div > div {
    width:45%;
    margin: 0;
    padding:0;
}
.point > div h3 {
    padding: 80px 0 0;
    font-size: 1.8rem;
    position:relative;
}
.point > div h3:after {
    content: "";
    position:absolute; top:0; left:0;
    font-size: 2rem;
    font-family: 'Dancing Script', cursive;
    color: #be9b53;
}
.point > div:nth-of-type(1) h3:after { content: "Point 01";}
.point > div:nth-of-type(2) h3:after { content: "Point 02";}
.point > div:nth-of-type(3) h3:after { content: "Point 03";}
.point > div:nth-of-type(4) h3:after { content: "Point 04";}
.point > div:nth-of-type(5) h3:after { content: "Point 05";}
.point > div p {
    width:100%;
    margin: 10px 0 0;
	font-size: 1rem;
}

@media only screen and (min-width:641px){
    
    .point > div:nth-child(even) > div {
        width:40%;
        padding-left:4%;
    }
    .point > div:nth-child(even) img { order:2;}
    .point > div:nth-child(even) > div { order:1;}
}

@media only screen and (max-width:640px){

    .point {
        padding:0 0 100px;
    }
    .point > div {
        display:flex; flex-flow:row wrap; justify-content:center;
    }
    .point > div img {
        max-width:90%;
        margin: 80px 0 15px;
    }
    .point > div h3 {
        padding: 100px 0 0;
    }
    .point > div > div {
        width:80%;
        margin: 0;
        padding:0;
    }
    .point > div p {
        letter-spacing:0.1rem;
    }
}



/* fair */

.fair {
    width:100%;
    margin: 0 auto;
    padding:150px 0;
    background:url("../img/fair.jpg") center no-repeat fixed;
    background-size: cover;
    position: relative;
}
.fair:after {
    content: "";
    width: 100%;
    height:100%;
    position:absolute; top:0; left:0;
    background: linear-gradient(25deg, rgba(190,145,100, 0.6), rgba(137,130,125, 0.6));
}
.fair > div {
    position: relative;
    z-index: 1;
}
.fair h3 {
    width:100%;
    margin: 0 auto 30px;
    font-size: 2.8rem;
    font-family: 'Kaisei Tokumin', serif;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.6;
    text-shadow: 1px 1px 10px #222;
}
.fair h3 span {
    margin: 10px 0 0;
    display:block;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing:0;
}
.fair a {
    width:300px;
    margin:0 auto;
    padding: 10px 0;
    display:block;
    color: #fff;
    text-align:center;
	text-decoration: none;
    border:solid 1px #222;
    background: #222;
}
.fair a:hover {
    opacity: 1;
    color: #222;
    letter-spacing: 0.2rem;
    background: #be9b53;
}

@media only screen and (max-width:640px){

    .fair {
        background:url("../img/fair-sp.jpg") center no-repeat;
        background-size: cover;
    }
    .fair h3 {
        font-size: 1.5rem;
        line-height: 1.6;
        letter-spacing: 0.05rem;
    }
    .fair h3 span {
        font-size: 1.1rem;
    }
    .fair a {
        width:300px;
        margin:0 auto;
        padding: 10px 0;
        display:block;
        color: #fff;
        text-align:center;
        border:solid 1px #222;
        background: #222;
    }
}



/* くるくる回るテキスト */

.rollAnime.roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}