@charset "UTF-8";

/* 共通スタイル */



/* header */
header .site-logo {
    display: inline-block;
    vertical-align: middle;
}

header .site-menu {
    vertical-align: middle;
}

header ul.site-list {
    list-style: none;
    padding-left: 0;
    margin: auto;
    vertical-align: middle;
}

header ul.site-list li {
    font-weight: bold;
}

/* PC */


@media (min-width: 1200px) {
    /* header */
    header {
        padding: 0 50px;
        min-width: 1260px;
    }

    header .site-logo a img {
        height: 30px;
    }

    header ul.site-list {
        display: inline-block;
    }


}

/* TABLET */
@media (max-width: 1199px) and (min-width: 768px) {



    /* header */
    header {
        padding: 0 20px;
        position: fixed;
    }

    header .site-logo a img {
        height: 20px;
    }

    header .site-menu {
        display: inline-block;
    }

    header ul.site-list {
        display: inline-block;
        margin-right: 0px;
    }


    header .site-menu{
        position: relative;
    }

    header a.menu-pc-line span{
        display: inline-block;
        position: relative;
        top:-3px;
    }

    header a.menu-pc-line:before{
        content: "";
        display: inline-block;
        width: 19px;
        height: 19px;
        padding-right: 7px;
        background-image: url(../img/icon_line.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header .basic-button.small-button.menu-mail {
        max-width: 137px;
    }

    header a.menu-mail span{
        display: inline-block;
        position: relative;
        top:-3px;
    }

    header a.menu-mail:before{
        content: "";
        display: inline-block;
        width: 19px;
        height: 19px;
        padding-right: 7px;
        background-image: url(../img/icon_mail.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header .contact_btn {
        display: flex;
        vertical-align: middle;
        margin-right: 60px;
    }
    header .contact_btn .basic-button.small-button{
        position:inherit;
        padding: 2px 6px;
        min-width: initial;
        height: initial;
    }
    header .contact_btn a.menu-mail:before,
    header .contact_btn a.menu-pc-line:before{
        position: relative;
        top: 2px;
    }

    header .nav_btn {
        top: 1px;
        right: 30px;
    }

}


/* TABLET-VERTICAL */
@media (max-width: 1199px) and (min-width: 1024px) {
    header ul.site-list li.menu-hp,
    header ul.site-list li.menu-media,
    header ul.site-list li.menu-support,
    header .site-menu .menu-mail,
    header .site-menu .menu-pc-line{
        display: none;
    }

    header .contact_btn {
        margin-right: 0px;
    }
}

/* SP */
@media (max-width: 767px) {


    /* header */
    header {
        padding: 10px 15px;
        position: fixed;
    }

    header .site-logo a img {
        height: 20px;
    }

    header ul.site-list li {
        width: 100%;
        text-align: left;
    }

    header ul.site-list li:last-child {
        margin-right: 0;
    }

    header ul.site-list li.menu-home > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        /* opacity: 0.4; */
        background-image: url(../img/icon_sp_home.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-about > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-image: url(../img/icon_sp_about.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-about,
    header ul.site-list li.menu-hp,
    header ul.site-list li.menu-media {
        padding-bottom: 0;
        border-bottom: none;
    }

    header ul.site-list li.menu-hp,
    header ul.site-list li.menu-media,
    header ul.site-list li.menu-support {
        border-bottom: none;
        padding: 10px 0px 10px 30px;
    }


    header ul.site-list li.menu-hp > a:before,
    header ul.site-list li.menu-media > a:before,
    header ul.site-list li.menu-support > a:before {
        content: '-';
        padding-right: 5px;
    }

    header ul.site-list li.menu-plan > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-image: url(../img/icon_sp_plan.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-theme > a:before {
        background-image: url(../img/icon_sp_theme.png);
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Smartphone bottom menu */
   

    .sp-bottom-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 70px;
        bottom: 0;
        background-color: #fff;
        border-top: 1px solid #9C9274;
        z-index: 3;
        padding:0;
        margin: 0;
    }

    .sp-bottom-menu ul.site-list{
        list-style: none;
        text-align: center;
        padding:0;
        padding-top: 3px;
    }

    .sp-bottom-menu ul.site-list li{
        display :inline-block;
        width: 19%;
        height: 70px;
        vertical-align: top;
        font-size:10px;
    }

    .sp-bottom-menu ul.site-list li img{
        height: 3.5vh;
        margin: 0 auto;
        display: block;
        margin-bottom: 2px;
    }

    .sp-bottom-menu ul.site-list li a{
        vertical-align: bottom;
        color: #9C9274;
    }




    /* toggle menu */
    .tgl_wrap{
        width:100%;
        padding: 15px 15px 0px;
        box-sizing: border-box;
        border: 5px solid #EFEDDE;
        border-radius: 20px;
        margin: 20px 0;
    }
    .tgl_switch {
        background: url(../img/sp_accordion_open.png) no-repeat 100% center;
        position: relative;
        cursor: pointer;
    }
    .tgl_switch.active {
        background: url(../img/sp_accordion_close.png) no-repeat 100% center;
    }
    .tgl_switch h3{ font-size: 1.8rem!important; margin:0;margin-bottom: 15px;}
    .tgl_contents {
      display: none;
      padding: 5px 10px;
    }
    .tgl_wrap ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .tgl_wrap li {
        max-width: 90%;
        border-radius: 50px;
        font-size: 14px;
        padding: 10px 22px;
        margin-bottom: 10px;
        background-color: #F7F6EE;
        line-height: 1;
        white-space: pre;
    }
    .tgl_wrap li img {
        max-height: 1.2em;
        padding-right: 14px;
        vertical-align: middle;
    }

    .section-heading h2 + img{
        top: -20px!important;
        padding-left: 25px!important;
    }

}


/* sp menu */
@media (max-width: 767px) {

    header #navi {
        transition: all .6s;
        overflow-y: auto;
        padding-top: 40px;
        width: 250px;
        height: 100vh;
        z-index: 200;
        top: 0;
        right: -320px;
        background-color: #fee12d;
        position: fixed;
    }


    header .nav_btn {
        width: 20px;
        height: 20px;
        z-index: 300;
        top: 0px;
        right: 20px;
        cursor: pointer;
        position: absolute;
    }

    a.link-download img{
        max-height: 10vh;
        padding: 10px 0;
        width: 100%;
    }

    .sp_menu {
        transition: all .6s;
        width: 20px;
        height: 2px;
        left: 5px;
        background-color: #000;
        position: absolute;
    }

    .sp_menu_line_top {
        top: 13px;
    }

    .sp_menu_line_middle {
        top: 21px;
    }

    .sp_menu_line_bottom {
        top: 29px;
    }

    .nav_bg {
        opacity: 0;
        transition: all .6s;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        top: 0;
        left: 0;
        visibility: hidden;
        cursor: pointer;
        position: fixed;
    }

    .nav_open header #navi {
        right: 0;
    }

    .nav_open .nav_bg {
        opacity: .8;
        visibility: visible;
    }

    .nav_open .sp_menu_line_top {
        transform: rotate(45deg);
        top: 20px;
    }

    .nav_open .sp_menu_line_middle {
        width: 0;
        left: 50%;
    }

    .nav_open .sp_menu_line_bottom {
        transform: rotate(-45deg);
        top: 20px;
    }
}


/* sp menu */
/*@media (max-width: 1129px) {*/
@media (max-width: 1023px) {

    header #navi {
        transition: all .6s;
        overflow-y: auto;
        padding-top: 40px;
        width: 250px;
        height: 100vh;
        z-index: 200;
        top: 0;
        right: -320px;
        background-color: #fee12d;
        position: fixed;
    }


    header .nav_btn {
        width: 20px;
        height: 20px;
        z-index: 300;
        /* top: 0px;
        right: 20px; */
        cursor: pointer;
        position: absolute;
    }

    .sp_menu {
        transition: all .6s;
        width: 20px;
        height: 2px;
        left: 5px;
        background-color: #000;
        position: absolute;
    }

    .sp_menu_line_top {
        top: 13px;
    }

    .sp_menu_line_middle {
        top: 21px;
    }

    .sp_menu_line_bottom {
        top: 29px;
    }

    .nav_bg {
        opacity: 0;
        transition: all .6s;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        top: 0;
        left: 0;
        visibility: hidden;
        cursor: pointer;
        position: fixed;
    }

    .nav_open header #navi {
        right: 0;
    }

    .nav_open .nav_bg {
        opacity: .8;
        visibility: visible;
    }

    .nav_open .sp_menu_line_top {
        transform: rotate(45deg);
        top: 20px;
    }

    .nav_open .sp_menu_line_middle {
        width: 0;
        left: 50%;
    }

    .nav_open .sp_menu_line_bottom {
        transform: rotate(-45deg);
        top: 20px;
    }

    /* header */
    header {
        padding: 10px 15px;
        position: fixed;
    }

    header .site-logo a img {
        height: 20px;
    }

    header ul.site-list li {
        width: 100%;
        text-align: left;
    }

    header ul.site-list li:last-child {
        margin-right: 0;
    }

    header ul.site-list li.menu-home > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        /* opacity: 0.4; */
        background-image: url(../images/icon_sp_home.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-about > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-image: url(../images/icon_sp_about.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-about,
    header ul.site-list li.menu-hp,
    header ul.site-list li.menu-media {
        padding-bottom: 0;
        border-bottom: none;
    }

    header ul.site-list li.menu-hp,
    header ul.site-list li.menu-media,
    header ul.site-list li.menu-support {
        border-bottom: none;
        padding: 10px 0px 10px 30px;
    }


    header ul.site-list li.menu-hp > a:before,
    header ul.site-list li.menu-media > a:before,
    header ul.site-list li.menu-support > a:before {
        content: '-';
        padding-right: 5px;
    }

    header ul.site-list li.menu-plan > a:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-image: url(../images/icon_sp_plan.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    header ul.site-list li.menu-theme > a:before {
        background-image: url(../images/icon_sp_theme.png);
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        padding-right: 13px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    header .basic-button.small-button {
        border-radius: 5px;
        width: 100%;
        height: 40px;
        padding: 5px 0px;
        font-size: 1.4rem;
    }

    header .site-menu .menu-download {
        margin-top: 30px;
    }

    header .site-menu .menu-mail, header .site-menu .menu-pc-line {
        display: none;
    }

    header .site-menu .menu-line {
        background-color: #00B900;
        border-color: #00B900;
    }

    header .site-menu .menu-line:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        background-image: url(../img/icon_line.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        padding-right: 5px;
        position: relative;
        top: 3px;
    }
}