/* single.php コラムcss */

:root {
    --red: #DC1E09;
    --soft-red: #EE5F5F;
    --blue: #0043FF;
    --soft-bl: #5FA2EE;
    --soft-og: #EEA648;
    --gray: #333;
    --border: #A7A7A7;
    --shadow: 0 3px 6px rgba(0, 0, 0, 0.10);
}

/* common */
.mb_22 {
    margin-bottom: 22px;
}
.mb_44 {
    margin-bottom: 44px;
}

/* 目次 */
.page_nav {
    border: 1px solid;
    padding: 3rem 2rem 3rem 6rem;
    margin: 3rem auto 6rem;
}
@media screen and (max-width : 600px) {
    .page_nav {
      padding: 3rem 2rem 4rem;
    }
}
.page_nav p {
    margin-bottom: 0;
    text-align: left;
    font-size: 2rem;
    position: relative;
    font-weight: bold;
}
@media screen and (max-width : 600px) {
    .page_nav p {
      font-size: 1.8rem;
    }
}
.page_nav p::before {
    content: "";
    background: url(../img/icon_toc.png) no-repeat;
    width: 15px;
    height: 15px;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.page_nav #toc > ol li {
    list-style-type: decimal;
    line-height: 1.8;
    margin: 4px 0;
}
.page_nav #toc > ol li a {
    display: inline-block;
    text-decoration: none;
    font-size: 1.6rem;
}
@media screen and (max-width : 600px) {
    .page_nav #toc > ol li a {
      font-size: 1.4rem;
    }
}
.page_nav #toc > ol li a:hover {
    font-weight: bold;
    opacity: 1;
}
.page_nav #toc > ol li a span:hover {
    font-weight: bold;
}
.page_nav #toc > ol li a br {
    display: none;
}
.page_nav #toc > ol > ol > li {
    list-style: none;
}
.page_nav #toc > ol > ol > li a::before {
    content: "- ";
}

/* タイトル */
.single-sec .category-column h2{
    padding: 7px 12px;
    border-left: 6px solid var(--gray);
    font-size: clamp(2.2rem, 2.055rem + 0.73vw, 2.6rem);
}
.single-sec .category-column h3{
    border-bottom: 1px solid;
    padding: 0 0 10px;
    font-size: clamp(2rem, 1.855rem + 0.73vw, 2.4rem);
}

/* 文字装飾 */
.bold { font-weight: bold;}

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

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

.marker {
    background-color: #FDFEBA;
    padding: 1px;
}

/* 吹き出し(バルーン) */
.bln {
    width: 100%;
    margin: 10px auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 1em;
	align-items: center;
    overflow: hidden;
}
@media (max-width:600px) {
	.bln {
		padding: 0;
        grid-template-columns: 1fr;
	}
}
.bln:before {
    content: "";
    width: 90px;
    height: 90px;
    background: no-repeat left center / contain;
    order: 1;
}
@media (max-width:600px) {
	.bln:before {
		width: 80px;
		height: 80px;
	}
}
.bln.man:before {
    background-image: url(../img/blog/man.png);
}
.says {
    position: relative;
    margin: 1rem;
    padding: 2.8rem 2.4rem;
    border: solid 2px #eee;
    border-radius: 1.2rem;
    background-color: #fff;
    font-size: 1.6em;
}
@media (max-width:600px) {
    .says {
        margin: 0;
        padding: 2rem 2.2rem;
        font-size: 1.4em;
    }
}

.says::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 10px solid #fff;
    z-index: 2;
}
.says::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -21px;
    margin-top: -9px;
    border: 9px solid transparent;
    border-right: 12px solid #eee;
    z-index: 1;
}
@media (max-width:600px) {
    .says::before {
        content: none;
    }
    .says::after {
        content: none;
    }
}

.bln .says:before,
.bln .says:after {
	transform: scale(-1, 1);
}
.bln .says:before {
	left: inherit;
	right: -16px;
}
.bln .says:after {
	left: inherit;
    right: -21px;	
}
.says p {
    margin: 0 0 7px;
  padding: 0;
}

/* リスト装飾 ul, ol */
ul.check_list {
    border: 1px solid var(--border);
    background-color: #fff;
    margin: 0 0 22px;
    padding: 1.6rem 2rem;
}
ul.check_list li {
    list-style: none !important;
    font-weight: bold;
    padding-left: 0;
}
ul.check_list li::before {
    content: '';
    background: url(../img/blog/check.svg) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 21px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

/* リスト装飾 dl */
dl.red_list dt,
dl.bl_list dt,
dl.og_list dt {
    background-color: var(--soft-red);
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    padding: 4px 24px;
    width: 120px;
}
dl.bl_list dt {
    background-color: var(--soft-bl);
}
dl.og_list dt {
    background-color: var(--soft-og);
}

dl.red_list dd,
dl.bl_list dd,
dl.og_list dd {
    border: 1px solid var(--soft-red);
    background-color: #fff;
    margin: 0 0 22px;
    padding: 1.6rem 2rem;
}
dl.bl_list dd {
    border: 1px solid var(--soft-bl);
}
dl.og_list dd {
    border: 1px solid var(--soft-og);
}

dl.red_list dd ul li,
dl.bl_list dd ul li,
dl.og_list dd ul li {
    list-style: none !important;
    font-weight: bold;
    padding-left: 0;
}
dl.red_list dd ul li::before,
dl.bl_list dd ul li::before,
dl.og_list dd ul li::before {
    content: '';
    background-image: url(../img/blog/check_red.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 21px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
dl.bl_list dd ul li::before {
    background-image: url(../img/blog/check_red.svg);
}
dl.og_list dd ul li::before {
    background-image: url(../img/blog/check_og.svg);
}

/* ボックス装飾 */
.point_box {
    padding: 2.4rem 4rem 2.4rem 6.5rem;
    margin: 0 0 22px;
    position: relative;
    border: 1px solid var(--border);
    background-color: #fff;
}
@media (max-width:600px) {
    .point_box {
        padding: 2rem;
    }
}
.point_box::before {
    content: '';
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    top: 2.6rem;
    left: 2.7rem;
    background: url(../img/blog/check.svg) no-repeat;
    background-size: contain;
}
@media (max-width:600px) {
    .point_box::before {
        width: 25px;
        height: 25px;
        display: inline-block;
        top: 2rem;
        left: 2rem;
    }
    .point_box p:first-of-type {
        padding-left: 2.1rem;
    }
}
.point_box p:last-of-type {
    margin-bottom: 0 !important;
}

.grid_box {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 2rem;
    margin: 0 0 22px;
}
@media (max-width:600px) {
    .grid_box {
        grid-template-columns: 1fr;
    }
}
.grid_box img {
    max-width: 100%;
    width: 100%;
}

.grid_box02 {
    display: grid;
    grid-template-columns: 28% 1fr;
    gap: 2rem;
    margin: 0 0 22px;
}
@media (max-width:600px) {
    .grid_box02 {
        grid-template-columns: 1fr;
    }
}
.grid_box02 img {
    max-width: 100%;
    width: 100%;
}

.related_post a {
    box-shadow: var(--shadow);
    display: block;
    display: grid;
    grid-template-columns: 213px 1fr;
    background-color: #fff;
}
@media (max-width:600px) {
    .related_post a  {
        grid-template-columns: 1fr;
    }
}
.related_post a img{
    max-width: 100%;
    width: 100%;
    vertical-align: bottom;
}
.related_post a dl {
    padding: 2rem;
}

/* singleページ(コラムのみ)下部お問い合わせフォーム用 */
.single_contactform {
    background-color: #fff;
    padding:1em;
    box-shadow: var(--shadow);
}

/* もっと見るボタン */
.readmore {
    position: relative;
    margin: 10px auto 4em;
    padding: 0 0 55px;
}

.readmore label {
    position: absolute;
    display: table;
    left: 50%;
    bottom: 0;
    margin: 0 auto;
    width: 150px;
    padding: 5px 0;
    /* color: #fff; */
    text-align: center;
    border-radius: 5px;
    /* background-color: #333; */
    background-color: #ddd;
    border: 1px solid;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 1;
}  
.readmore label::before{
    content: '続きを読む';
}  
.readmore input[type="checkbox"]:checked ~ label::before {
    content: '元に戻す';
}  
.readmore input[type="checkbox"]{
    display: none;
}  
.readmore-content {
    position: relative;
    height: 200px;
    overflow: hidden;
}  
.readmore input[type="checkbox"]:checked ~ .readmore-content {
    height: auto;
}
.readmore-content::before {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: linear-gradient( rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247,0.8) 50%, #f7f7f7 100%);
}
.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
    display: none;
}