@charset "UTF-8";

/* ----------------------------------
 BASE LAYOUT
---------------------------------- */
body.page-pagecategory .pane-topic-path { display: none;}
body.page-pagecategory .pane-main { max-width: 100%; padding: 0; margin: 0;}
body.page-pagecategory .pane-main .block-pagecategory-subcategory-list { 
	width: 100%;
	max-width: calc(var(--layout1-max-width) + (var(--layout1-base-padding) * 2));
	padding: 0 var(--layout1-base-padding);
	margin: 0 auto;
	display: block;
}

@media screen and (max-width: 1000px) {
	body.page-pagecategory .pane-main .block-pagecategory-subcategory-list { padding: 0 var(--layout-base-padding);}
}

/* 動的一覧を非表示 */
body.page-pagecategory .block-pagecategory-page-list { display: none !important;}

/* ----------------------------------
 TOPICS 一覧 - MAIN VISUAL
---------------------------------- */
#page_category_topics #sec_visual { margin: 0 0 300px; display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center;}
#page_category_topics #sec_visual .visual-desc { width: 50%; text-align: left; display: flex; justify-content: center; align-items: center;}
#page_category_topics #sec_visual .visual-desc .eng { margin: 0 0 10px; font-family: var(--font-family-stix); font-size: 24px; font-weight: 500; font-style: italic; text-align: left; letter-spacing: 0.05em;}
#page_category_topics #sec_visual .visual-desc .jp { font-family: var(--font-family-ship); font-size: 16px; font-weight: 500; text-align: left; letter-spacing: 0.05em; line-height: var(--line-height-high);}
#page_category_topics #sec_visual .visual-image { width: 50%;}
#page_category_topics #sec_visual .visual-image img { width: 100%;}

@media screen and (max-width: 1000px) {
	#page_category_topics #sec_visual { margin: 0 0 200px; flex-direction: column;}
	#page_category_topics #sec_visual .visual-desc { width: 100vw; height: 100vw;}
	#page_category_topics #sec_visual .visual-desc .eng { text-align: center;}
	#page_category_topics #sec_visual .visual-desc .jp { font-size: 12px; text-align: center;}
	#page_category_topics #sec_visual .visual-image { width: 100vw;}
}

/* ----------------------------------
 TOPICS 一覧 - LIST（動的）
---------------------------------- */
body.page-pagecategory .block-pagecategory-page-list {
	width: 100%;
	max-width: calc(var(--layout2-max-width) + (var(--layout2-base-padding) * 2));
	padding: 0 var(--layout2-base-padding);
	margin: 0 auto;
	display: block;
}
body.page-pagecategory .block-pagecategory-page-list--page { width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-accent1);}
body.page-pagecategory .block-pagecategory-page-list--page + .block-pagecategory-page-list--page { margin-top: 40px;}
body.page-pagecategory .block-pagecategory-page-list--page { width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-accent1);}
body.page-pagecategory .block-pagecategory-page-list--page-image { width: 50%; padding: 50% 0 0 0; position: relative;}
body.page-pagecategory .block-pagecategory-page-list--page-image figure { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}
body.page-pagecategory .block-pagecategory-page-list--date { display: none;}
body.page-pagecategory .block-pagecategory-page-list--page-caption { width: 50%; padding: 0 14%; color: #FFF; display: flex; align-items: center; align-self: stretch; position: relative;}
body.page-pagecategory .block-pagecategory-page-list--page-caption:has(a) { padding: 0;}
body.page-pagecategory .block-pagecategory-page-list--page-caption > a { 
	width: 100%;
	height: 100%;
	padding: 0 7% 7%;
	font-family: var(--font-family-stix);
	font-size: 22px;
	font-weight: 500;
	text-decoration: none;
	color: #FFF;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
body.page-pagecategory .block-pagecategory-page-list--page-caption > a::after { 
	content: 'VIEW MORE';
	width: 110px;
	padding: 0 0 16px;
  font-family: var(--font-family-stix);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
	text-align: right;
  text-decoration: none;
	color: #FFF;
	display: block;
	background-image: url("/img/usr/common/ico_to_next_white_ss.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	-webkit-background-size: var(--view-more-size-ss) auto;
	background-size: var(--view-more-size-ss) auto;
  transition: var(--transition);
	position: absolute;
	right: 14%;
	bottom: 14%;
}
body.page-pagecategory .block-pagecategory-page-list--page-caption > a:hover { opacity: 1.0;}
body.page-pagecategory .block-pagecategory-page-list--page-caption > a:hover::after { right: calc(14% - 5px); opacity: var(--opacity);}

@media screen and (max-width: 1000px) {
	body.page-pagecategory .block-pagecategory-page-list { padding: 0 var(--layout-base-padding);}
	body.page-pagecategory .block-pagecategory-page-list--page { flex-direction: column; justify-content: center;}
	body.page-pagecategory .block-pagecategory-page-list--page-image { width: 100%; padding: 100% 0 0 0;}
	body.page-pagecategory .block-pagecategory-page-list--page-caption { width: 100%; min-height: 100vw; padding: 0 7%;}
	body.page-pagecategory .block-pagecategory-page-list--page-caption:has(a) { padding: 0;}
	body.page-pagecategory .block-pagecategory-page-list--page-caption > a { min-height: 100vw; padding: 0 7% 7%; font-size: 22px; justify-content: center; position: relative;}
	body.page-pagecategory .block-pagecategory-page-list--page-caption > a::after { right: 7%; bottom: 7%;}	
}

/* ----------------------------------
 TOPICS 一覧 - LIST（静的）
---------------------------------- */
#top_sec_topics { max-width: calc(var(--layout2-max-width) + (var(--layout2-base-padding) * 2)); padding: 0 var(--layout2-base-padding); margin: 60px auto 188px;}
#top_sec_topics h2.sec-title.eng { margin: 0 0 35px; text-align: center;}
#top_sec_topics .topics-list li + li { margin-top: 40px;}
#top_sec_topics .topics-item a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; background-color: var(--color-accent1); transition: var(--transition);}
#top_sec_topics .topics-item .image { width: 50%; padding: 50% 0 0 0; position: relative; transition: var(--transition);}
#top_sec_topics .topics-item .image figure { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}
#top_sec_topics .topics-item .desc { width: 50%; padding: 0 7%; color: #FFF;}
#top_sec_topics .topics-item .desc h3.topics-number { margin: 0 0 40px; font-family: var(--font-family-stix); font-size: 22px; font-weight: 500; font-style: italic; color: #FFF;}
#top_sec_topics .topics-item .desc h3.topics-number .num { margin: 0 0 0 30px; font-family: var(--font-family-stix); font-size: 60px; font-weight: 400; font-style: italic; color: #FFF;}
#top_sec_topics .topics-item .desc .title { margin: 0 0 20px; font-family: var(--font-family-ship); font-size: 22px; font-weight: 500; color: #FFF;}
#top_sec_topics .topics-item .desc .text { font-family: var(--font-family-ship); font-size: 14px; font-weight: 500; color: #FFF;}
#top_sec_topics .topics-item .desc .view-more {
	padding: 0 0 16px;
	margin: 30px 0 0;
	font-family: var(--font-family-stix);
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	text-align: right;
	text-decoration: none;
	color: #FFF;
	display: block;
	position: relative;
	transition: var(--transition);
}
#top_sec_topics .topics-item .desc .view-more::after {
	content: '';
	width: var(--view-more-size-ss);
	height: 9px;
	background-image: url("/img/usr/common/ico_to_next_white_ss.png");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: var(--view-more-size-ss) auto;
	background-size: var(--view-more-size-ss) auto;
	display: block;
	position: absolute;
	bottom: 0;
	right: 5px;
	transition: var(--transition);
}
#top_sec_topics .topics-item a:hover .image { opacity: var(--opacity);}
#top_sec_topics .topics-item a:hover .desc .view-more::after { right: -5px;}

@media screen and (max-width: 1000px) {
	#top_sec_topics { padding: 0 var(--layout-base-padding); margin: 40px auto 130px;}
	#top_sec_topics .topics-list li + li { margin-top: 30px;}
	#top_sec_topics .topics-item a { display: block;}
	#top_sec_topics .topics-item .image { width: 100%; padding: 100% 0 0 0;}
	#top_sec_topics .topics-item .desc  { width: 100%; padding: 40px 7%;}
	#top_sec_topics .topics-item .desc h3.topics-number { margin: 0 0 26px; font-size: 20px; text-align: center;}
	#top_sec_topics .topics-item .desc h3.topics-number .num { margin: 0 0 0 12px; font-family: var(--font-family-stix); font-size: 36px;}
	#top_sec_topics .topics-item .desc .title { font-size: 18px;}
	#top_sec_topics .topics-item .desc .text  { font-size: 12px;}
	#top_sec_topics .topics-item .desc .view-more { margin: 20px 0 0;}
}