@charset "UTF-8";

/* start reset css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clear {
    clear: both;
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

a {
    color: #000;
}

a:hover, a:visited {
    color: #000;
    opacity: 0.8;
}

a[href^="tel:"] {
    pointer-events: none;
}

/* end reset css */
body {
    /*    max-width: 1920px;*/
    margin: 0 auto;
    color: #000;
    font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', 'Meiryo', 'メイリオ', 'Helvetica', sans-serif;
}

.only-sp {
    display: none;
}


/* start font css */
.font-40 {
    font-size: calc(14px + (40 - 14) * ((100vw - 768px) / (1920 - 768)));
}

.font-35 {
    font-size: calc(20px + (50 - 20) * ((100vw - 768px) / (1920 - 768)));
}

.font-31 {
    font-size: calc(19px + (40 - 19) * ((100vw - 768px) / (1920 - 768)));
}

.font-26 {
    font-size: calc(10px + (28 - 10) * ((100vw - 768px) / (1920 - 768)));
}

.font-24 {
    font-size: calc(14px + (32 - 14) * ((100vw - 768px) / (1920 - 768)));
}

.font-23 {
    font-size: calc(14px + (32 - 14) * ((100vw - 768px) / (1920 - 768)));
}

.font-22 {
    font-size: calc(14px + (33 - 14) * ((100vw - 768px) / (1920 - 768)));
}

.font-20 {
    font-size: calc(11px + (30 - 11) * ((100vw - 768px) / (1920 - 768)));
}

.font-18 {
    font-size: calc(12px + (28 - 12) * ((100vw - 768px) / (1920 - 768)));
}

.font-16 {
    font-size: calc(10px + (25 - 10) * ((100vw - 768px) / (1920 - 768)));
}

.font-15 {
    font-size: calc(9px + (22 - 9) * ((100vw - 768px) / (1920 - 768)));
}

.font-14 {
    font-size: calc(8px + (21 - 8) * ((100vw - 768px) / (1920 - 768)));
}

.font-12 {
    font-size: calc(7px + (19 - 7) * ((100vw - 768px) / (1920 - 768)));
}

.font-11 {
    font-size: calc(6px + (17 - 6) * ((100vw - 768px) / (1920 - 768)));
}

/* end font css */

/* strat common part */

img {
    max-width: 100%;
}

.wrapper {
    /*    max-width: 1920px;*/
}

.fll {
    float: left;
}

.flr {
    float: right;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.more-btn {
    display: inline-block;
    width: 25%;
    max-width: 325px;
    padding: 1.7% 0;
    font-weight: bold;
    border-radius: 100px;
    background: #ffc832;
    color: #5b3d00;
    position: relative;
}

.more-btn span {
    display: inline-block;
    width: 28%;
    max-width: 95px;
}

.more-btn span img {
    width: 100%;
}

.more-btn:after {
    content: "";
    width: calc(10px + (24 - 10) * ((100vw - 768px) / (1920 - 768)));
    height: calc(15px + (30 - 15) * ((100vw - 768px) / (1920 - 768)));
    background: url(/img/common/more-arrow.png)no-repeat;
    background-size: cover;
    position: absolute;
    top: 30%;
    right: 10%;
    z-index: 2;
}

.more-btn:hover, .more-btn:visited {
    color: #5b3d00;
}

.section-margin {
    margin-top: 40px;
}

.title01 {
    font-weight: bold;
    padding-bottom: 1.7%;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}

.title01:after {
    content: "";
    height: calc(3px + (7 - 3) * ((100vw - 768px) / (1920 - 768)));
    background: #ffc832;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 5px;
}

.title01.white-border:after {
    background: #fff;
}

.title01 img {
    width: 100%;
}

.title02 span {
    display: block;
    letter-spacing: 3px;
    padding-top: 1%;
}

.common-ttl01 {
    font-weight: bold;
    letter-spacing: 2px;
    color: #656565;
}

.banner {
    position: relative;
    z-index: 1;
    margin: 0 auto 2%;
    padding: 7% 0 5%;
    background: url('/img/common/banner_bg.png') top center no-repeat;
    background-size: cover;
}

.banner-img {
    width: 25%;
    max-width: 480px;
    margin: 0 auto;
}

.banner img {
    width: 100%;
}

.font-bold {
    font-weight: bold;
}

/* end common part */

/* start header css */
#header {
    display: flex;
    justify-content: space-between;
    padding-top: calc(18px + (43 - 18) * ((100vw - 768px) / (1920 - 768)));
    padding-right: calc(25px + (40 - 25) * ((100vw - 768px) / (1920 - 768)));
    padding-bottom: calc(18px + (43 - 18) * ((100vw - 768px) / (1920 - 768)));
    padding-left: calc(40px + (100 - 40) * ((100vw - 768px) / (1920 - 768)));
    position: fixed;
    width: 100%;
    /*    max-width: 1920px;*/
    box-sizing: border-box;
    z-index: 5;
}
#header .logo {
    width: 26%;
    max-width: 460px;
}

#header .logo img {
    width: auto;
}

#Navipc {
    position: fixed;
    right: 100%;
    display: none;
}

#Navipc.active {
    display: block;
    top: 0;
    right: -62%;
    left:62%;
    width: 100%;
    height: 100%;
    color: #fff;
    overflow-y: scroll;
}

#Navipc.active.nav-active {
    top: 46px;
}

#Navipc .menulist {
    width: 39%;
    height: auto;
    padding: 12% 7% 9% 7%;
    background: #ffc832;
    box-sizing: border-box;
}

.menulist {
    display: block;
    line-height: 30px;
}

.menulist li a {
    color: #333;
    opacity: 1;
    font-weight: bold;
    padding: 5% 0;
    display: block;
}

.menulist li a span {
    display: inline-block;
    padding-right: 5%;
}

.menulist li a span img {
    vertical-align: bottom;
    width: 100%;
}
.menulist li a:hover{
    opacity: 0.8;
    display: block;
}

.menu-01 {
    width: 18%;
    max-width: 90px;
}

.menu-02, .menu-03 {
    width: 78%;
    max-width: 390px;
}

.menu-04 {
    width: 60%;
    max-width: 300px;
}

.menu-05 {
    width: 49%;
    max-width: 245px;
}

.menu-06 {
    width: 25%;
    max-width: 125px;
}

.menu-07 {
    width: 38%;
    max-width: 190px;
}

#Navipc .menulist li {
    list-style: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    transition: .5s;
    border-bottom: calc(3px + (5 - 3) * ((100vw - 768px) / (1920 - 768))) solid #ffe664;
}

#Navipc .menulist li:first-child {
    border-top: calc(3px + (5 - 3) * ((100vw - 768px) / (1920 - 768))) solid #ffe664;
}

.social-media {
    width: 6%;
    max-width: 90px;
    display: inline-block;
    padding-right: 9%;
    padding-top: 0.2%;
}

.social-media a {
    display: block;
}

.social-media img {
    width: 100%;
}

.pc-menu {
    width: 5%;
    max-width: 98px;
    display: inline-block;
    cursor: pointer;
}

.menu-section {
    width: 74%;
    text-align: right;
    position: relative;
}

.menu-icon {
    position: absolute;
    top: 10%;
    right: 0;
    z-index: 2;
}

.menu-icon a {
    display: block;
    width: calc(35px + (70 - 35) * ((100vw - 768px) / (1920 - 768)));
    height: calc(30px + (60 - 30) * ((100vw - 768px) / (1920 - 768)));
}

.menu-icon a div i, .menu-icon a div:before, .menu-icon a div:after {
    content: " ";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(4px + (10 - 4) * ((100vw - 768px) / (1920 - 768)));
    background-color: #fff;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
    border-radius: 5px;
}

.menu-icon a div:before {
    top: calc(12px + (25 - 12) * ((100vw - 768px) / (1920 - 768)));
}

.menu-icon a div i {
    top: 0px;
}

.menu-icon a div:after {
    top: calc(24px + (50 - 24) * ((100vw - 768px) / (1920 - 768)));
}

.menu-icon a.menu-active div:before {
    opacity: 0;
}

.menu-icon a.menu-active div:after {
    top: calc(12px + (20 - 12) * ((100vw - 768px) / (1920 - 768)));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu-icon a.menu-active div i {
    top: calc(12px + (20 - 12) * ((100vw - 768px) / (1920 - 768)));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* end header css */

/* start footer css */
.footer-img-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 55%;
    margin: 0 auto;
}

.ft-link {
}

.footer-img-sec-cov {
    background: #285582;
    margin-bottom: 2%;
    position: relative;
}

#footer {
    background: -webkit-linear-gradient(left, rgb(212, 46, 24) 0%, rgb(182, 33, 35) 100%);
    background: -o-linear-gradient(left, rgb(212, 46, 24) 0%, rgb(182, 33, 35) 100%);
    background: -ms-linear-gradient(left, rgb(212, 46, 24) 0%, rgb(182, 33, 35) 100%);
    background: -moz-linear-gradient(left, rgb(212, 46, 24) 0%, rgb(182, 33, 35) 100%);
    background: linear-gradient(to right, rgb(212, 46, 24) 0%, rgb(182, 33, 35) 100%);
}

.footer-cov {
    margin-top: -21%;
}

.footer-inner {
    max-width: 1700px;
    margin: 0 auto;
    width: 90%;
    padding: 15% 0 4%;
}

.copyright-txt {
    text-align: left;
    color: #fff;
}

.ft-img01 {
    width: 18%;
    max-width: 170px;
}

.ft-img03 {
    width: 40%;
    max-width: 390px;
}

.ft-img01 img, .ft-img03 img {
    width: 100%;
    vertical-align: bottom;
}

#page-top {
    position: fixed;
    right: 7%;
    bottom: calc(40px + (70 - 40) * ((100vw - 768px) / (1920 - 768)));
    z-index: 4;
    background: #ffc832;
    border-radius: 50%;
    border: calc(3px + (7 - 3) * ((100vw - 768px) / (1920 - 768))) solid #fff;
    max-width: 134px;
    text-align: center;
    cursor: pointer;
    width: calc(50px + (110 - 50) * ((100vw - 768px) / (1920 - 768)));
    height: calc(50px + (110 - 50) * ((100vw - 768px) / (1920 - 768)));
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#page-top span {
    display: inline-block;
    width: 33%;
    max-width: 40px;
}

#page-top img {
    width: 100%;
}

.footer-nav {
    padding: 3% 0;
    background: #f2f2f2;
}

.footer-nav .footer-nav-inner {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.footer-nav ul li {
    padding: 0.6em 0;
    line-height: 1.5em;
}

.footer-nav ul li:first-child {
    padding: 10px 0;
}

.footer-nav ul {
    padding: 0 5px;
}

.copyright {
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.copyright-txt p a {
    margin: 0 0 0 20px;
}

.ft-logo img {
    max-width: 45px;
}

.ft-link a {
    color: #fff;
    position: relative;
}

.ft-link a:before {
    content: "";
    width: calc(8px + (30 - 8) * ((100vw - 768px) / (1920 - 768)));
    height: calc(8px + (30 - 8) * ((100vw - 768px) / (1920 - 768)));
    background: url(/img/common/link-arrow.png)no-repeat;
    background-size: contain;
    top: 20%;
    left: -13%;
    position: absolute;
}

/* end footer css */
@media (min-width:1921px) {

    /* start font css */
    .font-35 {
        font-size: 50px;
    }

    .font-16 {
        font-size: 25px;
    }

    .font-15 {
        font-size: 22px;
    }

    .font-14 {
        font-size: 20px;
    }

    .font-12 {
        font-size: 19px;
    }

    .font-11 {
        font-size: 17px;
    }

    .font-20 {
        font-size: 20px;
    }
    .font-22{
        font-size: 33px;
    }
    .font-23 {
        font-size: 23px;
    }

    .font-24 {
        font-size: 24px;
    }

    .font-26 {
        font-size: 26px;
    }

    .font-31 {
        font-size: 31px;
    }

    .font-18 {
        font-size: 18px;
    }

    .font-40 {
        font-size: 40px;
    }

    /* end font css */
    #header {
        padding: 43px 40px 43px 100px;
    }

    .menu-icon a div i, .menu-icon a div:before, .menu-icon a div:after {
        height: 10px;
    }

    .menu-icon a div:before {
        top: 25px;
    }

    .menu-icon a div:after {
        top: 50px;
    }

    .menu-icon a.menu-active div i, .menu-icon a.menu-active div:after {
        top: 20px;
    }

    .menu-icon a {
        display: block;
        width: 70px;
        height: 60px;
    }

    #Navipc .menulist li {
        border-bottom: 3px solid #ffe664;
    }

    #Navipc .menulist li:first-child {
        border-top: 3px solid #ffe664;
    }

    .title01:after {
        height: 7px;
    }

    .more-btn:after {
        width: 24px;
        height: 30px;
    }
    #page-top{
        border: 7px solid #fff;
        width: 110px;
        height: 110px;
    }

}

@media (max-width:767px) {
    .only-sp {
        display: block;
    }

    .only-pc {
        display: none;
    }

    /* start font css */
    .font-40 {
        font-size: calc(10px + (25 - 10) * ((100vw - 320px) / (767 - 320)));
    }

    .font-35 {
        font-size: calc(20px + (50 - 20) * ((100vw - 320px) / (767 - 320)));
    }

    .font-31 {
        font-size: calc(18px + (40 - 18) * ((100vw - 320px) / (767 - 320)));
    }

    .font-26 {
        font-size: calc(9px + (23 - 9) * ((100vw - 320px) / (767 - 320)));
    }

    .font-24 {
        font-size: calc(12px + (27 - 12) * ((100vw - 320px) / (767 - 320)));
    }

    .font-23 {
        font-size: calc(18px + (38 - 18) * ((100vw - 320px) / (767 - 320)));
    }

    .font-22 {
        font-size: calc(16px + (38 - 16) * ((100vw - 320px) / (767 - 320)));
    }

    .font-20 {
        font-size: calc(11px + (28 - 11) * ((100vw - 320px) / (767 - 320)));
    }

    .font-18 {
        font-size: calc(12px + (29 - 12) * ((100vw - 320px) / (767 - 320)));
    }

    .font-16 {
        font-size: calc(11px + (23 - 11) * ((100vw - 320px) / (767 - 320)));
    }

    .font-15 {
        font-size: calc(12px + (29 - 12) * ((100vw - 320px) / (767 - 320)));
    }

    .font-14 {
        font-size: calc(12px + (27 - 12) * ((100vw - 320px) / (767 - 320)));
    }

    .font-12 {
        font-size: calc(14px + (32 - 14) * ((100vw - 320px) / (767 - 320)));
    }

    /* end font css */

    /* strat common part */
    .more-btn {
        width: 27%;
        max-width: 207px;
    }

    .more-btn:after {
        width: calc(8px + (15 - 8) * ((100vw - 320px) / (767 - 320)));
        height: calc(12px + (20 - 12) * ((100vw - 320px) / (767 - 320)));
    }

    /* end common part */

    /* start header css */

    /* end header css */
    #header {
        padding: 3%;
    }

    #header .logo {
        width: 50%;
        max-width: 300px;
    }

    #Navipc.active {
        right: -30%;
        left:30%;
    }

    #Navipc .menulist {
        width: 70%;
    }

    .menu-icon {
        top: 10%;
    }

    .menu-icon a {
        width: calc(30px + (40 - 30) * ((100vw - 320px) / (767 - 320)));
        height: calc(25px + (35 - 25) * ((100vw - 320px) / (767 - 320)));
    }

    .menu-icon a div:before {
        top: calc(10px + (15 - 10) * ((100vw - 320px) / (767 - 320)));
    }

    .menu-icon a div:after {
        top: calc(20px + (30 - 20) * ((100vw - 320px) / (767 - 320)));
    }

    .menu-icon a div i, .menu-icon a div:before, .menu-icon a div:after {
        height: calc(3px + (5 - 3) * ((100vw - 320px) / (767 - 320)));
    }

    .menu-01 {
        width: 21%;
    }

    .menu-02, .menu-03 {
        width: 90%;
    }

    .menu-04 {
        width: 73%;
    }

    .menu-05 {
        width: 64%;
    }

    .menu-06 {
        width: 31%;
    }

    .menu-07 {
        width: 52%;
    }

    .social-media {
        width: 16%;
        max-width: 50px;
        padding-right: calc(40px + (60 - 40) * ((100vw - 320px) / (767 - 320)));
        padding-top: 0;
    }

    /* start footer css */
    .footer-img-sec {
        width: 93%;
    }

    .footer-cov {
        margin-top: -30%;
    }

    .footer-inner {
        padding: 15% 0 6%;
        width: 94%;
    }

    .copyright-txt {
        font-size: calc(8.5px + (21 - 8.5) * ((100vw - 320px) / (767 - 320)));
    }

    #page-top {
        bottom: calc(10px + (30 - 10) * ((100vw - 320px) / (767 - 320)));
        width: calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320)));
        height: calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320)));
        max-width: 84px;
        right: 6%;
        border-width: calc(2px + (4 - 2) * ((100vw - 320px) / (767 - 320)));
    }

    .ft-link a:before {
        width: calc(6px + (15 - 6) * ((100vw - 320px) / (767 - 320)));
        height: calc(6px + (15 - 6) * ((100vw - 320px) / (767 - 320)));
        top: 20%;
    }

    /* end footer css */

    /* start banner css */
    .banner {
        padding: 16% 0 8%;
    }

    .banner-img {
        width: 30%;
        max-width: 230px;
        margin: 0 auto;
    }

}