@charset "utf-8";

html{
    font-size:100%; /*ユーザー設定の文字サイズを正しく反映*/
    margin:0;
    padding:0;
}

body {
    font-family:"Hiragino Kaku Gothic ProN",
    "Hiragino Sans", sans-serif;
    margin:0;
    padding:0;
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/body_bg.jpg) repeat-y;
    background-size: contain;
}

.p-product{
    margin-bottom: 0;
}

*{
    box-sizing:border-box; /*余白や線を幅や高さに含める*/
}
img{
    max-width:100%; /*画像が親要素からはみ出すのを防ぐ*/
    height:auto;
}

.pc{display: inline-block;}

.sp{display: none;}

.xs {display: none;}

a{text-decoration: none;}

a:hover{text-decoration: none;opacity: 0.8;}

.fa-icon {
  vertical-align: -0.125em; /* または他のem値で微調整 */
}

.flexbox{display: flex;}

.row_reverse{flex-direction: row-reverse;}

.bold{font-weight: bold;}

.tx_rl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.h2{
    text-align: center;
    margin: -50px auto 50px;
}

.h2_title{
    position: relative;
    display: inline-block;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: #FFF;
    margin: 0 auto;
    padding: 10px 30px;
    z-index: 1;
}

.h2_title::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #333;
    transform: skewX(-15deg);
    box-shadow: #e4ff00 8px 8px 0;
}

p{
    text-align: justify;
}

main section{
    font-family: "Sawarabi Mincho", "Yu Mincho", "MS Mincho", serif;
}

.base_copy{
	font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: #333;
	line-height: 1.8;
    margin: 0;
    font-weight: bold;
}

.base_copy strong{
    font-weight: bold;
}


.red{
    color: #cf2030;
}

.center{
    text-align: center;
}

ul{
    list-style: none;
    padding-left: 0;
}

figure{
	text-align: center;
    margin: 0;
}

main.main_content {
    overflow: hidden;
}



/*=========
fadeDownTrigger
=========*/

.fadeUpTrigger{
    opacity: 0;
    }

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/*=========
ヘッダートップ
=========*/

.header_top{
    display: flex;
    background: #efefef;
    padding: 0 0 0 20px;
}

.logo{
    width: 280px;
    height: 60px;
    margin: 10px 50px 0 0;
}

.logo img{
    width: 100%;    
}

.header_tel{
    margin-top: 10px;
}

.header_tel a{
    display: block;
    color: #557c5b;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    line-height: 1;
}

.header_tel a span{
    font-size: 2rem;
    margin-left: 8px;
}

.shop_open_time{
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin: 0;
    white-space: nowrap;
}

.header_search{
    display: flex;
    margin-left: auto;
}

.search-form {
    display: flex;
    width: 100%;
    max-width: 300px;
    height: 50px;
    border: 1px solid #5d4f4e; /* 外枠の色 */
    margin: 10px 50px 10px auto;
}

.search-form input[type="text"] {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 14px;
    background: #fffdf1;
    height: 100%;
}

/* プレースホルダー（薄い文字）の色 */
.search-form input::placeholder {
    color: #b0b0b0;
}

.search-form button {
    background-color: #5d4f4e; 
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 0 20px;
    font-size: 14px;
    display: flex;
    font-weight: bold;
    align-items: center;
    gap: 8px; /* アイコンと「検索」の間の余白 */
    white-space: nowrap;
}

/* アイコンの調整 */
.search-form button i {
    font-size: 16px;
}

.header_cart a{
    display: block;
    background: #D35B5C;
    color: #FFF;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 20px 40px;
    white-space: nowrap;
}

.header_cart a i{
    font-size: 1.4rem;
    margin-right: 10px;
}

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

.header_nav ul{
    width: 90%;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header_nav ul li a{
    color: #777;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.header_nav ul li.nav_title{
    color: #777;
    border: solid 2px #CCC;
    padding: 8px 16px;
    letter-spacing: 0.1em;
}

/*=========
TOPページ_ヘッダー
=========*/

.hero{
    display: flex;
    justify-content: space-between;
    height: 800px;
}

.hero figure{
    height: 600px;
}

.hero figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero_tx{
    background: #FFF;
    box-shadow: #e6f0f6 0 0 10px;
    border-radius: 20px;
    height: 500px;
    padding: 80px 50px;
    margin: 200px 100px -150px -20% ;
    display: flex;
    flex-direction: column;
}

.hero_tx h2{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/logo_icon.png) no-repeat top center;
    padding: 30px 10px 0;
    margin-top: -30px;
}

/*=========
TOP_newsエリア
=========*/

.top_news_area{
    width: 80%;
    margin: 0 auto 100px;
}

.top_news_area h2{
     background: url(https://honkeohnishi-ec.sakura.ne.jp/image/h2_icon.svg) no-repeat top center;
     background-size: 100%;
    padding: 50px 35px 0;
    margin-top: -30px;
    width: 100px;
    letter-spacing: 0.1em;
}

.news_box {
    width: 70%;
    margin: 50px auto;
    background: #FFF;
    box-shadow: #e6f0f6 0 0 10px;
    border-radius: 20px;
    padding: 20px 60px;
}

.news_list {
    
}

.news_tx {
    display: flex;
    align-items: center;
    padding: 25px 0; /* 行間の余白 */
    border-bottom: 0px; /* 線が必要な場合はここに border を追加 */
    position: relative;
}

/* 日付のスタイル */
.news_tx dt {
    margin-right: 8%;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: #666;
}

/* タイトルのスタイル */
.news_tx dd {
    flex-grow: 1;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
}

.news_tx dd a {
    text-decoration: underline;
    color: #333;
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
}

/* 右側の矢印 (→) 
.news_tx::after {
    content: "→";
    position: absolute;
    right: 0;
    font-size: 1.2rem;
    color: #333;
}
*/
/*=========
TOP_おすすめエリア
=========*/

.top_product_area{
    width: 80%;
    margin: 0 auto 100px;
}

.top_product_area h2{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/h2_icon.svg) no-repeat top center;
    background-size: 100%;
    padding: 50px 35px 0;
    margin-top: -30px;
    width: 100px;
    letter-spacing: 0.1em;
}

.top_product_right{
    margin: 60px 0 0 10%;
}

.top_product_bigbox{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 50px; /* アイテム間の隙間 */
    margin: 80px auto;
    padding: 20px;
}

.top_product_box{
    position: relative; /* ラベル配置の基準 */
    background: #FFF;
    box-shadow: #e6f0f6 0 0 10px;
    border-radius: 20px;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
}

.top_product_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.top_product_box h3 {
    position: absolute;
    left: -20px;
    bottom: 20px; /* 下からの位置調整 */
    background-color: #FFF;
    color: #333;
    padding: 8px 15px;
    font-size: 1.3rem;
    font-family: "Yu Mincho", "MS Mincho", serif;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #d4e3d4; /* 左端の薄緑のアクセント線 */
}

/*=========
TOP_イチ押しエリア
=========*/

.top_outlet_area{
    width: 100%;
    margin: 0 auto 200px;
}

.top_outlet_area h2{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/h2_icon.svg) no-repeat top center;
    background-size: 100%;
    padding: 50px 35px 0;
    margin-top: -30px;
    margin-right: 5%;
    margin-left: 1%;
    width: 100px;
    letter-spacing: 0.1em;
}

.top_outlet_bigbox{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    margin: 80px auto;
    padding: 0 20px; /* 左右に最低限の余白を作ることで見切れを防止 */
    max-width: 85%; /* 広がりすぎないよう上限だけ決める */
}

.top_outlet_box{
    width: 450px;
    height: 250px;
    outline : 1px solid #FFFFFF; /* 線の太さ・線状・色 */
    outline-offset : -10px ;/* どれだけ内側に線を表示したいかを負の値で指定 */
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: #c7d5dd 0 0 10px;
}

.top_outlet_box.recommend{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_recommend_bg.jpg) no-repeat top center;
}

.top_outlet_box.not_list{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_not_list_bg.jpg) no-repeat top center;
}

.top_outlet_box.sale_item{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_sale_item_bg.jpg) no-repeat top center;
}

.top_outlet_box.houi_outlet{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_houi_outlet_bg.jpg) no-repeat top center;
}

.top_outlet_box.butsugu_outlet{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_butsugu_outlet_bg.jpg) no-repeat top center;
}

.top_outlet_box.other{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/top_other_bg.jpg) no-repeat top center;
}

.top_outlet_box::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 0; /* 三角形のサイズ */
    z-index: 3;
}

.top_outlet_box.recommend::before {
    border-color: #9B6D63 transparent transparent transparent; /* 紅檜皮色 */
}

.top_outlet_box.not_list::before {
     border-color: #8A9452 transparent transparent transparent; /* 紅檜皮色 */

}

.top_outlet_box.sale_item::before {
    border-color: #568F73 transparent transparent transparent; /* 紅檜皮色 */
}

.top_outlet_box.houi_outlet::before {
    border-color: #4E8196 transparent transparent transparent; /* 紅檜皮色 */
}

.top_outlet_box.butsugu_outlet::before {
    border-color: #7182B1 transparent transparent transparent; /* 紅檜皮色 */
}

.top_outlet_box.other::before {
    border-color: #A784AD transparent transparent transparent; /* 紅檜皮色 */
}

.top_outlet_box h3{
    color: #FFF;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    text-align: center;
}

.more_span{
    color: #FFF;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.2);
    padding: 5px 20px;
}

/*=========
TOP_店舗紹介
=========*/

.top_shop_area{
    width: 100%;
    margin: 0 auto 100px;
}

.top_shop_area h2{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/h2_icon.svg) no-repeat top center;
    background-size: 100%;
    padding: 50px 35px 0;
    margin-top: -100px;
    margin-right: 50px;
    margin-left: 10%;
    width: 100px;
    letter-spacing: 0.1em;
}

.top_shop_bigbox{
    width: 90%;
    margin-right: 10%;
}

.top_shop_box{
    width: 100%;
    height: 600px;
    align-items: baseline;
}

.top_shop_box figure{
    width: 65%;
    height: 450px;
}

.top_shop_box figure img{
    width: 100%;
    height: 100%;
    box-shadow: #c7d5dd 0 0 10px;
    object-fit: cover;
}

.top_shop_tx.kyoto{
    width: 50%;
    height: fit-content;
    z-index: 2;
    margin-right: -20%;
    padding: 0 40px;
    color: #FFF;
    background-color: #738376;
    background-image: url("https://honkeohnishi-ec.sakura.ne.jp/image/cream-pixels.png");
}

.top_shop_tx_inbox{
    max-width: 290px;
    margin: 40px auto;
}

.top_shop_tx h3{
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

.top_shop_tx .address_tx{
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.top_shop_tx dl {
  display: grid;
  grid-template-columns: auto 1fr; /* ラベルの幅に合わせて自動調整 */
  gap: 10px 10px;                 /* 行間とラベル・数値の間隔 */
  align-items: center;
  color: #fff;                    /* 画像のような白文字にする場合 */
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.top_shop_tx dt {
  display: flex;
  justify-content: space-between; /* 文字を両端に広げて均等に配置 */
  width: 120px;                   /* ラベルの横幅を固定して揃える */
  font-weight: normal;
}

/* 括弧を疑似要素で入れるとHTMLがスッキリします */
.top_shop_tx dt::before { content: "［"; }
.top_shop_tx dt::after { content: "］"; }

.top_shop_tx dd {
  margin: 0;                      /* デフォルトの余白を消す */
}

.top_shop_tx dd a{
    color: #FFF;
}

.top_map_box{
    width: 100%;
    margin: 0 auto 150px;
    justify-content: space-between;
}

.top_map_box h3{
    position: relative;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    padding-top: 45px;
}

.top_map_box h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 線の太さ分を考慮して中央寄せ */
    width: 1px;       /* 線の太さ */
    height: 30px;     /* 線の長さ */
    background-color: #666; /* 線の色 */
}

.top_map_box .gmap{
    width: 85%;
    height: 350px;
    border: solid 1px #DDD;
}

.top_map_box .gmap iframe{
    width: 100%;
    height: 100%;
    border: solid 1px #CCC;
}

.top_shop_tx.tokyo{
    width: 50%;
    height: fit-content;
    z-index: 2;
    margin-left: -20%;
    padding: 0 40px;
    color: #FFF;
    background-color: #737784;
    background-image: url(https://honkeohnishi-ec.sakura.ne.jp/image/cream-pixels.png);
}


/*=========
contact_エリア
=========*/

.contact_area{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/footer_contact_bg.jpg) no-repeat top center;
    padding: 80px 0 100px;
    margin: 0 auto 0;
    text-align: center;
}

.contact_area .base_copy{
    color: #FFF;
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-family: "Yu Mincho", "MS Mincho", serif;
}

.contact_bigbox{
    width: 80%;
    margin: 50px auto;
    justify-content: space-between;
}

.contact_bigbox a{
    display: block;
    width: 48%;
    border: solid 2px #FFF;
    padding: 30px 10px;
    color: #FFF;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.contact_bigbox a small{
    font-size: 0.8rem;
    font-weight: normal;
}

.contact_bigbox a.contact_tel span{
    font-size: 0.8rem;
    margin-right: 8px;
}


/*=========
Footerエリア
=========*/

footer{
    color: #FFF;
    padding: 0 0 20px;
    background-color: #737784;
    background-image: url(https://honkeohnishi-ec.sakura.ne.jp/image/cream-pixels.png);
}

.footer_nav_top{
    width: 80%;
    margin: 0 auto;
}

.footer_nav_top nav ul{
    justify-content: space-between;
}

.footer_nav_top nav ul li a{
    color: #FFF;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.footer_nav_middle{
    width: 80%;
    margin: 30px auto; 
}

.footer_nav_middle nav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    width: 100%;
}

.footer_nav_middle h3{
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    padding: 5px;
    text-align: center;
    background: #858995;
}

.footer_nav_middle h3 a{
    color: #FFF;
}

.footer_nav_middle nav ul{
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px;
}

.footer_nav_middle nav ul li{
    margin-bottom: 5px;
}

.footer_nav_middle nav ul li a{
    white-space: nowrap;
    color: #FFF;
    font-size: 1rem;
    letter-spacing: 0.05em;
    padding: 5px;
}

.footer_nav_bottom{
    width: 80%;
    margin: 0 auto 50px;
    padding: 10px 50px;
    background: #858995;
}

.footer_nav_bottom nav ul{
    justify-content: space-evenly;
}

.footer_nav_bottom nav ul li a{
    color: #FFF;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.footer_info{
    width: 80%;
    margin: 0 auto 50px;
    justify-content: space-between;
    font-family: "Yu Mincho", "MS Mincho", serif;
}

.footer_info figure{
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_info figure img{
    width: 100%;
}

.footer_copy{
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-align: center
}


/********* 
ページヘッダー_共通
********/

.page_header{
    width: 100%;
    height: 300px;
}

.page_header h2{
    font-family: "Yu Mincho", "MS Mincho", serif;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    width: 35%;
    text-align: center;
    padding-top: 80px;
}

.page_header h2::after{
    content: url(https://honkeohnishi-ec.sakura.ne.jp/image/page_header_line.svg);
    width: 100%;
    margin: 10px auto;
    display: block;
}   
/********* 
会社概要ページ
********/

.page_header.company{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/company_header.jpg) no-repeat top right;
}

.company_area{
    width: 70%;
    margin: 100px auto;
}

.company_list{
    margin: 0 auto;
    display: grid;
    /* dtの幅を250px、残りをddに割り当て */
    grid-template-columns: 250px 1fr;
}

.company_list dt {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    grid-column: 1;
    padding: 40px 0 40px 20px;
    font-weight: bold;
    display: flex;
    border-bottom: 2px solid #019f26;
}

.company_list dd {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    grid-column: 2;
    padding: 40px 0 40px 30px;
    margin: 0;
    border-bottom: 2px solid #CCC;
}

.office_name{
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.contact_row{
    margin: 10px 0 20px;
}

.office_category span{
    display: inline-block;
    margin-bottom: 10px;
}

.company_list dd ul li{
    margin-bottom: 10px;
}

/********* 
特商法ページ
********/

.page_header.tokusho{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/tokusho_header.jpg) no-repeat top right;
}

.tokusho_area{
    width: 100%;
    margin: 50px auto;
    font-family: "Yu Mincho", "MS Mincho", serif;
}

.c-ttl-second {
    font-size: 1.4rem;
    text-align: center;
    padding: 10px;
    margin: 0 auto 30px;
    background: #eaf0e991;
}

.c-tbl-list{
    border-top: none;
}

.c-tbl-list__tr{
    border: none;
    padding: 0;
}

.c-tbl-list__th{
    width: 30%;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #019f26;
    padding: 30px 20px 30px 20px;
    font-weight: bold;
}

.c-tbl-list__td{
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #CCC;
    padding: 30px 20px 30px 20px;
    margin-left: 0;
}

/********* 
プライバシーページ
********/

.page_header.privacy{
    background: url(https://honkeohnishi-ec.sakura.ne.jp/image/privacy_header.jpg) no-repeat top right;
}

.privacy_area{
    margin: 50px auto;
    font-family: "Yu Mincho", "MS Mincho", serif;
}

.privacy_area p{
    font-size: 1rem;
    letter-spacing: 0.05em;
}