@charset 'utf-8'; /* ---------------------------------
	0. Reset CSS
--------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, input, select, textarea, button, legend, table, caption, tbody, tfoot, thead, tr, th, td, main, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: sans-serif;
    font-style: inherit;
    font-weight: 600;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}

html, body {
    font-size: 16px;
}

body {
    line-height: 1;
}

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, button, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label, button {
    cursor: pointer;
    user-select: none;
}

/* ---------------------------------
	1. Common
--------------------------------- */
body {
    color: #333;
    font-family: "Noto Serif", serif;
    line-height: 1.4;
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
}

p {
    margin-bottom: 1rem;
    font-size: 14px;
    line-height: 2;
    color: #555;
}

a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------
	2. Parts
--------------------------------- */
.content-inner, .product-page {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 5rem 3rem;
}

.content-article, .blog-article {
    max-width: 800px;
    margin: auto;
}

.content-article:before, .blog-article:before {
    content: '';
    position: fixed;
    width: 150px;
    height: 50px;
    top: 20%;
    left: 10%;
    background: url(https://zexer.chips.jp/wp-content/themes/zexer/image/common/logo.png) center / contain no-repeat;
    z-index: -999;
    opacity: 0.1;
}

.content-article:after, .blog-article:after {
    content: '';
    position: fixed;
    width: 150px;
    height: 50px;
    bottom: 30%;
    right: 10%;
    background: url(https://zexer.chips.jp/wp-content/themes/zexer/image/common/logo.png) center / contain no-repeat;
    z-index: -999;
    opacity: 0.1;
}

@media (max-width: 1280px) {
    .content-inner, .product-page {
        padding: 3.5rem 1rem;
    }
}

p.content-copy {
    margin-bottom: 3rem;
    text-align: center;
    color: #555;
    font-size: 14px;
}

.only-sp {
    display: block;
}

.only-pc {
    display: none;
}

@media (min-width: 768px) {
    .only-sp {
        display: none;
    }

    .only-pc {
        display: block;
    }
}

/* Headline */
.content-headline {
    margin-bottom: 3.5rem;
    color: #555;
    font-weight: bold;
    text-align: center;
}

.content-headline::before {
    margin-bottom: 0.5rem;
    content: attr(data-title);
    display: block;
    font-family: sans-serif;
    font-size: 32px;
    font-style: italic;
    color: #333;
}

/* Button */
.button-wrap {
    text-align: center;
}

.button-wrap a {
    max-width: 15rem;
    width: 100%;
    padding: 1.5rem 0;
    border: 1px solid #555;
    border-radius: 0.5rem;
    font-family: sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    color: #555;
    transition: 0.5s;
}

.button-wrap a:hover {
    background: #5555;
    border: 1px solid #5555;
    color: #fff;
    transition: 0.25s;
}

/* Breadcrumbs */
.breadcrumbs ol {
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    font-size: 0.75em;
    line-height: 1.5;
    white-space: nowrap;
}

.breadcrumbs li:not(:last-child)::after {
    padding-left: 0.5rem;
    content: '>';
}

@media (min-width: 1024px) {
    .breadcrumbs ol {
        padding: 0.5rem 2rem;
    }
}

/* Post list */
.post-list li {
    padding-left: 1rem;
    position: relative;
    line-height: 1.4;
}

.post-list li::before {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    content: '';
    display: block;
    background: #ffa7db;
}

/* Pagination */
.pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.pagination h2 {
    display: none;
}

.page-numbers {
    width: 2rem;
    height: 2rem;
    border: 1px solid #4abbc1;
    display: grid;
    justify-content: center;
    align-items: center;
    transition: 0.25s;
    color: #fff;
    background: #4abbc1;
}

@media (min-width: 768px) {
    .page-numbers {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.pagination a:hover {
    color: #4abbc1;
    background: #fff;
}

.page-numbers.current {
    color: #4abbc1;
    background: #fff;
}

.nav-links ul {
    display: flex;
    gap: 0.5rem;
}

/* ---------------------------------
	3. Header
--------------------------------- */
.site-header {
    position: relative;
    z-index: 999;
}

.header-inner-wrap {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.header-inner {
    width: 100%;
    margin-right: auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    max-width: 10rem;
    width: 150px;
}

.header-content {
    margin-right: 4rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sns-list {
    display: flex;
    gap: 1rem;
}

.sns-list img {
    width: 1.5rem;
}

.header-online-store {
    max-width: 8rem;
    width: 100%;
}

.header-online-store img {
    border-radius: 0.5rem;
    box-shadow: 2px 2px 3px 0px rgba(40, 40, 40, 0.4);
    transition: ease 0.5s;
}

.header-online-store img:hover {
    box-shadow: none;
    transform: translate(2px, 2px);
    transition: ease 0.25s;
}

.header-nav {
    background: linear-gradient(-60deg, #abd9e9, #ffa7db);
}

.header-nav-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.header-nav-list {
    width: 90%;
    margin-right: auto;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-around;
    color: #fff;
    font-size: 14px;
    font-family: sans-serif;
    font-style: italic;
    font-weight: bold;
}

.header-nav-list li:last-child {
    margin-right: 5rem;
}

.header-line {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

.header-line img {
    max-width: 8rem;
    width: 100%;
    border-radius: 8px;
    box-shadow: 4px 4px 4px 0px rgba(40, 40, 40, 0.4);
    transition: ease 0.5s;
}

.header-line img:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
    transition: ease 0.25s;
}

@media (min-width: 768px) {
    .header-inner {
        width: 90%;
        padding: 2rem 1rem;
    }

    .header-logo {
        max-width: 15rem;
    }
}

@media (max-width: 767px) {
    .header-nav, .header-content, .header-line {
        display: none;
    }
}

/* ---------------------------------
	4. Global menu
--------------------------------- */
.global-menu-button {
    width: 2rem;
    height: 1.5rem;
    position: relative;
}

.global-menu-button span {
    width: 100%;
    border-bottom: 2px solid #333;
    position: absolute;
    left: 0;
    transition: transform 0.5s, opacity 0.5s, top 0.5s, bottom 0.5s;
    display: block;
}

.global-menu-button span:nth-of-type(1) {
    top: 0;
}

.global-menu-button span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.global-menu-button span:nth-of-type(3) {
    bottom: 0;
}

.global-menu-button.close span:nth-of-type(1) {
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
}

.global-menu-button.close span:nth-of-type(2) {
    opacity: 0;
}

.global-menu-button.close span:nth-of-type(3) {
    bottom: 50%;
    transform: rotate(-45deg) translateY(50%);
}

.global-menu {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow-y: scroll;
    display: grid;
    background: linear-gradient(325deg, #abd9e9, #ffa7db);
}

.global-menu-list {
    padding: 0 1rem;
    color: #fff;
}

.global-menu-list li {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #fff, transparent);
    border-image-slice: 1;
}

.global-menu-list li a {
    width: 100%;
    padding-left: 1rem;
}

.global-menu-list li a::before {
    content: attr(data-deco);
    display: block;
    font-size: 10px;
    position: relative;
    left: -1rem;
    font-style: italic;
    color: #fffa;
}

.global-button-list {
    display: flex;
    padding: 1rem;
    justify-content: center;
    gap: 2rem;
}

.global-sns-link {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.global-sns-link img {
    width: 1.5rem;
}

body.fixed {
    width: 100%;
    height: 100%;
    position: fixed;
}

/* ---------------------------------
	5. Footer
--------------------------------- */
.site-footer {
    background: linear-gradient(-75deg, #abd9e9, #ffa7db);
}

.footer-trial {
    display: grid;
    align-items: center;
    position: relative;
    background: url(/wp-content/themes/zexer/image/common/trial-back.jpg) center center / auto repeat;
}

.footer-trial::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: '';
    background: rgba(255, 255, 255, 0.9);
}

.footer-trial-image, .footer-trial-content {
    position: relative;
    z-index: 1;
}

.footer-trial-content {
    display: grid;
    gap: 1.5rem;
    padding: 0 3rem;
    font-size: 0.9em;
    text-align: center;
}

.footer-trial-content p {
    text-align: left;
}

.footer-trial-content img {
    max-width: 200px;
    width: 150px;
    margin: 0 auto;
}

.footer-line-button img {
    border-radius: 0.5rem;
    box-shadow: 4px 4px 4px 0px rgba(40, 40, 40, 0.4);
    transition: ease 0.5s;
    width: 200px;
}

.footer-line-button img:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
    transition: ease 0.25s;
}

@media (min-width: 767px) {
    .footer-trial {
        grid-template-columns: 6fr 4fr;
    }
}

.footer-content {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 1rem 2rem;
}

.footer-logo {
    max-width: 150px;
    width: 100%;
}

.footer-external-link {
    margin-bottom: 2.5rem;
}

.footer-onlinestore, .footer-line {
    max-width: 150px;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 2px 2px 3px 0px rgba(40, 40, 40, 0.4);
    transition: ease 0.5s;
}

.footer-onlinestore:hover, .footer-line:hover {
    box-shadow: none;
    transform: translate(2px, 2px);
    transition: ease 0.25s;
}

.footer-link-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
}

.footer-sns-link {
    display: flex;
    gap: 1rem;
}

.footer-sns-link img {
    width: 25px;
}

.footer-menu {
    margin-bottom: 3rem;
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(2,1fr);
    grid-auto-flow: column;
    gap: 1rem;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.policy-menu {
    width: max-content;
    display: grid;
    grid-template-rows: repeat(1, auto);
    grid-auto-flow: column;
    gap: 1rem;
    color: #fff;
    font-size: 10px;
    text-align: center;
    margin: auto auto 2rem;
}

.copy-right {
    color: #fff;
    font-size: 12px;
    text-align: center;
    font-weight: 100;
}

@media (min-width: 768px) {
    .footer-external-link {
        width: 800px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto 3rem;
    }

    .footer-link-list {
        display: flex;
        align-items: center;
        gap: 2.5rem;
    }

    .footer-menu {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
}

@media (max-width: 1280px) {
    .footer-trial-content {
        padding: 1rem 3rem;
    }

    .footer-content {
        padding: 3rem 1rem 2rem;
    }
}

@media (max-width: 767px) {
    .footer-external-link {
        text-align: center;
    }

    .footer-link-list {
        margin-top: 2.5rem;
    }

    .footer-link-list li:nth-of-type(3) {
        grid-column: 1 / 3;
    }

    .footer-sns-link {
        justify-content: center;
    }

    .footer-trial-content {
        padding: 1.5rem 1rem 3.5rem;
    }
}

/* ---------------------------------
	6. Post & Page
--------------------------------- */
.post-header {
    position: relative;
    background: url(https://zexer.chips.jp/wp-content/themes/zexer/image/common/back01.jpg) center / cover;
    background-color: rgba(255,255,255,0.9);
    background-blend-mode: lighten;
}

.post-header-background {
    height: 28vh;
    width: 60%;
    background: center right / cover no-repeat;
}

.post-header-content {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    font-weight: bold;
    text-align: center;
    color: #555;
}

.post-header-content h1:before {
    margin-bottom: 0.5rem;
    display: block;
    content: attr(data-title);
    font-family: sans-serif;
    font-size: 20px;
    font-style: italic;
    text-transform: uppercase;
    color: #333;
}

.description {
    margin-bottom: 3.5rem;
    line-height: 2;
    text-align: center;
    color: #555;
}

@media (min-width: 768px) {
    .post-header-background {
        height: 75vh;
    }

    .post-header-content {
        right: 20%;
    }

    .post-header-content h1:before {
        font-size: 32px;
    }
}

/* Menu list */
.menu-list {
    overflow: hidden;
}

.menu-list li {
    position: relative;
}

.menu-list li::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: '';
    background: rgba(255, 255, 255, 0.9);
}

.menu-list li:nth-of-type(1) {
    background: url(/wp-content/themes/zexer/image/front-page/program-back.jpg) center center / auto repeat;
}

.menu-list li:nth-of-type(2) {
    background: url(/wp-content/themes/zexer/image/front-page/beginner-back.jpg) center center / auto repeat;
}

.menu-list li:nth-of-type(3) {
    background: url(/wp-content/themes/zexer/image/front-page/trainer-back.jpg) center center / auto repeat;
}

.menu-list-image, .menu-list-content {
    position: relative;
    z-index: 1;
}

.menu-list-content {
    padding: 1.5rem 0;
}

.menu-list-content p {
    margin-bottom: 3rem;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    color: #777;
}

@media (min-width: 768px) {
    .menu-list li {
        display: grid;
        align-items: center;
    }

    .menu-list li:nth-of-type(odd) {
        grid-template-columns: 4fr 6fr;
    }

    .menu-list li:nth-of-type(even) {
        grid-template-columns: 6fr 4fr;
    }

    .menu-list li:nth-of-type(odd) .menu-list-image {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
}

@media (max-width: 767px) {
    .menu-list li {
        padding-bottom: 3.5rem;
    }

    .menu-list-image {
        margin-bottom: 2.5rem;
    }
}

/* Concept list */
.concept-list {
    margin-bottom: 3.5rem;
    display: grid;
    gap: 2.5rem;
}

.concept-list h4 {
    position: relative;
    margin-bottom: 0.5rem;
    padding: 1rem 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    background: linear-gradient(-60deg, #abd9e9, #ffa7db);
}

.concept-list h4 span {
    position: absolute;
    right: 5px;
    color: #fff2;
    font-size: 54px;
    font-weight: 100;
    line-height: 0;
}

.concept-detail {
    padding: 0 0 0 1rem;
    border-left: 4px solid #abd9e9;
    border-image: linear-gradient(to top, #abd9e9 0%, #ffa7db 100%);
    border-image-slice: 1;
    font-size: 12px;
    line-height: 2;
    color: #555;
}

@media (min-width: 768px) {
    .concept-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Media */
.media {
    position: relative;
    background: url(/wp-content/themes/zexer/image/front-page/media-back.jpg) center center / auto repeat;
}

.media::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: '';
    background: rgba(255, 255, 255, 0.9);
}

.media .content-inner {
    position: relative;
    z-index: 1;
}

.media-grid {
    display: grid;
    gap: 3.5rem;
}

.youtube-list, .blog-list {
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    color: #555;
    font-size: 14px;
}

.youtube-list iframe {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    aspect-ratio: 4 / 3;
}

.blog-list img {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;
    }

    .youtube-list, .blog-list {
        gap: 2.5rem;
        line-height: 2;
    }
}

/* Interviewコンテンツ */
.interview {
    background: linear-gradient(180deg, #fff, #ffa7db);
}

.interview-slider-content {
    margin: 0 1rem;
}

.interview-slider-content a {
    padding: 2rem 2rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    color: #555;
}

.interview-slider-content img {
    margin-bottom: 1rem;
}

.interview-category {
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
}

.interview-category li {
    padding: 0.25rem 0.5rem;
    color: #fff;
    font-size: 0.75em;
}

.interview-category li:nth-of-type(1) {
    background: #4abbc1;
}

.interview-category li:not(:first-child) {
    background: #e26862;
}

.slick-dots li button:before {
    color: #fff !important;
    font-size: 50px !important;
}

.slick-next::before, .slick-prev::before {
    font-size: 40px !important;
    line-height: 0 !important;
}

.slick-next::before {
    content: ">" !important;
    font-weight: 100;
}

.slick-prev::before {
    content: "<" !important;
    font-weight: 100;
}

@media (max-width: 1280px) {
    .slick-prev {
        left: -0.5rem !important;
        z-index: 1 !important;
    }

    .slick-next {
        right: -0.5rem !important;
    }

    .slick-next::before, .slick-prev::before {
        font-size: 28px !important;
    }
}

/* トレーニー個別ページ */
.trainer-detail {
    position: relative;
    background: url(/wp-content/themes/zexer/image/front-page/concept-back.jpg) center center / auto repeat;
}

.trainer-detail::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: '';
    background: rgba(255, 255, 255, 0.9);
}

.trainer-detail-inner {
    margin: 0 auto;
    padding: 5rem 0 0;
    position: relative;
    z-index: 1;
}

.trainer-profile {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto 5rem;
    display: grid;
    gap: 2.5rem;
}

.trainer-profile span {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9em;
}

.trainer-profile h3 {
    font-weight: bold;
}

.trainer-profile h3::after {
    margin-left: 1rem;
    content: attr(data-name);
    display: inline-block;
    font-size: 0.9em;
    font-weight: normal;
}

.trainer-profile div:nth-of-type(1) h3 {
    padding-bottom: 0.75rem;
    border-bottom: 4px solid #abd9e9;
    border-image: linear-gradient(to left, #abd9e9 0%, #ffa7db 100%);
    border-image-slice: 1;
}

.trainer-profile .post-list {
    margin-top: 1rem;
}

.trainer-message {
    padding: 5rem 0;
    background: #fff;
}

.trainer-message-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .trainer-profile {
        grid-template-columns: repeat(2, 1fr);
    }

    .trainer-message-inner {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 1280px) {
    .trainer-detail-inner {
        padding: 3.5rem 0 0;
    }

    .trainer-profile {
        padding: 0 1rem;
    }

    .trainer-message {
        padding: 3.5rem 1rem;
    }
}

/* 体験者の声・ブログ */
.article-list {
    display: grid;
    gap: 2.5rem;
}

.article-list a {
    padding: 2rem 2rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(-60deg, rgba(171, 217, 233, 0.25), rgba(255, 167, 219, 0.25));
    font-size: 12px;
    color: #555;
}

.article-list-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 1rem;
}

.youtube-list p, .article-list-title {
    height: 6em;
    overflow: scroll;
    margin: 0;
}

.article-list-title p {
    line-height: 1.4;
}

.article-list img, .blog-list img {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .article-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Blog・Interview投稿 */
.story-header-background {
    padding: 5rem 0 3rem;
    text-align: center;
    background: url(/wp-content/themes/zexer/image/front-page/concept-back.jpg) center center / auto repeat;
    background-color: rgba(255,255,255,0.9);
    background-blend-mode: lighten;
}

@media (max-width: 1280px) {
    .story-header-background {
        padding: 5rem 1rem 3rem;
    }
}

.story-header-content h2 {
    margin-bottom: 2rem;
    font-size: 1.75em;
}

.story-inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 3.5rem 1rem;
}

.blog-article img {
    margin: 2.5rem auto 0;
}

.result-image-list {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.before-after-table {
    width: 100%;
    margin-bottom: 5rem;
    table-layout: fixed;
    text-align: center;
}

.before-after-table thead tr th:nth-of-type(2) {
    color: #fff;
    background: #777;
}

.before-after-table thead tr th:nth-of-type(3) {
    color: #fff;
    background: linear-gradient(-60deg, #abd9e9, #ffa7db);
}

.before-after-table thead th:not(:last-child), .before-after-table tbody th, .before-after-table td:not(:last-child) {
    padding: 1.5rem 0;
    border-top: 2px solid #777;
    border-left: 2px solid #777;
    border-bottom: 2px solid #777;
    background: #fff;
}

.before-after-table thead th:last-child, .before-after-table td:last-child {
    position: relative;
    padding: 10px;
    /* border: 8px solid #ffa7db; */
    color: #cb2828;
}

.before-after-table thead th:last-child:before, .before-after-table td:last-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(-60deg, #abd9e9, #ffa7db);
    color: #cb2828;
    z-index: -2;
}

.before-after-table thead th:last-child:after, .before-after-table td:last-child:after {
    content: '';
    position: absolute;
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    top: 2px;
    left: 4px;
    background: #fff;
    color: #cb2828;
    z-index: -1;
}

.interview-message {
    text-align: center;
}

.previous-next-button {
    max-width: 800px;
    width: 100%;
    margin: 3rem auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 767px) {
    .result-image-list {
        flex-wrap: wrap;
    }

    .article-list {
        gap: 1rem;
    }

    .article-list a {
        display: flex;
        padding: 1rem;
    }

    .article-list-img {
        width: 30%;
        margin-right: 1rem;
        margin-bottom: 0;
    }

    .article-list-title {
        width: 70%;
    }

    .blog-list .article-list-img {
        width: 100%;
        margin: 0 0 1rem;
    }

    .blog-list .article-list-title {
        width: 100%;
    }
}

/* ---------------------------------
	Online Store
--------------------------------- */
.onlinestore {
    position: relative;
    background: url("/wp-content/themes/zexer/image/front-page/online-store-back.jpg") center center / auto repeat;
}

.onlinestore::before {
    position: absolute;
    inset: 0px;
    content: "";
    background: rgba(255, 255, 255, 0.9);
}

.onlinestore .content-inner {
    position: relative;
    z-index: 1;
}

.onlinestore-slider-content {
    margin: 0px 1rem;
}

.onlinestore-slider-content a {
    padding: 2rem;
    border-radius: 0.5rem;
    background: rgba(63, 194, 255, 0.05);
    font-size: 14px;
    color: rgb(85, 85, 85);
}

.onlinestore-slider-content img {
    margin-bottom: 1rem;
}

.onlinestore-detail {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.onlinestore-slider-content p {
    font-size: 0.9em;
    line-height: 2;
}

.onlinestore-slider .slick-dots li button::before {
    color: rgb(133, 166, 190) !important;
}

.onlinestore-slider .slick-next::before, .onlinestore-slider .slick-prev::before {
    color: rgb(133, 166, 190) !important;
}

.onlinestore-button {
    margin-top: 5rem;
    text-align: center;
}

.onlinestore-button a img {
    border-radius: 0.5rem;
    box-shadow: rgba(40, 40, 40, 0.4) 4px 4px 4px 0px;
    transition: 0.5s ease;
    width: 200px;
}

.onlinestore-button a img:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
    transition: 0.25s ease;
}

body .is-layout-flex > * {
    width: 100%;
}

.has-text-align-center {
    text-align: center;
}

.store-message {
    margin-bottom: 3.5rem;
}

.wp-block-heading {
    margin: 5rem 0 3rem;
    padding: 1.5rem 0;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(-75deg, #abd9e9, #ffa7db);
}

.wp-container-7.wp-container-7, .wp-container-14.wp-container-14, .wp-container-21.wp-container-21, .wp-container-28.wp-container-28 {
    margin: 1rem 0;
}

ul.products.columns-4 {
    display: none;
}

.product-page ul.products.columns-4 {
    position: relative;
    display: flex;
}

.wc-block-grid__product-add-to-cart {
    display: none;
}

.wc-block-featured-category {
    min-height: auto!important;
    align-content: center;
    align-items: center;
    background-color: inherit;
    background-position: 50%;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

.background-dim__overlay:before {
    opacity: 0.6!important;
    transition: ease 0.5s;
}

.wc-block-featured-category:hover .background-dim__overlay:before {
    opacity: 0.3!important;
    transition: ease 0.5s;
}

.wc-block-featured-category__background-image {
    transform: scale(1);
    transition: ease 0.5s;
}

.wc-block-featured-category:hover .wc-block-featured-category__background-image {
    transform: scale(1.2);
    transition: ease 0.5s;
}

.wc-block-featured-category .wc-block-featured-category__title {
    text-align: center;
    padding: 1rem 0!important;
    font-size: 1.25em;
}

.wc-block-featured-category__link {
    text-align: center;
    padding: 1rem 0!important;
}

.wp-block-button__link {
    color: #fff;
    background-color: transparent!important;
    border-radius: 9999px;
    border: solid 1px #fff;
    font-size: 1em!important;
    transition: ease 0.5s;
}

.wp-block-button__link:hover {
    color: #fff;
    background-color: #fff7!important;
    border-radius: 9999px;
    border: solid 1px #fff;
    font-size: 1em!important;
    transition: ease 0.25s;
}

.store-topmenu {
    max-width: 600px;
    margin: auto;
}

.store-button {
    max-width: 200px;
    margin: 3rem auto 0!important;
}

.store-button a {
    width: 100%;
    color: #000;
    background-color: #fff!important;
    border-radius: 5px;
    border: solid 1px #000;
    font-size: 1em!important;
    transition: ease 0.5s;
}

.store-button:hover a {
    color: #fff;
    background-color: #000!important;
    border-radius: 5px;
    border: solid 1px #000;
    font-size: 1em!important;
    transition: ease 0.25s;
}

.grecaptcha-badge {
    z-index: 999;
    opacity: 0.3;
}

.grecaptcha-badge:hover {
    opacity: 1;
}

.wc-block-grid .wc-block-grid__product-onsale, .wc-block-grid__product-image .wc-block-grid__product-onsale {
    border: 1px solid #ed7272!important;
    color: #ed7272!important;
}

ins span.woocommerce-Price-amount.amount {
    color: #ed7272!important;
    text-decoration: underline;
}

/*=============================
   contact
=============================*/
#cf-tbl table {
    width: 100%;
    color: #444;
    font-size: 14px;
}

#cf-tbl table tr th, #cf-tbl table tr td {
    text-align: left;
    vertical-align: top;
}

#cf-tbl table tr th {
    width: max-content;
}

@media screen and (max-width: 768px) {
    #cf-tbl {
        width: 100%;
    }

    #cf-tbl table, #cf-tbl table tbody, #cf-tbl table tr, #cf-tbl table tr th, #cf-tbl table tr td {
        display: block;
    }

    #cf-tbl table {
        width: 100%;
        border-width: 0 0 1px 0;
    }

    #cf-tbl table tr th, #cf-tbl table tr td {
        width: 100%;
    }
}

/*「必須」文字デザイン*/
.required {
    font-size: 12px;
    padding: 5px;
    background: #ed7272;
    color: #fff;
    border-radius: 3px;
    margin-right: 5px;
}

/*「任意」文字デザイン*/
.optional {
    font-size: 12px;
    padding: 5px;
    background: #b9baba;
    color: #fff;
    border-radius: 3px;
    margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea, .wp-radio {
    width: 100%;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 3px;
    background: #fff;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    height: 200px;
}

.wpcf7 input {
    appearance: auto;
}

.wpcf7-list-item-label {
    margin: 0 2vw 0 0.5vw;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 10px;
    width: 150px;
    background: #fff;
    border: solid 1px #75b9e0;
    color: #75b9e0;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    margin: 15px auto 0;
    transition: 0.5s;
}

.wpcf7-radio {
    line-height: 2.5;
}

.wpcf7-select, .wpcf7-number {
    line-height: 2.5;
    width: max-content;
    border: solid 1px #d0d5d8;
    border-radius: 3px;
    background-color: #eff1f5;
    padding: 0 8px;
}

@media screen and (max-width: 768px) {
    input.wpcf7-submit {
        width: 250px;
    }
}

input.wpcf7-submit:hover {
    background: #75b9e0;
    border: solid 1px #75b9e0;
    color: #fff;
    transition: 0.25s;
}

/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip, .wpcf7-response-output.wpcf7-validation-errors {
    color: red;
    position: relative;
    font-weight: 600;
    line-height: 1.5;
}

.screen-reader-response {
    position: relative;
    text-align: center;
    padding: 1vh;
}

.screen-reader-response ul {
    display: none ;
}

.wpcf7-response-output {
     position: relative;
    text-align: center;
    margin: 3vh 0;
}

/*=============================
     contact レスポンシブ
=============================*/
@media screen and (max-width: 640px) {
    .contact {
        padding: 1rem;
        background: #fff;
    }

    .wpcf7-form {
        width: 100%;
    }

    .required, .optional {
        font-size: 10px;
    }

    #cf-tbl table tr th, #cf-tbl table tr td {
        font-size: 12px;
    }

    input.wpcf7-submit {
        font-size: 14px;
        padding: 10px;
    }
}

.contact-wrap {
    text-align: center;
}

.contact-wrap:not(:last-child) {
    margin-bottom: 5rem;
}

.contact-wrap h2 {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid #abd9e9;
    border-image: linear-gradient(-60deg, #abd9e9, #ffa7db);
    border-image-slice: 1;
    font-size: 1.25em;
    font-weight: bold;
}

.contact-tel a {
    text-decoration: underline;
}

.contact-line img {
    width: 200px;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 4px 0px rgba(40, 40, 40, 0.4);
    transition: ease 0.5s;
}

.contact-line img:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
    transition: ease 0.25s;
}

.contact-form {
    padding: 2.5rem 2.5rem 0.5rem;
    border-radius: 1rem;
    background: linear-gradient(-60deg, #abd9e980, #ffa7db80);
    text-align: left;
}

.policy-link {
    text-decoration: underline;
    color: #75b9e0;
}

@media (max-width: 767px) {
    .contact-form {
        padding: 2.5rem 1rem 0.5rem;
    }
}

/* ---------------------------------
	Store CSS
--------------------------------- */
@media (min-width: 768px) {
    .store-container, .product-page {
        display: flex;
    }
}

.store-main, .product {
    position: relative;
    width: -webkit-fill-available;
}

@media (min-width: 768px) {
    .store-side, .store-sidebar {
        margin-left: 1rem;
        width: max-content;
    }
}

.wp-block-search__label {
    display: none;
}

.wp-block-search__inside-wrapper {
    display: flex;
    margin-bottom: 1rem;
}

.wp-block-search__input {
    border: solid 1px #777;
    border-radius: 5px;
    margin-right: 5px;
}

.wp-block-search__button {
    border: solid 1px #777;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    width: max-content;
}

.wc-block-mini-cart__button {
    flex-direction: row-reverse;
    padding: 8px!important;
}

.wc-block-mini-cart__amount {
    margin-right: 0px;
    margin-left: 8px;
}

.wc-block-mini-cart__icon {
    padding: 8px;
}

.side-heading {
    margin: 1rem 0 1rem;
    padding: 10px 0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(-75deg, #abd9e9, #ffa7db);
}

.wp-block-pages-list__item {
    font-size: 14px;
    line-height: 2;
}

.woocommerce-product-gallery__wrapper {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.product .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
}

.product .woocommerce-product-gallery__image:not(:first-child) {
    position: relative;
    overflow: hidden;
    width: max-content;
    display: inline-block;
    margin: 0 1rem;
}

.product .woocommerce-product-gallery__image a {
    display: block;
    position: relative;
    width: max-content;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.product .woocommerce-product-gallery img {
    position: relative;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product .summary {
    position: relative;
}

.product .product_title {
    font-size: 24px;
    line-height: 2;
    border-top: solid 10px;
    border-bottom: solid 10px;
    border-image: linear-gradient(-60deg, #abd9e9, #ffa7db);
    border-image-slice: 1;
}

.product .summary .price {
    position: absolute;
    font-size: 24px;
    top: 0;
    right: 0;
    line-height: 2;
    margin: 10px 0;
}

.product a.woocommerce-LoopProduct-link {
    width: 100%;
    padding: 1rem;
    font-size: 12px;
}

.up-sells, .related {
    margin-top: 3rem;
}

li.type-product {
    width: 25%;
}

.product-category {
    margin-bottom: 1rem;
}

.woocommerce-product-details__short-description {
    padding: 30px;
}

.woocommerce-product-details__short-description p {
    font-size: 14px;
    line-height: 1.5;
}

.in-stock {
    text-align: right;
}

form.cart {
    display: flex;
    margin: 1rem 0;
}

@media (min-width: 768px) {
    form.cart {
        position: absolute;
        margin: 0 0 1rem;
        bottom: -2rem;
        right: 0;
    }
}

form.cart input {
    border: solid 1px #777;
    border-radius: 5px;
    padding: 5px;
    width: 60px;
    background: #fff;
}

form.cart button {
    border: solid 1px #777;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
    font-size: 14px;
    background: #fff;
}

.product_meta {
    position: relative;
    display: block;
    width: max-content;
}

.posted_in, .tagged_as {
    position: relative;
    display: block;
    width: max-content;
    font-size: 14px;
    line-height: 2;
}

.product_meta a, .tabs wc-tabs a {
    position: relative;
    width: max-content;
    pointer-events: none;
}

.description_tab, .reviews_tab {
    position: relative;
    font-size: 14px;
    line-height: 2;
    pointer-events: none;
}

.product span.onsale {
    position: absolute;
    border: solid 1px #ed7272;
    border-radius: 5px;
    padding: 5px 10px;
    color: #ed7272;
    background: #fff;
    z-index: 1;
}

.woocommerce-message {
    position: absolute!important;
    z-index: 1;
}

.woocommerce-message a {
    text-decoration: underline;
    color: #3F51B5;
}

.woocommerce-info {
    margin: auto!important;
}

h2.wc-block-mini-cart__title {
    font-size: 18px!important;
}

.wp-block-woocommerce-mini-cart-checkout-button-block {
    background-color: #fa8ccd;
    color: #fff;
    transition: ease 0.5s;
}

.wp-block-woocommerce-mini-cart-checkout-button-block:hover {
    box-shadow: inset 0 0 0 1px currentColor;
    background: #b33d83;
    color: #fff;
    transition: ease 0.25s;
}

.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text {
    width: max-content!important;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
    background-color: #fa8ccd!important;
    width: 50%;
    text-align: center;
    padding: 1rem;
    transition: ease 0.5s;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:hover {
    background-color: #b33d83!important;
    width: 50%;
    text-align: center;
    padding: 1rem;
    transition: ease 0.25s;
}

.woocommerce a.remove {
    color: #b43d82!important;
}

.woocommerce-MyAccount-navigation {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 1rem;
}

.woocommerce-MyAccount-navigation h1.dashboard-heading {
    margin-bottom: 0.5rem;
    content: attr(data-title);
    display: block;
    font-family: sans-serif;
    font-size: 32px;
    font-style: italic;
    color: #333;
    font-weight: bold;
    text-align: center;
}

.woocommerce-MyAccount-navigation h2.dashboard-heading {
    margin-bottom: 3.5rem;
    color: #555;
    font-weight: bold;
    text-align: center;
}

.woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

.woocommerce-MyAccount-navigation ul li {
    text-align: center;
    border: solid 1px #777;
    border-radius: 5px;
    background: #fff;
    color: #000;
    transition: ease 0.5s;
}

.woocommerce-MyAccount-navigation ul li:nth-child(4), .woocommerce-MyAccount-navigation ul li:nth-child(5), .woocommerce-MyAccount-navigation ul li:nth-child(6) {
    display: none;
}

.woocommerce-MyAccount-navigation ul li a {
    width: 100%;
    padding: 10px;
}

.woocommerce-MyAccount-navigation ul li:hover {
    text-align: center;
    border: solid 1px #777;
    background: #000;
    color: #fff;
    transition: ease 0.25s;
}

.woocommerce-MyAccount-content a {
    color: #3F51B5;
    text-decoration: underline;
}

.woocommerce-MyAccount-content .required, .woocommerce-form.woocommerce-form-login.login .required, .checkout.woocommerce-checkout .required {
    font-size: 12px;
    padding: 5px;
    background: none;
}

.woocommerce .optional {
    visibility: hidden!important;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    border: solid 1px #777;
    border-radius: 5px;
    padding: 5px;
    color: #555;
}

.woocommerce .col2-set {
    font-size: 14px;
    line-height: 2;
}

.woocommerce-Address-title.title {
    display: flex;
}

.woocommerce .col2-set a {
    margin-left: 1rem;
    text-decoration: underline;
    color: #3F51B5;
}

/*.wc-block-components-button__text {
	color: #000;
	border: solid 1px #000;
	border-radius: 5px;
	background: #fff;
	padding: 10px;
	transition: ease 0.5s;
}

.wc-block-components-button__text:hover {
	color: #fff;
	border: solid 1px #000;
	border-radius: 5px;
	background: #000;
	padding: 10px;
	transition: ease 0.25s;
}*/
ins.wc-block-components-product-price__value.is-discounted {
    color: #ed7272;
}

.wc-block-components-product-badge {
    color: #ed7272;
    border-radius: 5px!important;
    font-size: 10px!important;
}

#customer_details {
    margin-bottom: 3rem;
}

@media (max-width: 767px) {
    .store-button {
        margin: 0 auto!important;
    }

    body .is-layout-flex {
        flex-wrap: wrap!important;
    }

    .product-category {
        margin-bottom: 2em;
    }

    .wc-block-grid__products .wc-block-grid__product-image img {
        margin: 0 auto;
    }
}

.ajax_add_to_cart {
    display: none;
}

/* ---------------------------------
	Java Script CSS
--------------------------------- */
.js-fade-in {
    opacity: 0;
    transition: opacity 0.75s;
}

.js-fade-up li {
    transition: transform 0.75s, opacity 0.75s;
    transform: translateY(50px);
    opacity: 0;
}

.js-fade-up li.active {
    transform: translateY(0);
    opacity: 1;
}

.js-fade-slide {
    overflow: hidden;
}

.js-fade-slide li {
    position: relative;
    transition: transform 0.75s, opacity 0.75s;
    opacity: 0;
}

.js-fade-slide li:nth-of-type(odd) {
    transform: translateX(50px);
}

.js-fade-slide li:nth-of-type(even) {
    transform: translateX(-50px);
}

.js-fade-slide li.active {
    transform: translateX(0);
    opacity: 1;
}