@charset "UTF-8";
/* CSS Document */


.container-n-items
{
	position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 0px auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
	 
	color:#000;
	
}

.card-n-list{
    margin: 0.5em auto;
    padding: 33px 10px 40px;
    width: 96%;
    background: #f0f0f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
	
}
.card-n-list>h6{text-align: center;font-size:25px;font-weight:600;}

.card-n-list,
.card-n-list-map
{
	background: #fff;
}



/****3つ並び******/
/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-n-list {
        margin: 0.5em 0;
        width: calc(96% / 2); /* 100%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-n-list {
        width: calc(96% / 3);/* 100%幅を3で割るという指定 */
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    .container-n-items::after{
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}

.card-n-three{
	height:260px;
}

/****2つ並び******/

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-n-list-two {
        margin: 0.5em 0;
        width: calc(98% / 2); /* 100%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 992px) {
    .card-n-list-two {
        width: calc(98% / 2);/* 100%幅を3で割るという指定 */
    }
}
/****1つ並び(日本地図使用項目)******/
.card-n-list-map{
	width:100%;
}
.number-back-japan{
	background: url("../img/japanmap.png")no-repeat;
	background-size:contain;
	background-position: center;
	width:100%;
	
}



/* カードレイアウトを1カラムで配置 */
.container-n-items div.card-n-list-img
{
	width:100%; height:150px;
	background: #888;
	background-size: cover;
	background-position:center;
}






.test-number
{
	width:100%;
	height:400px;
}

/************************************************/

/***動く数字**/

.info-data {
	padding: 0;
	display:flex;
	justify-content: center;
	align-items:flex-end;
}

main .info-data p {
  margin-right: 25px;
  font-weight: 600;
  font-size: calc(16px + 0.4vw);
  text-align: right;
}

main .info-data p span {
  display: inline-block;
  margin: 0px 25px;
  color: #4065aa;
  font-size: calc(24px + 4vw);
  font-weight: 400;
  min-width: 275px;
}


/************************************************/
p.result-number-color
{
	text-align: center;
	font-weight:600;
	font-size: 56px;
	color: #805FA0;/**★文字色★**/
}
p.number-sougyo::after{
	content: '年';
	font-size: 26px;
	color: #000;
}


p.number-avage::after{
	content: '才';
	font-size: 26px;
	color: #000;
}
p.number-sougyo,p.number-avage{
	margin-top:45px;
}


.number-zangyou-box
{
	width:100%;
	height:200px;
	display:flex;
	justify-content: center;
	align-items: center;
}

p.number-zangyou{margin-top:30px;margin-right:-10px;font-size: 70px;}

p.number-zangyou::after{
	content: '時間 /月';
	font-size: 20px;
	color: #000;
	margin-left:-10px;
}


p.result-number-color.male-female
{color:#000;font-size:80px;letter-spacing:10px;margin-top:30px;}
p.result-number-color.male-female span.female{position:relative;color: #805FA0;/**★文字色★**/}
p.result-number-color.male-female span.male::after{
	content: 'man';
	position: absolute;
	top:90px;
	right:13px;
	font-size:20px;
	letter-spacing:0;
}

p.result-number-color.male-female span.female::after{
	content: 'woman';
	position: absolute;
	top:90px;
	left:-10px;
	font-size:20px;
	letter-spacing:-1px;
	color: #805FA0;/**★文字色★**/
}

/********出身地****************************************/

.number-contry-box{width:100%;max-width:800px;margin:0 auto;height:450px;position:relative;}
.n-contry-unit{background:rgba(255,255,255,0.7); border:solid 3px #ccc;display:block;padding:15px 20px;border-radius:50px;text-align:center;display:flex;align-content:space-around;flex-direction: column;
  justify-content: center;
  align-items: center;}
.n-contry-unit h6{font-size: 14px;font-weight:500;}
.n-contry-unit h6 span{font-size: 24px;margin-left:5px;}
p.n-contry-item{margin-top:3px;font-size:11px!important;}

.n-contry-unit-kantou{position:absolute;right:20%;bottom:10px;border:solid 3px #31B3C4;color:#31B3C4;}
.n-contry-unit-kyusyu{position:absolute;left:20px;bottom:10px;border:solid 3px #805FA0;color:#805FA0;}
.n-contry-unit-tohoku{position:absolute;right:10px;top:20px;border:solid 3px #57B257;color:#57B257;}
.n-contry-unit-hokuriku{position: absolute;top: 35%;left: 35%;transform: translate(-50%, -50%);border:solid 3px #FFA750;color:#FFA750;}
.n-contry-unit-kansai{position:absolute; top: 50%; left: 10%;transform: translate(-50%, -50%);border:solid 3px #F96495;color:#F96495;}

@media screen and (max-width:770px){
	.n-contry-unit-kantou{position:absolute;right:20%;bottom:10px;border:solid 3px #31B3C4;color:#31B3C4;}
.n-contry-unit-kyusyu{position:absolute;left:20px;bottom:10px;border:solid 3px #805FA0;color:#805FA0;}
.n-contry-unit-tohoku{position:absolute;right:10px;top:20px;border:solid 3px #57B257;color:#57B257;}
.n-contry-unit-hokuriku{position: absolute;top: 30%;left: 35%;transform: translate(-50%, -50%);border:solid 3px #FFA750;color:#FFA750;}
.n-contry-unit-kansai{position:absolute; top: 50%; left: 10%;transform: translate(-50%, -50%);border:solid 3px #F96495;color:#F96495;}	
}

@media screen and (max-width:480px){
	.n-contry-unit-kantou{position:absolute;right:30px;bottom:50px;border:solid 3px #31B3C4;color:#31B3C4;}
.n-contry-unit-kyusyu{position:absolute;left:20px;bottom:10px;border:solid 3px #805FA0;color:#805FA0;}
.n-contry-unit-tohoku{position:absolute;right:10px;top:20px;border:solid 3px #57B257;color:#57B257;}
.n-contry-unit-hokuriku{position: absolute;top: 28%;left: 26%;transform: translate(-50%, -50%);border:solid 3px #FFA750;color:#FFA750;}
.n-contry-unit-kansai{position:absolute; top: 48%; left: 0%;transform: translate(-50%, -50%);border:solid 3px #F96495;color:#F96495;}	
}


/*
.number-contry-tokyo{position:absolute;bottom:20px;right:30px;}
.number-contry-chiba{position:absolute;bottom:40px;right:30px;}
.number-contry-saitama{position:absolute;bottom:60px;right:30px;}
.number-contry-kanagawa{position:absolute;bottom:80px;right:30px;}
.number-contry-ishikawa{position:absolute;bottom:100px;right:30px;}*/

/************************************************/


/*------------------------------------
  pie chart
------------------------------------*/

.n-keireki-container
{margin:30px 0 20px;position:relative;}

.n-career{
	font-size: 25px;
	font-weight:700;
	color: #31B3C4;
	position: absolute;
	top:11px;
	left:3vw;
}
.n-career-data{
	font-size: 27px;
	font-weight:700;
	color: #31B3C4;
	position: absolute;
	top:45px;
	left:3vw;
}
.n-students{
	font-size: 27px!important;
	font-weight:700;
	color: #F96495;
	position: absolute;
	top:11px;
	right:3vw;
	line-height: 50px;
}
.n-students-data{
	font-size: 27px;
	font-weight:700;
	color: #F96495;
	position: absolute;
	top:45px;
	right:3vw;

}






/***棒グラフ****/
.n-kinmukeitai-wrap
{width:100%;margin:0 auto;}
/* グラフ全体を囲むコンテナのスタイル */
.bar-container {
	width: 95%;/* グラフ全体の幅を80%に設定 */
	max-width:400px;
margin: 30px auto 0px; /* 上下に50pxの余白を加え、中央に配置 */
}

/* 各棒グラフ（項目）のスタイル */
.bar {
  display: flex; /* Flexboxを使用して、ラベルとバーを横並びに配置 */
  align-items: center; /* ラベルとバーを縦方向に中央揃え */
  margin-bottom: 15px; /* 各棒の間に15pxの余白を追加 */
　animation-timeline: view();
}


/* 棒グラフそのもののスタイル */

.bar-fill{
  background-color: #57B257; /* 棒の色を緑色に設定 */
  color: white; /* パーセンテージの文字色を白に設定 */
  text-align: right; /* 文字を右寄せに設定 */
  padding-right: 3px; /* 文字の右側に10pxの余白を追加 */
  height: 45px; /* 棒の高さを50pxに設定 */
  border-radius: 5px; /* 棒の角を丸く設定 */
  font-size: 17px; /* 文字のサイズを16pxに設定 */
  display: flex; /* Flexboxを使用して、パーセンテージの文字を整列 */
  align-items: center; /* 縦方向に中央揃え */
  justify-content: flex-end; /* パーセンテージの数字を右側に寄せる */
	margin-left:20px;
	font-weight:700;

/* 初期状態で棒の横幅を0に設定 */
  transform: scaleX(0); 
  /* アニメーションが左から始まるように、左端を基準に設定 */
  transform-origin: left center; 
  
  /* アニメーションの設定 */
  animation: growBar 5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; 
  /* 'growBar'という名前のアニメーションを2秒間で、イージング（動きが滑らかになる）を指定し、最終状態に向かう */
}
.bar-fill-towork{background-color: #FFA750;height: 40px;}
.bar-fill-privatetime{background-color: #31B3C4;height: 40px; font-size:14px;}

/* 棒グラフのラベル（項目名）のスタイル */
.bar-label {
	text-align: right;
  width: 120px; /* ラベルの幅を100pxに設定 */
　font-size:13px!important;
  font-weight: bold; /* ラベルを太字に */
}
.bar-label-privatetime{
	width: 130px;font-size:13px;
}

/* 棒グラフのアニメーションの定義 */
@keyframes growBar {
  from {
    transform: scaleX(0); /* アニメーション開始時、棒の横幅は0（非表示） */
  }
  to {
    transform: scaleX(1); /* アニメーション終了時、棒の横幅が100%に伸びる */
  }
}

/* 各棒に個別のアニメーション時間を設定 */
.bar:nth-child(1) .bar-fill {
  animation-duration: 2s; /* 1番目の棒グラフは2秒でアニメーション */
}
.bar:nth-child(2) .bar-fill {
  animation-duration: 2.5s; /* 2番目の棒グラフは2.5秒でアニメーション */
}
.bar:nth-child(3) .bar-fill {
  animation-duration: 3s; /* 3番目の棒グラフは3秒でアニメーション */
}












/***************/

/***************/

.n-clothes{
	width:100%;
	display:flex;
	justify-content: space-around;
	margin-top:30px;
}
.n-clothes div{
	width:100px;
	height:200px;
	display:flex;
	flex-direction: column;
}

.n-clothes div div{
	width:100%;
	height:100%;
	text-align: center;
}

.n-clothes div .n-clothes-item{
	
}
.n-clothes-number p
{
	line-height: 17px;
	height:40px;
	display: flex; align-items: center;justify-content: center;
	
}
.n-clothes-number span
{
	position:relative;
	font-size: 18px;
}
.n-clothes-number span::after
{
	content:'%';
	font-size:11px;
}

.n-clothes div .clothes01{background:url("../img/clothes01.png");
background-size:contain;
}
.n-clothes div .clothes02{background:url("../img/clothes02.png");
background-size:contain;
}
.n-clothes div .clothes03{background:url("../img/clothes03.png");
background-size:contain;
}

.n-clothes-other{
	padding:10px 10px 20px;
}

/*******/
.n-paid-container{
	padding:20px 10px;
}
.n-paid-container p
{
	font-size: 25px;
	text-align:center;
	color:#F96495;
}
.n-paid-container p:after
{
	content:'%';
	font-size:15px;
	color:#000;
}


/*******/
/***背景棒人間**/
.private-time-back{position:relative;}
.private-time-back::before{
	content:'';
	position:absolute;
	bottom:-70px;
	right:20px;
	background:url("../img/n-private-time-img.png")no-repeat;
	background-size:contain;
	width:100px;height:200px;

}