@charset 'utf-8'; /*---------------------------------

  共通

---------------------------------*/
/* CSS変数定義 */
:root {
    --font-family-default: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
    --font-family-notosansjp: 'Noto Sans JP', sans-serif;
	--font-family-mincho: '游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif';
    --navy:#012c62;
    --aliceblue:#eff2fa; 
    --orange:#f59f10; 
    --dark-orange: #f6a830; 
    --caution:#cc251f; 
    --red: #ff0000; 
    --yellow: #fff600; 
    --blue: #0036ff;
}

/* 基本フォント */
body {
    font-family: var(--font-family-default);
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
    word-break: break-word;
    word-wrap: break-word;
}

/* font-family */
.font-mincho {
	font-family: var(--font-family-mincho);
}

/* 色 */
.text-navy {
    color: var(--navy);
}

.text-red {
    color: var(--red);
}

.text-orange {
    color: var(--orange);
}

.text-darkorange {
    color: var(--dark-orange);
}

.text-blue {
    color: var(--blue);
}

.bg-navy {
    background-color: var(--navy);
}

.bg-aliceblue {
    background-color: var(--aliceblue);
}

/* 余白 */
.mb-1L {
    margin-bottom: 1em !important;
}

.mb-2L {
    margin-bottom: 2em !important;
}

.mb-3L {
    margin-bottom: 3em !important;
}

.mb-4L {
    margin-bottom: 4em !important;
}

.mb-5L {
    margin-bottom: 5em !important;
}

/* 文字サイズ */
.text-normal {
    font-size: 100% !important;
}

.text-large {
    font-size: 135% !important;
    line-height: 1.2;
}

/* マーカー */
.mark {
    padding: 0;
}

.mark--yellow {
    background-color: var(--yellow);
}

/* 段落 */
p {
    line-height: 2;
    margin-bottom: 2em;
}

/* リスト */
ul {
    padding-left: 1.5em;
}

/* 画像 */
img {
    max-width: 100%;
    height: auto;
}

/* リンク・ボタン */
a:focus,button:focus {
    outline: none;
}

/* アニメーション */
@keyframes anime-pulse {
    0% {
        transform: scale(.95);
        opacity: 1
    }

    90% {
        opacity: .1
    }

    to {
        transform: scale(1.2,1.5);
        opacity: 0
    }
}

/*---------------------------------

  グリッドシステム

---------------------------------*/
/* コンテナ：基本スタイル */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container::before,.container::after {
    content: '';
    clear: both;
    display: block;
}

/* コンテナ：サイズバリエーション */
.container--750 {
    max-width: 780px;
}

.container--760 {
    max-width: 790px;
}

.container--770 {
    max-width: 800px;
}

.container--780 {
    max-width: 810px;
}

.container--790 {
    max-width: 820px;
}

.container--800 {
    max-width: 830px;
}

.container--810 {
    max-width: 840px;
}

.container--820 {
    max-width: 850px;
}

.container--830 {
    max-width: 860px;
}

.container--840 {
    max-width: 870px;
}

.container--850 {
    max-width: 880px;
}

.container--860 {
    max-width: 890px;
}

.container--870 {
    max-width: 900px;
}

.container--880 {
    max-width: 910px;
}

.container--890 {
    max-width: 920px;
}

.container--900 {
    max-width: 930px;
}

.container--910 {
    max-width: 940px;
}

.container--920 {
    max-width: 950px;
}

.container--930 {
    max-width: 960px;
}

.container--940 {
    max-width: 970px;
}

.container--950 {
    max-width: 980px;
}

.container--960 {
    max-width: 990px;
}

.container--970 {
    max-width: 1000px;
}

.container--980 {
    max-width: 1010px;
}

.container--990 {
    max-width: 1020px;
}

/* コンテナ：最大幅を固定 */
@media (min-width: 1110px) {
    .container {
        width: 1030px;
    }
}

/*---------------------------------

  個別ページ

---------------------------------*/
.post {
    padding: 50px 0;
    font-size: 16px;
}

/* ページタイトル */
.post__title {
    text-align: center;
    font-size: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.post__title::before,.post__title::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    background-color: #000;
}

.post__title::before {
    margin-right: 1em;
}

.post__title::after {
    margin-left: 1em;
}

/* 本文 */
.post__body {
    padding: 50px 0;
}

/* 見出し */
.post h2 {
    font-size: 18px;
    margin-bottom: 1em;
}

/* リスト */
.post ol {
    padding-left: 1.2em;
}

.post ol ol {
    counter-reset: count;
    padding-left: 0;
}

.post li {
    margin-bottom: 0.5rem;
}

.post ol ol li {
    counter-increment: count;
    position: relative;
    list-style: none;
}

.post ol ol li::before {
    content: '(' counter(count) ')';
}

/* テーブル */
.post .table td,.post .table th {
    display: block;
}

/* for middle device */
@media (min-width: 768px) {
    .post__title {
        font-size: 36px;
    }
}

/* for large device */
@media (min-width: 992px) {
    .post .table td, .post .table th {
        display: table-cell;
    }
}

/*---------------------------------

  フッター

---------------------------------*/
.footer {
    background-color: var(--gray-dark);
    padding: 30px 0;
}

/* メニュー */
.footer__menu {
    padding: 0;
    list-style: none;
}

.footer__menuItem {
}

.footer__menuLink {
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2em;
    position: relative;
}

.footer__menuLink:hover {
    text-decoration: none;
    color: var(--white);
    opacity: 0.8;
}

.footer__menuLink .fas {
    margin-left: 1em;
}

/* 著作権表記 */
.copyright {
    text-align: center;
    display: block;
    color: var(--white);
}

/* for middle device */
@media (min-width: 768px) {
    .footer {
        font-size: 16px;
    }

    .footer__menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer__menuItem {
        padding: 0 15px;
    }

    .footer__menuLink {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer__menuLink .fas {
        margin-left: 1em;
    }
}

/* for large device */
@media (min-width: 992px) {
}

/*---------------------------------

  共通コンポーネント

---------------------------------*/
/* トップに戻る */
#page-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: var(--gray);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.8;
    transition: 0.3s;
    z-index: 999;
}

#page-top:hover {
    opacity: 1;
}

/* for middle device */
@media (min-width: 768px) {
    #page-top {
        width: 60px;
        height: 60px;
    }
}