@charset "utf-8";



/* =Reset default browser CSS.

Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html

-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}

:focus{outline:0;}



ol, ul{list-style:none;}

table{border-collapse:separate;border-spacing:0;}

caption, th, td{font-weight:normal;text-align:left;}

blockquote:before, blockquote:after,q:before, q:after{content:"";}

blockquote, q{quotes:"" "";}

a img{border:0;}

figure{margin:0}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}

/* -------------------------------------------------------------- */



body{

color:#555;

font-size:13px;

font-family: 'Noto Sans JP', sans-serif;

line-height:1.5;

-webkit-text-size-adjust:100%;

}





/* 

------------------------------------------------------------*/

a{color:#6caefe;text-decoration:none;}

a:hover{color:#488fdd;}

a:active, a:focus {outline:0;}





/* 

------------------------------------------------------------*/

#wrapper{

margin:0 auto;

padding:0 1%;

width:98%;

position:relative;

}



.inner{

margin:0 auto;

width:100%;

}





#header{

height:130px;

}



#header h1{

padding:5px 0 10px;

font-size:12px;

font-weight:normal;

}









.logo{

float:left;

	

}



.logo_h{

float:left;

	font-weight: bold; /* ここで文字を太字に指定 */



}



.logo_h a{

color:#0001C8;

	font-size: 25px;	

}



.logo_s{

font-size: 19px;

}



.logo_h p{float:left;}



.logo_h span{

	display:block;

    font-size: 19px;

}



#logo_t{font-size: 18px;}



.logo a{

color:#0001C8;

	

}



.logo p{float:left;}



.logo span{display:block;}



.info{

float:right;

padding-right:20px;

text-align:right;

}



.info .open{font-size:11px;}







.logo,.info .tel{

margin-top:6px;

font-size:20px;

font-weight:bold;

color: #0001C8

}



.logo span,.info span{

font-size:.6em;

font-weight:normal;

}





#mainBanner{

clear:both;

margin:25px auto 40px;

padding:0;

position:relative;

text-align:center;

}

#mainBanner .inner{position:relative;}



#mainBanner img{

max-width:100%;

height:auto;

}



.slogan{

color:#fff;

font-weight:bold;

position:absolute;

max-width:100%;

height:auto;

bottom:42%;

left:40px;

padding:5px 10px;

line-height:1.4;

text-align:left;

}



.slogan h2{

padding-bottom:5px;

font-size:22px;

}





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

/* grid

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

.gridWrapper{

clear:both;

padding-bottom:20px;

overflow:hidden;

}



* html .gridWrapper{height:1%;}

	

.grid{

overflow:hidden;

}



.box{

padding:10px;

}



.box img{

max-width:100%;

height:auto;

}



.box h3{

font-size:16px;

padding:10px 0 15px;

}



.box h3, .box p{text-align:left;}



.box p.readmore{

padding:10px 5px 5px;

text-align:right;

}



.box p.readmore a{

padding:3px 7px;

border-radius:3px;

}





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

main

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

section.content article{

padding:30px 0 20px 0;

margin-bottom:10px;

overflow:hidden;

}



section.toppage article,section.content .archive{border:0;}





section.content .archive{

padding:0;

border-bottom:1px dotted #ccc;

}



section.content p{margin-bottom:5px;}



h3.heading{

font-size:16px;

font-weight:normal;

padding:15px 20px;

margin-bottom:5px;

border-top:2px solid #ebebeb;

border-bottom:2px solid #ebebeb;

	background-color: #f5f5f5;

  border-radius: 5px;

}



section.content img{

max-width:90%;

height:auto;

}



.alignleft{

float:left;

clear:left;

margin:3px 10px 10px 0;

}



.alignright{

float:right;

clear:right;

margin:3px 0 10px 10px;

}





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

/* sidebar

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

#sidebar article{

clear:both;

margin-bottom:20px;

}



#sidebar ul{padding:15px 0;}



#sidebar li{

margin-bottom:10px;

padding-bottom:10px;

list-style:none;

border-bottom:1px dashed #ebebeb;

}



#sidebar li:last-child{

border:0;

margin-bottom:0px;

}



#sidebar li a{

color:#555;

font-size:12px;

display:block;

}



#sidebar li a:hover{

color:#999;

font-size:12px;

display:block;

}





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

/* footer

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

#footer{

clear:both;

	width: 100%;

  background-color: #f5f5f5; /* 薄いグレー */

  padding: 20px 0;

}



#footer a{

color:#555;

}



#footer a:hover{

color:#999;

}



#footer .inner{

padding:40px 40px;

overflow:hidden;

}



#footer .grid{

margin:0;

}



#footer #info{float:left;}



#footer #info .info{float:none;}



#footer #info .info{

clear:both;

padding:5px 0 0;

text-align:left;

}



#footer .logo{font-size:18px;}



#footer .info .tel,#footer .info .tel span,#footer #info .open{

font-size:12px;

}







ul.footnav{

float:right;

width:620px;

padding:10px 0;

}

ul.footnav ul{display:none;}



ul.footnav li{

float:left;

margin:10px 0 10px 0;

padding:0 3px 0 5px;

border-right:1px solid #ebebeb;

}



#copyright{

clear:both;

padding:20px 0 10px 0;

text-align:center;

font-style:normal;

font-size:10px;

color:#555;

}





/* page navigation

------------------------------------------------------------*/

.pagenav{

clear:both;

width:100%;

height:30px;

margin:5px 0 20px;

}



.prev{float:left}

.next{float:right;}



#pageLinks{

clear:both;

text-align:center;

}





/* typgrah

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

.dateLabel{

margin:0 0 10px;

text-align:right;

font:italic 1em "Palatino Linotype", "Book Antiqua", Palatino, serif;

}



.post p{padding-bottom:10px;}



.post ul{margin:0 0 10px 10px;}



.post ul li{

margin-bottom:5px;

padding-left:15px;

background:url(images/bullet.png) no-repeat 0 8px;

}



.post ol{margin:0 0 10px 30px;}



.post ol li{list-style:decimal;}



.post h1{

margin:20px 0;

padding:5px 0;

font-size:150%;

color:#000;

border-bottom:3px solid #cf6a88;

}



.post h2{

margin:10px 0;

padding-bottom:2px;

font-size:130%;

font-weight:normal;

color:#333;

border-bottom:2px solid #cf6a88;

}



.post h3{

margin:10px 0 25px 0;

padding:10px 0 10px 0;

font-size:120%;

font-weight:normal;

border-bottom:1px solid #ddd;

}



.post h4{

margin:10px 0 10px 0;

padding:10px 0 10px 0;

font-size:120%;

color: #FB5E0D;	

font-weight:bold;

border-bottom:2px dashed #ddd;

}



.post blockquote{

clear:both;

padding:10px 0 10px 15px;

margin:10px 0 25px 30px;

border-left:5px solid #ccc;

}

 

.post blockquote p{padding:5px 0;}



.post table{

border-collapse:collapse;

margin:5px 0px 15px 0px;

}



.post table td{

border-collapse:collapse;

background-color:#F9F9F9;

text-align:left;

padding:8px;

border:1px solid #D6D6D6;

line-height:20px;

}



.post table th{

background-color:#F5F5F5;

text-align:right;

padding:8px;

white-space:nowrap;

color: #151515;

border-top:1px solid #D4D4D4;

border-right:4px solid #D4D4D4;

border-bottom:1px solid #D4D4D4;

border-left:1px solid #D4D4D4;

font-size:13px;

font-weight:normal;

letter-spacing:1px;

background-repeat:repeat-x;

background-position:top;

}





.post dt{font-weight:bold;}



.post dd{padding-bottom:10px;}



.post img{max-width:100%;height:auto;}



img.aligncenter{

display:block;

margin:5px auto;

}



img.alignright, img.alignleft{

padding:4px;

margin:0 0 2px 7px;

display:inline;

}



img.alignleft{margin:0 7px 2px 0;}



.alignright{float:right;}

.alignleft{float:left;}





/* PC

------------------------------------------------------------*/

@media only screen and (min-width:960px){

	nav div.panel{

	display:block !important;

	float:left;

	}



	a#menu{display:none;}

	

  #mainNav{

	clear:both;

	z-index:200;

	position:relative;

	}



	#mainNav li{

	float:left;

	position:relative;

	}



	#mainNav li a{

	color:#555;

	display: block;

	text-align: center;

	_float:left;

	font-size:13px;

	width:160px;

	height:30px;

	padding:15px 0;

	border-top:2px solid #ebebeb;

	border-bottom:2px solid #ebebeb;

	}



	#mainNav li a span,#mainNav li a strong{display:block;}



	#mainNav li a span{

	color:#bababa;

	font-size:10px;

	}

	

	#mainNav ul ul{width:160px;background:#fff;}

	#mainNav li ul{display:none;}



	#mainNav li:hover ul{

	display:block;

	position:absolute;

	top:64px;

	z-index:500;

	}

	

	#mainNav li li{

	margin:0;

	float:none;

	width:160px;

	border:0;

	}

  #mainNav li li:last-child{border:0;}

	

	#mainNav li li a{

	width:auto;

	height:auto;

	padding:10px;

	font-size:95%;

	text-align:left;

	border:0;

	}



	#mainNav li li span{padding:0 10px;}

	

	#mainNav li.current-menu-item a{

	border-color:#555;

	}



	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item li a:hover{

	color:#999;

	}



	#header,#wrapper,.inner{

	width:960px;

	padding:0;

	margin:0 auto;

	}

	

	#wrapper{clear:both;padding:20px 0;}

	

	#main{

	float:right;

	width:680px;

	padding:15px 0 0 0;

	}

	

	#sidebar{

	float:left;

	width:250px;

	padding:15px 0;

	overflow:hidden;

	}

	

	#sidebar article{

	margin-bottom:20px;

	overflow:hidden;

	}

	

	.logo{width:500px;}

	

	/* グリッド全体 */

	.gridWrapper{

	display:table;

	border-collapse:separate;

	border-spacing:0px;

	}

	

	/* グリッド */

	.grid{

	width:320px;

	display:table-cell;

	}



}





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

	*{

    -webkit-box-sizing:border-box;

       -moz-box-sizing:border-box;

         -o-box-sizing:border-box;

        -ms-box-sizing:border-box;

            box-sizing:border-box;

	}

	

	#mainNav{

	clear:both;

	width:100%;

	margin:0 auto;

	padding:0;

  border:1px solid #e4e4e4;

	border-left:0;

	border-right:0;

	}



	#mainNav a.menu{

	color:#555;

	width:100%;

	display:block;

	height:40px;

	line-height:40px;

	font-weight: bold;

	text-align:left;

	}



	#mainNav a#menu span{

	padding-left:10px;

	}

	#mainNav a.menu span:before{content:"≡ ";}

	#mainNav a.menuOpen span:before{content:"× ";}



	#mainNav a#menu:hover{cursor:pointer;}



	nav .panel{

	display:none;

	width:100%;

	position:relative;

	right:0;

	top:0;

	z-index:1;

	}

	

	#mainNav ul{margin:0;padding:0;}



  #mainNav li{

	float:none;

	clear:both;

	width:100%;

	height:auto;

	line-height:1.2;

	}



	#mainNav li a,#mainNav li.current-menu-item li a{

	color:#555;

	display: block;

	padding:15px 10px;

	text-align:left;

	border-bottom:1px dashed #ccc;

	}

	

 	#mainNav li a span{padding-left:10px;}

	

	

	#mainNav ul > li:last-child a{border:0;}

	#mainNav li li:last-child a{border-bottom:1px dashed #ccc;}

 

	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item a,#mainNav li a:active, #mainNav li li.current-menu-item a, #mainNav li.current-menu-item li a:hover, #mainNav li.current-menu-item li a:active{

	color:#555;

	}



	#mainNav li li{

	float:left;

	border:0;

	}



	#mainNav li li a, #mainNav li.current-menu-item li a, #mainNav li li.current-menu-item a{

	padding-left:40px;

	background:url(images/sub1.png) no-repeat 20px 18px;

	}



	#mainNav li li.current-menu-item a,#mainNav li li a:hover, #mainNav li.current-menu-item li a:hover{background:url(images/sub1.png) no-repeat 20px -62px;}



	#mainNav li li:last-child a{background:url(images/subLast.png) no-repeat 20px 20px;}

	#mainNav li li:last-child.current-menu-item a,#mainNav li li:last-child a:hover,#mainNav li.current-menu-item li:last-child a:hover{background:url(images/subLast.png) no-repeat 20px -65px;}



	nav div.panel{float:none;}

	

	#header{padding-left:10px;}

	

	#main{padding-top:15px;}

	section.toppage{margin:0;}

	#sidebar{padding-bottom:15px;}

	#sidebar article{padding:7px 8px;}

	

	#footer .grid,#footer ul.footnav{float:none;width:100%;text-align:center;}

	ul.footnav li{float:none;display:inline-block;}

	

	.grid{

	float:left;

	width:32%;

	margin:10px 0 0 1%;

	}



	#footer .grid img,#footer .info{float:none;}

	#footer .grid p{display:block;}

	#footer #info .info{float:none;text-align:center;}

	#footer.logo,#footer .info{width:100%;float:none;}

	#footer .logo p{float:none;display:block;	}

	#footer .logo img{float:none;padding:0;}

}





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

	#header{height:auto;padding-bottom:20px;}

	

	#header h1,.logo,.info{text-align:center;}

	

	.logo,.info{clear:both;width:100%;float:none;}

	

	.logo p{float:none;display:block;}

	.logo img{float:none;padding:0;}

	

	.box img{

	float:left;

	margin-right:5px;

	}

	

	.box h3{padding-top:0;}



  .alignleft,.alignright,img.alignleft,img.alignright{float:none;display:block;margin:0 auto 10px;}



}





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

	.grid{width:100%;margin:10px 0;}

	.box img{max-width:100px;}

	#mainBanner h2,#mainBanner p{font-size:80%;}

}



.product-wrap {

  width: 600px;        /* PC時の横幅 */

  margin: 0 auto;      /* 中央寄せ */

}



.product-list {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* PCは3列 */

  gap: 10px;

}



.product-item {

  position: relative;

  background: #fff;

  border: 1px solid #ddd;

  border-radius: 6px;

  padding: 10px;

  text-align: left;

  font-size: 14px;

}



.product-item img {

  width: 100%;

  height: auto;

  border-radius: 4px;

  margin-bottom: 8px;

}



.badge {

  position: absolute;

  top: 8px;

  left: 8px;

  background: #00b894;

  color: #fff;

  font-size: 11px;

  font-weight: bold;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.code {

  font-size: 13px;

  margin: 4px 0;

}



.name {

  font-size: 13px;

  font-weight: bold;

  color: #0056b3;

  margin: 6px 0;

}



.stock {

  font-size: 12px;

  margin: 4px 0;

}



.price {

  font-size: 14px;

  font-weight: bold;

  margin: 4px 0;

}



/* --- スマホ対応（600px以下は2列に） --- */

@media (max-width: 600px) {

  .product-wrap {

    width: 100%; /* スマホは横幅いっぱいに */

    padding: 0 10px; /* 画面端にくっつかないよう余白 */

  }

  .product-list {

    grid-template-columns: repeat(2, 1fr); /* 2列 */

  }

}



.product-page {

  display: flex;

  gap: 20px;

  max-width: 600px;   /* 全体幅600px */

  margin: 0 auto;

  font-family: sans-serif;

}



/* 左：商品画像 */

.product-images {

  flex: 1;

}



.main-image img {

  width: 100%;

  border: 1px solid #ddd;

  border-radius: 4px;

}



.thumb-list {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5px;

  margin-top: 8px;

}



.thumb-list img {

  width: 100%;

  border: 1px solid #ddd;

  border-radius: 4px;

  cursor: pointer;

}



/* 右：商品情報 */

.product-info {

  flex: 1;

  font-size: 14px;

}



.product-info h1 {

  font-size: 16px;

  margin: 5px 0 10px;

}



.price {

  color: #e74c3c;

  font-size: 18px;

  font-weight: bold;

  margin: 10px 0;

}



.cart {

  margin: 10px 0;

}



.cart input {

  width: 50px;

  padding: 4px;

  margin-right: 5px;

}



.btn-cart {

  background: #007bff;

  color: #fff;

  border: none;

  padding: 7px 12px;

  margin-right: 7px;

  cursor: pointer;

}



.btn-fav {

  background: #FFFFFF;

  border: 1px solid #ccc;

  padding: 7px 12px;

  cursor: pointer;

}



/* 商品スペック表 */

.spec {

  width: 100%;

  border-collapse: collapse;

  margin-top: 10px;

}



.spec th, .spec td {

  border: 1px solid #ddd;

  padding: 6px;

  font-size: 13px;

}



.spec th {

  width: 30%;

  background: #FFFFFF;

  text-align: left;

}



/* --- スマホ対応（600px以下は縦並び） --- */

@media (max-width: 600px) {

  .product-page {

    flex-direction: column;

  }

}

.breadcrumb {

  font-size: 14px;

  margin: 10px 0;

}



.breadcrumb ol {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

}



.breadcrumb li {

  margin-right: 5px;

}



.breadcrumb li+li::before {

  content: ">";

  margin-right: 5px;

  color: #666;

}



.breadcrumb a {

  text-decoration: none;

  color: #0073aa;

}



.breadcrumb a:hover {

  text-decoration: underline;

}



form {

      background: #fff;

      padding: 10px;

      border-radius: 12px;

    }

    label {

      display: block;

      margin: 12px 0 6px;

      font-weight: bold;

    }

    input[type="text"],

    input[type="email"],

    input[type="tell"],

　　 input[type="merchandise"],

　　　input[type="company"],

    input[type="title"],

    textarea,

    select {

      width: 100%;

      padding: 10px;

      border: 1px solid #ccc;

      border-radius: 6px;

      box-sizing: border-box;

    }

    textarea {

      min-height: 140px;

      resize: vertical;

    }

    button {

      margin-top: 16px;

      padding: 12px 20px;

      border: none;

      border-radius: 8px;

      background: #0078d7;

      color: #fff;

      font-size: 1rem;

      cursor: pointer;

    }

    button:hover {

      background: #005fa3;

    }

    .note {

      font-size: 0.7rem;

      color: #FD0004;

    }

    /* 横並び用 */

    .row {

      display: flex;

      gap: 12px;

    }

    .row .half {

      flex: 1;

    }

    @media (max-width: 600px) {

      .row {

        flex-direction: column;

      }

		mark.custom-mark {

    background-color: #fff176; /* 蛍光黄色 */

    color: #222;

    padding: 0 .15em;

    border-radius: 0.12em;

  }

		}