@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
*/

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

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

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

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


/* 共通設定
------------------------------ */
:root {
	--black: #000;
	--white: #fff;
	--red: #de111d;
	--navy: #001e55;
}
.article h2 { /* h2 */
	padding: 25px 0 8px;
	background-color: transparent;
}
.article h3 { /* h3 */
	border: none;
	padding: 0;
}
.footer-meta { /* フッターの投稿者名を非表示 */
	display: none;
}
.font-bold {
	font-weight: bold;
}
a {
	-webkit-tap-highlight-color: transparent; /* スマホのリンクハイライト非表示 */
    transition : all 0.3s ease 0s;
}
button { /* ボタンのリセット */
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

/* パンくずリストのアイコン非表示
------------------------------ */
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file {
	display: none;
}

/* 打ち消し
------------------------------ */
.entry-content>*,
.body .article {
	margin-bottom: 0 !important;
}
.content {
	margin-top: 0; /* ヘッダーとコンテンツの余白 */
	overflow: hidden;
	width: 100%;
	background-image: linear-gradient(to bottom, #d6e6f0 0%, #fff 60%);
	background-attachment: fixed;
}
.main {
	padding: 0;
	border: none;
}
.page .date-tags { /* 投稿日時・更新日を非表示 */
	display: none;
}
.entry-content {
	margin: 0;
}
.header-container,
.fixed-header {
	display: none;
}

/* ▼ 404 Not Found
------------------------------------------------------------------------------------------------------------------------------------------------------ */
.error404 .entry-title { /* ページタイトル非表示 */
	display: none;
}
.error404 .not-found { /* 404画像非表示 */
	display: none;
}
.error404 .wrap { /* フルワイド化 */
	width: 100%;
}
main {
	font-size: 18px;
	color: var(--black);
}
.main {
	background-color: transparent;
}
@media screen and (max-width: 834px) {
	.main {
		padding: 0 !important;
	}
}
#footer { /* フッター非表示 */
  	display:none;
}
.article p {
	margin-bottom: 0 !important;
}
.wnc2025-contents { /* 3カラムに分割 */
	width: 100%;
	display: grid;
	grid-template-columns: 340px 375px 340px;
	justify-content: center;
}

/* 背景画像（iOS Safari対応）
------------------------------ */
.wnc2025 {
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
  	position: relative;
}
.fix-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
	z-index: -1;
}
.fix-bg::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url("https://wf-japan.com/wp-content/uploads/bg-map-scaled.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center bottom;
}

/* H2 見出し
------------------------------ */
.wnc2025 h2 {
	position:relative;
	padding: 13px 16px !important;
	margin-bottom: 0 !important;
	width: 100%;
	font-size: 26px !important;
	color: var(--white);
	line-height: 1.15;
	background-color: var(--navy) !important;
	border-bottom: 4px solid #d2d2d7;
	border-radius: 0px; /* 打ち消し */	
}
.wnc2025 h2::before { /* 赤い線 */
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 70px;
	height: 0;
	border-bottom: 4px solid var(--red);
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}
.wnc2025 h2::after { /* グレーの線 */
	content: "";
	position: absolute;
	bottom: -4px;
	left: 70px; /* 赤線の分ズラす */
	width: calc(100% - 70px);
	height: 4px;
}
.h2__wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.h2-shadow { /* 見出し部分だけ左右の影が薄く見える対策 */
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	z-index: 0;
}
.h2-shadow.h2-shadow--left {
  	left: 0;
	box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.2);
}
.h2-shadow.h2-shadow--right {
  	right: 0;
	box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.2);
}
.h2__wrapper h2 {
	position: relative;
	background: var(--navy);
	padding: 0;
	z-index: 1;
}

/* H3 見出し
------------------------------ */
.error404 .center-column h3 {
	margin-bottom: 8px !important;
	padding: 4px 0 8px;
	font-size: 20px;
	color: var(--red);
	border-bottom: 1px solid #ccc;
	background-color: transparent;
}

/* アイコン
------------------------------ */
.calendar-icon {
	position: relative;
	padding-left: 1.2em;
	line-height: 1.5;
}
.calendar-icon::before {
	position:absolute;
	display: block;
	content: '';
	top: 6px;
	left: 0;
	bottom: 0;
	width: 16px; 
	height: 16px;
	background-image:
		url(https://wf-japan.com/wp-content/uploads/icon-calendar.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
.national-flag {
	position: relative;
	padding-left: 24px;
	line-height: 1.5;
}

/* 外部リンク
------------------------------ */
.external-link {
	position: relative;
	margin: .5em 0;
	padding-left: 24px;
	font-size: 18px;
	line-height: 1.5;
}
.external-link a::before {
	position: absolute;
	top: 15px;
	left: 0;
	transform: translateY(-50%);
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image:
		url(https://wf-japan.com/wp-content/uploads/icon-right-arrow.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

/* 左カラム
------------------------------ */
.left-column__schedule { /* 大会スケジュール画像 */
	position: fixed;
	top: 24px;
	left: calc(50% - 358px);
	transform: translateX(-50%);
	width: 340px;
  	height: 100%;
	z-index: -1;
}
.left-column__link {
	position: fixed;
	top: 350px;
	left: calc(50% - 372px);
	transform: translateX(-50%);
	width: 310px;
  	height: 100%;
}
.left-column__banner:not(:last-child) {
	margin-bottom: 14px;
}
.left-column__facebook img {
	display: block;
	margin: 82px auto 0;
}

/* 右カラム
------------------------------ */
.right-column {
	position: fixed;
	top: 24px;
	left: calc((100% / 2) + 187px);
	height: 100%;
}
.right-column::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		url("https://wf-japan.com/wp-content/uploads/soccer-ball.webp");
	background-size:
		184px auto;
	background-repeat:
		no-repeat;
	background-position:
		bottom 96px right 93px;
	z-index: -1;
}
.right-column ul {
	margin: 0 auto 0 40px;
	padding: 24px;
	width: 300px;
	list-style: none;
	border-radius: 10px;
	background-color: var(--white);
}
.right-column ul li a {
	font-size: 18px;
	font-weight: bold;
	color: var(--black);
	text-decoration: none;
}
.right-column ul li a:hover {
	color: var(--red);
}
.right-column ul li {
	margin: 0 !important;
	line-height: 1.5;
	text-align: center;
}
.right-column ul li:not(:last-child) {
	padding-bottom: 16px;
}

/* メインビジュアル
------------------------------ */
.center-column {
	display: flex; /* 並び順を変えるためflexに */
    flex-direction: column; /* 縦方向に並べる */
	min-height: 100vh; /* ▲ コンテンツが少なくてもフッターを画面の下に表示 */
	background: 
		url("https://wf-japan.com/wp-content/uploads/bg.svg");
    background-size:
		cover;
    background-position:
		center;
	background-repeat:
		no-repeat;
	background-attachment: fixed;
	background-color: #e9eef2;
	box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.4);
}
.main-visual {
    display: none; /* PCサイズでは非表示 */
}
#pc-about {
	order: 1; /* orderを1にする */
}
#pc-notice {
	order: 2
}
.scroll-text {
	order: 3;
}
#pc-overview {
	order: 4;
}
#pc-greeting {
	order: 5;
}
#pc-member {
	order: 6;
}
#pc-last-time {
	order: 7;
}
#pc-sponsorship {
	order: 8;
}
#pc-contact {
	order: 9;
}
#pc-trial-session {
	order: 10;
}
.center-link {
	order: 11;
}
.center-footer {
	order: 12;
}
.wnc2025 {
	background-color: transparent;
}
.main-visual { /* MVの下の余白 */
	margin-bottom: 24px;
	background-color: transparent;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.09);
}

/* 404 Not Found
------------------------------ */
.notfound {
	padding: 16px;
	margin: 0 0 56px;
	background-color: var(--white);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.09);
}

/* リンク
------------------------------ */
.center-link {
	padding: 16px 16px 0;
	margin: 0 0 56px;
	height: auto;
}
.center-link__facebook img {
	display: block;
	margin: 0 auto;
	width: 60px;
	height: 60px;
}
.center-link__banner {
	margin: 24px 0 0;
	width: 100%;
	height: auto;
}

/* フッター
------------------------------ */
.center-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: auto;
	width: 100%;
	height: 48px;
	font-size: 16px;
	color: var(--white);
	text-align: center;
	background-color: var(--black);
}

/* レスポンシブ
------------------------------ */
@media (max-width: 1199px) { /* 1199px以下で */
	.error404 .wnc2025 {
		
	}
	.sp-top__containar {
		display: block;
	}
	.error404 .right-column { /* 右カラム */
		display: none;
	}
	.error404 .left-column { /* 左カラム非表示 */
		display: none;
	}
	.error404 .wnc2025::before { /* 世界地図の背景非表示 */
		background-image: none;
	}
	.error404 .wnc2025-contents { /* 1カラムに */
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		justify-content: center;
		column-gap: 0;
	}
}
/* ▲ 404 Not Found
------------------------------------------------------------------------------------------------------------------------------------------------------ */