@charset "utf-8";

/* @responcive
-------------------------------- */

.forPC {
    display: block;
}

.forSP {
    display: none;
}

#BtnMenu {
    display: none;
}

@media screen and (max-width: 640px) {
    .forPC {
        display: none;
    }
    .forSP {
        display: block;
    }
    img {
        max-width: 100%;
    }
    /* common
-------------------- */
    body>div#Wrapper {
        font-size: 12px;
        color: #333;
    }
    .body-wrap {
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }
    /* Header
-------------------- */
    #Header {
        position: static;
        box-shadow: none;
        padding: 0;
        z-index: 100;
    }
    #Header h1,
    #Logo {
        display: block;
        width: 50%;
        margin: 0 auto;
        padding: 10px 0;
        text-align: center;
    }
    #Logo-Text {
        display: block;
    }
    #Header h1 img {
        vertical-align: top;
    }
    #BtnMenu {
        display: block;
        width: 24px;
        position: absolute;
        top: 15px;
        right: 10px;
    }
    #GrobalNavi {
        float: none;
        margin: 0 -10px 1px;
        padding: 0;
    }
    #GrobalNavi ul {
        display: none;
    }
    #GrobalNavi li {
        float: none;
        height: auto;
        background: #666666;
    }
    #GrobalNavi li a {
        width: auto;
        margin: 0;
        padding: 10px 10px 10px 40px;
        border-bottom: 1px solid #808080;
        background: url(../img/sp/icn_arrow.png) 20px 14px no-repeat;
        background-size: 7px 14px;
        text-align: left;
        color: #fff;
        font-size: 12px;
    }
    #GrobalNavi ul.dropdown-list {
        position: static;
        display: block;
        width: auto;
        padding: 0;
    }
    #GrobalNavi ul.dropdown-list li {
        margin-bottom: 0;
        background: #666666;
    }
    #GrobalNavi ul.dropdown-list a {
        margin: 0;
        padding: 10px 10px 10px 60px;
        background: url(../img/sp/icn_arrow.png) 40px 14px no-repeat;
        background-size: 7px 14px;
        text-align: left;
        font-size: 12px;
    }
    #GrobalNavi li a:hover {
        border-bottom: 1px solid #808080;
    }
    #GrobalNavi li.dropdown-item a:hover {
        border-bottom: 1px solid #808080;
        color: #fff;
    }
    /* TopLink
-------------------- */
    #TopLink {
        display: none;
    }
    #TopLink img:hover {
        opacity: 1;
    }
    /* Footer
-------------------- */
    /* MAP見出し */
    #Footer #Map h2 {
        margin-bottom: 20px;
        line-height: 1;
        text-align: center;
    }
    #Footer #Map h2 span.main-title1 {
        display: inline-block;
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
    }
    #Footer #Map h2 span.main-title1:before {
        display: block;
        width: 100px;
        content: '';
        margin: 0 auto;
        padding-top: 20px;
        border-top: 1px solid #999999;
    }
    #Footer #Map h2 span.sub-title {
        font-size: 12px;
        color: #999999;
    }
    #Footer #Contact {
        margin-bottom: 30px;
        background: #000;
    }
    #Footer #Contact .body-wrap {
        padding: 40px 0;
        text-align: center;
        font-size: 20px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 3px;
    }
    #Footer #Contact .title {
        margin-right: 20px;
        color: #999999;
    }
    #Footer #Contact .tel {
        color: #fff;
    }
    #FooterLogo {
        display: block;
        width: 50%;
        margin: 0 auto;
    }
    #FooterLink {
        float: none;
        display: none;
    }
    #FooterLink li {
        float: none;
        padding: 15px 20px;
        white-space: nowrap;
    }
    #FooterLink li a {
        padding: 0 10px 8px;
        color: #333;
        font-size: 13px;
        text-decoration: none;
    }
    #FooterLink li a:hover {
        border-bottom: 2px solid #d3e7b7;
    }
    #Copyright {
        clear: both;
        padding: 10px 0 20px;
        color: #999;
        font-size: 10px;
        text-align: center;
    }
    #Copyright a {
        color: #999;
        text-decoration: none;
    }
    #PowerdBy {}
    #PowerdBy a {
        display: inline-block;
        width: 49px;
    }
    /* TopPage
-------------------- */
    #SPMainImage {
        margin-bottom: 30px;
        border-bottom: 1px solid #d7d6d5;
    }
    /* Main */
    .contents #TopPage h2 {
        margin-bottom: 20px;
        text-align: center;
    }
    .contents #TopPage h2 span.main-title1 {
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
    }
    .contents #TopPage h2 span.main-title1:before {
        display: block;
        width: 100px;
        content: '';
        margin: 0 auto;
        padding-top: 20px;
        border-top: 1px solid #999999;
    }
    .contents #TopPage h2 span.main-title2 {
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
    }
    .contents #TopPage h2 span.sub-title {
        font-size: 12px;
        color: #999999;
    }
    /* Works */
    #TopPage #Works {
        margin-bottom: 40px;
    }
    #TopPage #Works h2 {
        margin-bottom: 70px;
        text-align: center;
    }
    #TopPage #Works ul {
        margin-bottom: 30px;
    }
    #TopPage #Works li {
        float: none;
        width: 280px;
        margin: 0 auto 20px;
    }
    #TopPage #Works li:last-child {
        margin-right: auto;
    }
    #TopPage #Works li .thumbnail {
        margin-bottom: 10px;
    }
    #TopPage #Works li h3 {
        margin-bottom: 10px;
        font-size: 14px;
    }
    #TopPage #Works li h3 a {
        font-weight: bold;
    }
    #TopPage #Works li p {
        color: #666666;
        line-height: 1.5;
    }
    #TopPage #Works .btn-more {
        text-align: center;
    }
    /* Feed News */
    #TopPage #Feed {
        margin-bottom: 30px;
    }
    #TopPage #News {
        float: none;
        width: auto;
        margin-top: 0;
        margin-bottom: 40px;
    }
    #TopPage #News ul {
        margin-bottom: 20px;
    }
    #TopPage #News li {
        margin-bottom: 12px;
    }
    #TopPage #News li:after {
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
    #TopPage #News li span.date {
        float: left;
        display: block;
        width: 60px;
        padding: 3px 10px 3px 0;
        border-right: 1px solid #CCCCCC;
        color: #666666;
        font-size: 10px;
    }
    #TopPage #News li span.title {
        display: block;
        margin-left: 80px;
        margin-bottom: 10px;
        padding: 2px 0;
        padding-left: 5px;
        border-left: 0;
        font-size: 12px;
    }
    #TopPage #News .btn-more {
        text-align: center;
    }
    /* Feed Blog */
    #TopPage #Blog {
        float: none;
        position: relative;
        width: auto;
        padding: 20px 10px 10px;
        border: 4px solid #CCCCCC;
    }
    #TopPage #Blog li {
        float: none;
        width: auto;
        margin-bottom: 30px;
    }
    #TopPage #Blog li:nth-child(odd) {
        margin-right: 0;
    }
    #TopPage #Blog li:after {
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
    #TopPage #Blog li .thumbnail {
        float: left;
        width: 60px;
        margin-right: 10px;
    }
    #TopPage #Blog li h3 {
        margin-bottom: 4px;
        line-height: 1;
    }
    #TopPage #Blog li h3 a {
        font-size: 12px;
        font-weight: bold;
    }
    #TopPage #Blog li .date {
        margin-bottom: 4px;
        font-size: 10px;
        color: #666666;
    }
    #TopPage #Blog li p {
        font-size: 12px;
        line-height: 1.2;
    }
    #TopPage #Blog .btn-more {
        position: static;
        text-align: center;
    }
    /* About */
    #TopPage #About {
        margin-bottom: 50px;
        padding: 30px 20px;
    }
    #TopPage #About h2 {
        text-align: center;
    }
    #TopPage #About li {
        position: relative;
        float: none;
        width: auto;
        margin-right: 0;
        margin-bottom: 20px;
    }
    #TopPage #About li:last-child {
        margin-right: 0;
    }
    #TopPage #About li:after {
        clear: both;
        content: '';
        display: block;
        height: 0;
    }
    #TopPage #About li .thumbnail {
        text-align: center;
    }
    #TopPage #About li .thumbnail img {
        box-sizing: border-box;
        border-radius: 200px;
        border: 10px solid #fff;
    }
    #TopPage #About li h3 {
        position: relative;
        top: -30px;
        right: -50%;
        width: 190px;
        margin-left: -60px;
        padding: 10px;
        background: #000;
        color: #fff;
        font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
        text-align: center;
        font-size: 16px;
        -webkit-font-smoothing: subpixel-antialiased;
    }
    #TopPage #About li p {
        color: #666666;
        font-size: 14px;
        line-height: 1.6;
    }
    /* Breadcrumbs
-------------------- */
    #Breadcrumbs {
        width: auto;
        margin: 10px 10px 30px;
        color: #333;
    }
    #Breadcrumbs a {
        color: #333;
    }
    /* トップタイトル
-------------------- */
    #PageTitle {
        margin-top: 0;
        height: 80px;
        background: url(../img/sp/bg_sub_title.png) no-repeat;
        background-size: cover;
        text-align: center;
    }
    #PageTitle h1 {
        padding-top: 20px;
        font-size: 20px;
        font-weight: normal;
    }
    /* レイアウト
-------------------- */
    .contents {
        margin-bottom: 50px;
    }
    #Main {}
    #Side {
        margin-top: 100px;
    }
    #Side #Banner {
        margin: 30px 0 60px;
        text-align: center;
    }
    #Side #Banner .banner {
        display: inline-block;
    }
    /* 右サイド */
    #MainLeft {
        float: none;
        width: auto;
    }
    #SideLeft {
        float: none;
        width: auto;
    }
    /* 左サイド */
    #MainRight {
        float: none;
        width: auto;
    }
    #SideRight {
        float: none;
        width: auto;
    }
    #SideLeft #Banner,
    #SideRight #Banner {
        text-align: center;
    }
    #SideLeft #Banner .banner,
    #SideRight #Banner .banner {
        margin: 20px 0;
    }
    /* 汎用スタイル
-------------------- */
    /* 見出し */
    .main h2 {
        margin-bottom: 20px;
        padding-bottom: 10px;
        background: url(../img/common/bg_headline.png) left bottom no-repeat;
        font-family: "Century Gothic", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
        font-size: 20px;
        line-height: 1.3;
    }
    .main h3 {
        margin: 30px 0 20px;
        padding-bottom: 10px;
        border-bottom: 1px dotted #999;
        font-size: 18px;
    }
    .main h3 a {
        text-decoration: none;
        color: #333;
    }
    .main h3 a:hover {
        text-decoration: underline;
        color: #888;
    }
    .main h4 {
        margin: 20px 0 10px;
        font-size: 15px;
        font-weight: bold;
    }
    /* 文章 */
    .main p {
        margin-bottom: 20px;
    }
    #Recipe img {
        border: 1px solid #ccc;
        box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);
    }
    /* ボタンデザイン
-------------------- */
    .btn {
        display: inline-block;
        margin: 10px 0;
        color: #fff !important;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
    }
    .btn:hover {
        color: #fff;
        opacity: 0.7;
        text-decoration: none;
    }
    .btn-small {
        width: 40%;
        padding: 10px 10px 10px 20px;
        background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
        font-size: 14px;
        letter-spacing: 2px;
    }
    .btn-midium {
        width: 60%;
        padding: 20px 10px 20px 20px;
        background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
        font-size: 20px;
        letter-spacing: 2px;
    }
    .btn-big {
        width: 100%;
        padding: 30px 10px 30px 20px;
        background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
        font-size: 24px;
        letter-spacing: 2px;
    }
    /* テーブルデザイン
-------------------- */
    .main table {
        box-sizing: border-box;
        margin-bottom: 30px;
    }
    .main tr {
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
    }
    .main th {
        padding: 20px;
        border: 0;
        background: url(../img/common/bg_table_th.png) right center no-repeat;
        vertical-align: middle;
    }
    .main td {
        padding: 20px;
        border: 0;
    }
    .main th,
    .main td {
        display: list-item;
        width: auto;
        border: none;
        background: none;
    }
    .main th {
        border-bottom: 1px dashed #ccc;
        padding: 10px 10px 5px;
    }
    .main td {
        padding: 10px;
    }
    .table-style th {
        border-bottom: none;
    }
    .horizon th,
    .horizon td {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .table-style th,
    .horizon th {
        background: #f6f6f6;
    }
    .horizon {
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
    }
    .horizon thead {
        float: left;
        display: block;
    }
    .horizon tbody {
        display: -webkit-box;
        overflow-x: auto;
    }
    .horizon tr {
        display: block;
        border: none;
    }
    .horizon th,
    .horizon td {
        display: block;
        width: auto;
        padding: 10px;
        border: none;
    }
    .horizon th:first-child,
    .horizon td:first-child {
        border-left: none;
    }
    .horizon th:last-child,
    .horizon td:last-child {
        border-right: none;
    }
    /* ContactForm
-------------------- */
    .form-s {
        width: 35%;
    }
    .form-m {
        width: 60%;
    }
    .form-l {
        width: 95%;
    }
    .contact-form table {
        box-sizing: border-box;
    }
    .contact-form th,
    .contact-form td {
        display: list-item;
        width: auto;
        border: none;
        background: none;
    }
    .contact-form th {
        padding: 5px 10px;
        background-color: #f8f8f8;
    }
    .contact-form td {
        padding: 10px;
    }
    .contact-form td textarea {
        width: 100%;
    }
    .submit input {
        margin-bottom: 5px;
    }
    /* 実績
-------------------- */
    .works-index .eye-catch,
    .works-archives .eye-catch {
        float: left;
        margin-right: 20px;
    }
    .works .post {
        position: relative;
    }
    .works .category {
        position: static;
        display: block;
        margin-bottom: 10px;
    }
    .works .category a {
        display: inline-block;
        padding: 2px 15px;
        border: 1px solid #000;
        text-decoration: none;
        color: #000;
    }
    .works .tag {
        margin: -10px 0 20px;
    }
    .works-archives h3 {
        margin-top: 0;
    }
    .works-single .eye-catch {
        width: 280px;
    }
}