@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:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#ffffff;


/*
background-image:url(https://gigaplus.makeshop.jp/bjstore/images/top2.png);
*/

background-repeat:no-repeat;
background-attachment:fixed;
background-size:100%;
-webkit-text-size-adjust: none;
}


/* リンク設定
------------------------------------------------------------*/
a{color:#000000;text-decoration: underline dotted red;}
a:hover{color:#0000ff;}
a:active, a:focus{outline:0;}


/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:100%;
position:relative;
}

.inner{
margin:50px auto;
width:100%;
}

/* スマホサイズ専用 */
@media screen and (max-width: 768px) {
 .inner2{
margin:0px auto;
width:100%;
}
}

.inner3{
margin:50px auto;
width:100%;
background:#fff8dc;
}

/*************
/* ヘッダー
*************/
#header .inner{
margin-top:20px;
overflow:hidden;
border:1px solid #efede7;
}

* html #header{height:1%;}


/* 全体リセット */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* ヘッダー全体 */
.c-header {
  align-items: center;
  background-color: #eeeeee;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  width: 100%;
}

/* ハンバーガーメニューのボタン */
.c-hamburger-menu__button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 10px; /* ヘッダーの上部に配置 */
  right: 20px; /* 右端に配置 */
  z-index: 15;
}

.c-hamburger-menu__button span {
  display: block;
  height: 3px;
  width: 100%;
  background: #000; /* ボタンの色を白に設定 */
  border-radius: 2px;
  transition: 0.3s ease;
}

/* メニューリスト */
.c-hamburger-menu__list {
  display: none; /* 初期状態で非表示 */
  position: absolute;
  top: 60px; /* ボタンの下に配置 */
  right: 20px; /* ボタンに揃えて右端に配置 */
  background-color: #fff; /* メニュー背景色 */
  width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 4px; /* 角丸を追加 */
}

.c-hamburger-menu__list.active {
  display: flex; /* ボタン押下で表示 */
  flex-direction: column;
}

/* メニューアイテム */
.c-header__list-item {
  padding: 10px;
  text-align: left;
}

.c-header__list-item b {
  color: #333;
  font-size: 1rem;
  cursor: pointer;
}

.c-header__list-item:hover {
  background-color: #f4f4f4; /* ホバー時の背景色 */
}







/*************
/* ロゴ
*************/
#header .logo{
float:center;
padding:30px 0 0 0px;
}

.logo a{
font-size:20px;
font-weight:bold;
line-height:1;
color:#fff;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.logo span{
font-size:12px;
font-weight:normal;
}

#header h1{
font-size:11px;
color:#fff;
}


/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
margin:20px auto;
padding:0;
width:100%;
line-height:0;
}

#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
height:auto;
padding:5px;
background:#fff;
box-shadow:#ccc 0 0 0px;
}

.slogan{
position:absolute;
margin:5px;
height:auto;
bottom:0;
left:0;
padding:5px 10px;
line-height:1.4;
z-index:100;
color:#fff;
}

.slogan h2{
padding-bottom:5px;
font-size:20px;
}

.slogan h3{
font-size:14px;
}



/**************************
/* グリッド
**************************/
.gridWrapper{
padding-bottom:20px;
overflow: hidden;
}

.gridWrapper2{
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}
	
.grid{
float:left;
background:#fff;
border-top:5px solid #ffff00;
border-bottom:5px solid #ffff00;
box-shadow:0 0 3px #ddd;
}

.grid h3{
padding:10px 0;
font-weight:bold;
color:#000;
background:#f0e68c;
text-align:center;
}

.grid p{
padding:5px 10px;
}

.grid p.img{
padding:0;
}

p.readmore{
padding:10px;
}


/*************
メイン コンテンツ
*************/
section.content{
padding:0 10px 10px;
margin-bottom:20px;
overflow:hidden;
/* font-size:14px; */
background:#fff;
box-shadow:0 0 3px #ddd;
}

* html section.content{height:1%;}

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

h3.heading{
padding:5px 10px;
margin:0 -10px 20px;
font-size:16px;
color:#000;
border-top:5px solid #ffff00;
background:#f0e68c;
}

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

img.frame,#gallery img{
padding:3px;
box-shadow:0 0 3px #ddd;
}

#gallery .grid{
margin-bottom:10px;
box-shadow:none;
border:0;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}



/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:100%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px;
border:1px solid #000000;
}

table.table th{
text-align:center;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
color:#fff;
background:#ffffff;
border-left:#000000 5px solid
}

a{color:#000000;text-decoration:none;}
a:hover{color:#0000ff;}

table.table td{border-left:#000000 3px double}



/*************
サブ（フッター前）コンテンツ
*************/
#sub ul{padding:10px;
}

#sub li{
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dashed #ebebeb;

}

#sub li:last-child{
border:0;
margin-bottom:0;
}

#sub li a{display:block;}

#sub ul.list{padding-bottom:7px;}

#sub ul.list li{
clear:both;
margin-bottom:6px;
padding:5px 0;
overflow:hidden;
}

* html #sub ul.list li{height:1%;}

#sub ul.list li img{
float:left;
margin:0 10px 0 0;
}

#sub ul.list li{
font-size:12px;
line-height:1.35;
}


/* PC用 */
@media only screen and (min-width:768px){	
	#wrapper,.inner{
	width:100%;
	padding:0;
	}
	
	#wrapper{padding-bottom:20px;}
	
  nav div.panel{
	display:block !important;
	float:right;
	}

	a#menu{display:none;}

	nav#mainNav ul{
	float:right;
	overflow:hidden;
	}

	* html nav#mainNav ul{height:1%;}

	nav#mainNav ul li{
	float:left;
	text-align:center;
	border-right:1px solid #efede7;
	}

	nav#mainNav ul a{
	font-size:13px;
	display:block;
	padding:50px 15px;
	line-height:1.2;
	color:#4169e1;
	background:#fff;
	}
	
	nav#mainNav ul span{
	font-size:10px;
	}
	
	nav#mainNav ul li.active a,nav#mainNav ul a:hover{
	color:#fff;
	background:#ffff00;
	}
	
	/* グリッド全体 */
	.gridWrapper{
	width:100%;
	margin:0 0 0 -27px;

	}
	

	/* グリッド全体 */
	.gridWrapper2{
	width:100%;
	margin:0 0 0 -18px;
	}
	


	/* グリッド共通 ベース:トップページ4カラム */
	.grid{
	float:left;
	width:370px;
	margin-left:20px;
        
	}
	
	/* サブコンテンツ + フッター グリッド(3カラム) */
	#sub .grid, #footer .grid{width:495px;}
	#footer .grid{border:0;}
	
	.readmore{clear:both;}
}


/* モニター幅940px以下 */
@media only screen and (max-width:940px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
	#header .inner,#footer .inner{margin:0;padding:0;}
	
	#header .logo,#footer .logo{
	float:none;
	text-align:center;
	padding:10px 5px;
	}
	
	nav#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	background:#ffff00;
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	color:#fff;
	}

	nav#mainNav a#menu span{padding-left:10px;}
	nav#mainNav a.menu span:before{content: "→ ";}
	nav#mainNav a.menuOpen span:before{content: "↓ ";}

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

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dotted #1e1e1e;
	color:#fff;
	background:#f0e68c;
	}
	
	nav#mainNav ul li a span{padding-left:10px;}
	
	nav#mainNav ul li:first-child a{border-top:1px dotted #1e1e1e;}
	
	nav#mainNav ul li:last-child a{border:0;}
	
	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:#ffff00;}

	nav div.panel{float:none;}
	
	.grid{
	float:left;
	width:48%;
	margin:10px 2% 0 0;
	}
	
	.grid img{
	float:left;
	margin-right:5px;
	}
	
	#gallery{padding-left:1px;}
	
	#gallery .grid{
	width:23%;
	margin:0 2% 0 0;
	padding:0;
	}
	
	#gallery .grid img{
	float:none;
	margin:0;
	}
	
	#sub .grid{
	width:32%;
	margin:10px 1%;
	}
	
	#sub .grid:first-child{
	margin-left:0;
	}
	
	#sub .grid:last-child{
	margin-right:0;
	}
	
	#footer .grid, #footer .grid p{
	float:none;
	width:100%;
	text-align:center;
	border:0;
	}
	
	#footer .grid:last-child{padding-top:20px;}
}


/* iPad 縦 */
@media only screen and (max-width:768px){
  #header{padding-bottom:0;}	

	#header h1{text-align:center;}
	
	#header .logo{
	float:none;
	text-align:center;
	padding:10px 5px 20px;
	}
	
	#sub ul.list{padding:10px 10px 11px;}
	
	#sub ul.list li{
	padding-bottom:10px;
	margin-bottom:8px;
	}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#footer .grid p{text-align:center;}
	
	.grid img{
	float:none;
	margin:0 auto;
	width:100%;
	height:auto;
	}
	
	.grid p,#sub .grid li{text-align:left;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
	
	#sub ul.list li img{
	margin:0 5px 0 0;
	width:auto;
	height:auto;
	}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#mainBanner h2,#mainBanner h3{font-size:75%;}
	
	#sub .grid{
	float:none;
	width:100%;
	}
	
	#sub .grid h3{padding:10px 5px;}
	
	#sub ul.list{padding:10px;}
	
	#sub ul.list li{
	padding-bottom:3px;
	margin-bottom:3px;
	}
}

span.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: black;
}

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}


.btn2 {
 padding: 10px 100px;
 background: #fff;
 color: #000000;
 border-bottom: solid 5px gray;
 border-radius: 25px;
}
.btn2:active {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
 border-bottom: none;
}



.foot-wrap {
    background-color: #fff;
    color: #000;
    text-align: center;
}

.foot-wrap .menu-left, .menu-center, .menu-right {
    display: inline-block;
    width: 20%;
    margin: 30px;
}

.foot-wrap ul {
    list-style: none;
    padding: 0;
    line-height:40px;
}

.foot-wrap h3 {
    border-bottom: 3px solid #8b0000;
    padding: 20px;
}

.foot-wrap a {
    text-decoration: none;
    color: #000;
}

.foot-wrap a:hover {
    color: deeppink;
}

.foot-wrap .cmark {
    display: block;
    padding: 10px;
    border-top: 1px solid gray;
    width: 80%;
    margin: 0 auto;
    color: gray;
}

@media screen and (max-width: 900px) {
    .foot-wrap .menu-left, .menu-center, .menu-right {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
    .foot-wrap .cpr {
        display: inline;
    }
}


/* 上に戻るボタン */
.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #ffd700;
	text-decoration: none;
}

/* 全体設定 */
.css-carousel-slider7 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider7 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider7 .slide-wrap {
    width: 700%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider7 35s infinite;
    animation-delay: 2s;
}
.css-carousel-slider7 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main7 35s infinite;
    animation-delay: 2s;
}
.css-carousel-slider7 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider7 {
    0% { transform: translateX(0); }

    11.8% { transform: translateX(calc(1 / 7 * -100%)); }
    14.3% { transform: translateX(calc(1 / 7 * -100%)); }

    26.1% { transform: translateX(calc(2 / 7 * -100%)); }
    28.6% { transform: translateX(calc(2 / 7 * -100%)); }

    40.4% { transform: translateX(calc(3 / 7 * -100%)); }
    42.9% { transform: translateX(calc(3 / 7 * -100%)); }

    54.7% { transform: translateX(calc(4 / 7 * -100%)); }
    57.2% { transform: translateX(calc(4 / 7 * -100%)); }

    69% { transform: translateX(calc(5 / 7 * -100%)); }
    71.5% { transform: translateX(calc(5 / 7 * -100%)); }

    83.3% { transform: translateX(calc(6 / 7 * -100%)); }
    85.8% { transform: translateX(calc(6 / 7 * -100%)); }

    97.5% { transform: translateX(calc(7 / 7 * -100%)); }
    100% { transform: translateX(calc(7 / 7 * -100%)); }
}

@keyframes css-carousel-slider-main7 {
    0% { transform: translateX(100%); }
    85.8% { transform: translateX(100%); }
    97.5% { transform: translateX(0%);}
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .css-carousel-slider7 {
        height: auto; /* スマホ向け高さ調整 */
    }

    .css-carousel-slider7 img {
        object-fit: cover; /* スマホでも画像全体を表示 */
    }
}

.css-carousel-slider7 .swiper-pagination {
    position: absolute !important; /* 必ず位置を絶対配置に */
    top: 10px !important; /* スライダー上部の余白 */
    left: 400px !important; /* スライダー右上に配置 */
    background: rgba(0, 0, 0, 0.5) !important; /* 半透明背景 */
    padding: 5px 10px !important; /* 内側の余白 */
    border-radius: 5px !important; /* 角丸効果 */
    font-size: 14px !important; /* フォントサイズを指定 */
    color: #fff !important; /* 文字色を白 */
    z-index: 9999 !important; /* 常に最前面に */
    width: 80px !important; /* 必要最小限の幅 */
    height: 30px !important; /* 必要最小限の高さ */
    pointer-events: none !important; /* ユーザーのクリック無効化 */
}







.css-carousel-slider7 {
    position: relative; /* 子要素の基準を設定 */
    overflow: hidden;
    width: 100%;
}

.css-carousel-slider7 img {
    position: relative; /* 画像をページ番号の下に配置 */
    z-index: 1; /* 画像を1つ下げる */
}


.css-carousel-slider7 .swiper-wrapper {
    overflow: visible; /* ページネーションがスライダー内に収まるようにする */
}

.css-carousel-slider7 .swiper-slide {
    flex-shrink: 0;
    width: 100%;
}

.css-carousel-slider7 button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    z-index: 9999; /* 前面に表示 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.css-carousel-slider7 .carousel-prev {
    left: 10px;
}

.css-carousel-slider7 .carousel-next {
    right: 10px;
}








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

      商品レビュー

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

/* レビューの星 */
.reviewRate{
	display:inline-block;	
	vertical-align:middle;
	font-size:0;
	margin:8px 0 8px -1px;
}

.reviewRateStar{
	display:inline-block;
	width:21px;
	height:21px;
	text-indent:-9999em;
	cursor:pointer;
	background:no-repeat center center;
	background-size:21px 21px;
	margin:0 1px;
}

.starOn{
	background-image:url(/smartphone/images/star_on.png);	
}

.starOff{
	background-image:url(/smartphone/images/star_off.png);		
}

.starHalf{
	background-image:url(/smartphone/images/star_half.png);		
}


/* レビューを書く */
.reviewContent{
	text-align:left;
	margin:0 10px 24px;	
}

.reviewForm dl {
    margin-bottom: 10px;
}
.reviewForm dd {
    margin-bottom: 15px;
}
.reviewForm dt {
	margin-bottom:4px;
	font-weight:bold;
}
.reviewForm dl input {
    padding: 6px 0;
    width: 99%;
}
.reviewForm dl textarea {
    padding: 6px 0;
    width: 99%;
}

.reviewForm .reviewRateStar{
	width:43px;
	height:43px;
	background-size:43px 43px;	
}

.reviewContent .required {
	background: #C00;
	color: white;
	display: inline-block;
	font-size: 11px;
	margin-left: 8px;
	padding: 1px 3px;
	font-weight: normal;
}

.reviewItem{
    margin: 16px auto;
	width: 100%;
	box-sizing: border-box;
	padding:16px;
	background:#eee;
	box-sizing:border-box;
	display:table;
}

.reviewItemUnit{
	display:table-cell;
	vertical-align: middle;
	text-align:left;
}
.reviewItemName{
	padding-left:8px;
	font-size:13px;
}

.reviewItemImg{
	width:80px;	
}

.reviewItemImg img{
	border: solid 1px #ccc;
	box-sizing: border-box;
	max-width:100%;
	height:auto;
}

.errorTxt{
	color:#cc0000;
	margin-bottom:5px;
}

.captionTxt{
	color:#888;	
	text-align:right;
	font-size:12px;
}

.reviewText{
	border: 1px solid #808080;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
	height:120px;
}

.btnPost{
	background:#999;
	text-align:center;
	color:#fff !important;	
	width:100%;
	padding:15px 0;
	font-size:16px;
}

#review #back .btn{	
	width:auto;
	font-size:13px;
	padding:10px 30px;
	background:#eee;
}


.top-banner2 {
    display: flex; /* フレックスボックスを有効化 */
    flex-wrap: wrap; /* 子要素を折り返し可能に */
    width: 100%; /* 全体の幅を1000pxに設定 */
    margin: 0 auto; /* 親要素を中央揃え */
    justify-content: space-between; /* 子要素間の余白を均等に配置 */
}

.top-banner2 li {
    width: calc(100% / 3 - 10px); /* 画像の幅を3等分（余白を引いた分を調整） */
    padding: 0 30px; /* 各画像の左右に30pxの余白 */
    box-sizing: border-box; /* パディングを幅に含める */
}

.top-banner2 li img {
    width: 100%; /* liの幅に収まるように画像をリサイズ */
    height: auto; /* 縦横比を維持 */

}

.top-banner2 li p {
    font-size: 16px; /* テキストのサイズ */
    color: #000; /* テキストの色 */
    margin: 15px; /* テキスト周囲の余白をリセット */
}



#detailInfo img{
	width: 100%;
	height:auto;
}

/*submenu（２カラム時にsubで使っているメニュー）
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/
ul.submenu {
	list-style: none;
	padding: 0;margin: 0;
	margin-bottom: 20px;		/*メニューブロックの下に空けるスペース*/
	border-top: solid 1px #ccc;	/*上の線の幅、線種、色*/

}

/*メニュー１個あたりの設定*/
ul.submenu li {
	display: block;margin: 0;
	border-bottom: solid 1px #ccc;	/*下線の幅、線種、色*/
}
ul.submenu li a {
	text-decoration: none;display: block;
	padding: 5px 10px;	/*上下、左右へとる余白*/
background:#ffffff;
}

/*マウスオン時の背景色*/
ul.submenu li a:hover {
	background: #f0f0f0;
}

/*　product Detail */
div#main{ width:100% !important; text-align:center;
background:#fff;
} div#main p#item{ width:100% !important; margin:0 auto;} div#main #itemDetail, div#main #detailInfo, div#moreDetail { width:100% !important; margin:auto;} div#itemInfo {width: 100% !important;

}

table[width="100%"]{
width:100%;
}

#makebanner tbody tr td table tbody tr td{
width: 190px;
text-align:center;
}
#makebanner tbody tr td table tbody tr td.line{
max-width: 1px;
}

#makebanner table table td font b { color: #ff0000; }


/*-----------------------------------------------------------------
カテゴリーページデザイン　サムネイル（小）タイプ
-----------------------------------------------------------------*/
#M_categoryList{
width:100%;
margin-bottom:16px;
}
.M_innerList{
overflow:hidden;
_zoom:1;
border-bottom:1px solid #ccc;
background:#eee;   
}
.M_innerList li{
float:left;
width:20%;/* 商品数が5つなので100%÷5=20% */
}
.M_innerList li .M_innerBox{
border-right:1px dotted #ccc;
margin:8px auto;
}
.M_innerList li.lastChild .M_innerBox{
border-right:none;/* 一番右のボックスだけ右の罫線を消す */
}
.M_innerList li .M_cl_detail{
margin:8px;
margin-bottom:0;
}
.M_innerList .M_cl_name{
margin-bottom:4px; 
}

.M_cl_img{
	width: 100px;
	height: auto;
}


.M_innerList .M_cl_price{
text-align:right; 
}
.M_innerList .M_cl_imgWrap{
	height: 95px;
text-align:center;
}
.M_innerList .M_cl_taxPrice{
font-weight:bold;
color:#c30000;
font-size:11px;
}
.M_innerList .M_cl_content{
font-size:11px;
margin-top:4px;
} 


.M_cl_name a{
	color:#000000;
}


#detailInfo .c-spec-biiino table{
	width: 100%;
}

#M_categoryList p.M_cl_name{
	height: 70px;
}

#makebanner tbody tr td form font table tbody tr td table tbody tr td[width="90"]{
	width: 200px!important;
	display:inline-block;
}


/* ヘッダー全体のスタイル */
.c-header {
    display: flex;
    flex-direction: column; /* コンテンツを縦方向に配置 */
    align-items: center; /* 水平中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 10px;
    background-color: #f8f8f8; /* 背景色を設定 */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* ロゴ部分のスタイル */
.c-header__logo {
    font-size: 16px; /* ロゴの文字サイズを調整 */
    font-weight: bold;
    margin-bottom: 5px; /* 下に余白を追加 */
    color: #000; /* テキストカラーを設定 */
    text-decoration: none; /* リンクの下線を削除 */
}

/* リスト部分のスタイル */
.c-header__list {
    list-style: none; /* リストのマーカーを削除 */
    padding: 0;
    margin: 0;
}

.c-header__list-item {
    font-size: 14px; /* リスト項目の文字サイズを調整 */
    font-weight: normal;
    color: #666; /* テキストカラーを設定 */
    line-height: 1.5; /* 行間を調整 */
}

/* スマホサイズ用の設定 */
@media screen and (max-width: 768px) {
    .c-header {
        padding: 15px; /* スマホ向けに余白を調整 */
    }

    .c-header__logo {
        font-size: 14px; /* スマホ用に文字サイズを小さく調整 */
    }

    .c-header__list-item {
        font-size: 12px; /* スマホ用に文字サイズをさらに調整 */
    }
}


  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000;
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 32px;
    justify-content: center;
    width: 32px;
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000;
  display: block;
  height: 1px;
  transition: 0.3s;
  width: 20px;
}

@media screen and (max-width: 100%) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg);
    transform-origin: 0%;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg);
    transform-origin: 0%;
  }
}

.oval {
  margin       : auto;
  overflow     : hidden;
  position     : relative;
                              /* 図形のCSS */
  width        : 203px;
  height       : 120px;
  background   : linear-gradient(to bottom, #999999, #ffffff);
  border-radius: 50%;
}
.oval span {      /* 前面の文字エリア */
  position     : absolute;
  display      : inline-block;
  top          : 50%;
  left         : 50%;
  padding      : 3px;
  color        : #333;
  transform    : translate(-50%,-50%);
  font-size    : 12pt;
  border-radius: 5px;
}




.text-container {
    display: flex; /* フレックスボックスを有効化 */
    justify-content: space-between; /* 子要素を均等配置 */
    align-items: center; /* 垂直方向に中央揃え */
    width: 100%; /* 親要素の幅 */
    max-width: 100%; /* 必要に応じて最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 10px; /* 余白を設定 */
    box-sizing: border-box; /* パディングを幅に含める */
}

.text-item {
    flex: 1; /* 各要素を均等な幅にする */
    text-align: center; /* テキストを中央揃え */
    padding: 10px; /* 内側の余白 */
    margin: 0 5px; /* 各要素間の間隔 */

    box-sizing: border-box; /* パディングを幅に含める */
}


/* テキストコンテナの設定 */
.text-container2 {
    width: 100%; /* コンテナの幅を画面幅に合わせる */
    margin: 0 auto;
    box-sizing: border-box; /* パディングを含めて幅と高さを計算 */
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* スマホでは縦方向にレイアウト */
    justify-content: flex-start; /* テキストを左寄せ */
    align-items: flex-start;
    padding: 15px; /* テキストの内側余白をスマホ向けに調整 */
    overflow: auto;
}

/* キャンペーンの文字サイズを大きく */
.campaign-text span {
    font-size: 24px; /* スマホ向けに文字サイズを少し小さく調整 */
    font-weight: bold;
    color: #000;
}

/* Campaign部分のスタイル */
.campaign-text {
    font-size: 16px; /* スマホ向けに標準文字サイズを調整 */
    color: #666;
    line-height: 1.4; /* 行間を調整 */
}

/* スマホサイズ用の設定 */
@media screen and (max-width: 768px) {
    .text-container2 {
        padding: 10px; /* スマホ向けに余白をさらに減らす */
    }

    .campaign-text span {
        font-size: 20px; /* スマホ向けの大文字サイズ */
    }

    .campaign-text {
        font-size: 14px; /* スマホ向けの標準文字サイズ */
    }
}


/* 親要素設定 */
.top-banner3 {
    display: flex; /* 横並び */
    flex-wrap: wrap; /* 幅が足りない場合折り返し */
    gap: 20px; /* 各アイテム間の余白 */
    justify-content: space-between; /* 均等に配置 */
    padding: 10px;
    list-style: none; /* リストマーカーを非表示 */
    margin: 0;
}

/* 各リストアイテム設定 */
.top-banner3 li {
    flex: 1 1 calc(33.333% - 20px); /* 横幅を3列で均等に設定 */
    display: flex;
    flex-direction: column; /* 各アイテムを縦配置 */
    align-items: center; /* 中央揃え */
    text-align: center;
    background: #f9f9f9; /* 背景色 */
    border-radius: 8px; /* 角丸 */
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影 */
    box-sizing: border-box; /* パディング込みでサイズ計算 */
}

/* 画像コンテナ設定 */
.image-container2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/* メイン画像の設定 */
.image-container2 img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 小さいアイコンの設定 */
.image-container2 .small-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: auto;
    border-radius: 50%; /* 丸型アイコン */
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* テキストのスタイル */
.top-banner3 li p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* スマホ用レスポンシブ設定 */
@media screen and (max-width: 100%) {
    .top-banner3 li {
        flex: 1 1 calc(33.333% - 10px); /* スマホでも3列表示を維持 */
        padding: 10px; /* 内側の余白を調整 */
    }

    .image-container2 .small-icon {
        width: 30px; /* 小さなアイコンのサイズを調整 */
    }

    .top-banner3 li p {
        font-size: 12px; /* テキストサイズを小さく */
    }
}

@media screen and (max-width: 480px) {
    .top-banner3 li {
        flex: 1 1 calc(33.333% - 10px); /* スマホでも3列表示を維持 */
    }
}








.top-banner4 {
    display: flex; /* フレックスボックスを有効化 */
    flex-wrap: wrap; /* 子要素を折り返し可能に */
    width: 100%; /* 全体の幅を1200pxに設定 */
    margin: 0 auto; /* 親要素を中央揃え */
    justify-content: space-between; /* 子要素間の余白を均等に配置 */
    gap: 30px; /* 子要素間の間隔 */
}

.top-banner4 li {
    width: calc(33.33% - 20px); /* 3等分（余白を引いた分を調整） */
    box-sizing: border-box; /* パディングを幅に含める */
    text-align: center; /* テキストを中央揃え */
}

.top-banner4 li img {
    width: 380px; /* 画像の幅を380pxに固定 */
    height: 200px; /* 画像の高さを200pxに固定 */
    object-fit: cover; /* 縦横比を崩さずに枠内に収める */

    margin-bottom: 10px; /* 画像とテキスト間の余白 */
}

.top-banner4 li p {
    font-size: 16px; /* テキストのサイズ */
    color: #000; /* テキストの色 */
    line-height: 0.8; /* 行間の調整 */
    margin: 0; /* テキスト周囲の余白をリセット */
}


/* 全体の設定 */
.banner-grid {
    display: flex; /* フレックスボックスを有効化 */
    flex-wrap: wrap; /* 子要素を折り返し可能に */
    justify-content: space-between; /* 子要素間の余白を均等に配置 */
    align-items: center; /* 子要素を縦方向に中央揃え */
    width: 100%; /* 全体の幅を指定 */
    margin: 0 auto; /* コンテンツを中央揃え */
    padding: 2px 0; /* 上下の余白をさらに縮小 */
    list-style: none; /* リストスタイルを無効化 */
    gap: 10px; /* バナー間の余白 */
    box-sizing: border-box;
}

/* バナー個々のスタイル */
.banner-grid li {
    width: 500px; /* バナーの幅 */
    height: 80px; /* バナーの高さを縮小 */
    display: flex; /* テキストと画像の配置を簡単に制御 */
    flex-direction: column; /* 垂直方向に要素を配置 */
    justify-content: center; /* 垂直方向に中央揃え */
    align-items: center; /* 水平方向に中央揃え */
    box-sizing: border-box; /* パディングを含めて幅と高さを計算 */
    text-align: center; /* テキストを中央揃え */
}

/* 画像のスタイル */
.banner-grid li img {
    width: 100%; /* liの幅に合わせる */
    height: 100%; /* liの高さに合わせる */
    object-fit: cover; /* 枠内に画像を収める */
    margin-bottom: 2px; /* 画像とテキスト間の余白を縮小 */
}

/* テキストのスタイル */
.banner-grid li p {
    font-size: 16px; /* テキストのサイズ */
    color: #333; /* テキストの色 */
    margin: 0; /* 余白をリセット */
    line-height: 1.3; /* 行間を調整 */
}


/* 親要素の設定 */
.image-grid {
    display: flex; /* フレックスボックスを使用 */
    justify-content: space-between; /* 子要素の間隔を均等に配置 */
    align-items: center; /* 子要素を縦方向に中央揃え */
    width: 100%; /* 親要素の幅を100％に固定 */
    margin: 0 auto; /* 親要素を中央揃え */
    padding: 10px 0; /* 上下に余白を追加 */
    box-sizing: border-box; /* パディングを幅に含める */

}

/* 子要素の設定 */
.image-item {
    width: calc(100% / 5 - 16px); /* 子要素を5等分し、余白を考慮 */
    height: 0; /* 高さを幅に揃えるため初期化 */
    padding-bottom: 100%; /* 正方形を維持するための比率設定 */
    position: relative; /* 子要素内で画像を絶対位置にする */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* 画像の設定 */
.image-item img {
    position: absolute; /* 親要素内で絶対位置 */
    top: 0;
    left: 0;
    width: 100%; /* 子要素に収まるよう幅を指定 */
    height: 100%; /* 子要素に収まるよう高さを指定 */
    object-fit: cover; /* 正方形内で画像を中央にトリミング */
}


/* テキストコンテナの設定 */
.text-container3 {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 上下位置を中央揃え */
    font-family: Arial, sans-serif; /* フォント指定 */
}

/* 結合されたタイトルのスタイル */
.text-container3 .combined-title {
    font-size: 20px; /* 基本フォントサイズを設定 */
    font-weight: bold; /* 太字 */
    color: #000; /* 文字色 */
    border-bottom: 2px solid #000; /* アンダーバーを適用 */
    padding-bottom: 10px; /* アンダーバーとの距離を調整 */
    white-space: nowrap; /* テキストの折り返しを防止 */
}

/* スタイルのカスタマイズ: サブタイトル部分を縮小 */
.text-container3 .combined-title::after {
    content: " /information"; /* サブタイトルを挿入 */
    font-size: 16px; /* サブタイトルのフォントサイズ */
    font-weight: normal; /* サブタイトルを通常の太さ */
    color: #666; /* サブタイトルの色 */
}


/* 共通スタイル */
.image-container {
    width: 100%; /* 幅を親要素に合わせる */
    text-align: center; /* 中央揃え */
    margin-bottom: 10px; /* 下に余白 */
}

.main-image {
    width: 100%; /* スマホサイズに対応するよう画像を幅100%に */
    height: auto; /* アスペクト比を維持 */
}

.text-container10 {
    text-align: center; /* テキストを中央揃え */
    padding: 10px; /* 内側余白を追加 */
}

.text {
    font-size: 16px; /* テキストサイズを調整 */
    margin-bottom: 10px; /* テキスト下に余白を追加 */
    color: #333; /* テキストカラーを設定 */
}

/* 検索エリアのスタイル */
.search-area {
    display: flex;
    flex-direction: column; /* 要素を縦方向に並べる */
    align-items: center; /* 要素を中央揃え */
    gap: 10px; /* 各要素の間隔を設定 */
}

[TOP_SEARCH_INPUT] {
    width: 90%; /* 入力フィールドの幅を調整 */
    padding: 10px; /* 内側余白 */
    font-size: 14px; /* フォントサイズを調整 */
}

[TOP_SEARCH_BUTTON] {
    padding: 10px 20px; /* ボタンのパディングを設定 */
    font-size: 14px; /* フォントサイズを調整 */
    background-color: #007BFF; /* ボタン背景色 */
    color: #fff; /* テキスト色 */
    border: none; /* ボーダーを削除 */
    cursor: pointer; /* ホバー時にカーソルを変更 */
}

/* スマホ向けスタイル */
@media screen and (max-width: 768px) {
    .text {
        font-size: 14px; /* スマホ用に文字サイズを小さく */
    }

    [TOP_SEARCH_INPUT] {
        font-size: 12px; /* 入力フィールドのフォントサイズを調整 */
    }

    [TOP_SEARCH_BUTTON] {
        font-size: 12px; /* ボタンのフォントサイズを調整 */
    }
}



/* フッター全体 */
.footer {
  background-color: #eeeeee; /* 背景色 */
  color: #000; /* 文字色 */
  padding: 40px 0; /* 上下の余白 */
  max-width: 100%; /* 最大幅1440px */
  margin: 0 auto; /* フッターを中央揃え */
  text-align: left; /* 全体のテキストを中央揃え */
}

/* フッターコンテナ */
.footer-container {
  display: flex; /* Flexboxで2カラム */
  justify-content: space-between; /* カラム間のスペースを均等に */
  gap: 20px; /* カラム間の余白 */
  padding: 0 20px; /* 左右の余白 */
  box-sizing: border-box;
}

/* カラムスタイル */
.footer-column {
  flex: 1; /* カラム幅を均等に */
  padding: 0 20px; /* 内側余白 */
  box-sizing: border-box; /* パディングを含めた幅計算 */
}

/* 左カラム */
.left-column {
  text-align: left; /* テキストを中央揃え */
}

/* 右カラム */
.right-column {
  text-align: left; /* テキストを中央揃え */
}

/* 見出しスタイル */
.footer h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

/* テキストスタイル */
.footer p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.6; /* 行間調整 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 100%) {
  .footer-container {
    flex-direction: column; /* 縦並びにする */
    text-align: left; /* テキストを中央揃え */
  }

  .footer-column {
    text-align: center; /* カラム内も中央揃え */
    margin-bottom: 20px; /* 下の余白 */
  }
}

/* 背景を白にする */
.footer-column2 {
  background-color: #fff; /* 背景色を白に */
  color: #000; /* 文字色を黒にする */
  padding: 20px; /* 内側余白 */
  border-radius: 5px; /* 角を少し丸くする（オプション） */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加（オプション） */
    text-align: center; /* テキストを中央揃え */
}

/* hrタグのスタイル */
hr {
  border: none; /* デフォルトのボーダーを消す */
  height: 1px; /* 高さを指定 */
  background-color: #000; /* 線の色 */
  margin: 10px 0; /* 上下余白 */
}


/* 緑色の楕円スタイル */
.highlight-form {
  display: inline-block; /* 楕円形を適用するための設定 */
  background-color: #fcc800; /* オレンジ色 */
  color: #fff; /* 文字色を白に */
  padding: 5px 80px; /* 内側余白（上下、左右） */
  border-radius: 80px; /* 丸みをつけて楕円にする */
  font-weight: bold; /* 文字を太字に */
  text-align: center; /* テキストを中央揃え */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影をつける（オプション） */
}


/* 電話番号のスタイル */
.highlight-phone {
  color: #000000; /* 緑色 */
  font-size: 24px; /* フォントサイズを大きく */
  font-weight: bold; /* 太字にする */
  display: inline-block; /* インライン要素をブロック要素風に */
  margin-top: 10px; /* 上の余白 */
}

.search-container {
  display: flex; /* 横並びにする */
  justify-content: space-between; /* 均等配置 */
  align-items: center; /* 縦方向の中央揃え */
  padding: 10px 0; /* 上下の余白を設定 */
  background-color: #f8f8f8; /* 背景色 */
  flex-wrap: nowrap; /* 折り返し防止 */
  width: 100%; /* 横幅を100%に */
  max-width: 500px; /* 必要に応じて最大幅を設定 */
  margin: 0 auto; /* 中央揃え */
}

.search-container a {
  flex: 1; /* 画像を均等配置 */
  text-align: center; /* 中央揃え */
}

.search-icon {
  width: 50px; /* アイコンの幅 */
  height: auto; /* 縦横比維持 */
  display: inline-block; /* インライン要素として扱う */
}

/* スマホ用の調整 */
@media screen and (max-width: 600px) {
  .search-container {
    justify-content: space-evenly; /* 均等配置 */
  }

  .search-container a {
    flex: 1; /* 均等幅 */
  }

  .search-icon {
    width: 40px; /* スマホ用に小さく */
  }
}




/* テキストのスタイル */
.icon-wrapper p {
    font-size: 12px; /* フォントサイズを調整 */
    color: #333; /* テキストカラー */
    margin: 0;
}

/* クレジットカード画像のスタイル */
.payment-card {
  max-width: 50%; /* カラム内の幅に収める */
  height: auto; /* アスペクト比を保持 */
  display: block; /* ブロック要素として表示 */
  margin: 10px 0; /* 上下の余白を追加 */
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
}

/* 小さめの画像スタイル */
.small-image {
  width: 100%; /* 画像の幅 */
  height: auto; /* アスペクト比を保持して高さを自動調整 */
  max-width: 100%; /* 親要素より大きくならないように制限 */
}

/* 基本スタイルを整える */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* グローバル設定 */
img {
  max-width: 100%;
  height: auto; /* 画像が親要素を超えないようにする */
}

.text-container,
.text-container2 {
  display: flex;
  flex-wrap: wrap; /* スマホで折り返し可能に */
  justify-content: space-between;
}

/* カートのアイコン配置調整 */
.cart-icon-wrapper {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 5px 8px;
  font-size: 12px;
}

/* フッターデザイン */
.footer {
  background-color: #f8f8f8;
  padding: 20px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap; /* スマホでの折り返し */
  justify-content: space-between;
}

.footer-column {
  flex: 1 1 calc(50% - 10px); /* スマホでは幅を50%に */
  margin: 10px 0;
}

.footer-column2 {
  margin-top: 20px;
}

/* メディアクエリ（スマホ用） */
@media (max-width: 768px) {
  .text-container .text-item,
  .text-container2 .campaign-text,
  .footer-column {
    flex: 1 1 100%; /* スマホでは100%幅 */
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
  }

  .c-header__list {
    text-align: center;
    font-size: 14px;
  }

  .image-container,
  .image-grid {
    padding: 0px;
  }

  .banner-grid li {
    flex: 1 1 calc(50% - 10px); /* スマホで2列表示 */
    margin-bottom: 10px;
  }

  .footer-container {
    flex-direction: column; /* 縦に並べる */
    text-align: center;
  }

  .cart-count {
    font-size: 10px; /* カウントのサイズを縮小 */
  }
}

/* スマホ向け調整 */
@media screen and (max-width: 768px) {
    .search-container {
        flex-direction: row; /* 横方向に均等配置 */
        justify-content: space-between; /* 均等配置 */
    }

    .icon-wrapper {
        width: 25%; /* 各アイコンを均等幅 */
    }

    .search-icon {
        width: 80px; /* スマホ用にアイコンサイズを縮小 */
        height: 80px;
    }

    .icon-wrapper p {
        font-size: 10px; /* テキストサイズを調整 */
    }
}

/* 全体の設定 */
.banner-grid2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    gap: 20px;
    box-sizing: border-box;
}

/* バナー個々のスタイル */
.banner-grid2 li {
    flex: 0 1 calc(50% - 20px);
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 子要素を左揃え */
    box-sizing: border-box;

    margin: 30px 5px;
}

/* 画像のスタイル */
.banner-grid2 li img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
    border: solid 0px #ccc;
}

/* テキストのスタイル */
.banner-grid2 li p {
    font-size: 20px;
    color: #333;
    margin: 0;
    line-height: 1.5;
    text-align: left !important; /* 優先度を強制 */
}

.c-header5__links {
    font-size: 14px; /* 文字サイズ */
    text-align: center; /* 中央揃え */
    background-color: #f5f5f5; /* 薄いグレーの背景色 */
    padding: 10px 0; /* 上下に余白を追加 */
}

.c-header5__link {
    color: #333; /* リンクの文字色 */
    text-decoration: none; /* 下線を非表示 */
    margin: 0 5px; /* リンク間の余白 */
}

.c-header5__link:hover {
    color: #007bff; /* ホバー時の色 */
    text-decoration: underline; /* ホバー時に下線を表示 */
}

.full-screen-section {
    background-color: #f5f5f5; /* 薄いグレーの背景色 */
    width: 100%; /* 横幅を画面全体に広げる */
    height: auto; /* 高さを画面全体に広げる */
    display: flex; /* コンテンツを中央揃えする場合に使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    margin: 0; /* 外側の余白を削除 */
    padding: 10px; /* 内側の余白を10px */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.full-screen-section2 {
    background-color: #f5f5f5; /* 薄いグレーの背景色 */
    width: 100%; /* 横幅を画面全体に広げる */
    height: auto; /* 高さを画面全体に広げる */
    display: flex; /* コンテンツを中央揃えする場合に使用 */
    justify-content: right; /* 水平方向の右揃え */
    align-items: center; /* 垂直方向の中央揃え */
    margin: 0; /* 外側の余白を削除 */
    padding: 30px; /* 内側の余白を30px */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* フッター全体のスタイル */
.c-footer5 {
    max-width: 1440px; /* フッターの最大幅を1440pxに設定 */
    width: 100%; /* 画面幅いっぱいに広げる */
    margin: 0 auto; /* フッターを中央揃え */
    background-color: #f5f5f5; /* 薄いグレーの背景色（変更可） */
    padding: 20px 0; /* 上下の余白を追加 */
    text-align: right; /* テキストを右寄せ */
}

.c-footer5__copy {
    font-size: 14px; /* 文字サイズ */
    color: #333; /* 文字色 */
    margin-right: 20px; /* 右側に余白を追加 */
}


.inner5 {
    display: flex; /* フレックスボックスを有効化 */
    flex-direction: column; /* 縦方向に配置 */
    align-items: center; /* 水平方向に中央揃え */
    justify-content: center; /* 垂直方向に中央揃え（必要に応じて調整） */
    text-align: center; /* テキストを中央揃え */
    width: 100%; /* 幅を画面いっぱいに */
    margin: 30px auto; /* 上下50pxの余白を追加し、中央揃え */
    padding: 10px 0; /* さらに余白を調整 */
}

.inner5 img {
    max-width: 100%; /* 画像が大きすぎないように調整 */
    height: auto; /* 高さを自動調整 */
    display: block; /* 余計な余白をなくす */
    margin: 0px 0; /* 画像の上下に余白を追加 */
}


.slogan {
    margin-top: 50px; /* 画像とスローガンの間に余白を追加（必要に応じて調整） */
}

.slogan h2 {
    font-size: 24px; /* 見出しのサイズ調整（必要に応じて変更） */
    color: #333; /* 文字色 */
    margin: 0; /* 余白をリセット */
}

.content2 {
    width: 1200px; /* 幅を1220pxに指定 */
    max-width: 100%; /* 画面が小さい場合は縮小 */
    margin: 0 auto; /* コンテンツを中央揃え */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

article {
    border: 2px solid #333; /* 2pxの黒系の枠線を追加 */
    padding: 20px; /* 内側の余白を追加 */
    margin: 10px 0; /* 上下に余白を追加 */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    background-color: #fff; /* 背景色を白に（オプション） */
}

.heading2 {
    background-color: #FFDE5A; /* テキストの色を指定 */
    width: 1200px; /* 幅を1200pxに */
    max-width: 100%; /* 画面が小さい場合は縮小 */
    margin: 0 auto; /* コンテンツを中央揃え */
    text-align: left; /* 中央揃え（オプション） */
    font-size: 14px; /* フォントサイズを調整（任意） */
}

#wrapper {
    width: 1200px; /* 全体の幅を1200pxに固定 */
    max-width: 100%; /* 画面が小さい場合に縮小 */
    margin: 0 auto; /* 中央揃え */
}

#main {
    width: 100%; /* `wrapper` に合わせる */
}

.content {
    width: 100%; /* `wrapper` に合わせる */
    padding: 20px; /* 内側の余白 */
    box-sizing: border-box; /* パディングを含めた幅 */
}

.slogan {
    width: 1200px; /* 幅を1200pxに固定 */
    max-width: 100%; /* 画面が小さい場合に対応 */
    margin: 0 auto; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 20px 0; /* 上下に余白を追加 */
    box-sizing: border-box; /* パディングを含めた幅にする */
}

.content2 {
    border: none; /* 外枠を削除 */
    background: none; /* 背景色がある場合は削除 */
    box-shadow: none; /* 影がある場合は削除 */
    padding: 0; /* 余白をリセット（必要に応じて調整） */
}

.table2 {
    width: 100%;
    border-collapse: collapse; /* セルの枠線を統一 */
    color: #000; /* テーブル内のテキストを黒に */
}

.table2 th, 
.table2 td {
    border: 2px solid #000; /* セルの枠線を黒に統一 */
    padding: 10px; /* セルの余白を確保 */
    text-align: left; /* テキストを左寄せ（または center） */
    color: #000; /* th と td のテキスト色を黒に */
}

.table2 th {
    background-color: #f2f2f2; /* th の背景色を薄いグレーに */
    font-weight: bold; /* th のフォントを太字に */
    text-align: center; /* テキストを中央揃え */
}

/* フッター全体を画面幅いっぱいに広げる */
.footer {
  width: 100%;
  background-color: #f8f8f8;
  padding: 20px 0;
  box-sizing: border-box; /* 余白を含めたサイズ計算 */
}

/* フッター内のコンテナ */
.footer-container {
  width: 100%; /* 画面幅いっぱいに広げる */
  max-width: none; /* 最大幅の制限をなくす */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 左右に配置 */
}

/* フッターのカラム（支払い方法や配送方法の部分） */
.footer-column {
  width: 100%; /* 幅を100%に設定 */
  margin: 10px 0;
  text-align: center; /* スマホで中央揃え */
}

/* お問い合わせセクション */
.footer-column2 {
  width: 100%;
  margin: 20px auto;
  padding: 5px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* スマホ（幅600px以下）の調整 */
@media screen and (max-width: 600px) {
  .footer-container {
    flex-direction: column; /* スマホでは縦並び */
    width: 100%;
  }

  .footer-column {
    width: 100%;
  }

  .footer-column2 {
    width: 100%;
    padding: 30px;
  }
}

/* 問い合わせフォームのスタイル */
.highlight-form {
  display: inline-block; /* インライン要素でもボタンのように */
  padding: 10px 15px; /* 内側の余白を設定 */
  font-size: 16px; /* フォントサイズを適切に調整 */
  font-weight: bold; /* 文字を強調 */
  color: #ffffff; /* 文字色を白に */
  background-color: #fcc800; /* 背景色を青系に */
  text-decoration: none; /* リンクの下線を消す */
  border-radius: 5px; /* 角を丸くする */
  text-align: center; /* テキストを中央揃え */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のエフェクト（PC用） */
.highlight-form:hover {
  background-color: #0056b3;
}

/* スマホ用の調整 */
@media screen and (max-width: 600px) {
  .highlight-form {
    display: block; /* スマホではブロック要素にして横幅を広げる */
    width: 98%; /* 画面幅の80%にする */
    margin: 10px auto; /* 中央配置 */
    font-size: 18px; /* スマホでは少し大きめに */
    padding: 12px 20px; /* 内側の余白を調整 */
  }
}