@charset "utf-8";

body{  position: relative;   font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 18px; color: #231815; word-break: break-all; letter-spacing: 0.08em; }

.en{ font-family: "Cinzel", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;}

p{ line-height: 2.5;}

a{  text-decoration: none; color: inherit;transition: letter-spacing 0.3s;

    &:hover{ 
        opacity: 0.8;
        letter-spacing: 0.2em;
    }
}

img{ vertical-align: bottom; max-width: 100%; height: auto; text-align: center;}
figure{ position: relative;}
section{ position: relative;}
.ftlogo{ text-align: center; padding-top: 150px;}

.flexBox{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.content{ max-width: 100%; position: relative; z-index: 2; padding:  0 20px; margin: 0 auto; }

.sp_only{ display: none;}
.pc_only{ display: block;}

.inView{ will-change: opacity, transform;}
.inView.is-view{ will-change: auto;}

@media (max-width: 768px){
    body{ font-size: 15px;}
    p{ line-height: 2;}
    figure{ margin: 0 auto;}
    img{ text-align: center; display: block; margin: 0 auto;}
    .sp_only{ display: block;}
    .pc_only{ display: none;}
    section{ padding: 128px 0;}
    .btn{ margin-top: 30px;}
    
    section{ padding: 80px 0 ;}
    .ftlogo{  max-width: 200px; margin: 0 auto; padding: 0 0 50px;}
    
}

/* Animate */
.fade-in {
    opacity: 0;
    transition: opacity 2s ease;
}

.fade-in.is-view {
    opacity: 1;
}

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transition: opacity 2s ease, transform 2s ease
}

.fade-up.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-down {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-down.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    -webkit-transform: translateX(-40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-left.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px);
    -webkit-transform: translateX(40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-right.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}