@charset "utf-8";

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

	Type: 下層 styles

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

/* ページトップのイメージ画像
----------------------------------------------- */
.page_top_image img {
	width: 100%;
}


/* パンくず
----------------------------------------------- */
.breadcrumb {
	width: 100%;
	margin-bottom: 80px;
	padding-top: 12px;
}
.breadcrumb a, .breadcrumb {
	font-size: 1.2rem;
}

.breadcrumb ul li{
	display:inline;/*横並びにする*/
}



/* 共通
----------------------------------------------- */

/* スパム対策（現状お問い合わせページのみ使用） */
/* メールアドレスの間にダミーテキストを記載しその部分は非表示にする */
.no-spam {
	display: none;
}

/* 下層用の上下余白 */
/* 极速体育直播_极速体育app-官网とサイトマップの15pxを加味して、pb80にする */
.mt80_pb80 {
	margin-top: var(--space80);
	padding-bottom: 65px; /* 80 */
}

/* テキスト左揃え（ボタンを左揃えにするときに使用） */
.left {
	text-align:left!important;
}

/* テキストを赤にする */
.red {
	color: var(--color-red);
}

/* 下線 */
.border_b {
	border-bottom: 1px solid var(--color-default-text);
}

/* aタグ */
.general_content a {
	color:  var(--color-link);
	border-bottom: 1px solid var(--color-link);
}

/* 画像 */
/* 左揃えにするとfloatがつくため下の要素と被らないようにするため */
.wp-block-image {
    overflow: hidden;
}

.general_content img {
	max-width: 100%;
	display: block;
}
.general_content .img_w800 img, .general_content img.img_w800 {
	max-width: 800px!important;
	width: 100%;
}
.general_content .img_w1000 img { /* 横スクロールする画像 */
	max-width: 1000px;
	width: 100%;
}



/* ------------ 見出し ------------ */
.general_content h1, .general_content h2, .general_content h3, .general_content h4, .general_content h5 {
	font-weight: var(--fw700);
}

.general_content h1, .general_content h2 {
	line-height: 1.3;
}
.general_title {
	margin-bottom: var(--space80);
}
.general_content .general_title h1 {
	font-size: var(--fz42);
	text-align: center;
}
/* 2色の下線 */
.general_content .border-container {
	height: 4px; /* ボーダーの高さ */
	margin-top: var(--space40-34);
}
.general_content .border-container::before,
.general_content .border-container::after {
	content: '';
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}
.general_content .border-container::before {
	left: 0;
	background-color: var(--color-skyblue); /* 左側の色 */
}

.general_content .border-container::after {
	right: 0;
	background-color: var(--color-bluish-black); /* 右側の色 */
}
/* 2色の下線　ここまで */

.general_content h2 {
	font-size: var(--fz28);
	position: relative;
	padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
	margin-top: var(--space80);
	margin-bottom: var(--space40);
}
.general_content h2::before {
	content: '';
	width: 10px;
	position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
	background: var(--color-skyblue);
	display: block;
}

.general_content h3 {
	font-size: var(--fz24);
	margin-top: var(--space40);
	margin-bottom: var(--space40);
	padding-bottom: 10px; /* 20px分 */
	border-bottom: 2px solid var(--color-skyblue);
}

.general_content h4 {
	font-size: var(--fz20);
	margin-top: var(--space40);
	padding: 2px 20px;
	background: var(--color-bg_gray);
}

.general_content h5 {
	font-size: var(--fz18);
	margin-top: var(--space30_23);
	margin-bottom: var(--space20_13);
	color: var(--color-skyblue);
}

.general_content h6 {
	font-size: var(--fz18);
	margin-top: var(--space20_13);
	margin-bottom: var(--space20_13);
	color: var(--color-red);
}
/* ------------ 見出し　ここまで ------------ */


/* ------------ pとリスト ------------ */

.general_content p, .general_content ul, .general_content ol {
	margin-top: var(--space20_14);
	margin-bottom: var(--space20_14);
}
.general_content p, .general_content li {
	font-size: var(--fz16);
}

.general_content li:not(li:last-child) {
    padding-bottom: 8px;
}

/* 黒点 */
.general_content ul {
	list-style: disc;
    padding-left: 20px;
}
/* 白点 */
.general_content ul.li_circle li { 
	list-style: circle inside;
	padding-left: 2em;
}
/* 数字 */
.general_content ol { 
	list-style: decimal;
    padding-left: 27px;
}

/* --- テーブル内のリスト --- */
.general_content table li {
	padding-left: 1em;
    text-indent: -1em;
}
/* 黒点 */
.general_content table ul li {
	list-style: disc inside;
}
/* 白点 */
.general_content table ul.li_circle li { 
	list-style: circle inside;
	padding-left: 2em;
	text-indent: -1em;
}
/* 数字 */
.general_content table ol li { 
	list-style: decimal inside;
}
/* --- テーブル内のリスト　ここまで --- */

/* 水色中央揃えテキスト */
.skyblue_center_title {
	font-size: var(--fz24)!important;
	font-weight: var(--fw700)!important;
	color: var(--color-skyblue)!important;
	text-align: center!important;
	margin-top: var(--space30)!important;
	margin-bottom: var(--space20)!important;
}


/* ------------ テーブル ------------ */
/* 基本 */

/* プラグインで作成したときの枠線色 */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th, .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
	border: 1px solid var(--color-gray)!important;
}
.general_content table {
	width: 100%;
	margin-top: var(--space40);
	margin-bottom: var(--space40);
}
.general_content table tbody {
	border: 1px solid var(--color-gray)!important;
}
.general_content table tr {
	font-size: var(--fz16);
	border-bottom: 1px solid var(--color-gray)!important;
}
.general_content table th {
	color: var(--color-white);
	background: var(--color-bluish-black)!important;
	text-align: left;	
}
.general_content table th, .general_content table td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
	border-right: 1px solid var(--color-gray)!important;
	vertical-align: top!important;
	padding: var(--space20_14) var(--space20)!important;
}

/* テーブル内tdの余白はtdでつけるので、元々ついていたmarginはトル */
.general_content table td p, .general_content table td ul {
	margin: 0;
}


/* --- テーブルのパターン --- */
/* テーブルのサイズ半分 */
.general_content table.half, .general_content .half table {
	max-width: 680px!important;
}

/* thとtdを丁度半分で区切る */
.general_content table.half th, .general_content table.th50 th, .general_content .half th, .general_content .th50 th { 
	width: 50%;
}

/* th（見出しセル）を、20%の割合にする。td（説明）は80% */
.general_content table.th20 th, .general_content .th20 th {
	width: 20%;
}

/* thを太文字にする */
.th_bold table th {
	font-weight: var(--fw700)!important;
}


/* サイズ指定 */
.w20 { min-width: 341px; width: 20%;}
.w27 { width: 27%;}
.w80 { width: 80%;}

.w10 { width: 10%;}
.w100 {	width: 100%;}

.w15 { min-width: 273px; width: 15%;}
.w85 { width: 85%;}


/* ---  スクロールバー ---  */
/* スクロールバーを手動でつけたい場合、.scrollをtableにつける */
.scroll {
	overflow-x: auto;
	padding-bottom: 15px;
	display: block;
}
.scroll th, .scroll td {
	white-space: nowrap;
}
/* スクロールバー全体を対象にする */
.scroll::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
}
/* スクロールバーの背景部分をカスタマイズ */
.scroll::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
}
/* スクロールバーの操作部分をカスタマイズ */
.scroll::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
}
/* スクロールバーの操作部分にホバーした時のスタイル */
.scroll::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
}
/* ---  スクロールバー　ここまで ---  */

/* ------------ テーブル　ここまで ------------ */


/* ------------ 横並び ------------ */

/* 2列3列　共通 */
.flex2, .flex3 {
	margin-bottom: var(--space40);
}
.flex2 .item img, .flex3 .item img {
	width: 100%;
    max-width: 400px;
	margin-bottom: var( --space20_12)!important;
}
.flex2 h4, .flex3 h4 {
	margin: 0!important;
	padding: 0 0 2px 0!important; /* pが下にくる前提。fz18で-8、fz16で-6の高さをひくと合計20pxの余白 */
	background: none!important;
}
.flex2 p, .flex3 p {
	padding-top: 2px!important; /* .item imgと合わせて14px。つまり20pxの余白 */
	margin: 0!important;
}

/* 2列 */
.flex2 {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--space40);
}
.flex2 .item {
	width: calc(50% - 40px);
    max-width: 640px;
}
.flex2 .item:not(:nth-child(2n)) {
	margin-right: 80px;
}
.flex2 .item:nth-child(n+3) {
	margin-top: var(--space40);
}
.flex2 .item img {
    max-width: 640px;
	width: 100%;
}

/* 3列 */
.flex3 {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--space40);
}
.flex3 .item {
	width: calc(33.3333% - 52px);
    max-width: 400px;
}
.flex3 .item:not(:nth-child(3n)) {
	margin-right: 77px;
}
.flex3 .item:nth-child(n+4) {
	margin-top: var(--space40);
}
.flex3 .item img {
    max-width: 400px;
}


/* テキストと画像を横並び */
.flex_text_and_img {
	display: flex;
	margin-bottom: var(--space40_32);
}
.flex_text_and_img > div {
	margin-right: var(--space80);
}
.flex_text_and_img img {
	flex: 1;
	max-width: 400px;
	width: 100%;
	height: 100%;
}

/* 横並びコンテンツ内にボタンがある場合は、mbは0pxとする */
.flex2 .kasou_border_btn, .flex3 .kasou_border_btn {
	margin-bottom: 0!important;
}
/* ------------ 横並び ここまで------------ */


/* ------------ ボタン ------------ */
/* 枠線ボタン */
.kasou_border_btn, .wp-block-buttons {
	margin-top: var(--space40);
	margin-bottom: var(--space80);
	text-align: center;
}

.kasou_border_btn a, .wp-block-buttons a {
    display: inline-block;
    position: relative;
    padding: 22px 40px 22px 30px;
    min-width: 341px;

	font-size: var(--fz16);
	font-weight: var(--fw600);
	color: var(--color-skyblue);
	background: var(--color-white);
	border: 1px solid var(--color-skyblue);
}

/* ブロックボタンを使用したとき */
.wp-block-buttons a { border-radius: unset; }

.kasou_border_btn a::after, .wp-block-buttons a::after {
    position: absolute;
    top: 50%;
    right: 27px;
    content: '';
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid var(--color-skyblue)!important;
    border-right: 2px solid var(--color-skyblue)!important;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    transition: all .1s;
}

.kasou_border_btn a:hover, .wp-block-buttons a:hover {
	background: var(--color-skyblue);
	transition: ease .3s;
	opacity: 1;
	color: var(--color-white);
}
.kasou_border_btn a:hover::after, .wp-block-buttons a:hover::after {
	opacity: 1;
	border-top: 2px solid var(--color-white)!important;
    border-right: 2px solid var(--color-white)!important;
}


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

	/* ------------ 横並び ------------ */
	/* 2列 */
	.flex2 .item {
		width: calc(50% - 20px);
	}
	.flex2 .item:not(:nth-child(2n)) {
		margin-right: 40px;
	}

	/* 3列 */
	.flex3 .item:not(:nth-child(3n)) {
		margin-right: 40px;
	}
	.flex3 .item {
		width: calc(33.3333% - 27px);
	}

}


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

	/* 共通
	----------------------------------------------- */
	/* 下層用の上下余白 */
	.mt80_pb80 {
		padding-bottom: 45px; /* 60 */
	}


	/* ページトップのイメージ画像
	----------------------------------------------- */
	.page_top_image img {
		height: 150px;
		object-fit: cover;
	}


	/* ------------ 横並び ------------ */
	/* 3列 */
	.flex3 .item:not(:nth-child(3n)) {
        margin-right: 20px;
    }
    .flex3 .item {
        width: calc(33.3333% - 14px);
    }

	/* テキストと画像を横並び */
	.flex_text_and_img {
		flex-wrap: wrap;
		margin-bottom: var(--space40_32);
	}
	.flex_text_and_img > div {
		margin-right: 0;
	}
	.flex_text_and_img img {
		margin-left: auto;
		margin-right: auto;
	}


	/* ------------  ボタン ------------ */
	/* 枠線ボタン */
	.wp-block-buttons>.wp-block-button {
		max-width: 320px;
		width: 100%;
	}
	.kasou_border_btn a, .wp-block-buttons a {
		padding: 12px 35px 12px 20px;
		max-width: 320px;
		width: 100%;
		min-width: auto;
	}
	.kasou_border_btn a::after, .wp-block-buttons a::after {
		right: 20px;
	}


	/* ------------ テーブル ------------ */
	/* サイズ指定 */
	.w20 {
		min-width: 150px;
	}

}



/* スマホ */
@media screen and (max-width:480px) {

	/* 共通
	----------------------------------------------- */
	/* 下層用の上下余白 */
	.mt80_pb80 {
		padding-bottom: 25px; /* 40 */
	}

	

	/* ---  スクロールバー ---  */
	/* 画像　横スクロール可 */
	.scroll_img {
		overflow-x: auto;
		display: block;
	}

	/* 画像 */
	.scroll_img img, .general_content .img_w1000 img {
		max-width: 600px!important;
		width: auto!important;
		margin-bottom: 10px;
	}

	/* スクロールバー全体を対象にする */
	.scroll_img::-webkit-scrollbar {
		width: 10px; /* スクロールバーの幅 */
		height: 10px; /* スクロールバーの高さ */
	}
	/* スクロールバーの背景部分をカスタマイズ */
	.scroll_img::-webkit-scrollbar-track {
		background: #f1f1f1; /* スクロールバーの背景色 */
		border-radius: 5px; /* 角丸にする */
	}
	/* スクロールバーの操作部分をカスタマイズ */
	.scroll_img::-webkit-scrollbar-thumb {
		background: #888; /* スクロールバーの操作部分の背景色 */
		border-radius: 5px; /* 角丸にする */
	}
	/* スクロールバーの操作部分にホバーした時のスタイル */
	.scroll_img::-webkit-scrollbar-thumb:hover {
		background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
	}
	/* ---  スクロールバー　ここまで ---  */


	/* ------------ 見出し ------------ */
	.general_content h2 {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 20px;
	}
	.general_content h2::before {
		width: 8px;
	}

	.general_content h3 {
		padding-bottom: 5px;
	}
	/* ------------ 見出し　ここまで ------------ */



	/* ------------ 横並び ------------ */
	/* 2列と3列　共通 */
	.flex2 .item, .flex3 .item {
		width: calc(50% - 10px);
	}
	.flex2 .item:not(:nth-child(even)), .flex3 .item:nth-child(odd):not(:nth-child(even)) {
        margin-right: 20px;
    }

	/* 3列を2列に変更 */
	.flex3 .item:not(:nth-child(3n)) {
		margin-right: 0;
	}
	.flex3 .item:nth-child(n+3) {
		margin-top: var(--space20);
	}

}