@charset "utf-8";

@media screen and (max-width: 1024px) {
    .site-header { padding: 5px 0 5px; position: fixed; top: 0; width: 100%; height: 75px; display: flex; align-items: center; margin: 0; z-index: 5; box-sizing: border-box;}
    .pc-nav { display: none;}
    .sp-nav { 
        position: fixed;
        top: 0; 
        right: 0;
        z-index: 10;
        padding: 75px 0 50px;
        width: 80%;
        height: 100%; 
        display: block; 
        background: #f5f5f5;
        overflow-y: scroll;
        box-sizing: border-box;
        transform: translateX(100%);
        transition: all .2s ease-out;
    }
    .sp-nav.is-open {
        transform: translateX(0);
        transition: all .2s ease-out;
    }
    .sp-nav-overlay {
        content: '';
        position: fixed;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.30);
        opacity: 0;
        transform: translateX(100%);
        z-index: 9;
    }
    .sp-nav-overlay.is-sp-nav-visible {
        transform: translateX(0);
        opacity: 1;
    }

    .sp-nav-menu { position: absolute; display: block; width: 30px; height: 25px; right: 20px;}
    .sp-nav-menu span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background-color: #fff; transform: translateY(-50%);}
    .sp-nav-menu::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff;}
    .sp-nav-menu::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; background-color: #fff;}

    .sp-nav ul.menu-group { margin: 0 20px; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 1px solid #ccc;}
    .sp-nav li.menu-item { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; font-size: 20px; color: #333; border-bottom: 1px solid #ccc;}
    .sp-nav li.menu-item span { font-size: 15px;}
    .sp-nav li.menu-item a, .sp-nav li.menu-item span { display: block; padding: 20px 10px; color: #333; font-weight: bold;}

    .sp-nav-close { position: absolute; right: 50px; top: 36px; z-index: 11; display: block;}
    .sp-nav-close::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 32px; height: 2px; background: #333; transform: rotate( 45deg );}
    .sp-nav-close::after { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 32px; height: 2px; background: #333; transform: rotate( -45deg );}

    .block1{ background: #f3f1ed url(../img/top.png) no-repeat -40px top; padding: 0; background-size: 140% auto; margin: auto;}

    .main-box{padding: 174px 0 350px 140px;}
    .main2-p{text-shadow:1px 1px 0 #f3f1ed,-1px 1px 0 #f3f1ed,1px -1px 0 #f3f1ed,-1px -1px 0 #f3f1ed;}
    .main3-p{text-shadow:1px 1px 0 #f3f1ed,-1px 1px 0 #f3f1ed,1px -1px 0 #f3f1ed,-1px -1px 0 #f3f1ed;}
    
    .about-imgbox{ width: 100%; margin: 0 auto; padding: 60px 40px 130px; box-sizing: border-box;}
    .about-imgbox::after { content: ""; display: inline-block; position: absolute; right: 0; top:0; z-index: 0; background: url(../img/about.png) no-repeat 0 0; background-size: 250px auto; width: 250px; height: 100%;}
    .box{ display: block; height: 100%; padding: 100px 0 15px;}
    .three-boxs{ padding: 0;}
    .three-box1{ width: 100%; padding: 0;}
    .three-box2{ width: 100%;  padding: 0; margin-top: 60px}
    .three-box3{ width: 100%;  padding: 0; margin-top: 60px;}
    .button3 { position: relative; z-index: 1; overflow: hidden; display: block; width: 250px; padding: 1em; margin: 0 auto; cursor: pointer; line-height: 1.4; transition: color 0.3s cubic-bezier(0.02,0.01,0.47,1),transform 0.3s cubic-bezier(0.02,0.01,0.47,1); color: #ffffff; border: none; border-width: 0; border-color: transparent; border-radius: 100px; background: #ffab09; font-size: 16px; font-weight: normal;}

    .news-box{ padding: 0 40px 130px;}

    .banner { justify-content: space-between; }
    .banner li:not(:last-child) { margin: 0 0 40px;}
    .foot-menu-list li {font-size: 14px;}

}

@media screen and (max-width: 767px) {
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0.3);}
.block1{ background: #f3f1ed url(../img/top_sp.png) no-repeat center top; background-size: 100% auto; padding: 0; margin: auto;}

.main-box{ width: auto; padding: 90px 46px 50px 50px;}
.main-ttl img {width: 72px; height: auto;}
.main1-p{ margin-top: 12px; font-size: 24px; line-height: 1.5; letter-spacing: -0.03em;}
.main2-p{ margin-top: 15px; font-size: 14px; line-height: 1.5;}
.main2-p > br{ display: none;}
.main2-p::after{ margin-top: 15px;}
.main3-p{ margin-top: 15px; font-size: 12px; line-height: 1.5; text-shadow:1px 1px 0 #f3f1ed,-1px 1px 0 #f3f1ed,1px -1px 0 #f3f1ed,-1px -1px 0 #f3f1ed;}

.title-circle {background: url(../img/roop.png) no-repeat left center; padding: 0 0 0 22px; }
.btn-box{ padding: 0 15px;}

.about-imgbox{ width: 100%; margin: 0 auto; padding: 140px 20px 0; position: relative; box-sizing: border-box;}
.about-imgbox::after { content: ""; display: inline-block; position: absolute; left: 10px; top: 90px; z-index: 0; background: url(../img/about.png) no-repeat 0 0; background-size: 60% auto;}
.about{ font-size: 18px; position: initial; z-index: 1; margin: 0 0 30px;}
.box{ display: block; height: 100%; padding: 0 0 15px;}
.box-text{ margin: 0; padding: 0; font-size: 16px; line-height: 1.6;}
.three-boxs{ padding: 0;}
.three-box1{ width: 100%; padding: 0;}
.three-box2{ width: 100%;  padding: 0; margin-top: 60px}
.three-box3{ width: 100%;  padding: 0; margin-top: 60px;}
.three-box-ttl { font-size: 22px; margin-bottom: 8px;}
.three-box-ttl-sub { font-size: 18px; margin-left: 5px; padding-top: 0.2em;}
.three-box-img {margin-top: 20px;}
.three-box-img + .box-text { margin-top: 15px;}
.three-boxs-btn {padding: 20px 15px 0;}
.button { width: 100%; padding: 0.8em; margin: 10px 0; font-size: 18px;}
.button3 { width: 100%; padding: 0.8em; margin: 0; font-size: 16px; box-sizing: border-box;}

/*-- お知らせ --*/
.news-box{ width: 100%; margin: 0 auto; padding: 100px 20px 50px; position: relative; box-sizing: border-box; overflow-x: hidden;}
.news-box::after{ content: ""; display: inline-block; position: absolute; left: 10px; top: 50px; z-index: 0; background: url(../img/news.png) no-repeat 0 0; background-size: 60% auto;}
.news { margin: 0 0 30px; position: initial; z-index: 1; font-size: 18px;}
.news-boxs{ padding: 0;}
.news-list .item .date{ min-width: 100px; font-size: 16px; padding: 0;}
.news-list .item .title{ font-size: 16px;}
.button-news { width: 100%; padding: 0.8em; margin: 30px 0 0; font-size: 16px; box-sizing: border-box;}
.news-list .item a{ display: block; padding: 20px 0;}

/*-- バナー --*/
.banner { width: 100%; display: block; margin: 0 auto; padding: 50px 20px;  box-sizing: border-box;}
.banner li:not(:first-child) { margin-left: 0;}
.banner li:not(:last-child) { margin: 0 0 40px;}
.banner-box { width: 100%; margin: 10px 0 0;}
.banner-box img {padding: 10px 60px;}
.banner-span { font-size: 16px; margin: 8px 0;}
.banner-span2 {margin: 0px;}


/*-- footer1 --*/
#footer1 { padding: 0 10px 20px;}

.foot-wrap { padding: 50px 0 0;}
.foot-wrap::after{ width: 46px; height: 1px; margin: 40px auto;}
.foot-wrap ul { margin: 0; text-align: center;}

.foot-menu { width: 100%; text-align: left; padding-right: 0;}
.foot-menu-list li {margin-bottom: 15px;}
.foot-menu-list li:last-child {margin-bottom: 15px;}
.span-tell{display: block;}

/*-- footer2 --*/
#footer2 {padding: 8px 1px 8px;}
#footer2 p{ padding: 0 6px; font-size: 13px;}

#uni-toolbar #style_selector .style-toggle {
    left: inherit !important;
    right: 5px !important;
}
}