@charset "utf-8";
    :root {
        --main-color: #38ba7c;
        --ac-color: #F5E441;
        --main-color50: #9bdcbd;
        --ac-color50: #f7ec9c;
        --bg-color: #EFEFEF;
        --text-color: #3d3603;

    }

    html {
        font-size: 62.5%;/* 1rem=10px */
    }
    body {
        font-size: 1.6rem;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        color: var(--text-color);
        background-color: var(--bg-color);
        font-feature-settings: "palt";
        line-break: strict;
        text-align: justify;
        height: 100%;
    }
    a {
        color: var(--text-color);
    }
    p {
        font-weight: 400;
    }
    p.center {
        text-align: center;
        margin-top: 2rem;
    }
    h1 {
        font-weight: 600;
    }

    header {
        background-image: url(../images/bg_m01.jpg);
        height: 48vw;
        background-size: cover;
        background-position: center center;
        border-bottom: 4vw solid var(--ac-color);
    }

    header h1 {
        font-size: 2.6rem;
        color: var(--text-color);
        font-family: "BIZ UDGothic", sans-serif;
        font-weight: 700;
        font-style: normal;
        margin: 1rem auto;
        line-height: 1.25;
    }
    .annotation {
        font-size: 1.2rem;
        text-align: right;
    }
    .pc {
        display: none;
    }

    #wrapper {
        width: 100%;
        height: 100%;
    }

    #sc_down,
    #sc_top,
    #menubtn {
        position: fixed;
        text-align: center;
        line-height: 66px;
        cursor: pointer;
        z-index: 9999;
    }
    #sc_top,
    #menubtn {
        width: 66px;
        height: 66px;
    }
    #sc_down {
        width: 30px;
        height: 150px;
        top: 60vh;
        right: 0;
    }
    #sc_top {
        bottom: 1vw;
        right: 1vw;
    }
    #menubtn {
        top: 1vw;
        right: 1vw;
    }
    /* fade用 */
        #sc_top,
        #sc_down {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        }
        #sc_top.visible,
        #sc_down.visible {
        opacity: 1;
        pointer-events: auto;
        }

    #navi p{
        text-align: center;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 4rem;
        padding: 0.125rem 2rem 0.5rem ;
        width: 40vw;
        border: 2px solid var(--main-color50);
        border-radius: 8px;
        margin: 0.5em auto;
        background-color: var(--bg-color);
    }
    #navi p a{
        color: var(--main-color);
        display: block;
    }

    main div.bg_01 {
        text-align: center;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 4rem;
        padding: 0.125rem 2rem 0.5rem ;
        width: 40vw;
       background-color:var(--main-color);
        border-radius: 8px;
        margin: 0.5em auto;
    }
   main div.bg_01 a {
        color:#fff;
        display: block;
    }

    #navi {
        overflow: hidden;
        width: 92vw;
        margin: 0 auto;
        transition: height 0.05s ease;
        /* flex: 0 0 auto; */
        height: 100%;
    }
    #navi.open {
        height: 0;
        /* display: none; */
    }
    header .ren,
    main .ren {
        font-size: 1.2rem;
        padding: 0.5em 1em;
        border-radius: 8px;
        vertical-align: middle;
    }
    main .ren {
        color: var(--bg-color);
        background-color: var(--main-color);
    }
    header .ren {
        display: inline-block;
        color: var(--main-color);
        background-color: var(--bg-color);
    }
    main h2 {
        font-size: 2.6rem;
        font-weight: 900;
        color: var(--main-color);
        text-align: center;
        margin: 0.5em auto 1em;
    }
    main h2 .pc {
        display: inline-block;
    }
    main h2 .pc.blank {
        margin: 0 0.5em 0;
    }
    main h3 {
        background-color: var(--main-color50);
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
    main section {
        margin-bottom: 2em;
    }
    main .column p:not(:has(img)) {
        text-indent: 1em;
        line-height: 1.8;
    }
    main .column small {
        display: block;
        margin-top: 2.5rem;
        font-size: 1.4rem;
    }
    main .ref small a {
        text-decoration: underline;
    }
    span[lang="en"] {
        font-family: "Open Sans", sans-serif;
        /* ↓効いてない */
        hyphens: auto;
        overflow-wrap:break-word;
        word-break: normal;
    }
    /* p:has(span[lang="en"]) br { 
        display: none;
    } */
    span.tume {
        letter-spacing: -0.025em;
    }
    span.tume2 {
        letter-spacing: -0.05em;
    }
    main .ref {
        margin-top: 6rem;
    }
    .pager {
        text-align: center;
        margin: 2rem auto;
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
    .pager a {
        display: inline-block;
        background-color: var(--main-color50);
        color: var(--bg-color);
        padding: 0.5rem 1.5rem 0.75rem;
        border-radius: 8px;
        line-height: 1.0;
    }

    footer {
        width: 100%;
    }
    footer .copyright {
        padding: 4rem;
        background-color: var(--main-color);
        text-align: center;
    }
    footer .copyright small {
        font-size: 1.6rem;
        color: var(--bg-color);
    }
/* tsuika */
.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}.mb40{margin-bottom:40px;}

/* mobile & tablet */
    @media only screen and (max-width: 1023px) {
        .pc {
            display: none;
        }
        #navi ul {
            display: grid;
        }
        #navi ul li {
            position: relative;
        }
        #navi ul li {
            border-radius: 8px;
            padding: 1em;
        }

        #navi ul li span.renNum {
            position: absolute;
            top: -0.25em;
            left: 0.125em;
            font-size: 5.0rem;
            font-weight: 900;
            color: var(--bg-color);
            z-index: 2;
        }
        #navi ul li span.navT1,
        #navi ul li span.navT2 {
            display: block;
            position: relative;
            z-index: 10;
            font-size: 1.4rem;
            font-weight: 600;
        }
        main {
            width: 92vw;
            margin: 1vw auto;
        }
        main h2 .ren {
            display: block;
            width: 8em;
            margin: 3em auto 0.5em;
        }

    }/*  (max-width: 1023px) */


/* mobile only */
    @media only screen and (max-width: 766px) {
        header .box {
            width: 92vw;
            margin: 0 auto;
            padding-top: 4vw;
        }
        .annotation {
            color: var(--bg-color);
        }
        #navi ul {
            grid-template-columns: repeat(2, 1fr); /* 2列構成 */
            gap: 4vw;
        }
        #navi ul li {
            width: 44vw;
        }
        #navi ul li {
            background-color: var(--ac-color50);
        }
        #navi ul li:nth-of-type(4n+1),
        #navi ul li:nth-of-type(4n+4)  {
            background-color: var(--main-color50);
        }
        main h2 .ren {
            width: 8em;
            padding: 1em;
            line-height: 1;
            margin: 4vw auto 1vw;
        }

    }/*  (max-width: 766px) */

/* tablet & pc */
    @media only screen and (min-width: 600px) {
        header {
        height: 200px;
        border-bottom-width: 20px;
        }
        #navi ul li {
            width: auto;
            position: relative;
        }
        main h2 {
            font-size: 3rem;
        }
        main h2 .mobile {
            display: none;
        }
        main h2 .pc {
            display: inline-block;
        }
    }/*  (min-width: 767px) { */

/* tablet only */

@media only screen and (min-width: 601px) and (max-width: 1023px) {
        header .box {
            width: 30vw;
            margin: 0 0 0 8vw;
            padding-top: 4vw;
        }
        #navi {
        width: 92vw;
        }
        #navi ul {
        grid-template-columns: repeat(4, 1fr); /* 2列構成 */
        gap: 4vw;
        }
        #navi ul li {
            background-color: var(--main-color50);
        }
        #navi ul li:nth-child(8n + 1),
        #navi ul li:nth-child(8n + 3),
        #navi ul li:nth-child(8n + 6),
        #navi ul li:nth-child(8n + 8) {
            background-color: var(--ac-color50);
        } 
        main section {
        width: 84vw;
        margin: 0 auto 2em;
        }
        .column h3 br{
            display: none;
        }
}
/* pc only */

@media only screen and (min-width: 1024px) {
        .mobile{
            display: none;
        }
        .pc {
            display: block;
        }
        header .box {
            width: 35vw;
            margin: 0 0 0 8vw;
            padding-top: 4vw;
        }
        #navi {
            width: calc(100px + (16px*18));
            height: auto;
            flex: 0 0 auto;
            padding: 20px;
            line-height: 1;

        }
        #navi.open {
            width: calc(100px + (16px*18));
            height: auto;
            display: block;
        }
        #wrapper{
            display: flex;
            justify-content: space-between;
        }
         #navi {
            order: 2;
        }
        #container {
            width: auto;
            flex: 1 1 auto;
            order: 1;
        }
    #menubtn {
        display: none;
    }    
    #navi p {
        font-size: 1.4rem;
        width: 50%;
    }
	main div.bg_01 {
        font-size: 1.4rem;
        width: 30%;
    }
    #navi ul li {
      position: relative;
      width: calc(50px + (16px*18));
      margin-bottom: 2rem;
    }
    #navi ul li span.renNum {
      display: inline-block;
      font-size: 2.0rem;
      color: #fff;
      text-align: center;
      width: 40px;
      height: 40px;
      background-color: var(--main-color);
      padding: 10px;
      border-radius: 50%;
      margin-right: 0.5em;
      position: absolute;
      top: 0;
      left: 0;
    }
    #navi ul li:nth-of-type(even)  span.renNum {
      background-color: var(--ac-color);
    } 
    #navi ul li span.navT1,
    #navi ul li span.navT2 {
      display: block;
      margin-left: 50px;
      line-height: 1.25;
    }

/* main */
    main section {
      width: calc((1em*16)*3 + (3em*2));
      margin: 2em auto 4em;
      padding-bottom: 4em;
    }
    main section:not(:last-of-type) {
        border-bottom: 3px dotted var(--main-color50);
    }
    main h3 {
        padding: 0.5em 0 0.5em 0.5em;
        margin: 0 0 0.5em;
    }
    main h3:not(:first-of-type) {
        margin-top: 0.75em;
    }
    .column {
      column-count: 3;
      column-gap: 3em;
      column-rule: 0 none transparent;
      column-fill: balance;
      line-height: 1.6;
    }
    .column p {
        line-height: 1.8;
    }
    main .ref {
        margin-top: 8rem;
    }
    p:has(span[lang="en"]) br{
        display: inline-block;
    }
    p.center img {
        width: 50%;
        height: auto;
    }
    p.center.wide img {
        width: 90%;
    }
    main h2 {
        /* line-height: 30px; */
        vertical-align: middle;
    }
    main h2 .ren {
        display: inline-block;
        margin: 0 1em 0.45em 0;
    }

}