@charset "UTF-8";
/* ○○.css - ○○ページ個別スタイル */

body{
    background-color: var(--beige);
}

.back-button_top_wrap {
  display: flex;
  justify-content: flex-end; /* 右寄せしたい場合 */
  margin-top: 20px; /* 上下の余白を適宜調整 */
margin-bottom: 40px;
width: 210px;
position: relative;
margin-left: auto;
}

/* tabの形状 */
.tab {
    display: flex;            /* タブを横並びに */
    margin: 0 auto;           /* コンテナの中央寄せ */
    width: 100%;
    padding: 0;               /* デフォルトの余白を削除 */
    list-style: none;
    font-weight: 500;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 20px;
}

/* 各タブのリンク（aタグ）の親要素 */
.tab li {
    flex: 1;                  /* 均等幅にする */
    text-align: center;       /* テキストを中央揃え */
    display: flex;           
}

/* 通常時のタブの形状 */
.tab li a {
    display: flex;            /* 文字の上下中央揃えを簡単にするため */
    align-items: center;      /* 1行の文字も上下中央に配置する */
    justify-content: center;  /* 左右の中央揃え */
    height: 50px;             
    box-sizing: border-box;   /* ズレ防止 */
    
    width: 100%;
    position: relative;       
    background-color: #e6e6e6;/* 背景色 */
    color: var(--black);           /* 文字色 */
    cursor: pointer;          /* ポインターを指アイコンに変更 */
    transition: 0.3s all;     /* 変化を滑らかに */
    text-decoration: none;
    padding: 0.7em 0.5em;     
    
    /* 枠線の重なりを防ぐ設定 */
    border-top: solid 2px var(--navy);
    border-bottom: solid 2px var(--navy);
    border-right: solid 2px var(--navy);
    border-left: none;        /* 基本は左線を消し、線の重複を防ぐ */
}

/* 一番最初（一番左）のタブだけ、左側の枠線を引く */
.tab li:first-child a {
    border-left: solid 2px var(--navy);
}

/* liにactiveクラスがついた時（選択時）の形状 */
.tab li.active a {
    background-color: var(--emeraldgreen); /* ホバー/選択時の背景色 */
    color: var(--beige);            /* ホバー/選択時の文字色 */
    border-top: solid 2px var(--navy);
    border-bottom: solid 2px var(--navy);
    border-right: solid 2px var(--navy);
}

.tab li:first-child.active a {
    border-left: solid 2px var(--navy);
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
    background-color:var(--beige);/* ホバー/選択時の背景色 */
    color: var(--black);           /* ホバー/選択時の文字色 */
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
    background-color: var(--beige);
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    height: auto;
    font-size: 11px;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.box{
   background-color: var(--white);
    width: 335px;
    border: 1px solid var(--emeraldgreen);
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    padding: 15px;
    height: auto;
    color: var(--black);
    text-align:justify;
    line-height: 1.5;
	margin-bottom: 20px;
}

.table_break{
height:10px
}

.pie-chart h2 {
        font-size: 11px;
        text-align: center;
	}

.box-scroll {
    font-size: 11px;
    text-align: left;
    max-height: 200px;
    overflow-x: auto;
	  scrollbar-gutter: stable;
}

figcaption {
    font-size: 11px;
    text-align: left;
    max-height: 100px;
    overflow-x: auto;
	  scrollbar-gutter: stable;
}

figcaption span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}

.haibun_wrap {
  display: flex;
    align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pie-chart h2 {
        font-size: 11px;
        text-align: center;
	}

.pie-chart1 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
			#4e79a7 0,
			#4e79a7 68.6%,
			#f28e2c 0,
			#f28e2c 100%
			
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
.pie-chart2 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
			#4e79a7 0,
			#4e79a7 32.9%,
			#f28e2c 0,
			#f28e2c 49.7%,
			#f9e3aa 0,
			#f9e3aa 60.7%,
			#C7F589 0,
			#C7F589 69.4%,
			#e15759 0,
			#e15759 72.9%,
			#76b7b2 0,
			#76b7b2 75.2%,
			#59a14f 0,
			#59a14f 75.2%,
			#edc949 0,
			#edc949 83.3%,
			#af7aa1 0,
			#af7aa1 85%,
			#ff9da7 0,
			#ff9da7 90.2%,
			#9c755f 0,
			#9c755f 93.1%,
			#bab0ab 0,
			#bab0ab 100%
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

.pie-chart3 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
			#4e79a7 0,
			#4e79a7 55.6%,
			#f28e2c 0,
			#f28e2c 100%
			
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
.pie-chart4 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
			#4e79a7 0,
			#4e79a7 43.6%,
			#f28e2c 0,
			#f28e2c 65.8%,
			#ff9da7 0,
			#ff9da7 76.1%,
			#C7F589 0,
			#C7F589 84.6%,
			#e15759 0,
			#e15759 88.9%,
			#76b7b2 0,
			#76b7b2 91.5%,
			#59a14f 0,
			#59a14f 93.2%,
			#edc949 0,
			#edc949 94.9%,
			#af7aa1 0,
			#af7aa1 96.6%,
			#f9e3aa 0,
			#f9e3aa 100%
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

/* 表のスタイル */
table {
  border-collapse: collapse;
  width: 100%;
  height: 20px; /* 縦方向中央揃え用 */
  margin: 0 auto 0px auto;
  margin-top:5px;
  border-radius: 30px;
  border: 2px solid var(--white);
}

.table-break {
   padding: 10px;
}

th {
  text-align: left;
  vertical-align: middle;
  background-color: var(--grey);
  border-color:var(--grey);
  font-weight: 400;
  border-radius:10px;
  padding: 5px;
}

.tile-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tile {
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
	padding-left: 10px;
    background-color: var(--white);
    width: 80px;
    height: 30px;
    border: solid 1px var(--navy);
    box-shadow: 2px 2px 0px var(--navy);
    position: relative;
    text-decoration: none;
}

.tile::before {
    content: "";
    position: absolute;
    border: solid 1px var(--navy);
    top: px;
    left: -1px;
    width: 11px;
    height: 28px;
    background-color: var(--skyblue);}

.haibun {
	font-size:11px;
	text-align: center;
}

.time {
	font-size:11px;
	text-align: center;
}

.back-btn_wrap{
    position: relative;
    margin: 0 auto;
    width: 245px;
}

/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/

@media screen and (min-width:1024px) {
    /*レスポンシブ用*/


}