/* 共通のスタイル */

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root {
    --text-color: #333;                /*テキストカラー*/
    --primary-color: #59d5e0;          /*テンプレートのメインまたはアクセントカラー*/
    --primary-inverse-color: #fff;     /*上のprimary-colorの対となる色*/
    --global-space: 5vw;               /*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
section li {margin-left: 1rem;}


body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo,メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-optical-sizing: auto;
  background-color: white;
  color: var(--text-color); 
  margin: 0;
  padding:0;
  line-height: 2; 
  -webkit-text-size-adjust: none;
}


/* 全体 */
body * {box-sizing: border-box;}
html,body {
    height: 100%;
    font-size: 13px;
}

/* 画面幅900px以上 */
@media screen and (min-width:900px) {
    html, body {
       font-size: 16px;
    }
}


body {
    margin: 0;padding:0;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;    /*フォント種類（ゴシック）*/
    font-optical-sizing: auto;
    -webkit-text-size-adjust: none;
    background: #fff;
    color: var(--text-color);
    line-height: 2;
}


/* table */
table {border-collapse:collapse;}

/* 画像全般 */
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/* リンク */
a {
    color: var(--text-color); 
    transition: 0.3s;
}

/* マウスオン */
a:hover {
    text-decoration: none;    /* 下線を消す */
    color: var(--primary-color); 
}


/*コンテナー -*/
body:not(.home) #container {
    height: 100%;
    display: flex;
    flex-direction: column;            /* 子要素を縦並びにする */
    justify-content: space-between;    /* 並びかたの種類の指定 */
}


/*コンテンツ */
#contents {
    flex: 1;
    padding: var(--global-space);
}

/* 画面幅600px以下の追加指定 */
@media screen and (max-width:600px) {
    #contents {
        padding-top: 80px;    /*コンテンツ内の上の余白だけ上書き*/
    }
}


/*ヘッダーブロック*/
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 1vw 3vw;
    font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    z-index: 1;
    width: 100%;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
    /*ヘッダーブロック*/
    header {
        position: fixed;    /*スクロールしても動かないようにする指定。*/
    }
}


/*-----------------------------------------------------------------------------*/
/* メニュー                                                                    */
/*-----------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
    display: none;
}

#menubar ul {
    list-style: none;margin: 0;
    padding: 0;

}
#menubar a {
    display: block;
    text-decoration: none;
}

/*上で非表示にしたメニューを表示させる為の設定*/
.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を使う指示*/
    content: "\f078";        /*使いたいアイコン名（Font Awesome）をここで指定*/
    font-weight: bold;        /*この手の設定がないとアイコンが出ない場合があります*/
    margin-right: 0.5em;    /*アイコンとテキストとの間に空けるスペース*/
}


/* 大きな端末用のメニューブロック設定 */
/* メニューブロック全体の設定 */
.large-screen #menubar > nav > ul {
    display: flex;         /*横並びにする*/
    font-size: 0.85rem;    /*文字サイズ。85%。*/
    gap: 0.5rem;           /*メニュー同士の間に空けるマージン的な要素*/
}

/* メニュー１個あたりの設定 */
.large-screen #menubar li a {
    border-radius: 100px;    /*角を丸くする指定。適当に大きければOKです。*/
    padding: 0.2rem 1rem;    /*上下、左右へのメニュー内の余白*/
}

/* マウスオン時 */
.large-screen #menubar li a:hover {
    background: #fff;        /*背景色*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定 */
/*ドロップダウンブロック*/
.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;
}

/* メニュー１個あたり */
.large-screen #menubar ul ul a {
    margin-top: 0.4rem;
}


/* 小さな端末用の開閉ブロック */
/* メニューブロック設定 */
.small-screen #menubar.display-block {
    position: fixed;overflow: auto;z-index: 100;
    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 #menubar nav ul li {
    border: 1px solid #ccc;     /*枠線の幅、線種、色*/
    margin: 1rem;               /*メニューの外側に空けるスペース*/
    border-radius: 5px;         /*角を丸くする指定*/
    padding: 0 2rem;            /*メニュー内の余白。上下、左右へ。*/
}
.small-screen #menubar a {
    padding: 1rem;              /*メニュー内の余白*/
}

/* 文字色 */
.small-screen #menubar, .small-screen #menubar a {
    color: #fff;
}

/* 900px以下でのみ表示させるブロック */
#menubar .sh {
    font-weight: normal;        /*文字の太さを標準にする*/
    padding: 1rem 2rem 2rem;    /*上、左右、下へのブロック内の余白*/
}


/* ３本バー（ハンバーガー）アイコン設定 */
/*３本バーを囲むブロック*/
#menubar_hdr {
    animation: opa1 0s 0.2s both;
    position: fixed;z-index: 101;
    cursor: pointer;
    right: 3vw;                        /*右からの配置場所指定*/
    top: 1vw;                          /*上からの配置場所指定*/
    padding: 16px 14px;                /*上下、左右への余白*/
    width: 46px;                       /*幅（３本バーが出ている場合の幅になります）*/
    height: 46px;                      /*高さ*/
    display: flex;                     /*flexボックスを使う指定*/
    flex-direction: column;            /*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
    justify-content: space-between;    /*並びかたの種類の指定*/
}

/* バー１本あたりの設定 */
#menubar_hdr span {
    display: block;
    transition: 0.3s;    /*アニメーションにかける時間。0.3秒。*/
    border-top: 1.5px solid #333;    /*線の幅、線種、色*/
}

/* ×印が出ている状態の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;                        /*バーの幅*/
    border-color: #fff;                 /*線の色だけ上書き*/
}

/* ×印が出ている状態の設定。※１本目のバー。 */
#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;    /* ２本目は使わないので非表示にする */
}


/*-----------------------------------------------------------------------------*/
/* メイン                                                                      */
/*-----------------------------------------------------------------------------*/
/* h2(見出し)要素 */
main h2 {
    font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
    font-size: 3rem;
    letter-spacing: 0.1em;
    color: var(--primary-color);
}

.bg1 h2 {
    color: var(--primary-inverse-color); 
}

main h2 .hosoku {
    display: block;font-weight: normal;  
}

main h3 {
    display: inline-block;
    border-bottom: 3px solid var(--text-color);  
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------
@keyframes animation1 {
    0% {left: -200px;}
    100% {left: 0px;}
}


opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
    0% {opacity: 0;transform: scale(0.8);}
    100% {opacity: 1;transform: scale(1);}
}


/*-----------------------------------------------------------------------------*/
/* お知らせ                                                                    */
/*-----------------------------------------------------------------------------*/
.h-center {text-align: center !important;}

/* テキストのフェードイン設定 */
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.05s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.05s linear both;
}


/* listブロック全体を囲むブロック */
.list-grid1 {
    display: grid;
    color: var(--text-color);
}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
}

/* list内の全ての要素のmarginとpaddingを一旦リセット */
.list-grid1 .list * {
    margin: 0;padding: 0;
}

.list-grid1 .list p {
    font-size: 0.85rem; 
}

/*画面幅500px以上の追加指定*/
@media screen and (min-width:500px) {
    .list-grid1 {
        grid-template-columns: repeat(2, 1fr);    /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 1rem;    /*ブロックの間に空けるマージン的な指定*/
    }
}


/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
    .list-grid1 {
        grid-template-columns: repeat(3, 1fr);    /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 1rem;    /*ブロックの間に空けるマージン的な指定*/
    }
}

/* 画面幅900px以上の追加指定 */
@media screen and (min-width:900px) {
    .ws {width: 48%;display: inline;}
    .sh {display: none;}
    .pc {display: block;}
}


/*ボックス１個あたり*/
.list-grid1 .list {
    padding: 1rem;
    background: #fff;
    grid-template-rows: auto 1fr;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img {
    margin-bottom: 0.5rem;
}


/*-----------------------------------------------------------------------------*/
/*ボタン                                                                       */
-------------------------------------------------------------------------------*/
.btn a,
.btn-border-radius a {
    display: block;text-decoration: none;
    font-size: 1rem;
    text-align: center;
    background: var(--primary-color) !important; 
    color: var(--primary-inverse-color) !important;
    padding: 0.5rem !important;
    margin-top: 1rem !important;
}

.btn a:hover,
.btn-border-radius a:hover {
    filter: brightness(1.2);
}

/* btn-border-radiusの上書き */
.btn-border-radius a {
    display: inline-block;
    padding: 0.5rem 2rem !important;
    border-radius: 100px;
    background: #e12000 !important;
    color: #fff !important;
}


/* bg1背景色 */
.bg1 {
    position: relative;
    background: var(--primary-color);
    color: var(--primary-inverse-color);
    padding-top: 0vw;
    padding-bottom: 5vw;
    margin-top: 5vw;
    margin-bottom: 0vw;
    
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
    padding-left: var(--global-space);
    padding-right: var(--global-space);
}
.bg1 a {
    color: inherit;
}

/* height傾斜の角度。画面幅100%＝100vw */
.bg1::before, .bg1::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(5vw + 1px);
    background: var(--primary-color);
}

.bg1::before {
    top: -5vw;    /*上の、height */
    clip-path: polygon(0 100%, 100% 0, 100% 100%);    /*三角形の形を作る*/
}

.bg1::after {
    bottom: -5vw;    /*上の、height */
    clip-path: polygon(0 0, 100% 0, 0 100%);    /*三角形の形を作る*/
}


/*-----------------------------------------------------------------------------*/
/*テーブル                                                                     */
/*-----------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.table1 caption {
    font-weight: bold;
    padding: 0.5rem 1rem;
    background: #333;
    color: #fff;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.table1 {
    table-layout: fixed;
    border-top: 1px solid #333;
    width: 100%;
    margin-bottom: 5rem;
}

.table1 tr {
    border-bottom: 1px solid #333;
}

.table1 th, .table1 td {
    padding: 1rem;
    word-break: break-all;
}

.table1 th {
    width: 30%;
    text-align: left;
   /* background: #eee; */
}



/*-----------------------------------------------------------------------------*/
/* フッター                                                                    */
/*-----------------------------------------------------------------------------*/
#footermenu {
    margin: 0 !important;
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
}

#footermenu li {
    display: inline-block;
    padding: 0 10px;
}


footer small {font-size: 100%;}
footer {
    font-size: 0.7rem;         /*文字サイズ。bodyのfont-sizeの70%です。*/
    text-align: center;        /*内容をセンタリング*/
    padding: 20px;             /*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*その他
---------------------------------------------------------------------------*/
/* .clearfix::after {content: "";display: block;clear: both;} */
/* .color-check, .color-check a {color: #ff0000 !important;} */
/* .l {text-align: left !important;} */
/* .r {text-align: right !important;} */
/* .ws {width: 95%;display: block;} */
/* .wl {width: 95%;display: block;} */
/* .mb0 {margin-bottom: 0px !important;} */
/* .mb30 {margin-bottom: 30px !important;} */
/* .look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;} */
/* .small {font-size: 0.75em;} */
/* .large {font-size: 2em; letter-spacing: 0.1em;} */
/* .pc {display: none;} */
/* .dn {display: none !important;} */
/* .block {display: block !important;} */