/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/



/* メインスライダー内の画像サイズ調整 */
.item_thumbnail {
  max-width: 466px;
  max-height: 350px;
  width: auto;
  height: auto;
}

/* サムネイルコンテナのスタイル - 複数行対応版 */
.item_cpt_thumbnails {
  display: flex;
  flex-wrap: wrap; /* 複数行に折り返すための設定 */
  justify-content: center;
  max-width: 466px; /* メインスライダーの幅に合わせて調整 */
  margin: 1rem auto 0;
  padding: 0;
}

/* 個々のサムネイルのスタイル */
.item_cpt_thumbnail {
  width: 77px;
  height: 56px;
  overflow: hidden;
  list-style: none;
  margin: 0.2rem; /* 上下左右に余白を設定 */
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* アクティブなサムネイルのスタイル */
.item_cpt_thumbnail.is-active {
  opacity: 1;
}

/* サムネイル内の画像のスタイル */
.item_cpt_thumbnail img {
  width: 100%;
  height: auto;
}






/* ボタン */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.button-container button, 
.button-container input[type="button"] {
  flex: 1 1 0;
  padding: 10px 5px;
  font-size: 16px;
  background-color: #4CAF50; /* 緑色の背景 */
  color: white; /* 白色のテキスト */
  border: none;
  border-radius: 20px; /* 丸みを帯びたボタン */
  cursor: pointer;
  margin: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s; /* ホバー効果のアニメーション */
}

.button-container button:hover,
.button-container input[type="button"]:hover {
  background-color: #45a049; /* ホバー時の色 */
}

/* モバイル用のスタイル */
@media (max-width: 767px) {
  .button-container button,
  .button-container input[type="button"] {
    padding: 8px 2px;
    font-size: 9px; /* フォントサイズをさらに小さく */
    white-space: nowrap; /* 改行を禁止 */
    overflow: visible; /* オーバーフローを表示 */
    text-overflow: clip; /* 省略記号を削除 */
    background-color: #4CAF50; /* 緑色の背景 */
    color: white; /* 白色のテキスト */
    border-radius: 20px; /* 丸みを帯びたボタン */
    transition: background-color 0.3s; /* ホバー効果のアニメーション */
  }  
}

/* チャートコンテナ */
.chart-container {    
    height: 20vh; /* デフォルトサイズ */
    min-height: 200px; /* 最小高さを確保 */
}

@media (max-width: 768px) {
    .chart-container {
        height: 40vh; /* 小さな画面ではより大きく */
    	}
	.chart-container #salesChart {
		height: calc(40vh + 20px); /* 上に表示されるsalesChart のみ高さを 40vh+20px に設定 */
		}
}






/* ツールチップ下 */
.tooltip2{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip2 img{
    width: 20px;
}

.description2 {
    display: none;
    position: absolute;
    padding: 5px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
	z-index: 1000;
	background: #000;
	width: 200px;
}
.description2:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    transform: rotateZ(180deg) translateX(-50%);
    margin-left: 0; /* これを0に変更または削除 */
}
.tooltip2:hover .description2{
    display: inline-block;
    top: 30px;
    left: -100px;
}

/* 一覧画面のクリック範囲設定 *//* エリアの色をあえて付けている、どこまで範囲か知るため。後でこの色は消す、Aタグだけ使う */
.clickable-area {    
    background-color: #f0f0f0;
}
.clickable-area a {
    display: block;
    text-decoration: none;
    color: inherit;
}



div.jet-active-filter {
	color: white;
	line-height: 1em;
	text-align: left;
	background-color: #006666;
	position: relative;
	display: flex;
	cursor: pointer;
	box-sizing: border-box;	
	border-radius: 0px;
	padding: 2px 30px 2px 2px;
}


div.jet-active-filter__remove {
	color: white;
	font-size: 20px;
	line-height: 1em;
	text-align: left;
	position: absolute;
	top: 2px;
	bottom: 8px;
	right: 12px;
	margin-left: 20px;
	cursor: pointer;
	box-sizing: border-box;
}


div.jet-active-filter__val {
	color: white;
	font-size: 13px;
	line-height: 1em;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	margin-right: 10px;
	padding: 2px;
}


button.jet-remove-all-filters__button {
    color: white;
    font-size: 13px;
    line-height: 1em;
    text-align: left;
    background-color: #006666;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 0px;
    padding: 2px 30px 2px 2px;
    height: 100%;
    margin: 0;
    border: none;
    font-weight: normal;
    white-space: nowrap;
    transition: none;
    vertical-align: top;
}


/* 検索時のフォント */
div.jet-filter-label .sort_title{
    font-weight: 700;
    font-size: 18px;
    line-height: 26.4px;
    box-sizing: inherit;
}

/* jetsmartfilterのエロタグチェックボックスのフォント */
span.jet-checkboxes-list__label {
	color: #93A2B8;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	display: block;
	cursor: pointer;
	box-sizing: inherit;
	align-self: center;
}
/* jetsmartfilterのラジオボタンのフォント */
span.jet-radio-list__label {
	color: #93A2B8;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	display: block;
	cursor: pointer;
	box-sizing: inherit;
	align-self: center;
}