@charset "Shift_JIS";

#gheader-banner, #bigEvent, #bigEvent[v-cloak], #bigEventSign { display:none !important; }

#contents-area { margin:0 -50vw; font-family: "IBM Plex Sans JP", sans-serif; color:#000; font-weight:500; font-style:normal; }
#contents-area img { display:block; width:100%; height:auto !important; }
#contents-area section { background-color:transparent; }

.w980 { width:980px; margin-left:auto; margin-right:auto; }
.hover-button { transition: transform 0.2s ease; }
.hover-button:hover { transform: scale(1.05); }

.title-container { text-align:center; padding-bottom:80px; }
.title-container .common-catch { color:#e4007f; font-size:27px; font-weight:bold; letter-spacing:0.02em; vertical-align:middle; }
.title-container .common-catch::before { content:""; display:inline-block; width:29px; height:2px; background-color:#e4007f;transform: rotate(45deg); vertical-align:middle; margin-right:3px; }
.title-container .common-catch::after { content:""; display:inline-block; width:29px; height:2px; background-color:#e4007f;transform: rotate(-45deg); vertical-align:middle; margin-left:3px; }
.title-container .common-title-large { display:block; padding-top:20px; margin-left:auto; margin-right:auto; }

.title-container.white-text .common-catch { color:#fff; font-size:20px; font-weight:bold; letter-spacing:0.02em; vertical-align:middle; }
.title-container.white-text .common-catch::before { content:""; display:inline-block; width:22px; height:2px; background-color:#fff;transform: rotate(45deg); vertical-align:middle; margin-right:3px; }
.title-container.white-text .common-catch::after { content:""; display:inline-block; width:22px; height:2px; background-color:#fff;transform: rotate(-45deg); vertical-align:middle; margin-left:3px; }

.bg-stripe-w { background-image:url(/images/kokonishika/bg_round_w_pc_01.svg),url(/images/kokonishika/bg_common_pc_01.png); background-size:100% auto,auto auto; background-position:center top, center top; background-repeat:no-repeat, repeat; }
.bg-stripe-m { background-image:url(/images/kokonishika/bg_round_m_pc_01.svg),url(/images/kokonishika/bg_common_pc_01.png); background-size:100% auto,auto auto; background-position:center top, center top; background-repeat:no-repeat, repeat; }
.bg-wave-white { position:relative; background:url(/images/kokonishika/bg_common_pc_02.png) top center repeat-x; margin-top:-40px; }
.bg-round-magenta { background:url(/images/kokonishika/bg_common_pc_03.svg) left top no-repeat; background-size:100% auto; }


.button-magenta { display:block; background-color:#e4007f; color:#fff; font-size:22px; line-height:1.0; font-weight:600; text-align:center; width:100%; padding:31px 0 29px; border-radius:41px; }
.button-magenta-s { display:block; background-color:#e4007f; color:#fff; font-size:18px; line-height:1.6; font-weight:600; text-align:center; width:100%; padding:13px 0; border-radius:52px; }


/* フローティングバナー */
#float-banner { position:absolute; top:-20px; left:24px; width:200px; }
#float-banner img { filter: drop-shadow(0px 0px 5px rgba(66, 66, 66, 0.5)); opacity:1; }


/* 動画埋め込み設定 */
.video-container .wrapper { position:relative; padding-bottom:56.25%; padding-top:0; height:0; overflow:hidden; }
.video-container .wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.video-vertical { width:70%; margin:0 auto;}
.video-vertical .video-container .wrapper { position:relative; padding-bottom:177.8%; padding-top:0; height:0; overflow:hidden; }
.video-vertical .video-container .wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%;}


/* ハンバーガーメニュー設定 */
.f_navi { align-items: center; background: none; display: flex; position: fixed; width: 100%; z-index: 9999; top: 9.5%; right: 0; opacity:0; overflow-x: auto; -webkit-overflow-scrolling: touch;  }
.f_navi .inner { margin: auto; width: 350px; padding-bottom:30px; background:rgba(228, 0, 127, 0.7); border-radius:60px 0 0 60px; }
.nav-global ul { margin:73px 50px 0; list-style: none; position: relative; padding: 0; }
.nav-global ul li { margin:0; }
.nav-global ul li a:hover img { opacity:0.4; }
.active { opacity: 1; visibility: visible; }
.pc_drawer{position: relative;}
/* チェックボックスは非表示に */
.pc_drawer-hidden {display:none;}
/* ハンバーガーアイコンの設置スペース */
.pc_drawer-open { border-radius:50%; background:#fff; display:flex; position: fixed; top:65px; right: 30px; height:50px; width:50px; justify-content: center; align-items: center; z-index: 100;/* 重なり順を一番上に */  cursor: pointer; box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5); }
/* ハンバーガーメニューのアイコン */
.pc_drawer-open span,.pc_drawer-open span:before,.pc_drawer-open span:after { content: ''; display: block; height:2px; width: 28px; border-radius: 3px; background:#e4007f; transition: 0.5s; position: absolute;}
/* 三本線のうち一番上の棒の位置調整 */
.pc_drawer-open span:before { bottom: 8px;}
/* 三本線のうち一番下の棒の位置調整 */
.pc_drawer-open span:after { top: 8px;}
/* アイコンがクリックされたら真ん中の線を透明にする */
#pc_drawer-check:checked ~ .pc_drawer-open span { background: rgba(255, 255, 255, 0);}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#pc_drawer-check:checked ~ .pc_drawer-open span::before { bottom: 0; transform: rotate(35deg);background: #e4007f; }
#pc_drawer-check:checked ~ .pc_drawer-open span::after { top: 0;  transform: rotate(-35deg);background: #e4007f; }
/* メニューのデザイン*/
.pc_drawer-content {  position: fixed;  top: 53px; left: 100%;/* メニューを画面の外に飛ばす */  z-index: 99;  transition: .5s;}
/* アイコンがクリックされたらメニューを表示 */
#pc_drawer-check:checked ~ .pc_drawer-content { left: calc(100vw - 350px);/* メニューを画面に入れる */}
.pc_drawer-open small{font-size: 9px; font-weight: 400; letter-spacing: 0.15em; color: #fff; display: block;margin: 70px 0 0 0; line-height: 1.5em; font-family: Georgia, 'Times New Roman', Times, serif; text-align: center;}

#contents-area .pc_drawer .image-container { display:grid; grid-template-columns: 1fr 1fr 1fr; margin:0 40px; }
#contents-area .pc_drawer .shika-image { width:100%; }


/* マーキー用 ------------------------------------- */
.roop-image {
 -moz-animation: loop 30s linear infinite;
 animation: loop 30s linear infinite; /* 等速で、20秒かけて左に移動するループ */
}

.marquee01 {
 background: url(./marquee_01.png); background-size: cover; /* 背景画像を設定、サイズはcover */
 height: 110px; /* スライドする画像の表示領域 */
}

@keyframes loop { /* 背景画像の位置を少しずつ移動（500pxずつずらす設定。画像のサイズで設定変更） */
 0% { background-position: 2000px 0; }
 25% { background-position: 1500px 0; }
 50% { background-position: 1000px 0; }
 75% { background-position: 500px 0; }
 100% { background-position: 0 0; }
 }
@-moz-keyframes loop {
 0% { background-position: 2000px 0; }
 25% { background-position: 1500px 0; }
 50% { background-position: 1000px 0; }
 75% { background-position: 500px 0; }
 100% { background-position: 0 0; }
}

/* 揺らし効果 ------------------------------------- */

.rotate-icon { animation: icon-anime 3s linear infinite; }
.rotate-icon-g { animation: icon-anime-g 4.6s linear infinite; }

@keyframes icon-anime {
 0% { transform: rotate(30deg); }
 4% { transform: rotate(0deg); }
 8% { transform: rotate(15deg); }
 12% { transform: rotate(0deg); }
 100% { transform: rotate(0deg); }
}

@keyframes icon-anime-g {
 0% { transform: rotate(12deg); }
 4% { transform: rotate(0deg); }
 8% { transform: rotate(6deg); }
 12% { transform: rotate(0deg); }
 100% { transform: rotate(0deg); }
}

/* fade control ------------------------------------- */

.fade-in { opacity: 0; transition-duration: 500ms; transition-property: opacity, transform; }
.fade-in-up { transform: translate(0, 50px); transition-duration: 220ms; }
.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); }