@charset "UTF-8";


/*------------------------------------*\
PCの表示デザイン
\*------------------------------------*/
@media (min-width: 1000px) {

    /* -------------------------- */
    /* -----------ヘッダー-------- */
    /* -------------------------- */
    .denshiban {
        width: 100%;
        margin: 0 auto;
        background: #fff;
        padding: 20px 0 10px 0;
        text-align: center;
    }

    .denshiban img {
        width: 240px;
    }

    nav {
        width: 100%;
        height: 60px;
        background: #FFFEFA;
        box-sizing: border-box;
        z-index: 999;
    }

    .fixed {
        position: fixed;
        top: 0;
        z-index: 999;
    }

    nav div div:nth-child(1) {
        width: 170px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 0 15px;
    }

    nav div div:nth-child(1) img {
        width: 170px;
    }


    nav div div:nth-child(2) {
        width: calc(100% - 180px);
        max-width: 800px;
        text-align: right;
    }

    nav div div:nth-child(2) ul {
        width: 100%;
        justify-content: flex-end;

    }

    nav div div:nth-child(2) ul li {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        width: 25%;
    }

    nav div div:nth-child(2) ul li a {
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 0.8rem;
        color: #399D26;
        padding: 14px 30px;
        position: relative;
    }


    nav div div:nth-child(2) ul li a img {
        width: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }



    nav div div:nth-child(2) ul li a span {
        display: block;
        font-family: 'Caveat', cursive;
        color: #A8A8A8;
        font-size: 0.7rem;
        letter-spacing: 0.02rem;
        text-align: center;
        font-feature-settings: "palt";
    }

    nav div div:nth-child(2) ul li:nth-child(2) a::after,
    nav div div:nth-child(2) ul li:nth-child(3) a::after{
        content: "";
        width: 1px;
        height: 35px;
        position: absolute;
        top: 15px;
        right: 0;
        background: #D0D0D0;
        z-index: 10;
    }

    nav div div:nth-child(2) ul li a:hover {
        background: #FFF4EA;
    }

    nav div div:nth-child(2) ul li:nth-child(1),
    nav div div:nth-child(2) ul li:nth-child(1) a,
    nav div div:nth-child(2) ul li:nth-child(1) a span {
        display: none;
    }
}

/*------------------------------------*\
モバイルの表示デザイン
\*------------------------------------*/

@media (max-width: 1000px) {

    .denshiban {
        width: 100%;
        background: #fff;
        padding: 25px 0 15px 0;
    }

    .denshiban img {
        width: 200px;
        margin: 0 0 0 20px;
    }


    nav {
        z-index: 500;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        font-size: 1.2em;
        position: relative;
    }



    .menu {
        width: 45px;
        height: 45px;
        background: #FFFEFA;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 999;
        border-radius: 5px;
        cursor: pointer;
    }

    /* ----------------------------
---------div#sp-icon ----------
---------------------------- */


    .menu span {
        position: absolute;
        left: 15%;
        width: 70%;
        height: 3px;
        background-color: #399D26;
        border-radius: 4px;
        transition-duration: 0.3s;
    }

    .menu span:nth-of-type(1) {
        top: 10px;
    }

    .menu span:nth-of-type(2) {
        top: 21px;
    }

    .menu span:nth-of-type(3) {
        bottom: 10px;
    }

    .menu.active span:nth-of-type(1) {
        -webkit-transform: translateY(20px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
    }

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

    .menu.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-12px) rotate(45deg);
    }


    #nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: 100vh;
        opacity: 0;
        visibility: hidden;
        background-color: rgba(255, 251, 247, 1);
        transition: all 0.3s ease-in-out;
    }

    #nav.active {
        right: 0;
        opacity: 1;
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        visibility: visible;
    }

    #nav ul {
        position: absolute;
        top: 20vw;
        left: 0;
        right: 0;
    }

    #nav ul li {
        list-style-type: none;
    }

    #nav ul li a {
        font-size: 1rem;
        display: block;
        padding: 25px 0 15px 0;
        transition: all 0.2s ease-in-out;
        text-align: center;
        text-decoration: none;
        color: #399D26;
        letter-spacing: 0.1rem;
        position: relative;
    }

    #nav ul li a img {
        width: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }


    nav div div:nth-child(2) ul li a span {
        display: block;
        font-family: 'Caveat', cursive;
        color: #A8A8A8;
        letter-spacing: 0.05rem;
        text-align: center;
    }

    #nav ul li a::after {
        content: "";
        display: block;
        width: 60%;
        border-bottom: 1px #D0D0D0 solid;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5px 0 0 0;
        margin: 0 auto;
    }

    #nav ul li a:hover {
        background: #FFF4EA;
    }

}