@charset utf-8;
/* mystyle.css*/

.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}

* html .clearfix {height: 1px;/*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

a {-webkit-text-shadow: none;text-shadow: none;}
a img:hover {opacity: 0.5 ;}

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	background-repeat: repeat;
	line-height: 1.2em;
	color: #555;
	/*-webkit-text-shadow: 0 1px 0 #FFF;
	text-shadow: 0 1px 0 #FFF;*/
	padding-top:70px;
	font-size:1.45em;}
@media (max-width: 768px) {
	body {
    padding-top:50px;
}}
@media (max-width: 480px) {
	body {
}}





/*------------------------------------------------------------
  コンテンツ
------------------------------------------------------------*/

div.content {width:100%;}
@media (max-width: 480px) {
div.content {padding:10px;
}}


/*------------------------------------------------------------
  FLEX
------------------------------------------------------------*/
.flexkihon{display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
  }


/*------------------------------------------------------------
  カラム回避
------------------------------------------------------------*/

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}



/*------------------------------------------------------------
  画像拡大
------------------------------------------------------------*/

#imagelightbox
{
    position: fixed;
    z-index: 9999;
}


/*------------------------------------------------------------
  帯
------------------------------------------------------------*/

.obi_item_a h3{
  font-size:1.45em;
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(#6fba2c,#4c9807 ) !important;
  color:#FFFFFF;
  border-radius: 10px;

}

.obi_item_b h3{
  font-size:1.45em;
  padding: 10px;
  margin-bottom: 10px;
   background: linear-gradient(#f9bd0b,#e6ae06 ) !important;
  color:#FFFFFF;
  border-radius: 10px;

}

.obi_item_c h3{
  font-size:1.45em;
  padding: 10px 20px;
  margin-bottom: 20px;
   background: linear-gradient(#f6f4f4,#f6f4f4) !important;
  color:#666666;
  border-radius: 10px;

}

h4.subtit{
  font-size:1.45em;
  padding-bottom:10px;
  border-bottom: solid #2A2929 2px;

}


/*------------------------------------------------------------
  リンクの少し上
------------------------------------------------------------*/

.anchor-offset {
  position: absolute;
  height: 80px;
  top: -80px;
  visibility: hidden;
}


/*------------------------------------------------------------
  text調整
------------------------------------------------------------*/

.center {text-align:center;}
.left {text-align: left;}
.right {text-align: right;}


.f-left {float: left;}
.f-right {float: right;}
.f-initial {float: initial;}
.f-unset {float: unset;}



/*------------------------------------------------------------
 font調整
------------------------------------------------------------*/

.strong {font-weight:bold;}
.normal {font-style:normal;}


/*------------------------------------------------------------
 カラー
------------------------------------------------------------*/

/**/
.color_greenz_a {color:#6fba2c !important;}
.color_greenz_b {color: #396 !important;}
.color_greenz_c {color: #4c9807 !important;}
.color_red_a {color: #F60 !important;}
.color_red_b {color: #F9090D !important;}
.color_blue_a {color: #09F !important;}
.color_org_a {color: #f9bd0b !important;}
.color_org_b {color: #fd9604 !important;}
.color_white {color: #FFF !important;}
.color_grey {color: #4d4d4d !important;}
.color_ye {color: #fff000 !important;}
.color_amber {color: #b16228 !important;}


/*商品カラー*/
.color_yu {color: #6FBA2C !important;}
.color_kan {color: #796BAF !important;}
.color_sai {color: #E95383 !important;}
.color_sou {color: #ED6C00 !important;}


/* 背景カラー */
.bk-clr-black {background-color: #000 !important;}
.bk-clr-white {background-color: #FFF !important;}
.bk-clr-red {background-color: #F60 !important;}
.bk-clr-green {background-color: #6fba2c !important;}
.bk-clr-blue {background-color: #09F !important;}
.bk-clr-orange {background-color: #f9bd0b !important;}
.bk-clr-y-orange2 {background-color: #fffbbe !important;}
.bk-clr-grey {background-color: #999999 !important;}
.bk-clr-yellow {background-color: #fdfee2 !important;}
.bk-clr-cream {background-color: #f9fbdd !important;}


/*商品背景カラー*/
.bk-clr-yu {background-color: #ecf4db !important;}
.bk-clr-kan {background-color: #eae8f3 !important;}
.bk-clr-sai {background-color: #fcedee !important;}
.bk-clr-sou {background-color: #fce4cf !important;}



/*------------------------------------------------------------
 サイズ調整
------------------------------------------------------------*/

/*フォントサイズ*/
.font_small {font-size:0.65em !important;}
.font_small_a {font-size:0.75em !important;}
.font_a {font-size:0.85em !important;}
.font_b {font-size:1em !important;}
.font_c {font-size:1.25em !important;}
.font_d {font-size:1.35em !important;}
.font_e {font-size:1.85em !important;}


/*ラインハイト*/
.line_h_085 {line-height:0.85em !important;}
.line_h_1 {line-height:1em !important;}
.line_h_125 {line-height:1.25em !important;}
.line_h_145 {line-height:1.45em !important;}
.line_h_165 {line-height:1.65em !important;}
.line_h_175 {line-height:1.75em !important;}
.line_h_185 {line-height:1.85em !important;}
.line_h_195 {line-height:1.85em !important;}
.line_h_2 {line-height:2em !important;}


/*マージン*/
.mg0 {margin:0 !important;}
.mg10 {margin:10px !important;}
.mg15 {margin:15px !important;}
.mg20 {margin:20px !important;}
.mg25 {margin:25px !important;}
.mg30 {margin:30px !important;}
.mg0 {margin:0 !important;}
.mg10t {margin-top:10px !important;}
.mg20t {margin-top:20px !important;}
.mg30t {margin-top:30px !important;}
.mg10b {margin-bottom:10px !important;}
.mg15b {margin-bottom:15px !important;}
.mg20b {margin-bottom:20px !important;}
.mg30b {margin-bottom:30px !important;}
.mg0r {margin-right:0 !important;}
.mg10r {margin-right:10px !important;}
.mg15r {margin-right:15px !important;}
.mg20r {margin-right:20px !important;}
.mg0l {margin-left:0 !important;}
.mg10l {margin-left:10px !important;}
.mg15l {margin-left:15px !important;}
.mg20l {margin-left:20px !important;}

.mrlauto{margin-left:auto!important;margin-right:auto!important;}
.mrlauto96{margin:0 2%!important;}


/* マージン */
.mt-10 { margin-top: 10px!important;; }
.mt-20 { margin-top: 20px!important;; }
.mt-30 { margin-top: 30px!important;; }
.mt-40 { margin-top: 40px!important;; }
.mt-50 { margin-top: 50px!important;; }

.mr-10 { margin-right: 10px!important;; }
.mr-20 { margin-right: 20px!important;; }
.mr-30 { margin-right: 30px!important;; }
.mr-40 { margin-right: 40px!important;; }
.mr-50 { margin-right: 50px!important;; }

.mb-0 { margin-bottom: 0px!important;; }
.mb-10 { margin-bottom: 10px!important;; }
.mb-20 { margin-bottom: 20px!important;; }
.mb-30 { margin-bottom: 30px!important;; }
.mb-40 { margin-bottom: 40px!important;; }
.mb-50 { margin-bottom: 50px!important;; }

.ml-10 { margin-left: 10px!important;; }
.ml-20 { margin-left: 20px!important;; }
.ml-30 { margin-left: 30px!important;; }
.ml-40 { margin-left: 40px!important;; }
.ml-50 { margin-left: 50px!important;; }

/* パディング */
.pt-10 { padding-top: 10px!important;; }
.pt-20 { padding-top: 20px!important;; }
.pt-30 { padding-top: 30px!important;; }
.pt-40 { padding-top: 40px!important;; }
.pt-50 { padding-top: 50px!important;; }

.pr-10 { padding-right: 10px!important;; }
.pr-20 { padding-right: 20px!important;; }
.pr-30 { padding-right: 30px!important;; }
.pr-40 { padding-right: 40px!important;; }
.pr-50 { padding-right: 50px!important;; }

.pb-10 { padding-bottom: 10px!important;; }
.pb-20 { padding-bottom: 20px!important;; }
.pb-30 { padding-bottom: 30px!important;; }
.pb-40 { padding-bottom: 40px!important;; }
.pb-50 { padding-bottom: 50px!important;; }

.pl-10 { padding-left: 10px!important;; }
.pl-20 { padding-left: 20px!important; }
.pl-30 { padding-left: 30px!important;; }
.pl-40 { padding-left: 40px!important;; }
.pl-50 { padding-left: 50px!important;; }



/*パディング*/
.pd0 {padding:0 !important;}
.pd10 {padding:10px !important;}
.pd20 {padding:20px !important;}
.pd30 {padding:30px !important;}
.pdt0 {padding-top:0 !important;}
.pdt10 {padding-top:10px !important;}
.pdt20 {padding-top:20px !important;}
.pdt30 {padding-top:30px !important;}
.pdb0 {padding-bottom:0 !important;}
.pdb10 {padding-bottom:10px !important;}
.pdb20 {padding-bottom:20px !important;}
.pdb30 {padding-bottom:30px !important;}



/*幅*/
.width10 {width:10%;}
.width15 {width:15%;}
.width20 {width:20%;}
.width25 {width:25%;}
.width30 {width:30%;}
.width35 {width:35%;}
.width40 {width:40%;}
.width45 {width:45%;}
.width50 {width:50%;}
.width55 {width:55%;}
.width96 {width:96%;}
.width100 {width:100%;}



/*高さ*/
.height10 {height:10px;}
.height20 {height:20px;}
.height30 {height:30px;}
.height40 {height:40px;}
.height50 {height:50px;}
.height60 {height:60px;}
.height70 {height:70px;}
.height80 {height:80px;}
.height90 {height:80px;}
.height100 {height:100px;}
.height110 {height:110px;}
.height120 {height:120px;}
.height130 {height:130px;}
.height140 {height:140px;}


.height100p {height:100%;}

.height450 {height:450px;}
@media (max-width: 768px) {.height450 {height:auto;}}




/*ボーダー*/

.border_solid {border:#CCCCCC solid 1px;}
.border_dotted {border:#CCCCCC dotted 1px;}
.border_solid_b {border-bottom:#CCCCCC solid 1px;}
.border_dotted_b {border-bottom:#CCCCCC dotted 1px;}
.border_solid_org {border-bottom:#f9bd0b solid 3px;}
.border_solid_green {border-bottom:#6fba2c solid 6px;}




/*------------------------------------------------------------
 画像
------------------------------------------------------------*/

.reimg {
	width:100%;
	height:auto;
}


/*------------------------------------------------------------
 ボックス
------------------------------------------------------------*/
.box {
  display: flex;
  flex-direction: column;
  height: 100%; /* 親の高さに合わせる */
  box-sizing: border-box; /* パディングが高さに影響しないように */
  line-height: 1.5;
}

.box p {
	font-size: 1.8rem;
  max-width:1000px;}
@media (max-width: 768px) {
  .box p {
  max-width:none;
}}
@media (max-width: 375px) {
  .box p {
  font-size: 1.6rem;
  line-height: 1.5;
}}

/*------------------------------------------------------------
 グリッドレイアウト
------------------------------------------------------------*/

/*  */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: stretch; /* アイテムの高さを揃える */
/*  margin-bottom: 40px; */
}



.grid-2b {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: stretch; /* アイテムの高さを揃える */
/*  margin-bottom: 40px; */
}
@media (max-width: 820px) {
.grid-2b {
  grid-template-columns: repeat(1, 1fr);
}}




.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch; /* アイテムの高さを揃える */
/*  margin-bottom: 40px; */
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列レイアウト */
  gap: 40px;
  align-items: stretch; /* アイテムの高さを揃える */
/*  margin-bottom: 40px; */
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 4列レイアウト */
  gap: 40px;
  align-items: stretch; /* アイテムの高さを揃える */
/*  margin-bottom: 40px; */
}

.grid-mix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
/*  margin-bottom: 40px; */
}

.wide {
  grid-column: span 2;
}

.gap0 {
  gap: 0;
}