@charset "utf-8";

/* ===========================
 1.装飾
    　1.1　見出し
    　1.2　回り込み
    　1.3　アンダーライン
    　1.4　◯囲み字
    　1.7　フキダシ
 2.共有パーツ
    　2.1　監修
    　2.2　書いた人
    　2.3　訳注
    　2.4　リスト
    　2.5　引用
    　2.6　注目（コロナ感染予防の表記に使用）
    　2.7　投稿日時・更新日時
    　2.8  ボタン
      2.9  段落白抜き強調
      2.10 白地強調
      2.14 前に丸のあるリンク
      2.15 辞書へのリンク
      2.19　リンク色茶
    3.ページごとの設定
      3.2　障害年金とは
=========================== */


/* ===================================================
 1.装飾
======================================================*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    1.1見出し
~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ---------- H3 ---------- */

/* 普通の見出し　固定ページで使用 */
.h3_def {
    clear: both;
    padding: 10px 10px 10px 20px;
    margin: 40px 0 10px;
    color: #55433b;
    font-weight: 700;
    font-size: 16px;
    background: #f9f0eb;
    position: relative;
    line-height: 1.5;
}
.h3_def:before {
    content: '';
    width: 5px;
    height: 26px;
    background-color: #55433b;
    display: block;
    position: absolute;
    top: calc(50% - 13px);
    left: 0;
}
@media (min-width: 769px) {
    .h3_def {
      padding: 15px 10px 15px 26px;
      margin: 88px 0 28px;
      font-size: 20px;
    }
}

/* h3の左罫線の代わりに画像 */
.h3_img{
    padding: 15px 10px 15px 42px!important;
}

.h3_img::before{
    content:unset!important;
}

.h3_img img{
    width: 3em;
    height: 3em;
    z-index: 10;
    position: absolute;
    top: 0;
    left: -1em;
}


/* h3にナンバリング［１］ */
/* SPANでのナンバリング */
h3.Number{
    padding-left:3em!important;
}

.Number span.Number{
    display: block;
    position: absolute;
    left: -0.5em;
    top: -0.12em;
    background-color: #54433b;
    color: white;
    width: 3em;
    height: 3em;
    padding-top: 0.75em;
    text-align: center;
}
@media (min-width: 769px) {
    .Number span.Number{
        left: -1em;
        top: 0;
        border-radius: 50%;
    }
}


/* 理由１～理由４　着手金０円の理由　で使用中 */
h3.Reazon{
    margin-top:4em!important;
}

h3.Reazon:before{
    background-color: #55433b;
    position: absolute;
    left: 0;
    top: -30px;
    padding: 0.5em;
    float: left;
    color: white;
    margin-left: -0.5em;
    width:3em!important;
}

h3.Reazon1:before{
    content:'理由１'!important;
}
h3.Reazon2:before{
    content:'理由２'!important;
}
h3.Reazon3:before{
    content:'理由３'!important;
}
h3.Reazon4:before{
    content:'理由４'!important;
}

@media (min-width: 769px) {
    h3.Reazon{
        padding-left:4em;
        clear: both;
    }
    h3.Reazon:before{
        border-radius: 50%;
        padding: 1.25em 0.5em;
        top:-10px;
    }
}

@media (min-width: 769px) {
    h3.Reazon{
        padding-left:4em!important;
        clear: both;
    }
    h3.Reazon:before{
        border-radius: 50%;
        padding: 1.25em 0.5em;
        top:-10px!important;
    }
}
/* ●文字列　メリットで使用中 */
h3.Headline{
    padding-left:6em!important;
    margin-bottom:3em!important;
}

.Headline span.Headline{
    display: block;
    position: absolute;
    left: -0.5em;
    top: -0.12em;
    background-color: #54433b;
    color: white;
    padding:1em;
    text-align: center;
    }
@media (min-width: 769px) {
    .Headline span.Headline{
        padding-top: 2.25em;
        left: -1em;
        top: -1.5em;
        border-radius: 50%;
        width: 6em;
        height: 6em;
    }
}


/* 社労士の選び方　*/
h3.Star{
    margin-top: 110px !important;
}

h3.Star:before{
    color: orange;
    background-color: #fff9f6!important;
    font-size: 30px;
    line-height: 1em;
    width: auto!important;
    height: 33px!important;
    top: 10px!important;
    left: 10px!important;
    padding: 4px 4px 0;
    border: 2px solid orange;
    border-radius: 8px 0 0 8px;
}

h3.Star:after {
    position: absolute;
    top: -30px;
    left: 110px;
    border: 2px solid orange;
    background-color: orange;
    border-radius: 0 8px 8px 0;
    padding: 8px 4px 0px;
    color: white;
    font-size: 14px;
    height: 29px;
    font-weight: normal;
}
@media (min-width: 769px) {
    h3.Star{
        padding-left: 175px!important;
    }
    h3.Star:before{
        top: 10px;
    }
    h3.Star:after {
        top:10px;
    }
    h3.Star2{
        padding-left: 200px!important;
    }
}

h3.Star3:before{
    content: "★★★"!important;
}
h3.Star3:after{
    content:"最重要";
}
h3.Star2:before{
    content: "★★☆"!important;
}
h3.Star2:after{
    content:"かなり重要";
}
h3.Star1:before{
    content: "★☆☆"!important;
}
h3.Star1:after{
    content:"重要";
}

/* ---------- H4 ---------- */
.single-content h4{
    margin-top:3em;
    font-size:14pt;
    color:#794141;
    clear: both;
}
.single-content h4:before{
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background:url(../img/common/h4_check.png) no-repeat left top/contain;
    vertical-align: middle;
    margin:0 0.25em 0.1em 0;
}

/* 普通の見出し　固定ページで使用 */
.h4_def{
    margin-top:2em;
    font-size:14pt;
    color:#794141;
    clear: both;
}
.h4_def:before{
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background:url(../img/common/h4_check.png) no-repeat left top/contain;
    vertical-align: middle;
    margin:0 0.25em 0.1em 0;
}

/* h4にナンバリングするときはbeforeを排除 */
h4.Number{
    color:#794141;
}

h4.Number:before{
    content: none;
    background: unset;
}

h4.Number span.Number{
    left: 0;
    display: inline-block;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    color: #794141;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: #FFF9F6;
    border: #794141 1px solid;
}

h5{
    display:inline-block;
    margin-top:2em;
    background-color:peru;
    color:white;
    padding:0.23em 1em;
    font-size:medium;
}


/* ~~~~~~~~~~~~~~~~~
    1.2 回り込み
~~~~~~~~~~~~~~~~~~~ */
/* #region */
.img_right, .img_left, .img_center, .img_center_mini{
    display: block;
    margin:0 auto;
    padding:1em;
}

@media (min-width: 769px) {
    .img_right{
        max-width: 360px;
        padding:0;
        float: right;
        margin:auto auto 30px 1em;

    }
    .img_left{
        max-width: 360px;
        padding:0;
        float: left;
        margin:auto 1em 1em 0;
    }

    .img_center_mini{
        max-height:300px;
        width:auto;
    }

    .img_right_mini{
        max-width:250px;
        padding:0;
        float: right;
        margin:auto auto 30px 1em;
    }
    .img_left_mini{
        max-width: 250px;
        padding:0;
        float: left;
        margin:auto 1em 1em 0;
    }
}

.img_2in1{
    display:block;
    margin: 0 auto 2em;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 769px) {
    .img_2in1 img{
        max-width: 40%;
        padding: 1em;
        box-sizing: content-box;
    }
}

.img_clear{
    clear: both;
}

/* #endregion */

/* 画像に合わせたキャプション */
/* #region img_figure */
.img_figure{
    display: table;
    min-width: 150px;
    margin-bottom: 2em!important;
}

.img_figure.img_right{
    margin-right:0;
    margin-left: 1.6em;
    padding-bottom: 0;
}

.img_figure.img_left{
    margin-left:0;
    margin-right: 1.6em;
    padding-bottom: 0;
}

.img_figure img{
    padding: 0;
}

.img_figure figcaption{
    display: table-caption;
    caption-side: bottom;
    font-size: 95%!important;
}

.img_figure+p:after, .img_figure:after{
    content: "";
    display: block;
    clear: both;
}

@media (min-width: 769px) {
    .img_figure+p{
        display: inline;
        position: relative;
        top: 56px;
    }

    .contents .img_figure+p{
        display: inline-block;
        top: unset;
    }
}
/* #endregion */

.float_right{
    float: right;
    display: block;
}


/* 文字-画像下揃え */
@media (min-width: 769px) {
    .img_bottom{
        display: flex;
        align-items: flex-end;
    }
}


/* ~~~~~~~~~~~~~~~~~
    1.3 ---
~~~~~~~~~~~~~~~~~~~ */
/* #region flexで並べる */
.flex_img{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.flex_img.flex4 li{
    position: relative;
    margin-right: 1em;
    margin-bottom: 4em;
    float: left;
    width: calc(25% - 1em);
    font-size: 92%;
}

.flex_img.flex4 > img{
    position: relative;
    float: left;
    width: calc(25% - 1em);
    font-size: 92%;
}

.flex_img.flex3 li{
    position: relative;
    margin-right: 1em;
    margin-bottom: 4em;
    float: left;
    width: calc(33% - 1em);
    font-size: 92%;
}

.flex_img.flex3 > img{
    position: relative;
    float: left;
    width: calc(33% - 1em);
    font-size: 92%;
}

.flex_img.flex2 li{
    position: relative;
    margin-right: 1em;
    margin-bottom: 4em;
    float: left;
    width: calc(50% - 1em);
    font-size: 92%;
}

.flex_img.flex2 > img , .flex_img.flex2 > a {
    position: relative;
    float: left;
    font-size: 92%;
    width:50%;
}


.flex_img.arrow li::after{
    position: absolute;
    content: "▶";
    color: white;
    background: #543;
    border-radius: 1em;
    height: 2em;
    width: 2em;
    text-align: center;
    z-index: 100;
    top: calc(50% - 1em);
    right: -1.5em;
}

.flex_img.arrow  li:last-child::after{
    content:"";
    background: none;
}

@media (max-width: 769px) {
    .flex_img{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    .flex_img.flex4 img, .flex_img.flex3 img{
        width:100%;
    }

    .flex_img.flex4 li, .flex_img.flex3 li, .flex_img.flex2 li{
        width: calc(50% - 1em);
        text-align: left;
    }

    .flex_img li {
        margin-bottom: 0.8em;
    }
    .flex_img.arrow li::after{
        content: "▼";
        bottom: -1.3em;
        top: unset;
        right: calc(50% - 1em);
    }
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    1.4　◯囲み字
~~~~~~~~~~~~~~~~~~~ */
.maruji{
    border: 1px solid #000;
    border-radius: 1em;
    font-size: 67.5%;
    padding: 1px 4px;
    text-align: center;
    vertical-align: text-bottom;
}

/* ~~~~~~~~~~~~~~~~~
    1.5　フォントサイズ
~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 769px) {
    .med{
        font-size:medium;
    }
}

/* ~~~~~~~~~~~~~~~~~
    1.6　チェックポイント
~~~~~~~~~~~~~~~~~~~ */
/* #region Check */
.Check {
    margin: 3em 0 2em;
    position: relative;
}
.Check dt {
    position: absolute;
    padding: 10px 20px;
    background: #54433b;
    color: #fff;
    font-weight: bold;
    top: -2em;
    left: 1em;
    border-radius: 2em;
}
.Check dd {
    display: inline-block;
    margin: 0;
    padding: 2em 1em 1em;
    background: #f4e8e1;
    color: #54433b;
    border-radius: 8px;
    text-align: left;
}

@media (min-width: 769px) {
    .Check{
        margin-top:5em;
    }
    .Check dd {
        padding:2em 2em 1em;
        font-size:medium;
    }
}

/* ~~~~~~~~~~~~~~~~~
    1.7　フキダシ
~~~~~~~~~~~~~~~~~~~ */

.balloon1 img{
    width:100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #55433b;
}

.balloon1-left img{
    float: left;
}

.baloon1-right img{
    float: right;
}

/* 自動挿入<p>に対応するため、個別設定 */
p.balloon1-left{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px!important;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 116px);
  background: #f4e8e1;
}

p.balloon1-left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -19px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #f4e8e1;
}

p.balloon1-right{
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px!important;
  padding: 7px 10px;
  min-width: 120px;
  max-width: calc(100% - 116px);
  background: #f4e8e1;
}

p.balloon1-right::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -19px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #f4e8e1;
}


/* #endregion */




/* ===================================================
        2.共有パーツ
======================================================*/

/* ~~~~~~~~~~~~~~~~~
    2.1　監修とライター
~~~~~~~~~~~~~~~~~~~ */
/* #region Writer*/
.Writer{
    display: block;
    margin-top:4em;
    margin:4em auto;
    padding:1em;
    background-color:white;
    color:#55433b;
    overflow: hidden;
    border-radius: 1em;
    width:100%;
}

.Writer a{
    text-decoration: none;
}

.Writer a:hover{
    text-decoration: underline;
}

.Writer img{
    border-radius: 50%;
    margin-right: 1em;
    display: block;
    margin: 0 auto;
    width: 33%;
}

.Writer dt{
    font-size:136%;
    font-weight: bold;
    margin-bottom:0.25em;
}
.Writer dt:before{
    font-size:16px;
    font-weight: normal;
}
#Supervision dt:before{
    content:"監修：";

}
#Writer dt:before{
    content: "この記事を書いた人：";
}

.Writer dt, .Writer dd{
    text-align: center;
}

.Writer p {/* 自動挿入どうしてもされるので対応 */
    margin: 0;
}

.Interviewee{
    display: block;
    text-align: center;
    border-bottom: 1px solid gray;
}

@media (min-width: 769px) {
    .Writer{
        width:75%;
    }
    .Writer img{
        width:120px;
        height:120px;
        float:left;
        margin-right: 1.5em;
    }
    .Writer dl{
        display: block;
        float: left;
        width:calc(100% - 3rem - 100px);
    }
    .Writer dt,.Writer dd{
        text-align: left;
    }
    .Writer dd:first-of-type{
        clear:none;
    }
    .Writer2 img{
        float: right !important;;
        margin-left:2em !important;;
    }
    .Writer2 dl{
        float:right;
    }
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    2.3　注釈
~~~~~~~~~~~~~~~~~~~ */
/* 注釈 */
.tips{
    color:gray;
    font-size:14px;
    border-radius: 8px;
    display: block;
}
.tips:before{
    content: "※";
    color:brown;
}
.kome{
    vertical-align: top;
    padding:0 0.25em;
}
.kome:after{
    content: "※";
    color:brown;
    font-size:80%;
    vertical-align: top;
}


/* 注釈※なし　*/
.notice{
    font-size: 87%;
    padding: 1em;
    margin-top: 4em;
    display: block;
    color:gray;
}

/* ~~~~~~~~~~~~~~~~~
    2.4　リスト
~~~~~~~~~~~~~~~~~~~ */
/* --- シンプルリスト --*/
/* #region SList */

/* シンプルリスト ol,ul */
.SList{
    margin: 0 1em 2em 2em;
}

ul.SList li{
    list-style-type: disc;
}
ol.SList li{
    list-style: none;
    padding-left: 1.3em;
    text-indent: -1.3em;
}


/* 　シンプルリスト DLタイプ */
dl.SList{
    margin: 0 1em 2em;
    overflow: hidden;
}
.SList dt{
    margin-top:2em;
    font-weight: bold;
}
.SList dd:before{
    content: "・";
    margin-left:1em;
    margin-right:0.5em;
}
.SList dd{
    text-align: left;
    margin-top:0.5em;
    margin-bottom: 0.5em!important;
    padding: 0!important;
}

@media (min-width: 769px) {
    .SList{
        font-size:medium;
        margin: 0 1em 2em 2em;
    }
}
/* #endregion */


/*--- 数字付きリスト ---*/
/* #region NoList */
.NoList li{
    margin-bottom: 1.2em;
}

ol.SquareNoList, ol.CircleNoList, dl.CircleNoList{
    counter-reset:number;
    list-style-type: none!important;
    padding: 0 0.5em 4em;
  }
  ol.SquareNoList li,  ol.CircleNoList li, dl.CircleNoList dt{
    position: relative;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 30px;
    overflow: hidden;
  }
  ol.SquareNoList li:before,  ol.CircleNoList li::before, dl.CircleNoList dt::before{
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display:inline-block;
    background: #f9f0eb;
    color: #54433b;
    font-weight:bold;
    font-size: 15px;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    top: 1.25em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border:1px solid #54433b;
  }

/* ３桁　*/
    ol.SquareNoList.hundreds li:before, dl.SquareNoList.hundreds dt::before{
        left: -4px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        top: calc( 1.25em + 2px );
    }
    dl.CircleNoList dt{
        margin-top:2em;
        font-weight: bold;
    }
    dl.CircleNoList dd{
        margin-left:2em;
    }
    ol.CircleNoList li::before, dl.CircleNoList dt::before{
        border-radius: 1em;
    }

    /* olのみの設定 */
    ol.NoList {
        list-style-type: decimal;
        margin-left: 1em;
    }

    /* DLのみの設定 */
    dl.SquareNoList {
        counter-reset: number 0;
        padding: 0 0.5em 4em;
        }
    dl.SquareNoList dt{
        position: relative;
        line-height: 1.5em;
        padding: 0.5em 0.5em 0.5em 30px;
        font-weight:bold;
        margin-top:2em;
        }
    dl.SquareNoList>dt:before {
        position: absolute;
        counter-increment: number;
        content: counter(number);
        display:inline-block;
        background: #f9f0eb;
        color: #54433b;
        font-size: 15px;
        left: 0;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        top: 1.25em;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        border:1px solid #54433b;
    }
    dl.SquareNoList dd{
        margin-left:2em;
    }
/* #endregion */


/* テーブル型リスト */
/* #region TList*/
.TList {
    display: block;
    margin-bottom: 2em;
    overflow: hidden;
}
.TList dt {
    clear: both;
    float: left;
    width: 8em;
    background-color: #55433b;
    color: white;
    margin:auto 1em 4px auto;
    padding: 0.25em;
    text-align: center;
}
.TList dd {
    margin-bottom: 4px;
    padding: 0.25em;
    color: #55433b;
    display: block;
    overflow: hidden;
    text-align: left;
}
.TList dd:after{
    display: block;
    content: "";
    clear: both;
}

.TList dd+dd{
    margin-left:9em;
}

@media (min-width: 769px) {
    .TList dt,.TList dd{
        font-size:medium;
    }
}
/* #endregion */

/* 左茶色のテーブル */
/* #region */
table.BTable{
    display: block;
    margin-bottom: 2em;
}
.Btable thead{
    background-color: #55433b;
    color: white;
    text-align: center;
}
.BTable tr{
    margin-bottom: 1em;
    margin-right: 1em;
    display: block;
}
.Btable td, .Btable th{
    padding: 0.25em;
    vertical-align: middle;
}
.BTable th{
    display: inline-block;
    clear: both;
    width:8em;
    background-color: #55433b;
    color: white;
    margin-right: 1em;
    text-align: center;
}

@media (min-width: 769px) {
    table.BTable{
        width:80%;
        margin:0 auto;
        font-size:medium;
    }
    .BTable th{
        display: block;
        float: left;
        margin-right:1em;
    }
}

/*　左茶色リストのDL型　*/
dl.Btable{
    margin-bottom:1em;
    overflow: hidden;
}
.Btable dt{
    color: #ffffff;
    padding:10px;
    background-color: #55433b;
    border:1px solid #ccc;
}

.Btable dd{
    margin-bottom: 1em;
    padding: 10px;
    background: #fff;
    text-align: left;
    border: 1px solid #ccc;
}
.Btable:after{
    content: '';
    display: block;
    clear: both;
}

.Ddd dd+dd{
    border-top: none!important;
    margin-top: -16px;
}

@media (min-width: 769px) {
    dl.Btable{
        width:90%;
        margin:0 auto 1em;
        font-size:medium;
        background: #55433b;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .Btable dt{
        width:30%!important;
        float: left;
        border:none;
        border-top: 1px solid #ccc;
        margin-bottom:0!important
    }
    .Btable dd{
        margin-left:30%;
        border: none;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        margin-bottom:0!important
    }
}
/* #endregion */


/* おしゃれテーブル */
/* #region common-table*/
.common-table {
    table-layout: fixed;
    text-align: left;
    line-height: 1.8;
    width: 100%;
  }
  .common-table th {
    vertical-align: top;
    font-weight: 700;
    width: 35%;
    border-bottom: 1px solid #d6c7be;
    padding: 15px 10px 7px 0;
  }
  .common-table td {
    border-bottom: 1px solid #d6c7be;
    padding: 15px 10px 7px 0;
  }
  .common-table td a {
    color: #e95415;
    text-decoration: underline;
  }
  .common-table td a:hover {
    text-decoration: none;
  }
  .common-table td iframe {
    width: 100%;
    height: 250px;
  }

  @media (min-width: 769px) {
    .common-table th {
      width: 205px;
      padding: 21px 0 11px 0;
    }
    .common-table td {
      padding: 21px 0 11px 0;
    }
    .common-table td iframe {
      width: 100%;
      height: 380px;
      margin: 10px 0 20px;
    }
}

/* 見出しに色を付ける */
.Color_Table th{
    border-right:1px solid #d6c7be;
    text-align: center;
}

.Color_Table td{
    border-right:1px solid #d6c7be;
    padding: 21px 7px 10px;
}

@media (max-width: 769px) {
    .Color_Table {
        font-size:14px;
    }
    .Color_Table th{
        width:5em;
        padding: 0.5em 0;
    }
    .Color_Table td{
        padding: 0.5em;
    }
}
/* #endregion */

/* 左右に分かれるリスト１２文字
  [LRList] */
/* #region */
dl.LRList{
    margin-top:2em;
    overflow: hidden;
}
dl.LRList:after{
    content: '';
    display: block;
    clear: both;
}

.LRList dt{
    clear: both;
    font-weight: bold;
    float: left;
    margin:auto 2%;
}
.LRList dd+dt{
    margin-top: 2rem;
}

.LRList dt+dd{
    clear: both;
    margin-left: 2rem;
}
.LRList dd+dd{
    clear: both;
    margin-left: 2rem;
}

.LRList+p{
    margin-top:2em;
}
@media (min-width: 769px){
    .LRList{
        font-size: medium;
    }
    .LRList dt{
        width: 30%;
    }
    .LRList dd+dt{
        margin-top:0;
    }
    .LRList dd+dd{
        margin-left: 34%;
    }
    .LRList dt+dd{
        clear: none;
        float:left;
        margin-left:0;
        width:60%;
    }
    .LRList dt:after {
        content: "　……";
        float: right;
    }
}

/* 左右に分かれる（ｘ） */
dl.LRList.Brk dt{
    width:3em;
    clear:both;
}
dl.LRList.Brk dd{
    width : 88% ; /* IE8以下とAndroid4.3以下用フォールバック */
    width : -webkit-calc(100% - 5em) ;
    width : calc(100% - 5em) ;
}
dl.LRList.Brk dt:after{
    content:none;
}

/* #endregion */

/*　チェックマークつきリスト
  [CheckboxList] */
/* #region */
.CheckboxList{
    margin:1.5em 1em;
}
ul.CheckboxList li{
    margin-left:1em;
    list-style-image: url(../img/common/icon-check.svg);
}
.CheckboxList dt{
    font-weight: 600;
}
.CheckboxList dt+dt{
    margin-top:1.6em;
}
.CheckboxList dd+dt{
    margin-top:1.6em;
}
.CheckboxList dd{
    margin-left:1em;
}
ol.CheckboxList li:before, .CheckboxList dt:before{
    content: url(../img/common/icon-check.svg);
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 0.25em;
}

@media (min-width: 769px) {
    .CheckboxList{
        font-size:medium;
    }
}
/* #endregion */

/* テーブル 上がブラウン*/
/* #region TTable */
.TTable{
    width: 100%;
    margin: 0.5em 0 1em;
    text-indent: 0; /* ol li内のマイナスtext-indent対策 */
}

.TTable thead{
    display: none;
}

.TTable td {
    border: 1px solid gray;
    padding: 0.5em;
    display:block;
}

.TTable td + td{
    border-top: none;
}

.TTable td:first-child {
    background-color: #543;
    color: white;
}

.TTable a{
    color: #e95415;
    text-decoration: underline;
}

.TTable a:hover {
    text-decoration: none;
}

@media (min-width: 769px) {
    .TTable{
        font-size: medium;
    }
    .TTable thead{
        background-color: #55433b;
        color: white;
        vertical-align: middle;
        display:table-header-group;
    }
    .TTable th {
        background-color: #55433b;
        padding:0.5em;
    }
    .TTable td{
        border: 1px solid gray;
        display:table-cell;
    }
    .TTable td:first-child {
        background-color: transparent;
        color: #55433b;
        max-width: 20em;
    }
    .TTable.alternating td{
        padding:1em;
        border:none;
        border-bottom: 1px solid #d6c7be;
    }
    .TTable.alternating tr:nth-child(2n) td{
        background-color: #f4e8e1;
    }
}
/* 時間のかかるケース */
.TTable.time{
    color:#54433b;
}

.TTable.time td:nth-child(2):before {
    content: "期間の目安：";
}
.TTable.time td:nth-child(3):before {
    content: "時間のかかるケース：";
}
.TTable.time td dt:before{
    content: "・";
}
.TTable.time td dd{
    text-align: left;
}

@media (min-width: 769px) {
    .TTable.time td:nth-child(2):before {
        content: "";
    }
    .TTable.time td:nth-child(2) {
        width:10em;
    }
    .TTable.time:nth-child(3):before {
        content: "";
    }
}
/* #endregion TTable */

/* 一般的なテーブル */
/* #region NTable */
.NTable{
    border-collapse: collapse;
    margin: 0 auto 2em;
}
.NTable th{
    background-color: #55433b;
    color:white;
}
.NTable th, .NTable td {
  border: solid 1px gray;
  padding:0.7em;
}
.NTable td{
    background-color: white;
}

@media (max-width: 769px) {
    .NTable{
        font-size:14px;
    }
}
/* #endregion */





/* テーブルセルの中央揃え */
.TCenter th, .TCenter td{
    text-align: center;
}

/* 
    テーブルオプション
*/

/* 子要素のボーダーをなくす */
.noborder th,.noborder tr,.noborder td{
    border:none!important;
}

/*
    2.4.98　リストオプション
*/

/* ドットを追加 */
.Dot{
    list-style-type: disc;
}


/* ドットなし */
.NoDot dd:before{
    content: "";
    margin-left:0;
    margin-right:0;
}

.NoDot dd{
    margin-left:1em;
}

/* ドットなし */
.NoDot > li{
    list-style: none;
    list-style-type: none!important;
    margin-left: -1em;
}


/* イメージなし */
.NoImg li{
    list-style-image: none!important;
}

/* スペース開け */
.Spase1 li{ /* 廃止予定 */
    margin-bottom:2em;
}

.Space1 li{
    margin-bottom:2em;
}

/*
    2.4.99　リストと多要素の調整
*/

/* チェックエリアの場合は調整が必要 */
.Check .SList {
    margin-bottom:0;
}
.Check .SList+p{
    margin-top:1em;
}

/* 白地強調の中のときはPadding調整する */
.Base_White dl.SList {
    margin:0;
}


/* ~~~~~~~~~~~~~~~~~
    2.5　引用
~~~~~~~~~~~~~~~~~~~ */
/* #region blockqupte, Quote */
blockquote.Quote{
    background-color: #fff;
    padding: 1.5em;
    position: relative;
    margin-bottom: 2em;
    border: 1px solid #ccc;
}


div.Quote{
    background-color: #fff;
    padding: 1.5em;
    position: relative;
    margin-bottom: 2em;
    border: 1px solid #ccc;
}
.Quote p{
    margin-bottom: 0;
}
.Quote:before{
    content: "“";
    color: gray;
    font-size: 50px;
    position: absolute;
    top: -25px;
    left: 0;
}
.Quote:after{
    content: "”";
    font-size: 50px;
    position: absolute;
    color: gray;
    text-align: right;
    width: 100%;
    margin-top: -10px;
    margin-left: -25px;
    display: block;
}

.Quote .Source{
    text-align:right;
    color:gray;
}
.Quote .Source:before{
    content:"――";
}
/* #endregion */

/* ~~~~~~~~~~~~~~~~~
    2.6　注目（コロナ感染予防の表記に使用）
~~~~~~~~~~~~~~~~~~~ */
/* #region Temp */
.Temp{
    color: #fff;
    background-color: #7e6d92;
    padding: 1em;
    border-radius: 1em;
}
.Temp a{
    color:#aff;
    text-decoration: none;
}
.Temp a:hover{
    text-decoration: underline;
}

.Temp p{
    margin-bottom:0;
}

@media (min-width: 769px) {
    .Temp{
        font-size: medium;
        margin: 2em!important;
        text-align: center;
    }
}
/* #endregion */

/* ~~~~~~~~~~~~~~~~~
    2.7　投稿日時・更新日時
~~~~~~~~~~~~~~~~~~~ */
.release_date{
    text-align: right;
	margin-top: 4rem;
    color: gray;
    font-size: 0.88em;
}


/* ~~~~~~~~~~~~~~~~~
    2.8　シンプルボタン
~~~~~~~~~~~~~~~~~~~ */
/* #region Inline-Button */
.Inline-Button{
    overflow: hidden;
    font-size:medium;
}
.Inline-Button a{
    text-decoration: none!important;
    color: white!important;
    margin-left: -1em;
    min-width: 14em;
    display: inline-block;
    padding-left: 1em;

}
.Inline-Button li{
    width: 14em;
    float: left;
    background: #e87746 url(../img/common/ico_arrow_circle-white.png) no-repeat 90%;
    padding: 0.5em;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: center;
}
.Inline-Button li:hover{
    background-color:orange;
}
/*　単体用 */
span.Inline-Button{
    background: #e87746 url(../img/common/ico_arrow_circle-white.png) no-repeat 90%;
    display: inline-block;
    margin: 0.5em 0;
    padding: 0.5em 2em;
    text-align: center;
    border-radius: 2em;
}
span.Inline-Button:hover{
    background-color:orange;
}

a span.Inline-Button {
    color: #fff;
}

ul.Inline-Button > li a{
    color:white;
    text-decoration: none;
}
/* #endregion */

/* ~~~~~~~~~~~~~~~~~
    2.9　白抜き強調
~~~~~~~~~~~~~~~~~~~ */
/* #region Color_White */
.Color_White{
    color:white;
    background-color: #E68C65;
    padding:1em;
    width:90%;
    display: block;
    margin:1em auto 2em;
}

.Color_White p{
    margin-bottom:0;
}
/* #endregion */

/* ~~~~~~~~~~~~~~~~~
    2.10　白地強調
~~~~~~~~~~~~~~~~~~~ */
/* #region Base_White */
.Base_White{
    color:#54433b;
    background-color: #FFF;
    padding: 1em 1em 0;
    margin : 1em;
    display: block;
    border:1px solid #ccc;
    overflow: hidden;
}

.Base_White p{
    margin-bottom:1em;
}

@media (min-width: 769px) {
   .Base_White {
        margin:1em 5% 2em;
        padding: 1.6em 1.6em 0;
    }
    .Base_White p{
        margin-bottom:1.6em;
    }
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    2.12　スペース
~~~~~~~~~~~~~~~~~~~ */
/* #region Space_xx */
.Space_top{
    margin-top: 4em!important;
}

.Spaces{
    margin-top:2em!important;
    margin-bottom:2em!important;
}
.Spaces_all{
    margin:2em!important;
}

.Spaces_double{
    margin-top:4em!important;
    margin-bottom:4em!important;
}

/* p の後ろのスペースを無くす */
p.Spaces_none{
    margin-bottom:0.5em!important;
}

#in-home{
    overflow: hidden;
}

#in-home p{
    margin-bottom:1em;
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    2.13　ラインを消すリンク
~~~~~~~~~~~~~~~~~~~ */

a.NoLine{
    text-decoration: none;
}

.NoLine a{
    text-decoration: none!important;
}

.NoLine a:hover{
    color:red;
}

/* ~~~~~~~~~~~~~~~~~
    2.14　前に●のあるリンク
~~~~~~~~~~~~~~~~~~~ */
a.Link_C{
    text-decoration: none;
}

.Link_C:before {
    content: "●";
    color: orange;
    background: -webkit-linear-gradient(top, #FFB76B 0%, #ffb768 22%, #fc9 25%, #FFb768 28%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ~~~~~~~~~~~~~~~~~
    2.15　辞書へのリンク
~~~~~~~~~~~~~~~~~~~ */
a.dic{
    text-decoration: dashed;
}
.dic::after {
    content: url(../img/common/ico_dic.png);
    opacity: 0.5;
}
.dic:hover::after{
    opacity: 1;
}

/* ~~~~~~~~~~~~~~~~~
    2.16　一覧ページへのバナーリンク
~~~~~~~~~~~~~~~~~~~ */

/* 色を薄くする */
.ArticleList img {
    transition: 0.3s ;
}

.ArticleList img:hover {
    opacity: 0.5 ;
}


/* ~~~~~~~~~~~~~~~~~
    2.17　画像のホヴァー（拡大）
~~~~~~~~~~~~~~~~~~~ */
.img_wrap .service-nav__thumb{
    border: 1px solid #ddd;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
    border-radius: 15px;
}
  .img_wrap img{
    width: 100%;
    transition-duration: 0.5s;
}
  .img_wrap a:hover img {
    transform: scale(1.2);
    transition-duration: 0.5s;
}

  .page main a:not([class]):hover {
    text-decoration: none;
}


/* ~~~~~~~~~~~~~~~~~
    2.18　画像のホヴァー（透過）
~~~~~~~~~~~~~~~~~~~ */

.opacity img{
    opacity:1;
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  }

.opacity a:hover img{/*hoverした時の変化*/
opacity:0.5;/*透過具合を変更したい場合はこの数値を変更*/
}

/* ~~~~~~~~~~~~~~~~~
    2.19　リンク色茶
~~~~~~~~~~~~~~~~~~~ */

.brown a{
    color:#54433b!important;
}

a.brown{
    color: #54433b!important;
}


/* ===================================================
        3.ページごとの設定
======================================================*/
/* #region 共通設定*/
/* ~~~~~~~~~~~~~~~~~
    1.4　タグ
~~~~~~~~~~~~~~~~~~~ */

ul.Tags{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.Tags li {
    display: inline-block;
    margin: 0 1em 1em 1em;
    padding: 0;
  }

ul.Tags li a {
    position: relative;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 1em 0 .75em;
    background-color: #f4e8e1;
    border-radius: 0 3px 3px 0;
    color: #54433b;
    font-size: 12px;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
  }

ul.Tags li a::before {
    position: absolute;
    top: 0;
    left: -15px;
    z-index: -1;
    content: '';
    width: 30px;
    height: 30px;
    background-color: #f4e8e1;
    border-radius: 50%;
    -webkit-transition: .2s;
    transition: .2s;
  }

  ul.Tags li a::after {
    position: absolute;
    top: 50%;
    left: -6px;
    z-index: 2;
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background-color: #FFF9F6;
    border-radius: 100%;
  }

  ul.Tags li span {
    display: block;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  ul.Tags li a:hover {
    background-color: #555;
    color: #fff;
  }

  ul.Tags li a:hover::before {
    background-color: #555;
  }

@media (min-width: 769px) {
    ul.Tags li{ margin: 0 1em 2em 1em; }
}
/* ツイッターのシェアボタン */

a.twitter-share-button{
    background-image: url(https://www.sagami-nenkin.com/wp-content/themes/sagami/assets/img/icon/twitter_icon_20.png);
    background-repeat: no-repeat;
    background-color: #1da1f2;
    background-size: 12px;
    background-position: 4px;
    width: 80px;
    height: 20px;
    padding: 2px 4px 3px 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 2px;
}

a.twitter-share-button:hover{
    background-color:#0d91e2;
}

/*
a.sns-btn-mail{
    text-decoration: none;
    color :white;
}
*/

@media all and (-ms-high-contrast: none) {
    /* ここに書く */
    .inner{margin-bottom:100px;}
  }




/* header */
/* 休業のお知らせ */
.holiday{
    background-color: darkblue;
    color: white;
    margin-left: 4px;
    padding: 4px;
    border: 3px double;
    line-height: initial;
    border-radius: 8px;
    width:100%;
    font-size:80%;
    text-align: center;
}

.gw{
    margin-left: 4px;
    padding: 0.25em;
    border: 1px solid #543;
    border-radius: 1.5em;
    font-size: 70%;
    margin: 0.5em 0 0!important;
}
@media (min-width: 769px){ /* 解除するときは消す */
.header__info {
    display: block;
    width: 640px!important;
    }
}

/*　もくじプラグイン　*/
#toc_container .toc_title{
    font-size: 18px;
}

#toc_container .toc_title:before{
    top:2px;
}

#toc_container .toc_list{
    font-size: 14px;
}

@media (min-width: 769px) {
    #toc_container.toc_list li ul{
        padding: 1% 0 0 2em;
    }
    #toc_container .toc_title{
        font-size: 22px;
    }
    #toc_container .toc_title:before{
        top: 6px;
    }
    #toc_container .toc_list{
        font-size: 16px;
    }
}

/*　固定ページ　*/

@media (min-width: 769px){
    .Kotei {
        padding: 0 0 180px;
    }
}

/* #endregion */

/* ~~~~~~~~~~~~~~~~~
    3.1　受給事例
~~~~~~~~~~~~~~~~~~~ */

/* お客様アンケート */
img#msg{
    padding:0;
    width:200px;
    height:auto;
    margin:0 auto;
    display: block;
}

/* ~~~~~~~~~~~~~~~~~
    3.2　障害年金とは
~~~~~~~~~~~~~~~~~~~ */

.Nintei td:nth-child(1){
    text-align: center;
}

/* 特別支給の老齢年金の表 */
table.tokubetsusikyu{
    background-color:white;
    border:1px solid gray;
    width:100%;
}

.tokubetsusikyu tr:nth-child(2n){
    border-top:1px solid black;
}

.tokubetsusikyu th{
    font-size:small;
    min-width: 19em;
    width:19em;
    text-align: left;
    vertical-align:top;
    padding : 0.5em;
    border-right: 1px solid black;
}

.tokubetsusikyu tr:first-child td{
    text-align: left;
}

.tokubetsusikyu tr:first-child td:first-child{
    text-align: center;
}


.tokubetsusikyu td{
    margin-top:0.5em;
    width:calc(100% - 18em);
    text-align: right;
    vertical-align: middle;

}

.tokubetsusikyu span{
    width:100%;
    background-color:#9DC3E6;
    float:right;
    text-align:center;
    padding:0.5em;
    margin-top:0.25em;
}

.tokubetsusikyu tr:nth-child(2n+1) span{
    background-color:#C5E0B4;
    margin-top:0;
}

.tokubetsusikyu .text-left td{
    text-align: left;
}


/* ~~~~~~~~~~~~~~~~~
    3.3　よくあるご質問
~~~~~~~~~~~~~~~~~~~ */

#QA_Q{
    display: block;
    color:#55433b;
    margin:1em 1em 1em 0;
    padding:1em 0;
    overflow: hidden;
    font-size:medium;
}
@media (min-width: 769px) {
    #QA_Q{ font-size:22px;}
}
#QA_Q:before{
    content: "Q";
    background-color:#55433b;
    color:#fff9f6;
    border-radius: 50%;
    display: block;
    height:1.5em;
    width:1.5em;
    margin-right:0.5em;
    margin-top:0;
    padding:0.25em;
    float: left;
    text-align: center;
    font-size:medium;
}




/* ~~~~~~~~~~~~~~~~~
    3.4　用語集
~~~~~~~~~~~~~~~~~~~ */
.Glossary_Ruby{
    color: gray;
    margin-left :20px;
}
@media (min-width: 769px) {
    .Glossary_Ruby{
        margin-left:30px;
    }
}

/* ~~~~~~~~~~~~~~~~~
    3.5　トップページ
~~~~~~~~~~~~~~~~~~~ */
/* #region トップページ共通 */
.top-tel__time{
    font-weight: 500;
    font-size: 90%;
}

.top-tel__time a{
    color:orangered;
}

.top-tel__time a:hover{
    color:orange;
}


/* 検索ページ */
.common-kv-search {
    background-image: url(../img/search/kv.png);
  }

.search li{
    margin-bottom:2em;
}

.search h3.article-list__title{
    margin-bottom:10px;
}

.search li a{
    color:#54433b;
    text-decoration: underline;
}
.search li a:hover{
    color:orange;
}

.search time{
    color: #aaa;
    font-size: small;
    text-align: right;
    display: block;
}

/* 全面ページ　検索フォーム */

.full__keywordBar_full{
    float:right;
}

.full__keywordBar_full input{
    width:300px;
}

.full__keywordBar_full p{
    float: left;
}

.search_category{
    float: right;
    margin-left: 1em;
    color: #666;
    font-size: small;
}

#qaPension{
    clear: both;
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    3.6　契約者ページ
~~~~~~~~~~~~~~~~~~~ */
/* 横並び２のリンク */
/* #region contractor */
.contractor__nav{
    width:100%;
    font-size:medium;
}

.contractor__nav th{
    background-color: #ffffff;
    color:#000000;
    width:200px;
    vertical-align: middle;
    border-top: 1px solid #d6c7be;
    border-right:1px solid #d6c7be;
}

.contractor__nav td{
    padding:1em 0 1em 1em;
    border-top: 1px solid #d6c7be;
}
.contractor__nav tr:first-child td,.contractor__nav tr:first-child th{
    border-top:none;
}

.contractor__nav a{
    text-decoration:none!important;
    width: 310px;
    float: left;
    background: #f4e8e1 url(../img/common/ico_arrow_circle-brown.png) no-repeat 92%;
    background-size: 20px 20px;
    padding: 2em 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: center;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    height: 60px;
    color: #000!important;
    border-radius: 5px;
    box-shadow: 0 5px 0 0 #d6c7be;
    display: flex;
    position: relative;
}

.contractor__nav a:hover{
    top: 5px;
    box-shadow: none;
}

@media (max-width: 769px) {
    .contractor__nav{
        font-size: unset;
    }
    .contractor__nav th {
        display: block;
        width:100%;
        border:1px solid #d6c7be!important;
        margin-top:4em;
    }
    .contractor__nav td{
        display: block;
        width:100%;
        border:none;
    }
    .contractor__nav a{
        width: 100%;
        background-position: 95%;
    }
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    3.7　オンライン相談
~~~~~~~~~~~~~~~~~~~ */
/* #region online */
dl.Online-Flow{
    overflow: hidden;
}

.Online-Flow div{
    display: block;
    float: left;
    width: 50%;
}

.Online-Flow dt,.Online-Flow dd{
    width: 80%;
    border: 1px solid gray;
    display: block;
}

.Online-Flow dt {
    background-color: orange;
    color: white;
    border-bottom: none;
    margin: 3em auto 0;
    padding: 0.5em 1em;
    text-align: center;
    font-weight: bold;
}

.Online-Flow dd {
    margin: 0 auto;
    background-color: white;
    padding: 1em;
    font-size: 90%;
    position: relative;
}

.Online-Flow div dt,.Online-Flow div dd {
    width: 90%;
    position: relative;
}

.Online-Flow-down:after{
    color: #54433b;
    content: "▼";
    left: 50%;
    position: absolute;
    top: calc(100% + 1em);
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: 200%;
}

.Online-Flow-double-left:before{
    color: #54433b;
    content: "▼";
    right: 25%;
    position: absolute;
    top: -0.8em;
    transform: translate(-50%, -50%);
    font-size: 200%;
}

.Online-Flow-double-right:before{
    color: #54433b;
    content: "▼";
    left: 25%;
    position: absolute;
    top: -0.8em;
    transform: translate(-50%, -50%);
    font-size: 200%;
}

/* メール可 */
.email{
    background-color: orange;
    color: white;
    padding: 0.25em 1em;
    margin-left:1em;
    font-size:85%;
}

/* 郵送のみ */
.post{
    background-color: orangered;
    color: white;
    padding: 0.25em 1em;
    margin-left:1em;
    font-size:85%;
}

/* 特徴 */
.online_menu_container{
    width: 800px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    padding: 1em;
}

@media (max-width: 769px) and (min-width:550px){
    .online_menu_container{
        width:560px;
    }
}
@media (max-width: 549px) {
    .online_menu_container{
        width:320px;
        padding:2em;
    }
    .Online-Flow dt,.Online-Flow dd{
        width:auto;
    }
}

.online_menu{
    background-color: white;
    box-shadow: 0 0 7px 0 rgba(230, 140, 103, 0.28);
    width: 160px;
    height: 160px;
    text-align: center;
    padding: 30px;
    box-sizing: content-box;
    border-radius: 1em;
    position: relative;
    float: left;
    margin: 2em 1em;
}

.online_menu p{
    font-weight: bold;
    color: #54433b;
}

.online_menu img{
    margin-bottom: 2em;
}

.online_menu .online_number{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 1.3rem;
    background: #55433b;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    position: absolute;
    top: -1em;
    left: -1em;
    z-index: 10;
}

.online_menu:hover .online_number{
    background-color:orange;
}

/* オンライン相談予約フォーム */

dl.online_appo{
    margin: 0 auto 1em;
    border:1px solid #ccc;
    display: block;
}

.online_appo dt,.online_appo dd{
    padding:1em;
}

.online_appo dt{
    background-color:#55433b;
    text-align: center;
    color:white;
}

.online_appo dd{
    background-color: white;
}

.online_appo img{
    max-width: 4em;
    display: block;
    margin: 0 auto;
}

.online_appo a{
    color:#e95415;
}

@media print, screen and (min-width: 769px) {
    dl.online_appo{
        float: left;
        max-width: 33%;
    }
    .online_appo dt,.online_appo dd{
        width:14em;
    }
    .online_appo dd:nth-child(2) {
        height: 5em;
    }
    .online_appo dd:nth-child(3) {
        height: 9em;
    }
}
/* #endregion */


/* ~~~~~~~~~~~~~~~~~
    3.8　事務所紹介
~~~~~~~~~~~~~~~~~~~ */
/* #region office */

.MyBestPro{
    width:100%;
}

.MyBestPro dt {
    background-color:#d71618;
    padding: 0.75em;
    color: white;
    font-weight: bold;
}
.MyBestPro dd{
    border: 1px solid #d71618;
    overflow: hidden;
    background-color:white;
}

.MyBestPro img{
    width: 150px;
    height: auto;
    margin: 0.5em auto;
    display: block;
}
.MyBestPro p {
    padding: 0.5em;
}

.MyBestPro a{
    text-decoration: underline;
}

.MyBestPro a:hover{
    text-decoration: none;
}

@media (min-width: 769px) {
    .MyBestPro {
        width: 80%;
        display:block;
        margin: 0 auto;
    }

    .MyBestPro img{
        float: left;
        margin: 0.5em;
    }
}

/* #endregion */

#mokuji_left ~ #toc_container {
    position: relative;
}

#mokuji_left ~ #toc_container ul.toc_list::after {
    content: url(https://www.sagami-nenkin.com/wp-content/uploads/2022/10/appb_staff_menu_full.png);
    position: absolute;
    top: 1em;
    right: 1em;
}

#mokuji_left ~ #toc_container {
    position: relative;
    min-height: calc( 531px + 3em);
}

.history{
    position: relative;
    width: 100%;
}

.history_top{
    padding:0.5em;
    font-weight: 700;
}

.history_top th{
    padding:0.75em;
}

.history th:nth-of-type(1){
    border-right: 1px solid #543;
    width:9em;
}

.history th:nth-of-type(2){
    border-left: 1px solid #543;
    width:9em;
}

/* ●を描く */
.history th:nth-of-type(1).selected:after {
    content: "●";
    position: absolute;
    left: 8.5em;
    color:#543;
}
.history th:nth-of-type(2).selected:after {
    content: "●";
    position: absolute;
    right: 8.5em;
        color:#543;
}


.history td{
    padding: 2em 1em 0em;
}

@media (max-width: 769px) {

    .history {
        font-size:84%;
    }
    .history tr{
        height: 6em;
    }

    .history th{
        position: absolute;
        left: 0;
        padding-right:0.5em;
    }

    .history td{
        position: absolute;
        left: 8em;
        padding: 0 0.5em 0 1em;
        border-left: 1px solid #543;
        height: 6em;
    }
    .history td:before {
        content: "●";
        position: absolute;
        left: -0.5em;
        color: #543;
    }
    .history .history_top{
        display:none;
    }

    .history th:nth-of-type(1){
        border-right:none;
        width:8em;
    }
    .history th:nth-of-type(2){
        border-left:none;
        width:8em;
    }
    .history th:nth-of-type(1).selected:after {
        content:none;
    }
    .history th:nth-of-type(2).selected:after {
        content:none;
    }
    .history .align-right{
        text-align: left!important;
    }
}

/* ~~~~~~~~~~~~~~~~~
    3.9　マニュアル
~~~~~~~~~~~~~~~~~~~ */
.appb_manual_dl dt{
    margin-top:4em!important;
}

.appb_manual_dl dd{
    margin-top:1em;
}

/* ~~~~~~~~~~~~~~~~~
    3.10　インタビュー
~~~~~~~~~~~~~~~~~~~ */
/* #region Interview */

h3.Interview{
    padding: 0;
    margin: 0;
    font-size: medium;
    font-weight: 500;
    background-color: unset;
    color: chocolate;
}

h3.Interview:before {
    content: "──";
    background: none;
    width: unset;
    height: unset;
    display: unset;
    position: initial;
}

h4.Interview{
    padding: 0;
    margin: 0;
    font-size: medium;
    font-weight: 500;
    background-color: unset;
    color: chocolate;
}

h4.Interview:before {
    content: "──";
    background: none;
    width: unset;
    height: unset;
    display: unset;
    position: initial;
}

p.Interview{
    padding: 0;
    margin: 0;
    font-size: medium;
    font-weight: 500;
    color: chocolate;
}

p.Interview:before{
    content: "──";
}
/* #endregion */

/* #region tokurou */

div.tokurou_table{
    font-size:90%;
}

.tokurou_th{
    display: block;
    width: 100%;
}
.tokurou_th p{
    margin-bottom:0;
}
.tokurou_table .age {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    border-right:1px solid gray;
}
.tokurou_table .age span{
    width:16.5%;
    padding-left: 0.25em;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

.tokurou_graph span {
    display: block;
    min-height: 1em;
    padding: 0.25em;

}
.tokurou_graph span:nth-of-type(1){
    margin-top: 0.5em;
    background-color: yellow;
}
.tokurou_graph span:nth-of-type(2){
    background-color: blueviolet;
}

/* endregion */