@charset "UTF-8";
/* --------------------------------------------------- */
/* --- reset ----------------------------------------- */
/* --------------------------------------------------- */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	font-size: 62.5%;
	font-family: "Barlow", "Noto Sans JP", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
}

body {
	margin: 0;
	border: none;
	padding: 0;
	line-height: 2;
	font-size: 100%;
}

*, *:before, *:after {
	box-sizing: border-box;
}

article, aside, details,
figcaption, figure,
footer, header,
main, menu, nav,
section, summary {
	display: block;
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 1rem;
}

article, aside, details,
figcaption, figure,
footer, header,
main, menu, nav,
section, summary,
h1, h2, h3, h4, h5, h6,
div, p, dl, dt, dd, table, tr, th, td,
img, span, a {
	margin: 0;
	padding: 0;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	vertical-align: bottom;
}

table, table tr,
table tr th, table tr td {
	border-collapse: collapse;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

table caption {
	display: none;
}

input, textarea, select, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* 	border: none; */
	padding: 0;
	/* 	background: none; */
}

audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

a {
	word-break: break-word;
}


/* --------------------------------------------------- */
/* --- commmon --------------------------------------- */
/* --------------------------------------------------- */
:root {
	/* -- margin style --- */
	--mg_vns_bottom: 40px;

	--mg_h2_top: 80px;
	--mg_h2_bottom: 40px;
	--mg_h3_top: 40px;
	--mg_h3_bottom: 20px;
	--mg_h4_top: 40px;
	--mg_h4_bottom: 20px;

	--mg_txt_bottom: 1.5em;
	--mg_list_bottom: 5px;
	--mg_img_top: 30px;
	--mg_img_bottom: 30px;
	--mg_repeatItem_t: 20px;
	--mg_repeatItem_b: 15px;

	/* -- border style --- */
	--bd_radius-L: 12px;
	--bd_radius-M: 8px;
	--bd_radius-S:  5px;
	--bd_radius-C:  50%;

	/* -- padding style --- */
	--pad_header_bottom: 40px;
	--pad_vns_layout: 10px;
	--pad_repeatItem: 15px;
	--pad_btn: 12px 15px 15px;

	/* -- list-style style --- */
	--ls_ol: decimal;
	--ls_ul: disc;
	--ls_ul_note: '※';

	/* -- vns_space style --- */
	--space_l: 120px;
	--space_m:  80px;
	--space_s:  40px;

	/* -- line-height style --- */
	--lh_ttl: 1.0;
	--lh_txt: 1.8;
	--lh_txt_s: 1.4;
	--lh_thin: 1.2;

	/* -- font style --- */
	--fz_12: calc((12 / 10) * 1rem);
	--fz_14: calc((14 / 10) * 1rem);
	--fz_16: calc((16 / 10) * 1rem);
	--fz_18: calc((18 / 10) * 1rem);
	--fz_20: calc((20 / 10) * 1rem);
	--fz_22: calc((22 / 10) * 1rem);
	--fz_24: calc((24 / 10) * 1rem);

	--fz_h1: calc((32 / 10) * 1rem);
	--fz_h2: calc((30 / 10) * 1rem);
	--fz_h3: calc((26 / 10) * 1rem);
	--fz_h4: calc((22 / 10) * 1rem);

	--fz_txt: calc((16 / 10) * 1rem);
	--fz_btn: calc((18 / 10) * 1rem);

	--fz_copyright: calc((14 / 10) * 1rem);

	--fw_ttl: bold;

	/* -- color style --- */
	--color_main: rgba(0,30,85,1);
	--color_main-75p: rgba(0,30,85,0.75);
	--color_main-50p: rgba(0,30,85,0.5);
	--color_sub: rgba(250,190,0,1);

	--color_txt: rgba(32,32,32,1);
	--color_txt-sub: rgba(96,96,96,1);
	--color_txt-subColor: rgba(250,190,0,1);
	--color_txt-link: var(--color_main_sub);
	--color_txt-link_hoverBG: rgba(0,51,255,0.1);

	--color_bg-dark: rgba(160,160,160,1);
	--color_bg-light: rgba(238,238,238,1);
	--color_bg-txtbtn: rgba(18,39,125,1);

	--color_bd-dark:  rgba(64,64,64,1);
	--color_bd-light: rgba(144,144,144,1);
	--color_bd-link: var(--color_txt-link);

	--color_black: rgba(16,16,16,1);
	--color_white: rgba(255,255,255,1);
	--color_red: rgba(210,13,13,1);

}

.tac { text-align: center; }
.tar { text-align: right; }
.tal { text-align: left; }

a {
	text-decoration: none;
	color: var(--color_main);
	& img {
		opacity: 1;
		transition: opacity 200ms ease-in-out;
	}
}
a:hover {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	& img {
		opacity: 0.8;
		transition: opacity 200ms ease-in-out;
	}
}

.pc {
	@media (max-width: 767px){
		display: none;
	}
	@media (min-width: 768px){
		display: inline-block;
	}
}
.sp {
	@media (max-width: 767px){
		display: inline-block;
	}
	@media (min-width: 768px){
		display: none;
	}
}

/* --------------------------------------------------- */
/* --- style ----------------------------------------- */
/* --------------------------------------------------- */

header {
	position: relative;
	margin-bottom: var(--space_s);
	width: 100%;
	background-color: var(--color_main);
	background-image:linear-gradient(0deg, rgba(6,38,91,1) 0%, rgba(6,38,91,1) 40%, rgba(23,23,23,1) 100%);
	@media (max-width: 767px){
		height: 200px;
	}
	@media (min-width: 768px){
		height: 400px;
	}

	h1 {
		overflow: hidden;
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 100%;

/* 		&::after {
			content: '';
			position: absolute;
			display: inline-block;
			width: 1480px;
			height: 140px;
			animation: mv_pc_ticker_after 10s linear infinite;
			background-size: 1480px 140px;
			background-image: url(../img/mv_title.png);
			background-repeat: no-repeat;
			@media (max-width: 767px){
				top: 120px;
			}
			@media (min-width: 768px){
				top: 210px;
			}
		} */

		> img {
			position: absolute;
			display: inline-block;
			max-width: unset;
			width: 100%;
			height: auto;
			filter: drop-shadow(0px 0px 2px rgba(6,38,91,1));
			animation: mv_rorate 5s ease-in-out infinite;
			@media (max-width: 767px){
				top: 100px;
			}
			@media (min-width: 768px) and (max-width: 1199px){
				top: 210px;
			}
			@media (min-width: 1200px){
				top: 180px;
			}
			+ img {
				animation: mv_rorate_2 5s ease-in-out infinite;
			}
		}
	}

	p {
		position: relative;
		z-index: 1;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		height: 100%;
		text-align: center;
		@media (max-width: 767px){
		}
		@media (min-width: 768px){
			max-width: 800px;
		}

		> img {
			position: relative;
			z-index: 50;
			@media (max-width: 767px){
				margin-top: 35px;
				width: 60%;
			}
			@media (min-width: 768px){
				position: absolute;
				top: 78px;
				left: 46px;
			}
		}

		&::before {
			content: '';
			position: absolute;
			z-index: 25;
			display: block;
			background-image: url(../img/img_mv_player.png);
			background-repeat: no-repeat;
			background-size: contain;
			@media (max-width: 767px){
				top: -27px;
				left: -28px;
				width: 128px;
				height: 220px;
			}
			@media (min-width: 768px){
				top: -63px;
				left: -186px;
				width: 286px;
				height: 491px;
			}
		}
		&::after {
			content: '';
			position: absolute;
			display: block;
			background-image: url(../img/img_sp-image.png);
			background-size: contain;
			background-repeat: no-repeat;
			@media (max-width: 767px){
				bottom: -40px;
				right: 0;
				width: 115px;
				height: 202px;
				background-position: 20px 0;
			}
			@media (min-width: 768px){
				top: 32px;
				right: -50px;
				width: 242px;
				height: 446px;
			}
		}
	}
}

@keyframes mv_rorate {
	0% { transform: rotate(-900deg) scale(0); opacity: 1; }
	40% { transform: rotate(0deg) scale(1); opacity: 1; }
	80% { transform: rotate(0deg) scale(1); opacity: 1; }
	100% { transform: rotate(0deg) scale(10); opacity: 0; }
}
@keyframes mv_rorate_2 {
	0% { opacity: 0; }
	40% { opacity: 0; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}


main {
	margin: 0 auto;
	padding-bottom: 80px;
	width: calc(100% - 20px);
	max-width: 800px;

	.at_txt {
		margin-bottom: var(--space_s);
		text-align: center;
		font-size: var(--fz_h1);
		font-weight: var(--fw_ttl);
	}

	.ttl_h2 {
		margin-top: var(--mg_h2_top);
		margin-bottom: var(--mg_h2_bottom);
		border-bottom: 1px solid var(--color_bg-txtbtn);
		text-align: center;
		font-size: var(--fz_h2);
		font-weight: var(--fw_ttl);
		color: var(--color_bg-txtbtn);
	}
	.ttl_h3 {
		margin-top: var(--mg_h3_top);
		margin-bottom: var(--mg_h3_bottom);
		text-align: center;
		font-size: var(--fz_h3);
		font-weight: var(--fw_ttl);
	}

	.txt {
		margin-bottom: var(--mg_txt_bottom);
		font-size: var(--fz_txt);
	}

	.rBtn {
		margin-top: var(--space_s);
		margin-bottom: var(--space_m);
		text-align: center;
		> a {
			display: inline-block;
			outline: 1px solid;
			outline-color: var(--color_main);
			outline-offset: 0px;
			border: 2px solid transparent;
			border-radius: var(--bd_radius-L);
			padding: var(--pad_btn);
			width: 80%;
			background-color: var(--color_main);
			line-height: var(--lh_thin);
			font-size: var(--fz_btn);
			color: var(--color_sub);
			transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);

			&:hover {
				outline-color: transparent;
				outline-offset: 6px;
				border: 0px solid var(--color_white);
				box-shadow: inset 0px 0px 14px rgba(255,255,255,0.8);
				text-decoration: none;
				text-shadow: 1px 0px 1px rgba(0,0,0,0.8);
				font-size: calc(var(--fz_btn) + 1px);
/* 				font-weight: bold; */
			}
		}
	}

	.main_colWrap {
		@media (min-width: 768px){
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		.mainCol {
			@media (min-width: 768px){
				width: calc(100% - 40px - 260px);
			}

			.article {
				overflow: hidden;
				position: relative;
				height: 920px;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					width: 100%;
					height: 100%;
					background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.75) 95%, rgba(255, 255, 255, 1) 100%);
				}
			}
		}

		.subCol {
			overflow: hidden;
			position: relative;
			#kyodonews-widget {
				position: relative;
				z-index: 1;
				border: 1px solid var(--color_main);
				min-width: unset;
				transform-origin: left top;
				#sjkd_contents_div {
					#ck-header {
						display: none;
					}
				}
			}

			@media (max-width: 767px){
				height: 2150px;
				#kyodonews-widget {
					margin-left: calc((100% - 300px) / 2);
					width: 800px;
					height: 5252px;
					transform: scale(calc(300 / 800));
					&::before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 100;
						display: block;
						border-bottom: 1px solid var(--color_main);
						width: 100%;
						height: 100%;
						background-color: rgba(255,255,255,0.1);
						background-image: url(../img/wm_sample.png), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.75) 95%, rgba(255, 255, 255, 1) 100%);
						background-repeat: space;
						background-size: 100%;
					}

					#at_games {
						.vnsAt_aclList.col2list {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.vnsAt_aclList_item {
								width: calc((100% - 20px) / 2);
							}
						}
					}
				}
			}
			@media (min-width: 768px){
				width: 260px;
				height: 2700px;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					display: block;
					width: 100%;
					height: 100%;
					background-color: rgba(255,255,255,0.1);
					background-image: url(../img/wm_sample.png);
					background-repeat: space;
				}
				#kyodonews-widget {
					width: 800px;
					transform: scale(calc(260 / 800));
				}
			}

			.ttl_h2 {
				@media (min-width: 768px){
					display: none;
				}
			}

		}
	}

	#newstopbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		margin: 0;
		padding: 0;

		.ntb_item {
			margin-bottom: 20px;
			border: 1px solid var(--color_bd-light);
			padding: 5px 10px;

			@media (max-width: 767px){
				margin-right: 10px;
				width: calc((100% - (10px * 1)) / 2);
				&:nth-of-type(2n) {
					margin-right: 0;
				}
			}
			@media (min-width: 768px){
				margin-right: 20px;
				width: calc((100% - (20px * 2)) / 3);
				&:nth-of-type(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.noteList {
		list-style: none;
		margin: 0;
		padding: 0;

		> li {
			padding-left: 1em;
			margin-bottom: 10px;
			text-indent: -1em;
			line-height: var(--lh_txt_s);
			font-size: var(--fz_txt);

			&::before {
				content: '※';
			}
		}
	}

}

.fixedBtn {
	overflow: hidden;
	position: sticky;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 60px;
	background-color: var(--color_main-75p);
	transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);

	&:has(a:hover) {
		background-color: var(--color_main);
	}

	a {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: var(--lh_thin);
		font-size: var(--fz_18);
		font-weight: bold;
		color: var(--color_sub);
		transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);

		&::before {
			content: '';
			position: absolute;
			top: calc(50% - 20px);
			left: -50px;
			display: block;
			width: 40px;
			height: 40px;
			background-image: url(../img/img_ball.png);
			background-repeat: no-repeat;
			background-size: contain;
			transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1), left 1.8s, transform 1.8s;
		}

		&:hover {
			text-decoration: none;
			text-shadow: 1px 0px 1px rgba(0,0,0,0.8);
			font-size: var(--fz_22);

			&::before {
				left: calc(100% + 50px);
				transform: rotate(900deg);
			}
		}
	}
}

footer {
	padding: 30px 0 20px;
	width: 100%;
	background-color: var(--color_main);
	text-align: center;

	.fLinks {
		list-style: none;
		display: flex;
		justify-content: space-around;
		margin: 0 auto 20px;
		padding: 0;
		width: calc(100% - (10px * 2));
		max-width: 800px;

		li {
			a {
				font-size: var(--fz_14);
				color: var(--color_white);
			}
		}
	}

	.copyright {
		margin: auto;
		padding: 0;
		width: calc(100% - (10px * 2));
		max-width: 800px;
		text-align: center;
		font-size: var(--fz_12);
		color: var(--color_white);
	}
}


/* --------------------------------------------------- */
/* --- form Visual News ------------------------------ */
/* --------------------------------------------------- */

.article {

	/* article header */
	.vnsAt_atcHeader {
		margin-bottom: 15px;
		.date {
			text-align: right;
		}
		.vns_h2 {
			margin-top: 5px;
			margin-bottom: 10px;
			border-left: 6px solid var(--color_main);
			padding-bottom: 3px;
			padding-left: 10px;
			line-height: var(--lh_txt_s);
			font-size: var(--fz_18);
			font-weight: var(--fw_ttl);
			color: var(--color_main);
		}
		.meta {
			display: flex;
			justify-content: space-between;
			.tag01 {
				display: flex;
				[class^="tag_"] {
					margin-right: 20px;
					&:last-child {
						margin-right: 0;
					}
				}
				.tag_player,
				.tag_category,
				.tag_writer {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 5px;
					padding-left: 5px;
					min-width: 100px;
					height: 25px;
					text-align: center;
					font-size: var(--fz_12);
					line-height: var(--lh_thin);
					&.tabInImg {
						position: absolute;
						right: 5px;
						bottom: 5px;
						z-index: 1;
					}
				}
				.tag_player {
					background-color: var(--color_sub);
					color: var(--color_main);
					&:empty {
						display: none;
					}
				}
				.tag_category {
					background-color: var(--color_main);
					color: var(--color_white);
				}
				.tag_writer {
					border: 1px solid var(--color_txt);
					background-color: var(--color_white);
					color: var(--color_txt);
				}
			}
		}
	}

	/* article body */
	.vnsAt_atcBody {
		font-size: var(--fz_14);
		> .vns {
			padding-right: 0;
			padding-left: 0;

			&.vns_img {
				text-align: center;
			}

			> p + p {
				margin-top: 10px;
			}
		}

		/* QA方式 */
		.vns_interviewBox {
			[class^="vns_ivBox_"],
			[class^="vns_qaBox_"] {
				padding: 10px 10px 10px 50px;
				background-repeat: no-repeat;
				background-position: 10px 10px;
			}
			.vns_ivBox_q,
			.vns_qaBox_q {
				background-image: url('https://visualnews.kyodonews.jp/media/2025/07/15172656/ico_mic.png');
				background-size: 30px 30px;
				p.img {
					display: none;
				}
				.txt {
					margin-bottom: 0;
					font-size: var(--fz_14);
				}
			}
			/* 画像なし */
			.vns_qaBox_a {
				position: relative;
				border-radius: 5px;
				min-height: 60px;
				background-color: var(--color_bg-light);
				&::before {
					content: '';
					position: absolute;
					top: 10px;
					left: 5px;
					display: block;
					width: 40px;
					height: 40px;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;
				}
			}
			/* 画像aあり */
			.vns_ivBox_a {
				display: flex;
				border-radius: 5px;
				padding-left: 5px;
				background-image: none;
				background-color: var(--color_bg-light);
				p.img {
					margin-right: 5px;
					width: 40px;
					img {
						object-fit: contain;
						width: 100%;
					}
				}
				.txt {
					width: calc(100% - 50px);
				}
			}
		}

		/* 対話 */
		.lcvn_chat_topic {
			display: flex;
			background-repeat: no-repeat;
			background-position: 10px 10px;
			div img {
				display: none;
			}
			&.right {
				flex-direction: row-reverse;
				div {
					margin-left: 5px;
					background-image: url('https://visualnews.kyodonews.jp/media/2025/07/15172656/ico_mic.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 30px 30px;
				}
			}
			&.left {
				flex-direction: row;
				div {
					margin-right: 5px;
				}
			}
			div {
				width: 40px;
				height: 40px;
			}
			p {
				border-radius: 5px;
				padding: 10px 15px;
				width: calc(100% - ((40px + 5px) * 2));
				background-color: var(--color_bg-light);
			}
			.vns_ivBox_q {
				flex-direction: row-reverse;
				margin-bottom: 10px;
				.img {
					margin-left: 5px;
					padding-top: 10px;
				}
			}
			.vns_ivBox_a {
				.img {
					margin-right: 5px;
				}
				.txt {
					border-radius: 5px;
					background-color: var(--color_bg-light);
				}
			}
		}

		/* VN lowcode parts style */
		> .ck-block {
			> .page_top {
				height: 0;
				font-size: 0;
			}
			> .header_container {
				margin-bottom: 1.5em;
				.title {
					text-align: center;
				}
			}
			> .lcvn_header {
				display: none;
			}
			> .lcvn_header:has(img[src*="."]) {
				display: block;
				margin-bottom: 1.5em;
				text-align: center;
			}
			> p.lcvn_lead:has(+ .lcvn_lead_break) {
				margin-bottom: 0;
			}
			> p {
				margin-bottom: 1.0em;
			}
			> figure {
				margin-right: auto;
				margin-left: auto;
				margin-bottom: 1.5em;
				text-align: center;
			}
		}

	}

}