@charset "utf-8";

/*======================================================================

　Dunk The Shot
　
	[01] 基本・レイアウト
	[02] メインビジュアル
	[03] プレゼント
	[04] 次回予告
	[05] 見逃し配信
	[06] オリジナルインタビュー
	[07] アーカイブス
	[08] 番組内容
	[09] SNS
	[10] ロゴリンク
	[99] メディアクエリ

======================================================================*/



/*------------------------------------------------

	[01] 基本・レイアウト

------------------------------------------------*/

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body { margin-top: 100px; }


#wrapper { font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; width: 100%; min-width: 1000px; padding: 0; background: #f5f5f5; }
.inr { width: 100%; /*max-width: 1000px;*/ margin: 0 auto; }
.vpc { display: inherit; }
.vsp { display: none; }
.flb { display:flex; flex-wrap: wrap; width: 100%; margin: 0 auto; }
#wrapper a { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; text-decoration: none; }
p.article {font-size: 0.875rem; font-weight: 300; line-height: 1.8; color: #231815; }

/* フェード
---------------------------------*/
.scrollin { opacity: 0; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.scrollin.show { opacity: 1; transform: none; }
/*.scr_lr { transform: translate(-1rem, 0); }
.scr_rl { transform: translate(1rem, 0); }
.scr_fadein { transform: translate(0, 0px); }*/
.scr_up1 { transform: translate(0, 1rem); transition: 0.2s 0s ease; }
/*.scr_up2 { transform: translate(0, 1rem); transition: 0.8s 0.2s ease; }
.scr_up3 { transform: translate(0, 1rem); transition: 0.8s 0.4s ease; }
.scr_up4 { transform: translate(0, 1rem); transition: 0.8s 0.6s ease; }
.scr_up5 { transform: translate(0, 1rem); transition: 0.8s 0.8s ease; }
.scr_up6 { transform: translate(0, 1rem); transition: 0.8s 1.0s ease; }
.scr_down { transform: translate(0, -1rem); }
.scr_scaleUp { transform: scale(.5); }
.scr_scaleDown { transform: scale(1.5); }
.scr_rotateL { transform: rotate(1rem); }
.scr_rotateR { transform: rotate(1rem); }*/


/* 左から右へ */
.scr_fromLeft { transform: translateX(-1rem); }

/* 右から左へ */
.scr_fromRight01 { transform: translateX(1rem); transition: 0.2s 0s ease; }
.scr_fromRight02 { transform: translateX(1rem); transition: 0.2s 0.2s ease; }
.scr_fromRight03 { transform: translateX(1rem); transition: 0.2s 0.4s ease; }
.scr_fromRight04 { transform: translateX(1rem); transition: 0.2s 0.6s ease; }
.scr_fromRight05 { transform: translateX(1rem); transition: 0.2s 0.8s ease; }
.scr_fromRight06 { transform: translateX(1rem); transition: 0.2s 1.0s ease; }

/* 上から下へ */
.scr_fromTop { transform: translateY(-1rem); }

/* 下から上へ */
.scr_fromBottom { transform: translateY(1rem); }



/* フッタ
---------------------------------*/
footer#common_foot { margin: 0 0 0; }
#footer img { vertical-align: top !important; }
#footer { width: 100%; padding: 0 0 10px; text-align: center; }
p#copyright { padding: 30px 0; font-size: 0.875rem; line-height: 1.8; color: #fff; }


/* 動画配信
---------------------------------*/
.btn_flex-even { display: flex; width: 94%; max-width: 940px; margin: 0 auto 60px; justify-content: center; }
.btn_flex-even > li { flex-basis: 100%; max-width: 360px; }
.btn_flex-even li a { display: block; padding: 0.3rem; margin: 0 0.3rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.btn_flex-even li img { display: block; width: 100%; max-width: 224px; height: auto; text-align: center; margin: 0 auto; }


/* SNSボタン */
section.snsbtn_box div.fb-like, section.snsbtn_box div.btn_twitter, section.snsbtn_box div.btn_line, section.snsbtn_box div.btn_friend {float: left;}
section.snsbtn_box { position: relative; margin: 0 0 20px; padding: 0; border-top: none; }
#sns_btbox img {vertical-align: top !important;}
.sns_btn {text-align: right;}
.sns_btn div, .sns_btn p{display: inline-block; vertical-align: top;}
.sns_btn div iframe{height: inherit !important; max-height: 30px;}
.sns_btn a.ssp{margin: 0px; padding: 0 0 0 10px; vertical-align: top; line-height: 0;}




/* リンク
---------------------------------*/
/*a, a > div	{ font-weight: 500; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; }
a:link		{ color: #0952a1; }
a:visited	{ color: #0952a1; }
a:hover		{ text-decoration: none; color: #0952a1; opacity: 0.7; }
a:active	{ text-decoration: none; }*/


/* 見出し
---------------------------------*/
#dunk h2 { width: 100%; max-width: 1200px; margin: 0 auto; z-index: 3; position: relative; }
#dunk h2 img { width: 100%; margin: 0; }
#dunk #wrapper h3 { margin: .25rem 0; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.5rem; color: #fff; text-align: left; letter-spacing: 0.05rem; }
#dunk #wrapper h3 span { /*display: inline-block; min-width: 1ch;*/ }
#dunk #wrapper h3 span.first { color: #b39241; }
#dunk #wrapper h3 div.heading { /*display: flex; align-itrems: center;*/ /*justify-content: flex-start;*/ margin: 0 auto .5rem; padding: 0 1rem 4px; line-height: 1.2; background: #000; box-sizing: border-box; }
#dunk #wrapper h3 div.sub { padding: 0 1rem 4px; font-size: 1.125rem; color: #000; letter-spacing: 0; }

/* 脚注
---------------------------------*/








/*------------------------------------------------

	[02] メインビジュアル

------------------------------------------------*/
#main { position: relative; background: #000; }
#main .swiper { max-width: 2560px; }
#main .swiper-wrapper { height: auto; }
#main .swiper-slide { display: flex; justify-content: center; align-items: center; width: 100%; padding-top: calc(50%); box-sizing: border-box; overflow: hidden; }
#main .swiper-slide .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
#main .swiper-slide .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; object-fit: cover; }
#main .swiper-slide .image:nth-of-type(2) { left: 50%; }
#main .swiper-slide .image:nth-of-type(2) img {left: -50%; /* 元画像のどのあたりを表示するか */ }
#main .caption { background-color: rgba(255, 255, 255, 0.1); max-width: 600px; overflow: hidden; margin-top: calc(-50%); padding: 1.5em; box-sizing: border-box; }
#main .title { margin: 0; filter: drop-shadow(0 0 10px rgba(26,72,153,0.75)); }
#main .text { margin: 10px 0 5px; }

#main .image { position: relative; display: inline-block; }
#main .image img { display: block; }
#main .image .checker-overlay { position: absolute; inset: 0; /* 上下左右0で全体を覆う */ background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 2px, transparent 2px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 2px, transparent 2px, transparent 3px); pointer-events: none; /* クリック透過 */ }

#main p.copy_sm { position: absolute; right: 10px; bottom: 3px; z-index: 3; font-size: 0.75rem; font-weight: 300; color: #fff; letter-spacing: 0.03em; }




/*------------------------------------------------

	[03] プレゼント

------------------------------------------------*/
#box_present { width: 100%; margin: 0 auto; padding: 3rem 0; border-top: 6px solid #000; background: #b39241; }
#box_present .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
#box_present .inr_box .inside { margin: 1rem; }
#box_present div.flb { width: 96%; margin: 2em auto 3em; align-items: flex-start; }
#box_present div.inr01 { width: 35%; order: 2; }
#box_present div.inr01 img { width: 100%; border-radius: 8px; }
#box_present div.inr02 { width: calc(65% - 2em); margin: 0 2em 0 0; order: 1; align-items: end; }
#box_present div.inr02 p.cc02 { width: 75%; margin: 0; padding: 0 0 .5em; font-size: 1.8rem; font-weight: 700; color: #000; border-bottom: 3px solid #000; text-align: justify; }
#box_present div.inr02 p.txt_info { font-size: 0.875rem; line-height: 1.8; letter-spacing: 0.09em; text-align: justify; }
#box_present p.num { width: 25%; padding: 0 0 .5em; text-align: right; font-weight: 700; font-size: 1.4rem; border-bottom: 3px solid #000; }
#box_present p.num span { font-family: 'Oswald', sans-serif; padding: 0 .15em; font-weight: 700; font-size: 2.5rem; vertical-align: baseline; }
#box_present .inr_box ul.notice { margin: 1rem 0; }
#box_present .inr_box ul.notice li { font-size: 0.875rem; }
#box_present .inr_box p.deadline { width: 100%; font-size: 1rem; font-weight: 600; color: #000; text-align: center; }
#box_present .inr_box p.deadline span { font-size: 0.875rem; }

#box_present p.btn_entry { width: 70%; margin: 2em auto 1em; }
#box_present p.btn_entry a { display: block; margin: 10px 0; padding: 8px 2% 10px; color: #fff; font-size: 1.6rem; font-weight: 600; text-align: center; text-decoration: none; background: #1a4899; border-radius: 4px; }
#box_present p.btn_entry a:hover { text-decoration: none; opacity: 0.7; }


/*------------------------------------------------

	[04] 次回予告

------------------------------------------------*/
#box_next { width: 100%; margin: 0 auto; padding: 3rem 0; /*border-top: 6px solid #000;*/ }
#box_next .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
#box_next .inr_box .inside { margin: 1rem; }
#box_next .inr_box p.date { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.5rem; color: #000; text-align: left; letter-spacing: 0.05rem; }
#box_next .inr_box p.oa_tit { margin: .5rem 0; font-size: 1.6rem; font-weight: 600; text-align: justify; }
#box_next .inr_box p.oa_txt { margin: .5rem 0; font-size: 1.125rem; }
#box_next .inr_box ul.notice { margin: 1rem 0; }
#box_next .inr_box ul.notice li { font-size: 0.875rem; }



/*------------------------------------------------

	[05] 見逃し配信

------------------------------------------------*/
#box_movie { width: 100%; margin: 0 auto; padding: 3rem 0; background: #f7f7f7; }
#box_movie .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
#box_movie .inr_box .inside { margin: 1rem; }
#box_movie div.movie_box { width: 100%; margin: 2rem auto 3rem; text-align: center; }
#box_movie div.movie_box iframe { width:100%; max-width: 750px; height: 422px; margin: 0; }
#box_movie ul.notice { display: grid; justify-content: center; width: 96%; margin: 0 auto .5em; }
#box_movie ul.notice li { list-style: none; margin: 0 0 6px; padding-left: 1em; font-size: 0.875rem; line-height: 1.6; text-indent: -1em; }



/*------------------------------------------------

	[06] オリジナルインタビュー

------------------------------------------------*/
#box_interview { width: 100%; margin: 0 auto; padding: 3rem 0; }
#box_interview .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
#box_interview .inr_box .inside { margin: 1rem; }
#box_interview div.movie_box { width: 100%; margin: 2rem auto 3rem; text-align: center; }
#box_interview div.movie_box iframe { width:100%; max-width: 750px; height: 422px; margin: 0; }
#box_interview p.bnr { display: flex; width: 94%; max-width: 360px; margin: 0 auto 60px; justify-content: center; }
#box_interview p.bnr img { display: block; width: 100%; height: auto; text-align: center; margin: 0 auto; }
#box_interview ul.notice { display: grid; justify-content: center; width: 96%; margin: 0 auto .5em; }
#box_interview ul.notice li { list-style: none; margin: 0 0 6px; padding-left: 1em; font-size: 0.875rem; line-height: 1.6; text-indent: -1em; }


/*------------------------------------------------

	[07] アーカイブス

------------------------------------------------*/
:root {
      --easing: cubic-bezier(0.2, 1, 0.2, 1);
      --transition: 0.8s var(--easing);
      --color-base: #0c1210;
      --color-gray: #ddd;
      --color-theme: #b4e900;
      --color-theme-darken: #6e8f00;
      --color-text: #adbdb7;
      --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
        -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08),
        -1rem -1rem 1.5rem #fff;
      --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
        inset -0.8rem -0.8rem 1.2rem #fff;
      --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1),
        -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
}

#box_archives { width: 100%; margin: 0 auto; padding: 3rem 0 0; border-top: 6px solid #000; border-bottom: 6px solid #000; background: #1a4899; }
#box_archives .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
#box_archives .inr_box .inside { margin: 1rem; }
#dunk #wrapper #box_archives h3 div.sub { color: #fff; }

:focus:not(:focus-visible) {outline: 0; /* キーボード操作"以外"でフォーカスされた際はoutlineを消す */}

.l-wrapper {position: relative; z-index: 1; transform:translateZ(1px);}

main {display: block;}
.l-inner {position: relative; box-sizing: content-box; max-width: 1200px; margin: 0 auto; padding: 0 10rem;}
.l-section .l-inner {padding-top: 0rem; padding-bottom: 8rem;}
/* slider */
.slide-media, .thumb-media {position: relative; overflow: hidden;}
.slide-media img, .thumb-media img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.splide {z-index: 0; /*transform:translateZ(1px); z-index効かないモーダル対策*/}

.gallery { margin: 2rem 0 0rem; }
.gallery .l-inner {padding-bottom: 0;}
.gallery .splide-wrapper {-webkit-transition-timing-function: linear !important; transition-timing-function: linear !important;}
.gallery .slide {width: var(--slide-width); -webkit-transition: var(--transition); transition: var(--transition); -webkit-backface-visibility: hidden; backface-visibility: hidden; --slide-width: 400px;}
.gallery .slide-media {height: 300px;}
.gallery .slide-content {position: absolute; right: 0; bottom: 0; left: 0; padding: 3.2rem 1.6rem 1.6rem; -webkit-transition: var(--transition); transition: var(--transition); opacity: 0; color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, rgba(0, 0, 0, 0.8))); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);}
.gallery .slide-title { font-size: 1.2rem; line-height: 1.4; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0px 0px 3px rgba(0, 0, 0, .6), 0px 0px 3px rgba(0, 0, 0, .6), 0px 0px 3px rgba(0, 0, 0, .6), 0px 0px 3px rgba(0, 0, 0, .6); }
.gallery .slide-title span { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.1rem; }
.gallery .slide:hover {width: calc(var(--slide-width) * 1.5);}
.gallery .slide:hover .slide-content {opacity: 1;}

@media only screen and (max-width: 1024px) {
html {-webkit-text-size-adjust: 100%;}
.l-inner {padding: 0 4rem;}
.pc {display: none !important;}
}

@media only screen and (max-width: 599px) {
.pc-tab {display: none !important;}
/*.gallery {margin-bottom: 8rem;}*/
.gallery .slide {--slide-width: 150px;}
.gallery .slide-media {height: 150px;}
}

@media only screen and (min-width: 1025px) {
.tab-sp {display: none !important;}
.splide__arrow--prev::before, .splide__arrow--next::before {transition: var(--transition);}
.splide__arrow--prev:hover::before, .splide__arrow--next:hover::before {transform: scale(1.2);}
}

@media only screen and (min-width: 600px) {
.sp {display: none !important;}
}

.splide__slide { position: relative; display: inline-block; }
.splide__slide img { display: block; }
.splide__slide .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .5); z-index: 2; pointer-events: none; }
.splide__slide .play-button:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-color: transparent transparent transparent #fff; border-width: 12px 0 12px 18px; opacity: .9; }



/*------------------------------------------------

	[08] 番組内容

------------------------------------------------*/
#box_content { width: 100%; margin: 0 auto; padding: 3rem 0; border-top: 6px solid #000; }
#box_content .inr_box { width: 96%; max-width: 960px; margin: 0 auto; }
/*#dunk #wrapper #box_content .inr_box h3 div.sub { color: #fff; }*/
#box_content .inr_box .inside { margin: 1rem; }
#box_content .inr_box .inside p { margin: 1rem auto; font-size: 0.875rem; line-height: 1.8; color: #000; /*text-shadow: 0px 0px 15px rgba(0, 0, 0, 1), 0px 0px 15px rgba(0, 0, 0, 1), 0px 0px 15px rgba(0, 0, 0, 1), 0px 0px 15px rgba(0, 0, 0, 1);*/ text-align: justify; }

#box_content2 { width: 100%; margin: 0 auto; padding: 6rem 0; }


/*------------------------------------------------

	[09] SNS

------------------------------------------------*/
#box_sns { }
#box_sns .inr_box { }
.side-buttons { position: absolute; right: 16px; top: 200px; /* 初期表示位置 */ display: flex; flex-direction: column; gap: 12px; z-index: 1; transition: top 0.2s ease; /* スムーズに止まる */ }
.side-buttons.fixed { position: fixed; right: 16px; }

/* ボタンのデザイン */
.side-buttons a { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #333; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: transform 0.2s ease; }
.side-buttons a img { width: 24px; height: 24px; object-fit: contain; }
.side-buttons a.x-btn { background: #fff; border: 1px solid #000; }
.side-buttons a.insta-btn { background: #fff; border: 1px solid #000; }
.side-buttons a:hover { transform: scale(1.05); }



/*------------------------------------------------

	[10] ロゴリンク

------------------------------------------------*/
#logolink { width: 100%; margin: 0 auto; padding: 0; border-top: 6px solid #000; }
#logolink .inr_box { /*width: 96%; max-width: 960px; margin: 0 auto;*/ }
#logolink .inr_box.flb .logo_seahorses { width: calc(50% - 3px); border-right: 3px solid #000; text-align: center; }
#logolink .inr_box.flb .logo_seahorses img { width: 100%; max-width: 360px; margin: 1em auto; }
#logolink .inr_box.flb .logo_aisin { width: calc(50% - 3px); border-left: 3px solid #000; text-align: center; }
#logolink .inr_box.flb .logo_aisin img { width: 100%; max-width: 360px; margin: 1em auto; }
#logolink .inr_box.flb a { display: block; }



/*------------------------------------------------

	[99] メディアクエリ

------------------------------------------------*/
@media screen and (min-width: 769px) {
/* [02] メインビジュアル
---------------------------------*/
#main-mobile { display: none; }


}


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

section { overflow: hidden; }

/* [01] 基本・レイアウト
---------------------------------*/
#resNav { z-index: 9999; }
.bg-subnav { display: none; }
header { min-width: 150px; }
#wrapper { min-width:200px; }
.inr { width: 100%; max-width: none; padding-top: 0px; }
.vpc { display: none; }
.vsp { display: inherit; }

/* 見出し */
#dunk #wrapper h3 { font-size: 2.1rem; }


/* [02] メインビジュアル
---------------------------------*/
#main .swiper-slide .image.main02, #main .swiper-slide .image.main03 { display: none; }
#main .caption { margin: auto; /*display: none; width: 60%;*/ }

#main { display: none; }
#main-mobile { display: block; position: relative; }  /* スマホ用スライド表示 */
#main-mobile p.copy_sm { position: absolute; right: 10px; bottom: 3px; z-index: 3; font-size: 0.75rem; font-weight: 300; color: #fff; letter-spacing: 0.03em; }
#main-mobile .swiper-slide { position: relative; width: 100%; height: 100vh; /* 画面いっぱい */ }
#main-mobile .image { width: 100%; height: 100%; }
#main-mobile .image img { width: 100%; height: 100%; object-fit: cover; }
#main-mobile .caption { position: absolute; bottom: 26px; /* 下揃え */ left: 50%; transform: translateX(-50%); max-width: 90%; text-align: center; z-index: 2; background-color: rgba(255, 255, 255, 0.2); padding: 1em; }
#main-mobile .text { margin: 10px 0 5px; text-align: left; }


/* [03] プレゼント
---------------------------------*/
#box_present div.inr01 { width: 100%; order: 1; }
#box_present div.inr01 img { width: 100%; }
#box_present div.inr02 { width: 100%; margin: 1em 0 0 0; order: 2; }

#box_present div.inr02 p.cc02 { width: 100%; margin: 0; padding: 0; font-size: 1.6rem; border-bottom: none; }
#box_present p.num { width: 100%; padding: 0 0 .5em; text-align: right; font-weight: 700; font-size: 1.4rem; border-bottom: 3px solid #000; }


/* [04] 次回予告
---------------------------------*/
/* [05] 見逃し配信
---------------------------------*/
/*#box_movie { padding: 30px 0; }*/
#box_movie div.movie_box { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#box_movie div.movie_box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }


/* [06] オリジナルインタビュー
---------------------------------*/
#box_interview div.movie_box { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#box_interview div.movie_box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }


/* [07] アーカイブス
---------------------------------*/
/* [08] 番組内容
---------------------------------*/
/* [09] SNS
---------------------------------*/
/* [10] ロゴリンク
---------------------------------*/
#logolink .inr_box.flb .logo_seahorses img { width: 90%; max-width: 240px; margin: 1em auto; }
#logolink .inr_box.flb .logo_aisin img { width: 90%; max-width: 240px; margin: 1em auto; }

}



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

/* [01] 基本・レイアウト
---------------------------------*/
/* [02] メインビジュアル
---------------------------------*/
/* [03] プレゼント
---------------------------------*/
/* [04] 次回予告
---------------------------------*/
/* [05] 見逃し配信
---------------------------------*/
/* [06] オリジナルインタビュー
---------------------------------*/
/* [07] アーカイブス
---------------------------------*/
/* [08] 番組内容
---------------------------------*/
/* [09] SNS
---------------------------------*/
.side-buttons { position: absolute; right: 16px; top: 200px; display: flex; flex-direction: column; gap: 12px; z-index: 1; }
.side-buttons.fixed { position: fixed; top: 100px; }

/* [10] ロゴリンク
---------------------------------*/



}