@charset "utf-8";
/*===============================================
●SP 画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
#Na_ProductList .Na_main {
margin: 0px 8px 16px 8px;
}
#Na_ProductList{
margin:0px 8px;
overflow:hidden;
}
#Na_ProductList .img {
width: 100%;
text-align: center;
}
#Na_ProductList p .spimg {
width:50%;
}
#Na_ProductList .img2 {
width:62.4%;
}
#Na_ProductList h1 {
font-weight: bold;
font-size: 24px;
line-height:1.5;
color: #000;
margin:0px 0px 10px;
padding:0px;
}
#Na_ProductList h2 {
font-weight: bold;
font-size: 18px;
margin:0px;
padding: 10px 0px 10px 15px;
color: #FFF;
background: #900;
}
#Na_ProductList h3 {
font-weight: bold;
line-height:1.5;
font-size: 18px;
margin:0px;
text-align:center;
}
#Na_ProductList h3.h3 {
font-weight: bold;
font-size: 16px;
margin:0px;
padding:0px;
}
#Na_ProductList p {
line-height:1.5;
font-size: 16px;
margin:0px;
padding:0px;
}
/* もっちりジェル
---------------------------------------------------- */
#Na_ProductList .mocchir{
overflow:hidden;
text-align:center;
margin: 20px auto;
}
#Na_ProductList .mocchirL{
overflow: hidden;
width: 49%;
border: 1px solid #ccc;
margin: 0 2% 0 0;
float: left;
padding: 8px;
}
#Na_ProductList .mocchirL a{
display:block;
}
#Na_ProductList .mocchirR{
overflow: hidden;
width: 49%;
border: 1px solid #ccc;
float: left;
padding: 8px;
}
#Na_ProductList .mocchirR a{
display:block;
}
#Na_ProductList .mocchir .texta{
font-size:14px;
}
#Na_ProductList .mocchir .textb{
font-size:16px;
}
/* アイテムごとに見る
---------------------------------------------------- */
#Na_ProductList .topic_item {
font-weight: bold;
overflow: hidden;
padding: 0px;
margin: 20px 0px;
}
#Na_ProductList .topic_item_p {
margin-bottom: 5px;
font-weight: normal;
}
#Na_ProductList .topic_item_li_a {
width: calc((100% - 10px) / 2);
}
#Na_ProductList .topic_item_li_b {
width: calc((100% - 10px) / 2);
}
#Na_ProductList .topic_item_li_a a {
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border: 2px solid #900;
text-align: center;
font-size: 16px;
}
#Na_ProductList .topic_item_li_b a {
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border: 2px solid #900;
text-align: center;
font-size: 16px;
}
/* 見出し
---------------------------------------------------- */
#Na_ProductList .topics_a {
margin-bottom:20px;
}
#Na_ProductList .topics_b {
border-left: 6px solid #ff6666;
padding: 5px 0px 5px 15px;
margin-bottom:10px;
}
/* 商品
---------------------------------------------------- */
#Na_ProductList .picup {
overflow: hidden;
border: 1px solid #CCC;
margin: 0px 0px 24px;
padding: 16px;
}
#Na_ProductList .top {
overflow:hidden;
margin: 0px 0px 16px;
}
#Na_ProductList .sub_item {
margin: 0px auto 0px;
}
.figure{
position: relative;
overflow: hidden;
text-align: center;
}
.figure .figcaption{
display: none;
}
.figure:hover .figcaption{
bottom: 0;
}
#Na_ProductList .sub_left_area {
}
#Na_ProductList .spec {
background-color: #ffe7e7;
margin: 10px 0px 10px;
font-size: 13px;
padding: 10px;
}
/* 売り場
---------------------------------------------------- */
#Na_ProductList .kakaku {
overflow: hidden;
border-top: 1px dotted #ccc;
padding: 16px 0px;
}
#Na_ProductList .tsuujyou_aa {
display:none;
}
#Na_ProductList .tsuujyou_ca {
display: none;
}
#Na_ProductList .tsuujyou_ab {
width: 150px;
float: left;
font-size: 29px;
font-weight: bold;
}
#Na_ProductList .tsuujyou_be {
font-size: 29px;
font-weight: bold;
color: #c00;
}
#Na_ProductList .yen {
font-size: 12px;
}
#Na_ProductList .yen_a {
font-size: 12px;
text-decoration: line-through;
}
#Na_ProductList .box1 {
width:150px;
float:left;
}
#Na_ProductList .tsuujyou_ac {
background: #00F;
font-size: 12px;
color: #FFF;
padding: 5px;
margin: 5px 0px 0px;
}
#Na_ProductList .box2 {
width: 60px;
float: left;
margin-left: 20px;
}
#Na_ProductList .tsuujyou_bc {
background: #00F;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-bottom:5px;
}
#Na_ProductList .tsuujyou_cc {
background: #c00;
font-size: 12px;
color: #FFF;
padding: 5px;
}
#Na_ProductList .box3 {
width:100%;
float:left;
margin: 10px 0px 0px;
}
#Na_ProductList .tsuujyou_ad {
font-size:14px;
}
#Na_ProductList .tsuujyou_cd {
font-size: 14px;
margin: 8px 0px 16px 0px;
}
#Na_ProductList .tsuujyou_cf {
font-size: 14px;
margin: 0px 0px 16px 0px;
}
/* 選択
---------------------------------------------------- */
#Na_ProductList .number {
font-size: 14px;
margin-left: 5px;
}
#Na_ProductList .course {
font-size: 14px;
}
/* 購入ボタン */
#Na_ProductList .cam:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
#Na_ProductList .tsuujyou_ae {
width: 100%;
font-size:18px;
text-decoration: none;
background: #999;
text-align: center;
color: #fff;
padding: 16px 0px;
margin: 10px 0px 0px;
}
#Na_ProductList .tsuujyou_ce {
width: 100%;
font-size:18px;
text-decoration: none;
background: #90b722;
text-align: center;
color:#fff;
padding: 16px 0px;
margin: 10px 0px 0px;
}
/* 説明画像 */
#Na_ProductList .image {
float: left;
width: 100px;
}
#Na_ProductList .spec_c {
float: left;
width: 100%;
}
/* 赤帯 */
#Na_ProductList .rogo_a {
font-size: 12px;
color: #FFF;
background-color: #c00;
margin: 5px 0px;
padding: 4px;
width: 140px;
text-align:center;
}
/* 価格のみ
---------------------------------------------------- */
#Na_ProductList .kakaku_a {
overflow:hidden;
width:50%;
float:left;
}
#Na_ProductList .kakaku_b {
overflow:hidden;
width:50%;
float:left;
}
#Na_ProductList .tsuujyou_da {
float: left;
background: #999;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 5px 0px;
color:#FFF;
}
#Na_ProductList .tsuujyou_ea {
float: left;
background: #c00;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 5px 0px;
color:#FFF;
}
#Na_ProductList .box4 {
width: 125px;
float: left;
margin-left: 10px;
}
#Na_ProductList .service_ac {
background: #00F;
width: 50px;
float: left;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-left: 10px;
}
#Na_ProductList .service_bc {
background: #00F;
width: 50px;
font-size: 12px;
color: #FFF;
padding: 5px;
float:left;
}
#Na_ProductList .service_cc {
background: #c00;
width: 50px;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-right:5px;
float:left;
}
#Na_ProductList .topic_item_li {
width: calc((100% - 10px) / 2);
}
#Na_ProductList .topic_item_ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
}

/*===============================================
●PC 画面の横幅が640px
===============================================*/
@media screen and (min-width:640px){
#Na_ProductList{
width:1024px;
margin:0 auto;
overflow:hidden;
}
#Na_ProductList .img2 {
width:62.4%;
}
#Na_ProductList h1 {
font-weight: bold;
font-size: 28px;
color: #000;
line-height: 1.5;
margin: 0px 0px 20px;
}
#Na_ProductList h2 {
font-weight: bold;
font-size: 18px;
margin:0px;
padding: 10px 0px 10px 15px;
color: #FFF;
background: #900;
}
#Na_ProductList h3 {
font-weight: bold;
line-height:1.5;
font-size: 18px;
margin:0px;
}
#Na_ProductList h3.h3 {
font-weight: bold;
font-size: 16px;
margin:0px;
border-left: 6px solid #ff6666;
padding: 5px 0px 5px 15px;
}
#Na_ProductList p {
line-height:1.5;
font-size: 16px;
margin:0px;
padding:0px;
}
/* もっちりジェル
---------------------------------------------------- */
#Na_ProductList .mocchir{
overflow:hidden;
text-align:center;
margin: 30px 0px;
}
#Na_ProductList .mocchirL{
overflow: hidden;
width:500px;
border: 1px solid #ccc;
margin: 0px 20px 0px 0px;
float: left;
padding: 15px 0px;
}
#Na_ProductList .mocchirL a{
display:block;
}
#Na_ProductList .mocchirR{
overflow:hidden;
width:500px;
border: 1px solid #ccc;
float: left;
padding: 15px 0px;
}
#Na_ProductList .mocchirR a{
display:block;
}
#Na_ProductList .mocchir .texta{
font-size:14px;
}
#Na_ProductList .mocchir .textb{
font-size:18px;
}
/* アイテムごとに見る
---------------------------------------------------- */
#Na_ProductList .topic_item {
font-weight: bold;
overflow: hidden;
padding: 0px;
margin: 30px 0px;
}
#Na_ProductList .topic_item_p {
margin-bottom: 5px;
font-weight: normal;
}
#Na_ProductList .topic_item_li_a {
width: 100%;
}
#Na_ProductList .topic_item_li_b {
width: 100%;
}
#Na_ProductList .topic_item_li_a a {
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border: 2px solid #900;
text-align: center;
font-size: 16px;
}
#Na_ProductList .topic_item_li_b a {
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border: 2px solid #900;
text-align: center;
font-size: 16px;
}
/* 見出し
---------------------------------------------------- */
#Na_ProductList .topics_a {
margin-bottom:30px;
}
#Na_ProductList .topics_b {
margin-bottom:10px;
}
/* 商品
---------------------------------------------------- */
#Na_ProductList .picup {
overflow: hidden;
border: 1px solid #CCC;
margin: 0px 0px 40px;
padding: 30px 20px 0px;
}
#Na_ProductList .top {
width: 982px;
overflow:hidden;
margin-bottom: 10px;
}
#Na_ProductList .sub_item {
float: left;
width: 231px;
margin: 0px 20px 0px 0px;
}
.figure{
position: relative;
overflow: hidden;
text-align: center;
width:100%;
}
.figure .figcaption{
position: absolute;
bottom: -35px;
left: 0;
z-index: 2;
width: 100%;
height: 25px;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
color: #FFF;
text-align: center;
padding-top:5px;
font-size:14px;
}
.figure:hover .figcaption{
bottom: 0;
}
#Na_ProductList .sub_left_area {
float: left;
width: 730px;
margin-top:15px;
}
#Na_ProductList .spec {
background-color: #ffe7e7;
margin: 10px 0px 10px;
font-size: 13px;
padding: 10px;
}
/* 売り場
---------------------------------------------------- */
#Na_ProductList .kakaku {
width: 982px;
overflow: hidden;
border-top: 1px dotted #ccc;
padding: 20px 0px;
}
#Na_ProductList .tsuujyou_aa {
float: left;
background: #999;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 11px 0px;
color:#FFF;
}
#Na_ProductList .tsuujyou_ca {
float: left;
background: #c00;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 17px 0px;
color:#FFF;
}
#Na_ProductList .tsuujyou_ab {
font-size: 29px;
font-weight: bold;
}
#Na_ProductList .tsuujyou_be {
font-size: 29px;
font-weight: bold;
color: #c00;
}
#Na_ProductList .yen {
font-size: 12px;
}
#Na_ProductList .yen_a {
font-size: 12px;
text-decoration: line-through;
}
#Na_ProductList .box1 {
width:150px;
float:left;
margin-left:20px;
}
#Na_ProductList .tsuujyou_ac {
background: #00F;
font-size: 12px;
color: #FFF;
padding: 5px;
}
#Na_ProductList .box2 {
width: 60px;
float: left;
margin-left: 20px;
}
#Na_ProductList .tsuujyou_bc {
background: #00F;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-bottom:5px;
}
#Na_ProductList .tsuujyou_cc {
background: #c00;
font-size: 12px;
color: #FFF;
padding: 5px;
}
#Na_ProductList .box3 {
width:657px;
float:left;
margin: 0px 0px 0px 20px;
}
#Na_ProductList .tsuujyou_ad {
font-size:14px;
}
#Na_ProductList .tsuujyou_cd {
font-size: 14px;
}
#Na_ProductList .tsuujyou_cf {
font-size: 14px;
}
#Na_ProductList .volume {
float:left;
width:100px;
}
#Na_ProductList .order {
float:left;
width:556px;
}
/* 選択
---------------------------------------------------- */
#Na_ProductList .number {
font-size: 14px;
margin-left: 5px;
}
#Na_ProductList .course {
font-size: 14px;
}
/* 購入ボタン */
#Na_ProductList .cam:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
#Na_ProductList .tsuujyou_ae {
font-size:18px;
text-decoration: none;
background: #999;
text-align: center;
color: #fff;
padding: 14px 0px;
width:215px;
margin:0px 0px 0px 341px;
}
#Na_ProductList .tsuujyou_ce {
font-size:18px;
text-decoration: none;
background: #90b722;
text-align: center;
color:#fff;
padding: 14px 0px;
width: 215px;
margin: 0px 0px 0px 341px;
}
/* 説明画像 */
#Na_ProductList .image {
float: left;
width: 100px;
}
#Na_ProductList .spec_c {
float: left;
width: 470px;
}
/* 赤帯 */
#Na_ProductList .rogo_a {
font-size: 12px;
color: #FFF;
background-color: #c00;
margin: 5px 0px;
padding: 4px;
width: 140px;
text-align:center;
}
/* 価格のみ
---------------------------------------------------- */
#Na_ProductList .kakaku_a {
overflow:hidden;
width:50%;
float:left;
}
#Na_ProductList .kakaku_b {
overflow:hidden;
width:50%;
float:left;
}
#Na_ProductList .tsuujyou_da {
float: left;
background: #999;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 5px 0px;
color:#FFF;
}
#Na_ProductList .tsuujyou_ea {
float: left;
background: #c00;
width: 55px;
font-size: 12px;
line-height:1.2;
text-align: center;
padding: 5px 0px;
color:#FFF;
}
#Na_ProductList .box4 {
width: 125px;
float: left;
margin-left: 10px;
}
#Na_ProductList .service_ac {
background: #00F;
width: 50px;
float: left;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-left: 10px;
}
#Na_ProductList .service_bc {
background: #00F;
width: 50px;
font-size: 12px;
color: #FFF;
padding: 5px;
float:left;
}
#Na_ProductList .service_cc {
background: #c00;
width: 50px;
font-size: 12px;
color: #FFF;
padding: 5px;
margin-right:5px;
float:left;
}
#a01 {
padding-top: 70px;
margin-top: -70px;
}
#b02 {
padding-top: 70px;
margin-top: -70px;
}
#c03 {
padding-top: 70px;
margin-top: -70px;
}
#d04 {
padding-top: 70px;
margin-top: -70px;
}
#e05 {
padding-top: 70px;
margin-top: -70px;
}
#f06 {
padding-top: 70px;
margin-top: -70px;
}
#g07 {
padding-top: 70px;
margin-top: -70px;
}
#h08 {
padding-top: 70px;
margin-top: -70px;
}
#i09 {
padding-top: 70px;
margin-top: -70px;
}
#j10 {
padding-top: 70px;
margin-top: -70px;
}
#Na_ProductList .topic_item_li {
width: 100%;
}
#Na_ProductList .topic_item_ul {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}
}
#Na_ProductList .topic_item_li a {
  display: block;
  padding: 10px 0;
  border: 2px solid #900;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
#Na_ProductList .topic_item_li a:hover {
  color: #cc2929;
}