@charset "UTF-8";
/*サイト全体専用のスタイル*/
/*
* {
   -ms-user-select: none;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
*/
/*------------------------------------------------------------
【目次】
フォームデザイン（チェックボックス他）
common
Base
header
GM
breadcrumb
footer
pageStyle
single
archive（一覧）
ガイド一覧
用語集一覧
用語集（詳細）
スマホ固定メニュー（モーダルウィンドウ）
お問い合わせフォーム
信頼されるサイトとして
シミュレーションツール
印刷用ボタン
プラグイン（wpcf7）
------------------------------------------------------------*/
body {
    /*font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
    font-family: 'Noto Sans JP', 'Lato', "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #444845;
    font-weight: 500;
    counter-reset: number 0;
    overflow-wrap: break-word;
}

select,
input,
button,
textarea,
button {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

table {
    font-size: inherit;
    font: 100%;
}

a {
/*    color: #047cba;*/
    color: #388c78;
    text-decoration: underline;
    transition-duration: 0.5s;
}

a:visited {
/*    color: #047cba;*/
    color: #388c78;
    text-decoration: underline;
}

a:hover {
/*    color: #3D9FD2;*/
    color: #388c78;
    text-decoration: none;
    transition-duration: 0.5s;
}

a:active {
/*    color: #3D9FD2;*/
    color: #388c78;
    text-decoration: none;
}

a[name]:link,
a[name]:visited,
a[name]:hover,
a[name]:active {
    color: #6a370f;
    text-decoration: none;
}

p,
li,
dd,
td {
    text-align: justify;
    text-justify: inter-ideograph;
}

img {
    border: none;
    vertical-align: bottom;
}

form {}

select,
input,
textarea,
option {
    vertical-align: middle;
}

hr {
    clear: both;
}

address {}

em {
    font-style: normal;
    font-weight: bold;
}

strong {
    font-style: normal;
    font-weight: bold;
}

.grecaptcha-badge {
  visibility: hidden;
}


@media screen and (min-width: 769px) {
    .pc_hidden {
        display: none;
    }
    .nopc {
        display: none;
    }
}

@media screen and (max-width: 980px) {
    .sp_hidden {
        display: none;
    }
    .pc {
        display: none;
    }
}

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

    フォームデザイン（チェックボックス他）

------------------------------------------------------------*/
input[type="text"],
input[type="button"],
input[type="email"],
input[type="submit"],
textarea {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*radio*/
input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    position: relative;
}

input[type="radio"] + label:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f111";
    color: #fff;
    font-size: 20px;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 5px;
}

input[type="radio"]:hover + label:before {
    color: #aaa;
}

input[type="radio"]:checked + label:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f111";
    color: #444845;
    font-size: 20px;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 5px;
}

/*text*/
input[type="text"] {}

/*select*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    position: relative;
}

select:before {
    position: absolute;
    right: 5px;
    top: 50%;
    content: "▼";
    line-height: 1;
    font-size: 13px;
    margin-top: -7px;
}

/*下記追加*/
/*----------------------------------------------f--------------

    common

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

.post_detail img {
    margin-bottom: 1.7em;
}
.post_detail p > img {
    margin-bottom:0;
}

.post_detail a[target="_blank"]:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f08e";
    font-size: 11px;
    text-decoration: none !important;
}

.post_detail a.imglink[target="_blank"]:after {
    content: "";
    margin: 0;
}

.post_detail a.noicon:after {
    display: none;
}

.post_body {
    margin-bottom: 50px;
    /* margin-top: -50px; */
}

.post_body p {
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 2em;
}

.pc_hiddden {
    display: none;
}

@media screen and (max-width: 980px) {}

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

    Base

------------------------------------------------------------*/
#wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#header {
    position: relative;
    width: 300px;
    min-height: 100%;
    background-color: #fff;
    z-index: 999;
}

.header_inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    border-right: 1px solid #d6e7e0;
    box-sizing: border-box;
    background: #fff;
}
.header_inner2 {
    padding: 30px;
    margin-bottom: 0px;
}

#main {
    padding-left: 300px;
    background: #eef4f1;
}
#page #main {
    background: #eef4f1;
}


.content_warp {
    padding: 80px 120px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}
#index .content_warp{
    /* padding: 0 8%; */
}
#page .content_warp,
#archive .content_warp{
    padding: 40px 80px;
}

@media screen and (max-width: 1100px) {
/*
    .content_warp {
        padding: 0 100px;
    }
*/
}

@media screen and (max-width: 1024px) {
/*
    .content_warp {
        padding: 0 80px !important;
    }
*/
    #header {
        width: 280px;
    }

    .header_inner {
        width: 280px;
    }
    #main {
        padding-left: 280px;
    }
}

@media screen and (max-width: 980px) {
    #header {
        width: 100%;
    }

    #single #header,
    #page #header{
        border-bottom: 1px solid #eef4f1;
    }

    .header_inner {
        width: 100%;
        position: relative;
        border: none;
    }
    .header_inner2 {
        display: none;
    }

    #main {
        padding-left: 0;
    }

    .content_warp {
        padding: 20px !important;
    }
    #index .content_warp{
        padding:0 30px 30px;
    }

    #page .content_warp,
    #archive .content_warp{
        padding: 20px;
    }

    #side {
        width: inherit;
        float: none;
        padding: 0 15px 20px;
        border-left: none;
    }

    .inner,
    #single #content .inner {
        width: inherit;
    }
}

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

    header

------------------------------------------------------------*/
.logo_area {
    padding: 35px 0;
    text-align: center;
    border-bottom: 1px solid #d6e7e0;
}

#header h1,
#header p.logo {
    width: 210px;
    display: inline-block;

}

header a {
    color: #444845;
    text-decoration: none;
}

.header_logo {
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.header_logo img {
    width: 160px;
}

.header_caption {
    text-align: center;
    font-size: 14px;
}


/*----------headerFollow----------*/
.header_follow {
/*
    position: absolute;
    bottom: 0;
*/
    width: 299px;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 3px solid #fff;
}

.header_follow li {
    position: relative;
    width: 33%;
    border-right: 2px solid #fff;
    box-sizing: border-box;
}

.header_follow li:first-child{
    background-color:#5e69b0;
}
.header_follow li:nth-child(2){
    background-color:#3d95c4;
}
.header_follow li:last-child {
    border: none;
    width: 34%;
    background-color:#e4713f;
}
.header_follow a {
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 53px;
    padding-top:4px;
}

.header_follow .facebook i {
    color: #fff;
}

.header_follow .twitter i {
    color: #fff;
}

.header_follow .rss i {
    color: #fff;
}

.header_follow a:hover {
    color: #444845;
}

@media screen and (min-width: 981px) {
    /*----------scroll（ヘッダースクロールバー）----------*/
    .scrollArea{
        overflow-y: hidden;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .scrollArea:hover{
        overflow-y: scroll;
        width: 300px;
    }
    /* .header_inner.scrollArea:hover {
        border:none;
    } */
    /*スクロールバーの横幅指定*/
    .scrollArea::-webkit-scrollbar {
        width: 0px;
    }
    /*スクロールバーの背景色・角丸指定*/
    .scrollArea::-webkit-scrollbar-track {
        background: #d6e7e0;
    }
    /*スクロールバーの色・角丸指定*/
    .scrollArea::-webkit-scrollbar-thumb {
        background:#1d5d25;
        border-radius: 8px;

    }
}

@media screen and (max-width: 1024px) {
    .scrollArea:hover{
        width: 281px;
    }
.header_follow {
    width: 279px;
    }
}

@media screen and (max-width: 980px) {
    #header {}

    .logo_area {
        padding: 12px;
        /* height: 58px; */
        box-sizing: border-box;
        border-bottom: none;
    }

    #header h1,
    #header p.logo {
        width: 200px;
    }

    .header_follow {
        position: relative;
        border-bottom: 1px solid #ccc;
    }

    #header .sp_pulldown {
        display: none;
    }

    #header .header_follow,#header #gm {
        display: none;
    }
}

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

    GM

------------------------------------------------------------*/
nav#gm {
    text-align: center;
}
nav#gm ul{
    counter-reset: cnt;
}
nav#gm ul li {
    display: block;
    border-bottom: 1px solid #d6e7e0;
    position: relative;
}
nav#gm ul li:last-child{
    /*border-bottom:none;*/
}
nav#gm ul li a {
    position: relative;
    display: block;
    padding: 24px 45px 22px 55px;
    color: #444845;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    text-align: left;
    position: relative;
}
nav#gm ul li a:before{
    content: counters(cnt, "-");
    counter-increment: cnt;
}
nav#gm ul li a:before{
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    left: 25px;
    top: 50%;
    margin-top: -8px;
    color: #388c78;
    font-weight: bold;
}
nav#gm > ul > li > a:after {
    position: absolute;
    left: 86%;
    top: 50%;
    margin-top: -12px;
    color: #388c78;
    width: 24px;
    height: 24px;
    content: '';
    background: url(../img/icon/icon_plus.svg) 0 0 no-repeat;
}
nav#gm > ul > li > a.active:after {
background: url(../img/icon/icon_minus.svg) 0 0 no-repeat;

}
nav#gm ul li a:hover {
    cursor: pointer;
    text-decoration: underline;
}
nav#gm ul ul{
    counter-reset: cnt;
}

/*----------header_submenu----------*/
.header_submenu{
    margin-bottom: 20px;
}
.header_submenu li a{
    position: relative;
    line-height: 1;
    padding-left: 12px;
    color: #388c78;
}
.header_submenu li a:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0da";
    font-size: 16px;
    line-height: 1;
    margin-top: -8px;
    left: 0;
    top: 50%;
    position: absolute;
    color: #444845;
}
.header_submenu li a:hover{
    text-decoration: underline;
}
nav#gm ul.sub-menu {
    display: none;
    background-color: #f5f4f2;
    border-top: 1px solid #ccc;
    width: 300px;
}
nav#gm ul.sub-menu a {
    padding: 22px 30px 20px 75px;
}
nav#gm ul.sub-menu.active {}


@media screen and (max-width: 980px) {
    .gm_btn {
        padding: 28px;
        background-color: #388c78;
        color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        display: none;
    }

    .gm_warp {
        display: none;
    }

    nav#gm {
        margin-bottom: 0;
    }

    nav#gm ul li {
        display: block;
        float: none;
    }

    nav#gm ul li a {
        padding: 15px 42px 15px 74px;
    }

    /*sub_menu*/
    nav#gm ul.sub-menu {
        width: 100%;
    }

    /*開閉ボタン*/
    #panel-btn-icon {
        display: block;
        position: absolute;
        top: 50%;
        right: 17px;
        width: 20px;
        height: 2px;
        margin: -1px 0 0 -15px;
        background: #fff;
        transition: .2s;
    }

    #panel-btn-icon:before,
    #panel-btn-icon:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 2px;
        background: #fff;
        transition: .3s;
    }

    #panel-btn-icon:before {
        margin-top: -8px;
    }

    #panel-btn-icon:after {
        margin-top: 6px;
    }

    #panel-btn-icon.close {
        background: transparent;
    }

    #panel-btn-icon.close:before,
    #panel-btn .close:after {
        margin-top: 0;
    }

    #panel-btn-icon.close:before {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        margin-top: 0px;
    }

    #panel-btn-icon.close:after {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin-top: 0px;
    }
}

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

    breadcrumb

------------------------------------------------------------*/
#breadcrumb {
    padding: 18px 20px;
}

#breadcrumb ul {
    width: 100%;
    margin: 0 auto;
}

#breadcrumb li {
    float: left;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #444845;
}

#breadcrumb li a {
    color: #444845;
}

#breadcrumb li:before {
    content: '>';
    margin: 0 8px;
}

#breadcrumb li:first-child:before {
    content: '';
    margin-left: 0;
}

@media screen and (max-width: 980px) {
    #breadcrumb {
        display: none;
    }
}


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

    footer

------------------------------------------------------------*/
footer {
    background-color: #586e78;
    color: #444845;
    font-size: 13px;
}

footer > .inner {
    padding: 20px 0 60px;
}

/*----------footerAbout----------*/
.footer_about{
    /* border-top: 1px solid #e0e9e5; */
    background: #fff;
}
.footer_about .about_inner {
    /* background-color: #eef4f1; */
    padding: 45px 40px 40px;
    color: #444845;
}

.footer_about .about_title {
    font-size: 24px;
    margin-bottom: 4px;
    text-align: center;
    font-weight: bold;
}

.footer_about .about_text {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}

.footer_about .about_title2 {
    font-size: 24px;
    margin-bottom: 4px;
    text-align: center;
    font-weight: bold;
}
.about_nav {
    margin-bottom: 36px;
}
.about_nav,
.about_nav2 {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}
.about_nav li,
.about_nav2 li{
    margin: 0 8px 8px 0;
}
.about_nav a,
.about_nav2 a{
    padding: 12px;
    display: inline-block;
    background: #fff;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #d6e7e0;
    text-decoration: none;
    -moz-box-shadow: 0 2px 0 0 #d6e7e0;
    -webkit-box-shadow: 0 2px 0 0 #d6e7e0;
    box-shadow: 0 2px 0 0 #d6e7e0;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.about_nav a:hover,
.about_nav2 a:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
}

/*----------footerGroup----------*/
.footer_group{
    background: #eef4f1;
    /* border-top: 1px solid #e0e9e5; */
    text-align: center;
}
.group_inner{
    padding: 22px 0 24px;
}
.footer_group a{
    display: inline-block;
    padding: 12px 28px;
    background: #fff;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #d6e7e0;
    text-decoration: none;
    -moz-box-shadow: 0 2px 0 0 #d6e7e0;
    -webkit-box-shadow: 0 2px 0 0 #d6e7e0;
    box-shadow: 0 2px 0 0 #d6e7e0;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    text-decoration: none;
}
.footer_group a:hover{
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

.footer_group span{
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}
.footer_group i{
    font-size: 11px;
    display: inline-block;
    vertical-align: middle;
}




/*----------footerSmall----------*/
.footer_small {
    background: #444845;
    text-align: center;
    padding: 24px 20px 20px;
    display: block;
    color: #fff;
    line-height: 1;
    font-size: 13px;
}

.footer_small a {
    color: #fff;
    text-decoration: underline;
}

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

small {
    float: right;
    width: 30%;
    text-align: right;
}

/*----------footerNav----------*/
.footer_nav {
    float: left;
    width: 70%;
}

.footer_nav li {
    float: left;
}

.footer_nav a {
    line-height: 1;
    position: relative;
    display: block;
    text-decoration: underline;
    margin-right: 20px;
    position: relative;
}

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

@media screen and (min-width: 641px) {
    .footer_nav .title {
        display: none;
    }
}

@media screen and (max-width: 980px) {
    footer {
        margin-bottom: 55px;
        padding: 0;
    }

    footer > .inner {
        padding: 0px 0 25px;
    }

    footer .inner {
        padding-top: 15px;
    }

    /*----------footerAbout----------*/
    .footer_about .about_inner {
        padding: 30px 20px;
        /* background-color: #54534d; */
        /* color: #fff; */
    }

    .footer_about .about_title {}

    .footer_about .about_text {
        font-size: 14px;
    }

    .about_nav li{
        margin: 0 0 12px 0;
        width: 100%
    }
    .about_nav a{
        display: block;
        text-align: center
    }

    /*----------footerNav----------*/
    .footer_nav {
        float: none;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;
        margin-bottom: 0px;
    }

    .footer_nav ul {
        margin-bottom: 15px;
    }

    .footer_nav li {
        width: 45%;
    }

    .footer_nav li:nth-child(2n) {
        width: 55%;
    }

    .footer_nav li:last-child {
        border: none;
    }

    .footer_nav li a {
        padding: 10px 0;
        margin-right: 0;
        font-size: 15px;
    }

    .footer_nav a:before {}

    .footer_nav > ul > li > ul {
        margin-left: 0;
    }

    /*----------footerSmall----------*/
    .footer_small {
        padding: 0;
    }

    small {
        float: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 20px 15px;
        font-size: 11px;
        text-align: center;
    }

}

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

    pageStyle

------------------------------------------------------------*/
/*----------postList----------*/
.post_list {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.post_list article {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
    background-color: #fff;
    border: 2px solid #388c78;
    box-sizing: border-box;
    position: relative;
    -moz-box-shadow: 0 2px 0 0 #388c78;
    -webkit-box-shadow: 0 2px 0 0 #388c78;
    box-shadow: 0 2px 0 0 #388c78;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    border-radius: 20px;
}

.post_list article:nth-child(2n) {
    margin-right: 0;
}

.post_list article:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

.post_list article a {
    display: block;
    text-decoration: none;
    color: #555a57;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

.post_list article.post:hover .post_title {
    transition-duration: 0.2s;
    text-decoration: none;
}

.post_list .post_inner {
    position: relative;
    padding-bottom: 40px;
    display: flex;
    height: 100%;
}
.post_list.search .post_inner {
    padding-bottom: 0;
}
.terms_list .post_inner {
    display: block;
}

.post_list .post_thumb {
    margin-bottom: 0;
    width: 30%;
    height: auto;
    overflow: hidden;
}

.post_list .post_thumb img {
    width: 100%;
    display: block;
    margin-bottom: 0;
}

.post_list .post_title {
    font-weight: bold;
    font-size: 19px;
    line-height: 1.4;
    /* margin-bottom: 15px; */
    padding-left: 15px;
    width: 70%;
}
.post_list.search .post_title {
    margin-bottom: 0;
}
.post_list.r_terms .post_title {
    width: 100%;
}
.terms_list .post_title {
    display: block;
    padding: 0;
    margin-bottom: 5px;
    width: 100%;
}

.post_list .post_meta {
    color: #999;
    font-size: 11px;
    line-height: 1;
    text-align: right;
    padding: 0;
    display: block;
    position: absolute;
    left: 0;
    bottom: 37px;
    width: 100%;
    box-sizing: border-box;
}

.post_list .post_description {
    font-size: 14px;
    margin-bottom: 20px;
    display: none;
}

.post_list .post_category {
    display: block;
    width: 100%;
    text-align: right;
    /* margin-bottom: 13px; */
}

.post_list .post_category span {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    border: 1px solid #388c78;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 100px;
    font-weight: bold;
    background: #388c78;
}

.post_list .post_more {
    display: none;
    width: 100%;
    font-size: 16px;
    text-align: right;
    vertical-align: middle;
    margin-bottom: 0;
}

.post_list .post_more span {
    color: #388c78;
    text-decoration: underline;
    line-height: 1;
}

.post_list article.post:hover .post_more span {
    text-decoration: none;
}

.post_list .post_more:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: '\f0a9';
    margin-left: 5px;
    color: #388c78;
    font-size: 18px;
    line-height: 1;
}

.post_list time {
    margin-right: 10px;
}


/*----------stepList（基本ガイド一覧）----------*/
.step_list article{
    position: relative;
    counter-increment:stepNum;
}
.step_list article:before{
    font-family: 'Rubik', sans-serif;
    content: "Step." counter(stepNum);
    position: absolute;
    top: 0;
    left: 0;
    background: #388c78;
    padding: 8px 15px;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    z-index: 999;
    border-radius: 16px 0 16px 0;
    letter-spacing: 0.02em;
}
.step_list .post_inner{
    padding-bottom: 20px;
}

/*----------postList（用語集）----------*/
.terms_list article{
    width: 100%;
    margin-right: 0;
}
.terms_list .post_description{
    font-size: 16px;
    display: block;
    margin-bottom: 0;
}
.terms_list .post_inner{
    padding-bottom: 0;
}
#terms_top .terms_list .post_inner p:last-child{
    margin-bottom: 0;
}


/*----------sns----------*/
ul.post-bottom-social {
    font-size: 0;
    text-align: center;
}

ul.post-bottom-social li {
    font-size: 12px;
    display: inline-block;
    margin: 0 3.5% 0 0;
}

ul.post-bottom-social li:last-child {
    margin-right: 0;
}

ul.post-bottom-social li div {
    width: 100%;
}

/*
p.share-count {
    width: 100%;
    height: 28px;
    line-height: 28px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 5px !important;
    box-sizing: border-box;
    display: none;
}
*/

ul.post-bottom-social li a {
    display: block;
    height: 70px;
    width: 120px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 12px 10px 10px;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, .2) inset;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

ul.post-bottom-social li a:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2) inset;
    -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2) inset;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2) inset;
}

ul.post-bottom-social li i:before {
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 7px;

}

ul.post-bottom-social li span {
    display: block;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
}

@font-face {
    font-family: 'icomoon-sns';
    src: url('../icon/icomoon-sns.eot?-qz7pb2');
    src: url('../icon/icomoon-sns.eot?#iefix-qz7pb2') format('embedded-opentype'),
        url('../icon/icomoon-sns.woff?-qz7pb2') format('woff'),
        url('../icon/icomoon-sns.ttf?-qz7pb2') format('truetype'),
        url('../icon/icomoon-sns.svg?-qz7pb2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon-sns';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-feedly:before {
    content: "\e901";
}

.icon-hatena:before {
    content: "\e902";
}

.icon-hatena2:before {
    content: "\e900";
}

.icon-line:before {
    content: "\e903";
}

.icon-pocket:before {
    content: "\e904";
}

.icon-twitter:before {
    content: "\ea96";
}

.icon-twitter2:before {
    content: "\e905";
}

.icon-googleplus:before {
    content: "\ea8b";
}

.icon-googleplus2:before {
    content: "\ea8c";
}

.icon-googleplus3:before {
    content: "\e908";
}

.icon-facebook:before {
    content: "\ea90";
}

.icon-facebook2:before {
    content: "\ea91";
}

.icon-rss:before {
    content: "\ea9b";
}

.icon-rss2:before {
    content: "\ea9c";
}

.icon-youtube:before {
    content: "\ea9d";
}

.icon-skype:before {
    content: "\eac5";
}

.icon-pinterest2:before {
    content: "\ead1";
}

.icon-pinterest3:before {
    content: "\ead2";
}

.icon-evernote:before {
    content: "\e909";
}

.icon-pinterest:before {
    content: "\e906";
}

.icon-instagram:before {
    content: "\e907";
}

.sns i:before {
    font-size: 16px;
    line-height: 42px;
}

.facebook-box a {
    background: #5e69b0;
}

.twitter-box a {
    background: #3d95c4;
}

.hatebu-box a {
    background: #457ebe;
}

.googleplus-box a {
    background: #d0543c;
}

.googleplus-box i:before {
    font-size: 16px;
}

.pocket-box a {
    background: #e05251;
}

/*.feedly-box a {
    background: #87bf31;
}*/
.line-box a {
    background: #6ab155;
}

.line-box i:before {
    font-size: 17px;
}

.twitter-box a:hover,
.facebook-box a:hover,
.hatebu-box a:hover,
.googleplus-box a:hover,
.pocket-box a:hover,
.feedly-box a:hover,
.line-box a:hover {
    color: #fff;
    opacity: 1;
}

/*----------tableOfContent（目次）----------*/
#toc {
    background: #fff;
    padding: 40px;
    font-size: 17px;
    margin: 40px 0;
    border-radius: 20px;
    /* box-shadow: 0 8px 0 #d6e7e0; */
}

#toc .toc_title {
    font-size: 23px;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 1em !important;
}

#toc ol {
    counter-reset: list-counter;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#toc ol > li {
    counter-increment: list-counter;
    position: relative;
}
#toc li::after {
    display: none;
}

#toc ol > li::before {
    content: counter(list-counter) ". ";
    font-weight: bold;
    margin-right: 5px;
}

#toc ol ol {
    counter-reset: sublist-counter;
    padding-left: 20px;
}

#toc ol ol > li {
    counter-increment: sublist-counter;
}

#toc ol ol > li::before {
    content: counter(list-counter) "-" counter(sublist-counter) ". ";
    font-weight: normal;
    margin-right: 5px;
}
/*追記*/
#toc a{
    color: #444845;
}
#toc ol > li {
    margin-top: 10px;
}

/* #toc .title:after {
    content: '閉じる';
    color: #999;
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid #ccc;
    padding: 3px 5px 2px;
    font-size: 13px;
    line-height: 1;
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 5px;
}

#toc .title.check:after {
    content: '開く';
    color: #999;
} */

/* #toc > ul,
#toc > ol {
    margin-top: 32px;
}

#toc ul,
#toc ol {
    margin-left: 28px;
    margin-bottom: 0;
}


#toc ul li,
#toc ol li {
    position: relative;
    margin-bottom: 12px;
    padding: 0;
}

#toc ol li:before,
#toc ul li:before {
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 5px;
    left: -20px;
    top: 8px;
    background: #555a57;
}

#toc ol li:after {
    display: none;
}

#toc ol li a {
    color: #555a57;
} */
/*図解的な目次*/
#toc.guide {

}
#toc.toc_guide>ul, #toc.toc_guide>ol{
    margin-left:0;
}
#toc.toc_guide>ol>li:before,
#toc.toc_guide>ul>li:before {
    display: none;
}
#toc.toc_guide>ol>ol,
#toc.toc_guide>ul>ul{
    margin-bottom: 12px;
}
#toc.toc_guide>ol>li,
#toc.toc_guide>ul>li{
/*    background: #d6e7e0;*/
    background: #deede6;
    padding: 4px 16px;
    border-radius: 20px;
}
#toc.toc_guide a,
#toc.toc_guide a{
    display: block;
}

/*toc h2*/
.post_body .firstly h2{
    margin: 0 0 24px;
    border-radius: 0;
    background: #fff;
    font-size: 30px;
    text-align: center;
    color: #444845;
    border: none;
    border-bottom: 2px solid #d6e7e0;
    font-weight: bold;
    padding: 0 0 12px;
}




/*----------tableOfContent（第〇章）----------*/
.toc_chapter {
    border: 2px solid #444845;
    background: #fff;
    padding: 40px;
    font-size: 17px;
    margin: 50px 0;
    border-radius: 20px;
}
.toc_chapter .title {
    font-size: 18px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    margin-bottom: 25px !important;
}

.toc_chapter > ul,
.toc_chapter > ol {}

.toc_chapter ul,
.toc_chapter ol {
    margin-left: 40px;
    margin-bottom: 0 !important;
}

.toc_chapter ul li,
.toc_chapter ol li {
    list-style: none;
    position: relative;
    margin-bottom: 5px;
    padding: 0 0 0 45px !important;
    counter-increment:sample;
}

.toc_chapter ol li:before {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    position: absolute;
    font-weight: bold;
    left: 0;
    top: 50%;
    margin-top: -11px;
    line-height: 1;
/*    border: 1px solid #388c78;*/
    color: #388c78;
    padding: 5px 7px;
    border-radius: 100px;
}
.toc_chapter.no1 ol li:before {
    content: "1-" counter(sample);
}
.toc_chapter.no2 ol li:before {
    content: "2-" counter(sample);
}
.toc_chapter.no3 ol li:before {
    content: "3-" counter(sample);
}
.toc_chapter.no4 ol li:before {
    content: "4-" counter(sample);
}
.toc_chapter.no5 ol li:before {
    content: "5-" counter(sample);
}
.toc_chapter.no6 ol li:before {
    content: "6-" counter(sample);
}
.toc_chapter.no7 ol li:before {
    content: "7-" counter(sample);
}
.toc_chapter.no8 ol li:before {
    content: "8-" counter(sample);
}

.toc_chapter ol li:after {
    display: none;
}

.toc_chapter ol li a {
    color: #555a57;
}

.toc_chapter .now a{
    color: #388c78;
    font-weight: bold;
    text-decoration: none;
}



/*beforeAfterPost*/
.ba-post {
    border-top: 1px solid #d6e7e0;
    /* background-color: #fff; */
    margin-bottom: 35px;
}

.ba-post ul {
    border-bottom: 1px solid #d6e7e0;
}

.ba-post li {
    width: 50%;
}

.ba-post li a,
.ba-post li span {
    padding: 20px;
    display: block;
    color: #444845;
    text-decoration: none;
    position: relative;
    font-size: 17px;
    line-height: 1.4;
}

.ba-post li a:hover {
    text-decoration: underline;
}

.ba-post li.prev {
    float: left;
}

.ba-post li.next {
    float: right;
    text-align: right;
}

.ba-post li.prev a {
    padding-left: 35px;
}

.ba-post li.next a {
    padding-right: 35px;
}

.ba-post li a:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
    color: #ccc;
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ba-post li.prev a:before {
    content: '\f060';
    left: 15px;
    font-weight: 500;
    color: #388c78;
}

.ba-post li.next a:before {
    content: '\f061';
    right: 15px;
}

/*blockquote*/
blockquote {
    padding: 30px 39px 30px 80px;
    margin-bottom: 2em;
    font-size: 17px;
    position: relative;
    border-radius: 20px;
    /* background: #fff; */
    border: 2px dotted #a8cabd;
    box-sizing: border-box;
}
.post_body blockquote p{
    font-size: 17px;
}

blockquote:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f10d";
    font-size: 28px;
    line-height: 1;
    color: #a8cabd;
    position: absolute;
    left: 26px;
    top: 24px;
}

#content blockquote p:last-child,
#content blockquote ul:last-child,
#content blockquote ol:last-child {
    margin-bottom: 0;
}

cite {
    font-size: 80%;
    display: block;
    text-align: right;
    margin-top: 5px;
    color: #888;
}

cite a {
    color: #888;
}

/*----------list----------*/

.post_body ul,
.post_body ol {
    margin-bottom: 30px;
    margin-left: 0;
}

/*通常*/
.post_body ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 18px;
}
.post_body ul li:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 500;
    content: "\f00c";
    position: absolute;
    left: 3px;
    top: 2px;
    font-size: 20px;
    line-height: 1;
    color: #388c78;
}

.post_body .list2 li {
    margin-bottom: 20px;
}

/*連番*/
.post_body ul.decimal li,
.post_body ol li {
    list-style: none;
    position: relative;
    counter-increment:sample;
    padding-left: 20px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.post_body ul.decimal li:after,
.post_body ol li:after {
    content: counter(sample);
    font-weight: 500;
    position: absolute;
    left: 2px;
    top: 2px;
    font-size: 13px;
    line-height: 25px;
    background-color:#388c78;
    color: #fff;
    text-align: center;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    font-weight: bold;
}

/*丸*/
.post_body ul.circle li {
    padding-left: 28px;
}
.post_body ul.circle li:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f111";
    position: absolute;
    left: 3px;
    top: 6px;
    font-size: 18px;
    line-height: 1;
    color: #deede6;
}

/*ボーダー区切り*/
.post_body ul.step li, .post_body ol.step li {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dotted #d6e7e0;
}

/*review*/
.post_body ul.review li,
.post_body ol.review li {
    list-style: none;
    position: relative;
}

.post_body ul.review li:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    left: -20px;
    top: 4px;
    line-height: 1;
    font-size: 17px;
}

.post_body ul.review li.good:before {
    content: "\f118";
    color: green;
}

.post_body ul.review li.bad:before {
    content: "\f119";
    color: #e00;
}

/*table*/
table {
    width: 100%;
    margin-bottom: 2em;
}
table caption{
    font-weight: bold;
    caption-side: top;
    text-align: left;
    font-size: 18px;
    line-height: 1.4;
    color: #444845;
    padding: 8px 10px 5px;
}
table caption:before{
    content: "◎";
}
table .none {
    opacity: 0;
}

table th, table td {
    padding: 20px 20px;
    line-height: 1.6;
    position: relative;
}
table.short tbody th,table.short tbody td{
    padding: 16px 20px;
}
table th{
    border-bottom: 1px solid #eef4f1;
}
table td{
    border-bottom: 1px solid #d6e7e0;
}
table tbody tr:last-child th, table tbody tr:last-child td{
    border-bottom: none;
}

table tr :first-child:before{
    display: none;
}
/* table th:before,
table td:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 101%;
    width: 4px;
    background: #eef4f1;
} */
table thead th {
    /* border-bottom: 2px solid #444845; */
    font-weight: bold;
    position: relative;
    padding: 0;
}
table thead th span{
    padding: 8px 16px 8px;
    margin-left: 4px;
    border-radius: 12px 12px 0 0;
    background: #444845;
    display: block;
    box-sizing: border-box;
    color: #fff;
}
table thead th:first-child span{
    margin-left: 0;
}

table tbody th {
    background: #deede6;
    font-weight: bold;
}
table tbody td {
    background: #fff;
}

table tbody th.bg1 {
    background-color: #FFC88F;
}

table tbody td.bg1 {
/*    background-color: #FFF5E1;*/
    background-color: #9cc8b9;
}

table tbody .green2 {
    background-color: #388c78;
    color: #fff;
}

table .circle{
    font-size: 20px;
    /* font-weight: bold; */
}

table.col2 th,
table.col2 td {
    border: 1px solid #111;
}
table.col2 tbody th {
    border-right:none;
}
table.col2 tbody td {
    border-left:none;
}
.post_body table li{
    margin-bottom: 4px;
}
.post_body table ul:last-child{
    margin-bottom: 0;
}


/*ヘッダ固定テーブル*/
/*
@media screen and (max-width: 980px) {
    .sticky_table {
        width: 640px;
        overflow: scroll;
    }
    .sticky_table table {
        table-layout: fixed;
        width: 100%;
    }

    .sticky_table thead tr th {
        width: 176px;
        position: sticky;
        top: 0;
        z-index:2;
    }
    .sticky_table thead tr td {
        z-index: 1;
    }

    .sticky_table tbody tr th {
        position: sticky;
        left: 0;
        z-index:2;
    }
}*/


/*box（囲い枠）*/
.box{
    background: #fff;
    padding: 30px 40px;
    margin-bottom: 2em;
    font-size: 17px;
    border-radius: 20px;
    border: 2px solid #388c78;
}
.box_black{
    background: #fff;
    padding: 30px 40px;
    margin-bottom: 2em;
    font-size: 17px;
    border-radius: 20px;
    border: 2px solid #444845;
}
.box_noborder{
    background: #fff;
    padding: 30px 40px;
    margin-bottom: 2em;
    font-size: 17px;
    border-radius: 20px;
}
.box_border{
    padding: 30px 40px;
    margin-bottom: 2em;
    font-size: 17px;
    position: relative;
    border-radius: 20px;
    border: 2px dotted #a8cabd;
    box-sizing: border-box;
}

.box p,
.box_black p,
.box_noborder p,
.box_border p{
    font-size: 18px;
}
.box p:last-child,
.box ul:last-child,
.box ol:last-child,
.box_black p:last-child,
.box_black ul:last-child,
.box_black ol:last-child,
.box_noborder p:last-child,
.box_noborder ul:last-child,
.box_noborder ol:last-child,
.box_border p:last-child,
.box_border ul:last-child,
.box_border ol:last-child{
    margin-bottom: 0 !important;
}

.box .title,
.box_black .title,
.box_noborder .title{
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}

/*waku*/
.waku{
    background: #fff;
    padding: 30px 40px;
    margin-bottom: 2em;
    font-size: 17px;
    border-radius: 20px;
    border: 2px solid #388c78;
}
.waku p{
    font-size: 17px;
}
.waku p:last-child{
    margin-bottom: 0 !important;
}

.waku ul:last-child,
.waku ol:last-child{
    margin-bottom: 0 !important;
}
.waku ul li:last-child,
.waku ol li:last-child{
    margin-bottom: 0 !important;
}
.waku .title {
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}



/*freebox*/
.freebox {
    background-color: #fff;
    border: 2px solid #388c78;
    padding: 50px 25px 25px 25px;
    margin-bottom: 1.7em;
    font-size: 16px;
    position: relative;
    border-radius: 12px;
}

.freebox .title {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #388c78;
    color: #fff;
    padding: 7px 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 0;
    border-radius: 8px 0 12px 0;
}

.freebox .title:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f671";
    font-size: 17px;
    line-height: 1;
    margin-right: 5px;
}

.freebox p:last-child,
.freebox ul:last-child,
.freebox ol:last-child {
    margin-bottom: 0 !important;
}

/*freebox2*/
.freebox.color2 {
    background-color: #f8f8f8;
    border: 2px solid #F86E46;
}

.freebox.color2 .title {
    background-color: #F86E46;
    color: #fff;
}

.freebox.color2 .title:before {
    content: "\f071";
}

/*stepbox*/
.stepbox div{
    background: #fff;
    border:2px solid #388c78;
    padding: 25px 30px 25px 160px;
    margin-bottom: 1.7em;
    font-size: 17px;
    border-radius: 12px;
    position: relative;
    counter-increment:sample;
}
.stepbox div:after{
    position: absolute;
    content: "";
    bottom:-54px;
    left: 50%;
    margin-left: -26px;
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-top: 26px solid #a8cabd;
}
.stepbox div:last-child:after{
    display: none;
}
.stepbox div:before{
    position: absolute;
    width: 140px;
    height: 100%;
    top:0;
    left: 0;
    background: #388c78;
    border-radius:8px 0 0 8px;
    content: "手順" counter(sample);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 28px;
}
.stepbox.en div:before{
    content: "Step" counter(sample);
}
.stepbox div .step_title{
    font-size: 22px;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 10px;
}
.stepbox div p:last-child{
    margin-bottom: 0;
}

/*font*/
.color {
    font-weight: bold;
    color: #d84808;
}

.marker {
/*    background:linear-gradient(transparent 70%, #ffcc66 0%);*/
    border-bottom: 3px solid #e4713f;
    padding-bottom: 1px;
    font-weight: bold;
}

.post_body .label {
    color: #388c78;
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 600;
}

/*img*/
picture {
    display: block;
    text-align: center;
    margin-bottom: 1.7em;
}
.post_body .img {
    margin: 3em 0;
    text-align: center;
    display: block;
}
.post_body .border {
    border:1px solid #444845;
}
.post_body .img img{
    margin-bottom:0;
    display: inline-block;
    border-radius: 20px;
}
.post_body .shikaku img {
    border-radius: 0;
}

.border {
    border: 1px solid #ccc;
    margin-left: -1px;
}

/*iflame*/
iframe {
    margin-bottom: 1.7em;
}

/*annotation,note*/
.post_detail .annotation,
.post_detail .note,
.post_detail .notes{
    font-size: 80%;
    color: #888;
    display: inline-block;
    line-height: 1.7;
}
.post_body .recaptcha_notes{
    font-size: 80% !important;
    color: #888;
    display: inline-block;
    line-height: 1.7;
}
.post_detail .annotation.black,
.post_detail .note.black,
.post_detail .notes.black{
    color: #666;
}

.post_detail .annotation a,
.post_detail .note a,
.post_detail .notes a{
    color: #666;
}

.post_detail .notes_tr{
    font-size: 80%;
    color: #666;
    display: block;
    text-align: right;
}
.post_detail .notes_tc{
    font-size: 80%;
    color: #666;
    display: block;
    text-align: center;
}
.post_detail .notes_tc a{
    color: #666;
}

.post_detail .ast {
    font-size: 80%;
    color: #666;
}

.post_detail .img-caption {
    font-size: 80%;
    color: #666;
    text-align: right;
    padding-top: 5px;
}

/*出典*/
.post_detail .source {
    font-size: 9px;
    color: #ccc;
}

/*flowBox*/
.post_detail .flow .box {
    border: 2px dashed #aaa;
    padding: 20px 20px 0;
    box-sizing: border-box;
    background: #f8f8f8;
    margin-bottom: 30px;
    position: relative;
}

.post_detail .flow .box:after {
    border-top: 25px solid #F6AD3C;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
    position: absolute;
    bottom: -28px;
    /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%;
    /* 中央寄せに使用 */
    margin-left: -50px;
    /* 中央寄せに使用 */
}

.post_detail .flow .box:last-child:after {
    display: none;
    margin-bottom: 1.7em;
}

.post_detail .flow .box img {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    max-width: 250px;
}

.post_detail .flow .box p:last-child {
    margin-bottom: 0 !important;
}

/*code*/
/*
pre{
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
    border: 1px solid #d7d7d7;
    background-color: #f8f8f8;
    padding: 15px 20px;
    display: block;
    box-sizing: border-box;
    font-family:'Lato',YuGothic, '游ゴシック',"メイリオ",arial,helvetica,clean,sans-serif;
}*/

/*nostyle*/
.nostyle {
    font-weight: normal;
}

/*ranking-box*/
.post_detail .ranking {
    margin: 1.7em 0 0;
}

.post_detail .ranking-box {
    border: 5px solid #d7d7d7;
    padding: 20px;
    margin-bottom: 1.7em;
}

.post_detail .ranking-box h2 {
    margin: -20px -20px 20px;
    font-weight: 30px;
    font-weight: bold;
    background: #444845;
    color: #fff;
}

/*rank1*/
.post_detail .ranking-box:nth-child(1) h2 {
    background: #dea12c;
}

.post_detail .ranking-box:nth-child(1) {
    border: 5px solid #dea12c;
}

.post_detail .ranking-box:nth-child(1) h2:before {
    content: '第1位';
    margin-right: 10px;
}

/*rank2*/
.post_detail .ranking-box:nth-child(2) h2 {
    background: #a59e95;
}

.post_detail .ranking-box:nth-child(2) {
    border: 5px solid #a59e95;
}

.post_detail .ranking-box:nth-child(2) h2:before {
    content: '第2位';
    margin-right: 10px;
}

/*rank3*/
.post_detail .ranking-box:nth-child(3) h2 {
    background: #b0784b;
}

.post_detail .ranking-box:nth-child(3) {
    border: 5px solid #b0784b;
}

.post_detail .ranking-box:nth-child(3) h2:before {
    content: '第3位';
    margin-right: 10px;
}

/*other*/
.post_detail .ranking-box:nth-child(4) h2:before {
    content: '第4位';
    margin-right: 10px;
}

.post_detail .ranking-box:nth-child(5) h2:before {
    content: '第5位';
    margin-right: 10px;
}

.post_detail .ranking-box .img {
    float: left;
    width: 200px;
}

.post_detail .ranking-box .info {
    display: block;
    margin-left: 220px;
}

.post_detail .ranking-box table {
    margin-bottom: 1.2em;
}

.post_detail .ranking-box th,
.post_detail .ranking-box td {
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
}

.post_detail .ranking-box th {
    width: 30%;
    font-weight: bold;
}

.post_detail td.star {
    color: #fdbe00;
    font-size: 20px;
}

.post_detail td.star i {
    margin-right: 2px;
    display: inline-block;
}

.post_detail .ranking-box .cv {
    background-color: #138E50;
    color: #fff;
    display: inline-block;
    width: 100%;
    padding: 12px 30px 15px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 1.7em;
    border-radius: 4px;
    position: relative;
    text-decoration: none;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    line-height: 1.4;
}

.post_detail .ranking-box .cv:hover {
    background-color: #29AA68;
}

.post_detail .ranking-box .cv:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    right: 15px;
    top: 50%;
    line-height: 1;
    margin-top: -7px;
    font-size: 14px;
    content: "\f054";
}

.post_detail .ranking-box .review {}

.post_detail .ranking-box .review h3 {
    border: none;
}

.post_body .review ul,
.post_body .review ol {
    padding: 0;
    margin: 0 0 1.7em;
}

.post_detail .ranking-box .review li {
    list-style: none;
    position: relative;
    padding-left: 23px;
}

.post_detail .ranking-box .review li:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    left: 3px;
    top: 5px;
    line-height: 1;
    font-size: 17px;
    /*content: "\f007";*/
}

.post_detail .ranking-box .review li.good:before {
    content: "\f118";
    color: green;
}

.post_detail .ranking-box .review li.bad:before {
    content: "\f119";
    color: #e00;
}


/*product-item*/
#content .post_detail .product-item {
    border: 1px solid #ccc;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    margin-bottom: 1.7em;
}

#content .post_detail .product-item p {
    margin-left: 170px;
    display: block;
    margin-bottom: 0;
}

#content .post_detail .product-item p.title {
    margin-bottom: 0.2em;
    font-size: 17px;
    font-weight: bold;
}

#content .post_detail .product-item p.info {
    font-size: 14px;
    margin-bottom: 0.2em;
}

#content .post_detail .product-item p.text {
    font-size: 14px;
}

#content .post_detail .product-item img {
    width: 150px;
    float: left;
    margin-bottom: 0;
}

#content .post_detail .product-item p.btn a {
    padding: 7px 25px 7px 10px;
    display: inline-block;
    background: #c00;
    border-radius: 0px;
    margin-top: 15px;
    margin-right: 5px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    width: 160px;
    box-sizing: border-box;
    font-size: 15px;
    position: relative;
}

#content .post_detail .product-item p.btn a:after {
    display: none;
}

#content .post_detail .product-item p.btn > .btn-amazon {
    background-color: #FF9900;
}

#content .post_detail .product-item p.btn > .btn-kindle {
    background-color: #0D58A6;
}

#content .post_detail .product-item p.btn > .btn-rakuten {
    background-color: #BF0000;
}

#content .post_detail .product-item p.btn > .btn-detail {
    background-color: #444845;
}

#content .post_detail .product-item p.btn > .btn-cv {
    background-color: #FF9900;
}

#content .post_detail .product-item p.btn a.btn-detail:before {
    /*content: "\f054";*/
    content: "\f24a";
}

#content .post_detail .product-item p.btn a.btn-cv:before {
    content: "\f08e";
}

#content .post_detail .product-item p.btn a:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    margin-right: 8px;
    font-size: 13px;
    line-height: 13px;
    vertical-align: middle;
    font-weight: 100;
    color: #666;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    color: #fff;
}

/*cv*/
#content .cv-box .btn {
    text-align: center;
    margin-bottom: 0;
}

#content .cv-box .btn a {
    background-color: #28A573;
    padding: 12px 15px 15px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    width: 80%;
    box-sizing: border-box;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2) inset;
}

#content .cv-box {
    background-color: #d7d7d7;
    padding: 20px;
    margin-bottom: 1.7em;
}

/*content-bottom-banner*/
#content .post_detail .content-bottom-banner {
    margin-bottom: 1.7em;
}

#content .post_detail .content-bottom-banner a {
    /*float: left;*/
}

#content .post_detail .content-bottom-banner a img {
    margin: 0;
    padding: 0;
    display: inline-block;

}

#content .post_detail .content-bottom-banner a img:hover {
    opacity: 0.8;
}

#content .post_detail .content-bottom-banner .banner2 {
    margin-bottom: 20px;
}

#content .post_detail .content-bottom-banner .banner2 li:first-child {
    float: left;
}

#content .post_detail .content-bottom-banner .banner2 li:last-child {
    float: right;
}

#content .post_detail .content-bottom-banner .banner1 {
    margin-bottom: 20px;
}

/*----------youtube----------*/
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 1.7em;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


/*----------balloon（吹き出し）----------*/
.balloon_l,
.balloon_r {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon_l .faceicon {
    float: left;
    width: 86px;
}

.balloon_l .faceicon img {
    width: 100%;
    height: auto;
    border: solid 3px #d7ebfe;
    border-radius: 50%;
    box-sizing: border-box;
    margin: 0;
}

.balloon_r .faceicon {
    float: right;
    width: 86px;
}

.balloon_r .faceicon img {
    width: 100%;
    height: auto;
    border: solid 3px #ccf5ce;
    border-radius: 50%;
    box-sizing: border-box;
    margin: 0;
}

.balloon_l .name,
.balloon_r .name {
    display: inline-block;
    font-size: 11px;
    color: #999;
    text-align: center;
    width: 86px;
}

.balloon_l .chatting,
.balloon_r .chatting {
    width: 100%;
}

.balloon_l .says {
    display: block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #d7ebfe;
}

.balloon_l .says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #d7ebfe;
}

.balloon_l .says p,
.balloon_r .says p {
    margin: 0 !important;
    padding: 0;
}

.balloon_r .says {
    display: block;
    position: relative;
    margin: 5px 105px 0 0;
    padding: 17px 13px;
    border-radius: 12px;
    background: #ccf5ce;
}

.balloon_r .says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    right: -24px;
    border: 12px solid transparent;
    border-left: 12px solid #ccf5ce;
}

/*----------補足----------*/
#hosoku{
    /* background: #f5f4f2; */
    /* background: #fff; */
    border: 2px dotted #d6e7e0;
    padding: 35px 40px;
    border-radius: 20px;
    margin-bottom: 80px;
}
#hosoku p{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}
#hosoku p a{
    text-decoration: underline;
}


/*----------pagenav----------*/
.pagenav {
    text-align: center;
    margin: 30px 0;
    display: block;
}

.pagenav:after {
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    content: ".";
}

.pagenav li {
    float: left;
    margin-right: 1.5%;
    font-size: 12px;
}

.pagenav a {
    /* border-radius: 8px; */
    box-sizing: border-box;
    display: inline-block;
    background: #fff;
    padding: 12px 15px;
    text-align: center;
    margin-right: 4px;
    margin-bottom: 4px;
    border: 1px solid #444845;
    color: #444845;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 0 #444845;
    /* border-radius: 4px; */
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    text-decoration: none;
}
.pagenav a:hover{
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(2px);
    transform: translateY(1px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

/*.pagenav li.first{
  width: 16%;
}*/
.pagenav li.previous {
    width: 43.5%;
}

.pagenav li.next {
    width: 43.5%;
}

/*.pagenav li.before,
.pagenav li.after {
  width: 8%;
}*/
/*.pagenav li.current{
  box-sizing: border-box;
  width: 8%;
}*/
/*.pagenav li.last {
  width: 16%;
}*/
.pagenav li.page_nums {
    width: 10%;
    margin-right: 0;
}

.pagenav span {
    border: 1px solid #444845;
    box-sizing: border-box;
    display: inline-block;
    padding: 12px 15px;
    line-height: 1;
    color: #fff;
    /* border-radius: 8px; */
    /*color: #e32b38;*/
    background-color: #444845;
    text-align: center;
    margin-right: 4px;
    font-size: 14px;
    /* border-radius: 4px; */
}



/*----------【メニュー】検索フォーム----------*/
#form1 {
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    position: relative;
}

/*検索ボックス*/
#sbox {
    position: absolute;
    left: 0;
    top: 0;
    outline: 0;
    height: 50px;
    width: 79%;
    padding: 0 10px;
    background: #efefef;
    box-sizing: border-box;
    border: 2px solid #ccc;
    /* border-right: none; */
    font-size: 17px;
    color: #444845;
    /*    box-shadow: 0 2px 0 rgba(0, 0, 0, .1) inset;*/
}

/*検索ボタン*/
#sbtn {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    width: 20%;
    height: 50px;
    background: #388c78;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    border: 2px solid #388c78;
    box-shadow: 0 -2px 0 rgba(0, 0, 0, .1) inset;
    /* border-left: none; */
    /* border-radius: 0 4px 4px 0; */
    cursor: pointer;
}


.terms_form #sbox{
    background: #fff;
    height: 64px;
    border: 2px solid #444845;
    /* border-right: none; */
}
.terms_form #sbtn{
    height: 64px;
    border: 2px solid #388c78;
    /* border-radius: 12px; */
}

#sbtn i {
    margin-right: 5px;
    font-size: 19px;
    line-height: 1;
    font-weight: 300;
}

#sbtn:hover {
    color: #fff;
}

/*----------【メニュー】注目キーワード----------*/
.menu_key_ttl {
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
    text-align: center;
}
.menu_key_tag{
    margin-bottom: 20px;
}
.menu_key_tag a {
    text-decoration: none;
    color: #444845;
    /* border-radius: 100px; */
    padding: 12px 12px;
    font-size: 16px;
    line-height: 1;
    border: 1px solid #d6e7e0;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 10px;
    background: #eef4f1;
    box-shadow: 0 2px 0 0 #d6e7e0;
}

.menu_key_cat {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}
.menu_key_cat li{
    margin: 0 8px 8px 0;
}
.menu_key_cat a{
    padding: 8px;
    display: inline-block;
    background: #fff;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #d6e7e0;
    text-decoration: none;
    -moz-box-shadow: 0 2px 0 0 #d6e7e0;
    -webkit-box-shadow: 0 2px 0 0 #d6e7e0;
    box-shadow: 0 2px 0 0 #d6e7e0;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.menu_key_cat a:hover{
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15);
}

/*---------- 次のステップ＆前のステップ ----------*/
.step_btn{
    display: block;
    text-align: center;
    margin: 80px 0;
}
.step_btn a{
    display: inline-block;
    width: 80%;
    padding: 18px 25px 18px 120px;
    font-size: 20px;
    background: #fff;
    border:2px solid #388c78;
    color: #388c78;
    -moz-box-shadow: 0 2px 0 0 #388c78;
    -webkit-box-shadow: 0 2px 0 0 #388c78;
    box-shadow: 0 2px 0 0 #388c78;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
}
.step_btn a:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}
.step_btn a:first-child{
    margin-bottom: 20px;
}
.step_btn a:after{
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -20px;
    padding: 0 10px;
    line-height: 40px;
    background: #388c78;
    color: #fff;
    font-size: 17px;
}
.step_prev a:after{
    content: "前の記事";
}
.step_next a:after{
    content: "次の記事";
}



/*----------メリット＆デメリット----------*/
.merit_box,
.demerit_box{
    padding: 25px;
    border-radius: 15px;
    margin: 55px 0 35px;
}
.merit_box{
    border: 2px solid #388c78;
}
.demerit_box{
    border: 2px solid #3e7675;
}
.merit_box p:last-child,
.merit_box ul:last-child,
.merit_box ol:last-child,
.demerit_box p:last-child,
.demerit_box ul:last-child,
.demerit_box ol:last-child{
    margin-bottom: 0;
}

.merit_box .title,
.demerit_box .title{
    margin: -25px -25px 30px;
    border:none;
    color: #fff;
    border-radius: 10px 10px 0 0;
    /*position: relative;*/
    font-size: 28px;
    padding: 8px 12px 8px 100px;
    text-align: center;
}
.merit_box .title{
    background: #388c78;
}
.demerit_box .title{
    background: #3e7675;
}

.merit_box .title span,
.demerit_box .title span{
    position: relative;
    padding: 0 90px 0 70px;
}
.merit_box .title span:after,
.demerit_box .title span:after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0px;
    width: 56px;
    height: 77px;
}
.merit_box .title span:after{
    background: url(../img/icon/icon_maru.svg) 0 0 no-repeat;
}
.demerit_box .title span:after{
    background: url(../img/icon/icon_batsu.svg) 0 0 no-repeat;
}


/*----------ステップアイコン----------*/
.step_icon{
    text-align: center;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: #388c78;
    margin-bottom: 16px;
}
/*----------はじめに----------*/
.firstly{
    background: #fff;
    border: 3px solid #388c78;
    padding: 40px;
    border-radius: 20px;
    margin: 0 0 60px;
    position: relative;
}
.firstly:before{
    content: "はじめに";
    width: 100%;
    display: block;
    color: #388c78;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    margin: -15px 0 15px;
    display: none;
}
.firstly p{
    font-size: 18px;
}
.firstly p:last-child{
    margin-bottom: 0;
}

/*----------まとめ----------*/
.post_body .matome h2{
    font-size: 24px;
    font-weight: bold;
    background: none;
    border: none;
    margin: 100px 0 10px;
    padding: 0;
    color: #444845;
    text-align: left;
}
.matome>div{
    background: #fff;
    border: 2px solid #388c78;
    padding: 35px;
    border-radius: 20px;
}
.matome>div p:last-child{
    margin-bottom: 0;
}


/*---------- table 横スクロール ----------*/
.post_body .js-scrollable{
    margin-bottom: 1.8em;
}
.post_body .js-scrollable-txt{
    display: none;
}


/*---------- PRボックス ----------*/
.pr_box{
    border: 1px solid #d6e7e0;
    padding: 32px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 20px;
    background: #fff;
}
.pr_box:after{
    content: "PR";
    position: absolute;
    border: 2px solid #388c78;
    display: inline-block;
    padding: 8px 16px;
    color: #388c78;
    font-weight: bold;
    right: 16px;
    top: 16px;
    background: #fff;
    line-height: 1;
    border-radius: 100px;
    font-size: 16px;
}
.pr_box picture{
    margin: 0 32px 0 0;
    width: 160px;
}
.pr_box > div{
    -webkit-flex: 1;
    flex: 1;
}
.pr_box img{
    width: 100%;
    margin: 0;
}

.pr_title{
    font-size: 20px !important;
    font-weight: bold;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}
.pr_txt{
    margin-bottom: 12px !important;
}
.pr_box a{
    display: block;
    border-radius: 16px;
    padding: 16px;
    line-height: 1;
    color: #fff;
    background: #388c78;
    text-align: center;
    text-decoration: none;
    -moz-box-shadow: 0 3px 0 0 #2e7766;
    -webkit-box-shadow: 0 3px 0 0 #2e7766;
    box-shadow: 0 3px 0 0 #2e7766;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.pr_box a:hover {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    -moz-box-shadow: 0 0 0 0 #fff ;
    -webkit-box-shadow: 0 0 0 0 #fff ;
    box-shadow: 0 0 0 0 #fff ;
}
/*---------- infobox ----------*/
.info_box{
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    margin: 2em 0;
}
.info_box dd:last-child{
    margin: 0;
}

.info_box dt{
    background: #deede6;
    padding: 8px 16px;
    border-radius: 100px;
    display: block;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2em;
}
.info_box dd{
    margin-bottom: 2em;
}



@media screen and (min-width:980px) and (max-width: 1100px) {
    .post_list .post_more span {
        display: none;
    }
}


@media screen and (max-width: 980px) {
    /*img*/
    .post_body .img {
        margin: 2em 0;
    }

    /*stepbox*/
    .stepbox div{
        padding: 70px 30px 30px 30px;
    }
    .stepbox div:before{
        width: 100%;
        height: 40px;
        border-radius: 8px 8px 0 0 ;
        content: "手順" counter(sample);
        font-size: 20px;
    }
    .stepbox div .step_title{
        font-size: 22px;
    }

    /*----------postList----------*/
    .post_list{
        margin-bottom: 30px
    }
    .post_list article {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .post_list article:last-child {
        margin-bottom:0;
    }

    .post_list .post_thumb {
        width: 30%;
        margin-bottom: 15px;
    }

    .post_list .post_thumb img {
        width: 100%;
    }

    .post_list .post_title {
        padding-left: 20px;
        margin-bottom: 12px;
        width: 70%;
        /* display: block; */
    }
    .terms_list .post_title {
        padding-left: 0;
        width: 100%;
    }

    /*----------beforeAfterPost----------*/
    .ba-post li {
        width: 100%;
        display: block;
    }

    .ba-post li.prev {
        border-bottom: 1px solid #d6e7e0;
        float: none;
    }

    .ba-post li.next {
        float: none;
        text-align: left;
    }

    .ba-post li.next a {
        padding-left: 35px;
        padding-right: 15px;
    }

    .ba-post li.next:before {
        left: 15px;
        right: auto;
    }

    /*----------fixed_nav----------*/
    #fixed_nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 0;
        height: 55px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: #388c78;
    }

    #fixed_nav > * {
        width: 28%;
        box-sizing: border-box;
        font-size: 20px;
        text-align: center;
        padding: 10px;
    }

    #fixed_nav a {
        text-decoration: none;
        color: #fff;
        border-right: 1px solid #fff;
    }

    #fixed_nav a:last-child {
        border: none;
        width: 16%;
    }

    #fixed_nav a.icon-pagetop i {
        margin-top: 7px;
    }

    #fixed_nav i {
        display: block;
        font-size: 20px;
        line-height: 1;
        margin-bottom: 5px;
    }

    #fixed_nav span {
        display: block;
        font-size: 14px;
        line-height: 1;
    }

    /*----------tableOfContent（目次）----------*/
    #toc {
        padding: 24px;
        margin: 0 0 50px;
    }
    #toc .title {
        /* padding-bottom: 15px; */
        font-size: 20px;
        margin: 0;
    }
    /*toc h2*/
    .post_body .firstly h2{
        font-size: 26px;
    }


    /*waku*/
    .waku,
    .box_border{
        padding: 30px;
    }
    /*blockquote*/
    blockquote{
        padding: 30px 30px 30px 60px;
    }
    blockquote:before {
        font-size: 26px;
        left: 20px;
        top: 20px;
    }

    /*---------- 次のステップ＆前のステップ ----------*/
    .step_btn{
        display: block;
        text-align: center;
        margin: 40px 0 60px;
    }
    .step_btn a{
    width: 90%;
/*    padding: 15px 15px 15px 110px;*/
    }

    /*---------- table 横スクロール ----------*/
    .post_body .js-scrollable-txt{
        font-size: 15px;
        margin-bottom: 5px;
        text-align: right;
        display: block;
    }
    .js-scrollable{
        position: relative;
        overflow-x: scroll;
        width: 100%;
    }
    /*.js-scrollable:before{
        content: "この表は横にスクロールできます";
        font-size: 15px;
    }*/
    .js-scrollable table{
        width: 740px;
    }
    .js-scrollable .scrollimg{
        width: 600px;
        display: block;
    }

    .scroll-hint-icon {
        background: #444845 !important;
        border-radius: 24px !important;
        padding: 30px 10px 75px 10px !important;
    }
    .scroll-hint-icon-wrap{
        display: none;
    }
    .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
        opacity: .9 !important;
    }
    .scroll-hint-text {
        font-size: 13px !important;
    }
    .scroll-hint-icon:before {
        background-image: url(../img/icon/icon_hand.svg) !important;
    }

    .scroll-hint-icon:after {
        top: 15px !important;
        background-image: url(../img/icon/icon_arrow.svg) !important;
    }

    /*----------tableOfContent（第〇章）----------*/
    .toc_chapter {
        padding: 30px;
    }

    /*----------メリット＆デメリット----------*/
    .merit_box .title,
    .demerit_box .title{
        font-size: 24px;

    }
    .merit_box .title span,
    .demerit_box .title span{
        padding: 0 0 0 60px;
        margin-left: -70px;
    }

    /*----------補足----------*/
    #hosoku{
        padding: 25px;
        margin-bottom: 40px;
    }

    /*----------はじめに----------*/
    .firstly{
        padding: 30px;
        margin: 0 0 40px;

    }
    /*----------【メニュー】検索フォーム----------*/
    /*検索ボックス*/
    #sbox {
        width: 69%;
    }

    /*検索ボタン*/
    #sbtn {
        width: 30%;
    }
    /*---------- PRボックス ----------*/
    .pr_box{
        padding: 20px;
    }
    .pr_box:after{
        font-size: 16px;
        padding: 4px 12px;
    }
    .pr_box picture{
        margin: 0 20px 0 0;
        width: 88px;
    }
    .pr_txt{
        line-height: 1.7em !important;
    }
    /*---------- infobox ----------*/
    .info_box{
        padding: 20px;
        border-radius: 16px;

    }
}

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

    single

------------------------------------------------------------*/
article.post_detail {}

/*----------title----------*/
h1.post_title {
    font-size: 44px;
    letter-spacing: 1px;
    color: #444845;
    line-height: 1.4;
    font-weight: 900;
    text-align: center;
    display: block;
    margin: 0px auto 20px;
    max-width: 1100px;
    box-sizing: border-box;
    font-feature-settings:"palt";
    letter-spacing: 0.07em;
    padding: 0 80px;
}

#page h1.post_title{
    padding: 40px 0 0;
}
h1.terms{
    padding: 0 !important;
}

.post_body h2 {
    font-size: 30px;
    line-height: 1.4;
    font-weight: bold;
    margin: 100px 0 40px;
    text-align: center;
    position: relative;
    background: #444845;
    color: #fff;
    padding: 20px 15px 18px;
    border-radius: 15px;
    border: 2px solid #444845;
}
.post_body_terms h2:first-of-type{
    margin: 70px 0 35px;
}

#page .post_body h2 {
    margin-top: 80px;
}

.post_body h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 3px;
    margin-left: -30px;
    background-color: #444845;
    display: none;
}

.post_body h3 {
    color: #444845;
    margin: 100px 0 40px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: bold;
    position: relative;
    /* padding-bottom: 5px; */
    padding: 18px 20px 16px;
    border-bottom: 2px solid #444845;
    border-top: 2px solid #444845;
    /* border-radius: 100px; */
    text-align: center;
}

.post_body h4 {
    color: #444845;
    font-size: 24px;
    line-height: 1.4;
    font-weight: bold;
    margin: 60px 0 30px;
    padding: 6px 0;
}

/*----------post_head----------*/
.post_head {
    padding: 30px 0;
    text-align: center;
    background: #fff;
}
#page .post_head {
    padding: 30px 0;
    margin: 0 -150px;
}
#single .post_detail_terms .post_head {
    padding-bottom: 200px;
}

.post_head.noimage {
    padding-top: 40px;
}

.post_eyecatching {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 300px;
    margin-bottom: 60px;
}
.post_meta_single{
    display: block;
    text-align: center;
}
.post_meta_single .post_category{
    display: inline-block;
    /* margin-right: 15px; */
}
.post_meta_single .post_category a {
    display: block;
    font-weight: bold;
    font-size: 15px;
    background: #388c78;
    color: #fff;
    /*color: #388c78;*/
    /*border: 1px solid #388c78;*/
    line-height: 1;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 100px;
}
.post_meta_single .post_date,.post_meta_single .post_date_re{
    margin-left: 5px;
    font-size: 15px;
}

/*----------content_inner----------*/
.content_inner {
    padding: 60px;
}

/*----------post_tag----------*/
.post_tag {
    display: block;
    margin-bottom: 20px;
}

.post_tag span {
    margin: 0 8px 8px 0;
    display: inline-block;
}

/*.post_tag span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f02b";
    margin-right: 5px;
    color: #77b27c;
}*/

.post_tag a {
    color: #444845;
    text-decoration: none;
    font-size: 15px;
    /* background: #d6e7e0; */
    padding: 6px 20px;
    border-radius: 100px;
    border: 2px solid #d6e7e0;
    display: inline-block;
    box-sizing: border-box;
}

/*----------sns----------*/
article.post_detail .sns {
    margin-bottom: 60px;
}

article.post_detail .sns ul {
    margin-left: 0;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    /* border: 2px solid #d6e7e0; */
}
.sns_title {
    color: #444845;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    text-align: center;
    /* border-top: 1px solid #d7d7d7; */
    /* border-bottom: 1px solid #d7d7d7; */
    margin-bottom: 15px;
    font-weight: bold;
}

/*----------top_sns----------*/
#top_sns {}

.top_sns_title {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
}

#top_sns ul.post-bottom-social li {
    width: 12%;
    margin-right: 1.4%;
    margin-bottom: 0;
}

#top_sns ul.post-bottom-social li:last-child {
    margin-right: 0;
}

#top_sns a {
    background: transparent;
    height: inherit;
    line-height: 1;
}

#top_sns.sns i:before {
    line-height: inherit;
}

#top_sns .facebook-box i:before {
    color: #5e69b0;
}

#top_sns .twitter-box i:before {
    color: #3d95c4;
}

#top_sns .hatebu-box i:before {
    color: #457ebe;
}

#top_sns .googleplus-box i:before {
    color: #d0543c;
    font-size: 17px;
}

#top_sns .pocket-box i:before {
    color: #e05251;
}

#top_sns .line-box i:before {
    color: #6ab155;
}

article.post_detail .post_image {
    position: relative;
    margin-bottom: 30px;
}

article.post_detail .post_image figure {
    margin: 0;
    padding: 0;
}

article.post_detail .post_image figure img {
    width: 100%;
    margin: 0;
}

/*----------related_post----------*/
.cont_related_post .post_title, .cont_specified_post .post_title, .cont_popular_post .post_title{
    margin-bottom: 0;
}

.cont_related_post, .cont_specified_post, .cont_popular_post{
    margin-bottom: 40px;
}

.cont_related_post h2 {
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
    /* line-height: 25px; */
}
.cont_related_post h2:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f15c";
    font-size: 34px;
    line-height: 28px;
    margin-right: 11px;
    vertical-align: top;
    margin-top: -4px;
}

.cont_related_post li {
    float: left;
    width: 50%;
    margin-bottom: 10px;
}

.cont_related_post li a {
    display: block;
    font-size: 13px;
    line-height: 22px;
    padding-right: 15px;
    text-decoration: none;
    color: #444845;
}

.cont_related_post li a:hover {
    text-decoration: underline;
}

.cont_related_post li span {
    display: block;
    float: left;
    width: 140px;
}

.cont_related_post li .post_title {
    color: #222;
    display: block;
    padding-left: 150px;
}

#single .cont_related_post .post_meta{
    display: none;
}
#single .post_list .post_title{
/*    margin-bottom: 15px;*/
}

/*----------cont_specified_post（指定の記事）----------*/
.cont_specified_post {
    padding: 30px 0 0;
}

.cont_specified_post h2 {
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: bold;
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
    /* line-height: 25px; */
}
.cont_specified_post h2:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f672";
    font-size: 34px;
    line-height: 30px;
    margin-right: 0;
    vertical-align: top;
    /* width: 25px; */
    /* height: 25px; */
    margin-top: -4px;
}

#single .cont_specified_post .post_meta{
    display: none;
}
#single .post_list .post_inner{
    padding-bottom: 0;
}

/*----------cont_popular_post（人気の記事）----------*/
.cont_popular_post {
/*    padding: 30px 0 0;*/
}

.cont_popular_post h2 {
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
    /* line-height: 25px; */
}
.cont_popular_post h2:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f005";
    font-size: 33px;
    line-height: 20px;
    margin-right: 5px;
    vertical-align: top;
    /* width: 25px; */
    /* height: 25px; */
    margin-top: -4px;
}

#single .cont_popular_post .post_meta{
    display: none;
}
#single .post_list .post_inner{
    padding-bottom: 0;
}

/*----------scroll----------*/
.scroll {
    box-sizing: border-box;
    border: 1px solid #444845;
    overflow: auto;
    /*tableをスクロールさせる*/
    white-space: nowrap;
    /*tableのセル内にある文字の折り返しを禁止*/
}

.scroll::-webkit-scrollbar {
    /*tableにスクロールバーを追加*/
    height: 5px;
}

.scroll::-webkit-scrollbar-track {
    /*tableにスクロールバーを追加*/
    background: #F1F1F1;
}

.scroll::-webkit-scrollbar-thumb {
    /*tableにスクロールバーを追加*/
    background: #BCBCBC;
}

.scroll table {
    /*width: 620px !important;*/
    margin-bottom: 0 !important;
}

/*----------entryBox（あわせて読みたい）----------*/
.entry-box {
    position: relative;
    padding: 15px 15px;
    border: 2px solid #353535;
    background-color: #f9f9f9;
    margin-bottom: 1.5em;
    margin-top: 2.2em;
}

#content .entry-box ul {
    margin-bottom: 0px !important;
}

#content .entry-box a {
    color: #444845;
}

.entry-box::before {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 0 10px 0 26px;
    content: "あわせて読みたい";
    background-color: #353535;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
}

.entry-box::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    top: -15px;
    left: 5px;
    width: 28px;
    height: 28px;
    background-color: #353535;
    border-radius: 14px;
    line-height: 25px;
    text-align: center;
    content: "\f00c";
    font-size: 17px;
    color: #fff;
}


/*----------商品ボックス----------*/
.product_box{
    border: 1px solid #388c78;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 1.7em;
}
.product_img{
    width: 160px;
    padding-right: 25px;
}
.product_img img{
    width: 100%;
    margin-bottom: 0 !important;
}
.product_img img.radius{
    border-radius: 40px;
}
.product_txt{

}
.product_title{
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: bold;
    margin-bottom: 5px !important;
}
.product_sub{
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}
.product_price{
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}
.product_price .price{
    color: #BD1F2B;
}
.product_price .tax{
    font-size: 13px !important;
}
.product_btn {
    margin-bottom: 0 !important;
}
.product_btn a{
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    background: #388c78;
    text-align: center;
    margin-right: 15px;
    box-sizing: border-box;
    padding: 15px 30px 18px;
    border-radius: 12px;
    box-shadow: 0 -4px 0 rgba(0,0,0,0.2) inset;
}

/*----------あわせて読みたい（コンテンツ内関連記事）----------*/
.related_link {
    position: relative;
    margin: 70px 0 30px;
    padding: 45px 20px 15px;
    border: 2px solid #388c78;
    background-color: #f9f9f9;
    border-radius: 12px;
}
.related_link ul{
    margin-bottom: 0;
}
.related_link li:last-child {
    margin-bottom: 0;
}
.post_body .related_link li:after{
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: '\f0a9';
    position: absolute;
    left: 3px;
    top: 2px;
    font-size: 20px;
    line-height: 1;
    color: #388c78;
}
.related_link a{
    color: #333;
}
.related_link::before {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 15px 1px;
    content: "あわせて読みたい";
    background-color: #388c78;
    color: #fff;
    font-weight: bold;
    border-radius: 8px 0 12px 0;
    font-size: 17px;
}

/*----------テキストリンク（コンテンツ内）----------*/
.text_link:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: '\f0a9';
    font-size: 70px;
    line-height: 1;
    font-size: 18px;
    color: #388c78;
    margin-right: 5px;
}
/*----------関連用語----------*/
.post_body .post_related_terms{
    margin-top: 64px;
    text-align: left;
}
.post_related_terms span{
    display: inline-block;
}
.post_related_terms span:after{
    content: ",";
    color: #333;
    margin: 0 5px;
}
.post_related_terms span:last-child:after{
    content: "";
}

/*----------よくある質問(Q&A)----------*/
#box_qa{
    margin-bottom: 35px;
}
#box_qa .qa_item{
    margin-bottom: 35px;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
}
#box_qa .question{
    margin: 0;
    padding: 15px 20px 15px 36px;
    border: none;
    position: relative;
    text-align: left;
    border-radius: 15px;
    background: #deede6;
}
#box_qa .question:before{
    content: "Q";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: #fff;
    background: #388c78;
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    top: 20px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px #fff;
    border-radius: 50%;
}
#box_qa .question:after{
    content: "A";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: #fff;
    background: #d84808;
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    bottom: -80px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px #fff;
    border-radius: 50%;
    z-index: 999;
}
#box_qa .answer{
    margin: 0px 0 0 16px;
    padding: 20px;
    position: relative;
    /* background: #fff; */
    border-radius: 15px;
    /* border: 2px solid #333; */
}
#box_qa .answer p:last-child{
    margin-bottom: 0;
}


/*
#box_qa{
    margin-bottom: 35px;
}
#box_qa .item{
}
#box_qa .question{
    margin: 0 0 10px;
    padding: 15px 50px 13px 68px;
    border:2px solid #333;
    box-shadow: 0 -4px 0 #eee inset;
    position: relative;
    cursor: pointer;
    text-align: left;
    border-radius: 15px;
}
#box_qa .question:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f059";
    font-size: 35px;
    line-height: 1;
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -18px;
    color: #388c78;
}
#box_qa .answer{
    margin: 0;
    padding: 30px 0;
}
#box_qa .question span {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: 1px;
}

#box_qa .question span::before,
#box_qa .question span::after {
    content: '';
    display: block;
    width: 20px;
    height: 4px;
    border-radius: 5px;
    background: #388c78;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#box_qa .question span::after {
    background: #388c78;
    transform: translateY(-50%) rotate(90deg);
    transition: 0.5s;
}

#box_qa .question .active::after {
    transform: rotate(0);
    transition: 0.5s;
}
*/



/*----------アドセンス----------*/
/*top*/
.post_body .ad_topbody{
}
/*center*/
.post_body .ad_inbody{
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    /* border-radius: 20px; */
}
.post_body .ad_inbody_label{
    margin: 64px 0 4px ;
    text-align: center;
    font-size: 14px;
    color: #aaa;
}

/*bottom*/
.ad_bottombody{
    margin: 64px 0;
}
.ad_bottombody_label{
    margin: 0 0 8px;
    text-align: center;
    font-size: 15px;
    color: #444845;
}
.ad_bottombody ul{
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ad_bottombody li{
    width: 49%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
}
/*
.ad_bottombody img{
    margin: 0;
}
*/






@media screen and (max-width: 980px) {



    .post_detail {}

    #page .post_detail {
        padding: 0;
    }

    /*postDtail title*/
    h1.post_title {
        font-size: 26px;
        line-height: 1.4;
        margin: 0 0 15px;
        padding: 0 20px;
    }
    #page h1.post_title {
        padding: 0;
        margin: 0;
    }

    .post_body h2 {
        font-size: 26px;
        margin: 80px 0 30px;
        padding: 15px 15px 13px;
    }

    .post_body_terms h2:first-of-type{
        margin: 40px 0 30px;
    }

    .post_body h3 {
        font-size: 24px;
        margin: 80px 0 30px;
        padding: 15px 20px 13px;
    }

    .post_body h4 {
        font-size: 24px;
    }

    /*----------post_head----------*/
    .post_detail .post_head {
        padding: 20px 0;
        margin-bottom: 15px;
    }
    #single .post_detail_terms .post_head {
        padding: 20px 0;
        margin-bottom: 15px;
    }

    #page .post_head {
        margin: 0;
        padding: 20px;
    }

    .post_eyecatching {
        height: 180px;
        margin-bottom: 20px;
    }
    .post_meta_single{
        margin: 0;
    }
    .post_meta_single .post_category{
    }
    .post_meta_single .post_date,.post_meta_single .post_date_re{
        font-size: 15px;
    }


    /*----------sns----------*/
    article.post_detail .sns {
        padding: 0;
        margin-bottom: 40px;
    }
    article.post_detail_terms .sns {
        margin-bottom: 30px;
    }
    article.post_detail .sns_title {
        font-size: 17px;
    }

    ul.post-bottom-social {
        padding: 0;
    }

    ul.post-bottom-social li {}

    ul.post-bottom-social li:last-child {}

    ul.post-bottom-social li div {}

    /*----------post_body----------*/
    .post_body {
        margin-bottom: 20px;
        /* margin-top: -50px; */
    }

    .post_body section {
        padding: 40px 20px;
    }

    .post_body .cont_sec {
        padding: 40px 20px;
    }

    article.post_detail .post_image {
        margin-bottom: 0;
    }

    /*----------content_inner----------*/
    .content_inner {
        padding: 20px;
    }

    /*----------post_tag----------*/
    .post_tag {
        padding: 0;
    }

    /*----------related_post----------*/
    .cont_related_post h2 {
        font-size: 24px;
        margin: 0 0 15px;
        padding: 5px 15px 5px 13px;
    }
    .cont_related_post h2:before {
        line-height: 24px;
    }

    .cont_related_post li {
        width: 100%;
        box-sizing: border-box;
    }

    .cont_related_post li span {
        width: 120px;
    }

    .cont_related_post li .post_title {
        padding-left: 130px;
    }

    /*----------specified_post----------*/
    .cont_specified_post h2 {
        font-size: 24px;
        margin: 0 0 15px;
        padding: 5px 15px 5px 13px;
    }
    .cont_specified_post h2:before {
        line-height: 24px;
    }
    .cont_specified_post li {
        width: 100%;
        box-sizing: border-box;
    }
    .cont_specified_post li span {
        width: 120px;
    }
    .cont_specified_post li .post_title {
        padding-left: 130px;
    }

    /*----------popular_post----------*/
    .cont_popular_post h2 {
        font-size: 24px;
        margin: 0 0 15px;
        padding: 5px 15px 5px 13px;
    }
    .cont_popular_post h2:before {
        line-height: 24px;
    }
    .cont_popular_post li {
        width: 100%;
        box-sizing: border-box;
    }
    .cont_popular_post li span {
        width: 120px;
    }
    .cont_popular_post li .post_title {
        padding-left: 130px;
    }

    /*----------商品ボックス----------*/
    .product_img{
        width: 140px;
        padding-right: 20px;
    }
    .product_img img{
        width: 140px;
    }
    .product_title{
        margin-bottom: 2px !important;
    }
    .product_sub{
        margin-bottom: 2px !important;
    }
    .product_btn{
    }
    .product_btn a{
        width: 100%;
        margin: 0 0 10px;
        padding: 14px 10px 16px;
    }
    .product_btn a:last-child{
        margin: 0;
    }

    /*----------よくある質問(Q&A)----------*/
    #box_qa .question{
        font-size: 21px;
    }
    /*#box_qa .question {
        padding: 15px 40px 13px 60px;
    }
    #box_qa .question:before {
        left: 14px;
    }*/

    /*----------sns----------*/
    article.post_detail .sns ul {
        padding: 20px;
    }
    ul.post-bottom-social li a{
        width: 90px;
    }

    /*----------アドセンス----------*/
    .ad_bottombody li{
        width: 100%;
    }



}

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

    archive（一覧）

------------------------------------------------------------*/
/*----------title----------*/
#archive h1 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

@media screen and (max-width: 980px) {

    /*----------title----------*/
    #archive h1 {
        margin-bottom: 20px;
    }

    .sec_archive {
    }
}

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

    記事スタイル

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



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

    トップページ

------------------------------------------------------------*/
/*----------title----------*/
#index h2 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

#index h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 3px;
    margin-left: -30px;
}

@media screen and (max-width: 980px) {
    #index h2 {
        font-size: 24px;
        margin-bottom: 25px;
        padding-bottom: 0px;
    }
}

/*----------slide----------*/
#main_slide {
    width: 100%;
    height: 400px;
    margin: 0 auto;
}
#main_slide .swiper-slide img {
    width: 100%;
}
#main_slide .swiper-button-prev,
#main_slide .swiper-button-next{
    background: none;
    height: 70px;
    margin-top: -35px;
}
.swiper-button-prev:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f104";
    font-size: 70px;
    line-height: 1;
}
.swiper-button-next:before{
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f105";
    font-size: 70px;
    line-height: 1;
}
#main_slide .swiper-pagination-bullet-active{
    background: #000;

}
/*-----スライド-----*/
.swiper-container{
    width: 100%;
    height: 400px;
}
.swiper-slide{
    width: 100%;
    height: 400px;
    background-position: 0 0 ;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}
.swiper-slide a{
    padding: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.swiper-slide.slide1{
    background-image: url(https://syukatsu-life.com/wp-content/themes/blog/img/top/top_slide1.jpg);
}
.swiper-slide.slide2{
    background-image: url(https://syukatsu-life.com/wp-content/themes/blog/img/top/top_slide2.jpg);
}
.swiper-slide .txt span{
    display: inline-block;
    background: #444845;
    font-size: 50px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    padding: 15px 20px 15px;
    margin-bottom: 10px;
}
.swiper-slide .txt1 span{
    margin-bottom: 10px;
}



@media screen and (max-width: 980px) {
    #main_slide {
        width: 100%;
        height: 200px;
        margin-bottom: 0;
    }
    /*-----スライド-----*/
    .swiper-container{
        height: 200px;
    }
    .swiper-slide{
        height: 200px;
    }
    .swiper-slide a{
        padding: 40px;
    }
    .swiper-slide.slide1{
        background-image: url(https://syukatsu-life.com/wp-content/themes/blog/img/top/top_slide1_sp.jpg);
    }
    .swiper-slide.slide2{
        background-image: url(https://syukatsu-life.com/wp-content/themes/blog/img/top/top_slide2_sp.jpg);
    }
    .swiper-slide .txt span{
        font-size: 28px;
        padding: 10px;
    }
}

/*----------banner----------*/
.sec_banner {
    margin-bottom:60px}

.top_banner li {
    float: left;
/*
    margin-right: 3.5%;
    width: 31%;
*/
    margin-right: 4%;
    width: 48%;
    overflow: hidden;
}

.top_banner img {
    width: 100%;
}

.top_banner li:last-child {
    margin-right: 0;
}


/*----------トップの章カテゴリ----------*/
.sec_topchapter{
    background: #e0e9e5;
    padding: 80px 0 70px;
/*    margin-bottom:20px;*/
}
.sec_topchapter ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.sec_topchapter li{
    width: 22%;
    margin-bottom: 2%;
    background: #fff;
    text-align: center;
    border-radius: 20px;
    box-shadow:0 4px 0 0 #a8cabd;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.sec_topchapter li:hover{
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}
.sec_topchapter a{
    width: 100%;
    height: 100%;
    padding: 30px 0 40px;
    display: block;
    text-decoration: none;
    font-weight:bold;
    color: #333;
    box-sizing: border-box;
}
.sec_topchapter ul li img{
    margin-bottom: 10px;
    display: inline-block;
    text-align: center;
    max-width: 40%;
}
.sec_topchapter ul li span{
    display: block;
    line-height: 1.3;
    text-align: center;
}


@media screen and (max-width: 980px) {
    .sec_topchapter{
        padding: 30px 0;
        margin-bottom:0;
    }
    .sec_topchapter a{
        padding: 20px 10px;
    }
    .sec_topics {
        padding: 15px;
        background-color: #f3f3f3;
    }

    .sec_topics .inner {}

    .top_banner li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .top_banner li:nth-child(2n) {
        margin-right: 0;
    }

    .top_banner li:last-child {
        margin-bottom: 0;
    }
}

/*----------post_list----------*/
.sec_post {
    padding: 40px 0 80px;
    background: #e0e9e5;
}
.sec_post_popular{
    padding: 40px 0;
    background: #fff;
}

@media screen and (max-width: 980px) {
    .sec_post {
        padding: 30px 0 0;
    }
    .sec_post_popular {
        padding: 30px 0 0;
    }

    /*----------トップの章カテゴリ----------*/
    #index .sec_topchapter .content_warp{
        padding: 0 20px;
    }
    .sec_topchapter li{
        width: 47%;
        margin-bottom: 4%;
    }

}

/*----------一覧ボタン----------*/
.top_btn{
    display: block;
    text-align: center;
    width: 100%;
}
.top_btn a{
    width: 50%;
    margin: 0 auto;
    padding: 12px;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    border: 1px solid #444845;
    box-sizing: border-box;
    position: relative;
    -moz-box-shadow: 0 2px 0 0 #444845;
    -webkit-box-shadow: 0 2px 0 0 #444845;
    box-shadow: 0 2px 0 0 #444845;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    border-radius: 100px;
    color: #333;
    text-decoration: none;
}

.top_btn a:hover{
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}
@media screen and (max-width: 980px) {
    .top_btn a{
        width: 70%;
    }
}


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

    ガイド一覧

------------------------------------------------------------*/
.guide_step{
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 2px solid #388c78;
    margin: 0 0 32px;
}
.guide_step h2{
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
    position: relative;
    padding-left: 64px;
}
.guide_step h2 .step_i{
    font-size: 14px;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    background: #388c78;
    display: inline-block;
    padding: 6px 10px;
    margin-right: 8px;
    border-radius: 100px;
    position: absolute;
    left: -3px;
    top: -1px;
}
.guide_step ul{
    counter-reset: number 0;
}
.guide_step ul li{
    /* margin-bottom: 12px; */
    display: block;
    position: relative;
    padding: 6px 0 6px 56px;
    font-size: 16px;
    line-height: 1.4;
    /* border-bottom: 1px solid #e0e9e5; */
}
.guide_step ul li:last-child{
    margin-bottom: 0;
    border: none;
}
.guide_step ul li:before{
    counter-increment: number 1;
    content: counter(number) "";
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    color: #388c78;
    font-weight: bold;
}
.guide_step ul li a{
    color: #444845;
}
.step1 ul li:before{
    content: "1-" counter(number);
}
.step2 ul li:before{
    content: "2-" counter(number);
}
.step3 ul li:before{
    content: "3-" counter(number);
}
.step4 ul li:before{
    content: "4-" counter(number);
}
.step5 ul li:before{
    content: "5-" counter(number);
}
.step6 ul li:before{
    content: "6-" counter(number);
}
.step7 ul li:before{
    content: "7-" counter(number);
}
.step8 ul li:before{
    content: "8-" counter(number);
}


@media screen and (max-width: 980px) {
    .guide_step{
        border-radius: 16px;
        padding: 20px;
        margin: 0 0 20px;
    }
    .guide_step h2{
        font-size: 22px;
        margin-bottom: 16px;
    }
    .guide_step h2 .step_i{
    }
}

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

    用語集一覧

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

#terms_top h2{
    font-size: 32px;
    line-height: 1.4;
    font-weight: bold;
    margin: 100px 0 35px;
    text-align: center;
    position: relative;
    background-color: #444845;
    color: #fff;
    padding: 15px 15px 13px;
    border-radius: 15px;
}
#terms_top p{
    margin-bottom: 1.7em;
}
/*カテゴリから探す*/
.terms_cat_list{
    display: flex;
    flex-wrap : wrap;
}
.terms_cat_list li {
    width: 24%;
    margin-right: 1.3%;
    margin-bottom: 3%;
    background-color: #fff;
    border: 1px solid #388c78;
    box-sizing: border-box;
    position: relative;
    -moz-box-shadow: 0 2px 0 0 #388c78;
    -webkit-box-shadow: 0 2px 0 0 #388c78;
    box-shadow: 0 2px 0 0 #388c78;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    border-radius: 12px;
}

.terms_cat_list li a{
    display: block;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: bold;
}
.terms_cat_list li:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

/*50音順で探す*/
.syllabary{
    display: flex;
    flex-wrap : wrap;
}
.syllabary ul{
    width: 9%;
    margin-right: 1.1%;
}
.syllabary ul:last-child{
    margin-right: 0;
}
.syllabary li {
    margin-bottom:15%;
    border: 1px solid #388c78;
    box-sizing: border-box;
    position: relative;
    -moz-box-shadow: 0 2px 0 0 #388c78;
    -webkit-box-shadow: 0 2px 0 0 #388c78;
    box-shadow: 0 2px 0 0 #388c78;
    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    border-radius: 12px;
    background: #fff;
}

.syllabary li:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

.syllabary li a,.syllabary span{
    display: block;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    text-decoration: none;
    font-weight: bold;
    /* background: #fff; */
}

@media screen and (min-width: 981px) {
    .terms_cat_list li:nth-child(4n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 980px) {
    #terms_top h2 {
        font-size: 26px;
        margin: 60px 0 30px;
    }

    /*カテゴリから探す*/
    .terms_cat_list li {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;
    }
    .terms_cat_list li:nth-child(even) {
        margin-right: 0;
    }

    /*50音順で探す*/
    .syllabary ul{
        width:100%;
        display: flex;
        margin: 0;
    }
    .syllabary li{
        width:18%;
        margin: 0 2.5% 3% 0;
    }
    .syllabary li:last-child{
        margin-right: 0;
    }
}

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

    用語集（詳細）

------------------------------------------------------------*/
h1.terms{
    margin-bottom: 35px;
}
.h1_top_terms{
    text-align: center;
    margin-bottom: 20px;
}
.h1_top_terms a{
    display: inline-block;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    /* border: 1px solid #388c78; */
    line-height: 1;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 100px;
    background: #388c78;
}
.term_mean{
    background: #fff;
    border: 2px solid #444845;
    padding: 40px;
    border-radius: 20px;
    margin: 0 0 60px;
    position: relative;
}

.post_body .yomi{
    text-align: left;
    font-size: 17px;
    margin: -200px 0 40px;
}
.post_body_terms .term_mean h2{
    margin: -40px 0 30px;
    border-radius: 0;
    border-radius: 12px 12px 0 0;
    background: #fff;
    font-size: 30px;
    text-align: center;
    color: #444845;
    border:none;
    border-bottom: 2px solid #444845;
    font-weight: bold;
}
.post_body_terms .term_mean p{
    font-size: 17px;
}
.post_body_terms .term_mean p:last-child{
    margin-bottom: 0;
}

#single.terms_detail .post_meta_single .post_category{
    margin: 0;
}

.terms_detail .post_meta_single{
    margin-bottom: 30px;
}

.terms_bt_rel {
    border-top: 2px dotted #d6e7e0;
    border-bottom: 2px dotted #d6e7e0;
    padding: 24px 0;
    margin-top: 64px;
}
.post_body .terms_bt_rel_title{
    font-weight: bold;
    margin-bottom: 4px;
}
.post_body .terms_bt_rel ul{
    margin-bottom: 0;
}
.post_body .terms_bt_rel ul li {
    padding-left: 24px;
    margin-bottom: 0;
}
.post_body .terms_bt_rel ul li:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f111";
    position: absolute;
    left: 8px;
    top: 10px;
    font-size: 8px;
    line-height: 1;
    color: #388c78;
}


.single_terms_meta{
    display: flex;
    margin-bottom: 35px;
    justify-content: space-between;
}
.single_terms_cat{
    border:1px solid #388c78;
    padding: 10px;
    width: 48%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 100px;
}
.single_terms_syllabary{
    border:1px solid #388c78;
    padding: 10px;
    width: 48%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 100px;
}


@media screen and (max-width: 980px) {
    h1.terms{
        margin-bottom: 15px;
        font-size: 30px;
    }
    .h1_top_terms{
        margin-bottom: 15px;
    }
    .term_mean{
        padding: 20px;
        margin: 0 0 40px;
    }
    .post_body .yomi{
        text-align: left;
    }
    .post_body_terms .term_mean h2{
        margin: -20px 0px 16px;
        font-size: 22px;
    }
    .term_mean p{
        font-size: 17px;
        line-height: 1.9;
    }
    .post_body .yomi{
        margin-bottom: 20px;
        font-size: 16px;
        margin: -230px 0 20px;
        line-height: 1.8;
    }
    .post_body_terms #toc{
        margin-top: 30px;
    }
    .single_terms_meta a{
        font-size: 17px;
        padding: 8px 10px;
    }
}




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

    スマホ固定メニュー（モーダルウィンドウ）

------------------------------------------------------------*/
.remodal-nav {
    margin-bottom: 15px;
}

.remodal-nav li a {
    display: block;
    padding: 5px 10px;
    box-sizing: border-box;
    text-decoration: none;
    background-color: #d7d7d7;
    color: #444845;
    position: relative;
    border-bottom: 1px solid #fff;
}

.remodal-nav li a:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f105";
    font-size: 14px;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
}


/*follow*/
.remodal_follow{
    text-align: center;
}
.remodal_follow_ttl {
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

.remodal_follow li {
    display: inline-block;
    margin-right: 15px;
}

.remodal_follow li a {
    display: block;
    text-decoration: none;
    width: 70px;
    text-align: center;
}

.remodal_follow .follow_icon {
    width: 55px;
    height: 55px;
    text-align: center;
    display: inline-block;
    border-radius: 100px;
}

.remodal_follow i {
    font-size: 22px;
    line-height: 55px;
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 55px;
    height: 55px;
}

.remodal_follow span.follow_txt {
    color: #444845;
    text-align: center;
    display: block;
    font-size: 15px;
}

.remodal_follow .twitter .follow_icon {
    background-color: #3d95c4;
}

.remodal_follow .facebook .follow_icon {
    background-color: #5e69b0;
}


@media only screen and (max-width: 980px) {

    /*gm*/
    .remodal #gm {
        border: 1px solid #d6e7e0;
        margin-bottom: 20px;
    }



    /*----------remodal_submenu----------*/
    .remodal_submenu{
        margin-bottom: 20px;
    }
    .remodal_submenu li a{
        position: relative;
        padding-left: 15px;
        line-height: 1;
    }
    .remodal_submenu li a:hover{
        text-decoration: underline;
    }
    .remodal_submenu li a:before{
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f0da";
        font-size: 16px;
        line-height: 1;
        margin-top: -9px;
        left: 0;
        top: 50%;
        position: absolute;
        color: #444845;
    }
}

/* ----------モーダルウィンドウ---------- */

/* Hide scroll bar */
html.remodal-is-locked {
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}

/* Anti FOUC */
.remodal,
[data-remodal-id] {
    display: none;
}


/* Necessary styles of the overlay */
.remodal-overlay {
    position: fixed;
    z-index: 9999;
    top: -5000px;
    right: -5000px;
    bottom: -5000px;
    left: -5000px;
    display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;
    overflow: auto;

    text-align: center;

    -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
    display: inline-block;

    height: 100%;
    margin-left: -0.05em;

    content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
    position: relative;

    outline: none;

    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.remodal-is-initialized {
    /* Disable Anti-FOUC */
    display: inline-block;
}

/*----------Remodal's default mobile first theme----------*/
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

/* Default theme styles of the overlay */
.remodal-overlay {
    /*    background: rgba(43, 46, 56, 0.9);*/
    background: rgba(0, 0, 0, .8);
    ;
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
    -webkit-animation-name: remodal-overlay-opening-keyframes;
    animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
    -webkit-animation-name: remodal-overlay-closing-keyframes;
    animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */
.remodal-wrapper {
    padding: 0;
    box-sizing: border-box;
}

/* Default theme styles of the modal dialog */
.remodal {
    box-sizing: border-box;
    width: 100%;
    padding: 70px 30px 30px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #2b2e38;
    background: #fff;
    border: 4px solid #388c78;
    height: 100%;
    box-sizing: border-box;
    /* max-height: 100%; */
}

.remodal_inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: scroll;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
    -webkit-animation-name: remodal-opening-keyframes;
    animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
    -webkit-animation-name: remodal-closing-keyframes;
    animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
    vertical-align: middle;
}

/* Close button */
.remodal-close {
    position: absolute;
    top: 0;
    left: 0;
    /*display: block;*/
    display: none;
    overflow: visible;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    text-decoration: none;

    color: #95979c;
    border: 0;
    outline: 0;
    background: transparent;
}

.remodal-close:hover,
.remodal-close:focus {
    color: #2b2e38;
}

.remodal-close:before {
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
    font-size: 25px;
    line-height: 35px;

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 35px;

    content: "\00d7";
    text-align: center;
}

/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
    content: "\00d7";
    font: inherit;
    display: inline-block;
    overflow: visible;
    width: 100%;
    margin: 0;
    padding: 11px 3px 10px;
    cursor: pointer;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 0;
    outline: 0;
    line-height: 1;
}

.remodal-confirm:before,
.remodal-cancel:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f00d";
    margin-right: 10px;
    font-size: 20px;
    line-height: 1.2;
    vertical-align: middle;
}

.remodal-confirm {
    color: #fff;
    background: #81c784;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
    background: #66bb6a;
}

.remodal-cancel {
    color: #fff;
    background-color: #388c78;
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
    background: #fff;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*----------Keyframes----------*/
@-webkit-keyframes remodal-opening-keyframes {
    from {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);

        opacity: 0;
    }

    to {
        -webkit-transform: none;
        transform: none;

        opacity: 1;

        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes remodal-opening-keyframes {
    from {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);

        opacity: 0;
    }

    to {
        -webkit-transform: none;
        transform: none;

        opacity: 1;

        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@-webkit-keyframes remodal-closing-keyframes {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);

        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);

        opacity: 0;

        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes remodal-closing-keyframes {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);

        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);

        opacity: 0;

        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@-webkit-keyframes remodal-overlay-opening-keyframes {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes remodal-overlay-opening-keyframes {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes remodal-overlay-closing-keyframes {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes remodal-overlay-closing-keyframes {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*----------Media queries----------*/

@media only screen and (min-width: 641px) {
    .remodal {
        max-width: 700px;
    }
}

/*----------IE8----------*/
.lt-ie9 .remodal-overlay {
    background: #2b2e38;
}

.lt-ie9 .remodal {
    width: 700px;
}


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

  お問い合わせフォーム

------------------------------------------------------------*/
.contact_form {
    width: 100%;
}

.contact_form textarea,
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form input[type="url"] {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #d6e7e0;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #eef4f1 inset;
}

.contact_form select {
    padding: 5px;
    box-sizing: border-box;
}

.contact_form textarea {
    height: 200px;
}

.contact_form .form_label {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    position: relative;
}
.contact_form .require {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    color: #c00;
    margin-left: 10px;
}

.contact_form .form_item {
    margin-bottom: 50px;
}

.contact_form .annotation,
.contact_form .note{
    font-size: 11px;
    color: #999;
    margin-bottom: 0;
}

.contact_form .acceptance {
    display: block;
    padding: 30px 30px 0;
    font-size: 18px;
    text-align: center;
}

.contact_form .acceptance input[type="checkbox"] {
    transform: scale(1.25);
}

.form_btn {
    padding: 20px;
    text-align: center;
}

input#btn-conf,
input#btn-submit {
    -webkit-appearance: none;
    text-align: center;
    border-style: none;
    display: inline-block;
    width: 50%;
    background: #fff;
    border: 2px solid #444845;
    color: #444845;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, .2) inset;

    -webkit-transition: 0.3s ease-in-out;
    < -moz-transition: 0.3s ease-in-out;
    < -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

input#btn-conf:hover,
input#btn-submit:hover {
    cursor: pointer;
    background: #eee;
    color: #444845;
}

input#btn-back {
    -webkit-appearance: none;
    text-align: center;
    border-style: none;
    display: inline-block;
    width: 60%;
    background: #d7d7d7;
    border: none;
    color: #999;
    font-size: 20px;
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 4px;
}

div.wpcf7 .ajax-loader {
    display: block !important;
    margin: 10px auto !important;
}




@media only screen and (min-width: 981px) {
    article.postdetail .contact_form table th {
        width: 30%;
    }

    article.postdetail .contact_form table td {
        width: 70%;
    }
}

@media only screen and (max-width: 980px) {
    article.postdetail .contact_form table th {
        width: 35%;
    }

    article.postdetail .contact_form table td {
        width: 65%;
    }

    .contact_form input[type="file"] {
        display: inline-block !important;
        width: 100% !important;
        font-size: 12px !important;
    }

    .form_btn {
        padding: 0px;
    }
}



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

  信頼されるサイトとして

------------------------------------------------------------*/
/*-----writer_box（この記事を書いた人）-----*/
.writerbox {
    display: table;
    border: 2px solid #333;
    margin-bottom: 40px;
    margin-top: 80px;
    padding: 35px;
    /* border-radius: 16px; */
}

#writerbox_warp .writer_title {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 20px;
    margin-top: -14px;
}

#writerbox_warp .writer_title:after {
    position: absolute;
    content: "";
    width: 60px;
    height: 1px;
    background-color: #333;
    bottom: 0;
    left: 0;
}
#writerbox_warp .writer_title:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f5ad";
    font-size: 32px;
    line-height: 23px;
    margin-right: 11px;
    vertical-align: top;
    margin-top: -5px;
    line-height: 46px;
    display: none;
}

#writerbox_warp .writer_title .jp {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}

#writerbox_warp .writerbox_inner {
    display: table;
}

#writerbox_warp .writer_img {
    display: table-cell;
    width: 160px;
    vertical-align: top;
    text-align: center;
    box-sizing: border-box;
}

#writerbox_warp .writer_img img {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin-bottom: 0;
}

.writer_description {
    padding-left: 20px;
}

#writerbox_warp .writer_name {
    text-align: left;
    font-size: 22px;
    line-height: 1;
    color: #333;
    margin-bottom: 0;
    font-weight: bold;
    margin-bottom: 10px;
}

#writerbox_warp .writer_pos {
    text-align: left;
    color: #aaa;
    font-size: 16px;
    line-height: 1;
    font-weight: normal;
    margin-bottom: 20px;
}

#writerbox_warp .writer_txt p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

/*もっと見る*/
#writerbox_warp .more {
    margin-bottom: 0;
    border: 1px solid #ccc;
    font-size: 15px;
    line-height: 1;
    color: #aaa;
    padding: 8px 15px;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0px 2px 0 #ccc;

    /*hover*/
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

#writerbox_warp .more:hover {
    cursor: pointer;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

/*-----writer_box2（監修者情報）-----*/
#writerbox_warp.sup .writerbox_title2 {
    margin-bottom: 0;
    font-weight: bold;
}
#writerbox_warp.sup ul {
    margin-bottom: 0;
}


@media only screen and (max-width: 640px) {
    /*-----writer_box（この記事を書いた人）-----*/
    .writerbox {
        padding: 17px 25px 25px;
        margin-bottom: 25px;
        margin-top: 0;
    }
    #writerbox_warp .writerbox_inner{
        width: 100%;
        margin-bottom: 20px;
}
    #writerbox_warp .writer_img {
        width: 120px;
    }

    #writerbox_warp .writer_img img {
        width: 120px;
        height: 120px;
        border-radius: 60px;
    }

    #writerbox_warp .writer_title {
        font-size: 12px;
        margin-top: -6px;
        text-align: center;
    }
    #writerbox_warp .writer_title:after{
        left: 50%;
        margin-left: -30px;
    }

    .writer_description {
        display: table-cell;
        vertical-align: middle;
    }
    .writer_txt{
        display: block;
    }

    #writerbox_warp .writer_name {
        font-size: 22px;
    }

    #writerbox_warp .writer_pos {
        font-size: 15px;
        margin-bottom: 0;
    }

    #writerbox_warp .writer_txt p {
        font-size: 14px;
    }
    #writerbox_warp .writer_txt p:last-child {
        margin-bottom: 0;
    }

    /*-----writer_box2（監修者情報）-----*/
    .sup .writerbox{
        padding: 25px;
    }
    .sup .writer_txt {
        margin-bottom: 20px;
    }
}

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

  シミュレーションツール

------------------------------------------------------------*/
.simulation_box{
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 2em;
}
.simulation_box h3{
/*    border: 2px solid #444845;*/
    background: #444845;
    color: #fff;
    font-size: 24px;
    padding: 10px 40px;
    border-radius:100px;
    margin:0 0 30px;
    display: inline-block;
}

.post_body .tool_title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
}
/*----------共通----------*/
.simulation th{
    background: #e3e3e3;
    color: #444845;
    font-weight: bold;
    border: 1px solid #444845;
    padding: 10px 15px;
}
.simulation td{
    background: #fff;
    color: #444845;
    border: 1px solid #444845;
    padding: 10px 15px;
}
.simulation td:before,
.simulation th:before{
    display: none;
}

/*家計のバランスシート（資産＆負債）*/
.balancesheet{
    display:flex;
    justify-content:space-between;
}
.aseet_box{
    width: 48%;
}
.debt_box{
    width: 48%;
}
.aseet thead th{
    background: #a9d4ad;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}
.debt thead th{
    background: #e9baba;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}
.balancesheet tbody th{
    width: 50%;
    text-align: center;
}
.balancesheet tbody td{
    width: 50%;
    text-align: right;
}

.simulation .total_cell th,
.simulation .total_cell td{
    border-top: 2px solid #444845;
    vertical-align: middle;
    line-height: 1;
}
.total_cell td span{
    width: 70px;
    height: 40px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-right: 10px;
    text-align: right;
    vertical-align: middle;
    padding: 10px 0;
}

/*1年間に貯蓄できるおかね*/
.income thead th{
    background: #e3e3e3;
}
.expense thead th{
    background: #e3e3e3;
}

.income tbody td,
.expense tbody td{
    text-align: right;
}

.income .green th,
.expense .green th{
    background: #a9d4ad;
}
.income .red th,
.expense .red th{
    background: #e9baba;
}
.income th .notes,
.expense th .notes{
    color: #444845;
}

/*----------合計----------*/
.total_box{
    border:2px solid #444845;
    padding: 25px 20px 35px;
    text-align: center;
    border-radius: 20px;
}
.total_box p{
    display: inline-block;
    line-height: 1;
    font-size: 36px;
    color: #444845;
    margin: 0;
    font-weight: bold;
}
.post_body .total_box span{
    font-weight: bold;
    font-size: 50px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
    margin: 0 20px;
}
.post_body .total_box span:after{
    content: "";
    position: absolute;
    background: #e4713f;
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
}

/*----------form----------*/
.simulation input{
    /*reset*/
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    /*original*/
    margin-right: 10px;
    height: 40px;
    width: 70px;
    box-sizing: border-box;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    padding: 5px;
    border: 1px solid #999;
    border-radius: 8px;
    -moz-box-shadow: inset 0px 2px 0px 0px #e5e5e5;
    -webkit-box-shadow: inset 0px 2px 0px 0px #e5e5e5;
    box-shadow: inset 0px 2px 0px 0px #e5e5e5;
}

@media screen and (max-width: 980px) {
    .simulation_box{
        background:none;
        padding: 0;
        border-radius: 0;
    }
    .simulation_box h3{
        display: block;
        font-size: 23px;
        padding: 10px 20px;
        border:2px solid #444845;
        background: #fff;
        color: #444845;
        border-radius: 15px 15px 0 0;
    }
    .balancesheet{
        display: block;
    }
    .aseet_box{
        width: 100%;
    }
    .debt_box{
        width: 100%;
    }
    .aseet thead th{
        font-size: 20px;
    }
    .debt thead th{
        font-size: 20px;
    }

    /*貯蓄シミュレーション*/
    .income tbody th,
    .expense tbody th{
        width: 50px;
    }
    .income td,
    .expense td{
        padding: 10px;
        font-size: 16px;
    }
    .income th,
    .expense th{
        padding: 10px;
        font-size: 18px;
    }



    /**/
    .total_cell td span{
        width: 90px;
    }
    .total_box {
        padding: 20px 20px 20px;
    }
    .total_box p{
        font-size: 24px;
        display: block;
        text-align: center;
    }
    .simulation input{
        width: 40px;
        margin-right: 5px;
    }
}

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

  印刷用ボタン

------------------------------------------------------------*/
.btn_print[type="button"],
.btn_print2[type="button"]{
    /*reset*/
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    /*original*/
    border-radius: 12px;
    margin: 40px 0 0px;
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #444845;
    color: #444845;
    -moz-box-shadow: 0 3px 0 #444845;
    -webkit-box-shadow: 0 3px 0 #444845;
    box-shadow: 0 3px 0 #444845;
    transition: all 0.1s ease-out;
}
.btn_print:hover,
.btn_print2:hover{
    cursor: pointer;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    -moz-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    -webkit-box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
    box-shadow: 0 0 0 0 rgba(56, 140, 120, 0.15) ;
}

@media screen and (max-width: 980px) {
    .btn_print[type="button"],
    .btn_print2[type="button"]{
        display: none;
    }
}


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

  プラグイン（wpcf7）

------------------------------------------------------------*/
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing{
    border: 2px solid #c00 !important;
}
span.wpcf7-not-valid-tip{
    color: #e00 !important;
}

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

  広告

------------------------------------------------------------*/
.ad_box{
    margin: 40px 0;
}
.ad_inner{
    min-height: 200px;
}
.ad_title{
    margin-bottom:5px !important;
    text-align: center;
    font-size: 13px !important;
    opacity: 0.8;
}