@charset "UTF-8";
/* CSS Document */

html { /* yui edit */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}
html, body {
  height: 100%;
}

body, .contents {
  min-height: 100vh;
}
body {
	background: #222;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  /* font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif; */
  font-size: 14px;
  line-height: 1.3em;
	-webkit-text-size-adjust: 100%;
}
#loader{
	position:fixed; inset:0;
	display:flex; align-items:center; justify-content:center;
	background: linear-gradient(#8017C7, #1A0237);
	z-index:9999;
	transition:opacity .25s ease;
}
/* フェードアウト用 */
#loader.is-hidden{ opacity:0; pointer-events:none; }

  /* シンプルなCSSスピナー（枠線タイプ） */
.spinner {
  width: 40px;
  height: 40px;
  background-color: #FFF;
  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}


#wrapper{
	width: 430px;
	color: #fff;
	margin: 0 auto;
	position: relative;
	background: url("../../images/contents_bg.png") #0E237B;
}


#header{
	width: 100%;
	height: 58px;
	background: #000;
	position: relative;
	z-index: 9999;
}

#logo_suminoe{
	width: 132px;
	height: 24px;
	position: absolute;
	top: 19px;
	left:18px;
	background: url("../images/logo_suminoe.png") no-repeat top left / 100%;
	z-index: 999;
}
#logo_suminoe a{
	line-height: 24px;
	text-indent: -9999px;
	display: block;
	cursor: pointer;
}

#header dl.open_t{
	width: 90px;
	height: 44px;
	position: absolute;
	left: 273px;
	top: 8px;
	font-size: 12px;
}
#header dl.open_t dt,#header dl.open_t dd{
	text-align: center;
}
#header dl.open_t dt{
	width: 100%;
	height: 14px;
	line-height: 14px;
	border-radius: 7px;
	font-weight: 600;
	background: #fff;
	font-size: 11px;
	color:#000;
}
#header dl.open_t dd{
	width: 100%;
	padding-top: 2px;
	height: 30px;
	line-height: 120%;
}


#state{
	width: 106px;
	height: 58px;
	background-color: #B70000;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
	position: absolute;
	left: 50%;
	margin-left: -58px;
	font-weight: 900;
	font-size: 26px;
	text-align: center;
	line-height:58px;
	z-index: 2;
}
#state.stop{
	font-size: 22px;
}

.hikaisai #state {
    background: #8B8B8B;
}

.news {
    width:430px;
    background: url(../images/news.png) no-repeat #3F1AAA 10px 8px;
	background-size: 56px 14px;
    height: 28px;
    line-height: 28px;
    display: block;
    font-size: 14px;
    color: #fff;
    margin: 0px;
	position: relative;
	z-index: 2;
}
.news ul li {
    display: none;
    padding-left: 70px;
    width: 360px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 28px;
    line-height: 28px;
	color: #fff;
}
.news ul li a{
	color: #fff;
}


#footer{
	width: 100%;
	height: 100px;
	color: #fff;
	background: linear-gradient(to bottom, transparent 30%, #000 30%);
	position: fixed;
	left:0;
	bottom:0;
	z-index: 8;
}

#footer #cr{
	width: 430px;
	height: 20px;
	line-height: 20px;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	font-size: 12px;
	background: #fff;
	color: #000;
	position: absolute;
	left: 0px;
	top: 80px;
}
.hikaisai .vote{
	display: none;
}

.vote{
	width: 128px;
	height: 80px;
	background-color: #B70000;
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
	position: absolute;
	left:220px;
	top:0px;
	z-index: 3;
}

.vote a{
	width: 128px;
	height: 80px;
	display: block;
	text-indent: -9999px;
	line-height: 80px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	background: url("../images/icon_vote.png") no-repeat center 10px;
	background-size: 96px 38px;
}
.vote.ptn02 a{

	background: url("../images/icon_vote.png") no-repeat center center;
	background-size: 96px 38px;
}

#vote_state {
	background: #0041AA;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height: 28px;
	width: 100%;
	height: 28px;
	position: absolute;
	left: 0px;
	top: 52px;
	overflow: hidden;
}
#vote_state.orange{
	background: #DE6800;
}
#vote_state span {
	font-size: 16px;
	font-weight: 700;
}

/* レース終了後表示 */
#vote_state.end::before {
	content: "本日開催終了";
	background: #0041AA;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.foot_btn {
	/* width: 50%; */
	/* height: 70px; */
	position: absolute;
	top: 10px;
	z-index: 1;
}
.foot_btn ul {
	display: flex;
	gap: 4px;
}
.foot_btn ul li {
	border: 1px solid #CCC;
	border-radius: 10px;
	width: 60px;
	height: 60px;
	position: relative;
}
/* 非開催時 非表示 */
.foot_btn ul li.non {
	border: 1px solid #4D4D4D;
	pointer-events: none;
	&::before {
		opacity: 0.3;
	}
}
.foot_btn ul li a {
	line-height: 60px;
	display: block;
	text-indent: -9999px;
	position: relative;
	z-index: 1;
}


.foot_btn#foot_left{
	left: 10px;
}
.foot_btn#foot_left li:nth-child(1) {background: url("../../images/like01.svg") no-repeat center / 100% auto, #fff;}
.foot_btn#foot_left li:nth-child(2) {background: url("../../images/like02.svg") no-repeat center / 100% auto, #fff;}
.foot_btn li.foot_like {
	/* background: #fff; */
  position: relative;
	&::before,
	&::after {
		content: "";
		background: #000;
		border-radius: 10px;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	&::before {
    background: url("../../images/like_00.svg") no-repeat center / 37% auto, #fff;
		z-index: 1;
  }
}

.foot_btn#foot_right{
	right: 10px;
}
/****close****/

.foot_btn#foot_left ul li .close{
	background: #666;
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	border-radius: 100%;
	z-index: 1;
	top: -5px;
	right: -5px;
	transition: .3s;
	z-index: 2;
}
.foot_btn#foot_left ul .close::before,
.foot_btn#foot_left ul .close::after { /* 共通設定 */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px; /* 棒の幅（太さ） */
	height: 10px; /* 棒の高さ */
	background: #FFF;
}
.foot_btn#foot_left ul .close::before {transform: translate(-50%,-50%) rotate(45deg);}
.foot_btn#foot_left ul .close::after {transform: translate(-50%,-50%) rotate(-45deg);}


/***レース展望***/
.foot_btn#foot_left ul li.like01_01::before {background: url("../../images/like01_01.svg") no-repeat center / 60px, #FFF;}

/***出場予定選手一覧***/
.foot_btn#foot_left ul li.like01_02::before {background: url("../../images/like01_02.svg") no-repeat center / 60px, #FFF;}

/***出走表・前日予想PDF***/
.foot_btn#foot_left ul li.like01_03::before {background: url("../../images/like01_03.svg") no-repeat center / 60px, #FFF;}

/***モーター抽選結果***/
.foot_btn#foot_left ul li.like01_04::before {background: url("../../images/like01_04.svg") no-repeat center / 60px, #FFF;}

/***得点率ランキング***/
.foot_btn#foot_left ul li.like01_05::before {background: url("../../images/like01_05.svg") no-repeat center / 60px, #FFF;}

/***レース結果＆リプレイ***/
.foot_btn#foot_left ul li.like01_06::before {background: url("../../images/like01_06.svg") no-repeat center / 60px, #FFF;}

/***モーターランキング***/
.foot_btn#foot_left ul li.like02_03::before {background: url("../../images/like02_03.svg") no-repeat center / 60px, #FFF;}

/***ボートデータ***/
.foot_btn#foot_left ul li.like02_05::before {background: url("../../images/like02_05.svg") no-repeat center / 60px, #FFF;}

/***水面特性・進入コース別情報***/
.foot_btn#foot_left ul li.like02_06::before {background: url("../../images/like02_06.svg") no-repeat center / 60px, #FFF;}

/***開催日程***/
.foot_btn#foot_left ul li.like03_04::before {background: url("../../images/like03_04.svg") no-repeat center / 60px, #FFF;}

/***テレビ放送日程***/
.foot_btn#foot_left ul li.like03_05::before {background: url("../../images/like03_05.svg") no-repeat center / 60px, #FFF;}

/***イベント情報***/
.foot_btn#foot_left ul li.like03_06::before {background: url("../../images/like03_06.svg") no-repeat center / 60px, #FFF;}

/***アクセス***/
.foot_btn#foot_left ul li.like04_04::before {background: url("../../images/like04_04.svg") no-repeat center / 60px, #FFF;}

/***施設案内***/
.foot_btn#foot_left ul li.like04_05::before {background: url("../../images/like04_05.svg") no-repeat center / 60px, #FFF;}

/***はじめてのスミノエ***/
.foot_btn#foot_left ul li.like04_06::before {background: url("../../images/like04_06.svg") no-repeat center / 60px, #FFF;}

/***360度バーチャルビュー***/
.foot_btn#foot_left ul li.like04_07::before {background: url("../../images/like04_07.svg") no-repeat center / 60px, #FFF;}

/***空席状況***/
.foot_btn#foot_left ul li.like04_08::before {background: url("../../images/like04_08.svg") no-repeat center / 60px, #FFF;}

/***大阪支部名鑑***/
.foot_btn#foot_left ul li.like05_05::before {background: url("../../images/like05_05.svg") no-repeat center / 60px, #FFF;}

/***大阪支部優勝報告***/
.foot_btn#foot_left ul li.like05_06::before {background: url("../../images/like05_06.svg") no-repeat center / 60px, #FFF;}

/***応援メッセージ***/
.foot_btn#foot_left ul li.like05_07::before {background: url("../../images/like05_07.svg") no-repeat center / 60px, #FFF;}

/***電投バトル***/
.foot_btn#foot_left ul li.like06_05::before {background: url("../../images/like06_05.svg") no-repeat center / 60px, #FFF;}

/***万舟券バトル***/
.foot_btn#foot_left ul li.like06_06::before {background: url("../../images/like06_06.svg") no-repeat center / 60px, #FFF;}

/***キャッシュレス投票「JUMPY CARD+」***/
.foot_btn#foot_left ul li.like06_07::before {background: url("../../images/like06_07.svg") no-repeat center / 60px, #FFF;}

/***メールマガジン登録・解除***/
.foot_btn#foot_left ul li.like06_08::before {background: url("../../images/like06_08.svg") no-repeat center / 60px, #FFF;}

/***ジャンピーラブ音源ダウンロード***/
.foot_btn#foot_left ul li.like06_09::before {background: url("../../images/like06_09.svg") no-repeat center / 60px, #FFF;}

/***お問い合わせ***/
.foot_btn#foot_left ul li.like06_10::before {background: url("../../images/like06_10.svg") no-repeat center / 60px, #FFF;}

/***よくある質問***/
.foot_btn#foot_left ul li.like06_11::before {background: url("../../images/like06_11.svg") no-repeat center / 60px, #FFF;}

/***推奨環境***/
.foot_btn#foot_left ul li.like06_12::before {background: url("../../images/like06_12.svg") no-repeat center / 60px, #FFF;}



#page_top{
	width: 60px;
	height: 38px;
	position: absolute;
	top: 30px;
	right: 0px;
	display: none;
	background: url("../../images/page_up.png") no-repeat center center /100%;
	opacity: 0.8;
}



/* =========================================================
   Start メニュー（旧ヘッダー）  ※既存を尊重しつつ最小修正
   ========================================================= */
.all_menu {
	background: url("../../images/menu_btn.svg") no-repeat center / 100%;
	width: 52px;
	height: 52px;
	position: absolute;
	right: 6px;
	top: 4px;
	z-index: 999;
}

#menu_close{
    width: 40px;
    height: 40px;
    position: fixed;
    right: 6px;
    top: 4px;
    z-index: 9;
    background: url("../../images/menu_btn_on.png") no-repeat 7px 7px /100%;
    display: none;
}
.nav-open #menu_close { display: block; }
.hamburger_btn.is-hide {
  display: none;
}
/* 左右パネル＆下部 */

.all_right{
    width: 378px;
	background: #00B2A5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS慣性 */
    scroll-behavior: smooth;           /* 右パネル内のスムーススクロール */
	padding: 2vh 10px;
}
.all_bottom{
    width: 100%;
    height: 100px;
	background: rgba(50,50,50,0.9);
}
.all_bottom dl dt,.all_bottom dl dd{
	float: left;
	height: 34px;
	font-size: 12px;
	font-weight: 500;
	border-right: 1px solid #666;
	margin-top: 10px;
}
.all_bottom dl dt a,.all_bottom dl dd a{
	text-decoration: none;
	color: #fff;
	display: block;
}


.all_bottom dl dt{
	padding: 0 7px;
	line-height: 34px;
}
.all_bottom dl dd{
	line-height: 130%;
	padding: 0 7px;
}
.all_bottom dl dt:first-child, .all_bottom dl dt:nth-child(5){
	border-left: 1px solid #666;
	margin-left: 10px;
}
.home_btn{
	font-weight: 300;
	font-size: 20px;
	height: 80px;
	line-height: 80px;
	padding-left: 52px;
	border-bottom: 3px solid rgba(0,0,0,0.2);
}


.menu_sp_logo{
	width: 262px;
	height: 30px;
	position: absolute;
	top: 17px;
	left: 8px;
	background: url("../../images/logo_suminoe.png") no-repeat top left / 100% ;
}

.menu_chat{
	width: 70px;
	height: 100px;
	position: absolute;
	top:16px;
	left:284px;
	background: url("../../images/menu_chat.png") no-repeat top left / 100% ;
	z-index: 9;

}


.menu_chat a{
	display: block;
	text-indent: -9999px;
	line-height: 110px;
}
/* =========================================================
   Start ナビゲーション  ※幅964px固定パネル
   ========================================================= */
.headerNav {
	position: fixed;
	right: -394px;
	top: 0;
	width: 394px;
	/* height: 100vh; */
	height: 100dvh;
	background-color: rgba(0, 136, 126, 0.9);
	-webkit-transition: all .6s;
	transition: all .6s;
	z-index: 998;
	overflow-y: auto;
	overflow-x: hidden;
}
/* 開いた状態 */
.nav-open .headerNav { right: 0; }

/* 既存（未使用でも残す） */
.navList { margin: 0; padding: 0; text-align: center; display: block; }
.navItem { padding: 1rem 1rem 0; }
.navItem a {
    display: block;
    border-bottom: 1px solid #eee;
    color: #707070;
    padding: 4rem 0 1rem;
    width: 100%;
    margin: 0 auto;
}

/* =========================================================
   Start ハンバーガーボタン（画像ボタン運用）
   ========================================================= */
.hamburger_btn {
    position: relative;
    width: 52px;
    height: 52px;
    cursor: pointer;
    z-index: 999;
}

/* 背景マスク */
.black-bg {
    display: block;
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    z-index: 10;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .6s;
    transition: all .6s;
    cursor: pointer;
}
.nav-open .black-bg {
    opacity: .8;
    visibility: visible;
}

/* 旧：三本線→バツ（画像運用のため実質未使用。残しても害なし） */
.nav-open .hamburger_line_1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 25px; }
.nav-open .hamburger_line_2 { width: 0; left: 50%; }
.nav-open .hamburger_line_3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; }

/* =========================================================
   右パネル内：セクション＆タイルの体裁（追加）
   ========================================================= */
#content_list { color: #fff; }             /* 右背景#333上での文字色 */
.content_section {
    padding: 0px 12px 16px;
}

#sec02 .cate_head{
	 background: url("../../images/menu_arrow_w_b.png") no-repeat 300px center ;
}

.content_section:last-child { border-bottom: none; }
.content_section h3 {
    margin: 0 0 12px;
    font-size: 16px;
    letter-spacing: .02em;
    color: #E9FFFB;
}
.btn_grid {
    width:100%;
}
.btn_grid ul li a {
width: 106px;
height: 51px;
margin-right: 10px;
margin-bottom: 10px;
display: block;
border-radius:6px;
text-decoration: none;
color: #FFF;
background: rgba(0,0,0,0.3);
border: 1px solid #18877B;
float: left;
font-size: 16px;
font-weight: 600;
padding-top: 9px;
text-align: center;
line-height: 130%;
}
.btn_grid ul li.line_1 a{
	height: 40px;
	padding-top: 20px;
}
.btn_grid ul li.cell_2 a{
	width: 224px;
}

#menu_sp_h{
	width: 100%;
	height: 120px;
	position: relative;
}

ul#menu_sns{
	width: 246px;
	position: absolute;
	left:15px;
	top: 58px;
}
ul#menu_sns li{
	width: 44px;
	height: 44px;
	float: left;
	margin-left: 6px;
}
ul#menu_sns li a{
	line-height: 48px;
	display: block;
	text-indent: -9999px;
}
ul#menu_sns li:nth-child(1){
	 background: url("../../images/sns_01_w.png") no-repeat top left / 100%;
	margin-left: 0px;
}
ul#menu_sns li:nth-child(2){
	 background: url("../../images/sns_02_w.png") no-repeat top left / 100%;
}
ul#menu_sns li:nth-child(3){
	 background: url("../../images/sns_03_w.png") no-repeat top left / 100%;
}
ul#menu_sns li:nth-child(4){
	 background: url("../../images/sns_04_w.png") no-repeat top left / 100%;
}
ul#menu_sns li:nth-child(5){
	 background: url("../../images/sns_05_w.png") no-repeat top left / 100%;
}



.cat_btn .cate{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #005750;
}
.cat_btn .cate span{
  font-size: 18px;
}
.cat_btn.on .cate{
	color: #fff;
}

dl.cate_head{
	width: 100%;
	height: 70px;
}
dl.cate_head a{
	display: block;
}
dl.cate_head dt,dl.cate_head dd{
	float: left;
}
dl.cate_head dt{
width: 74px;
height: 70px;
line-height: 63px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 64px;
color: #005750;
}
dl.cate_head dd span{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #005750;
}
dl.cate_head dd{
	height: 84px;
	font-weight: 700;
	color: #fff;
	font-size: 28px;
	line-height: 110%;
}