@charset "utf-8";
/*
VARIABLES
================================================ */
:root {
    --white: #FFFFFF;
    --black: #333A3A;
    --trueBlack: #000000;
    --lightGray: #D9D9D9;
    --mildGray: #bababa;
    --btnGray: #686868;
    --bgGray: #F5F5F5;
    --bgBeige: #E4E4DA;
    --linkBlue: #008DB5;
    --visitedBlue: #729EAA;

}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 62.5%; /* 10pxに変換 */
    height: 100%; /* footerの配置 */
}
body {
    font-family:
    'Encode Sans',
    'Noto Sans JP',
    sans-serif;
    font-style: normal;
    font-size: 1.6rem;
    color: var(--black);
    background-color: var(--white);
    line-height: 1.5;
    overflow-x: hidden;
}
body.is-fixed {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* footerの配置 */
body > footer {
    position: sticky;
    top: 100vh;
}
/* link */
a {
    color: var(--black);
}
a:hover,
.bl a:hover {
    opacity: 0.5;
}
.bl a {
    color: var(--linkBlue);
}
.bl a:visited {
    color: var(--visitedBlue);
}
/* image */
img
 {
     max-width: 100%;
     height: auto;
 }

/*
HEADER
================================================ */
.header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1024px;
    min-width: 375px;
    margin: 0 auto;
    padding: 0 0.5em;
}
.header-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}
.header h1 {
    padding: 1rem 0;
    font-family: "Encode Sans SC", serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 3.6rem;
    line-height: 1;
}
.header h2 {
    font-size: 1.4rem;
    line-height: 1;
}
.c-breadcrumbs {
    max-width:1024px;
    margin: 0 auto;
    padding-left: 0.6em;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;
    color: var(--btnGray);
    line-height: 3.2;
}
.c-breadcrumbs > li:not(:last-of-type)::after {
    content: ">";
    display: inline-block;
    margin-right: 0.5em;
    margin-left: 0.5em;
}
@media (max-width:768px) {
    .header h1 {
        font-size: 2.6rem;
        margin-bottom: 0.3em;
    }
}

/*
MENU
================================================ */
/* メニュー */
.current {
    color: var(--mildGray);
}
.gnav-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    font-family: 'Encode Sans';
    font-size: 1.4rem;
    padding-top: 2rem;
}
.gnav-list li {
    position: relative;
}
.gnav-list a {
    position: relative;
    display: block;
}
.gnav-list a:hover {
    opacity: 0.5;
}
.has-submenu {
    all: unset;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
/* サブメニュー */
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 230px;
    flex-direction: column;
    gap: 0.5em;
    padding: 2em;
    background: hsla(0, 0%, 100%, 0.77);
    border-radius: 10px;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.4);
    z-index: 200;
}
/* クリックで開いたとき */
li.open > .sub-menu {
  display: flex;
}
.mob-menu-wrapper {
    display: none;
}

@media (max-width: 987px){
/*
SLIDE MENU
================================================ */
    .mob-menu-wrapper {
        display: block;
    }
/* 開閉ボタン */
    .btn-menu {
        position: fixed;
        right: 1rem;
        top: 1rem;
        padding: .5rem 1rem;
        height: 4rem;
        width: 4rem;
        transition: .4s;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }
    #menu-open span,
    #menu-open span::before,
    #menu-open span::after {
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        background-color: var(--black);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    #menu-open span::before {
        content: '';
        position: absolute;
        top: -5px;
        width: 18px;
    }
    #menu-open span::after {
        content: '';
        position: absolute;
        top: 5px;
        width: 16px;
    }
        #menu-open.is-active span {
        background-color: transparent;
    }
    #menu-open.is-active span::before {
        top: 0;
        transform: rotate(45deg);
        width: 20px;
    }
    #menu-open.is-active span::after {
        top: 0;
        transform: rotate(-45deg);
        width: 20px;
    }
/* 閉じるボタン */
    #menu-close {
        display: block;
        position: absolute; /* メニューパネルの左上に配置 */
        top: 1rem;
        right: 1rem;
        z-index: 510; /* 最前面 */
        background: none;
        border: none;
        cursor: pointer;
        padding: .5rem 1rem;
        height: 4rem;
        width: 4rem;
    }
    #menu-close span,
    #menu-close span::after  {
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        background-color: var(--mildGray);
        transform: rotate(-45deg);
    }
    #menu-close span::after {
        content: '';
        position: absolute;
        transform: rotate(-90deg);
    }
/* pc用ナビ */
    .gnav-list {
        display: none;
    }
/* スライドメニューパネル */
    #menu-panel {
        display: block;
        position: fixed;
        opacity: 0;
        visibility: hidden;
        top: 0;
        right: 0;
        padding: 2rem 2rem 2rem 3rem;
        width: 100%;
        height: 100vh;
        z-index: 400;
        background: linear-gradient(321deg, rgb(237 237 237) 30%, rgb(255 255 255) 54%);
        transition: opacity 0.8s ease, visibility 0.8s ease;
        pointer-events: auto;
    }
    #menu-panel.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .mob-menu-wrapper h2 { /* Shiori's Vegan Pantry */
        text-align: center;
        font-family: "Encode Sans SC", sans-serif;
        font-style: normal;
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        margin-bottom: 2rem;
    }
    .mob-menu-list {
        width: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 3rem;
        font-size: 1.4rem;
        margin-bottom: 3rem;
        flex-direction: column;
        gap: 2rem;
        font-size: 1.6rem;
    }
    .mob-menu-inner {
        margin-top: 0.5em;
        margin-left: 1em;
    }
    .mob-menu-inner li {
        margin-bottom: 0.2em;
        position: relative;
        margin-left: 1em;
        font-size: 1.4rem;
    }
    .mob-menu-inner li::before {
        content: '-';
        position: absolute;
        color: var(--black);
        top: 0;
        left: -1em;
    }

    .contact-banner {
        display: block;
        width: 50%;
        padding: 1rem;
        margin:0 auto 2em;
        background-color: var(--white);
        border: 1px solid var(--lightGray);
        font-size: 1.3rem;
        text-align: center;
        border-radius: 3px;
    }
    .contact-banner:hover {
    background-color: var(--lightGray);
    }
    .mob-menu-sns {
        font-family: "Encode Sans SC", serif;
        letter-spacing: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1em;
        margin-bottom: 2em;
    }
}
@media (max-width:768px) {
    .mob-menu-list {
        width: 70%;
    }
    .contact-banner {
        width: 70%;
    }
}
@media (max-width:430px) {
    .mob-menu-list {
        width: 80%;
    }
    .contact-banner {
        width: 80%;
    }
}
/*
DECORATION
================================================ */
/* font size */
.fs14 {
    font-size: 1.4rem;
    line-height: 1.7;
}
.bold {
    font-weight: 600;
}

/* layout */
/* br */
.br-cl__mob {
    display: block;
}
.br-tab {
    display: none;
}
.br-mob {
    display: none;
}
@media (max-width:1024px) {
    .br-tab {
        display: block;
    }
}

@media (max-width:540px) {
    .br-cl__mob {
        display: none;
    }
    .br-mob {
        display: block;
    }
}

.ct {
    display: flex;
    justify-content: center;
}

.text-rt {
    text-align: right;
}
.photo-by-key-top,
.photo-by-key-lt,
.photo-by-key {
    position: absolute;
    font-size: max(1.2rem, 1rem);
    color: var(--white);
    z-index: 150;
    bottom: 1em;
    right: 1em;
}
.photo-by-key-top {
    right: 2em;
}
.photo-by-key-lt {
    left: 2em;
}
.photo-by-rt,
.photo-by-lt {
    margin: 0.5em 0 1em;
    font-size: max(1.2rem, 1rem);
}
.photo-by-lt{
    text-align: right;
}
.photo-by-lt {
    text-align: left;
}
.photo-by-md {
    margin-top: 0.5em;
    margin-left: 22%;
    font-size: max(1.2rem, 1rem);
}
.photo-by-ct {
    margin-top: 0.5em;
    font-size: max(1.2rem, 1rem);
    text-align: center;
}
/* spacer */
.padrl-a {
    padding-right: 1em;
    padding-left: 1em;
}
.padb-a {
    padding-bottom: 5em;
}
.padb-b {
    padding-bottom: 0.2em;
}
.padb-c {
    padding-bottom: 10em;
}
.padt-a {
    padding-top: 10px;
}
.mgt-a {
    margin-top: 1em;
}
.mgb-a {
    margin-bottom: 2em;
}
.mgrt-a {
    margin-right: 2em;
}
/* border */
.border-bot {
    display: block;
    border-bottom: solid 1px var(--black);
    margin: 7em 0;
}
/* arrow-svg */
.arrow-rt svg,
.arrow-lt svg  {
    width: 1em;
    height: 1em;
    margin-bottom: 0.25em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}
h3.arrow-rt svg { /* top certificate */
     margin-bottom: 0.2em;
}
/* arrow-down */
.arrow-down {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 6px;
}
.arrow-down::before,
.arrow-down::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 6px;
    background-color: var(--black);
    border-radius: 9999px;
    left: 50%;
    transform-origin: 50% 100%;
}
.arrow-down::before {
    transform: translateX(-50%) rotate(45deg);
}
.arrow-down::after {
    transform: translateX(-50%) rotate(-45deg);
}
/* arrow-right */
.arrow-right {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
}
.arrow-right::before,
.arrow-right::after {
    content: "";
    position: absolute;
    left: calc(100% - 2px);
    width: 10px;
    height: 2px;
    background-color: var(--black);
    border-radius: 9999px;
    top: 50%;
    left: 0;
    transform-origin: left center;
}
.arrow-right::before {
  transform: rotate(45deg);
}
.arrow-right::after {
  transform: rotate(-45deg);
}


/*
READ MORE
================================================ */
.cl {
    clear: both;
}
.readmore a,
.readmore-b a {
    float: right;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100px;
    height: 60px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.2rem;
}
.readmore span,
.readmore-b span {
    display: block;
    padding: 3px 0;
    z-index: 2;
}
.readmore a::after,
.readmore-b a::after {
    content: '';
    position: absolute;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.readmore a,
.readmore-b a  {
    color: var(--black);
}
.readmore a::after,
.readmore-b a::after  {
    border: 1px dotted var(--black);
}
.readmore a::after {
    right: 5rem;
}
.readmore-b a::after {
    right: 3rem;
}
.bg-white {
    background-color: var(--white);
}
.bg-gy {
    background-color: var(--bgGray);
}
.more-info {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    margin: 2em auto;
}

/*
MAIN
================================================ */
.main {
    width: 100%;
    min-width: 375px;
    overflow: hidden;
}
.wrapper-small {
    max-width: 960px;
    margin: 0 auto;
}
.wrapper-base {
    max-width: 1240px;
    margin: 0 auto;
    padding:0 1em ;
}
.wrapper-extra {
    width: 100%;
}
.none {
    display: none;
}

/*
FOOTER
================================================ */
footer {
    width: 100%;
    padding: 1em 1em 0.5em;
    background-color: var(--bgBeige);
}
.footer-inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}
.footer-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.4rem;
}

.footer-sns {
     display: flex;
     justify-content: center;
     gap: 2em;
}
.icon {
    width: 22px;
}
@media (max-width: 1024px) {
    .footer-nav{
        width: 90%;
    }
}
@media (max-width: 768px) {
    .footer-nav{
       flex-direction: column;
    }
}

/* リンクを右下に固定 */
.page-top {
	position: fixed;
	right: 20px;
	bottom:15px;
	opacity: 0;
}
.page-top {
	display: flex;
	justify-content:center;
	align-items:center;
	background: rgba(204, 201, 185, 0.51);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}
.page-top span::before {
    content: '';
    position: absolute;
    left: 45%;
    top: 25%;
	background: var(--btnGray);
    width: 1px;
    height: 30px;
}
.page-top span::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 20%;
	background: var(--btnGray);
    width: 1px;
    height: 20px;
    transform: rotate(-45deg);
}
.page-top a:hover{
	background: rgba(204, 201, 185, 0.1);
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.float-button {
    position: fixed;
    bottom: 8%;
    right: 5%;
    z-index: 10;
    width: 150px;
    height: 150px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/* .float-button:hover {
    opacity: 0.5;
} */

.float-button.is-active {
    opacity: 1;
    pointer-events: auto;
}

.float-button img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.float-button.is-active {
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 768px) {
    .float-button {
        width: 100px;
        height: 100px;

    }
}
@media (max-width:430px) {
    .float-button {
        bottom: 2%;
        left: 4%;
    }
}

/*
TOP PAGE
================================================ */
.top-header {
    width: 100vw;
    min-width: 375px;

}
.top-visual {
    width: 100%;
    height: 100%;
    display: flex;
}
.top-visual li {
    flex-shrink: 0;
    width: calc(100% / 3);
    position: relative;

}
.top-visual li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.top-item {
    position: relative;
    width: 100%;
    max-width: 992px;
    min-width: 335px;
    margin: 10em auto;
    display: flex;
    justify-content: space-evenly;
    gap: 5px;
}
@media (max-width: 1024px) {
    .top-item {
        margin: 5em auto 6em;
    }
}
@media (max-width: 768px) {
    .top-header {
        height: 500px;
        position: relative;
    }
    .top-visual {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top-visual li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        z-index: 1;
    }
    .top-visual li.active {
        opacity: 1;
        z-index: 2;
    }
}
@media (max-width: 375px) {
    .top-item {
        margin: 2em auto 3em;
    }
}

/*
TOP PAGE/LESSON , NEWS
================================================ */
.top section {
    padding-bottom: 10em;
}
.top h2,
.lesson h3,
.cart-inner h2,
.cart-inner-rv h2,
.page404 h2,
.privacy h2,
.news-top h2 {
    display: flex;
    align-items: center;
}
.page404 h2,
.privacy h2,
.news-top h2 {
    justify-content: center;
}
.top h2,
.news-top h2 {
    gap: 1.5em;
    margin-bottom: 2.5em;
}
.lesson h3,
.cart-inner h2,
.cart-inner-rv h2 {
    gap: 1em;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
}
.lesson h3,
.cart-inner h2,
.cart-inner-rv h2 {
    margin-bottom: 0.8em;
}
.cart-inner h2,
.cart-inner-rv h2 {
    margin-bottom: 1.5em;
}
.top h2 span,
.page404 h2 span,
.privacy h2 span,
.news-top h2 span {
    font-family: "Encode Sans SC", serif;
    font-size: 3.6rem;
}
.lesson h3 span,
.cart-inner h2 span,
.cart-inner-rv h2 span {
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1;
}
.lesson h3 span,
.cart-inner h2 span,
.cart-inner-rv h2 span {
    font-size: 1.2rem;
    margin-top: 0.5em;
}





.lesson-list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.lesson-list li{
    width: calc(100% / 3 - 4%);
}
.lesson-list-item li {
    width: inherit;
    list-style-type: disc;
    margin-left: 2em;
}
.lesson-list img {
    border: solid 1px var(--lightGray);
}
.lesson-list dt {
    font-size: 2rem;
    padding: 1em 0 0.2em;
}
.lesson-list dd {
    text-align: justify;
    text-justify: inter-character;
}
.lesson-list a {
    display: block;
    height: 100%;
}
.lesson-description-content ul,
.lesson-description-content ol {
    width: 100%;
    padding: 0 0 0 1.5em;
    list-style: disc;
}
.lesson-description-content li {
    width: auto;
}
@media (max-width: 820px) {
    .lesson-list li{
        width: calc(100% / 2 - 4%);
        margin-bottom: 2em;
    }
    .lesson-list-item li {
        width: initial;
        margin-bottom: initial;
    }
    .lesson-description-content li {
        margin-bottom: 0;
    }
    .lesson-description-content li {
    width: auto;
    }
}
@media (max-width:600px) {
    .lesson-list {
        flex-direction: column;
        gap: 2em;
    }
    .lesson-list li {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .top h2,
    .lesson h3,
    .cart-inner h2,
    .cart-inner-rv h2,
    .privacy h2,
    .news-top h2 {
        flex-direction: column;
        gap: 0em;
    }
    .top h2,
    .privacy h2,
    .news-top h2,
    .cart-inner h2 span,
    .cart-inner-rv h2 span {
        font-size: 1.4rem;
    }
    .top h2,
    .privacy h2,
    .news-top h2 {
        line-height: 1.2;
    }
    .lesson h3 span,
    .cart-inner h2 span,
    .cart-inner-rv h2 span {
        margin-top: 0.4em;
    }
    .lesson-list li{
        width: 100%;
    }
    .lesson-list dt {
        font-size: 1.8rem;
    }
}

/*
TOP PAGE/CERTIFICATE
================================================ */
.mob-img {
    display: none;
}
.certificate {
    background-color: var(--bgGray);
    padding: 10rem 0;
    margin-bottom: 10rem;
}
.certificate p {
    margin-bottom: 1em;
}
.top-certificate__menu {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 1em;
}
.top-certificate__menu li{
    width: calc(100% / 2 - 1em);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.6em;
}
.top-certificate__menu a {
    display: block;
    border-radius: 10px 10px 0 0;
}
.top-certificate__menu h3 {
    position: relative;
    font-size: 2.4rem;
    text-align: center;
    padding: 1.5rem 0 2.3em;
}
.certificate-info img{
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}
.instructor-info div {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.shop-info div {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    }
.shop-info img{
     object-fit: cover;
}
@media (max-width: 1024px) {
    .top-certificate__menu h3 {
        font-size: 2rem;
        padding: 1.5rem 0 1.4em;
    }
}
@media (max-width: 912px) {
    .top-certificate__menu h3 {
        font-size: 1.8rem;
        padding: 1.5rem 0 1.3em;
    }
}
@media (max-width: 820px) {
    .top-certificate__menu h3 {
        font-size: 1.6rem;
        padding: 1.5rem 0 1.2em;
    }
}
@media (max-width: 768px) {
    .top-certificate__menu li {
        gap: 0.4em;
    }
    .top-certificate__menu h3 {
        font-size: 1.6rem;
        padding: 1.5rem 0 1.1em;
    }
}
@media (max-width:540px) {
    /* .full-img {
        display: none;
    }
    .mob-img {
        display: block;
    } */
    .top-certificate__menu {
        flex-direction: column;
    }
    .top-certificate__menu li {
        width: 100%;
        gap: 1em;
    }
}


/*
TOP PAGE/STORY
================================================ */
.story-read {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 1em;
}
.read-text {
    width: 100%;
}
.read-text p {
    font-size: 2rem;
    line-height: 2;
    margin-bottom: 2em;
    padding-right: 3em;
    overflow: hidden;
}
.read-last {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.read-last::after {
    content: '';
    position: absolute;
    background-color: var(--black);
    width: 5em;
    height: 1px;
    top: -0.4em;
    left: 0.5em;
}
.story-read img {
    border-radius: 10px;
    box-shadow: 39px 37px 5px 0px rgba(0, 0, 0, 0.07);
}
@media (max-width: 1024px) {
    .wrapper-base {
        width: 90%;
    }
}
@media (max-width: 768px) {
    .story-read {
        flex-direction: column-reverse;
        gap: 2em;
    }
    .story-read img {
        box-shadow: none;
        width: 100%;
    }
}
@media (max-width:430px) {
    .read-text p {
        font-size: 1.6rem;
        padding-right: 0;
    }
}


/* レスポンシブ */
@media (max-width: 820px) {
  .lesson-section__list li {
    width: calc(100% / 2 - 4%);
    margin-bottom: 2em;
  }
}
@media (max-width: 600px) {
  .lesson-section__list {
    flex-direction: column;
    gap: 2em;
  }
  .lesson-section__list li {
    width: 100%;
  }
  .lesson-section__list dt {
    font-size: 1.8rem;
  }
}


/*
TOP PAGE/B TO B, SERVICE
================================================ */
.top-btob {
    width: 100%;
    padding: 7em 0;
    margin-bottom: 7em;
    background-color: var(--bgGray);
}
.top-btob_inner {
    max-width: 1240px;
    margin: 0 auto;
}
.top-btob img {
    object-fit: contain;
}
.description-text {
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 3em;
}
.top-btob__items {
    width:100%;
    display: flex;
    gap: 3em;
}
.top-btob__item-left {
    min-width: 200px;
}
.top-btob__item-middle {
    max-width: 647px;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.top-btob__item-middle img {
    width: 200px;
}
.top-btob__item-right {
    min-width: 300px;
}
.top-btob__item-left img,
.top-btob__item-middle img,
.top-btob__item-right img {
    border-radius: 10px;
}

@media (max-width:1024px) {
    .top-btob {
        padding-right: 0;
        padding-left: 0;
    }
    .top-btob_inner {
        width: 100%;
    }
    .top-btob_inner h2 {
       width: 90%;
       margin-right: auto;
       margin-left: auto;
    }
    .top-btob__item-left img {
        border-radius: 0 10px 10px 0;
    }
    .top-btob__item-right img {
        border-radius: 10px 0  0 10px ;
    }
}
@media (max-width:820px) {
    .top-btob__items {
        gap: 2em;
    }
    .top-btob__item-left {
    min-width: 180px;
    }
    .description-text {
        margin-top: 0;
        margin-bottom: 2em;
    }
    .top-btob__item-middle img {
        width: 170px;
    }
    .top-btob__item-right {
        min-width: 240px;
    }
}
@media (max-width:768px) {
    .top-btob__item-right {
    min-width: 230px;
}
}
@media (max-width:700px) {
    .top-btob__items {
        flex-direction: column-reverse;
        align-items: flex-end;
    }
    .description-text {
        margin: 1em;
    }
    .top-btob__item-middle img {
        border-radius: 0 10px 10px 0;
    }
    .top-btob__item-left img {
        width: 200px;
        border-radius: 10px 0  0 10px ;
    }
    .top-btob__item-right img {
        width: 250px;
    }
}

/*
TOP PAGE/NEWS
================================================ */
.news-list_top {
    max-width: 1024px;
    margin: 0 auto;
}
.news-list_top li {
    padding-bottom: 0.6em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--lightGray);
}
.news-list_top a {
    display: flex;
    align-items: baseline;
    width: 100%;
    gap: 1em;
}
.news-box {
    display: flex;
    align-items: center;
    gap: 1em;
}
.cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}
.cat-list li {
    margin-bottom: 0;
    padding: 0.2em 0.5em 0.1em;
    background-color: var(--lightGray);
    border-radius: 5px;
    font-size: 1rem;
}
.news-list .date {
    font-size: 1.4rem;
    line-height: 1;
}
@media (max-width:768px) {
    .news-list_top a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
}

/*
TOP INSTA
================================================ */
.insta-item {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: auto;
}
.insta-item a {
    display: block;
    aspect-ratio: 4 / 5;
    background-color: var(--lightGray);
}
@media (max-width:1024px) {
    .insta-item {
    grid-template-columns: repeat(auto-fit, minmax(153px, 1fr));
    }
}
@media (max-width:768px) {
    .insta-item {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

/*
LESSON
================================================ */
.lesson-visual {
    width: 100vw;
    position: relative;
}
.lesson-img {
    position: relative;
    z-index: 100;
}
.lesson-visual h2 {
    width: 100%;
    text-align: center;
    font-size: max(24px, 4vw);
    letter-spacing: 0.25em;
    color: var(--white);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.37);
    position: absolute;
    z-index: 110;
    top: 40%;
}
.message {
    position: relative;
    padding: 15vh 0 1vh;
}
.message h2 {
    font-size: 3.4rem;
    text-align: center;
    margin-bottom: 1em;
}
.message p {
    text-align: center;
    margin-bottom: 1em;
}
.lesson-item {
    position: relative;
    max-width: 1024px;
    width: 80%;
    margin: 8em auto 7em;
    display: flex;
    justify-content: space-evenly;
    gap: 5px;
}
/*
LESSON CERTIFICATE
================================================ */
.lesson-message {
    width: 100%;
    padding: 0 1em;
    background-color: var(--bgGray);
}
.lesson-cert h2,
.lesson-oneday h2  {
    margin: 3em 0 1.5em ;
    font-size: 3.4rem;
    text-align: center;
}
.lesson-about {
    width: 82%;
    margin: 0 auto 7em;
}
.lesson-summary,
.lesson-summary__rv {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto 16em;
    display: flex;
    justify-content: space-evenly;
    gap: 6em;
}
.lesson-summary__rv {
    flex-direction: row-reverse;
}
.lesson-book {
    width: 45%;
}
.lesson-book img {
    box-shadow: 5px 6px 9px -3px rgba(0, 0, 0, 0.38);
}
.lesson-text {
    width: 50%;
}
.lesson-text h3 {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 2em;
}
.lesson-text p {
    line-height: 1.8;
    margin-bottom: 2.5em;
    text-align: justify;
}
/*
LESSON One-day
*/
.oneday {
    padding: 3em 0 7em;
    background-color: var(--bgGray);
}
.oneday-info {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 10rem;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    grid-template-rows: auto;
}
.oneday-info dl {
    margin-top: 1em;
}
.oneday-info dt {
    margin-bottom: 0.2em;
}
.oneday-info dd {
     margin-left: 1.5em;
     font-size: 1.6rem;
}
.oneday-list-item li {
    list-style-type: disc;
}
.oneday-info img {
    box-shadow: 4px 4px 3px -3px rgba(0, 0, 0, 0.56);
}
.oneday-list dt {
    font-size: 2rem;
    padding: 1em 0;
}
.oneday-list a {
    display: block;
    height: 100%;
}
.stream {
    max-width: 950px;
    margin: 7em auto;
    display: flex;
    justify-content: space-between;
}
.stream dl {
    width: calc( 100% / 2 - 5%);
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.stream img {
    border: solid 1px var(--black);
    margin-bottom: 2em;
}
.stream-title {
    font-size: 2.4rem;
    text-align: center;
}
.stream dd p {
    margin-bottom: 1.5em;
}
@media (max-width:1024px) {
    .lesson-summary,
    .lesson-summary__rv {
        gap: 3em;
    }
}

@media (max-width:820px) {
    .lesson-about {
        width: 100%;
    }
    .lesson-message {
        padding: 0;
    }
    .lesson-text h3 {
        font-size: 2.2rem;
    }
    .message {
        padding: 8vh 0 1vh;
    }
    .lesson-item {
        width: 100%;
    }
}
@media (max-width:540px) {
     .message {
        padding: 8vh 0 0;
    }
    .message h2 {
        font-size: 2.6rem;
    }
    .message p {
        text-align: left;
        padding: 0 2em;
    }
    .lesson-summary,
    .lesson-summary__rv {
        margin-bottom: 5em;
        flex-direction: column;
        gap: 1.5em;
    }
    .lesson-book {
        width: 100%;
    }
    .lesson-text {
        width: 100%;
        text-align: center;
    }
    .lesson-oneday h2 {
        margin-top: 1em;
    }
    .stream {
        flex-direction: column;
    }
    .stream dl {
        width: 100%;
        margin-bottom: 3em;
    }
}
@media (max-width:375px) {

    .message {
        padding: 7vh 0;
    }
    .message h2 {
        font-size: 2.2rem;
    }
    .message p {
        text-align: left;
    }
    .lesson-item {
        margin-top: 4em;
        margin-bottom: 3em;
    }
    .lesson-cert h2 {
        font-size: 3rem;
    }

}
/*
SHAPEDBREAD
================================================ */
.cert-visual {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    margin-bottom: 10em;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2em;
}
.shapedbread-visual {
    background-image: -webkit-image-set(
        url(./img/shapedbread-visual-full.webp) type("image/webp") 1x,
        url(./img/shapedbread-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/shapedbread-visual-full.webp) type("image/webp") 1x,
        url(./img/shapedbread-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/shapedbread-visual-full.jpg);
}
.moldbread-visual {
    background-image: -webkit-image-set(
        url(./img/moldbread-visual-full.webp) type("image/webp") 1x,
        url(./img/moldbread-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/moldbread-visual-full.webp) type("image/webp") 1x,
        url(./img/moldbread-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/moldbread-visual-full.jpg);
}
.sweets-visual {
    background-image: -webkit-image-set(
        url(./img/sweets-visual-full.webp) type("image/webp") 1x,
        url(./img/sweets-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/sweets-visual-full.webp) type("image/webp") 1x,
        url(./img/sweets-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/sweets-visual-full.jpg);
}
.muffin-visual {
    background-image: -webkit-image-set(
        url(./img/muffin-visual-full.webp) type("image/webp") 1x,
        url(./img/muffin-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/muffin-visual-full.webp) type("image/webp") 1x,
        url(./img/muffin-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/muffin-visual-full.jpg);
}

.shapedbread-visual h2,
.moldbread-visual h2,
.sweets-visual h2,
.muffin-visual h2 {
    text-align: center;
    width: 100%;
    margin-top: 2em;
    font-size: max(24px, 4vw);
    letter-spacing: 0.1em;
    color: var(--white);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.37);
}
.cert-summary {
    max-width: 984px;
    width: 100%;
    padding:3% 8%;
    background-color: rgba(248, 245, 245, 0.7);
    color: var(--trueBlack);
    line-height: 2;
    border-radius: 10px;
}

.cart-inner,
.cart-inner-rv {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 6em;
}
.cart-inner-rv {
    flex-direction: row-reverse;
}
.cart-list {
    flex-grow: 1;
}
.cart-list ul {
    margin-bottom: 1.7em;
}
.cart-list li {
    list-style-type: disc;
    margin-left: 1.5em;
}
.cart-list p {
    line-height: 2;
    margin-bottom: 1.5em;
}
.cart-item {
    flex-shrink:0;
    inline-size: min(100%, 467px);
}
.cart-item-rect img {
    border-radius: 10px;
}
.application-details {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 7em;
}
.application-details h2 {
    font-size: 2.4rem;
    font-weight: 600;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--btnGray);
}
.appli-details-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--btnGray);
}

.appli-details-item dt {
    flex-shrink: 0;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 400;
    margin-right: 2em;
    min-width: 8em;
}
.appli-details-item dd {
    flex-grow: 1;
    flex-shrink: 1;
}
.on-off {
    display: block;
}
.off-on {
    display: none;
}
@media (max-width:1024px) {
    .cert-visual {
        height: 563px;
        margin-bottom: 7em;
    }
    .cart-inner,
    .cart-inner-rv {
        width: 100%;
        gap: 3em;
    }
    .cert-summary {
        top: 54%;
    }
    .application-details {
        width: 90%;
    }
}
@media (max-width:986px) {
    .cert-summary {
        border-radius: 0;
    }
}
@media (max-width:820px) {
    .cert-visual  {
        height: 555px;
        margin-bottom: 7em;
    }
    .cart-inner,
    .cart-inner-rv  {
        flex-direction: column;
    }
    .cert-summary {
        top: 63%;
    }
    .cart-item {
        width: 100%;
    }
    .on-off {
    display: none;
}
    .off-on {
    display: block;
}

}
@media (max-width: 768px) {
    .shapedbread-visual {
        background-image: -webkit-image-set(
            url(./img/shapedbread-visual-mob.webp) type("image/webp") 1x,
            url(./img/shapedbread-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: image-set(
            url(./img/shapedbread-visual-mob.webp) type("image/webp") 1x,
            url(./img/shapedbread-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: url(./img/shapedbread-visual-mob.jpg);
    }
    .moldbread-visual {
        background-image: -webkit-image-set(
            url(./img/moldbread-visual-mob.webp) type("image/webp") 1x,
            url(./img/moldbread-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: image-set(
            url(./img/moldbread-visual-mob.webp) type("image/webp") 1x,
            url(./img/moldbread-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: url(./img/moldbread-visual-mob.jpg);
    }
    .sweets-visual {
        background-image: -webkit-image-set(
            url(./img/sweets-visual-mob.webp) type("image/webp") 1x,
            url(./img/sweets-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: image-set(
            url(./img/sweets-visual-mob.webp) type("image/webp") 1x,
            url(./img/sweets-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: url(./img/sweets-visual-mob.jpg);
    }
    .muffin-visual {
        background-image: -webkit-image-set(
            url(./img/muffin-visual-mob.webp) type("image/webp") 1x,
            url(./img/muffin-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: image-set(
            url(./img/muffin-visual-mob.webp) type("image/webp") 1x,
            url(./img/muffin-visual-mob.jpg) type("image/jpeg") 1x
        );
        background-image: url(./img/muffin-visual-mob.jpg);
    }
    .cert-visual  {
        height: 553px;
        background-position: top;
        margin-bottom: 5em;
    }
    .appli-details-item {
        flex-direction: column;
        gap: 0.3rem;
    }
    .appli-details-term dt {
        width: auto;
        margin-right: 0;
    }
}
@media (max-width:430px) {
    .cert-visual {
        height: 697px;
        margin-bottom: 0;
   }
   .shapedbread-visual h2,
    .moldbread-visual h2,
    .sweets-visual h2,
    .muffin-visual h2 {
        margin-bottom: 3em;
    }
    .shapedbread-top,
    .moldbread-top,
    .sweets-top,
    .muffin-top {
        padding-top: 5em;
    }
}

/* img switcher--------------------------------- */
/* ラッパー */
.bl_imgSwitcher {
    inline-size: min(100%, 467px);
    margin-inline: auto;
}

/* メイン画像 */
.bl_imgSwitcher_main img {
    aspect-ratio: 1/1.285;
    inline-size: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity .4s cubic-bezier(.25, 1, .5, 1);
}

/* サムネイルのエリア */
.bl_imgSwitcher_thumb,
.bl_imgSwitcher_thumb-3 {
    display: flex;
    gap: 0 1.5rem;
    justify-content: space-between;
    margin-block-start: 1rem;
}
.bl_imgSwitcher_thumb-3 {
    justify-content: flex-end;
}

/* サムネイルの各ボタン */
.bl_imgSwitcher_btn {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    &::before {
        content: "";
        border-radius: inherit;
        position: absolute;
        inset: 0;
        z-index: 10;
        transition: background-color .4s;
  }

    &:focus-visible::before {
        background-color: var(--overlay-color);
  }

.bl_imgSwitcher_btn img {
        aspect-ratio: 1;
        inline-size: 100%;
        object-fit: cover;
  }
}
@media (any-hover: hover) {
    .bl_imgSwitcher_btn:hover::before {
        background-color: var(--overlay-color);
  }
}
/* is_activeクラスが付与されたら、サムネイルに半透明の黒背景を適用 */
.bl_imgSwitcher_btn.is_active::before {
    background-color: var(--overlay-color);
}

/*
CERTIFICATE COURSE
================================================ */
.certificate-visual {
    background-image: -webkit-image-set(
        url("./img/certificate-visual-full.webp") type("image/webp") 1x,
        url("./img/certificate-visual-full.png") type("image/png") 1x
    );
    background-image: image-set(
        url("./img/certificate-visual-full.webp") type("image/webp") 1x,
        url("./img/certificate-visual-full.png") type("image/png") 1x
    );
    background-image: url("./img/certificate-visual-full.png");
    width: 100vw;
    height: 395px;
    margin-bottom: 5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.certificate-step {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    position: absolute;
    z-index: 110;
    padding: 1em;
    margin-left: 30vw;
}
.certificate-step h2 {
    font-size: 2.4rem;
    font-weight: 600;
    padding-bottom: 0.3em;
    margin-bottom: 0.7em;
    border-bottom: 1px dotted var(--black);
}
.certificate-step {
    background-color: rgb(255 255 255 / 61%);
}
.certificate-step li {
    margin-bottom: 0.7em;
}
.step-wrapper {
    max-width: 1024px;
    margin-inline: auto;
    margin-bottom: 12em;
    padding: 5em 5em 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 1px var(--mildGray);
    border-radius: 10px;
    position: relative;
}
.step-wrapper::before,
.step-wrapper::after {
    content: "";
    position: absolute;
    bottom: -6em;
    left: calc(50% - 1px);
    width: 2px;
    height: 45px;
    border-radius: 9999px;
    background-color: var(--mildGray);
    transform-origin: 50% calc(100% - 1px);
}
.step-wrapper::before {
  transform: rotate(45deg);
}
.step-wrapper::after {
  transform: rotate(-45deg);
}
.step-wrapper:last-of-type {
     margin-bottom: 5em;
}
.step-wrapper-end::before,
.step-wrapper-end::after {
    content: none;
}
.step-wrapper-end {
    margin-bottom: 2em;
}
.cert-step-inner h2,
.support h2,
.activity h2 {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 5em;
}
.support h2,
.activity h2 {
    margin-bottom: 1.5em;
}
.cert-step-inner h3 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 0.3em;
}
.step-label,
#step-moldbread.step-label {
    width: 100px;
    height: 100px;
    padding-top: 1.7em;
    font-family: 'Encode Sans';
    font-size: 2.0rem;
    text-align: center;
    border-radius: 50%;
    background-color: var(--bgBeige);
    position: absolute;
    top:-2.6em;
}
.step-label {
    background-color: var(--lightGray);
}
.step-card__a {
    max-width: 65%;
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
    gap: 5em;
}
.step-card__a li {
    width: 50%;
    text-align: center;
}
.step-card__a li img {
    border: solid 1px var(--lightGray);
    box-shadow: 5px 6px 9px -3px rgba(0, 0, 0, 0.38);
    margin-bottom: 1em;
}

.step-card__b {
    max-width: 100%;
    margin-top: 2em;
    display: flex;
    justify-content: space-around;
}

@media (max-width:1024px) {
    .step-card__b {
    max-width: 100%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
    .step-card__b li {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: 240px;
    text-align: center;
    }
}
.step-card__c {
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2em;
}
.step-card-text {
    width: 60%;
    flex-shrink: 1;
    flex-grow: 1;
    text-align: left;
}
.step-card-text h3 {
    text-align: left;
}
.step-card-item {
    width: 40%;
    flex-shrink: 0;
}
.step-card-item-b {
    max-width: 228px;
    margin-top: 2em;
}
.step-card-item img,
.step-card-item-b img {
    border: solid 1px var(--mildGray);
}
.step-moldbread {
    max-width: 1024px;
    width: 90%;
    margin: 0 auto;
    padding: 5em 0 6em;
}
.support {
    padding: 6em 0;
}
.support ul {
    list-style-type: disc;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 2em 3em 2em;
    background-color: var(--white);
    border: solid 1px var(--lightGray);
    border-radius: 10px;
    /* box-shadow: 5px 6px 9px -3px rgba(0, 0, 0, 0.38); */
}
.support li {
    margin-bottom: 1em;
}
.support li:last-of-type {
    margin-bottom: 0;
}
.support img {
    border-radius: 10px;
    /* box-shadow: 5px 6px 9px -3px rgba(0, 0, 0, 0.38); */
}
.support-inner {
    display: flex;
    justify-content: space-between;
}
.support-summary,
.support-inner,
.activity-summary {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 0 2em;
    text-justify: inter-character;
}
.support-inner {
    display: flex;
    justify-content: space-between;
}
.support-text {
    width: 50%;
}
.support-text p {
    line-height: 1.7;
    padding-bottom: 1.5em;
}
.support-img {
    width: 45%;
}
.support-item {
    width: 60%;
}
.support-links {
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 2em 3em 2em;
}
.activity-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 2em;
}
.activity ul {
    list-style-type: disc;
    margin-bottom: 3em;
    margin-left: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.activity li {
    width: 40%;
    margin-right: 1em;
    flex-grow: 1;
}
.activity h3 {
    font-size: 1.8rem;
    padding-left: 0.8em;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    border-bottom: solid 1px var(--btnGray);
    position: relative;
}
.activity h3::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 27px;
    left: 0;
    background-color: var(--btnGray);
    border-radius: 45%;
    border: solid 2px var(--white);
}
@media (max-width:768px) {
    .certificate-visual {
         background-image: -webkit-image-set(
            url(./img/certificate-visual.webp) type("image/webp") 1x,
            url(./img/certificate-visual.png) type("image/png") 1x
            );
            background-image: image-set(
            url(./img/certificate-visual.webp) type("image/webp") 1x,
            url(./img/certificate-visual.png) type("image/png") 1x
            );
            background-position: left;
    }
    .certificate-step {
        margin-left: 0;
    }
    .cert-step-inner h2,
    .support h2,
    .activity h2 {
        font-size: 2.4rem;
        margin-bottom: 5em;
    }
    .support h2,
    .activity h2 {
        margin-bottom: 1.5em;
    }
    .cert-step-inner h3 {
        font-size: 2.0rem;
        margin-bottom: 0.3em;
    }
    .step-wrapper{
        padding: 5em 3em 3em;
    }
    .step-card__a {
        max-width: 100%;
    }
    .support-inner {
        flex-direction: column-reverse;
        gap: 2em;
    }
    .support-text {
        width: 100%;
    }
    .support-img {
        width: 100%;
    }
    .support-item {
        width: 100%;
    }
    .support-links {
        margin-bottom: 0;
        padding: 0;
    }
    .activity li {
        width: 100%;
    }
}
@media (max-width:430px) {
    .certificate-step {
        height: 100%;
    }
    .step-wrapper {
        border-left: 0;
        border-right: 0;
        padding: 5em 0.5em 1em;
    }
    .cert-step-inner h2,
    .support h2,
    .activity h2 {
        font-size: 2.2rem;
        margin-bottom: 5em;
    }
    .support h2,
    .activity h2 {
        margin-bottom: 1.5em;
    }
    .cert-step-inner h3 {
        font-size: 2.0rem;
        margin-bottom: 0.3em;
    }
    .certificate-step h2 {
        font-size: 2.2rem;
    }
    .step-card__a,
    .step-card__c {
        flex-direction: column;
        align-items: center;
    }
    .step-card__a li,
    .step-card-item {
        width: 85%;
    }
    .step-card-text {
        width: 100%;
    }
    .support {
        padding: 1em 0;
    }
    .support ul {
        padding: 2em 1em 2em 2em;
    }
}

/*
INSTRUCTOR INFO
================================================ */
/* ページ全体のコンテンツラッパー */
.instructor-page-content,
.shop-page-content {
    width: 100%;
    margin-inline: auto;
    padding: 0px;
}

/* INSTRUCTOR INFO (日本地図を含むセクション) */
.instructor-visual,
.shop-visual {
    width: 100%;
    height: 100vh; /* 高さ固定（必要に応じて調整） */
    margin-bottom: 5em;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    overflow: hidden;
}

.instructor-visual {
    background-image: -webkit-image-set(
        url(./img/instructor-visual-full.webp) type("image/webp") 1x,
        url(./img/instructor-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/instructor-visual-full.webp) type("image/webp") 1x,
        url(./img/instructor-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/instructor-visual-full.jpg);
}
.shop-visual {
    background-image: -webkit-image-set(
        url(./img/shop-visual-full.webp) type("image/webp") 1x,
        url(./img/shop-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: image-set(
        url(./img/shop-visual-full.webp) type("image/webp") 1x,
        url(./img/shop-visual-full.jpg) type("image/jpeg") 1x
    );
    background-image: url(./img/shop-visual-full.jpg);
}

/* マップ上のコンテンツ（タイトル、説明、地域のリスト） */
.map-content {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 2;
    text-align: left;
    color: var(--white);
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}
.map-content__title {
    font-size: max(3.0vw, 2em);
    letter-spacing: 0.1em;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.37);
    margin-bottom: 0.5em;
}
/* 日本地図上の地域のリスト */
.instructor-intro__regions {
    position: absolute;
    right: 3em;
    top: 5em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.361);
    padding: 0.5em;
    border-radius: 5px;
}
.instructor-intro__regions li {
    text-align: center;
}
.instructor-intro__regions li a {
    border: solid 1px rgba(255, 255, 255, 0);
    color: var(--white);
    padding: 0.5em 0.5em;
    border-radius: 5px;
    white-space: nowrap;
    display: block;
    width: 100%;
    transition: border-color 0.3s, color 0.3s;
}
.instructor-intro__regions li a:hover {
    border: solid 1px var(--white);
    color: var(--white); /* ホバー時の文字色もデフォルトの文字色を維持 */
    opacity: 0.7;
}
/* 日本地図のコンテナとSVGスタイル */
.svg-container {
    /* 既存のCSSを活かす */
    position: absolute;
    top: 0;
    width: auto;
    height: 80%;
    z-index: 3; /* 地図が重なるように */
}
svg {
    width: 90%;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}
.japan-map-svg {
    object-fit: contain; /* 縦横比を維持 */
    z-index: 4;
}

/* 各都道府県/地域のデフォルトスタイル */
.japan-map-svg path {
    fill: #ffffff;
    stroke: #333333;
    stroke-width: 1px;
    transition: fill 0.3s ease, opacity 0.3s ease;/* ホバーアニメーション */
    opacity: 0.5;
}

/* ホバー時のスタイル */
.japan-map-svg path:hover {
    fill: #ffffff; /* ホバー時の色 */
    cursor: pointer;
    opacity: 1;
}

/* ホバー時のスタイル */
.japan-map-svg path:active {
    fill: #ffffff; /* ホバー時の色 */
    cursor: pointer;
}

/* 地域ブロック（インストラクターカード群） */
.region-block {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    margin-bottom: 40px;
    padding: 20px;
}
.region-block__heading {
    font-size: 2.0rem;
    font-weight: 600;
    margin-bottom: 2em;
    padding-bottom: 0.2em;
    border-bottom: 1px dotted var(--btnGray);
}
/* インストラクターカードのコンテナ（Flexboxで2列に） */
.instructor-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: space-between;
}
/* 新規追加: instructor-cards-container が子要素を1つしか持たない場合 */
.instructor-cards-container:has(> .instructor-card:only-child) {
    justify-content: flex-start; /* 左寄せにする */
}
/* 個々のインストラクターカード */
.instructor-card {
    flex: 1 1 calc(50% - 1.5em);
    max-width: 450px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: var(--white); /* var(--white)を使用 */
}
/* 各情報項目（開催地、お名前、URL） */
.instructor-card__info-item {
    display: flex;
    justify-content: flex-start;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--btnGray);
    align-items: baseline;
}
.instructor-card__info-item:last-of-type {
    border-bottom: none;
}
.instructor-card__label {
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 1.5em;
    min-width: 80px;
}
.instructor-card__value {
    flex-grow: 1;
    overflow-wrap: break-word;
}

/* 開催講座内容のセクション */
.instructor-card__course-content {
    padding: 8px 0;
    border-bottom: 1px solid var(--btnGray);
    margin-bottom: 0.5em;
}
.instructor-card__course-content .instructor-card__label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    width: auto;
    min-width: auto;
}
.instructor-card__course-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.instructor-card__course-list li {
    display: flex;
    align-items: flex-start;
    padding: 3px 0;
    font-size: 0.95em;
    color: #444; /* そのまま維持 */
}

/* カスタムチェックボックスの基本スタイル */
.custom-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid black;
    border-radius: 3px;
    background-color: var(--white); /* var(--white)を使用 */
    flex-shrink: 0;
    margin-right: 8px;
    position: relative;
    top: 2px;
}

/* チェックが入った状態のカスタムチェックボックス */
.custom-checkbox.checked-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 12px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* URLリンクのスタイル */
.instructor-card__info-item--url {
    margin-top: auto;
}
.instructor-card__link {
    font-family: 'Encode Sans', sans-serif;
    font-weight: 600;
    color: var(--black); /* リンク色をデフォルトの文字色（var(--black)）に設定 */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.instructor-card__link:hover {
    color: #555; /* ホバー時に少し濃いグレーに */
    text-decoration: underline;
}


/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .instructor-visual {
        flex-direction: column;
    }
}
@media (max-width: 900px) {
    /* 日本地図セクション */
    .instructor-visual,
    .shop-visual {
        height: 600px;
    }
    .map-content {
        width: 50%;
        left: 3%;
    }
    .map-content__title {
        font-size: max(4vw, 1.8em);
    }
    .svg {
        width: 100%;
    }
    .instructor-intro__regions {
        right: 1em;
        top: 3em;
    }
    /* インストラクターカードセクション */
    .instructor-cards-container {
        gap: 15px;
    }
    .instructor-card {
        flex: 1 1 calc(50% - 7.5px);
        max-width: none;
    }
}

@media (max-width: 600px) {
    /* 日本地図セクション */
    .instructor-visual,
    .shop-visual {
        height: 450px;
    }
    .map-content {
        padding: 10px;
    }
    .map-content__title {
        font-size: 1.5em;
    }
    .map-content__description {
        font-size: 0.9em;
        margin-bottom: 1em;
        width: 77%;
    }
    .instructor-intro__regions li a {
        font-size: 0.9em;
    }
    .instructor-intro__photo-credit {
        font-size: 0.7em;
        right: 1em;
        bottom: 0.3em;
    }

    /* インストラクターカードセクション */
    .region-block {
        padding: 15px;
    }
    .region-block__heading {
        font-size: 1.5em;
    }
    .instructor-cards-container {
        flex-direction: column;
        gap: 15px;
    }
    @media (max-width: 600px) {
        .instructor-cards-container:has(> .instructor-card:only-child) {
            justify-content: flex-start; /* 左寄せにする */
            align-items: flex-start; /* flex-direction: column; の場合に左寄せ */
        }
    }
    .instructor-card {
        flex: 1 1 100%;
        max-width: none;
    }
    .instructor-card__label {
        width: 70px;
    }
}
@media (max-width:430px) {
    .map-content__title {
        font-size: 2rem;
    }
    .svg-container {
        top: -20%;
        left: -3%;
    }
    .instructor-visual {
        background-image: -webkit-image-set(
            url(./img/instructor-visual-mob.webp) type("image/webp") 1x,
            url(./img/instructor-visual-mob.png) type("image/png") 1x
        );
        background-image: image-set(
            url(./img/instructor-visual-mob.webp) type("image/webp") 1x,
            url(./img/instructor-visual-mob.png) type("image/png") 1x
        );
        background-image: url(./img/instructor-visual-mob.png);
    }
}

/*
SHOP INFO
================================================ */
/* インストラクターカードのコンテナ（Flexboxで2列に） */
.shop-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: space-between;
}
/* 新規追加: instructor-cards-container が子要素を1つしか持たない場合 */
.shop-cards-container:has(> .shop-card:only-child) {
    justify-content: flex-start; /* 左寄せにする */
}
/* 個々のインストラクターカード */
.shop-card {
    flex: 1 1 calc(50% - 1.5em);
    max-width: 450px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: var(--white); /* var(--white)を使用 */
}
/* 各情報項目（開催地、お名前、URL） */
.shop-card__info-item {
    display: flex;
    justify-content: flex-start;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--btnGray);
    align-items: baseline;
}
.shop-card__info-item:last-of-type {
    border-bottom: none;
}
.shop-card__label {
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 1.5em;
    min-width: 80px;
}
.shop-card__value {
    flex-grow: 1;
    overflow-wrap: break-word;
}
.shop-card__sales-item-content { /* インストラクターの course-content に相当 */
    padding: 8px 0;
    border-bottom: 1px solid var(--btnGray);
    margin-bottom: 0.5em;
}
.shop-card__sales-item-content .shop-card__label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    width: auto;
    min-width: auto;
}
.shop-card__sales-item-list li { /* チェックボックスリスト */
    display: flex;
    align-items: flex-start;
    padding: 3px 0;
    font-size: 0.95em;
    color: #444;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    /* インストラクターカードセクション */
    .shop-cards-container {
        gap: 15px;
    }
    .shop-card {
        flex: 1 1 calc(50% - 7.5px);
        max-width: none;
    }
}

@media (max-width: 600px) {
    /* インストラクターカードセクション */
    .shop-cards-container {
        flex-direction: column;
        gap: 15px;
    }
    @media (max-width: 600px) {
        .shop-cards-container:has(> .shop-card:only-child) {
            justify-content: flex-start; /* 左寄せにする */
            align-items: flex-start; /* flex-direction: column; の場合に左寄せ */
        }
    }
    .shop-card {
        flex: 1 1 100%;
        max-width: none;
    }
    .shop-card__label {
        width: 70px;
    }
}

/*
STORY・BtoB
================================================ */
.story-visual,
.btob-visual {
    width: 100vw;
    height: 700px;
    position: relative;
    margin-bottom: 10vh;
    overflow: hidden;
}
.story-img,
.btob-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.story-img img,
.btob-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.story-visual h2,
.btob-visual h2  {
    width: 100%;
    max-width: 60%;
    font-size: max(24px, 4vw);
    letter-spacing: 0.1em;
    color: var(--white);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.37);
    text-align: right;
    position: absolute;
    z-index: 110;
    top: 22%;
    right: 13%;
}
.story-inner,
.story-inner__rv,
.profile-inner,
.btob-inner__rv,
.btob-inner__rv {
    max-width: 1024px;
    width: 90%;
    margin: 0 auto 5em;
    display: flex;
    justify-content: space-between;
    gap: 6em;
}
.profile-inner {
    gap: 4em;
}
.story-inner__rv,
.profile-inner {
    flex-direction: row-reverse;
}
.profile-wrapper {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}
.btob-inner h2,
.btob-text h2,
.btob-blief h2,
.story-text h2,
.profile-top h2 {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1.5em;
    font-size: 2.4rem;
    line-height: 1;
}
.btob-inner h2 span,
.btob-text h2 span,
.btob-blief h2 span,
.story-text h2 span,
.profile-top h2 span {
    font-family: "Encode Sans", serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 0.5em;
}
.profile-wrapper h3{
    font-size: 2.6rem;
    margin-bottom: 1em;
}
.story-inner p,
.story-text p,
.btob-text p {
    line-height: 2;
    margin-bottom: 1.5em;
}
.story-item,
.profile-item {
    position: relative;
    flex-shrink:0;
    inline-size: min(100%, 467px);
    margin-top: 4.5em;
}
.profile-item {
    margin-top: 0;
}
.story-item-rect,
.ptof-wrapper {
    position: relative;
}
.photo-by {
    position: relative;
}
.story-photo-by,
.prof-photo-by {
    position: absolute;
    font-size: max(1.2rem, 1rem);
    color: var(--white);
    z-index: 150;
}
.prof-photo-by {
    bottom: 1em;
    right: 1em;
}
.story-photo-by {
    bottom: 1em;
    right: 1em;
}


.story-item-rect img {
    border-radius: 10px;
}
.story-profile ul {
    margin-left: 0.5em;
}
.story-profile li {
    margin-bottom: 1.5em;
}
.story-profile li:last-of-type {
    margin-top: 2em;
}
.profile-details {
    width: 90%;
    margin: 0 auto;
}
.profile-details-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--btnGray);
}
.profile-details-item dt {
    flex-shrink: 0;
    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 400;
    margin-right: 2em;
    min-width: 10em;
}
.profile-details-item dd {
    flex-grow: 1;
    flex-shrink: 1;
}
.profile-list-top {
    display: none;
}
.profile-list li {
    margin-bottom: 1em;
    line-height: 1.8;
}

@media (max-width:1024px) {
    .story-inner,
    .story-inner__rv,
    .profile-inner,
    .btob-inner__rv {
        width: 90%;
    }
    .btob-inner__rv {
        width: 100%;
    }
    .story-text h2,
    .komepantry h2,
    .profile-top h2 {
        flex-direction: column;
        gap: 0.2rem;
    }
    .story-text h2 span,
    .komepantry h2 span,
    .profile-top h2 span {
        margin-top: 0.2em;
    }
    .story-inner,
    .story-inner__rv,
    .profile-inner {
        gap: 3em;
    }
    .profile-details {
        width: 95%;
    }
    .story-item,
    .profile-item  {
        inline-size: min(100%, 400px);
    }
    .profile-details-item dt {
        margin-right: 0;
    }

}
@media (max-width: 820px) {
    .story-inner,
    .story-inner__rv
    .profile-inner {
        width: 90%;
        padding-right: 1em;
        padding-left: 1em;
    }
    .profile-inner {
        gap: 0;
        margin-bottom: 2em;
    }
    .story-inner,
    .story-inner__rv,
    .profile-inner {
         flex-direction: column-reverse;
    }
    .story-text h2,
    .komepantry h2,
    .profile-top h2 {
        flex-direction: column;
        gap: 0.1em;
    }
    .story-profile h3 {
        margin-bottom: 0.5em;
    }
    .story-item,
    .profile-item  {
        width: 100vw;
        margin-top: 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: none;
    }
    .story-item-rect img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0;
    }

    .story-profile-lt,
    .profile-list-lt {
        display: none;
    }
    .profile-list-top {
        display: block;
        padding: 2em 3em;
    }
    .profile-details-item {
        flex-direction: column;
        gap: 0.3rem;
    }
    .profile-details-term dt {
        width: auto;
        margin-right: 0;
    }
}
@media (max-width: 430px) {
    .btob-visual,
    .story-visual {
        height: 287px;
        margin-bottom: 6vh;
    }

    .btob-img img,
    .story-img img {
        object-fit: cover;
    }

    .story-visual h2 {
        right: 6%;
    }
    .story-inner__rv {
        width: 90%;
        padding: 0 1em;
    }
    .story-inner,
    .profile-inner {
        gap: 3em;
    }
    .profile-list-top {
        width: 90%;
        margin: 0 auto;
        padding: 2em 1em 0;
    }
}

/*
B TO B SERVICE
================================================ */
.btob-inner {
    margin: 0 auto 5em;
}
.btob-inner h3{
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1em;
}
.btob-list {
    list-style-type: disc;
    margin-left: 2em;
}
.btob-list li {
    margin-bottom: 0.5em;
}
.btob-item {
    display: flex;
    align-items: center;
    gap: 3em;
}
.btob-item-photo {
    display: flex;
    max-width: 250px;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}
.btob-item-photo img {
    border-radius: 10px;
}
.faq {
    margin-bottom: 1em;
}
.faq dt,
.faq dd{
    display: flex;
    gap: 1em;
    font-weight: normal;
}
.faq span {
    width: 50px;
    display: block;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    font-family: "Encode Sans", serif;
    font-size: 2.4rem;
    padding-right: 0.5em;
}
.faq span::after {
    content: '：';
    position: absolute;
    top: 0;
}
@media (max-width:820px) {
    .btob-inner__rv {
        flex-direction: column;
    }
    .btob-inner h2,
    .btob-text h2,
    .btob-blief h2 {
        flex-direction: column;
        gap: 0.1em;
    }
    .btob-inner h2,
    .btob-text h2
    .btob-blief h2 {
        font-size: 2.2rem;
    }
    .btob-inner h2 span,
    .btob-text h2 span,
    .btob-blief h2 span {
        margin-top: 0.2em;
    }
    .btob-item {
        flex-direction: column;
    }
    .btob-item-photo {
    flex-direction: row;
    justify-content:center;
    gap: 1em;
    }
}
@media (max-width:430px) {
    .btob-item-photo {
        width: 100%;
        max-width: calc(100% / 3);
        gap: 0.5em;
    }
}
/* slick slider----------------------------------------*/
#wrapper {
    overflow: hidden;
    margin-bottom: 5em;
}
.content_area{
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;
}
.slick-list{
    overflow: visible;
}
.slick-track {
    display: flex;
}
.slick-item {
    height: auto;
    margin: 0 15px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.slick-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.slick-track {
    display: flex;
    align-items: center;
}
@media (max-width:768px) {
    .btob-blief h2 {
        flex-direction:column;
        gap: 0.2em;
    }
}

@media screen and (max-width:560px){
  .content_area{
    padding: 0 30px;
  }
  .slick-item p {
    font-size: 15px;
    line-height: 100px;
    margin: 5px;
    padding: 1.5%;
  }
}
/*
NEWS, PRIVACY, 404
================================================ */
.privacy h3,
.privacy h4 {
    font-size: 1.8rem;
    font-weight: 600;
}
.page404 p,
.privacy p {
    margin-bottom: 2em;
}
.page404,
.privacy,
.news-top {
    position: relative;
    max-width: 1024px;
    margin: 2em auto 0;
    padding: 0 1em;
}
.news-top h3,
.sidebar-inner h3 {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.news-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 2em auto 3em;
    padding: 0 1em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.news-content {
    width: 70%;
}
.news-inner {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 0.5em;
}
.news-list > li {
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: solid 1px var(--lightGray) ;
}
.sidebar-inner {
    margin-bottom: 3em;
}
.sidebar-inner h3 {
    padding-bottom: 0.1em;
    margin-bottom: 0.3em;
    border-bottom: 1px solid var(--black);
}
.news-sidebar {
    width: 20%;
    font-size: 1.4rem;
}
.wp-pagenavi {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    flex-wrap: wrap;
    margin-bottom: 3em;
}
.wp-pagenavi span.current,
.wp-pagenavi a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-weight: 500;
    transition: 0.3s ease-in;
}
.wp-pagenavi span.current {
    background-color: var(--lightGray);
    color: var(--white);
}
.wp-pagenavi a {
    color: var(--black);
}
.wp-pagenavi a:hover {
    background-color: var(--mildGray);
    color: var(--white);
}
@media (max-width:768px) {
    .news-wrapper {
        flex-direction: column;
    }
    .news-content,
    .news-sidebar {
        width: 100%;
        margin-bottom: 2em;
    }
}
/*
NEWS-single
================================================ */
.post-wrapper {
    position: relative;
    padding-bottom: 1.5em;
    margin-bottom: 1em;
}
.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}
.post-title {
    position: relative;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1em;
}
.post-wrapper::after,
.post-title::after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 3px;
    background-image: repeating-linear-gradient(-45deg, #aaa 0, #aaa 1px, transparent 0, transparent 50%);
    background-size: 3px 3px;
}
.post-title::after {
    bottom: -5px;
}
.post-wrapper::after {
    bottom: 0;
}
.news-content_wrapper {
    display: flex;
    justify-content: space-around;
    gap: 3em;
}
.news-content_wrapper img {
    width: 35%;
    min-width: 200px;
    max-width: 400px;
}
.post-content-default {
    all: revert; /*ブラウザのユーザーエージェントスタイルシートに戻す*/
}
/* 上記だけだと一部ブラウザで効かないので、念のため基本も戻す */
.post-content-default p,
.post-content-default ul,
.post-content-default ol,
.post-content-default h1,
.post-content-default h2,
.post-content-default h3,
.post-content-default h4,
.post-content-default h5,
.post-content-default h6,
.post-content-default blockquote,
.post-content-default pre {
    all: revert;
}

.page-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    margin-top: 1em;
    margin-bottom: 5em;
    font-size: 1.4rem;
    font-weight: 500;
}
.page-nav_inner {
    display: flex;
    justify-content: space-between;
    gap: 2em;
}
@media (max-width:480px) {
    .news-content_wrapper {
        flex-direction: column;
        align-items: center;
    }
    .news-content_wrapper img {
        width: 80%;
    }
}