@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.header-container-in {
	padding: 0.8rem 0;
}

.main {
	background-color: transparent;
	padding: 0 !important;
	margin: 0 auto;
}

.top_wrapper {
	padding: 0 2vw;
}

p {
	color: white;
}

h3 {
	color: white;
}

.article h3 {
	border: 0px solid;
	padding: 0;
	margin: 10px 0;
}

.header-container {
  background-color: transparent !important;
}

/* 固定（スクロール後）のヘッダー */
.header-container.sticky {
  background-color: black !important;; /* 好きな色に変更 */
	opacity: 0.85;
}

.footer{
	background-color: transparent
}

/*背景画像*/
body {
  position: relative;
  z-index: 0;
  background: none; /* ← body本体には背景を設定しない */
}

body::before {
  content: "";
  position: fixed; /* ← iOSでも有効な固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/wp-content/uploads/2025/10/bk_test6.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* ← コンテンツの背面に配置 */
}

/*グローバルメニュー*/
#navi .navi-in a:hover {
	background-color: #ea5506;
}

.navi {
	background-color: transparent;
}

.item-label {
	color: white;
}

/*モバイルグローバルメニュー*/
#menu-nav_sp li:last-child a.menu-button-in {
  color: #ff6900 !important;
}

#menu-nav_sp li:last-child a.menu-button-in .menu-caption {
	font-weight: bold;
}

/*見出し*/
.title_group {
  display: flex;           /* 縦並びにする */
  flex-direction: column;  /* 子要素を縦に積む */
  justify-content: flex-start; /* 上寄せ */
  align-items: flex-start;     /* 左寄せ */
	line-height: 1;             /* 行間を調整、必要に応じて変更 */
  width: 100%;             /* 横幅いっぱいに広げる */
  box-sizing: border-box;  /* paddingを含めて幅を計算 */
}

.title_sub {
	font-size: clamp(14px, 5vw, 26px) !important;
  padding: 3px 10px !important;
  background-color: white;
	color: black;
	font-weight: bold;
	margin-bottom: 0 !important;
}

.title {
	font-size: clamp(16px, 7vw, 38px) !important;
  padding: 0px 10px;
  background-color: white;
	color: black;
}


/*TOPレース情報カード*/
.top_card_schedule p {
	line-height: 1;
	padding:0;
	margin: 0;
}

.top_card_schedule_date {
	font-size: clamp(14px, 4.5vw, 22px);
	font-weight: bold;
	margin: 0.9rem 0 !important;
}

.top_card_schedule_name {
	font-size: clamp(16px, 6.5vw, 32px);
	font-weight: bold;
	margin-bottom: 0.7rem !important;
}

.top_card_schedule_discription {
	line-height: 1.4 !important;
	margin-bottom: 0.7rem !important;
}


/*TOP新着情報カード*/
.wp-block-latest-posts__post-title {
	background-color: #ea5506;
	color: white;
	font-weight: bold;
	line-height: 0;
		font-size: clamp(16px, 4.2vw, 20px);
}

.wp-block-latest-posts__post-title:hover {
	background-color: white;
	color: black;
	font-weight: bold;
}

.wp-block-latest-posts__post-excerpt {
	color: white;
		font-size: clamp(12px, 3vw, 16px);
}

.wp-post-image {
	opacity: 0.6;
}


.wp-post-image:hover {
		opacity: 1;
	  transition: opacity 0.5s ease-in-out; /* ← トランジションでふわっと */
}

/*レース*/
.title_race_group {
	margin-bottom: 0 !important;
}

.race_card_frame_ashiya {
  position: relative;   /* 子要素を絶対配置可能に */
  overflow: hidden;
}

.race_card_frame_ashiya img {
  display: block;
  width: 100%;
  height: auto;
}

.race_card_frame_ashiya .title_race_group {
  position: absolute;
  bottom: 0;            /* 下揃え */
  left: 0;              /* 左揃え */
  text-align: left;     /* 左揃え */
	  display: flex;           /* 縦並びにする */
  flex-direction: column;  /* 子要素を縦に積む */
  align-items: flex-start;     /* 左寄せ */
	  z-index: 2; /* テキストが上に来るように */
}

.race_card_frame_ashiya::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(100, 100, 100, 0.6); /* グレー半透明 */
  mix-blend-mode: multiply;  /* 乗算で暗くする */
  z-index: 1; /* 画像の上、文字の下に来るように */
	  transition: opacity 0.5s ease-in-out; /* ← トランジションでふわっと */
}

.race_card_frame_ashiya:hover::before {
  opacity: 0; /* ホバー時に非表示 */
}

.race_card_frame_sekiahills {
  position: relative;   /* 子要素を絶対配置可能に */
  overflow: hidden;
}

.race_card_frame_sekiahills img {
  display: block;
  width: 100%;
  height: auto;
}

.race_card_frame_sekiahills .title_race_group {
  position: absolute;
  bottom: 0;            /* 下揃え */
  left: 0;              /* 左揃え */
  text-align: left;     /* 左揃え */
	  display: flex;           /* 縦並びにする */
  flex-direction: column;  /* 子要素を縦に積む */
  align-items: flex-start;     /* 左寄せ */
	  z-index: 2; /* テキストが上に来るように */
}

.race_card_frame_sekiahills::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(100, 100, 100, 0.6); /* グレー半透明 */
  mix-blend-mode: multiply;  /* 乗算で暗くする */
  z-index: 1; /* 画像の上、文字の下に来るように */
	  transition: opacity 0.5s ease-in-out; /* ← トランジションでふわっと */
}

.race_card_frame_sekiahills:hover::before {
  opacity: 0; /* ホバー時に非表示 */
}

.race_card_frame_uminaka {
  position: relative;   /* 子要素を絶対配置可能に */
  overflow: hidden;
}

.race_card_frame_uminaka img {
  display: block;
  width: 100%;
  height: auto;
}

.race_card_frame_uminaka .title_race_group {
  position: absolute;
  bottom: 0;            /* 下揃え */
  left: 0;              /* 左揃え */
  text-align: left;     /* 左揃え */
	  display: flex;           /* 縦並びにする */
  flex-direction: column;  /* 子要素を縦に積む */
  align-items: flex-start;     /* 左寄せ */
	  z-index: 2; /* テキストが上に来るように */
}

.race_card_frame_uminaka::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(100, 100, 100, 0.6); /* グレー半透明 */
  mix-blend-mode: multiply;  /* 乗算で暗くする */
  z-index: 1; /* 画像の上、文字の下に来るように */
	  transition: opacity 0.5s ease-in-out; /* ← トランジションでふわっと */
}

.race_card_frame_uminaka:hover::before {
  opacity: 0; /* ホバー時に非表示 */
}

.title_race_sub {
	font-size: clamp(14px, 5vw, 26px);
  padding: 3px 10px !important;
  background-color: black;
	color: white;
	font-weight: bold;
	margin-bottom: 0 !important;
	line-height: 1;
}

.title_race {
	font-size: clamp(16px, 7vw, 38px);
  padding: 0px 10px;
  background-color: black;
	color: white;
}

/*googlemapsレスポンシブ*/
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9の比率（4:3にしたいなら75%） */
  height: 0;
  overflow: hidden;
  margin-bottom: 5vw
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/*レース_芦屋ステージ*/
.race_ashiya_group {
	background: url(/wp-content/uploads//2025/10/ashiya_top.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 43vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;
}

/*レース_セキアヒルズステージ*/
.race_sekiahills_group {
	background: url(/wp-content/uploads/2025/10/sekiahills_02-e1760783129196.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 43vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;
}

/*レース_海の中道ステージ*/
.race_uminaka_group {
	background: url(/wp-content/uploads/2025/11/uminaka.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 43vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;
}

.title_sub_race_detail {
	font-size: clamp(14px, 4.5vw, 33px);
  padding: 3px 10px !important;
  background-color: black;
	color: white;
	font-weight: bold;
	margin-bottom: 0 !important;
	line-height: 1;
}

.title_race_detail {
	font-size: clamp(20px, 7vw, 48px);
  padding: 0px 10px;
  background-color: black;
	color: white;
}

.race_info_group {
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1.3 !important;
}

.title_race_info {
	font-size: clamp(12px, 5vw, 28px);
  padding: 0px 10px;
  background-color: white;
	color: black;
	font-weight: bold;
	margin-bottom: 0 !important;
}

.race_info_detail {
	font-size: clamp(12px, 5vw, 28px);
  padding: 0px 10px;
  background-color: white;
		color: black;
	font-weight: bold;
		line-height: 1.3 !important;
	margin-bottom: 1.2vw !important;
	max-width: 100%
}

/*ステージ タイムテーブル*/
.timetable {
	background-color: white;
}

.timetable td:first-child {
	width: 25%
}

/************************************
** ボタンデザイン
************************************/
.btn_entry a {
  display: inline-block;
  padding: 16px 10vw;
  background-color: #ea5506;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
	margin-bottom: 3vw;
}

.btn_entry a:hover {
  padding: 16px 19vw; /* ← 横幅を広げる */
  background-color: #fff;
  color: #000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/*リンク系文字色変更*/
a {
	text-decoration: none;
}

.credit a {
	text-decoration: none;
	color: #ea5506;
}

.sbi_feedtheme_header_text h3 {
	text-decoration: none;
	color: #ea5506;
    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;
    border-bottom: 0px solid;
}

.sns-follow-message {
	color: #ea5506;
}

/*author-info非表示*/
.author-info {
	display: none;
}

/*開催概要ページ*/
.race_guidelines table {
	width: 100%;
}

.race_guidelines table {
	color: white;
}

.race_guidelines tr:nth-child(even) {
	background-color: black;
}

.race_guidelines tr:nth-child(odd) {
	background-color: black;
}

.race_guidelines td:nth-child(odd) {
	width: 10%;
	text-align: left;
	padding: 1em 1em;
	border:0px solid;
	border: 1px solid;
}

.race_guidelines td:nth-child(even) {
	width: 70%;
	padding: 1em;
	border:0px solid;
	border: 1px solid;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

body {
   background-attachment: scroll; /* iPhoneでバグ防止 */
}
	
/*トップロゴ画像*/
.logo-header img {
    width: 100px;
    height: auto;
}

/*背景画像*/
body {
  position: relative;
  z-index: 0;
  background: none; /* ← body本体には背景を設定しない */
}

body::before {
  content: "";
  position: fixed; /* ← iOSでも有効な固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/wp-content/uploads/2025/10/bk_test6.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* ← コンテンツの背面に配置 */
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

body {
   background-attachment: scroll; /* iPhoneでバグ防止 */
}
	
/*レース*/
.race_card_frame_ashiya {
  position: relative;   /* 子要素を絶対配置可能に */
  overflow: hidden;
}

.race_ashiya_group {
	background: url(/wp-content/uploads/2025/10/ashiya_top.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 65vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;  
}
	
.race_sekiahills_group {
	background: url(/wp-content/uploads/2025/10/sekiahills_02-e1760783129196.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 65vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;  
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.race_ashiya_group {
	background: url(/wp-content/uploads/2025/10/ashiya_top.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 70vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;  
}
	
.race_sekiahills_group {
	background: url(/wp-content/uploads/2025/10/sekiahills_02-e1760783129196.jpg) no-repeat center / cover rgba(0,0,0,0.5);
	height: 70vw;
    background-blend-mode:darken;
	  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 縦方向の下揃え */
		line-height: 1;  
}	line-height: 1;  
}

/************************************
** 投稿ページ
************************************/
.single .entry-title,
.single .entry-date {
	color: white;
}

.single .content {
	margin: 0 auto;
	padding: 0 2vw;
}

.post .entry-title {
	text-align: center;
	
}