@charset "utf-8";
/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("inview.css");
/*animation1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
0% {right: -200px;}
100% {right: 0px;}
}
/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
font-size: clamp(13px, 0.29vw + 11.9px, 16px); /*画面幅375px〜1400pxの間で、13px〜16pxに可変。下でrem管理しているものも連動します。*/
overflow-x: visible;
}
body {
margin: 0;padding:0;
font-family: var(--base-font); /*フォント指定。theme.cssのbase-fontを読み込みます。*/
font-weight: 400;
-webkit-text-size-adjust: none;
background: var(--bg-color); /*背景色。*/
color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
line-height: 1.9; /*行間*/
overflow-x: hidden;
}
/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
/*table全般の設定*/
table {border-collapse:collapse;}
/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
/*videoタグ*/
video {max-width: 100%;}
/*iframeタグ*/
iframe {width: 100%;}
/*他*/
input {font-size: 1rem;}
/*section
---------------------------------------------------------------------------*/
section {
padding: var(--content-space-v, var(--content-space-l)) var(--content-space-l); /*上下、左右へのsection内の余白。上下はtheme.cssのcontent-space-v（無い場合はcontent-space-l）、左右はcontent-space-lを読み込みます。上下のセクションが隣り合うと、2つ分の余白になります。*/
}
/*section内の最初と最後の要素のマージンはリセット（余白はsectionのpaddingで管理する為）*/
section > :first-child {margin-top: 0;}
section > :last-child {margin-bottom: 0;}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
color: inherit;
transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*マウスオン時*/
a:hover {
filter: brightness(1.1); /*少しだけ明るくする*/
text-decoration: none;
}
/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
animation: opa1 0.2s 0.2s both; /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
display: flex;
flex-direction: column; /*縦積みに*/
min-height: 100vh;
max-width: 1280px; /*サイト全体の最大幅。お好みで。*/
margin-inline: auto; /*中央に配置*/
}
/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
display: flex; /*横並びにする*/
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem 2rem; /*要素間に空けるスペース。上下0.5文字分、左右2文字分。*/
min-height: 100px; /*ヘッダーの高さ（中身が増えた場合は自動で広がります）*/
padding: 0.5rem var(--content-space-l) 1rem; /*上に0.5文字分、左右にtheme.cssのcontent-space-l、下に1文字分の余白。*/
}
/*画面幅900px以下の追加指定*/
@media (max-width:900px) {
/*ヘッダー。ハンバーガーアイコンが出るのでその分の余白を確保。*/
header {
min-height: 70px;
padding-right: calc(var(--content-space-l) + 60px);
}
}/*追加指定ここまで*/
/*ロゴの上の小さな文字（h1）*/
header h1 {
width: 100%; /*幅を100%に（ロゴの上に１行で表示）*/
margin: 0;
font-size: 0.7rem; /*文字サイズ70%*/
font-weight: normal;
line-height: 1.5;
opacity: 0.7; /*色を70%だけ出す*/
}
/*画面幅600px以下の追加指定*/
@media (max-width:600px) {
/*狭い画面では非表示*/
header h1 {
display: none;
}
}/*追加指定ここまで*/
/*ロゴ画像*/
header .logo {margin: 0;flex-shrink: 0;}
header .logo img {
display: block;
width: 230px; /*ロゴの幅。お好みで。*/
}
/*画面幅600px以下の追加指定*/
@media (max-width:600px) {
header .logo img {
width: 180px; /*ロゴの幅*/
}
}/*追加指定ここまで*/
/*ロゴがテキストの場合*/
header .logo a {
text-decoration: none;display: block;
color: var(--bg-inverse-color); /*文字色*/
font-size: 1.4rem; /*文字サイズ1.4倍*/
}
/*検索窓（Googleのサイト内検索）*/
header .search {
margin-left: auto; /*右側に寄せる*/
display: flex; /*横並びにする*/
align-items: center;
width: 300px; /*検索窓の幅*/
padding-left: 1rem; /*左に1文字分の余白*/
border: 1px solid var(--bg-border-color); /*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
border-radius: 2rem; /*角を丸くする*/
background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
overflow: hidden;
}
/*入力中は枠線をメインカラーに*/
header .search:focus-within {
border-color: var(--primary-color); /*theme.cssのprimary-colorを読み込みます。*/
}
/*Googleのマーク*/
header .search > i {
opacity: 0.5; /*色を50%だけ出す*/
}
/*入力欄*/
header .search input {
flex: 1; /*残りの幅を全部使う*/
min-width: 0;
border: none;
outline: none;
background: transparent;
color: inherit;
padding: 0.5rem; /*入力欄の内側の余白*/
font-size: 0.85rem; /*文字サイズ85%*/
}
/*検索ボタン*/
header .search button {
align-self: stretch; /*高さを検索窓いっぱいに*/
width: 2.8rem; /*ボタンの幅*/
border: none;
cursor: pointer; /*マウスカーソルを指マークに*/
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*画面幅900px以下の追加指定*/
@media (max-width:900px) {
/*検索窓をロゴの下に、幅いっぱいで表示*/
header .search {
width: 100%;
margin-left: 0;
}
}/*追加指定ここまで*/
/*広告バナー（検索窓の代わりに置く場合）*/
header .banner {
margin: 0 0 0 auto; /*右側に寄せる*/
}
header .banner img {
display: block;
width: 400px; /*バナーの幅*/
}
/*画面幅900px以下の追加指定*/
@media (max-width:900px) {
/*バナーをロゴの下に表示*/
header .banner {
margin: 0;
width: 100%;
}
header .banner img {
width: 100%;
max-width: 400px; /*最大幅*/
}
}/*追加指定ここまで*/
/*SNSアイコン*/
header .sns {
list-style: none;
margin: 0;padding: 0;
display: flex; /*横並びにする*/
flex-wrap: wrap;
gap: 1rem; /*アイコン同士の間に空けるスペース。１文字分。*/
font-size: 1.2rem; /*アイコンサイズ*/
}
header .sns a {
text-decoration: none;
}
header .sns a:hover {
color: var(--primary-color); /*マウスオン時の色。theme.cssのprimary-colorを読み込みます。*/
}
/*画面幅600px以下の追加指定*/
@media (max-width:600px) {
/*狭い画面では非表示*/
header .sns {
display: none;
}
}/*追加指定ここまで*/
/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
display: none; /* デフォルトは非表示 */
position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
z-index: 99; /*#menubar(100)の下、ページの上*/
top: 0;left: 0;
width: 100%;height: 100%;
background: rgba(0,0,0,0.3); /*半透明の黒。お好みで濃さを調整。*/
}
/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
overflow: hidden;
}
/*メニュー（共通）
---------------------------------------------------------------------------*/
/*currentの文字色*/
#menubar > nav > ul > li.current > a {
color: var(--primary-color); /*theme.cssのprimary-colorを読み込みます。*/
}
/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar {
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
.large-screen #menubar > nav > ul {
display: flex; /*横並びにする*/
flex-wrap: wrap; /*入りきらない場合は折り返す*/
}
/*メニュー１個あたりの設定*/
.large-screen #menubar li {
flex: 1; /*メニューを均等の幅に*/
text-align: center; /*テキストをセンタリング*/
font-size: 0.9rem; /*文字サイズ90%*/
position: relative;
}
.large-screen #menubar li a {
display: block;text-decoration: none;
white-space: nowrap; /*メニュー名の途中で折り返さない*/
}
.large-screen #menubar > nav > ul > li > a {
padding: 0.8rem 1rem; /*上下に0.8文字分、左右に1文字分の余白*/
font-weight: 500;
}
/*マウスオン時、current（現在表示中）時*/
.large-screen #menubar > nav > ul > li > a:hover,
.large-screen #menubar > nav > ul > li.current > a {
background: rgba(0,0,0,0.15); /*背景色。0,0,0は黒の事で0.15は色が15%出た状態。*/
color: inherit;
}
/*枠線だけのメニューにする場合（#menubarに「border」を追加）*/
.large-screen #menubar.border {
background: transparent;
color: inherit;
border-top: 2px solid var(--primary-color); /*上の線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
border-bottom: 2px solid var(--primary-color); /*下の線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}
.large-screen #menubar.border > nav > ul > li + li > a {
border-left: 1px solid var(--bg-border-color); /*メニュー同士の区切り線。theme.cssのbg-border-colorを読み込みます。*/
}
.large-screen #menubar.border > nav > ul > li > a:hover,
.large-screen #menubar.border > nav > ul > li.current > a {
background: var(--primary-light-color); /*背景色。theme.cssのprimary-light-colorを読み込みます。*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
position: absolute;z-index: 100;
width: 100%; /*幅を100%に*/
min-width: 12rem; /*最低でも12文字分の幅*/
animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
box-shadow: 0 4px 10px rgba(0,0,0,0.1); /*影。右へ、下へ、ぼかし幅、色。*/
}
/*メニュー１個あたり*/
.large-screen #menubar ul ul li {
text-align: left;
}
.large-screen #menubar ul ul a {
background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
padding: 0.5rem 1rem; /*上下に0.5文字分、左右に1文字分の余白*/
border-bottom: 1px solid var(--bg-border-color); /*下の線の幅、線種、var以降は線の色のことでtheme.cssのbg-border-colorを読み込みます*/
}
.large-screen #menubar ul ul a:hover {
color: var(--primary-color); /*マウスオン時の文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
animation: animation1 0.2s both;
position: fixed;overflow: auto;z-index: 100;
right: 0px;top: 0px;
width: 50%; /*画面の半分の幅*/
height: 100%;
padding: 100px var(--content-space-l) 50px; /*上に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
.small-screen #menubar {display: none;}
/*画面幅700px以下の追加指定*/
@media (max-width:700px) {
.small-screen #menubar {
width: 100%; /*幅を100%に*/
}
}/*追加指定ここまで*/
/*メニュー１個あたり*/
.small-screen #menubar a {
display: block;text-decoration: none;
margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
border-radius: 5px; /*角を少し丸くする*/
background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}
/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
margin-left: 2rem; /*左に２文字分のスペースを空ける*/
padding: 0.5rem 1.5rem; /*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}
/*ドロップダウンのアイコン*/
a.ddmenu::before {
content: "";
display: inline-block;
width: 0.95em;
height: 0.95em;
vertical-align: middle;
margin-right: 1em; /*アイコンとテキストの間に空けるスペース*/
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/*大きな端末では、ドロップダウンのアイコンを右側に小さく*/
.large-screen a.ddmenu::before {
width: 0.8em;
height: 0.8em;
margin-right: 0.4em;
opacity: 0.7;
}
/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {display: none;}
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
display: none; /* デフォルトは非表示 */
animation: opa1 0s 0.2s both;
cursor: pointer; /*マウスカーソルを指マークに*/
position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
z-index: 101;
right: 0px; /*右からの配置場所*/
top: 0px; /*上からの配置場所*/
width: 70px; /*ボタンの幅*/
height: 70px; /*ボタンの高さ*/
border-bottom-left-radius: 10px; /*左下の角だけ丸くする*/
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
}
/*ハンバーガーアイコンの線*/
#menubar_hdr span {
display: block;
transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
position: absolute;
left: 18px;
width: 35px;
height: 2px; /*線の高さ*/
background: var(--primary-inverse-color); /*線の色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
background: #ff0000; /*背景色。*/
}
#menubar_hdr.ham span {
background: #fff; /*線の色。*/
}
/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
transform: translateY(-10px) rotate(45deg);
}
/*小さな画面での設定*/
.small-screen #menubar_hdr {
display: flex; /*横並びにする*/
}
/*人気のキーワード（メニューの下の帯）
---------------------------------------------------------------------------*/
.keywords {
display: flex; /*横並びにする*/
align-items: baseline;
gap: 0.3rem 1rem; /*見出しとキーワードの間に空けるスペース*/
padding: 0.6rem var(--content-space-l); /*上下に0.6文字分、左右にtheme.cssのcontent-space-lの余白*/
font-size: 0.8rem; /*文字サイズ80%*/
border-bottom: 1px solid var(--bg-border-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*「人気のキーワード」の文字*/
.keywords p {
margin: 0;
flex-shrink: 0; /*縮ませない*/
font-weight: 700; /*太字に*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*キーワードのブロック*/
.keywords ul {
list-style: none;
margin: 0;padding: 0;
display: flex; /*横並びにする*/
flex-wrap: wrap; /*入りきらない場合は折り返す*/
gap: 0.3rem 1rem; /*キーワード同士の間に空けるスペース*/
}
/*キーワード１個あたり*/
.keywords a {
text-decoration: none;
}
.keywords a:hover {
color: var(--primary-color); /*マウスオン時の文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*画面幅700px以下の追加指定*/
@media (max-width:700px) {
/*キーワードは折り返さず、横にスクロールさせる*/
.keywords ul {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
}
}/*追加指定ここまで*/
/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}
.mainimg .slide picture {display: block;width: 100%;height: 100%;}
/*メイン画像全体を囲むブロック*/
.mainimg {
position: relative;
overflow: hidden;
}
/*３枚の画像の共通設定（２枚目以降は１枚目の上に重ねます）*/
.mainimg .slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s; /*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
overflow: hidden;
pointer-events: none; /*表示中のスライドだけクリックできるようにします*/
}
/*１枚目画像（変更不要）。ここがメイン画像の高さを作ります。*/
.mainimg .slide:first-child {
position: relative;
width: 100%;
height: auto;
opacity: 1;
}
/*表示中のスライド（変更不要）*/
.mainimg .slide.active {
opacity: 1;
pointer-events: auto;
}
/*画像全般（変更不要）*/
.mainimg .slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /*画像をコンテナのサイズに合わせてクリップ*/
object-position: center; /*画像の中心を基準に*/
}
/*徐々に拡大（不要な場合はこのブロックごと削除して下さい）*/
.mainimg .slide.zoom img {
transform: scale(1.07); /*終了時点での画像サイズ。107%。お好みで調整して下さい。*/
}
/*文字を読みやすくするための、下からの黒いグラデーション*/
.mainimg .slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(transparent 40%, rgba(0,0,0,0.6)); /*上40%は透明、下に向かって黒60%。*/
pointer-events: none;
}
/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg .slide-indicators {
position: absolute;
z-index: 3;
right: 1.5rem; /*右からの配置場所*/
bottom: 1rem; /*下からの配置場所*/
}
/*１個あたり*/
.mainimg .indicator {
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,255,255,0.5); /*未アクティブ時のボタン色。255,255,255は白のことで0.5は色が50%出た状態。*/
border-radius: 5px; /*円形にする（高さの半分）*/
margin: 0 4px;
cursor: pointer; /*マウスカーソルを指マークに*/
transition: 0.3s;
}
.mainimg .indicator.active {
width: 24px; /*アクティブ時は横長にする*/
background: #fff; /*アクティブ時のボタン色*/
}
/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロック（左下に配置）*/
.mainimg .slide .text {
position: absolute;z-index: 1;
left: 0;bottom: 0;
max-width: 40rem; /*テキストの最大幅。40文字分。*/
padding: 2rem 2.5rem; /*上下に2文字分、左右に2.5文字分の余白*/
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem; /*要素間に空けるスペース*/
color: #fff; /*文字色*/
}
/*h2（記事のタイトル）*/
.mainimg .text h2 {
font-size: clamp(18px, 2.2vw, 30px); /*文字サイズ。18px〜30pxの間で、画面幅に合わせて変わります。*/
font-weight: 700; /*太字に*/
line-height: 1.5; /*行間*/
text-shadow: 0 0 10px rgba(0,0,0,0.3); /*文字の影*/
}
/*h2内のspan（カテゴリーのラベル）*/
.mainimg .text h2 span {
display: table; /*幅を中身に合わせて改行*/
margin-bottom: 0.6rem; /*下に0.6文字分のスペース*/
padding: 0 0.8rem; /*左右に0.8文字分の余白*/
font-size: 0.75rem;
line-height: 1.8;
text-shadow: none;
background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*p（説明テキスト部分）*/
.mainimg .text p {
font-size: 0.85rem; /*文字サイズ85%*/
line-height: 1.7;
}
/*記事へのリンク（テキストブロック全体をクリックできるようにします）*/
.mainimg .text a {
text-decoration: none;
}
.mainimg .text a::after {
content: "";
position: absolute;
inset: 0;
}
.mainimg .text a:hover {
filter: none; /*マウスオン時のfilterを外す（filterがあると、上のクリック範囲が小さくなり、カーソルが点滅するため）*/
}
/*画面幅600px以下の追加指定*/
@media (max-width:600px) {
/*テキストブロックの余白*/
.mainimg .slide .text {
padding: 1.5rem;
}
/*h2に続く説明文だけを非表示にする（画面が狭くなるため）*/
.mainimg .text h2 + p {
display: none;
}
}/*追加指定ここまで*/
/*ボタン
---------------------------------------------------------------------------*/
.btn a {
display: inline-block;
text-decoration: none;
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
border: 1px solid var(--primary-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
padding: 0.8rem 2rem; /*上下に0.8文字分、左右に2文字分の余白*/
font-weight: bold; /*太字に*/
}
/*背景が白いタイプのボタン*/
.btn.inverse a {
background: var(--primary-inverse-color); /*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*アクセントカラーのボタン*/
.btn.accent a {
background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
border: 1px solid var(--accent-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのaccent-colorを読み込みます。*/
}
/*contents（３カラム）
---------------------------------------------------------------------------*/
/*main＋左右の.subを横に並べます。
.subを１つ削除すると２カラム、両方削除すると１カラムになります。*/
#contents {
flex: 1;
min-height: 0;
display: flex; /*横並びにする*/
}
/*main（中央）*/
#contents main {
flex: 1; /*残りの幅を全部使う*/
min-width: 0; /*中身が大きくてもはみ出さないように*/
}
/*sub（１つ目は左側）*/
#contents .sub {
order: -1; /*mainより左に表示。.subが１つだけの時に右に置きたい場合は、この１行を削除。*/
flex-shrink: 0; /*縮ませない*/
width: clamp(180px, 18%, 230px); /*幅。最小180px、基本は18%、最大230px。*/
padding: var(--content-space-s) 1.2rem; /*上下はtheme.cssのcontent-space-s、左右は1.2文字分の余白*/
border-right: 1px solid var(--bg-border-color); /*右側の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*sub（２つ目は右側）*/
#contents .sub + .sub {
order: 1; /*mainより右に表示*/
width: clamp(200px, 22%, 280px); /*幅。最小200px、基本は22%、最大280px。*/
border-right: none;
border-left: 1px solid var(--bg-border-color); /*左側の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*画面幅1200px以下の追加指定（右側の.subを、下に回します）*/
@media (max-width:1200px) {
#contents {
flex-wrap: wrap; /*折り返す*/
}
#contents .sub + .sub {
width: 100%; /*幅を100%に*/
padding: var(--content-space-s) var(--content-space-l); /*上下はtheme.cssのcontent-space-s、左右はcontent-space-lの余白*/
border-left: none;
border-top: 1px solid var(--bg-border-color); /*上に線。色はtheme.cssのbg-border-colorを読み込みます。*/
}
}/*追加指定ここまで*/
/*画面幅900px以下の追加指定（全部を縦積みにします）*/
@media (max-width:900px) {
#contents {
flex-direction: column; /*縦積みに*/
flex-wrap: nowrap;
}
#contents .sub,
#contents .sub + .sub {
order: 1; /*mainの下に表示*/
width: auto;
padding: var(--content-space-s) var(--content-space-l); /*上下はtheme.cssのcontent-space-s、左右はcontent-space-lの余白*/
border-left: none;
border-right: none;
border-top: 1px solid var(--bg-border-color); /*上に線。色はtheme.cssのbg-border-colorを読み込みます。*/
}
}/*追加指定ここまで*/
/*main
---------------------------------------------------------------------------*/
main {
container-type: inline-size;
}
/*h2*/
main h2 {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.8rem; /*見出しと英語の間に空けるスペース*/
margin: 0 0 1.5rem; /*下に1.5文字分のスペース*/
padding-bottom: 0.6rem; /*下線との間の余白*/
font-size: 1.3rem; /*文字サイズ1.3倍*/
font-weight: 700; /*太字に*/
line-height: 1.5; /*行間*/
border-bottom: 1px solid var(--bg-border-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*下線の左端だけメインカラーに*/
main h2::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 3rem; /*幅。3文字分。*/
height: 2px; /*高さ*/
background: var(--primary-color); /*線の色。theme.cssのprimary-colorを読み込みます。*/
}
/*h2内のspan（英語）*/
main h2 span {
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-size: 0.75rem; /*文字サイズ75%*/
font-weight: 500;
letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*main内で使用するul,ol要素（リストタグ）*/
main ul,main ol {
margin-left: 2rem; /*左に２文字分のスペースを空ける*/
margin-right: 2rem;
}
/*h3（記事ページの小見出しなど）*/
main h3 {
margin: 2.5rem 0 1rem; /*上に2.5文字分、下に1文字分のスペース*/
padding: 0.5rem 1rem; /*上下に0.5文字分、左右に1文字分の余白*/
font-size: 1.15rem; /*文字サイズ1.15倍*/
font-weight: 700; /*太字に*/
line-height: 1.5; /*行間*/
border-left: 4px solid var(--primary-color); /*左の線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}
/*画像（記事ページなど）*/
main figure {
margin: 1.5rem 0; /*上下に1.5文字分のスペース*/
}
main figure img {
display: block;
}
/*画像の説明文*/
main figcaption {
margin-top: 0.5rem; /*上に0.5文字分のスペース*/
font-size: 0.8rem; /*文字サイズ80%*/
opacity: 0.7; /*色を70%だけ出す*/
}
/*枠で囲んだボックス（記事ページの「ポイント」など）*/
main .box {
margin: 1.5rem 0; /*上下に1.5文字分のスペース*/
padding: 1.2rem 1.5rem; /*上下に1.2文字分、左右に1.5文字分の余白*/
background: var(--primary-light-color); /*背景色。theme.cssのprimary-light-colorを読み込みます。*/
color: var(--primary-light-inverse-color); /*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
}
main .box > :first-child {margin-top: 0;}
main .box > :last-child {margin-bottom: 0;}
/*sub（左右のサブブロック）
---------------------------------------------------------------------------*/
.sub h3, .sub p, .sub dl, .sub ul, .sub ol {margin: 0;}
/*ブロック全体*/
.sub {
display: flex;
flex-direction: column; /*縦積みに*/
gap: 2.5rem; /*ボックス同士の間隔*/
font-size: 0.85rem; /*文字サイズ85%*/
line-height: 1.7; /*行間*/
}
/*画面幅1200px以下の追加指定（下に回った右側の.subは、ボックスを横に並べ、入りきらない分は折り返す）*/
@media (max-width:1200px) {
.sub + .sub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 2.5rem 2rem;
align-items: start;
}
}/*追加指定ここまで*/
/*画面幅900px以下の追加指定（左右どちらの.subも、ボックスを横に並べ、入りきらない分は折り返す）*/
@media (max-width:900px) {
.sub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 2.5rem 2rem;
align-items: start;
}
}/*追加指定ここまで*/
/*見出し*/
.sub h3 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.5rem; /*見出しと英語の間に空けるスペース*/
font-size: 0.95rem; /*文字サイズ95%*/
font-weight: 700; /*太字に*/
line-height: 1.5; /*行間*/
padding-bottom: 0.5rem; /*下線との間の余白*/
margin-bottom: 1rem; /*下に空けるスペース。１文字分。*/
border-bottom: 2px solid var(--primary-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}
/*見出し内の英語*/
.sub h3 span {
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-size: 0.7rem; /*文字サイズ70%*/
font-weight: 500;
letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*枠線付きのボックスにする場合
.subに「box」を付けると、その列のボックスがすべて枠線付きになります。
１つのボックスだけにしたい場合は、.sub-boxに「box」を付けて下さい。
---------------------------------------------------------------------------*/
/*ボックス*/
.sub.box .sub-box,
.sub .sub-box.box {
padding: 1rem 1.2rem 1.2rem; /*ボックス内の余白。上に1文字分、左右に1.2文字分、下に1.2文字分。*/
border: 1px solid var(--bg-border-color); /*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*ボックス内の見出し（ボックスの上部いっぱいに、背景色付きで表示）*/
.sub.box .sub-box h3,
.sub .sub-box.box h3 {
margin: -1rem -1.2rem 1rem; /*ボックスの余白分だけ外に広げる*/
padding: 0.6rem 1.2rem; /*上下に0.6文字分、左右に1.2文字分の余白*/
border-bottom: none;
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
.sub.box .sub-box h3 span,
.sub .sub-box.box h3 span {
color: inherit;
opacity: 0.7; /*色を70%だけ出す*/
}
/*サブメニュー（カテゴリー一覧など）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.sub-menu {
list-style: none;
}
/*メニュー１個あたり*/
.sub-menu a {
display: flex; /*横並びにする*/
align-items: center;
gap: 0.5rem;
text-decoration: none;
padding: 0.5rem 0.2rem; /*上下に0.5文字分、左右に0.2文字分の余白*/
border-bottom: 1px solid var(--bg-border-color); /*下の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*左端の「＞」アイコン*/
.sub-menu a::before {
font-family: "Font Awesome 6 Free";
content: "\f054"; /*Font Awesomeのこのマークを表示させます*/
font-weight: 900;
font-size: 0.6em; /*文字サイズ親の60%*/
color: var(--primary-color); /*色。theme.cssのprimary-colorを読み込みます。*/
transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*記事数（右端の数字）*/
.sub-menu a span {
margin-left: auto; /*右端に寄せる*/
font-size: 0.85em; /*文字サイズ親の85%*/
opacity: 0.6; /*色を60%だけ出す*/
}
/*マウスオン時、current（現在表示中）時*/
.sub-menu a:hover,
.sub-menu .current a {
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
.sub-menu a:hover::before {
transform: translateX(3px); /*マウスオン時に少し右へ*/
}
/*タグ一覧
---------------------------------------------------------------------------*/
/*ブロック全体*/
.sub-tags {
list-style: none;
display: flex; /*横並びにする*/
flex-wrap: wrap; /*折り返す*/
gap: 0.4rem; /*タグ同士の間に空けるスペース*/
}
/*タグ１個あたり*/
.sub-tags a {
display: block;
text-decoration: none;
padding: 0.1rem 0.8rem; /*上下に0.1文字分、左右に0.8文字分の余白*/
font-size: 0.9em; /*文字サイズ親の90%*/
border: 1px solid var(--bg-border-color); /*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
border-radius: 2rem; /*角を丸くする*/
}
/*マウスオン時*/
.sub-tags a:hover {
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
border-color: var(--primary-color); /*枠線の色。theme.cssのprimary-colorを読み込みます。*/
}
/*お知らせのブロック（※サブブロック内の）
---------------------------------------------------------------------------*/
/*日付*/
.sub-news dt {
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-size: 0.9rem; /*文字サイズ90%*/
font-weight: 500;
line-height: 1.4; /*行間*/
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
font-variant-numeric: tabular-nums; /*数字をすべて同じ幅にする*/
}
/*説明*/
.sub-news dd {
padding-bottom: 0.8rem; /*下に0.8文字分の余白*/
margin-bottom: 0.8rem; /*下（外側）に0.8文字分の余白*/
border-bottom: 1px solid var(--bg-border-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*最後の説明*/
.sub-news dd:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
/*リンク*/
.sub-news a {
text-decoration: none;
}
.sub-news a:hover {
color: var(--primary-color); /*マウスオン時の文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*人気記事ランキング（※サブブロック内の）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.sub-ranking {
list-style: none;
padding: 0;
counter-reset: rank; /*順位の番号を1から数えます*/
display: flex;
flex-direction: column; /*縦積みに*/
gap: 1rem; /*記事同士の間に空けるスペース*/
}
/*記事１個あたり*/
.sub-ranking a {
position: relative;
display: flex; /*横並びにする*/
align-items: flex-start;
gap: 0.8rem; /*画像とテキストの間に空けるスペース*/
text-decoration: none;
}
/*画像*/
.sub-ranking img {
display: block;
flex-shrink: 0; /*縮ませない*/
width: 72px; /*画像の幅*/
aspect-ratio: 1 / 1; /*正方形に切り抜く（小さな画像なので、縦横比をそろえています）*/
object-fit: cover; /*画像をコンテナのサイズに合わせてクリップ*/
}
/*順位の番号*/
.sub-ranking li a::before {
counter-increment: rank;
content: counter(rank); /*1、2、3…の番号を表示*/
position: absolute;
left: 0;top: 0;
width: 1.6rem;
line-height: 1.6rem;
text-align: center;
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-weight: 600;
background: var(--bg-inverse-color); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*1位〜3位の番号の色*/
.sub-ranking li:nth-child(-n+3) a::before {
background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*マウスオン時*/
.sub-ranking a:hover p {
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*運営者のプロフィール（※サブブロック内の）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.sub-profile {
text-align: center; /*テキストをセンタリング*/
}
/*画像*/
.sub-profile img {
width: 96px; /*画像の幅*/
aspect-ratio: 1 / 1; /*正方形に切り抜く*/
object-fit: cover; /*画像をコンテナのサイズに合わせてクリップ*/
border-radius: 50%; /*円形にする*/
margin-bottom: 0.5rem; /*下に0.5文字分のスペース*/
}
/*名前*/
.sub-profile .name {
font-weight: 700; /*太字に*/
font-size: 1rem;
margin-bottom: 0.5rem; /*下に0.5文字分のスペース*/
}
/*説明文*/
.sub-profile p:not(.name) {
text-align: left; /*左よせにする*/
}
/*list1（「新着記事」「特集」で使用。記事のカード一覧）
---------------------------------------------------------------------------*/
.list1 * {margin: 0;padding: 0;}
/*ボックス全体*/
.list1 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /*3列*/
gap: 2rem 1.5rem; /*ボックス同士の間に空けるスペース。上下に2文字分、左右に1.5文字分。*/
font-size: 0.9rem; /*文字サイズ90%*/
}
/*@container対応ブラウザでは、コンテナ幅（この場合はmain）が699px以下で2列*/
@container (max-width: 699px) {
.list1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
/*@container対応ブラウザでは、コンテナ幅（この場合はmain）が359px以下で1列*/
@container (max-width: 359px) {
.list1 { grid-template-columns: 1fr; }
}
/*ボックス１個あたり*/
.list1 .list {
position: relative;
display: grid; /*中のリンクを、ボックスいっぱいに広げる*/
}
/*リンク（ボックス全体）*/
.list1 .list a {
display: flex;
flex-direction: column;
gap: 0.6rem;
text-decoration: none;
}
/*画像*/
.list1 figure {
overflow: hidden;
}
.list1 figure img {
display: block;
width: 100%; /*幅を100%に*/
transition: transform 0.6s; /*マウスオン時の拡大にかける時間。0.6秒。*/
}
/*マウスオン時に、画像を少しだけ拡大*/
.list1 .list:hover figure img {
transform: scale(1.05);
}
/*日付*/
.list1 time {
display: block;
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-size: 0.85em; /*文字サイズ85%*/
letter-spacing: 0.05em; /*文字間隔を少しだけ広く*/
opacity: 0.6; /*色を60%だけ出す*/
font-variant-numeric: tabular-nums; /*数字をすべて同じ幅にする*/
}
/*記事のタイトル*/
.list1 h4 {
font-size: 1em;
font-weight: 700; /*太字に*/
line-height: 1.6; /*行間*/
}
/*マウスオン時のタイトルの色*/
.list1 .list:hover h4 {
color: var(--primary-color); /*theme.cssのprimary-colorを読み込みます。*/
}
/*カテゴリーのラベル（画像の左上）*/
.list1 .icon1 {
position: absolute;
left: 0; /*ボックスの左からの配置*/
top: 0; /*ボックスの上からの配置*/
padding: 0.1rem 0.6rem; /*アイコン内の余白。上下に0.1文字分、左右に0.6文字分。*/
font-size: 0.75em; /*文字サイズ75%*/
pointer-events: none;
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*大きなカード（list1に「big」を追加。2列にして、テキストブロックを画像の下に重ねます。「特集」で使用）*/
.list1.big {
grid-template-columns: repeat(2, minmax(0, 1fr)); /*2列*/
}
/*@container対応ブラウザでは、コンテナ幅（この場合はmain）が499px以下で1列*/
@container (max-width: 499px) {
.list1.big { grid-template-columns: 1fr; }
}
/*テキストブロック（画像の下に重ねます）*/
.list1.big .text {
position: absolute;
left: 0;bottom: 0;
width: 100%;
padding: 2.5rem 1.2rem 1rem; /*上に2.5文字分（グラデーションの分）、左右に1.2文字分、下に1文字分の余白*/
background: linear-gradient(transparent, rgba(0,0,0,0.7)); /*上は透明、下に向かって黒70%のグラデーション*/
color: #fff; /*文字色*/
}
/*タイトル*/
.list1.big h4 {
font-size: 1.2em; /*文字サイズ1.2倍*/
line-height: 1.5; /*行間*/
}
.list1.big .list:hover h4 {
color: inherit; /*マウスオン時も白のまま*/
}
/*説明文*/
.list1.big .text p {
margin-top: 0.4rem; /*上に0.4文字分のスペース*/
font-size: 0.85em; /*文字サイズ85%*/
line-height: 1.6; /*行間*/
opacity: 0.9; /*色を90%だけ出す*/
}
/*list3（「料理・レシピ」「収納・片づけ」で使用。画像が左、文字が右の横長リスト）
---------------------------------------------------------------------------*/
.list3 * {margin: 0;padding: 0;}
/*ボックス全体*/
.list3 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /*2列*/
gap: 1rem 2rem; /*ボックス同士の間に空けるスペース。上下に1文字分、左右に2文字分。*/
font-size: 0.85rem; /*文字サイズ85%*/
}
/*@container対応ブラウザでは、コンテナ幅（この場合はmain）が599px以下で1列*/
@container (max-width: 599px) {
.list3 { grid-template-columns: 1fr; }
}
/*ボックス１個あたり*/
.list3 .list {
display: grid; /*中のリンクを、ボックスいっぱいに広げる*/
border-bottom: 1px solid var(--bg-border-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
line-height: 1.6; /*行間*/
}
/*リンク（ボックス全体）*/
.list3 .list a {
padding-bottom: 1rem; /*下線との間の余白*/
display: grid;
grid-template-columns: 120px 1fr; /*１つ目（画像）を120pxに、２つ目（テキストブロック）を残った幅で使う*/
gap: 1rem; /*画像とテキストブロックの間に空けるスペース。1文字分。*/
text-decoration: none;
}
/*画像*/
.list3 figure img {
display: block;
width: 100%; /*幅を100%に*/
}
/*日付*/
.list3 time {
display: block;
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-size: 0.85em; /*文字サイズ85%*/
letter-spacing: 0.05em; /*文字間隔を少しだけ広く*/
opacity: 0.6; /*色を60%だけ出す*/
font-variant-numeric: tabular-nums; /*数字をすべて同じ幅にする*/
}
/*記事のタイトル*/
.list3 h4 {
font-size: 1em;
font-weight: 700; /*太字に*/
}
/*マウスオン時のタイトルの色*/
.list3 .list:hover h4 {
color: var(--primary-color); /*theme.cssのprimary-colorを読み込みます。*/
}
/*ランキング（list3に「rank」を追加。画像の左上に順位の番号を表示します。「人気ランキング」で使用）*/
.list3.rank {
counter-reset: rank; /*順位の番号を1から数えます*/
}
.list3.rank figure {
position: relative;
}
.list3.rank figure::before {
counter-increment: rank;
content: counter(rank); /*1、2、3…の番号を表示*/
position: absolute;
left: 0;top: 0;
width: 1.8rem;
line-height: 1.8rem;
text-align: center;
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-weight: 600;
background: var(--bg-inverse-color); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*1位〜3位の番号の色*/
.list3.rank .list:nth-child(-n+3) figure::before {
background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*もっと見る（一覧へのリンク）
---------------------------------------------------------------------------*/
.more {
margin-top: 2rem; /*上に2文字分のスペース*/
text-align: right; /*右よせにする*/
font-size: 0.9rem; /*文字サイズ90%*/
}
.more a {
text-decoration: none;
font-weight: 500;
color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*矢印アイコン*/
.more a::after {
font-family: "Font Awesome 6 Free";
content: "\f054"; /*Font Awesomeのこのマークを表示させます*/
font-weight: 900;
font-size: 0.7em; /*文字サイズ親の70%*/
margin-left: 0.5em; /*文字との間に空けるスペース*/
}
/*テーブル（ta1。「運営者情報」で使用）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta1 {
table-layout: fixed;
border-top: 1px solid var(--bg-border-color); /*テーブルの一番上の線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
width: 100%; /*幅を100%に*/
margin-bottom: 2rem; /*テーブルの下に空けるスペース。２文字分。*/
}
/*tr（１行分）タグ設定*/
.ta1 tr {
border-bottom: 1px solid var(--bg-border-color); /*テーブルの下線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
padding: 1rem; /*ボックス内の余白。１文字分。*/
word-break: break-all; /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
/*th（左側）のみの設定*/
.ta1 th {
width: clamp(8rem, 22vw, 13rem); /*幅。8文字分〜13文字分の間で、画面幅に応じて自動調整。真ん中の22vwは画面幅の22%。*/
text-align: left; /*左よせにする*/
background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}
/*狭い幅（お問い合わせフォームで使用）
---------------------------------------------------------------------------*/
.narrow {
max-width: 900px; /*最大幅。お好みで。*/
margin-inline: auto; /*中央に配置*/
}
/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {margin: 0;padding: 0;}
/*ブロック全体*/
dl.news {
border-top: 1px solid var(--bg-border-color); /*一番上の線。theme.cssのbg-border-colorを読み込みます。*/
font-size: 0.9rem; /*文字サイズ90%*/
}
/*日付*/
dl.news dt {
padding-top: 1rem; /*上の余白*/
font-family: var(--accent-font); /*フォント指定。theme.cssのaccent-fontを読み込みます。*/
font-weight: 500;
letter-spacing: 0.05em; /*文字間隔を少しだけ広く*/
font-variant-numeric: tabular-nums; /*数字をすべて同じ幅にする（日付の幅がそろい、横のカテゴリーの位置がずれません）*/
}
/*カテゴリー（日付の横の小さな文字）*/
dl.news dt span {
display: inline-block;
margin-left: 1rem;
padding: 0 0.8rem;
background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
font-family: var(--base-font); /*フォント指定。theme.cssのbase-fontを読み込みます。*/
font-weight: 500;
font-size: 0.75rem; /*文字サイズ75%*/
letter-spacing: 0;
line-height: 2;
}
/*目立たせたいカテゴリー*/
dl.news dt span.accent-color {
background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*本文*/
dl.news dd {
padding: 0.2rem 0 1rem; /*上に0.2文字分、下に1文字分の余白*/
border-bottom: 1px solid var(--bg-border-color); /*下の線。theme.cssのbg-border-colorを読み込みます。*/
}
/*@container対応ブラウザでは、コンテナ幅（この場合はmain）が600px以上で、日付と本文を横並びに*/
@container (min-width: 600px) {
dl.news {
display: grid;
grid-template-columns: auto minmax(0, 1fr); /*左（日付とカテゴリー）は一番長いものに合わせた幅、右（本文）は残り一杯。*/
}
dl.news dt {
padding: 1rem 1.5rem 1rem 0; /*右に1.5文字分の余白*/
border-bottom: 1px solid var(--bg-border-color); /*下の線。theme.cssのbg-border-colorを読み込みます。*/
white-space: nowrap; /*カテゴリーが長くても折り返さない*/
}
dl.news dd {
padding: 1rem 0;
}
}/*追加指定ここまで*/
/*カテゴリーの幅を、一番長いカテゴリーに合わせてそろえる（subgridに対応したブラウザのみ。対応していない古いブラウザでは、文字数に合わせた幅のまま表示されます）*/
@supports (grid-template-columns: subgrid) {
/*日付・カテゴリー・本文の3列に*/
dl.news {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
}
/*日付とカテゴリーは、上の3列のうち左の2列を使う*/
dl.news dt {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
align-items: center;
align-content: start;
}
/*カテゴリーの文字は中央に*/
dl.news dt span {
text-align: center;
}
/*コンテナ幅（この場合はmain）が599px以下の追加指定*/
@container (max-width: 599px) {
/*日付とカテゴリーの下に、本文を1行使って表示*/
dl.news dt {
grid-column: 1 / 3;
}
dl.news dd {
grid-column: 1 / -1;
}
}/*追加指定ここまで*/
}/*subgrid対応ブラウザの指定ここまで*/
/*フッター
---------------------------------------------------------------------------*/
footer ul {list-style: none;}
footer p {margin: 0;}
/*フッターボックス全体*/
footer {
display: flex; /*横並びにする*/
flex-wrap: wrap;
gap: 2rem 4rem; /*ボックスの間に空けるスペース。上下2文字分、左右4文字分。*/
font-size: 0.85rem; /*文字サイズ85%*/
padding: 3rem var(--content-space-l) 1rem; /*上に3文字分、左右にtheme.cssのcontent-space-l、下に1文字分の余白。*/
background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}
/*ロゴと説明文のブロック*/
footer .info {
flex: 1; /*残りの幅を全部使う*/
min-width: 240px; /*最低でも240px*/
display: flex;
flex-direction: column; /*縦積みに*/
gap: 1rem; /*要素間に空けるスペース。１文字分。*/
}
/*ロゴ*/
footer .logo img {
display: block;
width: 200px; /*ロゴの幅。お好みで。*/
}
/*SNSアイコン*/
footer .sns {
display: flex; /*横並びにする*/
flex-wrap: wrap;
gap: 1rem; /*アイコン同士の間に空けるスペース。１文字分。*/
font-size: 1.3rem; /*アイコンサイズ*/
}
footer .sns a {
text-decoration: none;
}
/*メニューのブロック*/
footer .menu {
display: flex; /*横並びにする*/
flex-wrap: wrap;
gap: 2rem 3rem; /*メニュー同士の間に空けるスペース。上下2文字分、左右3文字分。*/
}
/*メニューの見出し*/
footer .menu .title {
font-weight: 700; /*太字に*/
margin-bottom: 0.3rem; /*下に0.3文字分のスペース*/
}
/*メニュー１個あたり*/
footer .menu a {
text-decoration: none;
}
footer .menu a:hover {
color: var(--primary-color); /*マウスオン時の文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*Copyright部分*/
footer small {
display: block;
width: 100%; /*幅を100%に*/
text-align: center; /*テキストをセンタリング*/
border-top: 1px solid var(--light-border-color); /*上の線の幅、線種、var以降は色の指定でtheme.cssのlight-border-colorを読み込みます。*/
padding-top: 1rem; /*テキストと上の線との間に空ける余白。1文字分。*/
}
/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
text-decoration: none;display: block;
background: rgba(0,0,0,0.5);
color: #ccc;
text-align: right;
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.pr a::before {
font-family: "Font Awesome 6 Free";
content: "\e2ca";
font-weight: 900;
margin-right: 0.5em;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}
/*ボタンの設定*/
.pagetop a {
display: block;text-decoration: none;text-align: center;z-index: 99;
animation: opa1 1s 0.4s both;
position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
right: 20px; /*右からの配置場所指定*/
bottom: 20px; /*下からの配置場所指定*/
color: #fff; /*文字色*/
font-size: 1.5rem; /*文字サイズ*/
background: rgba(0,0,0,0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
width: 60px; /*幅*/
line-height: 60px; /*高さ*/
border-radius: 50%; /*円形にする*/
}
/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
border-top: 1px solid var(--bg-border-color); /*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
border-bottom: 1px solid var(--bg-border-color); /*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}
/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
background-color: var(--bg-inverse-color); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
background-color: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*bg1-primary-light
---------------------------------------------------------------------------*/
.bg1-primary-light-parts {
background-color: var(--primary-light-color); /*背景色。theme.cssのprimary-light-colorを読み込みます。*/
color: var(--primary-light-inverse-color); /*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
}
/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
background-color: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}
/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
background-color: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
padding-top: var(--content-space-v, var(--content-space-l)); /*ボックス内の上に空ける余白。sectionと同じ値。*/
padding-bottom: var(--content-space-v, var(--content-space-l)); /*ボックス内の下に空ける余白。sectionと同じ値。*/
}
/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
--bleed-x: var(--content-space-l); /*エイリアスに*/
width: calc(100% + (var(--bleed-x) * 2)); /*section内容の幅＋両サイドpadding（対象要素の幅）*/
margin-left: calc(var(--bleed-x) * -1);
margin-right: calc(var(--bleed-x) * -1);
max-width: none;
}
/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
width: calc(100% + var(--content-space-l));
margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
width: calc(100% + var(--content-space-l));
margin-right: calc(-1 * var(--content-space-l));
}
/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7);color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: #ffe14d !important;}
.small {font-size: 0.8em;}
.large {font-size: 1.6em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}
/*大きな画面の場合*/
.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}