@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/*

モバイル用CSS

*/
@media screen and (max-width:768px){
    body{
        font-family: fot-udkakugo-small-pr6n, sans-serif;
        font-weight: 400;
        font-style: normal;
      }
    #hide-sp{
        display: none;
    }
    
    a{
        color: white;
        text-decoration: none;
    }
/*========= テキストアニメーションのCSS ===============*/
    .eachTextAnime span{opacity: 0;}
    .eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
    @keyframes text_anime_on {
        0% {opacity:0;}
        100% {opacity:1;}
    }

/*========= ハンバーガーメニューのCSS ===============*/
    /*アクティブになったエリア*/
    #g-nav.panelactive{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        top: 0;
        width:100%;
        height: 100vh;
    }
    /*丸の拡大*/
    .circle-bg{
        position: fixed;
        z-index:3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: black;
        opacity: 0.8;
        /*丸のスタート位置と形状*/
        transform: scale(0);/*scaleをはじめは0に*/
        right:-50px;
        top:-50px;
        transition: all .6s;/*0.6秒かけてアニメーション*/
    }
    .circle-bg.circleactive{
        transform: scale(50);/*クラスが付与されたらscaleを拡大*/
    }
    /*ナビゲーションの縦スクロール*/
    #g-nav-list{
        display: none;/*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    #g-nav.panelactive #g-nav-list{
        display: block; /*クラスが付与されたら出現*/
    }
    /*ナビゲーション*/
    #g-nav ul {
        opacity: 0;/*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute;
        z-index: 999;
        top:45%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
        width: 80vw;
    }
    #g-nav.panelactive ul img{
        width: 50%;
        display: block;
        margin: 0 auto;
    }
    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li{
    animation-name:gnaviAnime;
    animation-duration:1s;
    animation-delay:.2s;/*0.2 秒遅らせて出現*/
    animation-fill-mode:forwards;
    opacity:0;
    }
    @keyframes gnaviAnime{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    /*リストのレイアウト設定*/
    #g-nav li{
        text-align: center; 
        list-style: none;
    }
    #g-nav li a{
        color: white;
        text-decoration: none;
        padding:10px;
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 6vw;
        letter-spacing: 1px;
    }
    #g-nav-list ul{
        padding-left: 0;
    }
    /*========= ボタンのためのCSS ===============*/
    .openbtn{
        position:fixed;
        top:10px;
        right: 10px;
        z-index: 9999;/*ボタンを最前面に*/
        cursor: pointer;
        width: 50px;
        height:50px;
    }
    /* ×に変化*/	
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: white;
        width: 45%;
    }
    .openbtn span:nth-of-type(1) {
        top:15px;	
    }
    .openbtn span:nth-of-type(2) {
        top:23px;
    }
    .openbtn span:nth-of-type(3) {
        top:31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

/*========= メインビジュアルのCSS ===============*/
    /*header設定*/
#header{
	position: relative;/*ローディング画像などを表示す際の基点とするため指定*/
    height: 100vh;/*高さを全画面にあわせる*/
    text-align: center;
    color: #fff;
    /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
    background: url("../img/movie.jpg") no-repeat;
    background-size: cover;
}

/* ローディングアイコン設定 */

#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-weight: bold;
}

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/

#loading.disappear{
     display: none;   
}


/* youtube設定 */

#youtube-area{
    position: fixed;
    z-index: 1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
 	opacity: 0;    
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

#youtube {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 1;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}


/*youtube 上のロゴ */
h1{
  position:absolute;
  z-index: 2;/*下から2番目に表示*/
/*天地中央配置*/
  top: 45%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
/*色指定*/
  color:#fff;
  text-shadow: 0 0 15px #666;
}
#youtube-area h2{
    position:absolute;
    z-index: 2;/*下から2番目に表示*/
    width: 80vw;
    text-align: center;
  /*天地中央配置*/
    top: 28%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  /*色指定*/
    color:#fff;
    text-shadow: 0 0 15px #666;
    font-family: ten-mincho-text, serif;
    font-weight: 400;
    font-style: normal;
}
#youtube-area h2:nth-child(2){
    position:absolute;
    z-index: 2;/*下から2番目に表示*/
    width: 80vw;
    text-align: center;
  /*天地中央配置*/
    top: 32.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  /*色指定*/
    color:#fff;
    text-shadow: 0 0 15px #666;
    font-family: ten-mincho-text, serif;
}
#youtube-area p{
    position:absolute;
    z-index: 2;/*下から2番目に表示*/
    width: 80vw;
    text-align: center;
  /*天地中央配置*/
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  /*色指定*/
    color:#fff;
    text-shadow: 0 0 15px #666;
}
.main-copy-p{
    font-family: ten-mincho-text, serif;
    font-weight: 400;
    font-style: normal;
}

#youtube-area p:last-child{
    top: 64%;
}
.movie-start{
    position:absolute;
    z-index: 2;/*下から2番目に表示*/
    width: 50%;
    text-align: center;
  /*天地中央配置*/
    top: 82%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  /*色指定*/
    color:#fff;
    text-shadow: 0 0 15px #666;
}
.movie-start img{
    margin: 0 auto;
    display: block;
    width: 55%;
}
.info-area{
    position:absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    width: 100vw;
    height: 1.5em;
    background-color: #A62121;
    font-size: 4vw;
    color: white;
    text-align: center;
    line-height: 1.5;
    letter-spacing: .2vw;
    margin: 0 auto;
}
/*下のコンテンツ*/
#container{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 1;/*一番上に表示*/
    /*見た目の調整*/
	background:#0D0D0D;
	color: #fff;
	margin:100vh 0 0 0;
    padding-bottom: 80px;
    padding-top: 1px;
	/* text-align: center; */
}
.pLR{
    padding-left: 20px;
    padding-right: 20px;
}
/* #activity-info div{
    border: 1px solid white;
} */
.flex-container{
    display: flex;
}
.flex-container-c{
    display: flex;
}
.activity-title{
    font-size: 1.5em;
    color: #DF6272;
    font-weight: bold;
    padding-left: 8px;
}
#activity-info img{
    margin: 0 8px 0 auto;
    display: block;
}
.activity-title-c{
    font-size: 4vw;
    color: #DF6272;
    font-weight: bold;
    padding-left: 8px;
    height: 1em;
    width: 50%;
}
#activity-info table{
    width: 100%;
    margin-bottom: 40px;
}
#activity-info table tr{
    width: 100%;
}
#activity-info table tr td{
    border: 1px solid white;
    border-collapse: collapse;
    border-spacing: 0;
    height: 80px;
}
.w50{
    width: 50%;
}
.info{
    display: block;
    padding-left: 8px;
    padding-top: 8px;
}
.title{
    text-align: center;
    color: #DF6272;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 16px;
}
.sub-title{
    font-size: 16px;
    margin-bottom: 3px;
}
.yellow-line{
    border-top: 2px solid #F2B604;
    margin-top: 0px;
    width: 1.7em;
    height: 20px;
}
#news dl{
    margin: 0 auto 16px;
    width: 80%;
}
#news dl dt{
    float: left;
    font-size: 10px;
    margin-bottom: 4px;
}
#news dl dd{
    margin-left: 6em;
    font-size: 13px;
    margin-bottom: 4px;
}
#news a{
    display: block;
    text-align: center;
}
#news a img{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 40px;
}
.l-nav{
    padding-left: 0;
    list-style-type: none;
    font-size: 13px;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.l-nav li a{
    display: block;
    border-right: 1px solid #707070;
    padding: 2px 10px;
}
.l-nav li:last-child a{
    border-right: 0;
}
.reading-text{
    text-indent: 1em;
    line-height: 18px;
    font-size: 11px;
    letter-spacing: 0.3px;
}
/* youtube埋め込み */
.youtube {
    border: 1px solid #707070;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 16px;
  }
  .youtube iframe {
    width: 100%;
    height: 100%;
  }
  .border-ash{
      border: 1px solid #707070;
      padding: 16px;
      margin-top: 32px;
      margin-bottom: 32px;
  }
  .red-box{
      display: inline-block;
      color: white;
      font-size: 11px;
      background-color: #A62121;
      width: 54px;
      height: auto;
      text-align: center;
      padding: 4px 0;
      border-radius: 2px;
  }
  .fz18{
      font-size: 18px;
  }
  #event-info dl dt{
      float: left;
      margin-bottom: 12px;
      clear: both;
  }
  #event-info dl dd{
      margin-left: 4em;
      margin-bottom: 12px;
      padding: 0;
  }
  .yellow-text{
      color: #F2B604;
  }
  .link-text{
        font-size: 13px;
        margin-left: 0.8em;
  }
  .link-text::after{
      content: ">";
      font-size: 11px;
      margin-left: 3px;
  }
.small-text{
    display: inline-block;
    font-size: 11px;
    margin-bottom: 8px;
}
.more-info-dt{
    font-size: 14px;
   display: inline-block;
   text-align: center;
}
.more-info-dt::before{
    content: "【";
    margin-right: 2px;
}
.more-info-dt::after{
    content: "】";
    margin-left: 2px;
}
.more-info{
    font-size: 14px;
    margin-left: 5em;
}
.p-relaitve{
    position: relative;
}
.company{
    position: absolute;
    width: 100vw;
    height: 50px;
    background-color: white;
    transform: translate(-21px);
    bottom: 16px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center
}
.company img{
    display: block;
    width: auto;
    height: 4vw;
    margin: 8px;
}
.more-padding{
    padding-bottom: 80px;
}
.dis-text{
    font-size: 12px;
    line-height: 1.4;
}
.small-text{
    margin-left: 1.6em;
}
#join img{
    width: 100%;
}
#join .w50{
    margin: 16px auto 0;
}
.guide-link-btn{
    display: block;
    font-size: 12px;
    border: 1px solid white;
    padding: 8px;
    border-radius: 3px;
    margin: 6px 0;
    text-align: center;
}
.jpg{
    border-color: #A62121;
    color: #A62121;
}
.pdf{
    border-color: #F2B604;
    color: #F2B604;
}
.guide-link-area p{
    font-size: 10px;
}
.guide-book-container > div{
    padding: 3px;
    width: 50%;
}
#guide-book img{
    width: 100%;
}
.info-btn{
    font-size: 16px;
    text-align: center;
    background-color: #DF6272;
    width: 50%;
    margin: 16px auto 32px;
    padding: 8px;
}
.act img{
    width: 100%;
}
#activity .dis-text{
    padding-left: 20px;
    padding-right: 20px;
}
#activity .activity-title{
    padding-left: 0;
}

/*========= タブのCSS ===============*/
    /*tabの形状*/
    .tab{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
    }
    .tab li a{
        display: block;
        background:#B7B7B7;
        margin:0 3px 0 0;
        padding:10px 20px;
    }
    /*liにactiveクラスがついた時の形状*/
    .tab li.active a{
        background:#A62121;
    }


    /*エリアの表示非表示と形状*/
    .area {
        display: none;/*はじめは非表示*/
        opacity: 0;/*透過0*/
        background: #fff;
        padding:5px;
    }

    /*areaにis-activeというクラスがついた時の形状*/
    .area.is-active {
        display: block;/*表示*/
        animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    @keyframes displayAnime{
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }



    .step-line{
        background-color: #A62121;
        padding: 5px;
    }
    .step{
        display: inline-block;
        background-color: #fff;
        color: #A62121;
        font-size: 12px;
        height: auto;
        padding: 3px 7px;
        border-radius: 3px;
    }
    .step-text{
        display: inline-block;
        font-size: 14px;
        margin-left: 6px;
    }
    .guide-text{
        margin-top: 4px;
        background-color: #F3F3F3;
        color: black;
        font-size: 14px;
        line-height: 1.6;
        padding: 14px;
    }
    .highlight{
        color: #A62121;
        /* font-weight: bold; */
    }
    .blue-bg{
        color: white;
        background: blue;
        padding: 3px;
        border-radius: 3px;
        font-size: 13px;
        margin: 0 2px;
    }
    .red-bg{
        color: white;
        background: red;
        padding: 3px;
        border-radius: 3px;
        font-size: 13px;
        margin: 0 2px;
    }
    .black-bg{
        color: white;
        background: black;
        padding: 3px;
        border-radius: 3px;
        font-size: 13px;
        margin: 0 2px;
    }
    .triangle3{
        margin: 16px auto;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 12px solid #A62121;
    }
    .guide-area{
        padding: 6px;
        box-shadow: 0 0 7px 0px rgba(0, 0, 0, 0.23);
    }
    #day,#stay{
        padding: 24px 12px;
    }
    #access a{
        display: inline-block;
        width: 80%;
        margin: 0 16px;
    }
    .flex-item{
        width: 50%;
    }
    #access .flex-container{
        margin-bottom: 16px;
    }
    #access img{
        width: 100%;
        margin: 16px 0 56px 0;
    }
    ul.caution{
        list-style-position: outside;
        list-style-type: none;
        font-size: 12px;
        margin-left: 1em;
    }
    ul.caution li{
        margin-bottom: 8px;
        line-height: 1.5;
        /* text-indent: em; */
    }
    ul.caution li::before{
        content: "●";
        margin-right: 0.25em;
        margin-left: -1em;
    }

    #infection .title{
        margin-top: 0;
    }
    #infection img{
        width: 100%;
        margin: 16px 0;
    }
    ul.infection-caution{
        font-size: 11px;
        margin: 16px 0 8px 1.5em;
    }
    ul.infection-caution li{
        margin-bottom: 4px;
        line-height: 1.5;
    }
    #sns div img{
        width: 100%;
        margin: 0 0 24px 0;
    }
    #sns ul.dis-text{
        margin: 1.5em 0 1.5em 1.5em;
    }
    #sns a img{
        display: block;
        width: 70%;
        margin: 24px auto;
    }




/*========= モーダルのCSS ===============*/
    /*全て共通：hideエリアをはじめは非表示*/
    .hide-area{
        display: none;
    }

    /*全て共通：モーダルのボタンの色を変更したい場合*/
    .modaal-close:after, 
    .modaal-close:before{
        margin-top: 200px;
        background:#ccc;	
    }

    .modaal-close:focus:after,
    .modaal-close:focus:before,
    .modaal-close:hover:after,
    .modaal-close:hover:before{
        background:#666;
    }

/*========= よくある質問のCSS ===============*/
    /* アコーディオン部分 */
    
    .accordion_area .accordion_one .ac_header {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 1rem 4rem 1rem 2rem;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition: .2s;
    }
    .accordion_area .accordion_one .ac_header:not(.open):hover {
    background-color: #f1f8ff;
    }
    .accordion_area .accordion_one:nth-child(odd) .ac_header {
    background-color: #f5f5f5;
    }
    .accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
    background-color: #f1f8ff;
    }
    .accordion_area .accordion_one .ac_header .i_box {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    }
    .accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
    position: absolute;
    content: "";
    margin: auto;
    box-sizing: border-box;
    vertical-align: middle;
    }
    .accordion_area .accordion_one .ac_header .i_box:before {
    border-top: 2px solid #014897;
    width: 20px;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
    }
    .accordion_area .accordion_one .ac_header .i_box:after {
    border-left: 2px solid #014897;
    width: 0;
    height: 20px;
    top: 0;
    bottom: 0;
    right: 9px;
    transition: .3s;
    }
    .accordion_area .accordion_one .ac_header.open .i_box:after {
    height: 0;
    }
    .accordion_area .accordion_one .ac_inner {
    display: none;
    padding: 1.5rem 2rem 1.5rem 2rem;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    background: #fff;
    }
    /* FAQの部分 */
    .p-faq__headinner {
    display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
    }
    .p-faq__headinner::before {
    position: absolute;
    left: 0;
    content: "Q．";
    color: #09357f;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.3;
    }
    .p-faq__headinner p.p-faq__q-txt {
    font-size: 14px;
    }
    .p-faq__bodyinner {
    display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
    }
    .p-faq__bodyinner::before {
    position: absolute;
    left: 0;
    content: "A．";
    color: #de0000;
    font-size: 17px;
    font-weight: bold;
    }
    .p-faq__bodyinner p.p-faq__a-txt {
    font-size: 12px;
    }
    .p-faq__q-txt{
        color: black;
    }
    .p-faq__a-txt{
        color: black;
    }
    .faq-link{
        color: #A62121;
        text-decoration-line: underline;
    }

    footer{
        position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
        z-index: 1;/*一番上に表示*/
        /*見た目の調整*/
        background:#A62121;
        color: #fff;
        margin:0;
        padding-bottom: 24px;
        /* text-align: center; */
        padding-top: 24px;
    }
    .f-logo img{
        display: block;
        width: 40%;
        margin: 24px auto;
    }
    .f-text{
        font-size: 11px;
        text-align: center;
    }
    .f-text::before,
    .f-text::after{
        content: "―";
        margin: 0 0.5em;
    }
    .sns-icon{
        margin: 8px auto 24px auto;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    .sns-icon a{
        width: 15%;
    }
    .sns-icon img{
        width: 10%;
        padding: 0 10px;
    }
    footer .flex-container{
        justify-content: space-evenly;
    }
    .f-list{
        list-style-position: inside;
        font-size: 13px;
    }
    .f-list li{
        margin-bottom: 15px;
        text-decoration-line: underline;
    }
    .copyright{
        margin-top: 40px;
        text-align: center;
    }
    small{
        font-size: 10px;
    }
    .g-nav-company{
        position: absolute;
        width: 100vw;
        height: 50px;
        background-color: white;
        transform: translate(0);
        bottom: 60px;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .g-nav-bottom{
        color: white;
        width: 100vw;
    }
    .g-nav-bottom a{
        display: block;
    }
    .g-nav-bottom a:nth-child(1){
       width: 50vw;
    }
    .g-nav-bottom a:nth-child(2){
       width: 25vw;
    }
    .g-nav-bottom a:nth-child(3){
       width: 25vw;
    }
    .g-nav-bottom img{
        width:20%;
    }
    .w100{
        width: 100%;
    }
    .g-nav-sns{
        background-color: #A62121;
        font-size: 11px;
        position: absolute;
        transform: translate(0);
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50vw;
        height: 60px;
    }
    .g-nav-sns p::first-line{
        font-size: 14px;
    }
    .g-nav-faq{
        background-color: #049DD9;
        font-size: 11px;
        position: absolute;
        transform: translate(0);
        bottom: 0;
        left: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25vw;
        height: 60px;
    }
    .g-nav-guidebook{
        background-color: #F2B604;
        font-size: 11px;
        position: absolute;
        transform: translate(0);
        bottom: 0;
        left: 75vw;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25vw;
        height: 60px;
    }
    .flex-column{
        display: flex;
        flex-direction: column;
    }
    .g-nav-faq img,
    .g-nav-guidebook img{
        margin-bottom: 4px;
    }
    .g-nav-sns img{
        margin: 0 8px;
    }
            /*==================================================
        スライダーのためのcss
        ===================================*/
        .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
            width:94%;
            margin:5px auto 14px;
        }

        .slider img {
            width:70vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
            height:auto;
        }

        .slider .slick-slide {
            transform: scale(0.8);/*左右の画像のサイズを80%に*/
            transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
            opacity: 0.5;/*透過50%*/
        }

        .slider .slick-slide.slick-center{
            transform: scale(1);/*中央の画像のサイズだけ等倍に*/
            opacity: 1;/*透過なし*/
        }


        /*矢印の設定*/

        /*戻る、次へ矢印の位置*/
        .slick-prev, 
        .slick-next {
            position: absolute;/*絶対配置にする*/
            top: 42%;
            cursor: pointer;/*マウスカーソルを指マークに*/
            outline: none;/*クリックをしたら出てくる枠線を消す*/
            border-top: 2px solid white;/*矢印の色*/
            border-right: 2px solid white;/*矢印の色*/
            height: 15px;
            width: 15px;
        }

        .slick-prev {/*戻る矢印の位置と形状*/
            left: -1.5%;
            transform: rotate(-135deg);
        }

        .slick-next {/*次へ矢印の位置と形状*/
            right: -1.5%;
            transform: rotate(45deg);
        }

        /*ドットナビゲーションの設定*/

        .slick-dots {
            text-align:center;
            margin:20px 0 0 0;
        }

        .slick-dots li {
            display:inline-block;
            margin:0 5px;
        }

        .slick-dots button {
            color: transparent;
            outline: none;
            width:5px;/*ドットボタンのサイズ*/
            height:5px;/*ドットボタンのサイズ*/
            display:block;
            border-radius:50%;
            background:#ccc;/*ドットボタンの色*/
            border: none;
        }

        .slick-dots .slick-active button{
            background:#333;/*ドットボタンの現在地表示の色*/
        }
        .act-flex .info{
            padding-left: 0;
        }

        .activity-copy{
            font-size: 13px;
            letter-spacing: 0.02em;
            color: #F2B604;
            padding: 5px;
            /* background-color: #F2B604; */
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            margin: 0 auto;
        }

        /* 回転テキスト */
        span.smoothText {
            overflow: hidden;
            display: block;
        }
        
        /* アニメーションで傾斜がついている文字列を水平に戻す*/
        span.smoothTextTrigger{
            transition: .8s ease-in-out;
            transform: translate3d(0,100%,0) skewY(12deg);
            transform-origin: left;
            display: block;
        }
        span.smoothTextTrigger.smoothTextAppear{
            transform: translate3d(0,0,0) skewY(0);
        }
        footer .sns-icon img{
            width: 100%;
        }
        #news a .top-sns-icon{
            width: 80%;
            padding-left: 0;
            padding-right: 0;
        }


}