/*
Theme Name:  twentytwentyfive-Child.
Theme URI:  https://wordpress.org/themes/twentytwentyfive/
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Five theme.
Author:  Atushi Murakami
Textdomain:  twentytwentyfive
Author URI:  https://wordpress.org
Template:  twentytwentyfive
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

.page-id-10 #wpadminbar, .page-id-15 #wpadminbar, .page-id-17 #wpadminbar,
.page-id-21 #wpadminbar, .page-id-26 #wpadminbar, .page-id-41 #wpadminbar,
.page-id-93 #wpadminbar, .page-id-95 #wpadminbar, .page-id-111 #wpadminbar,
.page-id-127 #wpadminbar, .page-id-132 #wpadminbar, .page-id-259 #wpadminbar,
.page-id-268 #wpadminbar {
	display: none;
}

.page-id-10 nav, .page-id-10 footer {
	display: none;
}

.page-id-10 .wp-block-post-title, .page-id-15 .wp-block-post-title,
.page-id-17 .wp-block-post-title, .page-id-21 .wp-block-post-title,
.page-id-26 .wp-block-post-title, .page-id-41 .wp-block-post-title,
.page-id-93 .wp-block-post-title, .page-id-95 .wp-block-post-title,
.page-id-111 .wp-block-post-title, .page-id-127 .wp-block-post-title,
.page-id-111 .wp-block-post-title {
	display: none;
}

.page-id-132 .wp-block-post-title {
	font-size: 34px;
	font-weight: bold;
	padding-bottom: 1.2em;
}

.wp-block-template-part{
	/* margin-top: 4rem !important; */
}

.wp-block-navigation-item__label {
	font-size: 12px;
}

.is-layout-constrained {
	margin-top: 0 !important;
}

.tab-content{
	margin-top: 0px !important;
}

div.wp-block-group.alignfull.has-global-padding.is-layout-constrained {
    padding-top: 0 !important;
	padding-bottom: 8rem !important;
}

/* ステータス部分を固定 */
.product-tabs.status-tabs {
    position: fixed; /* 固定位置 */
    top: 0; /* 画面上部に固定 */
    left: 50%; /* 左端を画面の中央に設定 */
    transform: translateX(-50%); /* 左端を中央基準に修正 */
    width: 100%; /* 幅を画面全体に */
    background-color: #f8f9fa; /* 背景色 */
    z-index: 1000; /* 他の要素より前に表示 */
    text-align: center; /* テキストを中央揃え */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 下に影を追加 */
    padding: 10px 0; /* 上下の余白 */
}

/* フッターを固定 */
footer {
    position: fixed; /* 固定位置 */
    bottom: 0; /* 画面下部に固定 */
    left: 0;
    width: 100%; /* 幅を画面全体に */
    background-color: #343a40; /* 背景色（濃い灰色） */
    color: #fff; /* 文字色を白に */
    text-align: center; /* 中央揃え */
    padding: 0;
    z-index: 1000; /* 他の要素より前に表示 */
}

.ranking {
	font-size:14px;
}

.bold {
	font-weight:bold;
}

/* 数値が入っていないときだけ透明化する */
.value-field.fake {
    color: transparent;
}

/* placeholder の色は薄く */
.value-field::placeholder {
    color: #999;
}

textarea#description {
	width: 100%; !important;
	height: 100px;
}

button.template_set {
	color: white;
	width: fit-content;
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 4px;
	font-weight: bold;
}

/* === 商品リストのスタイル === */
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-item {
    /* border: 1px solid #ccc; 枠線 */
    padding: 0; /* 内側の余白 */
    margin-bottom: 20px; /* 下のマージン */
    display: block;
    font-family: Arial, sans-serif; /* フォント */
}

.product-item .row {
    display: flex; /* 横並び */
    justify-content: space-between; /* 項目間を均等配置 */
    align-items: flex-start; /* 要素を上揃え */
    /* align-items: center; 縦方向の中央揃え */
    margin-bottom: 10px; /* 各行の下余白 */
    gap: 10px; /* 画像とタイトルの間にスペースを追加 */
}

.product-item .row span {
    flex: 1; /* 各項目の幅を均等に */
    text-align: left; /* 左揃え */
}

.product-item .image {
    flex: 0 0 auto; /* 画像は固定幅 */
    width: 50px; /* 画像の幅 */
    height: auto; /* 画像の高さ */
}

.product-item .product-name {
    flex: 1; /* 残りのスペースを占有 */
	vertical-align: top;
    font-weight: bold; /* 商品名を強調 */
    word-wrap: break-word; /* 必要に応じて折り返し */
    overflow-wrap: break-word; /* 長い単語を折り返し */
}

.product-item .row .status {
	text-align: center;
    font-weight: bold; /* 商品名を強調 */
    color: white; /* 利益額を緑色に */	
	background-color: red;
}

.product-item .profit-amount {
    color: green; /* 利益額を緑色に */
}

.product-item .profit-margin {
    color: blue; /* 利益率を青色に */
}

.font9 {
	font-size: 9pt;
}

.is-layout-flex {
	flex-wrap: initial;
	padding-top: 0.5em !important;
}

/* === ボタンのスタイル === */
.product-item .product-actions {
  display: flex;
  gap: 10px;
}

.product-item .product-actions button {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.product-item .product-actions button:hover {
  background-color: #0056b3;
}

.graph-controls{
	margin: 30px 0 20px 0 ;
}

.tab-button{
	font-size: 16px;
}

button[data-type] {
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

button[data-type]:hover .tab-button:hover {
    background-color: #eee;
}

button[data-type].active, .tab-button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
	font-weight: bold;
}

form select.output {
    /* display: block; ドロップダウンリストを表示 */
    width: 100%;    /* 必要に応じて幅を調整 */
    max-width: 150px; /* 適切な幅を設定 */
}

form select.output:focus {
    outline: 2px solid #007bff; /* フォーカス時に視覚的な効果を追加 */
}

div.generated {
	width: 100%;
}

.descript {
	border: 1px black solid;
	padding: 0.5em;
	font-size: 14px;
    width: 100% !important;
    max-width: 100% !important;
    height: 400px !important;
    min-height: 200px !important;
    box-sizing: border-box !important;
		/* white-space: pre-wrap; preタグ折り返し*/ 
}

/* 検索窓 */
.search-icon {
    background: none;
    border: none;
    font-size: 15px;
	padding: 2px;
    cursor: pointer;
}

.search-bar {
    display: none;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: #fafafa;
}

#product-search {
    width: 80%;
    padding: 6px;	
    flex-grow: 1;
}

#search-button {
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
}

#prefix-menu-toggle {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* メニュー全体の枠 */
.prefix-dropdown {
    position: absolute;
    top: 40px;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
    /* fit-contentが効かない場合、最小幅を指定して安定させます */
    min-width: 100px; 
    width: auto !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* 各選択肢の項目 */
.prefix-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    /* 文字を折り返さず、一行で表示する */
    white-space: nowrap; 
    /* フォントサイズを少し小さくして見やすく */
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
}

/* 記号部分（@ ! $）を少し強調 */
.prefix-option span {
    font-weight: bold;
    color: #007bff;
    margin-right: 6px;
    /* 記号が小さくなりすぎないよう調整 */
    font-size: 14px; 
}

.prefix-option:last-child {
    border-bottom: none;
}

.prefix-option:hover {
    background: #f0f0f0;
}


/* マニュアル */
h2.manual{
	font-size: 30px;
	font-weight: bold;
	border-bottom: 2px solid #009fb9;
	border-left: 10px solid #009fb9;
	padding: 0 0 5px 15px;
}

.manual_h3 {
	font-size: 22px;
	font-weight: bold;
	border-bottom: 1px dashed #009fb9;
	padding-bottom: 5px;
}

.img_w{
		width: 300px;
}

.img_m{
		width: 350px;
}
.img_l{
		width: 500px;
}

img.shadow{
	filter: drop-shadow(5px 8px 5px #aaa);
}

.inline_top {
	display: inline-block;
	vertical-align: top;
}

/* マイページ */
.title{
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 30px;
}

.side {
	border: 1px solid #d3d3d3;
	padding: 0px;
}

.side li.label {
	list-style: none;
	padding: 10px 0px 5px 20px;
	color: #808080;
}

.side li.matter {
	list-style: none;
	padding: 0px 0px 10px 20px;
}

.maintext {
	padding: 10px;
}

/* マニュアルページ 目次 */
#table-of-contents {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 0 20px;
  margin-bottom: 20px;
}

#table-of-contents h2 {
  font-size: 1.4em;
}

#table-of-contents h3 {
  font-size: 1em;
}

#table-of-contents ul {
  list-style-type: none;
  padding: 0;
}

#table-of-contents li {
  margin: 5px 0;
}

#table-of-contents a {
  text-decoration: none;
  color: #0073aa;
}

#table-of-contents a:hover {
  text-decoration: underline;
}

/* ネストされたリストのインデント */
  #table-of-contents ul ul {
    margin-left: 20px; /* インデントの幅を設定 */
  }

  #table-of-contents ul ul li {
    list-style-type: none; /* ネストされたリストのスタイルを設定 */
  }

/* === メディアクエリ (レスポンシブ対応) === */
@media (max-width: 768px) {
	body {
  		touch-action: pan-x pan-y;
	}
	
	input, textarea {
        touch-action: pan-x pan-y;
        font-size: 16px; /* iOS のズーム防止のため */
    }
	
    textarea.descript, #template_content {
        width: 100% !important;
        max-width: 100% !important;
        height: 500px !important;
    }
	
	.page-id-10 nav, .page-id-10 footer {
		display: none;
	}
  
	.product-item {
    	width: calc(50% - 20px);
  	}
	
	/* グラフのスマホ表示 */
	.dashboard {
        padding: 10px 0; /* 左右の余白を0にする */
    }
    .chart-wrapper {
        margin: 0 -10px; /* 親要素の余白を打ち消して画面端まで広げる */
        width: calc(100% + 20px);
    }
    #chartCanvas {
        width: 100% !important;
    }
}

@media (min-width: 480px) {
	#table-of-contents {
		width: 300px;
	}
}
@media (max-width: 480px) {
	.page-id-10 nav, .page-id-10 footer {
		display: none;
	}
	
  	.product-item {
    	width: 100%;
  	}
	
	#table-of-contents {
		width: 50%;
	}
	.img_w, .img_l, .img_m {
		width: 100%;
	}
}