@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: 16px;
    color: var(--navy);
    margin-top: 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;
	}
}


.profile{
  overflow-x: auto;        /* 横スクロールを有効にする */
    white-space: nowrap;     /* 折り返さない */
}

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

.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;
}

body {
  margin: 0;
  padding: 0;
}


.profile-flex {
  display: flex;
  align-items: flex-start; /* 上揃えにする */
  gap: 10px; /* 要素間の余白 */
}



.ilst {
  width: 78px; /* 必要に応じてサイズ調整 */
  height: 78px;

}

.profile-basic {
  font-size: 11px;
  max-width: 200px; /* 必要に応じて調整 */
  margin-bottom: 11px;
}


.line_break{
height:6px
}



/* 表のスタイル */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 9px;
  font-size:12px;
}

.table-break {
   padding: 10px;
}

th {
  text-align: center;
  vertical-align: middle;
  border: var(--emeraldgreen) 1px solid;
  background-color: var(--skyblue);
}

td {
  text-align: center;
  vertical-align: middle;
  border: var(--emeraldgreen) 1px solid;
  background: var(--white);
  padding: 5px;
}

.h-pie-chart {
    color: var(--black);
    text-align: center;
    width: 100%;
    position: relative;
    font-size: 14px;
}

.※ {
    color: var(--black);
    text-align: right;
	right: 39px;
	top: -60px;
    width: 100%;
    position: relative;
}


figcaption {
		font-size: 11px;
		text-align: left;
	}

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_1_kou12 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 50%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 100%,/*英語*/
				#f3c759 0,
				#f3c759 0%,/*社会*/
				#C7F589 0,
				#C7F589 0%,/*二次試験*/
				#d2d2d2 0,
				#d2d2d2 0%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
    .pie-chart_1_kou3sp-sm {
        background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 45%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 80%,/*英語*/
				#f3c759 0,
				#f3c759 90%,/*社会*/
				#C7F589 0,
				#C7F589 0%,/*二次試験*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
		
	}
	
    .pie-chart_1_kou3sm-am {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 30%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 65%,/*英語*/
				#f3c759 0,
				#f3c759 100%,/*社会*/
				#C7F589 0,
				#C7F589 0%,/*二次試験*/
				#d2d2d2 0,
				#d2d2d2 0%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

    .pie-chart_1_kou3am-kt {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 0%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 0%,/*英語*/
				#f3c759 0,
				#f3c759 0%,/*社会*/
				#C7F589 0,
				#C7F589 50%,/*二次試験*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
    .pie-chart_1_kou3kt-ns {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 50%,/*推薦*/
				#A1D3F7 0,
				#A1D3F7 0%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 0%,/*英語*/
				#f3c759 0,
				#f3c759 0%,/*社会*/
				#C7F589 0,
				#C7F589 100%,/*二次試験*/
				#d2d2d2 0,
				#d2d2d2 0%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

	    .pie-chart_1_zentai {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 10%,/*推薦*/
				#A1D3F7 0,
				#A1D3F7 40%,/*数学*/
				#aa5af0bf 0,
				#aa5af0bf 75%,/*英語*/
				#f3c759 0,
				#f3c759 95%,/*社会*/
				#C7F589 0,
				#C7F589 0%,/*理科*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
/*tab2グラフ*/	


.pie-chart_2_kou12 {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 20%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 50%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 0%,/*面接*/
				#C7F589 0,
				#C7F589 0%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	

    .pie-chart_2_kou3sp-sm {
        background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 10%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 40%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 0%,/*面接*/
				#C7F589 0,
				#C7F589 0%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/

		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
		
	}
	
	
	
    	

    .pie-chart_2_kou3sm-am {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 30%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 0%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 0%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 40%,/*面接*/
				#C7F589 0,
				#C7F589 90%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/


		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}
	
	


    
    
        .pie-chart_2_kou3am-kt {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
   			conic-gradient(
				#f7a1be 0,
				#f7a1be 10%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 0%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 30%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 0%,/*面接*/
				#C7F589 0,
				#C7F589 50%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 100%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

	


    
    .pie-chart_2_kou3kt-ns {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 10%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 0%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 50%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 60%,/*面接*/
				#C7F589 0,
				#C7F589 100%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 0%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

	.pie-chart_2_zentai {
		background:
			radial-gradient(
				circle closest-side,
				transparent 90%,
				var(--white) 0
			),
			conic-gradient(
				#f7a1be 0,
				#f7a1be 0%,/*国語*/
				#A1D3F7 0,
				#A1D3F7 0%,/*オンライン*/
				#aa5af0bf 0,
				#aa5af0bf 40%,/*英語資格試験対策*/
				#f3c759 0,
				#f3c759 50%,/*面接*/
				#C7F589 0,
				#C7F589 100%,/*小論文*/
				#d2d2d2 0,
				#d2d2d2 0%/*その他*/
		);
		position: relative;
		width: 100px;
    	height: 100px;
    	min-height: 100px;
		margin-left:40px;
	}

.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:active {
    transform: translateY(2px) scale(0.98);
}

.tile::before {
    content: "";
    position: absolute;
    border: solid 1px var(--navy);
    top: -1px;
    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) {
    /*レスポンシブ用*/


}