/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
button:focus { outline: none; }
/* ==========================================================================
Base
========================================================================== */
html { 
    font-size: 62.5%; /* 1 */
	-webkit-text-size-adjust: 62.5%; /* 2 */
    -ms-text-size-adjust: 62.5%; /* 2 */ 
	overflow-x: hidden;
}
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
body {
    margin: 0;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'Noto Sans JP',YakuHanJP, sans-serif;
    overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
    letter-spacing: 1px;
    font-weight: 600;
    color: #231815;
}
/* ==========================================================================
Links
========================================================================== */
a { text-decoration: none; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
h1 { font-size: 8.6rem; }
h2 { font-size: 4.0rem; }
h3 { font-size: 2.0rem; margin: 1em 0; }
h4 { font-size: 3.0rem; margin: 1em 0; }
h5 { font-size: 2.0rem; margin: .25em 0; }
h6 { font-size: 1.5rem; margin: 0.52em 0; line-height: 1.4; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
p, pre { font-size: 1.6rem; margin: .5em 0; text-align: justify; line-height: 1.8; }
h1, h2, h3, h4, h5, h6, p, li {
    font-weight: 400;
}
li { font-size: 1.6rem; list-style: none; }
th, td { font-size: 1.6rem; font-weight: 500; }
/* ==========================================================================
Embedded content
========================================================================== */
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic;/* 2 */
    width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }
/* 
==========================================================================
Global Styles
========================================================================== */
a { 
    color: #353535;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
a:hover, a:focus { 
    text-decoration: none;
    color: inherit;
    opacity: .6;
    transition: .6s;
}
.sec-padding {
    padding: 80px 0;
}
.inner {
    padding: 0 8%;
}
html .en,
body .en {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
}
.serif {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

.pc { display: block; }
.sp { display: none; }
.alStart { align-items: flex-start; }
.alCenter { align-items: center; }
.alEnd { align-items: flex-end; }
.jsCenter { justify-content: center; }
.jsEnd { justify-content: flex-end; }
.clear { clear: both; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.notes { font-size: 1.2rem; }

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }

.f-10 { font-size: 10%; }
.f-20 { font-size: 20%; }
.f-30 { font-size: 30%; }
.f-40 { font-size: 40%; }
.f-50 { font-size: 50%; }
.f-60 { font-size: 60%; }
.f-70 { font-size: 70%; }
.f-80 { font-size: 80%; }
.f-90 { font-size: 90%; }
.f-bold { font-weight: 600; }
.ml-40 { margin-left: 40px; }
.my-8 { margin: 8em auto; }
.pl-2 { padding-left: 2em; }
.pl-4 { padding-left: 4em; }
.pull-right { float:right; }
.pull-left { float:left; }
.fa.pull-left { margin-right:.3em; }
.fa.pull-right { margin-left:.3em; }

.z-10 { z-index: 10; }
.opacity-95 { opacity: .95; }


@media screen and (max-width: 960px) {
    .inner { padding: 0 6%; }
    h1 { font-size: 6.2rem; }
    h2 { font-size: 3.0rem; }
    h3 { font-size: 1.8rem; }
    h4 { font-size: 2.0rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.5rem; }
    p { font-size: 1.5rem; }
    li { font-size: 1.3rem; }
    .sec-padding {
        padding: 40px 0;
    }
    .learn-more-btn {
        font-size: 1.5rem;
        line-height: 1.4;
    }
}

@media screen and (max-width: 520px) {
    .inner { padding: 0 6%; }
    h1 { font-size: 6.2rem; }
    h2 { font-size: 2.6rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.8rem; }
    h5 { font-size: 1.6rem; }
    h6 { font-size: 1.5rem; }
    p { font-size: 1.5rem; }
    li { font-size: 1.3rem; }
    th, td { font-size: 1.5rem; letter-spacing: 0; }
    .sec-padding {
        padding: 30px 0;
    }
    .learn-more-btn {
        padding: 1.2em 2em;
    }
    .learn-more-btn span {
        font-size: 1.3rem;
    }
    .btn__area p {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    .btn__box .col-auto {
        display: none;
    }
    .notes { 
        font-size: 1.0rem;
    }
    .w-sm-70 {
        width: 70%;
    }
}
@media screen and (max-width: 380px) {
    .inner { padding: 0 3%; }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .container, .container-sm {
        max-width: 90%;;
    }   
}




/* ==========================================================================
Sec00 *Header
========================================================================== */
#menu,
#menu .container > .row {
    height: 80px;
}
.menu-item {
    margin-left: 14px;
    padding: .9em .8em;
}
.menu-item a {
    font-size: 1.4rem;
}
.menu__list .menu-item:last-of-type {
    border: 2px solid;
    border-radius: 200px;
    box-sizing: border-box;
    margin-left: 18px;
    padding: .5em 2em;
}
.menu__list .menu-item:last-of-type a {
    letter-spacing: 0;
}
.burger-btn {
    display: none;
}

@media screen and (min-width: 961px) and (max-width: 1199px) {
    #menu .container {
        max-width: 96%;
    }
    .menu-item {
        margin-left: 0;
    }
    .menu__list .menu-item:last-of-type {
        padding: .5em .8em;
        margin-left: 8px;
    }
    .menu-item a {
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 960px) {
    #menu .container {
        max-width: 96%;
    }
    .menu__list {
        display: none;
    }
    button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: inherit;
		cursor: pointer;
		font: inherit;
		margin: 0;
		outline: none;
		padding: 0;
		vertical-align: middle;
    }
    .burger-btn{
      display: block;      
      width: 39px;      
      height: 39px;      
      position: relative;      
      z-index: 3;
      border:none;    
    }    
    .bar{      
      width: 20px;      
      height: 1px;        
      display: block;      
      position: absolute;      
      left: 50%;      
      transform: translateX(-50%);      
      background-color: #000;    
    }    
    .bar_top{   
      top: 10px;
    }
    .bar_mid{    
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .bar_bottom{
      bottom: 10px;
    }
    .burger-btn.close .bar_top{      
      transform: translate(-50%,10px) rotate(45deg); 
      transition: transform .3s;    
    }    
    .burger-btn.close .bar_mid{      
      opacity: 0;       
      transition: opacity .3s;    
    }    
    .burger-btn.close .bar_bottom{      
    transform: translate(-50%,-8px) rotate(-45deg);
    transition: transform .3s;    
    }
    .noscroll{
    overflow: hidden;
    }
    .nav-wrapper{      
        visibility: hidden;  
        opacity: 0;
        width: 25vw;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        transition: all .5s;
        z-index: 2; 
        transform: translate(25vw);
    }     
    .header-nav{        
      width: 100%;        
      height: 100%;        
      background-color: rgba(233,248,239,.94);        
      z-index: 2;      
    }     
    .menu__list{        
      display: block;        
      position: absolute;        
      top: 50%;        
      left: 50%;        
      transform: translate(-50%,-50%);        
      text-align: center;
        width: 100%;
    }      
    .menu-item{        
      margin: 0 0 20px;
        float: none;
    }
    .menu__list .menu-item:last-of-type {
        margin-left: 0;
        display: inline-block;
        padding: 0.5em 2em;
    }

    /* メニューオープン時 */
    .nav-wrapper.fade {
        visibility: visible;
        opacity: 1;
    }
    .nav-wrapper.fade {
    transform: translateZ(0);
    }
}

@media screen and (max-width: 520px) {
    .nav-wrapper{      
        width: 35vw;
        transform: translate(35vw);
    }
    .menu-item a {
        font-size: 1.3rem;
    }
    .menu__list .menu-item:last-of-type {
        padding: .5em 1.2em;
    }
}




/* ==========================================================================
Sec01 *Hero
========================================================================== */
.hero {
    position: relative;
    height: 780px;
}
.hero__catch {
    top: 25%;
    right: 12%;
    transform: rotate(-5deg);
}
.hero__catch .txt {
    background: #fff;
    color: #000;
    display: inline-block;
    padding: 0.25em 1em;
}
.parallax {
    background: url('../img/hero-img-01.jpg') no-repeat center top;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-attachment: fixed;
    color: #fff;
}

section img {
    border-radius: 2px;
}
section.hero img {
    border-radius: 0;
}


@media screen and (min-width: 1520px) {
    .hero {
        height: 880px;
    }
}
@media screen and (min-width: 1740px) {
    .hero {
        height: 1080px;
    }
}
@media screen and (min-width: 1121px) and (max-width: 1290px) {
    .hero {
        height: 680px;
    }
}
@media screen and (min-width: 1081px) and (max-width: 1120px) {
    .hero {
        height: 620px;
    }
}

@media screen and (max-width: 1080px) {
	.parallax {
		background-size: cover;
		background-attachment: scroll;
	}
}

@media screen and (max-width: 960px) {
    .hero {
        height: 560px;
    }
    .hero__catch {
        top: 20%;
        right: 3%;
    }
}

@media screen and (max-width: 520px) {
    .hero__catch .txt {
        padding: .25em .8em;
    }
}




/* ==========================================================================
Sec02 *Index
========================================================================== */
.index-bg-01 {
    z-index: -1;
    top: 0;
    width: 50%;
}
.index__title {
    margin: 8em auto 0;
}
.secLead {
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 6px;
    margin-top: -6px;
}
.index__content--txt {
    padding-left: 2em;
}
.index__bnr--txt {
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: 0 auto;
    display: inline-block;
    width: auto;
    text-align: center;
}
.index__bnr--txt .title {
    color: #fff;
    font-weight: 600;
    letter-spacing: 6px;
}
.btn {
    letter-spacing: 4px;
    margin: 4em auto 2em;
}
.btn p {
    font-weight: 600;
}
.btn .arrow {
    border: 1px solid;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media screen and (max-width: 960px) {
    .index__content--img {
        margin: 0 -6%;
    }
    .index__content--txt {
        padding-left: 0;
        margin: 4.6em auto 0;
    }
    .btn {
        letter-spacing: 2px;
        margin: 2em auto 2em;
    }
    .btn p {
        font-size: 1.4rem;
    }
    .btn .arrow {
        width: 26px;
        height: 26px;
    }
}

@media screen and (max-width: 520px) {
    .index-bg-01 {
        width: 60%;
    }
    .titleLogo {
        width: 90%;
    }
    .titlePct {
        width: 80%;
    }
    .index__title {
        margin: 6em auto 0;
    }
    .index__content {
        margin: 6em auto;
    }
    .index__content--img {
        margin: 0 -6%;
    }
    .secLead {
        letter-spacing: 5px;
    }
    .index__bnr--txt .title {
        letter-spacing: 2px;
    }
    .index__bnr img {
        height: 120px;
    }
    .btn {
        margin: 1em auto;
    }
}



/* ==========================================================================
Sec03 *Activity
Sec04 *Gourmet
========================================================================== */
.secTitle {
    text-align: center;
    margin: 2em auto;
    letter-spacing: 4px;
}
.guide {
    background: #FDFFD3;
}
.article .secLead {
    letter-spacing: 2px;
    margin: 3em auto 3.6em;
}
.guide-icon {
    top: -10%;
}

.article p {
    margin: -6px auto 0;
    font-size: 1.55rem;
}
.article .under .row > div {
    margin-bottom: 30px;
}
.article .under .row {
    margin-right: calc(var(--bs-gutter-x)/ -1);
    margin-left: calc(var(--bs-gutter-x)/ -1);
}
.article .under .row > * {
    padding-right: calc(var(--bs-gutter-x)/ 1);
    padding-left: calc(var(--bs-gutter-x)/ 1);
}
.gourmet {
    padding-top: 8em;
}


@media screen and (max-width: 960px) {
    .article .top {
        margin: 0 -6%;
    }
    .article .secLead {
        margin: 2.4em auto 3.0em;
    }
}

@media screen and (max-width: 520px) {
    .secTitle {
        margin: 1em auto;
        letter-spacing: 3px;
        padding-bottom: 1em;
    }
    .article .secLead {
        letter-spacing: 1px;
        margin: 2em auto 2.6em;
    }
    .article .top {
        margin: 0 -6%;
    }
    .article .under .row > div {
        margin-bottom: 16px;
    }
    .article .under .row > div:nth-child(n + 4):not(:nth-child(n + 6)) {
        margin-bottom: 24px;
    }
    .article .under .row {
        margin-right: calc(var(--bs-gutter-x)/ -2);
        margin-left: calc(var(--bs-gutter-x)/ -2);
    }
    .article .under .row > * {
        padding-right: calc(var(--bs-gutter-x)/ 2);
        padding-left: calc(var(--bs-gutter-x)/ 2);
    }
    .gourmet {
        padding-top: 6em;
    }
    .guide-icon.w-30 {
        width: 45%;
    }
    .guide-icon {
        top: -14%;
    }
    .guide-icon h6 {
        font-size: 1.3rem;
    }
    .guide-icon h5 {
        font-size: 1.5rem;
    }
}




/* ==========================================================================
Sec05 *Work
========================================================================== */
.work {
    background: #E9F8EF;
}
.work__under ul {
    padding: 1em 0 0;
}
.work-space__about {
    margin: 8em auto 2em;
}
.work-space__about table {
    width: 100%;
    background: #fff;
}
.work-space__about table th,
.work-space__about table tr td:first-child {
    background: #F5FCA3;
}
.work-space__about table th,
.work-space__about table td {
    border-collapse: collapse;
    border:1px solid #333;
    padding: 1em;
}
.work-space__about table th,
.work-space__about table tr td:nth-child(n+2) {
    text-align: center;
}



@media screen and (max-width: 960px) {
    .work-space__about .inner {
        padding: 0;
    }
    .work-space__about table th, .work-space__about table td {
        padding: .6em;
    }
    .work-space__about .inner img.w-80 {
        width: 100%;
    }
}

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

}



/* ==========================================================================
Sec06 *Plan
========================================================================== */
.plan .sec-padding {
    padding-bottom: 0;
}
.plan .row>* {
    padding-right: calc(var(--bs-gutter-x)/ 1);
    padding-left: calc(var(--bs-gutter-x)/ 1);
}
.plan table {
    border-collapse: separate;
    border-spacing: 8px;
}
.plan table td {
    position: relative;
    padding-right: 60px;
}
.plan table td img {
    position: absolute;
    z-index: 10;
    top: -20%;
    right: -4%;
}
.plan table td img.plan-img-l {
    width: 40%;
}
.plan table td img.plan-img-m {
    width: 30%;
    top: -60%;
}
.plan__box {
    padding: 2em;
    border: 1px solid #000;
    border-radius: 20px;
    margin: 0 auto 4em;
}
.plan__box .day {
    padding-left: 10px;
    margin: 10px auto 0;
}
.py-20 {
    padding: 20px 0;
}
.py-30 {
    padding: 30px 0;
}
.py-40 {
    padding: 40px 0;
}
.py-50 {
    padding: 50px 0;
}
.py-60 {
    padding: 60px 0;
}
.plan-img {
    position: absolute;
    width: 20%;
    top: -5%;
    right: -5%;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .plan .inner {
        padding: 0;
    }
}
@media screen and (max-width: 960px) {
    .plan table td img.plan-img-l {
        width: 36%;
    }
    .plan table td img.plan-img-m {
        width: 26%;
    }
}
@media screen and (max-width: 520px) {
    .plan__box {
        padding: 1em;
    }
    .plan table {
        border-spacing: 4px;
    }
    .plan table td img {
        top: -8%;
        right: -17%;
    }
    .plan table td img.plan-img-l {
        width: 45%;
    }
    .plan table td img.plan-img-m {
        width: 34%;
    }
    .plan table td {
        padding-right: 0px;
    }
}



/* ==========================================================================
Sec07 *Access
========================================================================== */
.access .list {
    margin: 0 auto;
}
.access .row .area {
    margin-bottom: 2em;
}
.access .area li {
    list-style: disc;
}
.border-right {
    border-right: 1px solid;
}
.access__map {
    margin-top: 8em;
}
.border-box {
    border: 1px solid #000;
    padding: 1em 1.5em;
    display: inline-block;
}

@media screen and (max-width: 960px) {
    .access .inner {
        padding: 0;
    }
    .access .icon {
        width: 90%!important;
    }
    .access .row .area.pl-4 {
        padding-left: 2em;
    }
    .access__map iframe {
        height: 420px;
    }
    .access__event p {
        font-size: 1.4rem;
        letter-spacing: 0;
    }
}

@media screen and (min-width: 521px) and (max-width: 767px) {
    .access .inner {
        padding: 0 18%;
    }
    .access .row .area.pl-4 {
        padding-left: 0;
    }
    .access .icon {
       max-width: 40px;
    }
    .access__event {
        margin-top: 2em;
    }
}
@media screen and (max-width: 520px) {
    .access .inner {
        padding: 0 6%;
    }
    .access .border-right {
        border-right: none;
    }
    .access .row .area,
    .access .row .area:first-child {
        margin-bottom: 4em;
    }
    .access .row .area.pl-4 {
        padding-left: 0;
        margin-bottom: 0;
    }
    .access .icon {
        width: 60%!important;
    }
    .access .icon.w-50 {
        width: 55%!important;
    }
    .access__map {
        margin-top: 4em;
    }
    .access__map iframe {
        height: 320px;
    }
    .access__event {
        text-align: center;
    }
    .access__event .area {
        display: inline-block;
    }
}



/* ==========================================================================
Footer
========================================================================== */
.footer__logo {
    padding: 2em 0 6em;
}
.footer__info {
    padding: 4em 0;
}
.footer__info .txt {
    line-height: 1.6;
    padding: 36px 0;
}
.clip-5 {
    background: #fff;
    clip-path: polygon(20% 0, 80% 0, 80% 78%, 50% 100%, 20% 78%);
    margin-bottom: 1em;
}
.footer__info--direct {
    background: #E9F8EF;
    text-align: center;
    padding: 2em 0;
    margin-bottom: 3em;
}
.footer__info--form {
    background: #F5FCA3;
    text-align: center;
    padding: 2em 0;
}
.footer__info .tel {
    font-weight: 600;
    margin: .25em auto .35em;
}
.footer__info .tel img {
    width: auto;
    height: 4.0rem;
    margin-right: 10px;
}
.footer__info--direct .name {
    font-weight: 500;
}
.footer__credit {
    padding: 4em 0;
}
.footer__credit--sns {
    margin: 3em auto;
}
.footer__credit--sns i {
    font-size: 2.0rem;
    margin: 0 .5em;
}
.footer__info--form .txt span {
    font-family: initial;
    font-weight: 600;
}
.btn-normal {
    display: inline-block;
    background: #fff;
    border: 1px solid;
    border-radius: 200px;
    padding: 1em 8em;
}
.btn-normal h5 {
    letter-spacing: 0;
    font-weight: 600;
}


@media screen and (max-width: 960px) {
    .footer__info .tel img {
    height: 3rem;
        margin-right: 5px;
    }
    .clip-5 {
        clip-path: polygon(10% 0, 90% 0, 90% 78%, 50% 100%, 10% 78%);
    }
    .footer__info--direct {
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 520px) {
    .footer__info {
        padding: 0;
    }
    .footer__info .border-right {
        border-bottom: 1px solid;
        border-right: none;
    }
    .footer__info--direct {
        margin-top: 22px;
        text-align: center;
    }
    .footer__info .tel {
        font-size: 3.6rem;
        margin: 0.25em auto 0.35em;
        line-height: 1.2;
    }
    .footer__info .tel span {
        vertical-align: top;
        line-height: .956;
    }
    .footer__info .tel img {
        margin-right: 8px;
    }
    .clip-5 {
        clip-path: polygon(5% 0, 95% 0, 95% 78%, 50% 100%, 5% 78%);
    }
    .footer__info .txt {
        padding: 30px 0;
    }
    .footer__logo img.w-50 {
        width: 80%!important;
    }
    .btn-normal {
        padding: 1em 4em;
    }
    .footer__credit .f-20 {
        font-size: 10px;
    }
}


/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft,
.bounceInRight,
.fadeInUp,
.fadeInUpDelay,
.fadeInDown,
.fadeInUpD,
.fadeInLeft,
.fadeInRight {
    visibility: visible;
}
.delay1s {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.delay15s {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
.animated.duration {
    animation-duration: 3s;
}
.delayed {
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
@keyframes fadeIn { 
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
/*古いブラウザ用　-------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fade-block1 {
  opacity: .1;
  transition: all 3s;
}
.favo__content .fade-block1 {
  opacity: .1;
  transition: all 1.5s;
}
.fade-block1.blockIn {
  opacity: 1;
}

.marker {
    background: -webkit-linear-gradient(left, rgb(255,251,56) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,251,56) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,251,56) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .48em; 
    background-position: 100% .5em;
    transition: 2s;
    display: inline;
}
.marker.is-active{
    background-position: 0% .95em;
}
.marker.sp {
    display: none;
}
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 2000ms;
}
.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.pulse {
	-webkit-animation-iteration-count: 5;
	animation-iteration-count: 5;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}




.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}


.img-wrap {
  animation: 3s img-wrap 1s cubic-bezier(.4, 0, .2, 1);
    opacity: 0;
}

@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
      opacity: 0;
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
      opacity: 1;
  }
}
.img-wrap-active {
    opacity: 1;
}

@media screen and (max-width: 520px) {
    .pc { display: none; }
    .sp { display: block; }
    .marker.sp { display: inline; }
}