﻿@charset "utf-8";
/* CSS Document */

/*old*/
.ItmDetail div {
  margin-bottom: 100px;
}
.ItmDetail strong {
  display: block;
  font-size: 1.6rem;
  text-align: center;
}
.ItmDetail img {
  width: 100%;
}


/*ポール別売り*/
#dvProductDetailArea .ItemSingle_Note_List li.FC_red p {
    font-weight:600;
    font-size:1.2rem;
    line-height:2rem;
}
#dvProductDetailArea .ItemSingle_Note_List li.FC_red {
    font-weight:600;
    font-size:1.2rem;
    line-height:2rem;
}

/*のぼり*/
.NbrDetail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.col-span-2 {
    grid-column: span 2;
}

.NbrDetailBox {
    padding: 30px 80px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.NbrDetailBox-Txt {
    font-size: 15px;
    flex-grow: 1;
}

.NbrDetailBox-Txt h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 0;
}

.NbrDetailBox-Txt p {
    margin:  14px 0 0 0;
    line-height: 1.5rem;
}

.NbrDetailBox-Img {
    border-radius: 10px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.NbrDetailBox-Img-icon {
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.NbrDetailBox-Img img,
.NbrDetailBox-Img video {
    width: 100%;
    border-radius: 0 0 10px 10px;
    vertical-align: top;
}

.NbrDetailBox-Content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.NbrDetailBox-Content-t {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.NbrDetailBox-Content-t > .NbrDetailBox-Txt {
    flex-basis: 60%;
}

.NbrDetailBox-Content-t > .NbrDetailBox-Img {
    flex-basis: 40%;
}

.NbrDetailBox-Content-t p {
    margin-right: 50px;
}

.NbrDetail-link {
    display: block;
    margin: 20px auto 0;
    width: 200px;
    text-align: center;
    color: #ffffff!important;
    background: #000;
    padding: 20px;
    text-decoration: none;
    border-radius: 10px;
}
.mobile-image {
    display: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .NbrDetail {
        display: block;
    }

    .NbrDetailBox {
        padding: 20px;
        grid-column: span 2;
        margin:20px 5px;
    }

    .NbrDetailBox-Content-t {
        flex-direction: column;
    }
    .NbrDetailBox-Content-t p{
        margin: 0px;
    }
    .NbrDetailBox-Content-t > .NbrDetailBox-Txt,
    .NbrDetailBox-Content-t > .NbrDetailBox-Img {
        flex-basis: 100%;
    }
    .NbrDetailBox-Vid{
        max-height: 300px;
        overflow: hidden;
    }
    
    .NbrDetailBox-Txt h2 {
        font-size: 20px;
    }

    .NbrDetailBox-Txt p {
        font-size: 14px;
    }

    .NbrDetailBox-Img-icon {
        width: 150px;
        height: 120px;
    }
    .NbrDetailBox-Img-icon img{
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    .NbrDetail-link {
        width: 80%;
    }
    .desktop-video {
        display: none;
    }

    .mobile-image {
        display: block;
    }
}



/*一般アイテム*/
/*詳細1*/
.BasicItem-Detail_Text h3{
	font-size: 1.2rem;
	font-weight: 600;
}

.BasicItem-Detail_Table table {
	margin: 50px 0;
  width: 100%;
  border: 1px solid #D8D7D7;
	background: #fff;
}
.BasicItem-Detail_Table table th {
  padding: 6px;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.02em;
  color: #444444;
  font-weight: 500;
  text-align: center;	
}
.BasicItem-Detail_Table table th {
  border-right: 1px solid #D8D7D7;
	border-bottom: 1px solid #D8D7D7;
}
.BasicItem-Detail_Table table td {
  padding: 10px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.02em;
}
.BasicItem-Detail_Table table td + td {
  border-left: 1px solid #D8D7D7;
}
.BasicItem-Detail_Table table tr + tr td {
  border-top: 1px solid #D8D7D7;
}
.BasicItem-Detail_Template a{
	font-weight: 600;
	display: inline-block;
	margin: 20px auto 0;
	text-align: center;
	color: #ffffff !important;
	background: #000;
	padding: 20px;
	text-decoration: none;
	border-radius: 10px;
}

.BasicItem-Detail_Materials a {
	font-weight: 600;
	display: inline-block;
	margin: 20px 10px 0 0;
	width: 200px;
	text-align: center;
	color: #ffffff !important;
	background: #D6001D;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 10px;
}

/*詳細2*/

.BasicItem-Detail-Box {
    padding: 30px 80px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.BasicItem-Detail-Box-Txt {
    margin: 10px 0 10px 0;
    font-size: 15px;
    flex-grow: 1;
}

.BasicItem-Detail-Box-Txt h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 0;
}

.BasicItem-Detail-Box-Txt p,.BasicItem-Detail-Box-Txt li {
    margin: 0;
    line-height: 1.5rem;
}

.BasicItem-Detail-Box-Img {
    border-radius: 10px;
    margin: 20px 0 20px 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.BasicItem-Detail-Box-Img-icon {
    width: 190px;
    height: 190px;
    margin: 0 auto;
}

.BasicItem-Detail-Box-Img img,.BasicItem-Detail-Box-Img video {
    width: 100%;
    border-radius: 0 0 10px 10px;
    vertical-align: top;
}

.BasicItem-Detail-Box-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.BasicItem-Detail-Box-L,.BasicItem-Detail-Box-R {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.BasicItem-Detail-Box-L > .BasicItem-Detail-Box-Txt,.BasicItem-Detail-Box-R > .BasicItem-Detail-Box-Txt {
    flex-basis: 60%;
}

.BasicItem-Detail-Box-L > .BasicItem-Detail-Box-Img,.BasicItem-Detail-Box-R > .BasicItem-Detail-Box-Img {
    flex-basis: 40%;
}

.BasicItem-Detail-Box-L p {
    margin-left: 50px;
}

.BasicItem-Detail-Box-R p {
    margin-right: 50px;
}

.BasicItem-Detail-link {
    display: block;
    margin: 20px auto 0;
    width: 200px;
    text-align: center;
    color: #ffffff!important;
    background: #000;
    padding: 20px;
    text-decoration: none;
    border-radius: 10px;
}

.BasicItem-Detail-Box-Cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.BasicItem-Detail-Box-Card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}
.BasicItem-Detail-Box-Card h3 {
	font-weight:600;
    font-size: 16px;
    margin: 0 0 10px 0;
}
/* カードの一列バージョン */
.BasicItem-Detail-Box-Cards.column1 {
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 10px;
}

.BasicItem-Detail-Box-Cards.column1 .BasicItem-Detail-Box-Card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0px;
    align-items: start;
    background: #fff;
    padding: 20px;
}

/* テキスト部分のスタイル */
.BasicItem-Detail-Box-Cards.column1 .BasicItem-Detail-Box-Card .text-content {
    display: flex;
    flex-direction: column;
}

.BasicItem-Detail-Box-Cards.column1 .BasicItem-Detail-Box-Card p {
    font-size: 14px;
    line-height: 1.5rem;
    margin: 0;
}

/* 画像のサイズと配置 */
.BasicItem-Detail-Box-Cards.column1 .BasicItem-Detail-Box-Card img {
    max-width: 300px;
    border-radius: 10px;
}

.BasicItem-Detail-Box-spec {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    background: #fff;
}

.BasicItem-Detail-Box-spec th, .BasicItem-Detail-Box-spec td {
    border: 1px solid #d3d3d3;
    padding: 10px;
    text-align: left;
}

.BasicItem-Detail-Box-spec th {
    background-color: #d3d3d3;
    font-weight: bold;
}

.BasicItem-Detail-Box-review p {
    padding: 10px;
    background: #fff;
    border-radius: 20px;
}

@media (max-width: 768px) {
    /* 768px以下をスマホと想定 */.BasicItem-Detail-Box-Cards {
        grid-template-columns: 1fr;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .BasicItem-Detail {
        display: block;
    }

    .BasicItem-Detail-Box {
        padding: 20px;
        grid-column: span 2;
        margin: 20px 5px;
    }

    .BasicItem-Detail-Box-L,.BasicItem-Detail-Box-R {
        flex-direction: column;
    }

    .BasicItem-Detail-Box-L p,.BasicItem-Detail-Box-R p {
        margin: 0px;
    }

    .BasicItem-Detail-Box-L > .BasicItem-Detail-Box-Txt, .BasicItem-Detail-Box-R > .BasicItem-Detail-Box-Img,.BasicItem-Detail-Box-L > .BasicItem-Detail-Box-Img, .BasicItem-Detail-Box-R > .BasicItem-Detail-Box-Txt {
        flex-basis: 100%;
    }

    .BasicItem-Detail-Box-Vid {
        max-height: 300px;
        overflow: hidden;
    }

    .BasicItem-Detail-Box-Txt h2 {
        font-size: 20px;
    }

    .BasicItem-Detail-Box-Txt p {
        font-size: 14px;
    }

    .BasicItem-Detail-link {
        width: 80%;
    }
}

/*ポテト*/
.KnrnItm-list, .OssmItm-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 0;list-style: none;padding: 0;margin: 0;}
.KnrnItm-list li, .OssmItm-list li {padding: 15px;text-align: center;}
.KnrnItm-list img, .OssmItm-lis img {height: auto;border-radius: 5px;margin-bottom: 20px;}
.KnrnItm-title, .OssmItm-list p {margin: 10px 0;font-size: 1em;}
.KnrnItm-price {color: red;font-size: 1.5em;}
.KnrnItm-list a, .OssmItm-list a {text-decoration: none;color: #007BFF;font-size: 0.9em;}
.KnrnItm-list a:hover, .OssmItm-list a:hover {text-decoration: underline;}
.KnrnItm-title {margin: 10px 0;font-size: 1em!important;line-height: 1.5rem!important;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;font-size: 14px;}
.KnrnItm-price {color: #D6001D;font-weight: 500;font-size: 1.5em!important;margin: 10px 0 0 0px!important;}

@media (max-width: 768px) {
.KnrnItm-list, .OssmItm-list {display: flex;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.KnrnItm-list li, .OssmItm-list li {flex: 0 0 auto;margin-right: 10px;max-width: 230px;}
.KnrnItm-list li:last-child, .OssmItm-list li:last-child {margin-right: 0;}
}
/*ポテト*/

/*比較用テーブル*/
/* スクロールバー */
.item-comparison-table::-webkit-scrollbar {width: 14px;height: 14px;}
.item-comparison-table::-webkit-scrollbar-track {border-radius: 10px; padding: 10px;}
.item-comparison-table::-webkit-scrollbar-thumb {background: #ccc;border-radius: 10px;border: 2px solid #fff;}
.item-comparison-table::-webkit-scrollbar-thumb:hover {background: #aaa;}
/* スクロールバー */
.item-comparison .osusume {position: relative;}
.item-comparison .osusume:after {content: "おすすめ";white-space: nowrap;position: absolute;right: 14px;top: 14px;background: #D6001D;color: #fff;padding: 6px 16px;border-radius: 4px;font-weight: 600;font-size: 1rem;}

.item-comparison h2 {text-align: center;font-size: 24px;font-weight: 600;padding: 20px 0;}
.item-comparison-table {border: 1pt solid #d3d3d3;border-radius: 10px;width: 100%;overflow-x: scroll;}
.item-comparison-table table {border: none;border: none;border-collapse: collapse;}
.item-comparison-table table th {padding: 10px;min-width: 140px;border-top: none;border-right: none;border-bottom: 1pt solid #ddd;border-left: none;background: #ccc;position: sticky;left: 0;z-index: 2;}
.item-comparison-table table tr td {font-size: 14px;padding: 20px;min-width: 200px;border-top: none;border-bottom: 1pt solid #d3d3d3;border-left: 1pt solid #d3d3d3;}
.item-comparison-table table tr:nth-child(odd) {background-color: #f8f8f8;}
.item-comparison-table tr img {max-width: 200px;}
@media screen and (max-width: 768px) {
.item-comparison-table {font-size: 0.9rem;}
.item-comparison-table table {}
.item-comparison-table table th {padding: 6px 8px;min-width: 60px;}
.item-comparison-table table tr td {padding: 0 6px;min-width: 170px;}
.item-comparison-table table tr td:last-child {}
.item-comparison-table table tr:nth-child(odd) {}
.item-comparison-table tr img {width: 170px;margin: 10px 4px;}
}
/*比較用テーブル*/

/* ダウンロードボタンテーブル*/
.TmpTblBox {max-width: 900px;display: flex;flex-direction: column;gap: 100px;}
.TmpTblBox h2 {margin-bottom: 20px;font-weight: bold;font-size: 20px;text-align: left;}
/* 横に見出しがある表 */
.TmpTblBox div {width: 100%;}
.TmpTblBox div dl {display: flex;flex-wrap: wrap;width: 100%;}
.TmpTblBox li {line-height: 2rem;}
.TmpTblBox div dl dt, .TmpTblBox div dl dd {width: 33%;padding: 20px 0;margin: 0;border-bottom: 1px solid #cfcfcf;display: flex; align-items: center;}
.TmpTblBox a {background: #06C724;padding: 6px;border-radius: 4px;margin: 0 1%;text-decoration: none;color: #fff;display: inline-block;width: 38%;text-align: center;}
.TmpTblBox a:hover {opacity: 0.8;}
.TmpTblBoxLink-100 a {background: #06C724;padding: 6px;border-radius: 4px;margin: 0 1%;text-decoration: none;color: #fff;display: inline-block;width: 100%;text-align: center;}
	
/* モバイル表示用のスタイル */
@media (max-width: 767px) {
.TmpTblBox {width: 90%;}
.TmpTblBox div {text-align: center;}
.TmpTblBox div dl {display: block;}
.TmpTblBox div dl dt, .TmpTblBox div dl dd {padding: 5px 0;border-bottom: none;width: 100%;}
.TmpTblBox div dl dt {padding-top: 20px;}
/* 最後のddにのみborder-bottomを適用 */
.TmpTblBox div dl dd:nth-child(3n) {padding-bottom: 20px;border-bottom: 1px solid #cfcfcf;}
/* サイズ、数字、ボタンを縦並びにする */
.TmpTblBox div dl dt, .TmpTblBox div dl dd {display: flex;flex-direction: column;}
.TmpTblBox div dl dd a {margin-top: 10px;}
.TmpTblBox a {display: block;width: 80%;}
}
/* ダウンロードボタンテーブル*/


/*mirishira*/
.item-detail-A{line-height:1.7;color:#111827}
.item-detail-A h1,.item-detail-A h2,.item-detail-A h3{font-weight:700;margin:0.6em 0}
.item-detail-A p{margin:0.6em 0}
.item-detail-A hr{border:none;border-top:1px solid #e5e7eb;margin:1rem 0}
.item-detail-A .cards{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.item-detail-A .card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:block}
.item-detail-A .thumb{aspect-ratio:4/3;background:#f9fafb;display:flex;align-items:center;justify-content:center}
.item-detail-A .thumb img{width:100%;height:100%;object-fit:cover}
.item-detail-A .meta{padding:10px}
.item-detail-A .code{font-size:12px;color:#6b7280}
.item-detail-A .name{font-weight:600}
.item-detail-A .table{width:100%;border:1px solid #d1d5db;border-collapse:collapse}
.item-detail-A .table th,.item-detail-A .table td{border:1px solid #d1d5db;padding:8px 10px;text-align:left}
.item-detail-A .table thead{background:#f3f4f6}
.item-detail-A .table tr:nth-child(even){background:#f9fafb}
/* リンクボタン（デフォルト） */
.item-detail-A .linkbar{display:flex;flex-wrap:wrap;gap:8px}
.item-detail-A .linkbtn{display:inline-block;padding:6px 12px;border-radius:9999px;border:1px solid #111827;background:#111827;color:#fff;text-decoration:none;white-space:nowrap}
@media (max-width:640px){.item-detail-A .cards{grid-template-columns:1fr 1fr}}++


