@charset "shift_jis";
/* CSS Document */

/* 全体幅を制限 */
.flower-info-width{
	max-width: 960px;
	margin: auto;
	margin-top: 20px; 
	padding: 0 20px 40px;
}

/* 冒頭分内見ごろのお花情報へのリンクボタン */
.migoro-link{
	background-color: rgb(255,200,120);
	font-weight: bold;
	padding: 2px;
	border-radius: 5px;
	white-space: nowrap;/* 改行しない */
}

/* 現在のおすすめ情報 */
.osusume-info{
	background-color:  rgb(255,255,200);
	width: 85%;
	max-width: 800px;
	margin: auto;
	padding: 15px;
	border-radius: 10px;
	margin-top:20px;
	box-shadow: 4px 4px 4px rgb(0,0,0,25%);
}

/* タブ全体を囲むボックスの設定（他ページへ影響がないよう全体を囲む） */
.flower-tab {
	position: relative;
	max-width: 900px; /* コンテナの最大幅を指定 */
	margin: auto;/* コンテナの中央寄せ */
	padding: 40px 0px;
}

/* タブ右の凡例表示用 */
.seasons-menu{
	position:absolute;
		top:45px;
		right:0px;
	width: 35%;
	font-size: 14px;
	white-space: nowrap;/* 改行しない */
}
/* モバイル時の凡例変更*/
@media screen and (max-width: 782px){
.seasons-menu{
	position:absolute;
		top: 0px;
		right:0px;
	width: 40%;
	font-size: 12px;
	white-space: nowrap;
	}
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.flower-tab input { display: none; }

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.flower-tab .tab {
	display: inline-block; /* インラインブロック化 */
	border-radius: 10px 10px 0px 0px;
	padding: 5px 50px; 
	font-size: 20px;
	font-weight: bold;
	box-shadow: 4px 4px 4px rgb(0,0,0,25%);
   }

/* ▼タブにマウスポインタが載った際の装飾 */
.flower-tab .tab:hover {
	transform: scale(1,1.15);
	transform-origin: bottom;
	transition: 0.2s ease;
	cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
   }

/* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
input:checked + .flower-tab .tab {
	text-shadow: 0px 0px 5px white;
   }

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
	display: none; /* 標準では非表示にする */
	padding: 20px;
	border-radius: 0px 10px 10px 10px;
	position: relative;
	box-shadow: 4px 4px 4px rgb(0,0,0,25%);
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#season-tab1:checked ~ #season-content1 { display: block; }
#season-tab2:checked ~ #season-content2 { display: block; }
#season-tab3:checked ~ #season-content3 { display: block; }
#season-tab4:checked ~ #season-content4 { display: block; }

/* 季節ごとのタブの色 */
.flower-tab .spring{
	background-color: rgb(255,220,240);
}
.flower-tab .summer{
	background-color: rgb(210,240,190);
}
.flower-tab .autumn{
	background-color: rgb(255,220,180);
}
.flower-tab .winter{
	background-color: rgb(220,240,255);
}

/* カレンダーテーブル書式設定 */
table.seasons-table {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 20px;
	background: rgba(255,255,255,0.6);
	border-radius: 10px;  /*角丸*/
	border-collapse: collapse;
}
table.seasons-table th,
table.seasons-table td {
	vertical-align:inherit;
	border-right: 1px solid black;
	padding: 4px 4px 5px 4px;
}
table.seasons-table th {
	text-align: center;
}
table.seasons-table td {
	font-size: 0px;
}
table.seasons-table th:nth-child(4),
table.seasons-table td:nth-child(4) {
	border-right: none;
}
table.seasons-table th{
	border-bottom: 1px solid black;	
}
table.seasons-table td:nth-child(1) {/* 最初の列 */
	text-align: right !important;
	padding-right: 10px;
	font-size: 16px;
}
table.seasons-table td:nth-child(n+1) {/* 2列目以降 */
	text-align:left;
}


/* カレンダー開花状況色分け */
div.box-none,div.box-peak,div.box-early{
	display: inline-block;
	position: relative;
	width:33.3%;
	max-width:70px;
	height: 30px;
}
div.box-early{
	background: rgb(255,200,80,1);
}
div.box-peak{
	background: hotpink;
}
div.box-t{/* ボックス内の文字 */
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size: 10px;
	width: 90%;
	text-align:center;
	line-height: 1.2;/* 行間 */
}


/* 花データ書式設定 */
.plant-data:before, .plant-data:after {
    box-sizing: border-box;
}
.plant-data{
    display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.plant-img{
	margin: 0 10px 5px 0;
}
.plant-text{
	flex:1 530px;
	vertical-align: top;
	background-color: rgba(255,255,255,0.6);
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
}
.f-name{
	margin: 0px 0px 3px 0px;
	font-weight: bold;
}
p.f-name::before{
	content: "・";
}
p.f-place,.f-time{
	margin: 0px 15px ;
	font-weight: bold;
}
p.f-place:before,.f-time:before{
	content: "→ ";
}


/* 花の見ごろ情報用書式設定 */
.fm-wrap{
	width: calc(100% + 40px);
	display: flex;
	flex-wrap: wrap;
	padding: 10px 10px 5px;
	margin: 30px -20px 10px;
	font-weight: bold;
}
.fm-data{
	background-color: rgb(210,240,190);
	border-radius: 10px;
}
.fm-other-data{
	background-color: rgb(255,220,180);
	border-radius: 10px;
}
.fm-other{
	border-bottom: 3px solid rgb(255,240,150);
}
.fm-box{
	max-width: 100%;
	margin: 0;
	padding-left: 2em;
	text-indent: -2em;
}
.fm-name::after{
	content: "　";
}
.fm-place::before{
	content: "｜　";
}