@charset "UTF-8";

/***** 全ページ共通CSS *****/

/* base (reset)
---------------------------------------------------*/
body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    font-weight: 400;
}
ul,
ol,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
}
ol,
li {
    list-style: none;
}
img {
    border: none;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

/* ---------- */
a {
    margin: 0;
    padding: 0;
    font-size: inherit;
    background: transparent;
}
th,
td {
    font-style: normal;
    font-weight: normal;
    font-size: inherit;
    empty-cells: show;
}
input,
select {
    vertical-align: middle;
}
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    /*-webkit-appearance: none;*/
    border-radius: 0;
}
pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* CSS3 */
    word-wrap: break-word; /* IE 5.5+ */
}
figure {
    margin: 0;
}

/* color
---------------------------------------------------*/
:root {
    --main-color: #36382E;
    --primary-color: #2CB1DC;
    --secondary-color: #306BAC;
    --background-color: #EAE1DF;
    --white-color: #ffffff;
    --black-color: #000000;
    --gray-color: #808080;
    --light-color: #fafafa;
    --red-color: #F06449;
    --font-color: #333333;
    --font-size-x: 36px;
    --font-size-l: 24px;
    --font-size-m: 18px;
    --font-size-n: 16px;
    --font-size-s: 12px;
}

/* < 768px */
@media screen and (max-width: 768px) {
    :root {
        --font-size-x: 5.625vw;
        --font-size-l: 4.375vw;
        --font-size-m: 3.125vw;
        --font-size-n: 2.8125vw;
        --font-size-s: 2.5vw;
    }
}

/* Selected Text
---------------------------------------------------*/
::selection {
    background: #191919;
    /* Safari */
    color: #FFFFFF;
}

/* HTML
---------------------------------------------------*/
html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-size: 62.5%;
}
body {
    position: relative;
    width: 100%;
    line-height: 1;
    color: var(--font-color);
    font-size: var(--font-size-n);
    font-weight: 400;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--primary-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
:before,
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.sp-no {
    display: block;
}
br.sp-no {
    display: inline;
}
.pc-no {
    display: none;
}
br.pc-no {
    display: none;
}

/* < 768px */
@media screen and (max-width: 768px) {
    body {
        min-width: auto;
        min-height: 100%;
        -webkit-text-size-adjust: 100%;
    }
    .pc-no {
        display: block;
    }
    br.pc-no {
        display: inline;
    }
    .sp-no {
        display: none;
    }
    br.sp-no {
        display: none;
    }
}


/* link
---------------------------------------------------*/
a {
    text-decoration: none;
}
a:link,
a:visited,
a:active {
    color: var(--font-color);
}
a:hover {
    color: var(--main-color);
}
a.u {
    text-decoration: underline;
}
a,
a:hover,
.hover {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.hover:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}


/* clearfix
---------------------------------------------------*/
.clearfix {
    min-height: 1px;
    zoom: 1;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: '';
    clear: both;
    height: 0;
}
* html .clearfix {
    height: auto;
    overflow: hidden;
}


/* INPUT
---------------------------------------------------*/
input, button, select, textarea {
    font-family: inherit;
    font-size: 1em;
    color: inherit;
    margin: 0;
}
input, button {
    border: 0;
    line-height: normal;
    vertical-align: inherit;
    *vertical-align: middle;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
    border: 0;
    outline: none;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="url"],
textarea,
select {
    overflow: hidden;
    outline: none;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
input:focus{ outline: 0 none black; }

/* ------ */
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    width: 100%;
    line-height: 1.0em;
    font-weight: 400;
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 0.9em 1em;
    vertical-align: middle;
}
textarea {
    height: 8em;
    line-height: 1.4em;
    overflow: auto;
    resize: vertical;
}
select {
    width: 100%;
    font-weight: 400;
    background-color: var(--background-color);
    border: 1px solid var(--primary-color);
    vertical-align: middle;
    -webkit-border-radius: 0.4em;
    border-radius: 0.4em;
    padding: 0.9em 1em;
    line-height: 1.0em;
}
input:focus,
textarea:focus,
select:focus {
    background-color: #FFFEF8;
    border-color: #136EB1;
    box-shadow: 0 0 0 1px #1EA9DB;
    outline: 2px solid transparent;
}

.select {
    position: relative;
    display: block;
    width: 100%;
}
.select:before {
    position: absolute;
    content: '';
    top: 50%;
    right: 2em;
    transform: translate(0, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.55em 0.4em 0 0.4em;
    border-color: var(--primary-color) transparent transparent transparent;
    cursor: pointer;
    pointer-events: none;
}
.select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.w100 {width: 100% !important;}
.w80 {width: 80% !important;}
.w60 {width: 60% !important;}
.w40 {width: 40% !important;}
.w30 {width: 30% !important;}
.w20 {width: 20% !important;}

/** placeholder **/
.placeholder {color: #ccc;}
:placeholder-shown {color: #ccc;}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {color: #ccc;}
/* Firefox 18- */
:-moz-placeholder {color: #ccc;}
/* Firefox 19+ */
::-moz-placeholder {color: #ccc;}
/* IE 10+ */
:-ms-input-placeholder {color: #ccc !important;}

/* < 768px */
@media screen and (min-width: 1px) and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    textarea {
        font-size: 20px;
        -webkit-appearance: none;
    }
    select {
        font-size: 20px;
        -webkit-appearance: none;
    }
    .placeholder,
    :placeholder-shown,
    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
        font-size: 3.125vw;
    }
}

/* =.radio, .checkbox
-------------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
.radio,
.checkbox {
    position: relative;
    display: inline-block;
    padding-left: 2em;
    cursor: pointer;
}
.radio:after,
.checkbox:after {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    z-index: 10;
}

/* radio */
.radio:after {
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #333;
}
.radio:before {
    position: absolute;
    display: block;
    content: '';
    width: 0.8em;
    height: 0.8em;
    top: 50%;
    left: calc(0.1em + 1px);
    background-color: var(--secondary-color);
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 20;
}
input[type="radio"]:checked + .radio {
    /*color: var(--secondary-color);*/
}
input[type="radio"]:checked + .radio:before {
    filter: alpha(opacity=100);
    opacity: 1;
}
.radio:after,
.radio:before {
    transform: translate(0, -50%);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

/* checkbox */
.checkbox:after {
    transform: translate(0, -50%);
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #333;
}
.checkbox:before {
    position: absolute;
    content: '';
    top: 40%;
    left: 0.3em;
    transform: translate(0, -50%) rotate(45deg);
    display: block;
    width: 0.6em;
    height: 1.0em;
    border-right: 3px solid var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 20;
}
input[type="checkbox"]:checked + .checkbox {
    /*color: var(--secondary-color);*/
    color: var(--black-color);
}
input[type="checkbox"]:checked + .checkbox:before {
    filter: alpha(opacity=100);
    opacity: 1;
}
.checkbox:after,
.checkbox:before {
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* < 768px */
@media screen and (min-width:1px) and (max-width: 768px) {
}

/* common
---------------------------------------------------*/
svg {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--main-color);
}
.en {
    font-family: "alternate-gothic-atf", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*  wrapper */
#wrapper {
    background-color: var(--background-color);
    margin: 0 auto;
    width: 100%;
    min-height: auto;
    padding-top: 80px;
    overflow: hidden;
}

/* contents-wrap */
.contents-wrap {
    position: relative;
    width: 96%;
    max-width: 1160px;
    margin: 0 auto;
}

/* < 768px */
@media screen and (max-width: 768px) {
    #wrapper {
        padding-top: 12.5vw;
    }
    .contents-wrap {
        max-width: 92.5vw;
    }
}

/* header
---------------------------------------------------*/
#Header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.9);
    z-index: 999;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#Header .inner {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    height: 80px;
}
#Header .inner .logo {
    width: 22.413%;
}
#Header .inner .logo svg {
    fill: var(--primary-color);
}

/* g-navi */
#g-navi {
    position: absolute;
    top: 80px;
    right: 0;
    width: 0;
    height: calc(100vh - 80px);
    background-color: rgba(0,0,0,0.3);
    overflow: hidden;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#g-navi .g-navi-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    background-color: var(--white-color);
    height: calc(100vh - 80px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    transition-delay: 0.2s;
}
#g-navi ul li {
    border-bottom: 1px solid var(--light-color);
}
#g-navi ul li:not(:last-child) {
}
#g-navi ul li a {
    display: block;
    font-size: var(--font-size-m);
    padding: 1em 1em;
}
.active #g-navi {
    width: 100%;
}
.active #g-navi .g-navi-inner {
    width: 300px;
}

/* menu */
#menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 80px;
    cursor: pointer;
    z-index: 999;
}
#menu .menu-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 30px;
    z-index: 10;
}
#menu .menu-trigger,
#menu .menu-trigger span {
    transition: all 0.5s;
    box-sizing: border-box;
}
#menu .menu-trigger span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
}
#menu .menu-trigger span:nth-of-type(1) {
    top: 0;
}
#menu .menu-trigger span:nth-of-type(2) {
    top: calc(50% - 1px);
}
#menu .menu-trigger span:nth-of-type(2)::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    transition: all 0.15s;
}
#menu .menu-trigger span:nth-of-type(3) {
    top: auto;
    bottom: 0;
}
.active #menu .menu-trigger span {
    background-color: var(--main-color);
}
.active #menu .menu-trigger span:nth-of-type(1) {
    transform: translate(50%) scale(0);
}
.active #menu .menu-trigger span:nth-of-type(2) {
    transform: rotate(45deg);
}
.active #menu .menu-trigger span:nth-of-type(2)::after {
    transform: rotate(90deg);
    background-color: var(--main-color);
}
.active #menu .menu-trigger span:nth-of-type(3) {
    transform: translate(-50%) scale(0);
}

/* 768 */
@media screen and (max-width: 768px) {
    #Header {
        box-shadow: 0 0.625vw 0.625vw rgba(0, 0, 0, 0.16);
    }
    #Header .inner {
        height: 12.5vw;
    }
    #Header .inner .logo {
        width: 37.5vw;
    }
    /* g-navi */
    #g-navi {
        top: 12.5vw;
        right: 0;
        width: 0;
        height: calc(100vh - 12.5vw);
    }
    .active #g-navi .g-navi-inner {
        width: 50vw;
    }

    /* menu */
    #menu {
        width: 15.625vw;
        height: 12.5vw;
    }
    #menu .menu-trigger {
        width: 6.25vw;
        height: 4.6875vw;
    }
}

/* Footer
---------------------------------------------------*/
#Footer {
    position: relative;
    background-color: var(--primary-color);
    margin-top: 60px;
}
#Footer .inner {
    position: relative;
    padding: 60px 0 40px;
}
#Footer .inner .logo {
    width: 15.625%;
    margin: 0 auto 40px;
}
#Footer .inner .logo svg {
    fill: var(--white-color);
}
#Footer .nav-footer ul {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    line-height: 1.6em;
    margin-bottom: 40px;
}
#Footer .nav-footer ul li:not(:last-of-type) {
    margin-right: 2em;
}
#Footer .nav-footer ul li a {
    color: var(--white-color);
}
#Footer .nav-footer ul li a:hover {
    text-decoration: underline;
}
#Footer .copy {
    text-align: center;
    color: var(--white-color);
    font-size: var(--font-size-s);
}

/*  768  */
@media screen and (max-width: 768px) {
    #Footer {
        margin-top: 9.375vw;
    }
    #Footer .inner {
        position: relative;
        padding: 9.375vw 0 6.25vw;
    }
    #Footer .inner .logo {
        width: 46.875vw;
        margin: 0 auto 6.25vw;
    }
    #Footer .nav-footer ul {
        line-height: 2em;
        margin-bottom: 6.25vw;
    }
}

/* main-wrap
---------------------------------------------------*/
#main-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/*  768  */
@media screen and (max-width: 768px) {
    #main-wrap {
        display: block;
    }
}


/* main-contents
---------------------------------------------------*/
#main-contents {
    width: 70%;
}
#main-contents .main-contents-block {
    background-color: var(--white-color);
}
#main-contents .main-contents-block + .main-contents-block {
    margin-top: 40px;
}

/* 768 */
@media screen and (max-width: 768px) {
    #main-contents {
        width: 100%;
    }
    #main-contents .main-contents-block + .main-contents-block {
        margin-top: 6.25vw;
    }
}


/* side-contents
---------------------------------------------------*/
#side-contents {
    width: 28%;
}
/* side-block */
#side-contents .side-block {
    background-color: var(--white-color);
}
#side-contents .side-block-title {
    color: var(--white-color);
    background-color: var(--main-color);
    padding: 1em;
    margin-bottom: 0.5em;
}
#side-contents .side-block-contents {
    padding: 1em;
}
/* tools-navi */
#side-contents .side-block-contents .tools-navi ul {
    border-top: 1px solid var(--main-color);
}
#side-contents .side-block-contents .tools-navi ul li {
    width: 100%;
    border-bottom: 1px solid var(--main-color);
    padding: 10px;
    overflow: hidden;
}
#side-contents .side-block-contents .tools-navi ul li:last-child {
    margin-bottom: 0;
}
#side-contents .side-block-contents .tools-navi ul li .title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px;
}
#side-contents .side-block-contents .tools-navi ul li .title .icon {
    width: 20px;
    margin-right: 10px;
}
#side-contents .side-block-contents .tools-navi ul li .title .icon svg {
    fill: var(--primary-color);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#side-contents .side-block-contents .tools-navi ul li a:hover .title .icon svg {
    fill: var(--main-color);
}
#side-contents .side-block-contents .tools-navi ul li .title .txt {
    font-size: var(--font-size-m);
    font-weight: 700;
}

/* side-articles */
#side-contents .side-articles {
}
#side-contents .side-articles-title {
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: 700;
    border-bottom: 2px solid var(--main-color);
    padding: 0.5em;
}
#side-contents .article-list {
    border-bottom: 2px solid var(--main-color);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
#side-contents .article-list li:not(:last-child) {
    border-bottom: 1px solid var(--main-color);
}
#side-contents .article-list a {
    display: block;
    padding: 10px 0;
}
#side-contents .article-list .article-wrap {
    display: flex;
    align-items: center;
    gap: 5%;
    width: 100%;
}
#side-contents .article-list .article-wrap .article-fig {
    width: 30%;
    border-radius: 5px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
#side-contents .article-list .article-wrap .article-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.5s;
}
#side-contents .article-list .article-wrap .article-title {
    width: 100%;
    line-height: 1.6em;
    color: var(--main-color);
    word-break: break-all;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#side-contents .article-list .article-wrap:has(> .article-fig) .article-title {
    width: 65%;
}
#side-contents .article-list a:hover .article-fig img {
    scale: 1.05;
}
#side-contents .side-block + .side-articles,
#side-contents .side-articles + .side-block {
    margin-top: 40px;
}

#side-contents .link {
    margin-top: 20px;
    text-align: right;
}
#side-contents .link a {
    position: relative;
    display: inline-block;
    padding-right: 1em;
}
#side-contents .link a::after {
    position: absolute;
    content: '';
    top: 50%;
    right: 0;
    translate: 0 -40%;
    width: 0.8em;
    aspect-ratio: 1 / 1;
    border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    rotate: 45deg;
}

/* 768 */
@media screen and (max-width: 768px) {
    #side-contents {
        width: 100%;
        margin-top: 6.25vw;
    }
    #side-contents .side-block-contents .tools-navi ul li {
        padding: 1.5625vw;
    }
    #side-contents .side-block-contents .tools-navi ul li .title {
        padding: 1.5625vw;
    }
    #side-contents .side-block-contents .tools-navi ul li .title .icon {
        width: 3.125vw;
        margin-right: 1.5625vw;
    }
    #side-contents .side-block + .side-articles,
    #side-contents .side-articles + .side-block {
        margin-top: 6.25vw;
    }
    #side-contents .link {
        margin-top: 3.125vw;
    }
}

/* pageTop
---------------------------------------------------*/
#pageTop {
    position: fixed;
    right: 30px;
    bottom: 60px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-indent: -999px;
    overflow: hidden;
    cursor: pointer;
    z-index: 99;
}
#pageTop:after {
    position: absolute;
    content: '';
    top: 40%;
    left: 55%;
    transform: rotate(-45deg) translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

/*  < 768  */
@media screen and (max-width: 768px) {
    #pageTop {
        right: 3.125vw;
        bottom: 4.6875vw;
        width: 4.6875vw;
        height: 4.6875vw;
    }
    #pageTop:after {
        width: 1.5625vw;
        height: 1.5625vw;
    }
}

/* breadcrumbs
---------------------------------------------------*/
#breadcrumbs {
    background-color: var(--primary-color);
    padding: 10px;
    margin-bottom: 20px;
}
#breadcrumbs ol {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
}
#breadcrumbs ol li {
    position: relative;
    font-size: var(--font-size-s);
}
#breadcrumbs ol li:not(:last-child) {
    padding-right: 1em;
    margin-right: 1em;
}
#breadcrumbs ol li:not(:last-child)::after {
    position: absolute;
    content: '';
    top: 42%;
    right: 0;
    width: 0.6em;
    height: 0.6em;
    border-top: 1px solid var(--white-color);
    border-right: 1px solid var(--white-color);
    transform: rotate(45deg) translate(0, -50%);
}
#breadcrumbs ol li a {
    color: var(--white-color);
}
#breadcrumbs ol li a.inv {
    pointer-events: none;
}

/* < 768 */
@media screen and (max-width: 768px) {
    #breadcrumbs {
        padding: 1.5625vw;
    }
}

/* article-content
---------------------------------------------------*/
.article-content {
    padding: 20px 0 60px;
}
.article-content p,
.article-content h4,
.article-content li {
    line-height: 1.6em;
}
.article-content p + p,
.article-content p + ul,
.article-content p + figure,
.article-content p + .wp-block-heading,
.article-content ul + ul,
.article-content ul + p,
.article-content ul + .wp-block-heading,
.article-content figure + figure,
.article-content figure + ul,
.article-content figure + p,
.article-content figure + figure,
.article-content figure + .wp-block-heading,
.article-content .wp-block-heading + figure,
.article-content .wp-block-heading + ul,
.article-content .wp-block-heading + p,
.article-content .wp-block-heading + figure,
.article-content .wp-block-heading + .wp-block-heading {
    margin-top: 1.0em;
}
.article-content * + .ttl-section {
    margin-top: 60px !important;;
}
.article-content .ttl-article + .ttl-section {
    margin-top: 20px !important;;
}
.article-content * + .ttl-block {
    margin-top: 40px !important;
}
.article-content * + .ttl-caption {
    margin-top: 20px !important;;
}
.article-content h4 {
    font-weight: 700;
}
.article-content a {
    color: var(--primary-color);
    transition: color 0.5s;
}
.article-content a:hover {
    color: var(--secondary-color);
}

/* code block pro*/
.wp-block-kevinbatdorf-code-block-pro .line {
    line-height: 1.4em !important;
    font-size: var(--font-size-n) !important;
}
.article-content p + .wp-block-kevinbatdorf-code-block-pro,
.article-content ul + .wp-block-kevinbatdorf-code-block-pro,
.article-content .wp-block-heading + .wp-block-kevinbatdorf-code-block-pro,
.article-content .wp-block-kevinbatdorf-code-block-pro + p,
.article-content .wp-block-kevinbatdorf-code-block-pro + ul,
.article-content .wp-block-kevinbatdorf-code-block-pro + .wp-block-heading {
    margin-top: 1.0em;
}

/* toc*/
#toc_container {}
.article-content p + #toc_container,
.article-content ul + #toc_container,
.article-content #toc_container + p,
.article-content #toc_container + ul {
    margin-top: 1.0em;
}

/* 768 */
@media screen and (max-width: 768px) {
    .article-content {
        padding: 3.125vw 0 9.375vw;
    }
    .article-content * + .ttl-section {
        margin-top: 9.375vw !important;;
    }
    .article-content .ttl-article + .ttl-section {
        margin-top: 3.125vw !important;;
    }
    .article-content * + .ttl-block {
        margin-top: 6.25vw !important;;
    }
    .article-content * + .ttl-caption {
        margin-top: 3.125vw !important;;
    }
}

/* pagination
---------------------------------------------------*/
.pagination {
    margin: 2em 0;
    text-align: center;
}
.pagination .pagination-navi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}
.pagination a,
.pagination .current {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    aspect-ratio: 1 / 1;
    color: var(--primary-color);
    font-size: var(--font-size-s);
    border: 1px solid var(--primary-color);
    background-color: var(--white-color);
    border-radius: 50%;
}
.pagination .current {
    color: var(--white-color);
    background-color: var(--secondary-color);
}
.pagination .pages {
    display: none;
}
/*
.pagination .previous-link,
.pagination .next-link {
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    background: url('../img/common/icon_arrow4.svg') no-repeat center center / 16px auto;
}
.pagination .previouspostslink {
    transform: rotate(-180deg);
}
*/

/* 768 */
@media screen and (max-width: 768px) {

}

/* title
---------------------------------------------------*/
.ttl-section {
    position: relative;
    line-height: 1.6em;
    text-align: left;
    font-size: var(--font-size-l);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding-left: 2%;
    margin-bottom: 20px;
}
.ttl-section::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    z-index: 1;
}
.ttl-section span {
    position: relative;
    display: inline-block;
    background-color: var(--white-color);
    padding: 0.2em 0.6em;
    z-index: 2;
}
.ttl-block {
    line-height: 1.2em;
    font-size: var(--font-size-m);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-left: 1.2em solid var(--main-color);
    padding-left: 1em;
    margin-bottom: 20px;
}
.ttl-caption {
    line-height: 1.2em;
    font-size: var(--font-size-m);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.ttl-article {
    line-height: 1.2em;
    color: var(--secondary-color);
    font-size: var(--font-size-l);
    font-weight: 700;
    margin-bottom: 20px;
}

/* 768 */
@media screen and (max-width: 768px) {
    .ttl-section {
        margin-bottom: 3.125vw;
    }
    .ttl-block {
        margin-bottom: 3.125vw;
    }
    .ttl-caption {
        margin-bottom: 1.5625vw;
    }
    .ttl-article {
        margin-bottom: 3.125vw;
    }
}


/* BTN
---------------------------------------------------*/
.btn-wrap-col {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.btn-wrap-col > * {
    margin-right: 10px;
}
.btn-wrap-col > *:last-of-type {
    margin-right: 0;
}

/* btn-submit */
.btn-submit {
    text-align: center;
}
.btn-submit .btn-cover {
    position: relative;
    display: inline-block;
    width: 90%;
    max-width: 420px;
    line-height: 1;
    text-align: center;
    -webkit-border-radius: 4em;
    border-radius: 4em;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    letter-spacing: 0.04em;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.btn-submit .btn-cover:before,
.btn-submit .btn-cover:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 4em;
    border-radius: 4em;
    -webkit-transition: 1.0s;
    transition: 1.0s;
}
.btn-submit .btn-cover:before {
    background: var(--primary-color);
    background: linear-gradient(90deg,  var(--primary-color) 0%, var(--secondary-color) 100%);
    z-index: 1;
}
.btn-submit .btn-cover:after {
    background: var(--black-color);
    background: linear-gradient(90deg, var(--black-color) 0%,  var(--main-color) 100%);
    z-index: 2;
}
.btn-submit .btn-cover:hover:after {
    opacity: 0;
}
.btn-submit .btn-cover:active {
    top: 3px;
    box-shadow: none;
}
.btn-submit .btn-icon {
    position: absolute;
    top: 50%;
    right: 9.5%;
    transform: translate(0, -50%);
    width: 15px;
    height: 24px;
    background-image: url('../img/common/icon_arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 20;
    pointer-events: none;
}
.btn-submit input[type="submit"] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1;
    color: #fff;
    font-size: var(--font-size-m);
    font-weight: 700;
    background: transparent;
    padding: 1.25em 1em;
    z-index: 10;
}

.btn-submit.disabled input[type="submit"],
.btn-submit.disabled input[type="submit"]:hover {
    color: #808080;
    box-shadow: none;
    background-color: #ccc;
    cursor: default;
    z-index: 30;
}
.btn-submit.gray .btn-cover:before {
    background: rgb(172,172,172);
    background: linear-gradient(90deg, rgba(172,172,172) 0%, rgba(197,197,197) 100%);
    z-index: 1;
}
.btn-submit.gray .btn-cover:after {
    background: rgb(197,197,197);
    background: linear-gradient(90deg, rgba(197,197,197) 0%, rgba(172,172,172) 100%);
    z-index: 2;
}
.btn-submit.gray .btn-icon {
    position: absolute;
    top: 50%;
    left: 9.5%;
    right: auto;
    transform: translate(0, -50%) rotate(180deg);
}

/* btn-link */
.btn-link {
    text-align: center;
}
.btn-link a {
    position: relative;
    display: inline-block;
    width: 90%;
    max-width: 420px;
    line-height: 1;
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-m);
    font-weight: 700;
    letter-spacing: 0.04em;
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
    border-radius: 4em;
    padding: 1.25em 1em;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.btn-link a:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}

/* 768px */
@media screen and (max-width: 768px) {
    /* btn-submit */
    .btn-submit .btn-cover {
        width: 100%;
        max-width: 92.5vw;
        box-shadow: 0 0.46875vw 0.9375vw 0 rgba(0, 0, 0, 0.2);
    }
    .btn-submit .btn-icon {
        right: 3.90625vw;
        width: 3.4375vw;
        height: 5.46875vw;
    }
    .btn-submit input[type="submit"] {
        padding: 1.067em 1em;
    }

    /* btn-link */
    .btn-link a {
        max-width: 85vw;
        padding: 0.75em 1em;
    }
}



/* .table
---------------------------------------------------*/
.table {
    width: 100%;
    background-color: var(--white-color);
    border-collapse: collapse;
    border-top: solid 1px var(--gray-color);
}
.table th {
    text-align: left;
    font-weight: normal;
    background-color: var(--light-color);
    border-bottom: solid 1px var(--gray-color);
    white-space: nowrap
}
.table td {
    border-bottom: solid 1px var(--gray-color);
    white-space: nowrap
}
.table td .thumbnail {
    max-width: 300px;
    margin: 10px;
}

/* < 768 */
@media screen and (min-width: 1px) and (max-width: 768px) {
    .table td .thumbnail {
        max-width: 46.875vw;
        margin: 1.5625vw;
    }
}


/* tbl-input
---------------------------------------------------*/
.tbl-input {
    margin: 0 auto 20px;
}

.tbl-input th {
    width: 20%;
    font-weight: 700;
    background-color: transparent;
    padding: 1em 1em;
}
.tbl-input th span {
    color: var(--red-color);
    margin-left: 0.5em;
}

.tbl-input td {
    width: auto;
    padding: 1em 1em;
}

.tbl-input td ul.cols {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.tbl-input td ul.cols li {
    position: relative;
    margin-right: 1em;
}

.tbl-input td ul.cols li:last-of-type {
    margin-right: 0;
}

.tbl-input td ul.cols.col2 li {
    width: 40%;
}

.tbl-input td ul.cols.col3 li {
    width: 30%;
}

.tbl-input td ul.cols.hyphen li {
    margin-right: 2em;
}

.tbl-input td ul.cols.hyphen li::after {
    position: absolute;
    content: '';
    top: 50%;
    right: -1.5em;
    width: 1em;
    height: 1px;
    background-color: #333;
}

.tbl-input td ul.cols.hyphen li:last-of-type::after {
    display: none;
}

.tbl-input td ul.chk-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    line-height: 1.6em;
}
.tbl-input td ul.chk-list li {
    margin-right: 1em;
}
.tbl-input td ul.chk-list li:last-of-type {
    margin-right: 0;
}

.tbl-input td .datetime {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.tbl-input td .datetime > input[type="date"] {
    width: 30%;
}

.tbl-input td .datetime > div {
    margin-left: 1em;
}

.tbl-input td ul.list-unstyled {
    line-height: 1.6em;
}

/* < 768 */
@media screen and (min-width: 1px) and (max-width: 768px) {
    .tbl-input,
    .tbl-input tr,
    .tbl-input th,
    .tbl-input td,
    .tbl-input tbody {
        display: block;
        width: 100%;
    }

    .tbl-input {
        margin: 0 auto 6.25vw;
    }

    .tbl-input th,
    .tbl-input td {
        text-align: left;
        border: 0;
        border-bottom: solid 1px #ccc;
    }

    .tbl-input tr:last-of-type td {
        border: 0;
    }

    .tbl-input td {
        padding: 1em 1em;
    }
}


/* COMMON
---------------------------------------------------*/
.error {
    color: var(--red-color);
}

/* toggle */
.btn-toggle {
    cursor: pointer;
}
.btn-toggle + .toggle-content {
    display: none;
}

/* under-line */
.under-line {
    background-image: linear-gradient(transparent 60%, #f6a4b7 40%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    padding: 0 0.2em;
}
.under-line.animated {
    background-size: 0 100%;
}
.under-line.animated.did {
    background-size: 100% 100%;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: var(--white-color);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(35, 24, 21, 0.8);
    border-radius: 10px;
    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

/* scrollbar-thin */
.scr-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.scr-thin::-webkit-scrollbar-track {
    border-radius: 4px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
}
.scr-thin::-webkit-scrollbar-thumb {
    background-color: rgba(39, 57, 76, 0.6);
    border-radius: 4px;
    box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}


/* LIST
---------------------------------------------------*/
ul.disc > li {
    list-style-type: disc;
    margin-left: 2em;
    text-indent: 0;
}
ol.decimal > li {
    list-style-type: decimal;
    margin-left: 2em;
    text-indent: 0;
}
ol.parentheses > li {
    list-style-type:none;
    list-style-position:inside;
    counter-increment: cnt;
    padding-left: 2em;
    text-indent: -2.1em;
}
ol.parentheses > li:before {
    display: marker;
    content: '(' counter(cnt) ') ';
}

ul.radio-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.radio-list li {
    line-height: 1.8em;
}
ul.radio-list li:not(:last-child) {
    margin-right: 20px;
}

ul.check-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.check-list li {
    line-height: 1.8em;
}
ul.check-list li:not(:last-child) {
    margin-right: 20px;
}



/* Effect
---------------------------------------------------*/
.fadein {
    filter: alpha(opacity=0);
    opacity: 0.0;
    transform: scale(1.0) translate(0, 60px);
    -webkit-transform: scale(1.0) translate(0, 60px);
    transition: 0.6s;
    -webkit-transition: 0.6s;
}
.fadein_on {
    filter: alpha(opacity=100);
    opacity: 1.0;
    transform: scale(1.0) translate(0, 0);
    -webkit-transform: scale(1.0) translate(0, 0);
}

/* scale-in */
.fadein.scale-in {
    transform: scale(1.0) translate(0, 0);
    -webkit-transform: scale(1.0) translate(0, 0);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    transition-timing-function: ease-in;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

}

.fadein_on.scale-in {
    filter: alpha(opacity=100);
    opacity: 1.0;
    transform: scale(1.0) translate(0, 0);
    -webkit-transform: scale(1.0) translate(0, 0);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

/* fadeout */
.fadeout_on {
    filter: alpha(opacity=0) !important;
    opacity: 0.0 !important;
    transform: scale(1.0) !important;
    -webkit-transform: scale(1.0) !important;
}

.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}