@charset "UTF-8";

input,textarea {
  appearance: none;
}

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

      1.タブレットサイズ

======================================*/
@media screen and (max-width: 1024px) {
    /*    1.1.1 sideNav
    ==================================*/
    .sideNav { display: none; }
    /*=================================

          1.2 Home

    ==================================*/
    /*    1.2.1 News
    ==================================*/
    .homeInner {
        display: block;
        margin: 0;
        padding: 1.5rem;
    }
    .hi-left h3 { margin-bottom:1.5rem }
    .hi-left {
        flex: none;
        margin-right: 0;
        padding: 3rem 0 0 0;
    }
    .hi-right {
        width: 100%;
        margin-top: 6rem;
    }
    /*=================================

          2.5 Gallery

    ==================================*/
    .wp-box dl dt { width: 160px; font-size: 1.3rem; }
    .wp-box dl dd { width: calc(100% - 160px); padding: 2rem; }
    .wp-box dl dd p.wpb-dd-left { width: 100% ;float: none; padding: 0 1rem; text-align: left; }
    .wp-box dl dd p.wpb-dd-left::after { padding: 0; content:''; }
    .wp-box dl dd p.wpb-dd-right { width: 100%; float: none; font-size: 1.2rem; padding: 0 1rem; }
}




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

      1.スマホ横サイズ

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

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

          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;
        /*margin-bottom: 20px;*/
        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: 2%;
        margin: 0 auto;
        font-weight: 500;
        font-family: 'Baloo Thambi 2','icomoon', cursive;
    }
    #hamburger span:before {
        margin-right: 1rem;
        color: #79cbf1;
        font-size: 2.2rem;
        content: "\e90d";
    }
    /* ▽ スマホメニュー  */
    .sp-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        transform: translateY(-100%);
        opacity: 0;
        transition: all 0.2s ease-in-out;
        z-index: 1000; /* 上に表示 */
    }
    .sp-nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0;
    }
    .sp-nav ul li {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    .sp-nav ul li a {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        width: 100%;
        color: #fff!important;
        font-size: 2.2rem;
        font-weight: 500;
        font-family: 'Baloo Thambi 2','icomoon', cursive;
        letter-spacing : 0.03em;
    }
    .sp-nav ul li a::before {
        font-family: 'icomoon';
        color: #fff;
        font-size: 2rem;
        display: inline-block;
    }
    /* 各アイコン */
    .sp-nav ul li.icon-20 a::before { content: "\e906"; }/*home*/
    .sp-nav ul li.icon-21 a::before { content: "\e901"; }/*about*/
    .sp-nav ul li.icon-22 a::before { content: "\e90a"; }/*blog*/
    .sp-nav ul li.icon-23 a::before { content: "\e91e"; }/*memo*/
    .sp-nav ul li.icon-24 a::before { content: "\e922"; }/*gallery*/
    .sp-nav ul li.icon-25 a::before { content: "\e904"; }/*contact*/

    /* ▽ 閉じるアイコン  */
    .sp-nav .close {
        position: fixed;
        top: 3.5rem;
        right: 3rem;
        font-weight: 500;
        font-family: 'Baloo Thambi 2','icomoon', cursive;
        letter-spacing: 0.03rem;
        cursor: pointer;
        z-index: 1100;
    }
    .sp-nav .close span:before {
        content: "\e90c";
        font-size: 1.8rem;
        margin:0;
        color: #fff;
    }
    .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;
      padding: 5%;
      border: none;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      border-radius: 0;
    }
    .c-main {
      margin: 0 1.5rem;
    }
    .pan { margin-bottom: 0; }
    .a-box { margin-bottom:3rem; }
    h2.c-Ttl { margin:.6rem 0 4rem 0; }
    /*=================================

          1.2 Home

    ==================================*/
    h2.hero { margin: 2rem 0; }
    h2.hero img{ width: 100%; }
    
    /*=================================

          2.4 About

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

          2.4 Blog

    ==================================*/
    .post-wrap {
        display:block;
        margin: 0;
        padding:.6rem 0;
    }
    .post { margin-bottom: 3rem; }
    .post-h { margin-bottom: 2.5rem; }
    .post-h ul { margin-left: 0; }
    .post-main { margin-right: 0; }
    .post-txt { margin: 0; padding: 0 1.5rem 1rem 1.5rem; }
    .post-side { width: 100%; margin-top: 3rem; }
    .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; }
    .p-b-b { padding: 0 1rem; }
    .post-f { margin: 0 1rem; }
    /*=================================

          2.5 Gallery

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

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

          2.5 Contact

    ==================================*/
    .form-top { max-width: 100%; }
    .Form { margin-top: 20px; max-width: 100%; }
    .Form-Item {
      padding: 16px 0;
      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;
    }  
    /*=====================================

          7.Memo

    ======================================*/
    .popup-content {
        min-width: 280px;
    }
    /*=====================================

          8.Footer

    ======================================*/
    .footerInner {
      margin: 0;
      padding: 0 2rem 0 2rem;
    }

}



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

      2.スマホ縦サイズ

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

@media (max-width: 480px) {
    body { font-size: 1rem; }
    .homeInner {
        padding: 0;
    }
    /*=================================

          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

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

          2.4 Memo

    ==================================*/
    .memo-hero { margin-bottom: calc(clamp(var(--icon-min), var(--icon-width), var(--icon-max)) * 0.4 + 20px); }

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

          2.5 Gallery

    ==================================*/
    .iziModal-navigate-next { right: 56%!important; }
    .iziModal-navigate-prev { left: 56%!important; }
    /*WebDesign*/
    .wd-img { padding: 2rem 0 1rem 0; }
    .wp-box { padding: 0 0 1rem 0; }
    .wp-box h5 { margin: 0 0 1rem 0; }
    .wp-box dl,
    .wp-txt { width: 100%; font-size: 1.3rem; }
    .wp-box dl dt { padding: 1rem; width: 90px; }
    .wp-box dl dd { padding: 1rem; width: calc(100% - 90px); }
    .wp-box dl dd p.wpb-dd-left { width: 100% ;float: none; }
    .wp-box dl dd p.wpb-dd-right { width: 100%; float: none; font-size: 1.2rem; }

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

          6.404NotFound

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

          7.Memo

    ======================================*/
    .popup-content {
        min-width: 250px;
    }

    .footer-pc { display: none; }
    .footer-sp {
        display: flex;
        line-height: 1.6;
        align-items: flex-start;
    }
}