@charset "shift-jis";

.txt_num {
  font-family: 'Josefin Slab', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.num_01 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.num_01 span {
  display: inline-block;
  margin-right: 10px;
  font-family: 'Josefin Slab', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 100px;
  line-height: 1;
}
.num_02 {
  font-family: 'Josefin Slab', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 35px;
  font-weight: 400;
  line-height: 1;
}
.num_03 {
  font-family: 'Josefin Slab', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  font-weight: bold;
  line-height: 1;
}

.infographics {
  padding: 30px 3%;
  background: #f4f5f7;
}

.js_target.fadein {
  opacity: 0;
  transition: transform 2s, opacity 2s;
}
.js_target.fadein.on {
  opacity: 1;
}
/* ------------------------------
list_infographics
------------------------------ */
.list_infographics li {
  background: #fff;
}
.list_infographics .ttl_info {
  display: flex;
  background: #b8babc;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.list_infographics .ttl_info .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-height: 50px;
  padding-top: 0.1em;
  background: #000;
  font-family: 'Josefin Slab', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}
.list_infographics .ttl_info .txt {
  display: flex;
  align-items: center;
  width: calc(100% - 50px);
  padding: 0.4em 20px;
  line-height: 1.4;
}
.list_infographics .info_body {
  padding: 30px 5%;
  border: 1px solid #ccc;
  border-top: none;
}
.list_infographics .info_lead {
  margin-bottom: 1em;
  font-size: 20px;
  text-align: center;
}
.list_infographics .info_body #num_students {
  display: none;
}
.list_infographics .info_img {
  margin-bottom: 20px;
  text-align: center;
}
.list_infographics .info_img img {
  width: 100%;
  height: auto;
}
.list_infographics .info_caption {
  font-size: 14px;
}
.list_infographics .info_01 .num_01,
.list_infographics .info_01 .info_lead {
  color: #47639d;
}
.list_infographics .info_01 .num_01 span {
  min-width: 100px;
}
.list_infographics .info_02 .num_01,
.list_infographics .info_02 .info_lead {
  color: #de504a;
}
.list_infographics .info_03 .num_01,
.list_infographics .info_03 .info_lead {
  color: #f2921c;
}
.list_infographics .info_03 .num_01 span {
  min-width: 104px;
}
.list_infographics .info_04 .num_01,
.list_infographics .info_04 .info_lead {
  color: #0baea2;
}
.list_infographics .info_04 .num_01 span {
  min-width: 143px;
}
.list_infographics .info_01 .info_img {
  margin-bottom: 30px;
}
.list_infographics .info_01 .info_img img {
  max-width: 102px;
}
.list_infographics .info_02 .info_img img {
  max-width: 234px;
}
.list_infographics .info_05 .info_img img {
  max-width: 300px;
}
.list_infographics .info_05 .info_body {
  position: relative;
  padding-top: 40px;
}
.list_infographics .info_05 .info_img {
  margin-bottom: 80px;
}
.list_infographics .info_06 .info_body {
  padding-top: 40px;
}
.list_infographics .info_09 {
  width: 100%;
}
.list_infographics .info_09 .wrap_graph {
  margin-bottom: 30px;
}
/* box_ratio */
.list_infographics .box_ratio {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 140px;
  width: 90%;
}
.list_infographics .box_ratio .bubble {
  position: relative;
  width: 120px;
  height: 115px;
  padding-top: 0.6em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}
.list_infographics .box_ratio .bubble.man {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22119%22%20height%3D%22113%22%20viewBox%3D%220%200%20119%20113%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.0951%2076.3536C-1.16124%2062.4856%20-0.709585%2047.1001%205.35121%2033.5643C11.412%2020.0285%2022.5883%209.44501%2036.434%204.13015C50.2796%20-1.1847%2065.667%20-0.798028%2079.2282%205.20555C92.7895%2011.2091%20103.42%2022.3406%20108.793%2036.1637C108.907%2036.4587%20109.02%2036.7547%20109.125%2037.0507L118.849%2040.4475L111.71%2046.7111C114.08%2060.4335%20111.26%2074.547%20103.798%2086.3048C96.3367%2098.0627%2084.7672%20106.624%2071.3416%20110.322C57.9159%20114.02%2043.5946%20112.59%2031.1647%20106.312C18.7349%20100.033%209.0857%2089.3543%204.0951%2076.3536Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M36.8871%205.30924C26.7286%209.18919%2017.9687%2016.0292%2011.7414%2024.9438C5.67214%2033.6183%202.24872%2043.8666%201.88587%2054.4473C1.5784%2063.523%203.5436%2072.5317%207.60291%2080.6549C11.6622%2088.778%2017.6869%2095.7581%2025.1297%20100.961C33.8042%20107.03%2044.0525%20110.454%2054.6332%20110.816C62.7356%20111.083%2070.7955%20109.541%2078.2279%20106.304C85.6603%20103.067%2092.2786%2098.2155%2097.6023%2092.1018C102.926%2085.9881%20106.822%2078.7657%20109.006%2070.9588C111.191%2063.152%20111.609%2054.9567%20110.232%2046.9678L110.088%2046.1383L115.928%2041.0152L107.96%2038.2317L107.717%2037.5645C107.611%2037.2752%20107.503%2036.9847%20107.394%2036.7009C103.514%2026.5424%2096.674%2017.7824%2087.7594%2011.5551C79.0846%205.48585%2068.8359%202.06254%2058.2549%201.69998C50.962%201.45321%2043.6944%202.68081%2036.8871%205.30924ZM36.3496%203.90887C43.2242%201.2698%2050.5513%200.0106734%2057.9126%200.203369C65.2739%200.396064%2072.5251%202.03681%2079.2522%205.03193C85.9794%208.02705%2092.0507%2012.3179%2097.1195%2017.6594C102.188%2023.001%20106.155%2029.2886%20108.794%2036.1633C108.908%2036.4583%20109.021%2036.7543%20109.126%2037.0503L118.849%2040.4475L111.71%2046.7101C113.519%2057.1797%20112.317%2067.9479%20108.243%2077.7608C104.17%2087.5737%2097.3923%2096.0274%2088.7002%20102.138C80.0081%20108.248%2069.759%20111.763%2059.1465%20112.274C48.534%20112.784%2037.9947%20110.27%2028.756%20105.022C19.5173%2099.7753%2011.9593%2092.0115%206.96223%2082.6352C1.96514%2073.2588%20-0.26544%2062.6558%200.53024%2052.0608C1.32592%2041.4658%205.11511%2031.3149%2011.4566%2022.7901C17.798%2014.2652%2026.4308%207.71734%2036.3496%203.90887Z%22%20fill%3D%22%235390CB%22%2F%3E%3C%2Fsvg%3E');
  color: #5390cb;
}
.list_infographics .box_ratio .bubble.woman {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22119%22%20height%3D%22113%22%20viewBox%3D%220%200%20119%20113%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M115.125%2076.3525C120.381%2062.4845%20119.93%2047.0989%20113.869%2033.5631C107.808%2020.0274%2096.6319%209.44385%2082.7863%204.129C68.9406%20-1.18586%2053.5533%20-0.799181%2039.992%205.2044C26.4308%2011.208%2015.8002%2022.3395%2010.4269%2036.1626C10.3136%2036.4576%2010.2%2036.7535%2010.095%2037.0495L0.370453%2040.4473L7.50998%2046.7109C5.13967%2060.4334%207.95984%2074.547%2015.4216%2086.3048C22.8834%2098.0627%2034.453%20106.624%2047.8788%20110.322C61.3045%20114.02%2075.6259%20112.59%2088.0558%20106.311C100.486%20100.032%20110.135%2089.3533%20115.125%2076.3525Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M82.3327%205.30905C72.1873%201.39503%2061.1005%200.616615%2050.5077%203.07456C40.1931%205.45984%2030.7915%2010.7852%2023.442%2018.4053C18.3787%2023.6599%2014.4279%2029.8822%2011.8263%2036.6998C11.7188%2036.9798%2011.6063%2037.273%2011.5034%2037.5634L11.2601%2038.2305L3.29241%2041.014L9.13233%2046.1371L8.9885%2046.9667C7.91099%2053.1514%207.91802%2059.4764%209.00927%2065.6587C10.647%2075.0678%2014.7241%2083.8827%2020.8337%2091.2235C26.9432%2098.5643%2034.8713%20104.174%2043.8267%20107.493C52.7821%20110.812%2062.4513%20111.724%2071.8692%20110.137C81.2872%20108.551%2090.1243%20104.522%2097.4983%2098.4529C104.872%2092.3836%20110.525%2084.4862%20113.893%2075.5491C117.261%2066.612%20118.226%2056.9479%20116.691%2047.5215C115.156%2038.095%20111.176%2029.236%20105.147%2021.8289C99.1177%2014.4218%2091.2513%208.7256%2082.3327%205.30905ZM82.8703%203.90867C92.7877%207.71759%20101.419%2014.2654%20107.759%2022.7897C114.099%2031.314%20117.888%2041.464%20118.683%2052.0579C119.478%2062.6517%20117.247%2073.2535%20112.25%2082.6287C107.254%2092.0039%2099.6965%2099.7667%2090.4588%20105.013C81.2211%20110.26%2070.6831%20112.774%2060.0717%20112.264C49.4603%20111.754%2039.2123%20108.239%2030.5208%20102.13C21.8294%2096.0209%2015.0523%2087.5685%2010.9785%2077.757C6.90473%2067.9455%205.702%2057.1785%207.51034%2046.7099L0.370453%2040.4473L10.095%2037.0495C10.2028%2036.7546%2010.314%2036.4566%2010.4269%2036.1626C15.7564%2022.2788%2026.3825%2011.0816%2039.9683%205.03268C53.5541%20-1.01626%2068.9864%20-1.42057%2082.8703%203.90867Z%22%20fill%3D%22%23DA6075%22%2F%3E%3C%2Fsvg%3E');
  color: #da6075;
}
.list_infographics .box_ratio .bubble > span {
  position: absolute;
  top: -115px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 150px;
}
.list_infographics .box_ratio .bubble.man > span {
  transform: translateX(-55%);
}
.list_infographics .box_ratio .bubble.woman .num_03 {
  margin-right: 0.04em;
  letter-spacing: -0.03em;
}
/* table_age */
.list_infographics .table_age {
  width: 100%;
  margin-bottom: 20px;
}
.list_infographics .table_age th {
  width: 3em;
  font-size: 14px;
  font-weight: normal;
  vertical-align: middle;
}
.list_infographics .table_age td {
  position: relative;
  height: 42px;
  padding: 5px 0;
  border-left: 1px solid #00afec;
  vertical-align: middle;
  overflow: hidden;
}
.list_infographics .table_age .graph_line {
  display: inline-block;
  height: 24px;
  opacity: 0;
}
.list_infographics .table_age.animation.on .graph_line {
  opacity: 1;
  animation: grapg01 1.5s forwards;
}
.list_infographics .table_age .num_02 {
  position: absolute;
  top: 0.1em;
  opacity: 0;
  transition: transform 2s, opacity 2s;
}
.list_infographics .table_age.animation.on .num_02 {
  opacity: 1;
}
.list_infographics .table_age .age60 {
  padding-top: 10px;
}
.list_infographics .table_age .age60 .graph_line {
  width: 12%;
  background: #9fd9f6;
}
.list_infographics .table_age .age60 .num_02 {
  top: 0.2em;
  left: 15%;
}
.list_infographics .table_age .age50 .graph_line {
  width: 45%;
  background: #d3edfb;
}
.list_infographics .table_age .age50 .num_02 {
  left: 48%;
}
.list_infographics .table_age .age40 .graph_line {
  width: 68%;
  background: #00afec;
}
.list_infographics .table_age .age40 .num_02 {
  left: 70%;
}
.list_infographics .table_age .age30 .graph_line {
  width: 60%;
  background: #55c3f1;
}
.list_infographics .table_age .age30 .num_02 {
  left: 63%;
}
.list_infographics .table_age .age20 .graph_line {
  width: 20%;
  background: #9fd9f6;
}
.list_infographics .table_age .age20 .num_02 {
  left: 23%;
}
/* graph_circle */
.list_infographics .graph_circle {
  display: inline-block;
  transform: rotate(-90deg);
  width: 220px;
  height: 220px;
}
.list_infographics .graph_circle .circle {
  fill: transparent;
  stroke-width: 23;
}
.list_infographics .wrap_graph_circle {
  position: relative;
  max-width: 310px;
  margin: 0 auto 30px;
  padding: 40px 0 20px;
  text-align: center;
}
.list_infographics .wrap_graph_circle .ttl_graph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  color: #000;
  font-size: 40px;
  font-weight: bold;
}
.list_infographics .wrap_graph_circle .txt_graph {
  position: absolute;
  font-size: 14px;
  text-align: left;
  line-height: 1.5;
  opacity: 0;
  transition: transform 2s, opacity 2s;
}
.list_infographics .animation.on .txt_graph {
  opacity: 1;
}
.list_infographics .wrap_graph_circle .txt_graph::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 20px;
  border: 1px solid #000;
  content: '';
}
.list_infographics .graph_circle .circle01_1 {
  stroke: #f87200;
  opacity: 0;
}
.list_infographics .graph_circle .circle01_2 {
  stroke: #f8b600;
  opacity: 0;
}
.list_infographics .graph_circle .circle01_3 {
  stroke: #fa6b6b;
  opacity: 0;
}
.list_infographics .graph_circle .circle01_4 {
  stroke: #fdc0c0;
  opacity: 0;
}
.list_infographics .animation.on .graph_circle .circle01_1 {
  opacity: 1;
  animation: circle01_1 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle01_2 {
  opacity: 1;
  animation: circle01_2 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle01_3 {
  opacity: 1;
  animation: circle01_3 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle01_4 {
  opacity: 1;
  animation: circle01_4 1s forwards;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_1 {
  top: 0;
  right: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_1::after {
  left: -25px;
  top: 60px;
  border-width: 1px 0 0 1px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_2 {
  bottom: 0;
  right: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_2::after {
  left: -25px;
  top: 10px;
  height: 45px;
  border-width: 0 0 1px 1px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_3 {
  bottom: 0;
  left: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_3::after {
  left: 25px;
  top: -25px;
  width: 35px;
  border-width: 1px 0 0 1px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_4 {
  top: 0;
  left: 50px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph01_4::after {
  left: 50%;
  top: 35px;
  height: 25px;
  border-width: 1px 1px 0 0;
}
.list_infographics .graph_circle .circle02_1 {
  stroke: #6ec226;
  opacity: 0;
}
.list_infographics .graph_circle .circle02_2 {
  stroke: #b1df8a;
  opacity: 0;
}
.list_infographics .graph_circle .circle02_3 {
  stroke: #ebd860;
  opacity: 0;
}
.list_infographics .graph_circle .circle02_4 {
  stroke: #f8f3b2;
  opacity: 0;
}
.list_infographics .animation.on .graph_circle .circle02_1 {
  opacity: 1;
  animation: circle02_1 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle02_2 {
  opacity: 1;
  animation: circle02_2 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle02_3 {
  opacity: 1;
  animation: circle02_3 1s forwards;
}
.list_infographics .animation.on .graph_circle .circle02_4 {
  opacity: 1;
  animation: circle02_4 1s forwards;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_1 {
  top: 0;
  right: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_1::after {
  left: -30px;
  top: 60px;
  width: 25px;
  border-width: 1px 0 0 1px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_2 {
  bottom: 0;
  left: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_2::after {
  right: -20px;
  top: 10px;
  height: 45px;
  border-width: 0 1px 1px 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_3 {
  top: 50px;
  left: 0;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_3::after {
  left: 25px;
  bottom: -20px;
  width: 28px;
  border-width: 0 0 1px 1px;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_4 {
  top: 0;
  left: 28%;
}
.list_infographics .wrap_graph_circle .txt_graph.graph02_4::after {
  left: 70%;
  top: 35px;
  width: 10px;
  height: 20px;
  border-width: 1px 1px 0 0;
}
/* graph_beginner */
.list_infographics .graph_beginner .ttl_school {
  margin-bottom: 1em;
  color: #000;
  font-size: 20px;
  text-align: center;
}
.list_infographics .graph_beginner .txt_percent {
  display: flex;
  justify-content: space-between;
}
.list_infographics .graph_beginner .txt_percent > p {
  text-align: center;
}
.list_infographics .graph_beginner .txt_percent .beginner {
  color: #c172be;
}
.list_infographics .graph_beginner .txt_percent .experienced {
  color: #5586e2;
}
.list_infographics .graph_beginner .txt_percent .num {
  display: inline-block;
  opacity: 0;
  transition: transform 2s, opacity 2s;
}
.list_infographics .animation.on .txt_percent .num {
  opacity: 1;
}
.list_infographics .graph_beginner .graph_line {
  display: inline-block;
  height: 24px;
  opacity: 0;
}
.list_infographics .animation.on .graph_line {
  opacity: 1;
  animation: grapg01 1.5s forwards;
}
.list_infographics .graph_beginner .graph {
  overflow: hidden;
}
.list_infographics .graph_beginner .graph_line.beginner {
  margin-right: 1%;
  background: #c172be;
}
.list_infographics .graph_beginner .graph_line.experienced {
  background: #5586e2;
}
.list_infographics .graph_beginner .kyouyou .graph_line.beginner {
  width: 89%;
}
.list_infographics .graph_beginner .kyouyou .graph_line.experienced {
  width: 10%;
}
.list_infographics .graph_beginner .investment .graph_line.beginner {
  width: 62%;
}
.list_infographics .graph_beginner .investment .graph_line.experienced {
  width: 37%;
}
@media screen and (min-width: 720px) {
  .list_infographics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list_infographics li {
    display: flex;
    flex-direction: column;
    width: 48.5%;
  }
  .list_infographics li:nth-child(n + 3) {
    margin-top: 30px;
  }
  .list_infographics .info_body {
    height: 100%;
  }
  .list_infographics .info_09 .wrap_graph {
    display: flex;
    justify-content: space-between;
  }
  .list_infographics .info_09 .wrap_graph .graph_beginner {
    width: 43%;
  }
}
@media screen and (max-width: 719px) {
  .list_infographics li + li {
    margin-top: 30px;
  }
  .list_infographics .graph_beginner + .graph_beginner {
    margin-top: 50px;
  }
}
@media screen and (max-width: 399px) {
  .list_infographics .info_02 .num_01 span {
    letter-spacing: -0.01em;
  }
}

/* ------------------------------
animation
------------------------------ */
/* grapg01 */
@keyframes grapg01 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* circle01 */
@keyframes circle01_1 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 101 566;
  }
}
@keyframes circle01_2 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 242 566;
  }
}
@keyframes circle01_3 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {stroke-dasharray: 468 566;
  }
}
@keyframes circle01_4 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 566 566;
  }
}

/* circle02 */
@keyframes circle02_1 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 290 566;
  }
}
@keyframes circle02_2 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 400 566;
  }
}
@keyframes circle02_3 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {stroke-dasharray: 550 566;
  }
}
@keyframes circle02_4 {
  0% {
    stroke-dasharray: 0 566;
  }
  100% {
    stroke-dasharray: 566 566;
  }
}