@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Open+Sans:wght@700&display=swap');
@import url('font-en.css');

:root {
    --hd_h: 100px;
    --hd_h_sp: 60px;
    --main_w: 1440px;
    --main_color: #212121;
    --main_subcolor: #576164;
    --main_subcolor-bg: #697478;
    --main_blue: #2e6da4;
    --main_orange: #df600f;
    --color_red: #c94646;
    --text-color: var(var(--main_color));
    --text-color-l: #697478;
    --en: 'Akkurat-regular';
    --enL: 'Akkurat-light';
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    color-scheme: light;
    /* --code-background-color: hsl(205deg, 20%, 94%); */
    --code-background-color: hsl(206, 13%, 90%);
    --code-color: var(--muted-color);
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: hsl(330deg, 40%, 50%);
    --code-property-color: hsl(185deg, 40%, 40%);
    --code-value-color: hsl(40deg, 20%, 50%);
    --code-comment-color: hsl(205deg, 14%, 68%);
}


/* font-family: 'Open Sans', sans-serif;
font-family: 'Noto Sans JP', sans-serif;*/

html {
    scroll-behavior: smooth;
}

body:not(.wp-admin) {
    font-family: "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-feature-settings: 'palt' 1, 'lnum' 1;
    letter-spacing: .07em;
}

@media (max-width:980px) {
    body:not(.wp-admin) {
        font-size: 14px;
    }
}

@media (max-width:767px) {
    body:not(.wp-admin) {
        font-size: 15px;
    }
}

.no-letter-space {
    letter-spacing: 0;
}

.no-letter-space01 {
    letter-spacing: 0.01em;
}

.no-letter-space02 {
    letter-spacing: 0.02em;
}

.no-letter-space05 {
    letter-spacing: 0.05em;
}

.no-letter-space1 {
    letter-spacing: 0.1em;
}

.no-letter-space2 {
    letter-spacing: 0.2em;
}


/**
 * Code
 */

pre,
code {
    font-size: 0.875em;
    letter-spacing: 0;
}

pre {
    -ms-overflow-style: scrollbar;
    overflow: auto;
}

pre,
code {
    background: var(--code-background-color);
    color: var(--code-color);
    line-height: initial;
}

code {
    display: inline-block;
    padding: 1em;
}

pre {
    display: block;
    overflow-x: auto;
}

pre>code {
    display: block;
    background: none;
    font-size: 14px;
}

code b {
    color: var(--code-tag-color);
}

code i {
    color: var(--code-property-color);
    font-style: normal;
}

code u {
    color: var(--code-value-color);
    text-decoration: none;
}

code em {
    color: var(--code-comment-color);
    font-style: normal;
}


/*=============================================
base
=============================================*/

@media (min-width: 768px) {

    .sp,
    .forSP,
    .forSPi {
        display: none !important;
    }

    .pc .forPC {
        display: block !important;
    }

    .forPCi {
        display: inline-block !important;
    }
}

@media print {

    .sp,
    .forSP,
    .forSPi {
        display: none !important;
    }
}

@media (max-width: 767px) {

    .pc,
    .forPC,
    .forPCi {
        display: none !important;
    }

    .sp,
    .forSP {
        display: block !important;
    }

    .forSPi {
        display: inline-block !important;
    }
}

.psfix {
    display: inline-block;
    transform: translateY(12%);
}

.nostyle,
.nostyle li {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}


/* font size */

.size8,
.sml {
    display: inline-block;
    font-size: .8em !important;
    line-height: 1.6 !important;
}

.size7,
.sml7,
.sml2 {
    display: inline-block;
    font-size: .7em !important;
    line-height: 1.5 !important;
}

.size9,
.sml9 {
    display: inline-block;
    font-size: .9em !important;
    line-height: 1.6 !important;
}

.large {
    display: inline-block;
    font-size: 1.2em !important;
}

.large2 {
    display: inline-block;
    font-size: 1.5em !important;
}

.inlineblock {
    display: inline-block;
}


/* line-height */

.line-height14 {
    line-height: 1.4 !important;
}

.line-height15 {
    line-height: 1.5 !important;
}

.line-height16 {
    line-height: 1.6 !important;
}

.line-height17 {
    line-height: 1.7 !important;
}

.line-height18 {
    line-height: 1.8 !important;
}

.line-height19 {
    line-height: 1.9 !important;
}

.line-height20 {
    line-height: 2 !important;
}


/* margin */

.mtop--1 {
    margin-top: -1em !important;
}

.mtop-0 {
    margin-top: 0 !important;
}

.mtop-05 {
    margin-top: .5em !important;
}

.mtop-1 {
    margin-top: 1em !important;
}

.mtop-2 {
    margin-top: 2em !important;
}

.mtop-3 {
    margin-top: 3em !important;
}

.mtop-4 {
    margin-top: 4em !important;
}

.mtop-5 {
    margin-top: 5em !important;
}

.mtop-6 {
    margin-top: 6em !important;
}

.mbtm-0 {
    margin-bottom: 0em !important;
}

.mbtm-1 {
    margin-bottom: 1em !important;
}

.mbtm-2 {
    margin-bottom: 2em !important;
}

.mbtm-3 {
    margin-bottom: 3em !important;
}

.mbtm-4 {
    margin-bottom: 4em !important;
}

.mbtm-5 {
    margin-bottom: 5em !important;
}

.mbtm-6 {
    margin-bottom: 6em !important;
}

.m0auto {
    margin: 0 auto;
}

.m1auto {
    margin: 1em auto;
}

.m2auto {
    margin: 2em auto;
}

.m3auto {
    margin: 3em auto;
}

.m4auto {
    margin: 4em auto;
}

.m5auto {
    margin: 5em auto;
}

.border0 {
    border: none !important;
}

.border1 {
    border: 1px solid;
}

.border2 {
    border: 2px solid;
}

.border3 {
    border: 3px solid;
}

.bordergray {
    border-color: #ccc;
}


/*table */

.td-p05 td {
    padding: .5em !important;
}

.td-p1 td {
    padding: 1em !important;
    ;
}

.td-p2 td {
    padding: 2em !important;
    ;
}

.border1 th,
.border1 td {
    border: 1px solid;
}

.border2 th,
.border2 td {
    border: 2px solid;
}

.borderbray th,
.borderbray td {
    border-color: #ccc;
}

.underline {
    text-decoration: underline;
}

.dash {
    margin: 0 .2em;
    letter-spacing: -.2em;
}


/* window width */

.w800 {
    width: 100%;
    max-width: 800px;
}

.w900 {
    width: 100%;
    max-width: 900px;
}

.w980 {
    width: 100%;
    max-width: 980px;
}

.w1100 {
    width: 100%;
    max-width: 1100px;
}

.w1200 {
    width: 100%;
    max-width: 1200px;
}

.w1280 {
    width: 100%;
    max-width: 1280px;
}

.w1400 {
    width: 100%;
    max-width: 1400px;
}

.w20 {
    width: 20%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w35 {
    width: 35%;
}

.w40 {
    width: 40%;
}

.w45 {
    width: 45%;
}

.w50 {
    width: 50%;
}

.w55 {
    width: 55%;
}

.w60 {
    width: 60%;
}

.w65 {
    width: 65%;
}

.w70 {
    width: 70%;
}

.w75 {
    width: 75%;
}

.w80 {
    width: 80%;
}

.w90 {
    width: 90%;
}

@media (max-width:767px) {
    /* .w80{
        width: 100%;
    } */
}


/* padding */

.p0 {
    padding: 0;
}

.p1 {
    padding: 1em;
}

.p2 {
    padding: 2em;
}

.p3 {
    padding: 3em;
}

.p4 {
    padding: 4em;
}

.p1-0 {
    padding: 1em 0;
}

.p2-0 {
    padding: 2em 0;
}

.p3-0 {
    padding: 3em 0;
}

.p4-0 {
    padding: 4em 0;
}

.p0-1 {
    padding: 0 1em;
}

.p0-2 {
    padding: 0 2em;
}

.p0-3 {
    padding: 0 3em;
}

.p0-4 {
    padding: 0 4em;
}


/* no list style */

.noliststyle>ul,
.noliststyle li,
.noliststyle ol,
.noliststyle {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* text align */

.text-left {
    text-align: left;
}

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

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

.hide {
    display: none;
}

.iblock {
    display: inline-block;
}

.block-center {
    margin-left: auto;
    margin-right: auto;
}

.place-mid {
    display: grid;
    place-items: center;
}


/* flex */

.flex-around,
.flex-around>.wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-between,
.flex-between>.wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-start,
.flex-start>.wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.flex-end,
.flex-end>.wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.flex-center,
.flex-center>.wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.columns-2>* {
    width: 48%;
    /* margin-bottom: 4%; */
}

.columns-2>.wp-block-group__inner-container {
    width: 100%;
}

.columns-2>.wp-block-group__inner-container>* {
    width: 48%;
    /* margin-bottom: 4%; */
}

.flex-between.columns-3>*,
.flex-between.columns-3::after {
    width: 32%;
    margin-bottom: 2%;
}

.columns-4>*,
.flex-between.columns-4::before,
.flex-between.columns-4::after {
    width: 24%;
    margin-bottom: 1.5%;
}

.columns-4>.wp-block-group__inner-container {
    width: 100%;
}

.columns-4>.wp-block-group__inner-container>*,
.flex-between.columns-4>.wp-block-group__inner-container::before,
.flex-between.columns-4>.wp-block-group__inner-container::after {
    width: 24%;
    margin-bottom: 1.5%;
}

.flex-between.columns-3::after,
.flex-between.columns-3>.wp-block-group__inner-container::after,
.flex-between.columns-4::before,
.flex-between.columns-4>.wp-block-group__inner-container::before,
.flex-between.columns-4::after,
.flex-between.columns-4>.wp-block-group__inner-container::after {
    content: '';
    display: block;
    height: 0;
    order: 1;
}

@media (max-width: 767px) {
    .columns-2>* {
        width: 100%;
        /* margin-bottom: 5%; */
    }

    .columns-3>*,
    .columns-4>* {
        width: 48%;
        margin-bottom: 4%;
    }

    .columns-3::after,
    .columns-4::before,
    .columns-4::after {
        content: none;
    }
}


/* grid */


/* grid layout */

.grid>.wp-block-group__inner-container {
    --repeat-length: 5;
    display: grid;
    grid-template-columns: repeat(var(--repeat-length), 1fr);
}

.grid.grid3>.wp-block-group__inner-container {
    --repeat-length: 3;
}

.grid.grid4>.wp-block-group__inner-container {
    --repeat-length: 4;
}

.grid.grid5>.wp-block-group__inner-container {
    --repeat-length: 5;
}

sup {
    display: inline-block;
    font-size: .7em;
    vertical-align: top;
}


/* note style */

ul.note {
    margin: 0;
    padding: 0;
    font-size: min(.8em, 3vw);
    list-style-type: none !important;
    --note-line-hieght: 1.6em;
    line-height: var(--note-line-hieght);
}

ul.note li {
    list-style-type: none !important;
    padding-left: 1.1em;
    position: relative;
    font-family: YakuHanJP, "NotoSansSubset", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

ul.note li:not(:last-child) {
    margin-bottom: .3em;
}

ul.note li::before {
    content: '※';
    display: inline-block;
    position: absolute;
    left: 0;
}

ul.numnote {
    counter-reset: numnote;
}

ul.numnote li {
    padding-left: 2em;
}

ul.numnote li::before {
    content: "※" counter(numnote);
    counter-incement: numnote;
}

ul.numnote.countreset-2 {
    counter-reset: numnote 1;
}

ul.numnote.countreset-3 {
    counter-reset: numnote 2;
}

ul.numnote.countreset-4 {
    counter-reset: numnote 3;
}

ul.numnote.countreset-5 {
    counter-reset: numnote 4;
}

ul.numnote.countreset-6 {
    counter-reset: numnote 5;
}

ul.numlist {
    counter-reset: numlist;
}

ul.numlist li::before {
    content: counter(numlist) ".";
    counter-incement: numlist;
}

ul.numlist-circle {
    counter-reset: numlist-circle;
}

ul.numlist-circle li {
    padding-left: 1.8em;
}

ul.numlist-circle li::before {
    content: counter(numlist-circle);
    counter-incement: numlist-circle;
    width: 1.5em;
    height: 1.5em;
    padding-bottom: .1em;
    color: #333;
    background-color: #fff;
    border: solid 1px #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    top: calc(var(--note-line-hieght) * .5);
    transform: translateY(-50%) scale(0.9);
}

ul.numlist-circle-fill {
    counter-reset: numlist-circle;
}

ul.numlist-circle-fill li {
    padding-left: 1.8em;
}

ul.numlist-circle-fill li::before {
    content: counter(numlist-circle);
    counter-incement: numlist-circle;
    width: 1.5em;
    height: 1.5em;
    padding-bottom: .1em;
    color: #fff;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    top: calc(var(--note-line-hieght) * .5);
    transform: translateY(-50%) scale(0.9);
}

ul.discnote li::before {
    content: '';
    width: 1em;
    height: 1em;
    top: calc(var(--note-line-hieght) * .45);
    transform: translateY(-50%) scale(0.6);
    border-radius: 100%;
    background-color: var(--main_subcolor);
}

.sticky-content {
    position: sticky;
}


/* thumbnail */

.thumb {
    width: 100%;
    padding-bottom: 56.5%;
    position: relative;
    overflow: hidden;
}

.thumb.thumb1-1 {
    padding-bottom: 100%;
}

.thumb.thumb16-9 {
    padding-bottom: 56.5%;
}

.thumb.thumb2-1 {
    padding-bottom: 50%;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}


/* object-fit*/

img.cover {
    object-fit: cover !important;
}

img.contain {
    object-fit: contain !important;
}

img.w100 {
    width: 100% !important;
    height: 100%;
}

img.w80 {
    width: 80% !important;
    height: 80% !important;
    top: 10% !important;
    left: 10% !important;
}

img.w70 {
    width: 70% !important;
    height: 70% !important;
    top: 15% !important;
    left: 15% !important;
}

img.w60 {
    width: 60% !important;
    height: 60% !important;
    top: 20% !important;
    left: 20% !important;
}


/* arrow */
.btn.text-center {
    display: block;
    width: 100%;
    text-align: center;
}

.btn a,
.arrow-right {
    --arrow-size: .35em;
    --arrow-border-width: 1px;
}

.btn a {
    border: 1px solid #ccc;
    padding: 1em 3em;
    font-size: min(.9em, 3.3vw);
    display: inline-block;
    position: relative;
    color: var(--main_color);
    transition: all .3s ease;
}

.btn a:hover {
    border-color: #222;
    background-color: #222;
    color: #fff;
}


/* .btn a::before, */

.arrow-right::before {
    content: '';
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-border-width) solid;
    border-right: var(--arrow-border-width) solid;
    position: absolute;
    top: calc(50% - var(--arrow-size)/2);
    right: 1em;
    transform: rotate(45deg);
}

.backtohome {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 1em 2em;
}

.arrow-fill-right {
    --arrow-size: .4em;
}

.arrow-fill-right::before {
    content: '';
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: var(--arrow-size) 0 var(--arrow-size) calc(var(--arrow-size) * 1.3);
    border-color: transparent transparent transparent currentColor;
    position: absolute;
    top: calc(50% - var(--arrow-size));
    right: 0.75em;
}

.arrow-link {
    display: inline-block;
    position: relative;
    padding-left: 1.5em;
    border: 1px solid;
}

.arrow-left {
    --arrow-size: .5em;
    --arrow-border-width: 1px;
}

.arrow-left::before {
    content: '';
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-border-width) solid;
    border-left: var(--arrow-border-width) solid;
    position: absolute;
    top: calc(50% - var(--arrow-size)/2);
    left: 1em;
    transform: rotate(-45deg);
}

.arrow-fill-left {
    --arrow-size: .4em;
}

.arrow-fill-left::before {
    content: '';
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: var(--arrow-size) calc(var(--arrow-size) * 1.3) var(--arrow-size) 0;
    border-color: transparent currentColor transparent transparent;
    position: absolute;
    top: calc(50% - var(--arrow-size));
    left: 0.75em;
}

.arrow-top {
    padding-top: 1em;
    --arrow-size: .5em;
    --arrow-border-width: 1px;
}

.arrow-top::after {
    content: '';
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-border-width) solid;
    border-left: var(--arrow-border-width) solid;
    transform: rotate(45deg);
    position: absolute;
    left: calc(50% - var(--arrow-size)/2);
    top: .75em;
}

.arrow-bottom {
    --arrow-size: .5em;
    --arrow-border-width: 1px;
}

.arrow-bottom::after {
    content: '';
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-border-width) solid;
    border-right: var(--arrow-border-width) solid;
    transform: rotate(135deg);
    position: absolute;
    left: calc(50% - var(--arrow-size)/2);
    bottom: .75em;
}


/* link */

body:not(.wp-admin) a {
    text-decoration: none;
    color: var(--main_color);
}

.wrapper,
.wrp {
    width: 100%;
    margin: 0 auto;
}

.inner {
    width: 100%;
    max-width: var(--main_w);
    margin: 0 auto;
    padding: 15px;
}

.inner1200 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.inner1100 {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.inner980 {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.inner800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.index-body .wrp {
    max-width: 100%;
}


/* header */

.header {
    width: 100%;
    z-index: 90;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

@media (max-width:767px) {
    .header {
        position: sticky;
        top: 0;
    }
}

.header .header-inner {
    display: flex;
    justify-content: flex-end;
    padding: 1.75em 4em 1.75em 2em;
    opacity: 1;
    transition: all .3s 0s;
}

.header.scl .header-inner {
    opacity: 0;
}

@media (max-width:767px) {
    .header.scl .header-inner {
        opacity: 1;
        padding: 1.5em;
    }
}


/* logo */

.sitelogo-wrp {
    background-color: #fff;
    /* border-bottom: 1px solid #ddd; */
    padding: 1em;
}

.sitelogo-wrp .logo {
    display: block;
    margin: 0 auto;
    width: 140px;
}

@media screen and (max-width:767px) {
    .sitelogo-wrp .logo {
        width: 110px;
    }
}

/* .scl .sitelogo-wrp .logo {
    transform: translate(-.5em, -1em) scale(.86);
}

.scl .sitelogo-wrp .logo.logo-text {
    transform: translate(-.5em, -.5em) scale(.86);
} */


.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo a {
    color: #222;
    text-decoration: none
}

@media (max-width:767px) {
    .sitelogo-wrp .logo {
        /* width: 120px; */
    }

    /* .scl .sitelogo-wrp .logo {
        transform: translate(-.5em, -.5em) scale(.86);
    }

    .scl .sitelogo-wrp .logo.logo-text {
        transform: translate(-.25em, -.25em) scale(.86);
    } */
}


/* humberger menu */

.menu-btn-wrp {
    position: fixed;
    top: 4em;
    right: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: all .3s;
    z-index: 101;
}

.scl .menu-btn-wrp {
    transform: translateY(-2em);
}

@media (max-width:767px) {
    .menu-btn-wrp {
        top: 1.35em;
        right: 1.5em;
    }

    .scl .menu-btn-wrp {
        transform: translateY(-.5em);
    }
}


/* menu */

.menu-btn {
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
    transition: all .3s;
}

.menu-btn.on {
    transform: scale(1.4);
}

.scl .menu-btn.on {
    transform: translateY(.5em) scale(1.4);
}

.menu-btn .cp_bar,
.menu-btn .cp_bar:before,
.menu-btn .cp_bar:after {
    display: block;
    width: 18px;
    height: 1px;
    content: '';
    transition: all 0.2s;
    background: var(--main_color);
}

.menu-btn .cp_bar {
    position: relative;
    margin: 9px 0 0;
}

.menu-btn .cp_bar:before,
.menu-btn .cp_bar:after {
    position: absolute;
}

.menu-btn .cp_bar:before {
    top: 7px;
}

.menu-btn .cp_bar:after {
    bottom: 7px;
}

.menu-btn:hover .cp_bar,
.menu-btn:hover .cp_bar:before,
.menu-btn:hover .cp_bar:after {
    background: var(--main_subcolor);
}

.menu-btn.on .cp_bar:after {
    transform: rotate(-45deg) translateX(-10px);
    transform-origin: center center;
}

.menu-btn.on .cp_bar {
    transform: translateX(5px);
    background: transparent;
}

.menu-btn.on .cp_bar:before {
    transform: rotate(45deg) translateX(-10px);
    transform-origin: center center;
}

@media (max-width:767px) {
    .header .search-wrp {
        display: none;
    }
}

.search-wrp .searchform-inner {
    display: inline-block;
    padding: 0;
    margin-right: 1em;
    position: relative;
}

.toggle-menu-wrp .search-wrp .searchform-inner {
    width: 100%;
}

.search-wrp .search-field {
    padding: .75em 2.75em .75em 1.5em;
    border: 1px solid #ddd;
    border-radius: 3em;
    width: 25em;
    font-size: min(.9em, 3.5vw);
    transform: translateX(-.25em);
}

.toggle-menu-wrp .search-wrp .search-field {
    width: 100%;
    font-family: sans-serif !important;
}

@media (max-width:767px) {
    .search-wrp .search-field {
        width: 100%;
        transform: translateX(0);
    }
}

.search-wrp .search-submit {
    font-size: min(.9em, 3.5vw);
    -webkit-appearance: none;
    padding: .5em 1.5em;
    background-color: transparent;
    background-image: var(--icon-search);
    background-position: center left .5em;
    background-size: 1.2em auto;
    background-repeat: no-repeat;
    border-radius: 3em;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}


/* menu */

.toggle-menu-wrp .search-wrp input {
    font-size: 1.2em;
}

.menu-list li a {
    display: inline-block;
    position: relative;
}

.menu-list li a.current,
.menu-list li a:hover {
    color: var(--main_subcolor) !important;
}

/* .menu-list li a.current::after {
    content: '';
    display: block;
    width: 2.5em;
    height: 2px;
    background-color: var(--main_subcolor);
    position: absolute;
    bottom: -.5em;
    left: calc(50% - 1.225em);
} */


/* toggle menu */

@media (max-width:767px) {
    .onmenu {
        overflow-y: hidden;
    }
}

.toggle-menu-wrp {
    visibility: hidden;
    width: 100%;
    height: 80vh;
    overflow: auto;
    transform: translateY(-100vh);
    background-color: #f9f9f9;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 5vh;
    opacity: 0;
    transition: all .5s ease;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

@media (max-height:768px) {
    .toggle-menu-wrp {
        height: 100vh;
    }
}

@media (max-width:767px) {
    .toggle-menu-wrp {
        height: 100vh;
        padding: 5vw;
    }

    .toggle-menu-wrp .user-meta {
        width: 100%;
    }
}

.toggle-menu-wrp.on {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

.toggle-menu-wrp .inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.toggle-menu-wrp .menu-meta-wrp {
    width: 20%;
    padding: 0 1.5em;
}

@media (max-width:767px) {
    .toggle-menu-wrp .menu-meta-wrp {
        width: 100%;
        text-align: center;
    }
}

.toggle-menu-wrp .menu-logo {
    display: block;
    width: max(12vw, 220px);
    margin: 1em 0;
}

.toggle-menu-wrp .menu-logo .logo.logo-text {
    max-width: 100%;
}

@media (max-width:767px) {
    .toggle-menu-wrp .menu-logo {
        width: 40vw;
        max-width: 130px;
        margin: 1em auto;
    }
}

.toggle-menu-wrp .user-meta {
    font-size: 1.2em;
}

.toggle-menu-wrp .user-meta .siteuser_icon {
    width: 80px;
    height: 80px;
    margin: 2em 0;
}

@media (max-width:767px) {
    .toggle-menu-wrp .user-meta {
        text-align: center;
    }

    .toggle-menu-wrp .user-meta .siteuser_icon {
        width: 60px;
        height: 60px;
        margin: .5em auto 1em;
    }

    .toggle-menu-wrp .user-meta .siteuser_name {
        letter-spacing: .1em;
        text-indent: .1em;
    }

    .toggle-menu-wrp .user-meta .siteuser_description {
        letter-spacing: .1em;
        padding-left: .1em;
    }
}

.toggle-menu-wrp .menu-wrp {
    width: 80%;
    padding: 1em 5em 4em;
}

@media (max-width:767px) {
    .toggle-menu-wrp .menu-wrp {
        width: 100%;
        padding: 1em 1em 3em;
    }
}

.toggle-menu-wrp .menu-wrp .menu-list {
    display: block;
    width: 100%;
    padding: 1em .5em;
}

@media (max-width:767px) {
    .toggle-menu-wrp .menu-wrp .menu-list {
        padding: 1em 0;
    }
}

.toggle-menu-wrp.on .menu-wrp .menu-list li {
    margin-bottom: .5em;
}

.toggle-menu-wrp .menu-list li a {
    font-size: min(1.2em, 3.6vw);
    color: var(--main_color);
    padding: .5em 0;
}

@media (max-width:767px) {
    .toggle-menu-wrp .menu-list li a {
        display: block;
    }

    .toggle-menu-wrp.on .menu-wrp .menu-list li {
        border-bottom: 1px solid #ccc;
    }
}

.toggle-menu-wrp .menu-item-has-children .sub-menu {
    display: none;
}


.toggle-menu-wrp .menu-item-has-children.active .sub-menu {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2em;
    padding-left: .5em;
}

.toggle-menu-wrp .menu-item-has-children .sub-menu li {
    width: 33.3%;
    margin-bottom: 0 !important;
    position: relative;
}

@media screen and (max-width:767px) {
    .toggle-menu-wrp .menu-item-has-children .sub-menu li {
        width: 100%;
        /* font-size: min(.8em, 3vw); */
    }
}

/* .toggle-menu-wrp .menu-item-has-children .sub-menu li {
    display: block;
    opacity: 0;
    transition: all .5s;
}

.toggle-menu-wrp .menu-item-has-children.active .sub-menu li.active {
    opacity: 1;
} */

.toggle-menu-wrp .menu-item-has-children ul li a {
    font-size: min(.9em, 3.5vw);
}

.toggle-menu-wrp .menu-item-has-children ul li a::before {
    content: '';
    display: inline-block;
    width: .3em;
    height: .3em;
    border: 3px solid var(--main_subcolor);
    border-radius: 50%;
    text-indent: -1em;
    margin-right: .5em;
}

.toggle-menu-wrp .sns-btn {
    color: #121212;
}

@media (max-width:767px) {
    .toggle-menu-wrp .sns-wrp .flex-start {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}


/* new icon */

.new {
    display: inline-block;
    background-color: var(--color_red);
    color: #fff;
    font-size: .5em;
    line-height: 1.4;
    vertical-align: middle;
    padding: .3em .75em;
    margin-right: 1em;
    border-radius: 3px;
    transform: translateY(-.2em);
}

/* header */
.logo-wrp {
    width: 100%;
    padding: 20px;
    margin: 0;
    z-index: 3;
    background-color: rgba(255, 255, 255, .9);
}

.logo-wrp .logo {
    width: 120px;
    margin: 0 auto;
}

/* footer */

.footer {
    padding: 6em 1em 4em;
    text-align: center;
    background-color: var(--main_subcolor-bg);
    color: #f9f9f9;
    position: relative;
    z-index: 3;
}

@media (max-width:767px) {
    .footer {
        padding-bottom: 120px;
    }
}

.footer .footer-navi-wrp .menu-list {
    width: 100%;
    max-width: 767px;
    margin: 1em auto;
}

.footer a {
    color: #f9f9f9 !important;
}

.footer .footer-navi-wrp .menu-list a {
    display: inline-block;
    font-size: min(.8em, 3.3vw);
    padding: .25em 1.5em;
    color: #f9f9f9 !important;
    transition: all .3s;
    border-left: 1px solid #ddd;
}

.footer .footer-navi-wrp .menu-list .menu-item:first-child a {
    border-left: none;
}

@media screen and (max-width:767px) {
    .footer .footer-navi-wrp .menu-list .menu-item a {
        border-left: none;
    }
}

.footer .footer-navi-wrp .menu-list a:hover {
    color: var(--main_subcolor);
}


.footer .sns-wrp {
    margin: 2em auto;
}

.footer .footer-navi-wrp .menu-policy-list.menu-list {
    margin: 4em auto 2em;
}

/* @media screen and (max-width:767px) {
    .footer .footer-navi-wrp .menu-policy-list.menu-list {
        margin: 4em auto 2em;
    }
} */

.footer .footer-navi-wrp .menu-policy-list.menu-list a {
    font-size: min(.7em, 2.7vw);
    padding: .25em 1em;
    border-left: none;
}

.sns-btn {
    color: #f9f9f9 !important;
    display: block;
    padding: 0 .4em;
    text-decoration: none;
    font-size: min(2.4em, 10vw);
}

.footer .corporatelogo-wrp {
    text-align: center;
}

.footer .corporatelogo-wrp .corporatelogo {
    display: block;
    max-width: 90px;
    margin: 0 auto 2.5em;
}

.footer .company-info-wrp .iso {
    font-size: min(.8em, 3vw);
    font-weight: 300;
}

.footer .company-name {
    display: block;
    font-size: min(.9em, 3.6vw);
}

.copyright {
    text-align: center;
    font-size: min(.7em, 2.8vw);
    font-weight: 300;
    padding: 1em 0;
    letter-spacing: -.025em;
}


/* pager */

.navigation {
    width: 100%;
    display: block;
    text-align: center;
}

.paginate-wrp {
    text-align: center;
    margin: 3em auto 5em;
}

.page-numbers {
    font-family: var(--en);
    display: inline-block;
    list-style: none;
    color: #222;
    padding: .5em;
    text-decoration: none;
    position: relative;
}

.pager_list .pager_item {
    display: inline-block;
    margin: 0;
    text-align: center;
}

.page-numbers.current {
    color: #ccc;
}

a.next.page-numbers,
a.prev.page-numbers {
    font-family: var(--en);
    display: inline-block;
    padding: .5em 2em;
    text-align: center;
    color: #222;
    text-decoration: none;
    transform: translateY(-7%);
}

.entry-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
}

.entry {
    display: block;
    padding: 5%;
    width: 25%;
    margin: 0;
}

.columns-3 .entry {
    display: block;
    padding: 3%;
    width: 33.33%;
    margin: 0;
}

.columns-4 .entry {
    display: block;
    padding: 3%;
    width: 25%;
    margin: 0;
}

@media (max-width:1023px) {
    .columns-4 .entry {
        width: 33.333%;
    }
}

@media (max-width:576px) {

    .columns-3 .entry,
    .columns-4 .entry {
        width: 50%;
    }
}


/* entry list */

.entry-list .entry-meta {
    padding: 10% 0 0;
    font-size: .8em;
}

.entry-list .thumb-wrp {
    /* padding: 5%; */
}

.date-wrp {
    margin-bottom: 1em;
}

.pagination {
    margin: 3em auto;
}

.pagination .btn {
    position: relative;
    display: inline-block;
    font-size: .8em;
    margin: .25em;
}

.pagination .btn a {
    min-width: 300px;
    text-align: center;
}

@media (max-width: 767px) {
    .pagination .btn {
        font-size: .7em;
    }
}

.back-btn a {
    position: relative;
    display: inline-block;
    padding: .5em 2.5em .3em;
    margin: 1em 0;
    font-size: min(.8em, 3.3vw);
    letter-spacing: 0;
}

.back-btn a:hover {
    color: var(--main_subcolor);
}


/* archive */

.archive-header {
    padding: 4em 1.5em;
    text-align: center;
}

.archive-header .title {
    font-size: min(2em, 6vw);
    letter-spacing: .5em;
    text-indent: .5em;
    margin-bottom: 1em;
    color: var(--main_color);
}

.post .archive-header .title,
.technology .archive-header .title {
    letter-spacing: .2em;
}

.archive-header .archive-title-en {
    font-size: min(1.4em, 4vw);
    margin-bottom: .25em;
    color: var(--main_subcolor);
    letter-spacing: 0;
}

.archive-header .description {
    font-size: min(1.1em, 3.6vw);
    line-height: 2;
    margin-bottom: 1em;
    color: var(--main_subcolor);
}

.search .archive-header .title {
    letter-spacing: .05em;
    text-indent: .05em;
}

.entry {
    transition: all .3s;
}

.entry-list::after {
    content: '';
    display: block;
    width: 25%;
    order: 1;
}

.entry:hover {
    background-color: #f9f9f9;
}

.entry .entry-title {
    font-size: min(1.05em, 3.5vw);
    margin: 1em 0;
    letter-spacing: .05em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.entry .exc {
    font-size: min(.9em, 3vw);
    line-height: 1.6;
    margin: 1em 0;
    /* white-space: pre-wrap;
    overflow-wrap: break-word; */
}


/* category link */

.cat {
    display: inline-block;
    margin: .5em 0 1em;
    padding-bottom: .5em;
    position: relative;
    font-size: min(.8em, 3.3vw);
    color: var(--main_subcolor);
    transition: all .3s;
}

a.cat:hover {
    color: var(--main_subcolor);
}

.cat::after {
    content: '';
    display: block;
    width: calc(100% - .25em);
    border-bottom: 1px solid #ccc;
    position: absolute;
    bottom: 0;
    left: 0;
}

a.cat:hover::after {
    border-bottom: 1px solid var(--main_subcolor);
}

@media (min-width:768px) {

    /* thumb hover */
    body:not(.wp-admin) a img {
        transition: all .3s ease;
    }

    body:not(.wp-admin) a:hover img {
        transform: scale(1.05);
    }
}


.wp-block-image svg {
    width: 100%;
}


/* editor max-width */

.edit-post-visual-editor__post-title-wrapper,
.block-editor-block-list__layout {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* wp under-line heading */

.title-underline {
    display: block;
    border-bottom: 1px solid #ccc;
    padding-bottom: .25em;
}


/* wp block image object-fit */

.wp-block-image.object-fit-img {
    overflow: clip;
    aspect-ratio: 16/9;
    position: relative;
}

.wp-block-image.object-fit-img.asp1-1 {
    aspect-ratio: 1/1;
}

.wp-block-image.object-fit-img.asp2-1 {
    aspect-ratio: 2/1;
}

.wp-block-image.object-fit-img.asp3-2 {
    aspect-ratio: 3/2;
}

.wp-block-image.object-fit-img.asp4-3 {
    aspect-ratio: 4/3;
}

.wp-block-image.object-fit-img.asp1-2 {
    aspect-ratio: 1/2;
}

.wp-block-image.object-fit-img.asp2-3 {
    aspect-ratio: 2/3;
}

.wp-block-image.object-fit-img.asp3-4 {
    aspect-ratio: 3/4;
}

.wp-block-image.object-fit-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.wp-block-image.object-fit-img .components-resizable-box__container {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

.wp-block-image.object-fit-img figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: .5em;
    margin: 0;
}

.wp-block-table td,
.wp-block-table th {
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: min(.9em, 3.6vw);
}


/* wp fix style */

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-columns.gap0 {
    gap: 0 !important;
}

.wp-block-columns.gap1 {
    gap: 1em !important;
}

.wp-block-columns.gap2 {
    gap: 2em !important;
}

.wp-block-columns.gap3 {
    gap: 3em !important;
}

.wp-block-image {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image img,
.wp-block-image .is-resized img.vertical,
.wp-block-image .is-resized img.holizon {
    max-width: 100%;
    height: auto;
}

.wp-block-gallery.has-nested-images figure.wp-block-image>a {
    overflow: hidden;
}

/* default columns gap */
.wp-block-columns-is-layout-flex {
    gap: 1.5em;
    margin-bottom: 1.5em;
}

.wp-block-columns-is-layout-flex .wp-block-image~p {
    margin-top: .5em;
}

/* font size */


/* post body font size */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin-bottom: 1.5em;
}

.single-article-inner p,
.editor-styles-wrapper p {
    font-size: min(.96em, 3.5vw);
    line-height: 2;
    display: block;
    width: 100%;
    text-align: justify;
    overflow-wrap: break-word;
}

.single-article-inner ol,
.editor-styles-wrapper ol,
.single-article-inner ul,
.editor-styles-wrapper ul {
    display: block;
    font-size: min(.96em, 3.5vw);
}

figcaption {
    font-size: mine(.9em, 3.5vw);
    letter-spacing: .05em;
    margin-top: .5em;
}

.single-article-inner p.caption {
    letter-spacing: .05em;
    margin-top: .5em;
}

.single-article-inner p a {
    line-height: 1.8;
    overflow-wrap: break-word;
}

@media (max-width:767px) {
    .single-article-inner p {
        line-height: 2;
    }
}

.has-small-font-size,
.has-small-font-size>table {
    /* font-size:min(.8em,3vw); */
    line-height: 1.8 !important;
}

.has-medium-font-size {
    /* font-size:min(1.1em,4vw); */
    line-height: 1.8 !important;
}

.has-large-font-size {
    /* font-size:min(1.25em,5vw); */
    line-height: 1.5 !important;
}

.has-x-large-font-size {
    /* font-size:min(1.4em,6vw); */
    line-height: 1.5 !important;
}


/* caption */

p.caption,
.wp-block-image figcaption {
    display: block;
    font-size: min(.8em, 3.3vw);
    line-height: 1.5;
    letter-spacing: .05em;
    margin: 1em 0 0 !important;
}


/* position */

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

.has-text-align-left {
    text-align: left !important;
}

.has-text-align-right {
    text-align: right !important;
}

.wp-block-column p {
    margin: 0 auto;
}

.wp-block-column a {
    margin: 0 auto;
}

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        /* flex-basis:100%!important */
    }

    .wp-block-columns.sp-columns2 {
        flex-wrap: wrap;
    }

    .wp-block-columns.sp-columns2>.wp-block-column {
        /* flex-basis:auto !important */
        flex-basis: 50% !important
    }
}

/* technology single and editor css */
.single .technology .single-article-inner h3,
.post-type-technology .block-editor-block-list__layout h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: .25em;
    margin-top: 2.5em;
    color: var(--main_subcolor);
}

.single .technology .single-article-inner h4,
.post-type-technology .block-editor-block-list__layout h4 {
    font-size: min(1em, 4vw);
    display: block;
    position: relative;
    padding-left: 1.5em;
    margin: 1.5em auto 1em !important;
}

.single .technology .single-article-inner h4::before,
.post-type-technology .block-editor-block-list__layout h4::before {
    content: '';
    width: .3em;
    height: .3em;
    border: 4px solid;
    border-radius: 100%;
    position: absolute;
    top: .35em;
    left: 0;
    opacity: .6;
}

.single .technology .frame,
.post-type-technology .block-editor-block-list__layout .frame {
    border: 1px solid #ccc;
    padding: 1.5em;
}

.single .technology .frame>h3,
.post-type-technology .block-editor-block-list__layout .frame {
    margin-top: 0;
}