@charset "utf-8";

img {
    max-width: 100%;
}

.contents-wrap {
    padding: 15px;
}

/***********************************

トップコンテンツ

************************************/
@media screen and (min-width: 641px) {
    .resize_bnn {
        display: none;
    }
}


@media screen and (max-width: 640px) {
    .resize_bnn {
        margin: 0 15px;
    }

    .resize_bnn img {
        width: 100%;
    }
}

/***********************************

フォント

************************************/
@font-face {
    font-family: 'kutu';
    src:
        url('fonts/kutu.ttf?l4djw9') format('truetype'),
        url('fonts/kutu.woff?l4djw9') format('woff'),
        url('fonts/kutu.svg?l4djw9#kutu') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-kutu"],
[class*=" icon-kutu"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'kutu' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-kutukutu:before {
    content: "\e900";
}



/***********************************

全体カラー

************************************/
/*----------------------------------
ヘッダロゴ背景
----------------------------------*/
#header_wrap {
    background: #F9F9EC;
}

@media screen and (max-width: 640px) {
    body {
        /*　指定箇所が無いのでbodyに挿入　*/
        background: #F9F9EC;
    }

}


/*----------------------------------
ヘッダーロゴ　640×100の画像を使用した場合
----------------------------------*/
#logo img {
    /**　ＰＣロゴ調整　**/
    margin: 25px 0 0 0;
    width: 50%;
}

@media screen and (max-width: 640px) {

    /**　スマホロゴ調整　**/
    #logo_sm {
        width: 60%;
        margin: 0 auto;
        padding: 20px 0 0 0;
    }
}


/*----------------------------------
フッダーロゴ
----------------------------------*/
#footer .footer_logo img {
    /** フッダーロゴ調整 1 **/
    width: 330px;
}

#footer .header_banner {
    /** フッダーロゴ調整 2 **/
    margin-top: 10px;
}


/*----------------------------------
サイト説明文部分
----------------------------------*/
#desc_wrap {
    background: #C5AE82;
    /*説明文背景*/
}

#site_description {
    color: #fff;
    /*説明文テキスト*/
}

@media screen and (max-width: 640px) {

    /*スマホ*/
    #header {
        background: #C5AE82;
        /*説明文背景*/
    }

    .title_text {
        color: #fff;
        /*説明文テキスト*/
    }
}


/*----------------------------------
グローバルメニュー
----------------------------------*/
#menu_wrap {
    background: #fff;
    /*全体背景色*/
    border-color: #ccc;
    /*区切り線*/
}

#global_menu {
    border-right: 1px solid #ccc;
    /*区切り線右*/
}

#global_menu li a {
    border-left: 1px solid #ccc;
    /*区切り線左*/
    background: #fff;
    /*ボタン背景色*/
    color: #333;
    /*文字色*/
}

#global_menu li a:hover {
    background: #EAE3CA;
    /*ボタンロールオーバー色*/
    color: #333;
    /*ボタンロールオーバー文字色*/
}



@media screen and (min-width: 641px) {
    #global_menu {
        height: 48px;
        /*ロールオーバー隙間調整*/
    }

    #global_menu li a {
        height: 48px;
        /*ロールオーバー隙間調整*/
        line-height: 48px;
        /*同上*/
    }
}



@media screen and (max-width: 640px) {
    /**** 折りたたみメニュー ****/

    /**** メニューボタン ****/
    #header a.menu_button {
        color: #fff;
        border: 1px solid #fff;
        background: #A9894E;
    }

    #header a.menu_button:hover,
    #header a.menu_button:active {
        background: #A9894E;
    }


    /**** グローバルメニュー ****/

    #global_menu li a {
        border-color: #999;
        background: #fff url(./img/arrow4.png) no-repeat 20px;
        color: #333;
    }

    #global_menu li a:hover {
        color: #333;
        background: #fff url(./img/arrow4.png) no-repeat 20px;
    }

}


/*----------------------------------
電話番号・お問い合わせ
----------------------------------*/
@media screen and (min-width: 641px) {
    #header .header_banner {
        /*margin-top: 0; 住所が3行の場合　*/
    }

}



/*----------------------------------
イメージロールオーバー
----------------------------------*/
/** index　メインビジュアル1枚でロールオーバー（リンク）なし**/
#recommend_gallery a:hover img,
.rs-slider > li > a:hover img {
    opacity: 1.0;
    cursor: default;
}



/*----------------------------------
ピックアップ
----------------------------------*/
#index_pickup .headline1 {
    /*ピックアップヘッダ*/
    color: #ccc;
    background: #222;
}



/*----------------------------------
ページタイトルヘッダー　※下層も含む
----------------------------------*/
#main_col .headline1,
.headline2,
.headline3 {
    background: #fff;
    color: #2b2b2b;
}

#main_col .headline1,
.headline2 {
    border-left: 7px solid #887837;
    border-bottom: 2px solid #C4B16A;
}

.headline3 {
    border-left: 7px solid #887837;
    border-bottom: 2px solid #C4B16A;
    border-top: none;
}


@media screen and (max-width: 640px) {

    #main_col .headline1,
    .headline2,
    .headline3 {
        /*トップ・他　調整*/
        border-left: none;
        /*左線の削除*/
    }

    #main_col .headline1,
    .headline2,
    .headline3 {
        border-left: none;
        /*左線の削除*/
    }


}


/*----------------------------------
サイドナビ
----------------------------------*/

/*　余白なしのカテゴリメニュー　*/
#side_col .barb_side_widget:nth-child(6),
#side_col .barb_side_widget:nth-child(7),
#side_col .barb_side_widget:nth-child(8),
#side_col .barb_side_widget:nth-child(9) {
    margin-bottom: 0;
}


@media screen and (max-width: 640px) {
    #side_col {
        /*　スマホでサイドナビを表示しない場合　*/
        display: none;
    }
}

/*----------------------------------
フッダー
----------------------------------*/
#footer_wrap {
    background: #F9F9EC;
    /*フッダー背景色*/
}

#footer {
    color: #333;
    /*フッダーテキストカラー*/
}

/*.footer_headline {
    background: #0985E5;
    color: #333;}*/

#footer li a,
#footer li a:visited {
    color: #333;
    border-bottom: 1px dotted #666;
}

#footer li a:hover {
    color: #999;
}

#copyright {
    background: #C5AE82;
    /*コピーライト背景*/
    color: #534326;
    /*コピーライトテキスト*/
}

#copyright a {
    color: #534326;
    /*コピーライトリンクテキスト*/
}



/*----------------------------------
テキストリンクカラー
----------------------------------*/
a,
a:visited {
    color: #3F7985;
}

a:hover {
    color: #24434A;
}

/*----------------------------------
ページナビ
----------------------------------*/
.page_navi a {
    /*** テキスト、ボタン色 **/
    color: #fff;
    background: #333;
}

.page_navi a:hover {
    /*** ロールオーバーボタン色 **/
    background: #990000;
}






/***********************************

下層レイアウト

************************************/
/*----------------------------------
下層段落枠　※変更不可
----------------------------------*/
@media only screen and (min-width:641px) {
    #under {
        overflow: hidden;
        margin: 0 0 -40px 0;
    }

    /*下層の空調整*/
}


@media only screen and (max-width:640px) {
    #under {
        overflow: hidden;
        margin: 10px 0 0 0;
    }

    /*下層の空調整*/
}

.under_contents {
    width: 100%;
    margin: 0 0 50px 0;
    clear: both;
    overflow: hidden;
    line-height: 1.7;
}


/* 投稿　関連情報有　under_contents調整 */
@media only screen and (max-width:640px) {
    #related_post {
        margin: -40px 0 0 0;
    }
}


p {
    /*下層　汎用*/
    margin: 0;
    padding: 0;
    line-height: 1.7;
}


/*----------------------------------
テーブル設定　※変更不可　色とthの％は変更又は上書き可
----------------------------------*/
/*** table 元スタイル打消し ****/
.post table {
    border: none;
    margin: 0;
}

.post td,
.post th {
    border: none;
    padding: 0;
}

.post th {
    background: #eee;
    font-weight:
        /*normal*/
        bold;
}

@media only screen and (max-width:480px) {
    tbody tr {
        display: table-row;
        /******/
        margin-bottom: 0;
    }

    tbody th,
    tbody td {
        display: table-cell;
        list-style-type: none;
        border: none;
    }
}


/*******  テーブル再設定　*******/
.under_contents table {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 0;
    border-top: 1px solid #c1c1c1;
    border-left: 1px solid #c1c1c1;
}

.under_contents table td,
.under_contents table th {
    border-right: 1px solid #c1c1c1;
    border-bottom: 1px solid #c1c1c1;
    padding: 10px;
    /*white-space: nowrap;*/
}

.under_contents table th {
    width: 30%;
}

.under_contents table td span {
    padding: 0 0 0 0;
}

@media only screen and (max-width:480px) {
    .under_contents table {
        font-size: 12px;
        line-height: 1.7;
    }

}

/*----------------------------------
テーブル設定　レスポンシブ基本ソース
----------------------------------*/
/**** 
レスポンシブしたいtableの外側に
<div class="ph_responsive">を入れてください
****/

@media only screen and (max-width:640px) {
    .ph_responsive {
        margin: 0 0 -20px 0;
    }

    .ph_responsive table {
        border: none;
    }

    .ph_responsive table th,
    .ph_responsive table td {
        width: 100%;
        display: inline-block;
        border-right: none;
        text-align: left;
    }

    .ph_responsive table th {
        border-bottom: 2px dotted #333;
        padding: 5px 0;
        font-weight: bold;
        background: #fff;
    }

    .ph_responsive table th:before {
        /*** アイコンが必要な場合　***/
        content: "\f00c";
        font-family: FontAwesome;
        color: #333;
        padding: 0 5px 0 0;
    }

    .ph_responsive table td {
        border-bottom: none;
        padding: 10px 0 20px 0;
    }


}



/***********************************

ページレイアウト

************************************/

/*----------------------------------
固定ページ 下層hタイトル　必要に応じてh4の追加など
----------------------------------*/
/*h3装飾*/
.under_contents h3 {
    color: #555;
    margin: 0 0 10px 0;
    padding: 0 0 3px 0;
    font-size: 16px;
    padding-left: 2.2rem;
    text-indent: -2.0rem;
    line-height: 1.4;
}

.under_contents h3:after {
    content: "";
    display: block;
    height: 3px;
    width: 120%;
    background-size: 2px 3px, 100% 2px;
    background-image:
        linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%),
        linear-gradient(90deg, #336600, #BFB600, #336600);
    margin: 3px 0 0 -40px;
}

.under_contents h3:before {
    content: "\e900";
    font-family: 'kutu';
    color: #336600;
    padding: 0 5px 0 0px;
}


/*h4装飾*/
.under_contents h4 {
    font-size: 15px;
    color: #887837;
    border-left: 5px solid #887837;
    padding: 6px 6px 6px 10px;
    margin: 0 0 8px 0;
}


/*ul 打ち消し*/
.under_contents ul {
    margin: 0;
}

.post .under_contents li {
    line-height: 1.7;
    background: url(./img/bullet1.gif) no-repeat left 9px;
}


@media only screen and (max-width:480px) {

    /* SPで点がずれて見えるため調整*/
    .post .under_contents table td li {
        background: url(./img/bullet1.gif) no-repeat left 8px;
    }

}


.post .under_contents li.space {
    margin: 10px 0 0 0;
}

/* ul 点なし　*/
.post .under_contents li.none {
    background: none;
    padding-right: 0;
    padding-left: 1em;
    text-indent: -1em;
}


/*汎用スペース*/
.space_top5 {
    padding-top: 5px;
}

.space_top10 {
    padding-top: 10px;
}

.space_top20 {
    padding-top: 20px;
}

.space_top30 {
    padding-top: 30px;
}


.space_bottom5 {
    padding-bottom: 5px;
}

.space_bottom10 {
    padding-bottom: 10px;
}

.space_bottom15 {
    padding-bottom: 15px;
}

.space_bottom20 {
    padding-bottom: 20px;
}

.space_bottom30 {
    padding-bottom: 30px;
}


.midashi_txt {
    /* 各ページリード文言 */
    color: #6D5F1B;
    font-weight: bold;
}



/*　PC改行なし　*/
@media only screen and (min-width:641px) {
    br.pc_none {
        display: none;
    }
}


/*　スマホ改行なし　*/
@media only screen and (max-width:640px) {
    br.ph_none {
        display: none;
    }
}


/*----------------------------------
ボタン
----------------------------------*/
.button {
    width: 50%;
    font-size: 14px;
    letter-spacing: .15rem;
    display: block;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    font-weight: 600;
    line-height: 41px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
}


.button.button-primary.color {
    color: #394B21;
    background: #A9C781;
}

.button.button-primary.color:hover {
    color: #394B21;
    background: #91B85C;
}



@media only screen and (max-width:640px) {
    .button {
        width: 85%;
    }

}








/*----------------------------------
こだわりの品質と機能／婦人靴メーカとしての実績
----------------------------------*/

/*Ｂ画像1列＋テキスト*/

/*Ｃ画像2列＋テキスト*/

/*Ｆ左画像＋右テキスト回り込み*/


.under_contents .maruni_list {
    background: #F7F1E6;
    padding: 10px 20px 10px 20px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.under_contents .maruni_list ul li {
    padding: 0;
    line-height: 1.5;
    margin: 10px 0;
    list-style-type: none;
    background: none;
    list-style-position: inside;
    padding-left: 1.0rem;
    text-indent: -1.2rem;
    text-align: justify;
}


.under_contents .maruni_list ul li::before {
    content: "\f00c";
    font-family: FontAwesome;
    color: #CCBA7D;
    padding: 0 5px 0 0;
}




/*----------------------------------
こだわりの品質と機能／既製品でも万人のお客様の足にフィット
----------------------------------*/
/*Ｆ左画像＋右テキスト回り込み*/

/*Ｄ左画像＋右テキスト*/




/*----------------------------------
こだわりの品質と機能／なぜ、良質の靴が安価に製造できるのか？
----------------------------------*/

/*Ａテキスト　Ｂ画像1列＋テキスト*/

/*Ｃ画像2列＋テキスト※なし*/



/*----------------------------------
こだわりの品質と機能／なぜ、良質の靴が安価に製造できるのか？
----------------------------------*/

/*Ｄ左画像＋右テキスト*/






/*----------------------------------
サイトマップ
----------------------------------*/
ul.sitemap li {
    margin: 0 0 10px 0;
}

ul.sitemap ol {
    margin: 0 0 10px 5px;
    padding: 0;
}

ul.sitemap ol li {
    margin: 0 0 5px 0;
    list-style-type: none;
}






/*----------------------------------
デモ汎用css
----------------------------------*/

/*Ａテキスト　Ｂ画像1列＋テキスト*/

/*Ｃ画像2列＋テキスト*/
.column_wrap_01 .left,
.column_wrap_01 .right {
    width: 49%;
}

.column_wrap_01 .left {
    float: left;
}

.column_wrap_01 .right {
    float: right;
}


@media only screen and (max-width:640px) {

    .column_wrap_01 .left,
    .column_wrap_01 .right {
        width: 100%;
        float: none;
    }

}


/*Ｄ左画像＋右テキスト*/
.column_wrap_02 {
    clear: both;
    overflow: hidden;
}

.column_wrap_02 .leftimg {
    float: left;
    width: 49%;
    padding: 0;
}

.column_wrap_02 .righttxt {
    float: right;
    width: 48%;
}

@media only screen and (min-width:641px) {
    #content .post .column_wrap_02 .leftimg img {
        padding-bottom: 0;
    }
}

@media only screen and (max-width:640px) {

    .column_wrap_02 .leftimg,
    .column_wrap_02 .righttxt {
        float: none;
        width: 100%;
    }

}


/*Ｅ左テキスト＋右画像*/
.column_wrap_03 {
    clear: both;
    overflow: hidden;
}

.column_wrap_03 .lefttxt {
    float: left;
    width: 48%;
}

.column_wrap_03 .rightimg {
    float: right;
    width: 49%;
    padding: 0;
}

@media only screen and (min-width:641px) {
    #content .post .column_wrap_03 .rightimg img {
        padding-bottom: 0;
    }
}

@media only screen and (max-width:640px) {

    .column_wrap_03 .lefttxt,
    .column_wrap_03 .rightimg {
        float: none;
        width: 100%;
    }

}


/*Ｆ左画像＋右テキスト回り込み*/
@media only screen and (min-width:641px) {
    #content .post .around_right img {
        float: left;
        margin: 0 18px 0 0;
        padding: 0;
        width: 49%;
    }
}

@media only screen and (max-width:640px) {
    .around_right img {
        margin: 0 0 0 0;
        float: none;
        width: 100%;
    }


}



/*Ｇ左テキスト回り込み＋右画像*/
@media only screen and (min-width:641px) {
    #content .post .around_left img {
        float: right;
        margin: 0 0 0 18px;
        padding: 0;
        width: 49%;
    }
}

@media only screen and (max-width:640px) {
    .around_left img {
        margin: 0 0 0 0;
        float: none;
        width: 100%;
    }

}


/*Ｈ画像3列＋下段テキスト*/
.column_wrap_04 {
    clear: both;
}

.column_wrap_04 .columns div {
    background: #ccc;
    overflow: hidden;
}

.column_wrap_04 .columns div span {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #000;
    padding: 10px 5px;
    line-height: 1.3;
}

.column_wrap_04 .columns img {
    width: 100%;
    height: auto;
}

.column_wrap_04 .columns p {
    text-align: justify;
}


@media only screen and (min-width:641px) {
    .column_wrap_04 .three.columns {
        width: 30.6666666667%;
    }

    .column_wrap_04 .columns {
        width: 100%;
        float: left;
        box-sizing: border-box;
        margin-left: 4%;
    }

    .column_wrap_04 .columns:first-child {
        margin-left: 0;
    }

    .column_wrap_04 .columns p.space {
        margin: -5px 0 0 0;
    }

}


@media only screen and (max-width:640px) {
    .column_wrap_04 {
        margin: 0 0 -40px 0;
    }

    .column_wrap_04 .three.columns {
        margin: 0 0 40px 0;
    }

    .column_wrap_04 .columns p {
        margin: 0;
    }

}

/*トップページ商品リスト*/
#recent_post.items img {
    border: 2px solid #D7CCC8;
    border-radius: 8px;
    box-sizing: border-box;
}

/*スタッフブログ用*/
#staffblog p {
    line-height: 2.5;
    margin: 20px 0 30px 0;
}

#staffblog .txt_s_end {
    margin: 20px 0 90px 0;
}

#staffblog .t_end {
    margin: 20px 0 70px 0;
}

#staffblog .txt_s {
    margin: 20px 0;
}

#staffblog .t_s {
    margin-bottom: 0px;
    line-height: 1.0;
    font-size: 1.17em;
    font-weight: bold;
}

#staffblog .t_shoes {
    margin: 3px 0 0 8px;
    font-size: 1.17em;
    font-weight: bold;
}

#staffblog .btn-flat {
    line-height: 1.0;
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.25em 0.5em;
    transition: .4s;
    margin: 0px 0 0px 0;
}

#staffblog .btn-flat:hover {
    color: #887837;
}

/*画像なし一覧*/
#post_list li {
    background: none;
}

.post.noimage {
    padding-top: 0;
}

.noimage #post_list .info {
    width: 100%;
}

/*2021/10/20追加 トップページLINEスマホバナー*/
/* PC */
@media only screen and (min-width: 641px) {
    div.text_row > div:nth-of-type(2) {
        display: none;
    }
}

/* SP */
@media only screen and (max-width: 640px) {
    div.text_header_banner {
        margin: 11px auto 10px;
    }

    div.text_header_banner > div:nth-last-of-type(2) {
        display: block;
    }

    div.text_header_banner > div:nth-last-of-type(2) a img {
        width: 100%;
        height: auto;
    }
}