@charset "euc-jp";
@import url("naviplus_2024.css");

/* 背景の設定 */
body::after {
    content: '';
    display: block; position: fixed; top: 0; right: 0; left: 0; z-index: -2;
    width: 100%; height: 100%;
    background: url("../images/top/main_bg.webp") top center;}

#left-logo {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-align-items: center;
    align-items: center;
    position: fixed; top: 0; left: 0; z-index: -1;
    box-sizing: border-box; width: 100vw; height: 100vh; padding: 0 0 0 15px;}

#left-logo div { max-width: 480px;}
#left-logo img { max-width: 100%; height: auto;}

@media screen and (max-width:1599px){
    #left-logo div { max-width: 23.17vw;}
    #left-logo p:nth-of-type(2) { width: 91.39%;}
}

@media screen and (max-width:1229px){
    #left-logo { display: none;}
}
/**========================================**/
header {
    position: fixed; top: 0; left: 0; z-index: 2;
    width: 100%;}

header img { display: block;}
header img:hover { opacity: 0.5; transition: all 0.4s;}

header .w600 {box-sizing: border-box; padding: 25px 15px 15px; background: #fff;}
    
header .dis-tbl_tab {width: 100%;}
header .dis-tbl_tab > * { display: table-cell;}

/* NNMロゴ・リンクアイコン */
header .w600 .dis-tbl_tab > * { vertical-align: middle;}
header .w600 .dis-tbl_tab > h1 { width: 120px;}
header .w600 .dis-tbl_tab > .ta_r { font-size: 0;}
header .w600 .dis-tbl_tab > .ta_r > * { display: inline-block; margin: 0 0 0 30px; vertical-align: middle;}
header .w600 .dis-tbl_tab > .ta_r > *:nth-child(1) { margin: 0;}
/**========================================**/
 /* NaviPlus */
#naviplus .dis-tbl_tab { max-width: 500px; margin: 30px auto 0;}

/* 検索カテゴリー */
#naviplus .dis-tbl_tab > div:nth-of-type(1) { padding: 0 0 0 70px;}

/* 分類 */
#select_category_btn { width: 70px;}

/* 送信ボンタン */
#naviplus .dis-tbl_tab > div:nth-of-type(2),
#naviplus input[type="submit"] {width: 52px;} 

/* ナビプラス サジェストリスト */
#saggest_list { left: 30px;}


/**========================================**/
/* ハンバーガーボタン */
#nav-btn { cursor: pointer;}

/* グローバルメニュー */
#nav-area a { display: inline-block; padding: 5px; color: #fff; text-decoration: none;}
#nav-area a:hover { border-radius: 3px; background: #aaa; }

/* 閉じるボタン */
#nav-btn_cl { cursor: pointer; }
#nav-btn_cl {
    display: block; position: absolute; top: 8px; right: 10px; z-index: 10003;
    box-sizing: border-box; width: 32px; height: 32px; padding: 3px;
    border: solid 1px #fff;
    cursor: pointer; }
#nav-btn_cl::before,
#nav-btn_cl::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 3px;
    background: #fff; }
#nav-btn_cl::before {
    transform: translateX(-50%) translateY(-1px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(45deg); }
#nav-btn_cl::after {
    transform: translateX(-50%) translateY(-1px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(-45deg); }


/* グローバルメニュー表示エリア */
#nav-bg {
    position: fixed; top: 0; left: 0; z-index: 20000;
    width: 0vw; height: 100vh; margin: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: background 0.8s; }

#nav-bg.slide-in { width: 100vw;}

#nav-area {
    position: fixed; top: 0; left: auto; right: 0; z-index: 20002;
    box-sizing: border-box; width: 300px; height: 100%; padding: 15px 10px 10px;
    background: #444;
    transform: translateX(100%); transition: 0.8s; }

#nav-area.slide-in {
    transform: translateX(0);
    transition: 0.8s; }

@media screen and (max-width:599px){
    #nav-area { width: 100%; padding: 5px 10px 10px;}
    #nav-area > div { 
        overflow-y: scroll;
        height: 81vh; margin: 10px 0 0; padding: 0 10px 0 0;}

    #nav-area > div::-webkit-scrollbar { width: 8px;}
    #nav-area > div::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 1.0);}
    #nav-area > div::-webkit-scrollbar-thumb {background-color: rgba(150, 150, 150, 1.0);}
}

/**========================================**/
/* ユーザーネーム */
#nav-area .guest {
    margin: 0 0 10px 10px; 
    color: #fff; font-size: 16px; line-height: 1.5em;}

#nav-area .user_name {
    display: table; table-layout: fixed;
    width: 100%; margin: 0 0 5px;}

#nav-area .user_name::before {
    content: url("../images/top/people_ico.webp");
    display: table-cell;
    width: 27px; padding: 0 10px;
    vertical-align: middle;}

#nav-area .user_name span {
    display: table-cell;
    color: #fff; font-size: 16px; line-height: 1.2em; vertical-align: middle;}

/* ユーザーポイント */
#nav-area .user_point { 
    margin: 0 0 5px; padding: 10px 0 10px 49px;
    color: #fff; font-size: 16px; line-height: 1.2em;}

/**========================================**/
/* ログイン*/
#nav-area .login { display: table; table-layout: fixed; width: 100%;}

#nav-area .login::before {
    content: url("../images/top/people_ico.webp");
    display: table-cell;
    width: 27px; padding: 0 10px 0 0;
    vertical-align: middle;}

#nav-area .login a {
    display: table-cell;
    font-size: 16px; line-height: 1.2em; vertical-align: middle;}

/*・ログアウト */
#nav-area .logout {
    padding: 5px 0;
    border-top: solid 1px #fff;
    text-align: right;}

#nav-area .logout a {
    display: inline-block; position: relative;
    padding: 5px 40px 5px 5px;
    text-decoration: none;}

#nav-area .logout a::after {
    content: '';
    display: block; position: absolute; top: 0; right: 0;
    width: 30px; height: 30px;}

#nav-area .logout a::after { background: url("../images/top/logout_ico.webp");}

/* グローバルナビ リンク */
#nav-area ul { padding: 10px 0 0; border-top: solid 1px #fff;}
#nav-area ul li { 
    position: relative; 
    margin: 0 0 10px; padding: 0 0 5px 5px;
    border-bottom: solid 1px #666;} 

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

/**============================================================================================**/
footer { 
    margin: 50px 0 0; padding: 15px 0;
    background: #ccc; 
    color: #000; font-size: 12px; text-align: center;}

@media screen and (max-width:699px){
    footer { margin: 50px 0;}
}
/**============================================================================================**/
/* メインカラム */
#index {
    position: relative;
    max-width: 600px; margin: 0 auto; padding: 143px 0 0;
    border: solid #707070; border-width: 0 1px; background: #fff;}

h2 {
    padding: 0 0 5px; 
    border-bottom: solid 2px #000;
    font-size: 18px;}

section { margin: 40px 0 0; padding: 0 15px;}

@media screen and (max-width:599px){
    #index { border: none;}
}

/**============================================================================================**/
#index01 { margin: 0;}

/* 注目アイテム */
#index01 .posi-rlt { 
    box-sizing: border-box; max-width: 460px; margin: 0 auto 40px; padding: 2px 0 0 115px;
    font-size: 14px;}
    
#index01 .posi-rlt::before {
    content: '注目アイテム：';
    display: block; position: absolute; top: 0; left: 0;
    font-size: 16px;}
    
#index01 .posi-rlt a { display: block; margin: 0 0 10px;}
#index01 .posi-rlt a:hover { text-decoration: underline;}

@media screen and (max-width:499px){
    #index01 .posi-rlt { padding: 30px 0 0 18px;}
    
}


/* 商品を探す */
#index01 h2 { margin: 0 0 30px;}
#index01 h3 { 
    max-width: 530px; margin: 0 auto;
    font-size: 16px; font-weight: lighter;}

#index01 li a { 
    display: block; position: relative;
    font-size: 16px; text-decoration: none;}

#index01 li a::after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 10px;
    width: 10px; height: 10px; margin: -6px 0 0;
    border: solid #000; border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

#index01 li a:hover::after { border-color: #0066cc;}


/* 商品カテゴリから探す */
#index01 .category { 
    max-width: 530px; margin: 0 auto; padding: 0 20px 40px;
    border-bottom: solid 1px #999;
    font-size: 0;}

#index01 .category li {
    display: inline-block;
    box-sizing: border-box; width: 50%; margin: 10px 0 0;}
#index01 .category li:nth-child(odd) { padding: 0 5px 0 0;}
#index01 .category li:nth-child(even) { padding: 0 0 0 5px;}

#index01 .category a { 
    box-sizing: border-box; height: 40px; padding: 8px 10px 0;
    border: solid 1px #000; border-radius: 4px;}
    
#index01 .category a:hover { border-color: #0066cc;}

@media screen and (max-width:499px){
    #index01 .category { padding: 0 0 40px;}
    #index01 .category li a { padding: 10px 10px 0 5px; font-size: 13px;}
}

@media screen and (max-width:399px){
    #index01 .category li a { padding: 11px 10px 0 5px; font-size: 12px;}
    #index01 .category li:nth-child(2) a { letter-spacing: -0.15em;}
    #index01 .category li:nth-last-child(2) a { letter-spacing: -0.10em;}
}


/* 商品番号から探す・閲覧履歴から探す・各種適合表から探す・PWCモデル適合表を探す */
#index01 ul:not(.category) li { border-bottom: solid 1px #999;}
#index01 ul:not(.category) li a { padding: 20px;}
/**============================================================================================**/
/* 全て見る */    
#index02 > .posi-rlt a {
    display: block; position: absolute; top: 0; right: 15px;
    padding: 0 20px 0 0;
    font-size: 14px; font-weight: bold; text-decoration: none;}
    
#index02 > .posi-rlt a::after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 3px;
    width: 8px; height: 8px; margin: -6px 0 0;
    border: solid #000; border-width: 3px 3px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}
    
/**========================================**/
/* ショップレビュー */
#index02 .name {
    font-size: 15px;}
#index02 .date { 
    margin: 3px 0 0 0px; font-size: 12px;}

#index02 .date button { display: none;}

#index02 .star { margin: 5px 0 10px;}
#index02 .comment {
    max-height: 70px; padding: 0px;
    font-size: 14px; line-height: 1.6em; word-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;}



/* ショップコメント非標示 */
#index02 .shopcomment { display: none;}
/**========================================**/
/* 閲覧履歴 */
#index02 .historyList p { display: none;} /* 商品名非表示 */
#index02 .historyList img { max-width: 100%; height: auto;} 
#index02 .historyList .box a { display: block; border: solid 1px #ddd;}
/**========================================**/
/* slickの設定 */
.reviewList,
.historyList { margin: 0 0 50px; padding: 0 40px;}

.reviewList .slick-list { padding: 0 25% 0 0;}
.reviewList .slick-list::after {
    content: '';
    display: block; position: absolute; top: 0; right: 0;
    width: 25%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}


.historyList .slick-list { padding: 0;}

.slick-slide { position: relative; margin: 0 15px;}
.historyList .slick-slide { margin: 0 5px;}

/* ナビゲーションボタン */
.slick-prev,
.slick-next {
    position: absolute; top: 0;
    box-sizing: border-box; width: 30px; height: 100%; margin: 0; padding: 0 2px;
    cursor: pointer;}
.slick-prev img,
.slick-next img {
    position: absolute; top: 50%;
    margin: -13px 0 0;}

.slick-prev:hover,
.slick-next:hover { opacity: 0.7;}

.slick-prev { left: 0;}
.slick-next { right: 0;}

/* ドットナビゲーションボタン */
ul.slick-dots {margin: 10px 0 0; text-align: center;}
ul.slick-dots li {display: inline-block; margin: 0 5px 5px; padding: 0;}
ul.slick-dots button {
    text-indent: -9999px;
    display: block; width:10px; height:10px; margin:0; padding: 0;
	border: none; border-radius: 5px; outline: 0;
	background: #999;
	}

.slick-dots li.slick-active button {background: #000;}

@media screen and (max-width:599px){
    .reviewList,
    .historyList { padding: 0;}
    
    .reviewList .slick-list { padding: 0;}
    .reviewList .slick-list::after { display: none;}    
}

@media screen and (max-width:449px){
    .slick-slide { margin: 0 10px;}
}
/**========================================**/
/* お知らせ */
#feedBlog li { margin: 0 0 10px; font-size: 14px;}
#feedBlog p { font-weight: bold;}



/**============================================================================================**/
/* リンク一覧（共通） */
#index03 .dis-tbl_tab { 
    width: 100%; padding: 15px 0;
    border-bottom: solid 1px #333;}

#index03 .dis-tbl_tab > * { display: table-cell; vertical-align: middle;}

#index03 h3 {  width: 220px; font-size: 16px;}

@media screen and (max-width:599px){
    #index03 .dis-tbl_tab,
    #index03 .dis-tbl_tab > * { display: block;}

    #index03 h3 { margin: 0 0 10px;}
}


/**========================================**/
/* お役立ち講座・ブログ */
#index03 .oyakudati a,
#index03 .blog a { 
    display: block; position: relative;
    font-size: 16px; font-weight: bold; text-decoration: underline;}

#index03 .oyakudati a::after,
#index03 .blog a::after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 10px;
    width: 10px; height: 10px; margin: -6px 0 0;
    border: solid #000; border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

#index03 .oyakudati a:hover::after,
#index03 .blog a:hover::after { border-color: #0066cc;}

/* お役立ち講座 */
#index03 .oyakudati { padding: 30px 0;}
#index03 .oyakudati a span { font-size: 14px; font-weight: lighter;}

/* ブログ */
#index03 .blog li:not(:last-child) { margin: 0 0 20px;}

@media screen and (max-width:599px){
    #index03 .blog ul { padding: 0 0 0 18px;}
}


/**========================================**/
/* ショッピングモール・公式SNS */
#index03 img { max-width: 100%; height: auto;}
#index03 img:hover { opacity: 0.5;}

#index03 .shopping,
#index03 .sns { font-size: 0;}

#index03 .shopping li,
#index03 .sns li { 
    display: inline-block;
    box-sizing: border-box; padding: 0 10px;
    text-align: center; vertical-align: middle;}
    
#index03 .shopping li { width: 33.33%;}
#index03 .sns li { width: 25%;}

/**========================================**/
/* 最下部リンク */
#index03 .link { margin: 50px 0 0; font-size: 0; text-align: center;}
#index03 .link li { display: inline-block;}
#index03 .link li:nth-of-type(2) {
	margin: 0 15px; padding: 0 15px;
    border: solid #333; border-width: 0 1px;}

#index03 .link li a {font-size: 14px;}

@media screen and (max-width:699px){
	#index03 .link li:nth-of-type(2) { margin: 0 10px; padding: 0 10px;}
}

@media screen and (max-width:499px){
    #index03 .link li a {font-size: 13px;}
}

/**========================================**/
/* AIチャットボット */
#chatbot { position: fixed; bottom: 5px; padding: 0 0 0 600px;}

#chatbot button {
    width: 320px; height: 160px;
    border: none;
    background: url("../../zz/common/chatbot_off.webp");
    cursor: pointer;
    transition: all 0.4s;}

#chatbot button:hover { background-image: url("../../zz/common/chatbot_on.webp");}

#chatbot span { display: none;}

@media screen and (max-width:1399px){
    #chatbot { right: 10px; padding: 0;}
}

@media screen and (max-width:699px){
    #chatbot {
        right: 50%; bottom: 0;
        width: 100%; max-width: 600px; height: 50px; padding: 0;
        transform: translateX(50%);}

    #chatbot button,
    #chatbot button:hover { background-image: none;}
    
    #chatbot button {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        width: 100%; height: 50px;
        background-color: #004885;
        text-align: center;}
    
    #chatbot span {
        display: inline-block; position: relative;
        padding: 0 22px 0 90px;
        color: #fff; font-weight: bold; line-height: 1.0em;}

    #chatbot span::before {
        content: '';
        display: block; position: absolute; top: 50%; left: 0;
        width: 79px; height: 35px;
        background: url("../../zz/common/chatbot_wh.webp");
        background-size: auto 100%;
        transform: translateY(-50%);}

    #chatbot span::after {
        content: '';
        display: inline-block; position: absolute; top: 2px; right: 0;
        width: 10px; height: 10px;
        border: solid #fff; border-width: 3px 3px 0 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);}
}

/* チャット用iframe */
#chatbotContainer { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 1000;}

#chatbotIframe { 
    box-sizing: border-box; width: 800px; height: 600px; 
    border: solid 1px #ccc;}

/* 閉じるボタン */
.chatbot-close-btn {
    display: block; position: absolute; top: 18px; right: 10px; z-index: 1002;
    box-sizing: border-box; width: 32px; height: 32px; padding: 3px;
    border: solid 1px #fff;
    background: transparent;
    cursor: pointer;}

.chatbot-close-btn::before,
.chatbot-close-btn::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 3px;
    background: #fff; }
.chatbot-close-btn::before {
    transform: translateX(-50%) translateY(-1px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(45deg); }
.chatbot-close-btn::after {
    transform: translateX(-50%) translateY(-1px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(-45deg); }

.chatbot-close-btn:hover { opacity: 0.5;}

@media screen and (max-width:849px){
    #chatbotIframe { width: 90vw;}
}

@media screen and (max-width:699px){
    #chatbotContainer { 
        right: 0; bottom: 0;
        width: 100vw; height: 100%;}

    #chatbotIframe { width: 100vw; height: 100%;}
}

/* LastUp2025.09.09_kimata */