@charset "utf-8";
/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");
/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
--primary-color: #825330; /*テンプレートのメインまたはアクセントとなる色*/
--primary-inverse-color: #fff; /*primary-colorの対として使う色*/
}
/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
0% {left: -200px;}
100% {left: 0px;}
}
/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {height: 100%;}
body {
margin: 0;padding:0;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; /*フォント種類（ゴシック）*/
-webkit-text-size-adjust: none;
background: #fff; /*背景色*/
color: #444; /*文字色*/
line-height: 2; /*行間*/
border-top: 5px solid var(--primary-color); /*上の線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
animation: opa1 0.2s 0.3s both; /*0.3秒の間だけ非表示にし、その後0.2秒かけてフェードイン表示*/
}
/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}
/*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 {
margin-top: 3rem;
}
/*文字サイズの設定。
もしデフォルトを「大」にしたい場合は、js/fontSizeChanger.jsの中のコメント箇所を読んで下さい。
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ*/
html.f-large {
font-size: 24px;
}
/*「小」ボタンを押した時の文字サイズ*/
html.f-small {
font-size: 16px;
}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
color: #444; /*文字色*/
transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*マウスオン時*/
a:hover {
filter: brightness(1.1); /*少しだけ明るくする*/
}
/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
height: 100%;
display: flex; /*flexボックスを使う指定*/
flex-direction: column; /*子要素を縦並びにする*/
justify-content: space-between; /*並びかたの種類の指定*/
max-width: 1800px; /*サイトの最大幅。これ以上広がらない。*/
margin: 0 auto;
}
/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
flex: 1;
padding: 0 3% 100px; /*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/
background: url(../images/footer_bg.png) repeat-x center bottom / auto 50px; /*下部の背景画像の読み込み。最後の50pxというのが画像の高さの指定部分です。*/
}
/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
padding: 10px 0; /*上下、左右へのブロック内の余白*/
position: relative; /*文字サイズボタンや、言語ボタンを絶対配置する為に必用な指定*/
min-height: 130px; /*最低限の高さ*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*ヘッダーブロック*/
header {
display: flex; /*flexボックスを使う指定*/
align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
padding-right: 230px; /*文字サイズや言語ボタンと重ならないようにする為、適当に余白をとっておきます*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*ロゴ*/
#logo {
margin: 0;
margin-bottom: 10px; /*下に空けるスペース*/
width: 150px; /*幅*/
}
/*大きな端末用のロゴを非表示に*/
.pc-logo {
display: none;
}
/*画面幅500px「以下」の追加指定。言語バーにロゴが重ならないようにする為。*/
@media screen and (max-width:500px) {
/*ロゴ*/
#logo {
width: calc(100% - 220px); /*ロゴの幅。220pxというのは、言語サイズのボックスと、ハンバーガーアイコンを合わせたおおよその幅で、それを差し引いたサイズをロゴの幅とします。*/
}
}/*画面幅500px「以下」の追加指定ここまで*/
/*画面幅650px以上の追加指定*/
@media screen and (min-width:650px) {
/*ロゴ*/
#logo {
margin-bottom: 0;
margin-right: 3%;
width: 300px; /*幅*/
}
/*小さな端末用のロゴを非表示に*/
.sh-logo {
display: none;
}
/*大きな端末用のロゴを表示する*/
.pc-logo {
display: block;
}
}/*画面幅650px以上の追加指定ここまで*/
/*ヘッダーの中央に配置するブロック*/
#header-center {
display: none; /*非表示にする*/
text-align: center;
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*ヘッダーの中央に配置するブロック*/
#header-center {
display: flex; /*flexボックスを使う指定*/
align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
width: calc(100% - 300px); /*pxの数値はロゴのwidth*/
}
#header-center * {
margin: 3px; /*サンプルテンプレートでは、バナー同士に空けるスペースで使っています。*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*ヘッダー右側の言語ボタン
---------------------------------------------------------------------------*/
/*言語ブロック全体*/
ul#lang {
margin: 0;padding: 0;
list-style: none;
position: absolute; /*headerに対して絶対配置する*/
right: 0px; /*右からの配置場所*/
bottom: 10px; /*下からの配置場所*/
display: flex; /*flexボックスを使う指定*/
font-size: 0.85rem; /*文字サイズ。85%*/
}
/*ボタン１個あたり*/
ul#lang a {
display: block;text-decoration: none;
border: 1px solid #ccc; /*枠線の幅、線種、色*/
border-radius: 5px; /*角を少しだけ丸くする指定*/
padding: 0 1rem; /*ボタン内の余白。上下、左右へ。*/
margin: 2px; /*ボタンの外側にとるスペース。ボタン同士の隙間部分です。*/
background: #fff; /*背景色*/
}
/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
background: #fff; /*背景色*/
box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/
display: flex; /*flexボックスを使う指定*/
align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
padding: 10px 15px; /*ブロック内の余白。上下、左右へ。*/
position: absolute; /*headerに対して絶対配置する*/
right: 0px; /*右からの配置場所*/
top: 0px; /*上からの配置場所*/
}
/*画面幅900px「以下」の追加指定。ハンバーガーアイコンが出る分、位置をずらす。*/
@media screen and (max-width:900px) {
#f-size {
right: 80px;
}
}/*画面幅900px「以下」の追加指定ここまで*/
/*「文字サイズ」のテキスト*/
#f-size p {
margin: 0;
margin-right: 10px; /*右側に空けるスペース。ボタンとの間にとるスペースです。*/
font-size: 0.85rem; /*文字サイズ*/
}
/*画面幅500px「以下」の追加指定。*/
@media screen and (max-width:500px) {
#f-size p {
display: none; /*画面が狭くなるので、非表示にする*/
}
}/*画面幅500px「以下」の追加指定ここまで*/
/*「小」「大」を囲むブロック*/
#f-size ul {
list-style: none;margin: 0;padding: 0;
display: flex; /*flexボックスを使う指定*/
align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
}
/*「小」ボタン設定*/
#f-size ul li#f-small::before {
display: block;
content: "小"; /*「小」の文字を出力*/
font-size: 16px; /*文字サイズ*/
width: 40px; /*幅*/
line-height: 40px; /*高さ*/
text-align: center; /*内容をセンタリング*/
background: #eee; /*背景色*/
}
#f-size ul li#f-small {
margin-right: 5px; /*右側に空けるスペース。「大」との間の隙間です。*/
}
/*「大」ボタン設定*/
#f-size ul li#f-large::before {
display: block;
content: "大"; /*「大」の文字を出力*/
font-size: 30px; /*文字サイズ*/
width: 50px; /*幅*/
line-height: 50px; /*高さ*/
text-align: center; /*内容をセンタリング*/
background: #eee; /*背景色*/
}
/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}
/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
cursor: pointer;
}
/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}
/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}
/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}
/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}
/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
font-family: "Font Awesome 6 Free"; /*Font Awesome Free版を使う指定*/
content: "\f078"; /*使いたいアイコン名（Font Awesome）をここで指定*/
font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
margin-right: 1em; /*アイコンとテキストとの間に空けるスペース*/
font-size: 0.9rem;
}
/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
display: block;text-decoration: none;
padding: 0.5rem 0; /*上下、左右へのメニュー内の余白*/
}
/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
display: flex; /*横並びにする*/
justify-content: space-between;
}
/*メニュー１個あたりの設定*/
.large-screen #menubar li {
flex: 1; /*個々のメニューを均等にし、幅いっぱいまで使う設定*/
position: relative; /*ドロップダウンの幅となる基準を作っておく*/
text-align: center; /*テキストをセンタリング*/
}
.large-screen #menubar li a {
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}
/*「大」の文字の選択時のメニューブロック*/
.f-large #menubar nav ul {
flex-wrap: wrap; /*メニューの折り返しを許可する*/
}
/*「大」の文字の選択時のメニュー１個あたり*/
.f-large #menubar nav > ul > li {
flex: auto;
width: 33%; /*６つのメニューを２段にする為に幅を指定。１段あたり３個になるので、この数字です。*/
}
/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}
/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
position: absolute;z-index: 100;
width: 100%;
}
/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
position: fixed;overflow: auto;z-index: 101;
left: 0px;top: 0px;
width: 100%;
height: 100%;
padding-top: 90px;
background: rgba(0,0,0,0.9); /*背景色*/
animation: animation1 0.2s both; /*animation1を実行する。0.2sは0.2秒の事。*/
}
/*メニュー１個あたりの設定*/
.small-screen nav > ul:not(.submenu) > li {
border: 1px solid #ccc; /*枠線の幅、線種、色*/
margin: 1rem; /*メニューの外側に空けるスペース*/
border-radius: 5px; /*角を丸くする指定*/
padding: 0 2rem; /*メニュー内の余白。上下、左右へ。*/
}
/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
color: #fff;
}
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
animation: opa1 0.2s 0.5s both; /*0.5秒待機後、0.2秒かけてフェードイン表示*/
position: fixed;z-index: 101;
cursor: pointer;
right: 30px; /*右からの配置場所指定*/
top: 30px; /*上からの配置場所指定*/
padding: 16px 14px; /*上下、左右への余白*/
width: 46px; /*幅（３本バーが出ている場合の幅になります）*/
height: 46px; /*高さ*/
display: flex; /*flexボックスを使う指定*/
flex-direction: column; /*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
justify-content: space-between; /*並びかたの種類の指定*/
background: rgba(0,0,0,0.5); /*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}
/*バー１本あたりの設定*/
#menubar_hdr span {
display: block;
transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/
border-top: 1.5px solid #fff; /*線の幅、線種、色*/
}
/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
background: #ff0000;
}
/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
transform-origin: center center; /*変形の起点。センターに。*/
width: 20px; /*バーの幅*/
}
/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
transform: rotate(45deg) translate(3.8px, 5px); /*回転45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
transform: rotate(-45deg) translate(3.8px, -5px); /*回転-45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
display: none; /*２本目は使わないので非表示にする*/
}
/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
margin: 2rem 0; /*ブロックの外側に空けるスペース*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*2カラムで使う為の指定*/
main.c2 {
display: flex; /*flexボックスを使う指定*/
justify-content: space-between; /*並びかたの種類の指定*/
}
/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
main.c2 .main {
width: calc(100% - 260px); /*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
order: 1;
}
/*2カラムの中にある.sub要素*/
main.c2 .sub {
width: 230px; /*幅*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*mainブロック内のh2タグ*/
main h2 {
margin: 0 0 1rem; /*h2の外側にとるスペース。上、左右、下への順番。*/
padding-left: 1rem; /*左側に１文字分の余白を作る*/
letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}
/*h3タグ*/
main h3 {
margin: 0 0 1rem; /*h2の外側にとるスペース。上、左右、下への順番。*/
letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/
border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
}
/*h3の左側のアクセントライン*/
main h3::before {
content: "";
border-left: 3px solid var(--primary-color); /*左側のアクセントラインの幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
padding-right: calc(1rem - 3px); /*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}
/*h4タグ*/
main h4 {
margin: 0 1rem 1rem; /*h4の外側にとるスペース。上、左右、下への順番。*/
}
/*pタグ*/
main p {
margin: 0 1rem 2rem; /*pの外側にとるスペース。上、左右、下への順番。*/
}
/*微調整*/
main p + p {
margin-top: -1rem; /*段落が続いた場合に、少し上に詰める。*/
}
/*subブロック設定
---------------------------------------------------------------------------*/
.sub h3::before {border: none;padding: 0;}
/*ブロック内のh3タグ*/
.sub h3 {
margin: 0;border: none;
font-weight: normal;
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
text-align: center;
padding: 0.5em;
}
.sub h3 a {color: inherit;}
/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
padding: 0;
margin: 0 0 1rem; /*上、左右、下へのマージン*/
}
/*メニュー１個あたり*/
.submenu li {
border-bottom: 1px solid rgba(0,0,0,0.1); /*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.submenu a {
display: block;text-decoration: none;
background: #fff; /*背景色*/
padding: 0.2rem 1rem; /*上下、左右へのメニュー内の余白*/
}
/*アイコン（Font Awesome）*/
.submenu a::before {
transition: 0.3s;
font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/
content: "\f0da"; /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
color: #ABABAB; /*アイコンの色*/
padding-right: 0.8em; /*アイコンとテキストの間の余白*/
font-weight: bold; /*この設定がないとアイコンが出ない場合があります*/
}
/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
color: var(--primary-color); /*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
}
/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
background: rgba(0,0,0,0.05); /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
padding: 10px; /*ボックス内の余白*/
border-radius: 5px; /*角を丸くする指定*/
margin-bottom: 1rem; /*ボックスの下に空けるスペース*/
}
/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
margin-bottom: 0;
}
/*フッターのコンテンツ（役場住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
background: #444; /*背景色*/
color: #fff; /*文字色*/
padding: 50px 3%; /*上下、左右へのボックス内の余白*/
}
#footer-contents a {
color: inherit;
}
/*左側のブロック*/
#footer-contents .left {
margin-bottom: 50px; /*下に空けるスペース*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
#footer-contents {
display: flex; /*flexボックスを使う指定*/
justify-content: space-between; /*並びかたの種類の指定*/
align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
}
/*左側のブロック*/
#footer-contents .left {
margin-bottom: 0; /*下のマージンをリセット*/
width: 50%; /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
}
#footer-contents .right {
width: 50%; /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
padding-left: 3%; /*左側に空ける余白。左右ブロックの間の隙間です。*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*テーブル（week）footer-contents内で使っています。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.week caption {
border: 1px solid #ccc; /*枠線の幅、線種、色*/
border-bottom: none; /*下線だけ消す*/
background: #333; /*背景色*/
padding: 0.5rem 1rem; /*caption内の余白。上下、左右に１文字分ずつとる。*/
}
/*weekテーブルブロック設定*/
.week {
width: 100%;
table-layout: fixed;
text-align: center; /*テーブル内のテキストをセンタリング*/
}
.week, .week td, .week th {
border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色。*/
}
/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
width: 100%;
height: 0;
padding-top: 56.25%; /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
position: relative;
overflow: hidden;
}
.iframe-box iframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
background: #333; /*背景色*/
color: #999; /*文字色*/
font-size: 0.8em; /*文字サイズ。*/
padding: 20px 3%; /*上下、左右へのボックス内の余白*/
display: flex; /*flexボックスを使う指定*/
justify-content: space-between; /*並びかたの種類の指定*/
align-items: flex-start; /*垂直揃えの指定。上に配置されるように。*/
}
/*ボックス内のリンクテキスト設定*/
#footermenu a {
text-decoration: none;
color: inherit;
}
/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
margin: 0;list-style: none;
padding: 0 0.3rem;
flex: 1;
}
/*メニューの見出し(title)*/
#footermenu .title {
font-weight: bold; /*太字にする*/
color: #ccc; /*文字色*/
padding-bottom: 5px; /*下に空けるスペース*/
}
/*フッター設定
---------------------------------------------------------------------------*/
footer {
font-size: 0.8rem; /*文字サイズ*/
background: #000; /*背景色*/
color: #fff; /*文字色*/
text-align: center; /*内容をセンタリング*/
padding: 20px; /*ボックス内の余白*/
}
/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}
/*著作部分*/
footer .pr {display: block;}
/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
margin: 0;
padding: 0 1rem; /*上下、左右へのボックス内の余白*/
}
/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
padding: 5px 0; /*上下、左右へのボックス内の余白*/
}
/*日付の横のマーク（共通設定）*/
.new dt span {
display: none; /*小さな端末では非表示にしておく。*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*お知らせブロック*/
.new {
display: flex; /*flexボックスを使う指定*/
flex-wrap: wrap; /*折り返す指定*/
}
/*日付(dt)設定*/
.new dt {
width: 14em; /*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
display: flex; /*flexボックスを使う指定*/
justify-content: space-between; /*日付とアイコンをそれぞれ端に寄せる*/
}
/*日付の横のマーク（共通設定）*/
.new dt span {
display: inline-block; /*表示させる*/
width: 7em; /*幅。7文字(em)分。*/
background: #999; /*背景色*/
color: #fff; /*文字色*/
font-size: 0.8em; /*文字サイズを親要素の80%に。*/
text-align: center; /*文字をセンタリング*/
margin-right: 1em; /*アイコンの右側に空けるスペース*/
align-self: flex-start; /*高さを間延びさせない指定*/
line-height: 1.8; /*行間を少し狭く*/
position: relative;top: 0.4em; /*上下の配置バランスの微調整*/
border-radius: 2px; /*角を丸くする指定*/
}
/*icon-bg1設定。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new dt span.icon-bg1 {
background: #cd0000; /*背景色*/
}
/*icon-bg2設定。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new dt span.icon-bg2 {
background: #006acd; /*背景色*/
}
/*記事(dd)設定*/
.new dd {
width: calc(100% - 14em); /*「14em」は上の「.new dt」のwidthの値です。*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*.listブロック共通
---------------------------------------------------------------------------*/
.list {
position: relative; /*子要素のアイコンを絶対配置する為の設定*/
}
/*ボックス内のアイコン*/
.list .list-icon {
font-size: 0.6rem; /*文字サイズ*/
background: #ff0000; /*背景色*/
color: #fff; /*文字色*/
width: 50px; /*幅*/
line-height: 50px; /*高さ*/
border-radius: 50%; /*角丸のサイズ。円形になります。*/
text-align: center; /*テキストをセンタリング*/
position: absolute; /*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
left: -10px; /*listブロックに対して左からの配置場所の指定*/
top: -10px; /*listブロックに対して上からの配置場所の指定*/
}
/*figure画像*/
.list figure {
margin-bottom: 2rem; /*下に空けるスペース。２文字分。*/
}
/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list {
margin-bottom: 30px; /*ボックス同士の上下間に空けるスペース*/
padding: 20px; /*ボックス内の余白*/
background: #fff; /*背景色*/
box-shadow: 5px 5px 20px rgba(0,0,0,0.1); /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}
/*dl（下のdtとddを囲むブロック）*/
.list-grid .list dl {
height: 10em; /*高さ*/
overflow: auto; /*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/
}
/*dt（タイトル、日付が入っている所）*/
.list-grid .list dl dt {
color: #333; /*文字色*/
font-weight: bold; /*太字にする*/
}
/*dd（サンプルテキストが入っている所）*/
.list-grid .list dl dd {
margin-bottom: 0.5em; /*下に空けるスペース*/
}
/*ボックス内のh4タグ*/
.list-grid .list h4 {
margin: 0;
padding: 1rem; /*余白。１文字分。*/
}
/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list h4 i {
transform: scale(1.5); /*デフォルトの1.5倍に*/
margin-right: 1rem; /*右側に空けるスペース。テキストとアイコンの隙間部分です。*/
}
/*タイトルの背景色バリエーション（共通）*/
.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6 {
color: #fff; /*文字色*/
margin-bottom: 1rem !important; /*下に空けるスペース*/
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a {
display: block;
color: inherit;
}
/*bg-color0への追加指定*/
.bg-color0 {
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}
/*bg-color1への追加指定*/
.bg-color1 {
background: #ff9a18; /*背景色*/
}
/*bg-color2への追加指定*/
.bg-color2 {
background: #189aff; /*背景色*/
}
/*bg-color3への追加指定*/
.bg-color3 {
background: #dd3d8c; /*背景色*/
}
/*bg-color4への追加指定*/
.bg-color4 {
background: #6f3eb9; /*背景色*/
}
/*bg-color5への追加指定*/
.bg-color5 {
background: #1b7a1e; /*背景色*/
}
/*bg-color6への追加指定*/
.bg-color6 {
background: #7a3a1b; /*背景色*/
}
/*ボックス内のpタグ*/
.list-grid .list p {
margin: 0;
}
/*ボックス内のfigure画像*/
.list-grid .list figure {
margin-bottom: 1rem; /*下に空けるスペース*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*listブロック全体を囲むブロック*/
.list-grid {
display: flex; /*flexボックスを使う指定*/
flex-wrap: wrap; /*折り返す指定*/
}
/*１個あたりのボックス設定*/
.list-grid .list {
width: 32%; /*幅。３列になります。*/
margin-right: 2%; /*右側へのマージン。ボックス同士の左右の余白です。*/
}
/*1カラムにしたい場合*/
.list-grid.c1 .list {
width: 100%;
margin-right: 0;
}
/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
.list-grid.c1 .list dl {
height: auto;
}
/*3の倍数目のボックスの右側のマージンをなくす*/
.list-grid .list:nth-of-type(3n) {
margin-right: 0;
}
/*ボックス内のtextブロック*/
.list-grid .list .text {
flex: 1;
}
}/*画面幅900px以上の追加指定ここまで*/
/*btnの設定（「btn1」と「btn2」）
---------------------------------------------------------------------------*/
/*ボタン共通*/
a.btn1, a.btn2 {
display: inline-block;text-decoration: none;
letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/
border-radius: 3px; /*角を丸くする指定*/
padding: 0.3rem 2rem; /*上下、左右へのボタン内の余白*/
box-shadow: 1px 2px 3px rgba(0,0,0,0.2); /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/
transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*iタグ共通（アイコンの事）*/
a.btn1 i, a.btn2 i {
margin-left: 20px;
}
/*btn1の追加指定*/
a.btn1 {
background: #fff; /*背景色*/
color: #444; /*文字色*/
border: 1px solid #ccc; /*枠線の幅、線種、色*/
}
/*btn1内のiタグ（アイコンの事）*/
a.btn1 i {
color: var(--primary-color); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}
/*btn2の追加指定*/
a.btn2 {
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: var(--primary-inverse-color); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}
/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.mainimg {
margin-bottom: 80px; /*画像の下に空けるスペース*/
}
/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
margin:0;padding: 0;
line-height: 1;
width: 100%;
text-align: center;
position: absolute;
bottom: -30px; /*下からの配置場所指定。ボタンを画像の下に移動します。*/
}
/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
/*buttonタグ*/
ul.slick-dots li button {
border: none;padding: 0;
display: block;
text-indent: -9999px; /*デフォルトで文字が出るので画面の外に追い出す指定*/
width: 12px; /*ボタンの幅*/
height: 12px; /*ボタンの高さ*/
border-radius: 50%; /*丸くする指定*/
cursor: pointer; /*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
background: #ccc; /*背景色。白。*/
}
/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
background: var(--primary-color); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}
/*FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
padding: 0 1rem; /*上下、左右へのボックス内の余白*/
}
/*質問*/
.faq dt {
border-radius: 3px; /*枠を角丸にする指定*/
margin-bottom: 1rem; /*下に空けるスペース*/
background: #fff; /*背景色*/
border: 1px solid #ccc; /*枠線の幅、線種、色*/
text-indent: -2rem; /*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
padding: 5px 1em 5px 3em; /*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}
/*アイコン（Font Awesome）*/
.faq dt::before {
font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/
content: "\f059"; /*アイコンのコード*/
color: var(--primary-color); /*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
padding-right: 1rem; /*アイコンとテキストとの間のスペース*/
}
/*回答*/
.faq dd {
padding: 5px 1rem 30px 3rem; /*ボックス内の余白**/
}
/*opencloseを適用した要素のカーソル*/
.openclose {
cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}
/*トップページの「キャンペーン中」ボタン
---------------------------------------------------------------------------*/
#message a {
text-decoration: none;display: block;
writing-mode: vertical-rl;
text-orientation: upright;
background: #00c60d;/*背景色*/
color: #fff; /*文字色*/
position: fixed; /*スクロールしてもボタンが移動しないようにする指定。移動させたいならfixedをabsoluteにして下さい。*/
z-index: 100;
right: 0px; /*ボタンの右からの配置場所指定*/
top: 170px; /*ボタンの上からの配置場所指定*/
padding: 20px 15px; /*ボタン内の余白。上下、左右。*/
border-radius: 10px 0px 0px 10px; /*角を丸くする指定。左上、右上、右下、左下の順番。*/
letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
}
/*ふきだしアイコン*/
#message i {
transform: scale(1.3); /*1.3倍に*/
margin-bottom: 10px; /*下に空ける余白*/
}
/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
font-weight: bold; /*太字に*/
padding: 10px 5px; /*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
background: #555; /*背景色*/
color: #fff; /*文字色*/
margin-bottom: 15px; /*下に空けるスペース*/
border-radius: 5px; /*角を丸くする指定*/
}
/*ta1テーブルブロック設定*/
.ta1 {
border-top: 1px solid #999; /*テーブルの一番上の線。幅、線種、色*/
width: 100%;
margin: 0 auto 2rem; /*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
}
/*tr（１行分）タグ設定*/
.ta1 tr {
border-bottom: 1px solid #999; /*テーブルの下線。幅、線種、色*/
}
/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
padding: 10px 5px; /*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
word-break: break-all; /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
/*th（左側）のみの設定*/
.ta1 th {
width: 30%; /*幅*/
text-align: left; /*左よせにする*/
background: #eee; /*背景色*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
padding: 5px 15px; /*上下、左右へのボックス内の余白*/
}
/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
padding: 20px 15px; /*上下、左右へのボックス内の余白*/
}
/*th（左側）のみの設定*/
.ta1 th {
width: 20%; /*幅*/
}
}/*画面幅900px以上の追加指定ここまで*/
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}
/*ボタンの設定*/
.pagetop a {
display: block;text-decoration: none;text-align: center;z-index: 99;
position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
right: 20px; /*右からの配置場所指定*/
bottom: 20px; /*下からの配置場所指定*/
color: #fff; /*文字色*/
font-size: 1.5em; /*文字サイズ*/
background: rgba(0,0,0,0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
width: 60px; /*幅*/
line-height: 60px; /*高さ*/
border-radius: 50%; /*円形にする*/
}
/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.color-theme, .color-theme a {color: var(--primary-color) !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 98%;display: block;}
.wl {width: 98%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.img {margin: 0 0 1rem;}
.block {display: block !important;}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: block;}
}/*画面幅900px以上の追加指定ここまで*/
