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

body { background-color: #1771bf; }

/*============================
#topPanelArea
============================*/
#topPanelArea {}
#topPanelArea h1 {}
#topPanelArea .en {}

/*============================
#dataArea
============================*/
#dataArea {}
#dataArea .topCopy { padding-bottom: 80px; font-size: 1.375em; line-height: 2; font-weight: 500; font-feature-settings: 'palt'; color: #fff; }
#dataArea .container { overflow: hidden; padding: 30px 0 0 0; background-color: #fff; box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; }
#dataArea .container .title { text-align: center; font-weight: 600; color: #1771bf; font-size: 1.5em; }
#dataArea .container .data {}
#dataArea .container .note { position: absolute; text-align: center; bottom: 0; padding: 20px 0; width: 100%; background-color: #c6fcf1; color: #00377e; }
#dataArea .wrapper { margin-top: 20px; display: flex; gap: 20px; }
#dataArea .container.manWomen { position: relative; height: 600px; margin-top: 70px; width: 100%; }
#dataArea .container.manWomen .title {}
#dataArea .container.manWomen .data .graph-wrap { position: absolute; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; }
#dataArea .container.manWomen .data .graph-wrap .circle { transform:rotate(-90deg); }
#dataArea .container.manWomen .data .graph-wrap .circle circle { fill: none; stroke-width: 12px; }
#dataArea .container.manWomen .data .graph-wrap .circle circle:nth-child(1) { stroke: #ff7a6a; stroke-dashoffset: 0; animation: anime01 1.5s 0s forwards ease-in-out; }
@keyframes anime01 {
  0% {
    stroke-dasharray: 0,100;　
  }
  50%, 100% {
    stroke-dasharray: 39,100;　
  }
}
#dataArea .container.manWomen .data .graph-wrap .circle circle:nth-child(2) { stroke: #1771bf; stroke-dashoffset: 80; animation: anime02 1.5s 0.7s forwards ease-in-out; stroke-dasharray: 0, 100; }
@keyframes anime02 {
  0% {
    stroke-dasharray: 0,100;
  }
  50%, 100% {
    stroke-dasharray: 64,55;
  }
}
#dataArea .container.manWomen .data .man { position: absolute; top: 50%; left: 150px; transform: translateY(-50%); }
#dataArea .container.manWomen .data .man:before { content: ''; position: absolute; left: -83px; top: 50%; transform: translateY(-50%); background-image: url("../../imageFile/data/icon_man.svg"); background-repeat: no-repeat; background-size: contain; width: 65px; height: 145px; }
#dataArea .container.manWomen .data .man .sub { color: #1771bf; font-weight: 600; font-size: 1.125em; }
#dataArea .container.manWomen .data .man .main { color: #1771bf; font-size: 2.5em; font-weight: 800; }
#dataArea .container.manWomen .data .man .main span { color: #1771bf; font-size: 2.4em; font-weight: 800; }
#dataArea .container.manWomen .data .women { position: absolute; top: 50%; right: 150px; transform: translateY(-50%); }
#dataArea .container.manWomen .data .women:before { content: ''; position: absolute; right: -75px; top: 50%; transform: translateY(-50%); background-image: url("../../imageFile/data/icon_women.svg"); background-repeat: no-repeat; background-size: contain; width: 69px; height: 145px; }
#dataArea .container.manWomen .data .women .sub { color: #ff7a6a; font-weight: 600; font-size: 1.125em; }
#dataArea .container.manWomen .data .women .main { color: #ff7a6a; font-size: 2.5em; font-weight: 800; }
#dataArea .container.manWomen .data .women .main span { color: #ff7a6a; font-size: 2.4em; font-weight: 800; }
#dataArea .container.manWomen .note { line-height: 1.5em; }
#dataArea .container.manWomen .note:before { content: ''; position: absolute; bottom: 0; right: 230px; background-image: url("../../imageFile/data/person01.png"); background-size: contain; background-repeat: no-repeat; width: 120px; height: 143px; }
#dataArea .wrapper .container.overwork { position: relative; width: 50%; height: 480px; }
#dataArea .wrapper .container.overwork:before { content: ''; position: absolute; right: 50px; top: 80px; background-image: url("../../imageFile/data/icon_overtime.svg"); background-size: contain; background-repeat: no-repeat; width: 133px; height: 134px; }
#dataArea .wrapper .container.overwork .title {}
#dataArea .wrapper .container.overwork .data { position: absolute; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#dataArea .wrapper .container.overwork .data .main { color: #1771bf; font-size: 2.25em; font-weight: 800; }
#dataArea .wrapper .container.overwork .data .main span { color: #1771bf; font-size: 3.25em; font-weight: 800; }
#dataArea .wrapper .container.overwork .data .sub { margin-top: 15px; color: #1771bf; font-size: 1.125em; font-weight: 600; }
#dataArea .wrapper .container.overwork .note { line-height: 1.5em; }
#dataArea .wrapper .container.overwork .note:before { content: ''; position: absolute; bottom: 0; left: 10px; background-image: url("../../imageFile/data/person02.png"); background-size: contain; background-repeat: no-repeat; width: 150px; height: 167px; }
#dataArea .wrapper .container.holiday { position: relative; width: 50%; height: 480px; }
#dataArea .wrapper .container.holiday:before { content: ''; position: absolute; left: 32px; bottom: 80px; background-image: url("../../imageFile/data/icon_holiday01.svg"); background-size: contain; background-repeat: no-repeat; width: 117px; height: 142px; }
#dataArea .wrapper .container.holiday:after { content: ''; position: absolute; right: 30px; top: 65px; background-image: url("../../imageFile/data/icon_holiday02.svg"); background-size: contain; background-repeat: no-repeat; width: 161px; height: 157px; }
#dataArea .wrapper .container.holiday .title {}
#dataArea .wrapper .container.holiday .data { position: absolute; color: #1771bf; font-size: 2.25em; font-weight: 800; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#dataArea .wrapper .container.holiday .data span { color: #1771bf; font-size: 3.25em; font-weight: 800; }
#dataArea .wrapper .container.holiday .note { line-height: 1.5em; }
#dataArea .wrapper .container.holiday .note:before { content: ''; position: absolute; bottom: 0; right: 10px; background-image: url("../../imageFile/data/person03.png"); background-size: contain; background-repeat: no-repeat; width: 100px; height: 181px; }
#dataArea .container.native { position: relative; height: 440px; margin-top: 20px; }
#dataArea .container.native .title {}
#dataArea .container.native .data {}
#dataArea .container.native .data .image { margin: 0 auto; width: 595px; height: 297px; }
#dataArea .container.native .data .image img { width: 100%; height: auto; }
#dataArea .container.native .data .bubble.kyoto { position: absolute; text-align: center; top: 30px; left: 200px; width: 200px; height: 200px; display: flex; flex-direction: column; justify-content: center; }
#dataArea .container.native .data .bubble.kyoto:before { content: ''; position: absolute; transform: rotate(34deg); right: -10px; bottom: 25px; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 34px solid #00377e; border-right: 0; }
#dataArea .container.native .data .bubble.kyoto:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #00377e; width: 200px; height: 200px; border-radius: 50%; z-index: 0; }
#dataArea .container.native .data .bubble.kyoto .sub { position: relative; z-index: 1; color: #fff; font-size: 1.125em; font-weight: 600; }
#dataArea .container.native .data .bubble.kyoto .main { position: relative; z-index: 1; color: #fff; font-size: 2.5em; font-weight: 800; }
#dataArea .container.native .data .bubble.kyoto .main span { position: relative; z-index: 1; color: #fff; font-size: 2.35em; font-weight: 800; letter-spacing: normal; }
#dataArea .container.native .data .bubble.kansai { position: absolute; text-align: center; bottom: 100px; right: 280px; width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; }
#dataArea .container.native .data .bubble.kansai:before { content: ''; position: absolute; transform: rotate(200deg); left: -25px; top: 35px; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 34px solid #1771bf; border-right: 0; }
#dataArea .container.native .data .bubble.kansai:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1771bf; width: 150px; height: 150px; border-radius: 50%; z-index: 0; }
#dataArea .container.native .data .bubble.kansai .sub { position: relative; z-index: 1; color: #fff; font-size: 1.125em; font-weight: 600; }
#dataArea .container.native .data .bubble.kansai .main { position: relative; z-index: 1; color: #fff; font-size: 2em; font-weight: 800; }
#dataArea .container.native .data .bubble.kansai .main span { position: relative; z-index: 1; color: #fff; font-size: 1.75em; font-weight: 800; letter-spacing: normal; }
#dataArea .container.native .data .bubble.other { position: absolute; text-align: center; top: 100px; right: 155px; }
#dataArea .container.native .data .bubble.other:before { content: ''; position: absolute; transform: rotate(150deg); left: -35px; bottom: -15px; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 34px solid #4b7ba6; border-right: 0; }
#dataArea .container.native .data .bubble.other:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #4b7ba6; width: 120px; height: 120px; border-radius: 50%; z-index: 0; }
#dataArea .container.native .data .bubble.other .sub { position: relative; z-index: 1; color: #fff; font-size: 0.875em; font-weight: 600; }
#dataArea .container.native .data .bubble.other .main { position: relative; z-index: 1; color: #fff; font-size: 1.5em; font-weight: 800; }
#dataArea .container.native .data .bubble.other .main span { position: relative; z-index: 1; color: #fff; font-size: 1.75em; font-weight: 800; letter-spacing: normal; }
#dataArea .container.native .note { line-height: 1.5em; }
#dataArea .container.native .note:before { content: ''; position: absolute; bottom: 0; right: 345px; background-image: url("../../imageFile/data/person04.png"); background-size: contain; background-repeat: no-repeat; width: 100px; height: 132px; }
#dataArea .wrapper .container.trip { position: relative; width: 50%; height: 480px; }
#dataArea .wrapper .container.trip:before { content: ''; position: absolute; left: 15px; bottom: 75px; background-image:url("../../imageFile/data/icon_tirp01.svg"); background-size: contain; background-repeat: no-repeat; width: 230px; height: 89px; }
#dataArea .wrapper .container.trip:after { content: ''; position: absolute; right: 50px; top: 80px; background-image:url("../../imageFile/data/icon_trip02.svg"); background-size: contain; background-repeat: no-repeat; width: 138px; height: 119px; }
#dataArea .wrapper .container.trip .title {}
#dataArea .wrapper .container.trip .data { position: absolute; color: #1771bf; font-size: 2.25em; font-weight: 800; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#dataArea .wrapper .container.trip .data span { color: #1771bf; font-size: 3.25em; font-weight: 800; }
#dataArea .wrapper .container.trip .note { line-height: 1.5em; }
#dataArea .wrapper .container.trip .note:before { content: ''; position: absolute; bottom: 0; right: -20px; background-image: url("../../imageFile/data/person05.png"); background-size: contain; background-repeat: no-repeat; width: 100px; height: 127px; }
#dataArea .wrapper .container.childcare { position: relative; width: 50%; height: 480px; }
#dataArea .wrapper .container.childcare:before { content: ''; position: absolute; bottom: 80px; left: 35px; transform: rotate(300deg); background-image: url("../../imageFile/data/icon_chilcare.svg"); background-size: contain; background-repeat: no-repeat; width: 102px; height: 105px; }
#dataArea .wrapper .container.childcare .title {}
#dataArea .wrapper .container.childcare .data { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#dataArea .wrapper .container.childcare .data .graph-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 470px; height: 470px; }
#dataArea .wrapper .container.childcare .data .graph-wrap .circle { transform:rotate(-90deg); }
#dataArea .wrapper .container.childcare .data .graph-wrap .circle circle { fill: none; stroke-width: 8px; }
#dataArea .wrapper .container.childcare .data .graph-wrap .circle circle:nth-child(1) { stroke: #ff7a6a; stroke-dashoffset: 0; animation: anime03 1.5s 0s forwards ease-in-out; }
@keyframes anime03 {
  0% {
    stroke-dasharray: 0,100;　
  }
  50%, 100% {
    stroke-dasharray: 100,100;　
  }
}
#dataArea .wrapper .container.childcare .data .sub { color: #ff7a6a; font-weight: 500; }
#dataArea .wrapper .container.childcare .data .main { color: #ff7a6a; font-size: 2.5em; font-weight: 800; }
#dataArea .wrapper .container.childcare .data .main span { color: #ff7a6a; font-size: 1.6em; font-weight: 800; letter-spacing: normal; }
#dataArea .wrapper .container.childcare .note { line-height: 1.5em; }
#dataArea .wrapper .container.childcare .note:before { content: ''; position: absolute; bottom: 0; right: 20px; background-image: url("../../imageFile/data/person06.png"); background-size: contain; background-repeat: no-repeat; width: 100px; height: 138px; }


/*============================
#pankuzuArea
============================*/
.md_pankuzuArea.top {}
.md_pankuzuArea.top ul {}
.md_pankuzuArea.top ul li {}
.md_pankuzuArea ul li:first-child a { background: url(../../imageFile/global/icon_home_wh.svg) no-repeat center!important; }
.md_pankuzuArea.top ul li a::after { border-top: 1px solid #eee; border-right: 1px solid #eee; }
.md_pankuzuArea.top ul li a span { color: #fff; }