@charset "UTF-8";

:root {
    --color-base: #364768;
    --color-main: #0f6cca;
    --color-dark: #0a1426;
    --color-gray: #7B8593;
    --color-partner: #299564;
    --color-gray-back: #f4f4f6;
    --color-marker: #FFCD59;
}

h2.blog__head {
    margin-block: 6rem 5rem;
}

.blog_flex {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2%;
    margin-top: 3rem;
}

.blog-item a {
    display: flex;
	flex-wrap: wrap;
    flex-direction: column; /* 縦に並べる */
}

.blog_flex article.blog-item {
	width: 32%;
	box-sizing: border-box;
	margin-bottom: 5rem;
}

.blog-item__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #fff;
	border-radius: 10px;
	order: 1;
}

.blog-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.blog-item__ttlbox {
	order: 3;
}

.blog-item__info {
	order: 2;
}

ul.blog-categories__list {
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-categories__list li {
    padding: 0 .2em;
}

.blog-categories__list li a {
	padding: .5rem 2rem;
	color: #fff;
	border: 1px solid var(--color-main);
	background: var(--color-main);
	border-radius: 50px;
}

.blog-categories__list li.current-cat a {
	color: var(--color-main);
	border: 1px solid var(--color-main);
	background: #fff;
}

.blog-item__info {
	font-size: 1.4rem;
	padding-block: 3rem 1rem;
	display: flex;
	justify-content: center;
}

span.blog-item__cat {
    text-align: center;
    padding: .1rem 1rem;
	background-color: var(--color-main);
	border-radius: 5px;
	color: #fff;
}

.blog-item__info time {
    margin-left: auto;
    white-space: nowrap;
}

h3.blog-item__ttl {
    font-weight: bold;
    line-height: 1.4em;
    letter-spacing: 0.1em;
}

/*
.pagenation {
    text-align: center;
    padding-bottom: 10rem;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem; 
    height: 4rem;
    padding: 0;
    border-radius: 50%;
    letter-spacing: 0 !important;
    line-height: 1;
    vertical-align: top;
}

span.page-numbers.current {
    color: #fff;
    background: var(--color-main);
}

.pagination-arrow {
    width: 1.8rem;
    height: 1.8rem;
    display: block;
    margin-top: 0; 
}

.pagination-arrow.prev { transform: rotate(90deg); }
.pagination-arrow.next { transform: rotate(-90deg); }
*/

.banner_area {
	width: 100%;
	background: #fff;
	padding-block: 8rem;
}

.banner_area_flex {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 2%;
}

.banner_area_flex_child {
	width: 50%;
}

.banner_area_flex_child__link {
    display: block;
    width: 100%;
}

.banner_area_flex_child__link img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: var(--color-gray-back);
}

a.banner_area_flex_child__link {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

a.banner_area_flex_child__link p {
	text-align: center;
	padding-top: .5em;
}

/* single */

.blog__btn {
    padding-bottom: 10rem;
}

.blog__btn a {
    margin: 0 auto; 
}

.blogwrap__single {
	background: #fff;
	border-radius: 20px;
	padding: 4.5rem 6rem 6rem;
	letter-spacing: .1em;
}

.blogwrap__single .blog-item__info {
    justify-content: flex-start;
}

.blogwrap__single .blog-item__info time {
    margin-left: 1em;
}

.blogwrap__single img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: contain;
    border-radius: 20px;
    margin: 5rem auto;
}
@media screen and (min-width: 769px){
    .blogwrap__single img.resetimg {
        width: auto;
        height: revert-layer;
    }
}

.blogwrap__single h1 {
	font-size: 3.2rem;
	font-weight: bold;
    line-height: 1.2em;
    margin-top: 1.5rem;
}

.blogwrap__single h2 {
    padding: 0.8rem 0 1.4rem 2rem;
    border-left: 0.8rem solid var(--color-main);
    border-bottom: 0.2rem solid var(--color-main);
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: bold;
    margin-block: 6rem 3rem;
}

.blogwrap__single h3 {
	font-size: 2rem;
	font-weight: bold;
	margin-block: 4rem 2rem;
	border-bottom: .2rem solid var(--color-gray);
    padding-bottom: 0.8rem;
}

.blogwrap__single h4 {
    border-bottom: none;
    border-left: 5px solid var(--color-gray);
    padding: 0 0 0 1rem;
    font-size: 1.8rem;
    font-weight: bold;
    margin-block: 3.5rem 2rem;
}

.blogwrap__single p + p {
    margin-top: 1.5rem;
}

.blogwrap__single a {
  text-decoration: underline;
  font-weight: 700;
}
@media (any-hover: hover) {
  .blogwrap__single a:hover {
    text-decoration: none;
  }
}

.blogwrap__single__content .custom-toc {
	border: 2px solid var(--color-gray-back);
	padding: 2rem 3rem 1rem;
	margin-block: 4rem;
}

.blogwrap__single__content .custom-toc p {
	font-size: 2rem;
	font-weight: bold;
}

.blogwrap__single__content .custom-toc ul {
	list-style: decimal;
	padding-left: 1.5em;
    margin-block: 1.5rem;
}

.blogwrap__single__content .custom-toc ul li {
	list-style: decimal;
	text-indent: -1.5em;
	padding-left: 1.5em;
	margin-block: .5rem;
}

.blogwrap__single__content .custom-toc ul li::before {
  content: none;
  margin-right: 0;
}

.blogwrap__single__content .custom-toc ul li a {
	font-weight: normal!important;
	color: var(--color-main);
}

.blogwrap__single nav.pnkz a {
	font-weight: normal!important;
}

.blogwrap__single__content ul {
  font-size: max(12px, 1.4rem);
  margin-block: 2rem;
}

.blogwrap__single__content li {
  text-indent: -1.4rem;
  padding-left: 1.4rem;
  margin-bottom: 0.5em;
}

.blogwrap__single__content li::before {
  content: "・";
  margin-right: 0.5rem;
}

.blogwrap__single__content dl {
	margin-block: 1rem;
}

.blogwrap__single__content dt {
	margin-bottom: .5rem;
}

.blogwrap__single__content dd {
	padding-left: 1em;
	margin-bottom: 1rem;
}

.blogwrap__single__content table {
    width: 100%;
    border: 1px solid var(--color-gray);
    table-layout: fixed;
    margin-block: 3rem;
}

.blogwrap__single__content table th,
.blogwrap__single__content table td {
    border: 1px solid var(--color-gray);
    padding: .5em 1em;
    vertical-align: middle;
    background: #fff;
}

.blogwrap__single__content table th {
    width: 14em;
    text-align: center;
    background: var(--color-gray-back);
}

.blogwrap__single__content strong{
    color: #ef4141;
    font-weight: 700;
}

.blogwrap__single__content b{
    font-weight: 700;
}

.blogwrap__single__content .lead-text-box{
    padding: 2.8rem 3rem 2.3rem 2.5rem;
    border-left: 0.8rem solid var(--color-main);
    background-color: var(--color-gray-back);
}

.blogwrap__single__content .cta-section{
    padding: 2.3rem 4rem 2rem;
    text-align: center;
    margin: 10rem auto;
    max-width: 80%;
    border: 2px solid var(--color-main);
}
.blogwrap__single__content .cta-section h2,
.blogwrap__single__content .cta-section h3,
.blogwrap__single__content .cta-section h4{
    font-weight: 700;
    font-size: 2rem;
    margin: 0 0 1rem;
    color: var(--color-main);
    border: none;
    padding: 0;
    line-height: 1.6;
}
.blogwrap__single__content .cta-section .cta-button{
    margin-block: 2.5rem 1.8rem;
}

.blogwrap__single__content .faq-section dt{
    font-weight: 700;
    position: relative;
    padding-left: 2.5rem;
}
.blogwrap__single__content .faq-section dt::before{
    content: "Q.";
    margin-right: 0.5rem;
    position: absolute;
    top: -2px;
    left: 0;
}
.blogwrap__single__content .faq-section dd{
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 2rem;
}
.blogwrap__single__content .faq-section dd::before{
    content: "A.";
    position: absolute;
    top: -2px;
    left: 2px;
    font-weight: 700;
    font-size: 1.7rem;
}

time.blog_update-date {
    color: var(--color-gray);
}

span.blog_date_label {
    padding-right: .2em;
}

.blogwrap__single__content .sp-scroll{
  overflow-x: auto;
  padding-bottom: 1.5rem;
}


/*media*/
@media screen and (max-width: 768px) {
	.blog_flex article.blog-item {
		width: 100%;
	}
    ul.blog-categories__list {
		display: flex;
		align-items: center;
        justify-content: space-between;
		flex-flow: wrap;
	}
    .blog-categories__list li {
		margin-bottom: .5em;
        width: 50%;
	}
    .blog-categories__list li a {
		white-space: nowrap;
        font-size: 3vw;
        display: block;
        letter-spacing: 0.08em;
        text-align: center;
        padding-inline: 0.5rem;
    }
    .banner_area_flex {
		flex-wrap: wrap;
	}
	.banner_area_flex_child {
		width: 100%;
		margin-bottom: 1em;
	}
	.banner_area_flex_child:last-child {
		margin-bottom: 0;
	}

    /*single*/
    .blogwrap__single h1 {
        font-size: 2rem;
    }
    .blogwrap__single .lead-text-box p {
        font-size: 1.6rem;
    }
    p.toc-title{
        font-size: 1.8rem;
    }
    .blogwrap__single {
        padding: 1rem 2rem 3rem;
    }
    .blogwrap__single h2 {
        font-size: 1.8rem;
        line-height: 1.4;
        padding: 0.5rem 0 1rem 1rem;
        margin-block: 5rem 2rem;
    }
    .blogwrap__single h3 {
        font-size: 1.6rem;
        margin-block: 3rem 1.5rem;
    }
    .blogwrap__single h4 {
        font-size: 1.6rem;
        margin-block: 3rem 1.5rem;
    }
    .blogwrap__single img {
        aspect-ratio: 2 / 1;
        border-radius: 10px;
        margin-block: 2rem;
    }
    .blogwrap__single__content .custom-toc ul li {
        text-indent: 0;
        padding-left: 0;
    }
    .blogwrap__single__content table{
        margin-block: 2rem;
    }
    .blogwrap__single__content table th,
    .blogwrap__single__content table td {
        padding-inline: .5em;
        text-align: left;
        line-height: 1.4;
        font-size: 1.5rem;
    }
    .blogwrap__single__content table th {
        width: 34%;
    }
    .blogwrap__single__content .lead-text-box {
        padding: 2.5rem 2rem;
    }
    .blogwrap__single__content .custom-toc {
        padding: 2rem 2rem 1rem 2.5rem;
    }
    .blogwrap__single__content .cta-section {
        padding-inline: 2rem;
        text-align: justify;
        margin-block: 5rem;
        max-width: 100%;
    }
    .blogwrap__single__content .cta-section h2,
    .blogwrap__single__content .cta-section h3,
    .blogwrap__single__content .cta-section h4{
        text-align: center;
        font-size: 1.8rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    .blog-item__info{
        font-size: 1.2rem;
        letter-spacing: 0.05em;
    }
    span.blog-item__cat{
        padding-bottom: 4px;
        display: inline-flex;
        align-items: center;
    }
    .blogwrap__single .blog-item__info time{
        line-height: 1.2;
    }
    span.blog_date_label{
        display: block;
    }
    .blogwrap__single__content .cta-section .cta-button{
        padding-inline: 3rem 4.5rem;
        width: 100%;
    }
}