@charset "utf-8";
/* CSS Document */

/*
 * テンプレートのタブレット用 CSS
 */


:root {
/* ヘッダー */
	--headerHeight: 80px;
	--headersetGapT: 15px;
	--headersetGapB: 15px;
	
/* ロゴ */
	--logoHeight: 45px;
	
/* ナビゲーション */
	--gnaviHeight: 3.5em;
	--naviTxtColorHover: #333;
	--naviBgColorHover: #e9e9e9;
	--naviPullTxColor: #333;
	--naviPullBgColor: #fdfdfd;
	--naviPullBdColor: #dfdfdf;
	--naviPullSecTxColor: #fff;
	--naviPullSecBgColor: #676565;
	--naviPullSecBdColor: #919191;
}



/* グローバルナビ */
#GNAVI {
	font-size: 1.2em;
}
#GNAVICONTENTS01 .gNavi > a {
	font-weight: bold;
	padding: 0 .7em;
}
/* サムネイル集 */
#GNAVI .thmbsBoxParent .sub-menu {
  width: calc(100cqw + (var(--contentsPaddingSide) * 2));
}
#GNAVI .thmbsBoxParent .bgBox {
	display: flex;
	justify-content: center;
	background-color: rgb(233 233 233);
	width: 100%;
	padding: 20px;
}
#GNAVI .thmbsBoxParent .layoutBox {
	text-align: left;
	padding: 15px 30px 20px;
	background-color: #fff;
}
#GNAVI .thmbsBoxParent .mainTitle {
	font-size: 1.5em;
	margin-bottom: 1em;
}
#GNAVI .thmbsBoxParent .layoutBox .row {
	display: flex;
	gap: 0 15px;
	flex-wrap: wrap;
}
#GNAVI .thmbsBoxParent .layoutBox .row > .col {
	flex: 1 0 auto;
}
#GNAVICONTENTS01 .thmbsBoxParent li {
	margin-bottom: 5px;
	background-color: #ffffff;
}
#GNAVI .thmbsBoxParent li[class*=drop] a {
  padding: 1em;
	padding-left: 60px;
	border: none;
}
#GNAVI .thmbsBoxParent li[class*=drop]::before {
	position: absolute;
	display: block;
	height: 100%;
	content: '';
	aspect-ratio: 1/1;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../images/icon_info.webp);
}
#GNAVICONTENTS01 a:hover:before, #GNAVICONTENTS01 .gNavi.sub-open>a:before {
  border-radius: 5px;
}


/* ヘッダー言語切り替えボタン */
#HDBTNBOX {
	display: block;
  position: absolute;
  top: 0;
  right: .7em;
}


/* 柔軟なレイアウト */
:root {
	--contentsPaddingSide: 30px;
	--sectionContentChildGapV: 25px;
}


/* トップページ */
#SUMOLEGEND::before {
  height: calc(var(--sectionContentPaddingV) / 2);
}
#SUMOLEGEND .sectionContent {
  margin: calc(var(--sectionContentPaddingV)) auto calc(var(--sectionContentPaddingV) / 2);
}
#SUMOLEGEND .multiArticleLayoutSet {
	--imgWidth: .7fr;
  margin-top: calc(-1 * var(--sectionContentPaddingV));
}
#SUMOLEGEND .multiArticleLayoutSet.ver_0_1a.imgTxtInline-grid .articleItem > .layoutBox {
  align-items: start;
}
#SUMOLEGEND .multiArticleLayoutSet.ver_0_1a.imgTxtInline-grid .articleItem > .layoutBox > .txtSet {
  margin-top: calc(var(--sectionContentPaddingV) * 1);
}