/* カード内のジャンル・エリアの表示用 */
.card .ga-icon-box {
   position: relative;
}
.card .ga-icon {
 position: absolute;
 top: 1%;
 left: 2%;
}
/* カード内のジャンル・エリアの表示用 ここまで */

.card .my-card-header {
border:none;
background-color:#fff;
padding:0;
}
.card .my-card-body {
padding-left:0.5rem;
padding-right:0.5rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
}
.card .my-card-shopname {
padding-left:0.5rem;
padding-right:0.5rem;
padding-top:0.2rem;
padding-bottom:0;
background:#EFEFEF;
}
.my-card-shopname h2 {
margin-bottom:0.2rem;
}
.card .my-card-footer {
border:none;
padding-left:0.5rem;
padding-right:0.5rem;
background-color:#fff;
padding-top:0;
padding-bottom:0;
}
.my-card-link div {
   width: 100%;
   cursor: pointer;
   transition-duration: 0.3s;
}
.my-card-link:hover div {
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* トップページのジャンボトロン設定 */
.top-jumbotron-setting {
  background-image: url("./site_img/header_main.gif?1660868580");
  background-size: cover;
  background-position: center 60%;
  height: 100vh;
  min-height:400px;
  /*max-height:800px;*/

  /* iPhoneなどのiOS系では表示がおかしくなるのでデバイスチェック関数などで判別し、「fixed」を「scroll」に変えてやる */
    background-attachment: fixed;
  }

/* トップページ以外のジャンボトロン設定 */
.nottop-jumbotron-setting {
  background-image: url("./site_img/header_main.gif?1660868580");
  background-size: cover;
  background-position: center 60%;
  height:70px;
}

/* フッターの設定 */
.footer-jumbotron-setting {
  background-image: url("./site_img/header_main.gif?1660868580");
  background-size: cover;
  background-position: center 60%;
  height:200px;
  margin:0;
  /* iPhoneなどのiOS系では表示がおかしくなるのでデバイスチェック関数などで判別し、「fixed」を「scroll」に変えてやる */
    background-attachment: fixed;
  }
#footer {
	clear: both;
	font-size: small;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
}
ul.footer_menu {
   margin:0;
   padding:0;
}

ul.footer_menu li {
   display: inline;
   display:inline-block;
}
ul.footer_menu a {
   /*text-decoration:none;*/
   color: white;
}
/* フッターの設定 ここまで */

/* Bootstrapのガター幅を調整するための汎用CSS */
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-14{ margin-left:-7px;  margin-right:-7px}
.row-14 >div{ padding-right:7px;  padding-left:7px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >div{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >div{ padding-right:25px;  padding-left:25px}

/* Bootstrapのborderクラスには太さの設定がないので自前の太さ設定用cssで補足 */
.border-2{
    border-width:2px !important;
}
.border-3{
    border-width:3px !important;
}
.border-4{
    border-width:4px !important;
}
.border-5{
    border-width:4px !important;
}

.card .list-img {
  width:100%;
  height:250px;
  object-fit: cover;
}
.card .search-list-img {
  width:100%;
  height:200px;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
.card .list-img {
  width:100%;
  height:150px;
  object-fit: cover;
}
.card h2 {
  font-size:95%;
}
.card {
  font-size:70%;
}
.card .search-list-img {
  width:100%;
  height:140px;
  object-fit: cover;
}
}
.card .rounded-top {
border-radius: 3px 3px 0 0 !important;
}

.nav-icon:hover a{
  opacity: 0.6;
  transition-duration: 0.3s;
}
*.logbox {
    height: 8em;
    overflow: auto;
}
.keisen {
border-bottom:solid 1px #dbe1e8;
margin:10px 0 10px; 0;
}

.nav {
   cursor: pointer;
   transition-duration: 0.3s;
}
.nav:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
}
.nav-wrap {
background-color:#fff;
}
.card p {
font-size:85%;
margin-bottom:0;
line-height:1.2em;
}

/***********************************************************/
/* トップページ以外（各カテゴリーページ等）のナビゲーションバーの設定 */
/***********************************************************/
.nottop-main-nav {
  z-index: 20;
  width: 100%;
}
/* ウィンドウ幅が1500以上の場合、width:100%だとナビゲーションバーの幅が広すぎるのでwidth:80%;にする */
@media screen and (min-width: 1500px) {
.nottop-main-nav {
  z-index: 20;
  width: 80%;
}
}
.nottop-nav-off {
visibility:hidden;
}
/*********************************************************************/
/* 　ここまで  トップページ以外（各カテゴリーページ等）のナビゲーションバーの設定 */
/*********************************************************************/

/****************************************************/
/* スクロール時に表示されるサイトのメインナビゲーションの設定 */
/****************************************************/
/* スクロールしたら、このCSSを適用し、ナビゲーションバーの位置を固定する */
.mainnav-is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
}
/* ウィンドウ幅が1500以上の場合、width:100%だとナビゲーションバーの幅が広すぎるのでwidth:80%;にする */
@media screen and (min-width: 1500px) {
.mainnav-is-fixed {
  position: fixed;
  top: 0;
  left:calc(50% - 80%/2);
  z-index: 20;
  width: 80%;
}
}

.mainnav-hover:hover {
background: rgba(210,210,210,0.5);
}

#mainnav-articles-scroll {
display:none;
}
.mainnav-on {
display:block !important;
}

/* 画面サイズごとのナビゲーションのアイコンの表示設定 */
.mainnav-ico-lg { display:block; }
.mainnav-ico-sm { display:none; }
@media screen and (max-width: 991px) {
.mainnav-ico-lg { display:none; }
.mainnav-ico-sm { display:block; }
}
@media screen and (max-width: 767px) {
.mainnav-ico-lg { display:block; }
.mainnav-ico-sm { display:none; }
.mainnav-link-margin { margin:5px 0; } /* スマホメニューの場合はアイコンの上下に隙間を開ける */
}
/*******************************************************************/
/* 　ここまで  スクロール時に表示されるサイトのメインナビゲーションの設定     */
/*******************************************************************/

/*日高なびのサイトロゴ用（スマホの時だけ幅300pxにし、はみ出さないようにする）*/
@media screen and (max-width: 767px) {
.site-logo { width:300px; }
}