@charset "UTF-8";
/*
Theme Name: 知る阿呆 2024
Theme URI: https://awa.cocole.jp/
*/

/* 初期リセット・ベース設定 */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,ul{list-style:none;margin:0;padding:0;},dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:inline-block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

:root {

	--cocole-col: #f79911;

	--bace-col: #22b573;
	--bace-col-rgb: 34, 181, 115;
	--bace-col-2: #4ec48f;
	--bace-col-3: #7ad3ab;
	--bace-col-4: #a7e1c7;
	--bace-col-5: #d3f0e3;
	--bace-col-6: #edf9f4;

	--gray: #555C60;
	--gray-2: #999DA0;
	--gray-3: #DDDEDF;
	--gray-4: #F8F8F9;
	--blue: #164a84;
	--blue-2: #516292;
	--blue-3: #7e84aa;
	--blue-4: #ababc5;
	--red: #b7282e;
	--red-2: #c55358;
	--red-3: #d47e82;
	--red-4: #e2a9ab;
	--orange: #f08300;
	--orange-2: #f39c33;
	--orange-3: #f6b566;
	--orange-4: #f9cd99;

	--social_x-col: #0f1419;
	--social_x-col-rgb: 15, 20, 25;
	--ins-col: #f13f79;
	--ins-col-rgb: 241, 63, 121;
	--youtube-col: #ff0000;
	--youtube-col-rgb: 255, 0, 0;
	--facebook-col: #4267b2;
	--facebook-col-rgb: 66, 103, 178;
	--line-col: #00b900;
	--line-col-rgb: 0, 185, 0;
	--hatena-col: #01a5df;
	--hatena-col-rgb: 1, 165, 223;
	--rakuten-col: #CC4E50;
	--rakuten-col-rgb: 204, 78, 80;
	--amazon-col: #FFA526;
	--amazon-col-rgb: 255, 165, 38;

	--ct-full: 10rem;
	--ct-middle: 4rem;

	--visual-radius: 25px;
	--card-radius: 10px;

}

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

	:root {

		--ct-full: 3rem;
		--ct-middle: 2rem;

	}

}


.sp-only,
.read-only,
.screen-reader-text {
	display: none;
}
@media (max-width: 767px) {
	.sp-only {
		display: inline-block;
	}
}

/*html*/
html {
	font-size: 62.5%;
}
body {
	background: #fff;
	color: var(--gray);
	font-family: "Noto Sans JP", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(1.6rem, calc(1rem + 0.625vw), 2rem);
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}
a {
	color: var(--blue);
}

.svg-symbol {
	display: none;
}

.section_box {
	position: relative;
	padding: var(--ct-middle) 0 var(--ct-full);
}
.section_box,
.post_area {
	position: relative;
	margin: var(--ct-middle) 0;
}
.section_box.middle {
	position: relative;
	margin: 0;
	padding: var(--ct-middle) 0;
}

.container {
	position: relative;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
}

/*ads_box*/
.section_box.ads_box {
	padding: var(--ct-middle) 0;
	max-width: 900px;
	margin: 0 auto;
}

/*pickup_bnr_box*/
.pickup_bnr_box {
	padding: var(--ct-middle) 0;
	background: #f8f8f8;
	line-height: 1;
}
.pickup_bnr_box .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 1200px;
	margin: auto;
}
.pickup_bnr_box p {
	text-align: center;
	margin-bottom: var(--ct-middle);
}
@media (max-width: 767px) {
	.pickup_bnr_box .container {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*visual_box*/
.section_box.visual_box {
	margin: 0;
	padding: 0;
	color: #fff;
	background: #164a84 url(./images/bg-visual-01.jpg);
	background-size: cover;
	background-position: bottom;
}

/*ren_box*/
.section_box.ren_box {
	color: #fff;
	background: linear-gradient(90deg, rgba(81, 98, 146, 0.9), rgba(171, 171, 197, 0.7));
}
.section_box.ren_box:before {
	background: #fff url(./images/bg-visual-02.jpg);
	filter: contrast(1.2) grayscale(1);
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: inherit;
	z-index: -2;
	pointer-events: none;
	background-size: cover;
	background-position: 50%;
	transition: inherit;
}

/*font-size*/
.fs-s {font-size: clamp(1.2rem, calc(0.9rem + 0.625vw), 1.6rem);}
.fs-m {font-size: clamp(1.6rem, calc(1.6rem + 0.625vw), 2rem);}
.fs-l {font-size: clamp(2.4rem, calc(2.4rem + 0.625vw), 6rem);}

/*width*/
.w5p {width: 5%;}
.w10p {width: 10%;}
.w15p {width: 15%;}
.w20p {width: 20%;}
.w25p {width: 25%;}
.w30p {width: 30%;}
.w35p {width: 35%;}
.w40p {width: 40%;}
.w45p {width: 45%;}
.w50p {width: 50%;}
.w55p {width: 55%;}
.w60p {width: 60%;}
.w65p {width: 65%;}
.w70p {width: 70%;}
.w75p {width: 75%;}
.w80p {width: 80%;}
.w85p {width: 85%;}
.w90p {width: 90%;}
.w95p {width: 95%;}

/*color*/
.col-blue {color:var(--blue);}
.col-blue-2 {color:var(--blue-2);}
.col-blue-3 {color:var(--blue-3);}
.col-blue-4 {color:var(--blue-4);}
.col-red {color:var(--red);}
.col-red-2 {color:var(--red-2);}
.col-red-3 {color:var(--red-3);}
.col-red-4 {color:var(--red-4);}
.col-orange {color:var(--orange);}
.col-orange-2 {color:var(--orange-2);}
.col-orange-3 {color:var(--orange-3);}
.col-orange-4 {color:var(--orange-4);}

/*btn*/
.btn {
	transition-property: color, border, background-color;
	transition-duration: .3s;
	transition-timing-function: ease-out;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	position: relative;
	padding: .7em 1em;
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 3px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit;
	font-feature-settings: "palt";
	font-weight: 500;
	line-height: 1.4;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
}
.btn:hover {
	opacity: .8;
}
.btn.default {
	background-color: var(--blue);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.btn.icon-right:after {
	margin-left: 1rem;
	content: '';
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 0.375em 0.64952em;
	border-left-color: currentColor;
	border-right: 0;
}

/*gold-outline*/
.gold-outline {
	padding: 2px;
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
.silver-outline {
	padding: 2px;
	background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
.gold-outline div,
.silver-outline div {
	background-color: rgba(255, 255, 255, .9);
}
/*breadcrumb*/
.breadcrumb {
	padding: 1rem 0;
	font-size: 1.2rem;
}
.breadcrumb ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.breadcrumb li {
	display: flex;
	align-items: center;
}
.breadcrumb li+li:before {
	content: "›";
	margin: 0 0.5rem;
	color: #999;
}
.breadcrumb a {
	text-decoration: none;
	color: var(--blue);
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.breadcrumb li:last-child a {
	color: var(--gray);
	pointer-events: none;
	cursor: default;
}

/*home-news-feed*/

#home-news-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}
#home-news-feed a {
	padding: 1rem;
	display: block;
	text-decoration: none;
	color: var(--gray);
}
#home-news-feed li {
	position: relative;
	border-bottom: 1px dotted var(--gray-3);
}
#home-news-feed .a-blank:after {
	content: '';
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	background-color: rgba(var(--blue), .5);
	mask: url('https://print.cocole.org/official/wp-content/themes/official/images/icon/external_link_line.svg') no-repeat center center;
	display: block;
	width: 24px;
	height: 24px;
	mask-size: 1.6rem;
}

#home-news-feed .post-inline-date {
	margin-bottom: .25rem;
	display: flex;
	align-items: end;
	color: #666;
	font-size: 14px;
}
#home-news-feed .post-inline-date time {
	margin-right: 1rem;
}
#home-news-feed .post-inline-title {
	margin-right: 2rem;
	font-weight: bold;
}
#home-news-feed .badge {
	border-radius: 50px;
	background: var(--blue);
	color: #fff;
	font-size: 10px;
	padding: .25rem .5rem;
	display: inline-block;
}

/*card-list*/
.card-list {
	margin-top: var(--ct-middle);
	color: var(--gray);
}
.card-list li {
	margin-bottom: 2rem;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	background: #fff url(./images/bg-02.png);
	border: 1px solid #fff;
}
.card-list a {
	padding: 15px;
	text-decoration: none;
	display: block;
	border-radius: 15px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
.card-list .card-title {
	padding: 0;
	margin: 0 0 1rem;
	color: var(--blue);
	font-size: clamp(1.6rem, 3vw, 2rem);
}
.card-list .card-title:before {
	margin: 0;
	padding: 0;
	display: none;
}
.card-list .card-thum {
	border-radius: 15px;
	margin-bottom: 1rem;
}
.card-list a:hover .card-title {
	color: var(--red);
}

/*inline-list*/
.inline-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inline-list a {
	color: var(--gray);
}

/*awa-dance-list*/
.awa-dance-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 1200px;
	margin: auto;
}
.awa-dance-list li {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.awa-dance-list {
		grid-template-columns: repeat(1, 1fr);
	}
}

/*arw-list*/
.arw-list a {
	position: relative;
	padding: 15px 15px 15px 45px;
}
.arw-list a:before {
	content: '';
	width: 18px;
	height: 18px;
	background: var(--blue);
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto 0 auto 15px;
}
.arw-list a:hover:before {
	background: var(--red);
}
.arw-list a:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 5px;
	bottom: 0;
	margin: auto 0 auto 15px;
}
/*.share-list*/
.share-list {
	margin: var(--ct-middle) auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1rem;
}
.share-list svg {
	margin-right: .5rem;
	width: 32px;
}
.share-list .social_x:hover {
	fill: var(--social_x-col);
}
.share-list .facebook:hover {
	fill: var(--facebook-col);
}
.share-list .line:hover {
	fill: var(--line-col);
}
.share-list .hatena:hover {
	fill: var(--hatena-col);
}
.share-list a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0.25em 1em;
	border-top: solid 1px var(--gray-3);
	border-bottom: solid 1px var(--gray-3);
	text-decoration: none;
	color: var(--gray);
	fill: var(--gray-2);
}
.share-list a:hover {
	color: var(--blue);
}
.share-list a:before,
.share-list a:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 1px;
	height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: var(--gray-3);
	transition: .3s;
}
.share-list a:before {
	left: 7px;
}
.share-list a:after {
	right: 7px;
}
.share-list a:hover:before {
	top: 0px;
	left:0;
	height: 100%;
}
.share-list a:hover:after {
	top: 0px;
	right: 0;
	height: 100%;
}

@media (max-width: 767px) {

	.share-list {
		grid-template-columns: repeat(2, 1fr);
	}

}

/*ren-random-list*/
.ren-random-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem; /* 要素間の余白 */
	list-style: none;
	padding: 0;
	margin: 0;
}
.ren-random-list a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* 親の高さを満たす */
}

@media only screen and (max-width: 768px) {
	.ren-random-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*cat-ren-list*/
.cat-ren-block {
	margin-bottom: 2rem;
}

.cat-ren-block .parent-cat {
	margin: var(--ct-middle) auto;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: clamp(2rem, 4vw, 3rem);
}

.cat-ren-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cat-ren-list li {
	background: #fff;
	border-radius: 7.5px;
	padding: 1rem;
}

.cat-ren-list li a {
	display: block;
	color: #333;
	text-decoration: none;
}

@media only screen and (max-width: 768px) {
	.cat-ren-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*attn_box*/
.attn_box {
	padding: 15px;
	margin-top: var(--ct-middle);
	border-radius: 15px;
	background-color: rgba(255,255,255,.1);
}
.attn_box .attn_title {
	margin-bottom: .5rem;
}

/*header*/
#header .container {
	padding: 0;
}
#header .header-text {
	font-size: 12px;
	padding: 1rem;
	background: var(--blue) url(./images/bg-01.png);
	color: #fff;
}
#header .logo-box {
	max-width: 150px;
}


@media only screen and (max-width: 768px) {
	#header {
	}
}

/*section_title*/
.section_title,
.section_sub_title {
	margin: var(--ct-middle) auto;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: clamp(2rem, 4vw, 4rem);
	text-align: center;
}
.section_title:after {
	content: '';
	display: block;
	margin: var(--ct-middle) auto;
	width: 100px;
	height: 60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 60'%3E%3C!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %23164a84; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M47.55,53.64c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M45.09,49.2c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M40.19,45.34c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M30.38,42.65c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M47.55,26.7c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M45.09,22.25c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M40.19,18.39c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M30.38,15.7c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M20.34,40.44c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M17.89,36c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M12.99,32.14c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M3.18,29.45c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M74.75,40.44c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M72.3,36c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M67.39,32.14c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M57.58,29.45c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.section_sub_title {
	font-size: clamp(2rem, 4vw, 3rem);
}

/*sub-lead*/
.sub-lead {
	margin-bottom: var(--ct-middle);
}

/*footer*/
#footer {
	margin: 0;
	padding: var(--ct-full) 0;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
	background-image: url(./images/bg-footer.png);
}
#footer .disclaimer {
	font-size: 12px;
}

.copyright {
	font-size: 12px;
	text-align: center;
	padding: 1rem;
	background: #555c60;
	color: #fff;
}

@media (max-width: 768px) {

	.container {
		padding: var(--ct-full) 0;
	}

}

/*post_box*/
.post_box {

}

.post_box .ad-notice {
	font-size: 12px;
	text-align: center;
	margin: .5rem auto var(--ct-middle);
}

/*post-thumbnail*/
.post-thumbnail {
	max-width: 900px;
	width: 90%;
	margin: var(--ct-middle) auto;
	position: relative;
}

.post-thumbnail:before,
.post-thumbnail:after {
	content: '';
	position: absolute;
	transform: rotate(-35deg);
	width: 70px;
	height: 25px;
	background-color: #fff;
	z-index: 1;
}

.post-thumbnail:before {
	top: -10px;
	left: -25px;
	border-bottom: 1px solid var(--gray-3);
}

.post-thumbnail:after {
	bottom: -10px;
	right: -25px;
	border-top: 1px solid var(--gray-3);
}
.post-thumbnail .thumbnail-icon {
	position: absolute;
	width: 100px;
	right: 15px;
	bottom: 15px;
}

/*post-data*/
.post-data {
	max-width: 900px;
	margin: 0 auto;
	font-size: 14px;
	color: #888;
}
.post-data div {
	padding: 15px;
}

/*post_area*/
.post_area {
	max-width: 900px;
	margin: 0 auto;
}
.post_area > * {
	margin-block-start: var(--ct-middle);
}
.post_area h2,
.post_area h3,
.post_area h4,
.post_area h5 {
	position: relative;
	margin: var(--ct-middle) auto;
}

.post_area h2 {
	margin-bottom: 4rem;
	padding-bottom: 2.5rem;
	line-height: 1.5;
	border-bottom: 2px solid rgba(27, 27, 27, .1);
}
.post_area h2:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 10.8rem;
	border-top: 2px solid rgba(27, 27, 27, 1);
}
.post_area h3 {
	margin-bottom: 2rem;
	padding-left: 2.5rem;
	line-height: 1.5;
}
.post_area h3:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-left: 2px solid rgba(27, 27, 27, 1);
}

.post_area .icon {
	width: clamp(1.6rem, calc(1rem + 0.625vw), 2rem);
}

.post_area table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
.post_area table tr th,
.post_area table tr td {
	padding: 0.5em;
	font-size: 88%;
	border: 1px solid #dedede;
}
.post_area table tr th {
	text-align: left;
	background-color: #f2f2f2;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

/*ren-vote*/
.ren-vote {
	padding: 0;
	margin: var(--ct-middle) auto 0;
	text-align: center;
}