@charset "UTF-8";

input,textarea {
  -webkit-appearance: none;
}

/*=====================================

      1.タブレットサイズ

======================================*/
@media screen and (max-width: 1024px) {
body { /*font-family: 'NotoSans','メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, Verdana, sans-serif;*/
      font-family:'Lato',Helvetica Neue,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,BIZ UDPGothic,Meiryo,sans-serif;}
    /*    1.1.1 sideNav
    ==================================*/
    .sideNav { display: none; }
}




/*=====================================

      1.スマホ横サイズ

======================================*/

@media (max-width: 768px) {
    /*=================================

          1.2 Home

    ==================================*/
    h2.hero img{ width: 100%; }
    /*    1.2.1 News
    ==================================*/
    /*
    .news dl {
        width: 100%;
        display: block;
        margin: 0 0 20px 20px;
    }
    .news dl dt,
    .news dl dd {
        width: 100%;
        padding: 0 20px 0 0;
    }
    .news dl dt { padding: 0 0 5px 0; }
    */
    .hi-left dl dt { width: 90px; }
    .hi-left dl dd {
        width: calc(100% - 90px);
        padding: 0 0 0 1rem;
    }
    /*=================================

          2.2 Home

    ==================================*/
    .homeInner {
        display: block;
        margin: 0;
        padding: 0;
    }
    .hi-left {
        flex: none;
        margin-right: 0;
        padding: 3rem 0 0 0;
    }
    .hi-right {
        width: 100%;
        margin: 0 auto;
    }
    .hi-left dl {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0 0 0 2rem;
    }
    /*=================================

          2.4 About

    ==================================*/
    .pro { padding: 0; }
    .proInner { display: block; }
    .pro-m-name { font-weight: normal; }
    .pro-img {
      margin: 0 auto;
      padding-bottom: 1rem;
    }
    /*=================================

          2.4 Blog

    ==================================*/
    .post-wrap {
        padding-bottom: 0;
        display:block;
    }
    .post { margin-bottom: 4rem; }
    .post-h { margin-bottom: 2.5rem; }
    .post-h ul { margin-left: 0; }
    .post-main { margin-right: 0; }
    .post-txt { margin: 0 0 3rem 0; }
    .post-f { margin: 0;}
    .post-side { width: 100%; margin-top: 5rem; }
    .blog_search_container { width: calc(100% - 15px);}

    .pager .page-numbers li {  margin-bottom: 5px; }
/*  .pager .page-numbers li { display: none; }
    .pager .page-numbers li a.prev,
    .pager .page-numbers li a.next {
        display:block;
        width: 45%;
        height: 50px;
        text-align: center;
    }
    .pager a.prev,
    .pager a.next {
        width: 100%;
        text-align: center;
    }
    .pager a.prev::after{ content: " prev"; }
    .pager a.next::before{ content: "next "; }*/
    .blog_search_container{ height: 4rem; }
    .blog_search_container input[type="text"]{ height: 3.2rem; }
    .blog_search_container button[type="submit"] { top: 0.8rem; }
    /*=================================

          2.5 Gallery

    ==================================*/
    .g-h { line-height: 1.6; }
    .g-h span {
      display: block;
      margin-bottom: 5px;
      margin-left: 0;
    }
    .g-wrap ul { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }

    /*=================================

          2.5 Contact

    ==================================*/
    .form-top { max-width: 90%; }
    .Form { margin-top: 40px; max-width: 90%; }
    .Form-Item {
      padding: 16px 14px;
      flex-wrap: wrap;
    }
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
    .Form-Item-Label.isMsg { margin-top: 0; }
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
    .Form-Item-Input {
      margin-left: 0;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
    /*=====================================

          6.404NotFound

    ======================================*/
    .nf-wrap {
      padding: 5rem 0;
    }
}



/*=====================================

      2.スマホ縦サイズ

======================================*/

@media (max-width: 480px) {
    /*=================================

          2.1 共通部分

    ==================================*/
    .pc-nav { display: none; }
    /*    2.1.1 Header
    ==================================*/
    header.header {
        /*position: relative;*/
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 100;
        align-items: center;
        width: 100%;
        margin:0 auto;
        padding: 2rem 2rem 0 2rem;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204%204%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D.cls-2%7Bfill%3A%23d3e1f2%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20class%3D%22cls-1%22%20width%3D%224%22%20height%3D%224%22%2F%3E%3Crect%20class%3D%22cls-2%22%20width%3D%221%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 4px;
        background:rgba(255,255,255,0.9);
    }
    /* ▽ スマホナビボタン  */
    #hamburger {
        position: absolute;
        top: 30px;
        right: 3%;
        margin: 0 auto;
        font-weight: 500;
        font-family: 'Baloo Thambi 2','icomoon', cursive;
    }
    #hamburger span:before {
        margin-right: 1rem;
        color: #4A6096;
        font-size: 2.2rem;
        content: "\e90d";
    }
    /* ▽ スマホメニュー  */
    .sp-nav {
        display: block;
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, .8);
        transition: all .2s ease-in-out;
        transform: translateY(-100%);
        opacity: 0;
    }
    .sp-nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0;
    }
    .sp-nav li {
        margin: 0 auto;
        padding: 0;
    }
    .sp-nav li a,
    .sp-nav li span {
        display: block;
        padding: 1rem 0;
        color: #fff;
        font-size: 2.2rem;
    }
    nav.sp-nav ul li a {
        padding-right: 1rem;
        border-bottom-style: none;
        font-size: 2.2rem;
    }
    .sp-nav li a:before {
        position: absolute;
        top: 10px;
        left: 0;
    }
    .sp-nav li a:hover,
    .sp-nav li a:before,
    .sp-nav li a:hover:before {
        color: #fff;
        font-size: 2.2rem;
    }
    /* ▽ 閉じるアイコン  */
    .close {
        font-weight: 500;
        font-family: 'Baloo Thambi 2','icomoon', cursive;
        letter-spacing : 0.03rem;
    }
    .close span:before {
        margin-right: 0.5rem;
        font-size: 1.4rem;
        content: "\e90c";
    }
    .toggle {
        transform: translateY( 0 );
        opacity: 1;
    }
    /*    2.1.2 Contents
    ==================================*/
    .headerInner { margin: 0; }
    .headerInner nav ul li { padding-right: 2rem; }
    .headerInner nav ul li.close { padding-left: 0; }
    .headerInner nav ul li.icon-06 {
      margin-left: 0;
      padding:0 1.6rem 2.5rem 0;
      font-size: 2.2rem;
    }
    .headerInner nav ul li.icon-06 a:before { font-size: 3rem; }
    main {
      margin: 0 2rem;
      padding: 6%;
    }
    .c-main {
      margin: 3rem 1rem 0 1rem;
    }
    .footerInner {
      margin: 0;
      padding: 0 2rem 0 2rem;
    }
    /*=================================

          2.3 About

    ==================================*/
    .a-box dl {
        width: 100%;
        display: block;
        /*margin-bottom: 1rem;*/
    }
    .a-box dl dt,
    .a-box dl dd {
        width: 100%;
        font-size: 1.3rem;
    }
    .a-box dl.ab-d1,
    .a-box dl.ab-d2 {
      margin-left: 0;
    }
    /*=================================

          2.4 Blog

    ==================================*/
    .post-wrap { padding: 0; }

    /*=================================

          2.5 Gallery

    ==================================*/
    .iziModal-navigate-next { right: 56%!important; }
    .iziModal-navigate-prev { left: 56%!important; }
    /*=====================================

          6.404NotFound

    ======================================*/
    .search_container {
      width: 100%;
      min-width: auto;
  }
}