@charset "utf-8";
    @import url(https://fonts.googleapis.com/css?family=Lato:400,700&display=swap);
    @import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese);
    @import url(https://fonts.googleapis.com/css?family=Sawarabi+Mincho);
    /*------- 共通 -------*/
    
    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        vertical-align: bottom;
    }
    
    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
        height: 100%;
    }
    
    body {
        background: #777;
        color: #333;
        padding: 0;
        margin: 0;
        height: 100%;
        font-size: 16px;
        font-family: 'Noto Serif JP', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
        letter-spacing: .06em;
        min-width: 280px;
        height: 100%;
        width: 100%;
        position: relative;
        background: url(https://shinkaifan.com/wp-content/themes/shinkaifan/img/clouds-5009069_1280.jpg);
        background-size: cover;
        background-position: center;
    }
    
    @media screen and (max-width: 559.98px) {
        body {
            min-width: initial;
        }
    }
    
    main {
        display: block;
        margin: auto;
        padding-top: 5px;
        min-height: 100%;
        padding-bottom: 13vw;
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    img {
        border: 0;
        vertical-align: bottom;
    }
    
    ul.content_box3 {
        display: flex;
        flex-wrap: wrap;
    }
    
    @media screen and (max-width: 959.98px) {
        ul.content_box3 {
            display: flex;
            padding: 0;
            justify-content: space-around;
        }
        ul.content_box3 li {
            margin: 0.5em 0;
            width: 48%;
            text-align: center;
        }
    }
    
    ul.content_box3 li img {
        margin: auto;
        display: block;
    }
    
    img:hover {
        opacity: 0.5;
    }
    
    p,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    dl,
    dt,
    dd,
    a,
    form {
        margin: 0;
        padding: 0;
    }
    
    .smooth0,
    .smooth1,
    .smooth2,
    .smooth3,
    .smooth4,
    .smooth5,
    .smooth6,
    .smooth7,
    .smooth8,
    .smooth9,
    .smooth10,
    .smooth11,
    .smooth12,
    .smooth13 {
        clip-path: inset(0 100% 0 0);
        display: inline-block;
        transition: 1.5s cubic-bezier(0.37, 0, 0.63, 1);
        transition-property: clip-path;
        line-height: 1.4;
    }
    
    .smooth0.is-animated,
    .smooth1.is-animated,
    .smooth2.is-animated,
    .smooth3.is-animated,
    .smooth4.is-animated,
    .smooth5.is-animated,
    .smooth6.is-animated,
    .smooth7.is-animated,
    .smooth8.is-animated,
    .smooth9.is-animated,
    .smooth10.is-animated,
    .smooth11.is-animated,
    .smooth12.is-animated,
    .smooth13.is-animated {
        clip-path: inset(0);
    }
    /* 
    .kurukuru0,
    .kurukuru1,
    .kurukuru2,
    .kurukuru3,
    .kurukuru4,
    .kurukuru5,
    .kurukuru6 {
        opacity: 1;
    }
    
    .kurukuru0.is-animated,
    .kurukuru1.is-animated,
    .kurukuru2.is-animated,
    .kurukuru3.is-animated,
    .kurukuru4.is-animated,
    .kurukuru5.is-animated,
    .kurukuru6.is-animated {
        animation: kurukuru 1.4s ease-out;
        opacity: 1;
    }
    
    @keyframes kurukuru {
        0% {
            transform: rotateY(0) translateY(40px);
            opacity: 0;
        }
        100% {
            transform: rotateY(360deg) translateY(0);
            opacity: 1;
        }
    } */
    
    h1,
    h2,
    h3,
    h4 {
        font-weight: normal;
    }
    
    h2 {
        position: relative;
        padding: 0.1em 0.5em;
        background: -webkit-linear-gradient(90deg, rgba(47, 56, 68) 0%, rgba(47, 56, 68, 0.6) 5%, transparent 16%);
        background: linear-gradient(90deg, rgba(47, 56, 68) 0%, rgba(47, 56, 68, 0.6) 5%, transparent 16%);
        border-bottom: 3px double #555;
        padding: 1vw 2vw 1vw 5vw;
        margin: 2vw auto;
        width: 50%;
        font-weight: 700;
    }
    
    h3.sentence {
        position: relative;
        padding: 5px 26px 5px 42px;
        background: #ccc;
        width: auto;
        color: rgba(0, 0, 0, 0.8);
        margin-left: -12px;
        line-height: 1.3;
        border-bottom: solid 3px #3f637b;
        z-index: 2;
        margin-bottom: 1em;
        margin-top: 1em;
    }
    
    h3.sentence:before {
        position: absolute;
        content: '';
        left: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border: none;
        border-left: solid 30px #f2d6de;
        border-bottom: solid 20px transparent;
        z-index: -1;
    }
    
    /* h3.sentence:after {
        position: absolute;
        content: '';
        right: -3px;
        top: -7px;
        width: 0;
        height: 0;
        border: none;
        border-left: solid 30px transparent;
        border-bottom: solid 120px #f2d6de;
        z-index: -1;
    } */
    
    @media screen and (max-width: 559.98px) {
        h1 {
            font-size: 2.4rem;
        }
        h2 {
            padding: 1.6rem 1.6em 0.4em 8vw;
            margin: 4vw auto;
            font-size: 4vw;
            width:90%;
        }
    }
    
    ul,
    ol {
        list-style: none;
    }
    
    a {
        color: #2f3844;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: none;
        opacity: 0.7;
    }
    
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
    
    .textR {
        text-align: right;
    }
    
    .fa,
    .fab,
    .fal,
    .far,
    .fas {
        vertical-align: text-bottom !important;
    }
    
    .flex,
    .flex_pcOnly {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    table {
        width: 100%;
        margin: 0;
        padding: 0;
        border-collapse: separate;
        border-spacing: 0;
        text-align: left;
        border-radius: 10px;
        overflow: hidden;
    }
    
    table th {
        background-color: #f8f8f8;
        font-weight: normal;
        padding: .6em 3em;
        border-bottom: 1px solid #dfdfdf;
        width: 30%;
        vertical-align: top;
    }
    
    table td {
        background-color: #fff;
        padding: .6em 3em;
        border-bottom: 1px solid #dfdfdf;
    }
    
    table tbody tr:last-child th,
    table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .br_sp {
        display: none;
    }
    
    .sp_none {
        display: block;
    }
    
    .pc_none {
        display: none;
    }
    
    .sptab_only {
        display: none;
    }
    
    .opacity a:hover {
        opacity: 0.7;
        transition: 0.3s;
    }
    
    @media screen and (max-width: 559.98px) {
        img {
            max-width: 100%;
            height: auto;
        }
        .flex_pcOnly {
            display: block;
        }
        .br_sp {
            display: block;
        }
        .pc_none {
            display: block;
        }
        .sp_none {
            display: none !important;
        }
        .sptab_only {
            display: block;
        }
        .tab_only {
            display: block;
        }
        .tab_none {
            display: none;
        }
        table th {
            display: block;
            width: 100%;
            border-bottom: none;
            padding: 17px 0 17px 25px;
        }
        table td {
            display: block;
            border-bottom: none;
            padding: 20px 25px;
            line-height: 1.8;
        }
        *:focus {
            outline: none;
        }
        a {
            -webkit-tap-highlight-color: rgba(230, 167, 184, 0);
            cursor: pointer;
        }
    }
    /*------------- ローディング画面 -------------*/
    
    #loading {
        /* 画面一杯にローディング画面を広げる */
        height: 100%;
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 100;
        /* flexboxを使ってローディングアイコンを画面の中央に寄せる */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    
    #loading img {
        -webkit-transition: all 2s ease;
        transition: all 2s ease;
        position: fixed;
        /* 1.21秒でフェードアウト */
    }
    
    #loading p {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        color: #e6a7b8;
        position: fixed;
        text-align: center
    }
    /*------------- ヘッダー -------------*/
    
    .header-wrapper {
        width: 100%;
        position: fixed;
        background: linear-gradient(to right, rgba(69, 97, 115, 1), rgba(43, 67, 99, 1), rgba(138, 174, 149, 1), rgba(150, 192, 254, 1), rgba(138, 174, 149, 1), rgba(43, 67, 99, 1), rgba(69, 97, 115, 1));
        background: #222;
        background: linear-gradient(to bottom, rgba(57, 97, 122, 1), rgba(34, 34, 34, 1));
        height: 110px;
        transition: 1s;
        z-index: 1;
        background: url(https://shinkaifan.com/wp-content/themes/shinkaifan/img/clouds-5009069_1280.jpg);
        background-size: cover;
        background-position: center;
    }

    .header-wrapper:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: -webkit-fill-available;
        background-color:rgba(0, 0, 0, 0.3);
    }
    
    @media screen and (max-width: 559.98px) {
        .header-wrapper {
            margin-top: 20px !important;
            top: -20px;
            transition: 1s;
            height: 78px;
        }
    }
    
    .header-wrapper.hide {
        transform: translateY(-42px);
        transition: .3s;
        z-index: 3;
    }
    
    @media screen and (max-width: 559.98px) {
        .header-wrapper.hide {
            height: 104px;
        }
    }
    
    #logo {
        height: 50px;
        margin-left: calc(50% - 150px);
        padding-top: 0 !important;
        position: relative;
        display: inline-block;
        z-index: 99;
        transition: .3s;
    }
    
    @media screen and (max-width: 559.98px) {
        #logo {
            height: 25px;
            margin-left: calc(50% - 75px);
        }
    }
    
    .header-wrapper.hide #logo {
        display: none;
    }
    
    #logo img {
        height: 63px !important;
        width: auto !important;
    }
    
    @media screen and (max-width: 599.98px) {
        .header-wrapper.hide #logo {
            display: none;
        }
        .header-wrapper.hide {
            background-color: transparent;
        }
    }
    
    #logo a:hover {
        opacity: 1.0;
    }
    
    #logo img:hover {
        opacity: 0.9;
    }
    
    form#searchform {
        display: inline-block;
        position: absolute;
        top: 45px;
        left: 20px;
        margin-top: 5px;
        width: auto;
    }
    
    @media screen and (max-width: 559.98px) {
        form#searchform {
            top: 24px;
            left: 5px;
        }
    }
    
    .mainimage {
        width: 100%;
        position: relative;
        z-index: 1;
        margin-top: 20px;
    }
    
    .mainimage.sp_none {
        column-count: 3;
        padding: 0;
    }

    .bx-wrapper {
        margin-bottom: 0 !important;
    }
    
    .bx-wrapper img {
        object-fit: cover !important;
    }
    
    .bx-wrapper ul li {
        height: 333px;
    }

    
    .mainimage img {
        display: block;
        margin: 0 auto;
        max-height: 333px;
        opacity: 1.0;
        height: 333px;
        width: 100%;
    }
    
    @media screen and (max-width: 559.98px) {
        .mainimage img {
            margin-top: 0;
            width: 100%;
            height: inherit;
        }
    }
    
    .mainimage-text {
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        color: #fff;
        font-size: 2vw;
        top: 50%;
        position: absolute;
        z-index: 5;
        height: auto;
    }
    
    @media screen and (min-width: 1024px) {
        .mainimage-text {
            font-size: calc( 50vw * 0.03);
        }
    }
    
    .mainimage-text span {
        color: #fff;
        font-size: 3vw;
    }
    
    @media screen and (min-width: 1024px) {
        .mainimage-text span {
            font-size: calc( 50vw * 0.04);
        }
    }
    
    @media screen and (max-width: 559.98px) {
        .mainimage-text span {
            font-size: 4vw;
        }
    }
    
    .mainimage-text p {
        margin-top: 1em;
        margin-left: 1em;
        color: #65535a;
    }
    
    .pc_none form#searchform {
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 5px;
        width: auto;
    }
    
    .header-wrapper button {
        background: #333;
        height: 42px;
        border-radius: 10px;
    }
    
    @media screen and (max-width: 559.98px) {
        .header-wrapper button {
            height: 26px;
            border-radius: 5px;
        }
        .logo-hamburger {
            width: 100%;
            padding: 10px;
            height: 50px;
        }
        .logo-hamburger img,
        .logo-hamburger img a:hover {
            display: block;
            position: fixed;
            margin: 0;
            left: 10px;
            top: -100vh;
            width: 50vw;
            height: calc(60vw / 275 * 69);
            background-color: #e6a7b8;
            z-index: 89;
        }
        #menu-btn-check:checked~.logo-hamburger img,
        #menu-btn-check:checked~.logo-hamburger img a:hover {
            left: 10px;
        }
        .mainimage.pc_none {
            display: block;
            position: relative;
            align-items: center;
            z-index: inherit;
            margin: -20px 0 1em 0;
        }
        .mainimage-text {
            display: block;
            position: absolute;
            align-items: center;
            width: 90vw;
            top: 50%;
            left: 0;
            text-align: center;
            font-size: 1.2rem;
            margin-top: 1em;
            min-width: inherit;
            margin-left: 5vw;
        }
        .mainimage-text p {
            margin-top: 0.5em;
            margin-left: 0.5em;
        }
        .mainimage-text p {
            margin-top: 0.1em;
            margin-left: 0.1em;
        }
    }
    
    @media screen and (max-width: 360px) {
        .mainimage-text {
            font-size: 70%;
        }
    }
    /*------- 多言語メニュー -------*/
    
    select#gtranslate_selector {
        width: 100%;
        top: 1vw;
        right: 1vw;
        border-radius: 10px;
        font-family: 'OpticianSans', 'Noto Serif JP', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS PGothic', arial, helvet;
        padding: 0 1em;
    }
    
    @media screen and (max-width: 559.98px) {
        select#gtranslate_selector {
            position: absolute;
            width: 130px;
            top: -14px;
            padding: 0;
        }
    }
    
    div#gtranslate_wrapper {
        position: absolute;
        top: 1vw !important;
        right: 1vw !important;
    }
    
    @media screen and (max-width: 559.98px) {
        div#gtranslate_wrapper {
            position: absolute;
            top: calc(60vw / 275 * 69 + 20px) !important
        }
    }
    
    #gtranslate_selector option:nth-child(2n) {
        background-color: #e6a7b8;
        color: #fff;
    }
    
    #gtranslate_selector option:nth-child(2n+1) {
        background-color: #f2d6de;
    }
    
    #gtranslate_selector:hover {
        background-color: #dc9fb0 !important;
    }
    /*------- グローバルメニュー(PC) -------*/
    
    nav {
        font-family: 'OpticianSans', 'Noto Serif JP', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS PGothic', arial, helvet, ica, sans-serif;
        font-size: 2rem;
    }
    
    .header-wrapper.hide .nav {
        display: none;
    }
    
    .navbox {
        display: inline-block;
        z-index: 100;
        transition: .3s;
        width: 100%;
    }
    
    @media screen and (max-width: 999.98px) {
        .navbox {
            margin-top: -5px;
        }
    }
    
    @media screen and (max-width: 559.98px) {
        .navbox {
            margin-top: 3px;
        }
    }
    
    .header-wrapper.hide .navbox {
        padding-top: 50px;
        transition: 0s;
        height: 84px;
    }
    
    .nav_content {
        display: inline-block;
    }
    
    .yoko-scroll {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        /* scrollbar-width: none; */
        /* Firefox対応 */
        scrollbar-width: thin;
        scrollbar-color: gray aliceblue;
    }
    
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background: aliceblue;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: linear-gradient(to right, rgba(69, 97, 115, 0.5), rgba(43, 67, 99, 0.5), rgba(138, 174, 149, 0.5), rgba(150, 192, 254, 0.5), rgba(138, 174, 149, 0.5), rgba(43, 67, 99, 0.5), rgba(69, 97, 115, 0.5));
    }
    
    ::-webkit-scrollbar-thumb:horizontal:hover {
        background: linear-gradient(to right, rgba(69, 97, 115, 1), rgba(43, 67, 99, 1), rgba(138, 174, 149, 1), rgba(150, 192, 254, 1), rgba(138, 174, 149, 1), rgba(43, 67, 99, 1), rgba(69, 97, 115, 1));
    }
    
    .yoko-scroll ul {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        cursor: grab;
    }

.news .yoko-scroll ul,
.works .yoko-scroll ul,
.off .yoko-scroll ul,
.map .yoko-scroll ul,
.quiz .yoko-scroll ul,
.link .yoko-scroll ul,
.database .yoko-scroll ul{
    justify-content: left;
}
    
    @media screen and (max-width: 999.98px) {
        .yoko-scroll ul {
            justify-content: left;
        }
    }
    
    .yoko-scroll ul:active {
        cursor: grabbing;
    }
    
    .nav_content li {
        display: inline-block;
        margin: 0 4px 0 4px !important;
        text-align: center;
        color: #fff;
        z-index: 100;
        line-height: 1.6;
        font-size: 16px;
        padding: 6px 4px 0 4px;
        letter-spacing: 0.01em;
    }
    
    @media screen and (max-width: 559.98px) {
        .nav_content li {
            padding: 0 3px;
        }
    }
    
    .nav_content li.active {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
        border-radius: 10px 10px 0 0;
        background: #344f6d;
    }
    
    .nav_content li:last-child {
        border-right: none;
        padding-right: 20px !important;
    }
    
    .nav_content li .nav {
        letter-spacing: -0.01em;
        font-size: 50% !important;
        color: #fff !important;
    }
    
    .nav_content li a {
        position: relative;
        display: inline-block;
    }
    
    @media screen and (max-width: 559.98px) {}
    
    .caption {
        white-space: pre;
        top: 0;
        color: #fff;
        opacity: 1;
        font-size: 14px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        background: linear-gradient(210deg, rgba(243, 170, 196, 1), rgba(239, 210, 236, 1) 18%, rgba(248, 230, 200, 1) 33%, rgba(255, 247, 216, 1) 50%, rgba(185, 238, 197, 1) 66%, rgba(174, 212, 241, 1) 85%, rgba(183, 187, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    @media screen and (max-width: 559.98px) {
        .caption {
            font-size: 12px;
        }
    }
    
    .header-wrapper.hide .caption {
        top: 38px;
    }
    /*------- グローバルメニュー(ハンバーガーメニュー) -------*/
    
    #menu-btn-check {
        display: none !important;
    }
    
    .hamburger-menu.pc_none {
        height: 80px;
    }
    
    .menu-content {
        width: 100%;
        height: auto;
        position: fixed;
        padding-bottom: 2em;
        background-color: #222;
        opacity: 0;
        right: 100%;
        z-index: 80;
        background-color: #222;
        transition: all 0.3s;
        margin-top: 50px;
    }
    
    .hamburger-menu.hide .menu-content {
        margin-top: -20px;
    }
    
    .menu-content ul li {
        line-height: 40px;
        /* background: url(/images/icon-sakura.png) left 20px top 20px no-repeat; */
        font-size: 1.2em;
    }
    
    @media screen and (max-width: 559.98px) {
        .menu-content {
            margin-top: 0;
        }
        .menu-content ul li {
            line-height: inherit !important;
            font-size: 3vh !important;
        }
    }
    
    .menu-content ul li a {
        display: block;
        width: 100%;
        box-sizing: border-box !important;
        color: #fff;
        text-decoration: none !important;
        position: relative;
        padding: 0.2em 75px !important;
        border-bottom: 0.1px solid #fff !important;
    }
    
    .menu-content ul li a:hover {
        background: #f2d6de;
        color: #333;
    }
    
    .menu-content ul li a::before {
        content: "";
        width: 10px;
        height: 10px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 1em;
        top: calc(50% - 6px);
    }
    
    .menu-btn {
        left: 0px;
        margin-top: 5px !important;
        background-color: transparent;
        padding: 10px;
        border: none;
        position: fixed;
        top: 0;
        right: 10px;
        margin-left: 10px !important;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 101;
    }
    
    .menu-btn:before {
        content: none;
        color: #fff;
        background-color: transparent;
    }
    
    .header-wrapper.hide .menu-btn {
        margin-top: 54px;
        transition: all 0s;
    }
    
    .header-wrapper.hide .menu-btn:before {
        content: ""
    }
    
    #menu-btn-check:checked~.menu-content {
        opacity: 1;
        right: 0;
    }
    
    .hamburger-menu.hide label.menu-btn {
        height: calc(60vw / 275 * 69 - 20px);
        width: calc(60vw / 275 * 69 - 20px);
    }
    
    .menu-btn span {
        top: 18px;
    }
    
    .menu-btn span:before,
    .menu-btn span,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 4px;
        width: 32px;
        border-radius: 3px;
        background-color: #fff;
        position: absolute;
        transition: all 0.5s;
    }
    
    #menu-btn-check:checked~.menu-btn:before {
        content: "";
    }
    
    .hamburger-menu.hide label.menu-btn span:before,
    .hamburger-menu.hide label.menu-btn span:after {
        width: calc(60vw / 275 * 69 - 30px);
    }
    
    .hamburger-menu.hide label.menu-btn span:before {
        bottom: calc(30vw / 275 * 69 - 0.2px - 10px);
    }
    
    .hamburger-menu.hide label.menu-btn span:after {
        top: calc(30vw / 275 * 69 - 3px - 10px);
    }
    
    .menu-btn span:before {
        bottom: 10px
    }
    
    .menu-btn span:after {
        top: 10px;
    }
    
    #menu-btn-check:checked~.menu-btn span::before,
    #menu-btn-check:checked~.menu-btn span::after {
        width: calc(30px * 1.41);
        bottom: calc(50% - 3px);
        left: -4px;
    }
    
    #menu-btn-check:checked~.menu-btn span::before {
        transform: rotate(45deg);
    }
    
    #menu-btn-check:checked~.menu-btn span::after {
        transform: rotate(-45deg);
        top: 1px;
    }
    
    .hamburger-menu.pc_none {
        height: 50px;
    }
    
    @media screen and (max-width: 559px) {
        .header-wrapper.hide #menu-btn-check:checked~.menu-content {
            top: 0px;
        }
        .menu-content ul li a {
            padding: 0.2em 1em !important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(210deg, rgba(243, 170, 196, 1), rgba(239, 210, 236, 1) 18%, rgba(248, 230, 200, 1) 33%, rgba(255, 247, 216, 1) 50%, rgba(185, 238, 197, 1) 66%, rgba(174, 212, 241, 1) 85%, rgba(183, 187, 255, 1));
            filter: contrast(.48) brightness(1.4);
        }
    }
    
    #menu-btn-check:checked~.menu-btn span {
        background-color: rgba(255, 255, 255, 0);
        /*メニューオープン時は真ん中の線を透明にする*/
    }
    
    .menu-content ul li:first-child a {
        border-top: solid 1px #fff;
    }
    
    .menu-content ul li {
        list-style: none;
    }

footer#pagetop-footer {
    background-image: linear-gradient(180deg, rgba(252, 255, 255, 0.8) 0, rgba(9, 16, 34, 0.8) 100%);
    margin-top: -10vw;
}
    
    #page-top {
        display: block;
        height: calc(60vw / 275 * 69 + 20px);
        margin-top: calc(-50vw / 275 * 69 - 20px);
        content: "";
    }
    /*
@media screen and (max-width: 1023.98px) {
    #page-top {
        height: 240px;
    margin-top: -240px;
        background-color: #f2d6de;
    }
}

*/
    
    @media screen and (min-width: 560px) {
        #page-top {
            height: calc(100vw / 3);
            margin-top: calc(-100vw / 3);
        }
    }
    /*------- メインコンテンツ（共通） -------*/
    
    .main-content {
        width: 100%;
        margin-top: 130px;
        z-index: -1;
    }
    
    @media screen and (max-width: 999.98px) {
        .main-content {
            padding: 0 20px;
        }
    }
    
    @media screen and (max-width: 559.98px) {
        .main-content {
            margin-top: 78px;
            padding: 0 10px;
        }
    }
    
    .blackboard-box h3 {
        font-size: 1.2em;
        font-family: 'OpticianSans', 'Noto Serif JP', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
        margin: 0;
        letter-spacing: 0.05em;
        color: #e4e7dc;
        margin: 0;
        text-shadow: 0px 0px 2px #fff;
        padding: 0.2em 0 0.2em 3em;
    }
    
    .blackboard-box a {
        color: #d0e8d0;
    }
    
    .blackboard-box:before,
    .blackboard-box:after {
        content: "";
        background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
        width: calc(100% + 6px);
        height: 10px;
        position: absolute;
        z-index: -1;
    }
    
    .blackboard-box:before {
        top: -3px;
        left: -3px;
    }
    
    .blackboard-box:after {
        bottom: -3px;
        right: -3px;
    }
    
    .blackboard-box {
        background: #223030;
        position: relative;
        font-size: 120%;
        width: 375px;
        margin: 0.1em 0;
        padding: 1em;
        border-right: 3px solid #9E9E9E;
        border-left: 3px solid #757575;
        box-shadow: 2px 2px 4px #999, 2px 2px 2px #020 inset;
    }
    
    h1,
    h3 {
        background-image: url(/images/icon-sakura.png);
        background-size: 1em 0.6em;
        background-repeat: no-repeat;
        background-position: bottom 30% right 0;
    }
    
    .blackboard-box.wide {
        width: 90%;
        margin: 1em auto;
    }
    
    .blackboard-box p {
        margin: 0.5em 0;
        padding: 0 0 0 3em;
        color: #e4e7dc;
        font-size: 90%;
        text-shadow: 0px 0px 2px #e4e7dc;
    }
    
    @media screen and (max-width: 559.98px) {
        .blackboard-box p {
            margin: 0.5em 0;
            padding: 0 0 0 0;
        }
    }
    
    .chalk1 {
        display: block;
        position: absolute;
        bottom: 0;
        right: 50px;
        margin-top: -6px;
        margin-left: 80%;
        border: solid 3px #e4e7dc;
        width: 20px;
        border-radius: 3px 2px 0 2px;
    }
    
    .chalk2 {
        display: block;
        position: absolute;
        bottom: 0;
        right: 100px;
        margin-top: -6px;
        margin-left: calc(80% - 20px);
        border: solid 3px #fc6d81;
        width: 20px;
        border-radius: 3px 2px 0 2px;
    }
    
    section h3 span {
        font-size: 2rem;
        margin: 0 0 0 20px;
        letter-spacing: 0;
        vertical-align: baseline;
    }
    
    .text-content {
        font-size: 2rem;
        margin: 2em 4em;
        letter-spacing: 0;
        vertical-align: baseline;
    }
    
    .contents,
    .contents2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }

    .map .contents{
/*    justify-content: space-between;*/
    justify-content: space-evenly;
    }
    
    .contents.contents-tweet {
        width: calc(100vw - 3em);
    }
    
    @media screen and (max-width: 559.98px) {
        .contents.contents-tweet {
            width: calc(100vw - 0em);
            margin: 0;
        }
    }
    
    .content_box1,
    .content_box2,
    .content_box3 {
        width: 100%;
        padding: 1em 2em;
    }
    
    .content_box1,
    .content_box3 {
        display: block;
    }
    
    .content_box2 {
        display: flex;
    }
    
    .content_box2 li .box {
        width: 100%;
    }
    
    .content_box2 li .box img {
        display: block;
        margin: 0 auto;
    }
    
    .content_box1 li {
        border-bottom: 1px solid #333;
        margin-bottom: 1em;
    }
    
    .content_box3 li {
        margin-bottom: 1em;
    }
    
    .content_box3 a {
        word-wrap: break-word;
        text-decoration: underline;
        border-bottom: none;
    }
    
    .content_box1 span,
    .content_box3 span {
        color: #333;
        padding-left: 0.2em;
        vertical-align: bottom;
    }
    
    .far,
    .fas,
    .fab {
        display: inline-block;
        text-align: center;
        width: 20px;
    }
    
    @media screen and (min-width: 768px) {
        .contents,
        .contents2 {
            width: 100%;
            margin: 0 auto;
        }
    }
    
    @media screen and (max-width: 959.98px) {
        .sp-content-width {
            width: 90%;
            margin: 0 auto;
        }
        section h3.title {
            font-size: 1.0em;
            padding-right: 30px;
            margin: 1.5em 0.1em 1em 0.1em;
        }
        section h3 span {
            display: block;
            border-left: none;
            margin: 7px 0 0 0;
            padding: 0;
        }
    }
    
    @media screen and (max-width: 559.98px) {
        .blackboard-box h3 {
            padding: 0 0 0 1em;
            font-size: 0.8em;
        }
        .main-content .flex {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .content_box1,
        .content_box2 {
            padding: 0.5em;
            margin-top: 1em;
        }
        .content_box3 {
            padding: 0.1em;
        }
    section.sentence p {
        margin: 1em 0;
    }
}

section.sentence p {
    margin: 1em auto;
    max-width: calc( 1200px - 2em);
}
    section.sentence p a {
        padding: 0 0.3em;
    }

ul.flex-lists{
    display: flex;
    justify-content: center;
}

    /*------- ページ内リンク -------*/
    
    .anchor-target {
        display: block;
        position: relative;
        top: -70px;
        visibility: hidden;
    }
    /*------- ページトップ -------*/
    
    div.anchor {
        display: block;
        padding-top: 70px;
        margin-top: -70px;
    }
    /*------- あの桜の木について -------*/
    
    iframe {
        max-width: 100%;
        height: 360px;
        margin-top: 1em;
    }
    
    .googlemap {
        margin: 0 auto;
        text-align: center;
    }
    /*------- フッター -------*/
    
    #site-footer {
        display: block;
        margin: 0 auto;
        background-color: #222;
    }
    
    #site-footer img {
        display: inline-block;
        position: relative;
        height: 25px;
        width: auto;
        margin: 2em 0 2em 2em;
    }
    
    #site-footer a.fb {
        margin-right: 45px;
    }
    
    #site-footer .fb-comment {
        display: none;
        top: 0;
        left: 250px;
        padding: 16px;
        border-radius: 5px;
        background: #E55078;
        color: #fff;
        font-weight: bold;
        margin-top: -10px;
    }
    
    #site-footer a.fb:hover+.fb-comment {
        display: block;
    }
    
    #site-footer .footer-top {
        display: block;
        max-width: 1279.98px;
        text-align: center;
        margin: 0 auto;
    }
    
    #site-footer .share-button {
        display: inline-block;
        vertical-align: top;
    }
    
    .footer-bottom {
        display: block;
        text-align: center;
        padding-bottom: 2em;
    }
    
    .copyright {}
    
    .copyright span a {
        display: inline-block;
        color: #fff;
    }
    
    #site-footer .footer-nav {
        display: flex;
        padding-bottom: 2em;
        justify-content: center;
    }
    
    #site-footer ul li a {
        color: #fff;
        float: left;
        padding: 0.1em 1em;
        font-size: 2rem;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        writing-mode: tb-rl;
        /* IE独自 */
    }
    
    #site-footer ul {
        margin: 1em;
        display: inline-flex;
    }
    
    #site-footer ul li:not(:last-child) a {}
    
    @media screen and (max-width: 1279.98px) {
        #site-footer ul li {
            padding: 0.1em 1em;
        }
        #site-footer ul li a {
            padding: 0.1em 0.5em;
        }
    }
    
    @media screen and (max-width: 559.98px) {
        #site-footer {
            padding: 2em 1em 0 1em;
        }
        #site-footer .footer-top {
            display: block;
            text-align: center;
        }
        #site-footer .share-button {
            display: flex;
            justify-content: center;
        }
        #site-footer .footer-top {
            padding-bottom: 0em;
        }
        #site-footer .footer-nav {
            padding-bottom: 1em;
        }
        #site-footer a.fb {
            margin-right: 0;
        }
        #site-footer a.fb:hover+.fb-comment {
            display: none;
        }
        #site-footer .fb-comment-sp {
            display: block;
            padding: 16px;
            border-radius: 5px;
            background: #2f3844;
            color: #fff;
            font-weight: bold;
            margin-top: -10px;
            margin-bottom: 20px;
        }
        .footer-bottom {
            clear: both;
            padding-top: 1em;
        }
        .copyright {
            display: block;
            margin: 0 0 0em 0;
        }
        #site-footer img {
            margin: 0 1em 2em 1em
        }
        #site-footer ul {
            margin: 0 auto;
            display: block;
            text-align: center;
        }
        #site-footer ul li a {
            padding: 0.1em 1em;
            -webkit-writing-mode: horizontal-tb;
        }
        #site-footer ul li:not(:last-child) a {
            border-right: 0px solid #fff;
        }
    }
    /*------------- コミュニティ画面 -------------*/
    
    div#wpforo {}
    
    @media screen and (max-width: 559.98px) {
        div#wpforo {
            margin: calc(1em) 0;
        }
    }
    
    #wpforo #wpforo-wrap #wpforo-menu li {
        border-bottom: 1px solid #E5B3C1;
    }
    
    #wpforo #wpforo-wrap .fa-info-circle.wpf-reg-info {
        padding-right: 10px;
    }
    
    #wpforo #wpforo-wrap .wpforo-members-wrap .wpf-member-profile-button {
        margin-top: 5px;
    }
    
    #wpforo #wpforo-wrap .wpf-breadcrumb .wpf-root i {
        margin-top: 5px;
    }
    
    #wpforo #wpforo-wrap a:link {
        word-wrap: break-word;
        word-break: break-all;
        vertical-align: bottom;
    }
    
    #wpforo #wpforo-wrap .wpfw-2 {
        width: 100% !important;
    }
    
    #wpforo #wpforo-footer {
        display: none;
    }
    
    @media screen and (max-width: 559.98px) {
        #wpforo #wpforo-wrap .wpforo-members-wrap th.wpf-members-avatar {
            width: 100% !important;
        }
        #wpforo #wpforo-wrap .wpforo-members-wrap th.wpf-members-regdate {
            width: 100% !important;
        }
    }
    
    @media screen and (max-width: 620px) {
        /*#wpforo #wpforo-wrap .wpforo-members-wrap th.wpf-members-avatar,
    #wpforo #wpforo-wrap .wpforo-members-wrap td.wpf-members-avatar {
        width: 20vw;
        display: inline-block;
    }
    #wpforo #wpforo-wrap .wpforo-members-wrap td.wpf-members-avatar .avatar {
        width: 100% !important;
    }
    #wpforo #wpforo-wrap .wpforo-members-wrap th.wpf-members-info1,
    #wpforo #wpforo-wrap .wpforo-members-wrap td.wpf-members-info1 {
        width: 80vw;
        display: inline-block;
    }*/
        #wpforo #wpforo-wrap .wpforo-members-wrap th.wpf-members-regdate,
        {
            width: 100vw !important;
            display: inline-block !important;
        }
    }
    
    .wpf-desc.wpfcl-2:after {
        content: "※半角英数字に限る";
    }
    
    #wpforo #wpforo-wrap input[type="submit"],
    #wpforo #wpforo-wrap input[type="reset"],
    #wpforo #wpforo-wrap input[type="button"],
    #wpforo-dialog input[type="submit"],
    #wpforo-dialog input[type="reset"],
    #wpforo-dialog input[type="button"] {
        color: #fff !important;
    }
    
    #wpforo #wpforo-wrap input[type="button"] {
        color: #000 !important;
    }
    
    #wpforo #wpforo-wrap label {
        line-height: 2;
    }
    
    #wpforo #wpforo-wrap form input[type="checkbox"],
    form input[type="radio"] {
        vertical-align: middle;
        transform: scale(1.8);
    }
    
    #wpforo #wpforo-wrap .wpforo-login-wrap .wpf-forgot-pass {
        line-height: 2 !important;
    }
    
    #wpforo #wpforo-wrap a:link:before {
        content: "→";
        padding-right: 0.5em;
    }
    
    #wpforo #wpforo-wrap .wpforo-members-content tr:first-child,
    #wpforo #wpforo-wrap .wpforo-members-content tr:nth-child(2) {
        display: none;
    }
    
    .wpf-sb-button:before,
    .wpf-item-element.wpf-root a:before,
    a.wpf-member-profile-button:before,
    .wpf-field.wpf-field-type-submit a:before,
    .wpf-action-link span a:before {
        display: none;
    }
    
    #wpforo #wpforo-wrap .wpf-breadcrumb div.active:after {
        z-index: 0 !important;
    }
    /*------------- 固定ページ標準 -------------*/
    
    .page-content {
        margin: 1em;
    }
    
    @media screen and (max-width: 559.98px) {
        .page-content {
            margin: 0.5em;
        }
        .page-content.link-list {
            margin: 1em 0;
        }
        .link-list h2 {
            margin-left: 1em;
        }
    }
    
    [class^="fa-"],
    [class*=" fa-"] {
        display: inline-block;
        width: 2em;
        text-align: center;
        vertical-align: middle;
    }
    
    .fa-icon {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /*--------------------------------------
  カード型_01
--------------------------------------*/
    
    .wp-block-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(365px, 10px));
        margin-bottom: 1.75em;
        box-sizing: border-box;
    }
    
    @media screen and (min-width: 374px) and (max-width: 781.98px) {
        .wp-block-columns {
            /* grid-template-columns: repeat(auto-fit, minmax(50%, 20px)); */
            grid-template-columns: inherit;
            width: 100%;
        }
    }
    
    @media screen and (max-width: 373.98px) {
        .wp-block-columns {
            grid-template-columns: inherit;
        }
    }
    
    @media screen and (min-width: 782px) {
        .wp-block-columns {
            flex-wrap: nowrap;
        }
    }
    
    .wp-block-column {
        flex-grow: 1;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    @media screen and (min-width: 782px) {
        .wp-block-column {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 375px;
        }
    }
    
    @media screen and (min-width: 600px) and (max-width: 781.98px) {
        .wp-block-column:not(:only-child) {
            flex-basis: 50%!important;
            flex-grow: 0;
            width: calc(100%);
            height: calc(33vw / 25 * 8);
            min-height: calc(33vw / 25 * 8 + 40px);
            margin-bottom: 0.5em;
        }
    }
    
    @media screen and (max-width: 599.98px) {
        .wp-block-column {
            flex-basis: 100%!important;
        }
    }
    
    .l-wrapper_01 {
        margin: 0.5rem auto;
        width: 95%;
    }
    
    @media screen and (max-width: 781.98px) {
        .l-wrapper_01 {
            width: 100%;
            min-height: calc(33vw / 25 * 8 + 40px);
        }
    }
    
    .l-wrapper_01:hover {
        transform: translateY(-3px);
        /* box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); */
        transition: all .5s;
    }
    
    .card_01 {
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .16);
        color: #212121;
        text-decoration: none;
        border-radius: 10px;
        position: relative;
        min-height: 110px;
    }
    
    @media screen and (max-width: 559.98px) {
        .card_01 {
            min-height: 90px;
        }
    }
    
    .card__header_01 {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }
    
    .card__title_01 {
        padding: 0.3rem;
        font-size: 1.6rem;
        order: 1;
        font-weight: bold;
        text-decoration: none;
        color: #3f637b;
        margin: 0 auto 0.3em auto;
        margin: 0 0 0 1em;
        max-width: calc(346px - 54px - 0.1em);
    }
    
    @media screen and (max-width: 782px) {
        .card__title_01 {
            max-width: calc(667px - 60px - 1em);
        }
    }
    
    @media screen and (max-width: 559.98px) {
        .card__title_01 {
            max-width: calc(100vw - 60px - 1em);
        }
    }
    
    .card__thumbnail_01 {
        margin: 0;
        order: 0;
        position: absolute;
        right: 0;
    }
    
    .card__image_01 {
        width: 50px;
        border-radius: 10px;
        max-height: 100px;
        object-fit: contain;
        float: right;
        margin: 2px;
        max-height: 50px;
    }
    
    .card__image_01:hover {
        opacity: inherit;
    }
    
    .card__body_01 {
        padding: 0 1.5rem;
        display: inline-block;
    }
    
    .card__text_01 {
        font-size: .8rem;
        text-align: center;
        text-decoration: none;
        padding-bottom: 0;
    }
    
    .card__text2_01 {
        font-size: 1.4rem;
        margin-top: 0;
        margin-bottom: 0.5rem;
        max-width: calc(346px - 60px - 1em);
    }
    
    @media screen and (max-width: 559.98px) {
        .card__text2_01 {
            max-width: calc(100vw - 60px - 1em);
        }
    }
    
    .card__text_01+.card__text_01 {
        margin-top: .5rem;
    }
    
    .card__footer_01 {
        vertical-align: top;
        border-top: 1px solid #ddd;
        display: inline-block;
        border-top: inherit;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    .button_01 {
        display: inline-block;
        text-decoration: none;
        transition: background-color .3s ease-in-out;
        text-align: center;
    }
    
    .button_01 a {
        text-decoration: none;
    }
    
    .button_01.-compact {
        padding: .5rem 1rem;
        border-radius: .25rem;
        background-color: #3f637b;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        font-size: 150%;
        border-radius: 10px;
        position: absolute;
        width: 140px;
        right: 0;
        bottom: 0;
    }
    
    .button_01.-compact:hover,
    .button_01.-compact:focus {
        background-color: #fff;
        border: 1px solid #3f637b;
        color: #3f637b;
    }
    
    li.info-text {
        border-bottom: 0;
        width: 100%;
    }
    
    details {
        margin-top: 1em;
    }
    
    details summary {
        list-style: none;
        cursor: pointer;
    }
    
    details summary::-webkit-details-marker {
        display: none;
    }
    
    details summary::before {
        font-family: "Font Awesome 5 Free";
        content: '\f067';
        font-weight: 700;
        margin-right: 10px;
        font-size: x-large;
        color: #39617a;
    }
    
    details[open] summary::before {
        content: '\f068';
    }
    
    details[open] summary~* {
        animation: fadeIn 0.5s ease-in;
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0;
            /* 透明 */
            transform: translateY(-10px);
            /* 上から表示 */
        }
        100% {
            opacity: 1;
            transform: none;
        }
    }
    
    .frame1 {
        padding: 1em 1em;
        margin: 1em 0;
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 4px #ccc;
        color: #333;
    }
    
    @media screen and (max-width: 559.98px) {
        .frame1 {
            padding: 1em;
            margin: 1em 0.5em;
        }
        .frame1 p {
            line-height: 1.8;
        }
    }
    
    .frame2 {
        color: #fff;
        background: rgba(0, 0, 0, 0.6);
        margin: 0.5em;
        display: inline-block;
        border-radius: 10px;
    }
    
    .frame2 li,
    .frame3 li {
        margin-bottom: 0;
    }
    
    .frame3 {
        background: rgba(0, 0, 0, 0.8);
        margin: 0.5em 0.5em 0.5em 1em;
        display: inline-block;
        vertical-align: top;
        padding: 0.1em 0.5em;
        border-radius: 0 0 10px 10px;
    }
    
    .frame2 li a,
    .frame3 li a {
        color: #fff;
        padding: 1em;
        cursor: pointer;
        display: block;
    }
    
    .wpforo-forum-icon .wpfcl-0 {
        color: #F27693 !important;
    }
    
    #wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-icon {
        font-size: 2.4em;
    }
    
    .place-image iframe {
        height: inherit;
        aspect-ratio: 1;
    }
    
    .material-icons-outlined.md-48 {
        font-size: 32px !important;
        color: #fff !important;
    }
    
    @media screen and (max-width: 559.98px) {
        .material-icons-outlined.md-48 {
            font-size: 30px !important;
        }
    }
    
    .material-icons-outlined.md-48:before {
        content: "";
        width: 100%;
        height: 50px;
        position: absolute;
        z-index: -1;
        border-radius: 10px 0;
    }
    
    .material-icons-outlined.md-30 {
        font-size: 30px !important;
        vertical-align: text-top !important;
    }
    
    .nav_content .material-icons-outlined {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(210deg, rgba(243, 170, 196, 1), rgba(239, 210, 236, 1) 18%, rgba(248, 230, 200, 1) 33%, rgba(255, 247, 216, 1) 50%, rgba(185, 238, 197, 1) 66%, rgba(174, 212, 241, 1) 85%, rgba(183, 187, 255, 1));
        filter: contrast(.48) brightness(1.4);
    }
    
    .nav_content ul li a:hover .material-icons-outlined,
    .nav_content ul li a:hover .caption {
        filter: contrast(.48) brightness(1.8);
    }
    
    .nav_content li.active .material-icons-outlined,
    .nav_content li.active .caption {
        filter: contrast(.48) brightness(2.4);
    }
    
    #wpforo #wpforo-wrap {
        padding: 0 !important;
    }
    /* svg animation */
    /* https://www.gipservice.com/blog/0905/ */
    
    .header-wrapper svg {
        padding-top: 5px;
    }
    
    .st0 {
        fill: #eee;
        stroke: #fff;
    }
    
    .st1 {
        font-family: 'Sawarabi Mincho';
    }
    
    .st2 {
        font-size: 30px;
        letter-spacing: -0.05em;
    }
    
    #layer {
        background: #fff;
    }
    
    @media screen and (max-width: 559.98px) {
        .header-wrapper svg {
            padding-top: 0;
            margin-top: 7px;
        }
        .st2 {
            font-size: 28px;
            letter-spacing: 0em;
        }
    }
    
    .gip {
        position: relative;
        text-align: center;
        vertical-align: middle;
        padding-left: 10px;
        padding-right: 10px;
        width: 300px;
        height: 50px;
        margin-top: -6px;
        /* background:url(https://shinkaifan.com/images/logo-background.jpg); */
    }
    
    @media screen and (max-width: 559.98px) {
        .gip {
            padding-left: 5px;
            padding-right: 5px;
            height: 30px;
            width: 150px;
        }
    }
    
    .header-wrapper.hide .gip {
        padding-top: 8px;
    }
    
    .gip_path {
        stroke: rgba(48, 87, 120, 0.1);
        fill: #fff;
        stroke-width: 1;
        stroke-dasharray: 3000;
        stroke-dashoffset: 3000;
        animation: DASH 9s ease-in alternate forwards;
        -webkit-animation: DASH 9s ease-in 0s forwards;
        -o-animation: DASH 9s ease-in 0s forwards;
        animation: DASH 9s ease-in 0s forwards;
    }
    
    @keyframes DASH {
        0% {
            stroke-dashoffset: 3000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    
    @-moz-keyframes DASH {
        0% {
            stroke-dashoffset: 3000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    
    @-webkit-keyframes DASH {
        0% {
            stroke-dashoffset: 3000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    
    @-o-keyframes DASH {
        0% {
            stroke-dashoffset: 3000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    
    @-ms-keyframes DASHf {
        0% {
            stroke-dashoffset: 3000;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    /*CSS modal window*/
    /*Thanks to https://ecmemo.net/modal-window*/
    
    a.modal-overlay {
        max-width: inherit !important;
    }
    
    .modal-wrapper {
        z-index: 1000000;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0px 10px;
        text-align: center
    }
    
    .modal-wrapper:not(:target) {
        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }
    
    .modal-wrapper:target {
        opacity: 1;
        visibility: visible;
        transition: opacity .4s, visibility .4s;
        z-index:1;
    }
    
    .modal-wrapper::after {
        display: inline-block;
        height: 100%;
        margin-left: -.05em;
        vertical-align: middle;
        content: ""
    }
    
    .modal-wrapper .modal-window {
        box-sizing: border-box;
        display: inline-block;
        z-index: 10;
        margin-top: 100px;
        position: relative;
        width: 100%;
        padding: 60px 15px 30px 15px;
        border-radius: 2px;
        background: rgba(0, 0, 0, .6);
        box-shadow: 0 0 30px rgba(0, 0, 0, .6);
        vertical-align: middle;
    }
    
    .modal-wrapper .modal-window .modal-content {
        max-height: 100vh;
    }
    
    .modal-overlay {
        z-index: 10;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .9)
    }
    
    .modal-wrapper .modal-close {
        z-index: 20;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px !important;
        height: 50px;
        padding-top: 5px;
        color: #333 !important;
        font-size: 50px;
        font-weight: 700;
        line-height: 35px;
        text-align: center;
        text-decoration: none;
        text-indent: 0;
        background-color: rgba(255, 255, 255, 0.7);
    }
@media screen and (max-width: 559.98px) {
}
    
    .modal-wrapper .modal-close:hover {
        color: #2b2e38 !important
    }

/* info 2023 renewal */

    input[type=radio] {
        display: none;
    }
    
    .works-categories {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2em;
        flex-wrap:wrap;
    }
    
    .works-category {
        border: solid #d9d9d9 0.1px;
        background: #fff;
        width: calc( 100% / 6 - 20px);
        text-align: center;
        border-radius: 10px;
        min-width: 100px;
        padding: 0 6px;
    }

    .works-category.none{
        display: none;
    }
    
    @media screen and (max-width: 559.98px) {
        .works-category {
            font-size: 80%;
        }
        .works-category.none{
        display: block;
    }
    }
    
    .works-category a {
        padding: 10px 0;
        display: block;
        transition: all .3s ease 0s;
    }
    
    .works-category:hover {
        background: darkslategrey;
        color: #444;
        cursor: pointer;
    }

    .works-category:hover a{
        color: #fff;
    }
    
    input[type="radio"]:checked+label {
        background: #344f6d;
    }
    
    input[type="radio"]:checked+label a {
        color: #fff;
    }
    
    ul.items-list.data-show {
        display: flex;
        justify-content: space-between;
        justify-content: space-evenly;
    }
    .map li.items-list.data-show {
        display: table;
    }
    ul.items-list.data-hide,
    .map li.items-list.data-hide{
        display: none;
    }
@media screen and (max-width: 559.98px) {
        .works ul.contents li.data-show{
            display: none !important;
        }
    }

.image-copyright {
    margin-bottom: 1em;
}

    @media screen and (max-width: 559.98px) {
.image-copyright {
    font-size: 80%;
}
}

.wave, .grass{
    position: absolute;
}
.header-wrapper.hide .wave{
    top: 48px;
}
svg.uasvg-wave-slide-separator {
    width: 100vw;
    opacity: 0.2;
    height: 50px;
    top: 12px;
    position: absolute;
}

svg.uasvg-grass-separator {
    width: 100vw;
    opacity: 0.8;
    height: 10vw;
    top: -10vw;
    position: absolute;
}

@media screen and (max-width: 559.98px){
    svg.uasvg-grass-separator {
    top: calc(-108px + 10vw);
    left: -1em;
}
}

.post__pagination {
    display: flex;
    /* position: relative; */
    justify-content: space-between;
    position:relative;
    height: 50px;
    max-width: 1200px;
    margin: 0 auto;
}
    .post__pagination.footer{margin-top:0;}
.post__pagination__right, .post__pagination__left {
    max-width: 40%;
}
    span.post__pagination__right__text,
    span.post__pagination__center__text,
    span.post__pagination__left__text{ padding: 0.2em 0.5em;}
    .release-day{font-family: 'Josefin+Sans', 'Sawarabi Mincho'; font-weight: 700;
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    padding: 0.3em;
    margin: 0.1em;
    border-width: 0.1px;
    border-style: solid;
    border-color: rgb(51, 51, 51);
    border-image: initial;}
    .top-content h4 {border-left: none;}
.post__pagination__left,
.post__pagination__center,
    .post__pagination__right{position: absolute;}
    .post__pagination__left{left:0;}
    .post__pagination__center{left:calc(50% - 24px);}
    .post__pagination__right{right:0;}
@media screen and (max-width: 1280px){
span.post__pagination__right__text,
    span.post__pagination__left__text{border:none; font-size:100%;}
    }
span.post__pagination__center__text{border: 1px solid;
    border-image: linear-gradient(to right, rgba(48, 87, 120, 0.8), rgba(61, 82, 139, 0.8), rgba(174, 156, 216, 0.8)) 1;
 font-size:120%;}
@media screen and (max-width: 479px){
        .post__pagination__center{left:calc(50% - 20px);}
        span.post__pagination__center__text{font-size: 80%;}
        span.post__pagination__right__text,
        span.post__pagination__left__text{font-size: 70%;}
}

.blackboard-box p.common-sentence {
    display: none;
}
        
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.en .st2{
    font-size: 21px;
}
.en #logo{
    height: 30px;
}
.en .gip{
    margin-top: -15px;
}
.en .header-wrapper{
    height: 90px;
}

.copyright a{
    color: pink;
}