@charset "UTF-8";
#talent {
 background: url("../images/talent/japan.png") no-repeat center top 10vw #79c0de;
 background-size: 1400px auto;
 background-attachment: fixed;
 color: #fcfcfc;
 padding: 8rem 3%;
}
#talent .inner {
 width: 1000px;
}
#talent .secTtl {
 height: 6em;
 width: auto;
 display: block;
 text-align: center;
 position: relative;
 margin-bottom: 5rem;
}
#talent .secTtl img {
 height: 100%;
 width: auto;
 margin: 0 auto;
}
#talent .lead {
 width: 60%;
 margin: 0 auto 3rem;
 font-size: 90%;
 text-align: justify;
}
#talent h3 {
 text-align: center;
 font-size: 24px;
 font-weight: bold;
 line-height: 1;
}
#talent .area {
 position: relative;
}
#talent .area > li {
 width: 190px;
 position: absolute;
}
#talent .area > li.big {
 width: 285px;
}
#talent .area > li:hover {
 z-index: 100;
}
#talent .area > li:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 border-radius: 12px;
}
#talent .tohoku > li:after {
 background: url("../images/top/hex_blue.png") no-repeat;
 background-size: cover;
 opacity: 0.7;
}
#talent .kanto > li:after {
 background: url("../images/top/hex_green.png") no-repeat;
 background-size: cover;
 opacity: 0.8;
}
#talent .chubu > li:after {
 background: url("../images/top/hex_yellow.png") no-repeat;
 background-size: cover;
 opacity: 0.8;
}
#talent .kinki > li:after {
 background: url("../images/top/hex_orange.png") no-repeat;
 background-size: cover;
 opacity: 0.85;
}
#talent .chugoku > li:after {
 background: url("../images/top/hex_pink.png") no-repeat;
 background-size: cover;
 opacity: 0.8;
}
#talent .shikoku > li:after {
 background: url("../images/top/hex_purple.png") no-repeat;
 background-size: cover;
 opacity: 0.85;
}
#talent .kyushu > li:after {
 background: url("../images/top/hex_red.png") no-repeat;
 background-size: cover;
 opacity: 0.85;
}
#talent .area > li:hover:after {
 opacity: 1;
}
@media screen and (min-width:1000px) {
 .tohoku {
  margin: 30px 0 0;
  height: 290px;
 }
 .kanto {
  height: 413px;
  margin: 63px 0 0;
 }
 .chubu {
  height: 412px;
  margin: -25px 0 0 0;
 }
 .kinki {
  margin: -40px 0 0 0;
  height: 401px;
 }
 .chugoku {
  margin: 70px 0 0 117px;
  height: 242px;
 }
 .shikoku {
  margin: -100px 0 0 117px;
  height: 242px;
 }
 .kyushu {
  margin: 23px 0 0 0;
  height: 375px;
 }
 /* 北海道・東北 */
 .hokkaido {
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
 }
 .aomori {
  top: 42px;
  left: 68px;
 }
 .iwate {
  top: -42px;
  left: 598px;
 }
 .miyagi {
  left: 743px;
  top: 0;
 }
 .akita {
  top: -42px;
  left: 213px;
 }
 .yamagata {
  top: 125px;
  left: 213px;
 }
 .fukushima {
  top: 125px;
  left: 598px;
 }
 /* 関東 */
 .ibaraki {
  right: -3px;
  top: -127px;
 }
 .tochigi {
  right: 141px;
  top: -85px;
 }
 .gunma {
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
 }
 .saitama {
  top: -85px;
  left: 142px;
 }
 .chiba {
  top: 329px;
  right: 20px;
 }
 .tokyo {
  top: 40px;
  right: -3px;
 }
 .kanagawa {
  right: 141px;
  top: 164px;
 }
 .yamanashi {
  top: 40px;
  left: -3px;
 }
 .nagano {
  top: -127px;
  left: -3px;
 }
 .niigata {
  top: 164px;
  left: 142px;
 }
 /* 中部 */
 .toyama {
  top: 0;
  left: 142px;
 }
 .ishikawa {
  left: -74px;
  top: -123px;
 }
 .fukui {
  right: 141px;
  top: 0;
 }
 .gifu {
  left: 213px;
  top: 248px;
 }
 .shizuoka {
  right: 357px;
  top: 124px;
 }
 .aichi {
  left: -72px;
  top: 125px;
 }
 
 .mie {
  left: 597px;
  top: 248px;
 }
 /* 近畿 */
 .shiga {
  right: 21px;
  top: 78px;
 }
 .kyoto {
  top: 120px;
		left: 165px;
 }
 .osaka {
  left: 21px;
    top: 244px;
 }
 .awaji {
  left: 21px;
  top: 78px;
 }
 .hyogo {
  left: 0;
		right: 0;
		margin: 0 auto;
  top: 78px;
 }
 .nara {
  right: 165px;
  top: 120px;
 }
 .wakayama {
  right: 21px;
  top: 245px;
 }
 /* 中国 */
 .tottori {
  left: 432px;
  top: -84px;
 }
 .shimane {
  left: 144px;
  top: 84px;
 }
 .okayama {
  left: 576px;
  top: 0;
 }
 .hiroshima {
  left: 288px;
  top: 0px;
 }
 .yamaguchi {
  left: -71px;
  top: -83px;
 }
 /* 四国 */
 .tokushima {
  left: 0;
  top: 0;
 }
 .kagawa {
  left: 143px;
  top: 84px;
 }
 .ehime {
  left: 599px;
  top: 0;
 }
 .kochi {
  left: 432px;
  top: 84px;
  
 }
 /* 九州・沖縄 */
 .fukuoka {
  right: 21px;
  top: 3px;
 }
 .saga {
  left: 259px;
  top: -39px;
 }
 .nagasaki {
  left: 259px;
  top: 127px;
 }
 .kumamoto {
  left: 404px;
  top: 44px;
 }
 .oita {
  left: 549px;
  top: -39px;
 }
 .miyazaki {
  left: 549px;
  top: 127px;
 }
 .kagoshima {
  left: 404px;
  top: 210px;
 }
 .okinawa {
  left: 20px;
  top: 3px;
 }
}
#talent .area > li:before {
 content: "";
 display: block;
 width: 100%;
 padding-top: 86.33%;
}
#talent .area > li a {
 display: block;
 background-size: cover;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 z-index: 10;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: visible;
 text-align: center;
 /*background: rgba(255,255,255,0.1);*/
}
#talent .area > li h4 {
 text-align: center;
 display: inline-block;
 font-size: 18px;
 font-weight: bold;
 white-space: nowrap;
 line-height: 1;
 margin: 9% 0 0;
 position: relative;
 z-index: 5;
 background: url("../images/talent/icon_fb.png") no-repeat left center;
 background-size: 1.2em auto;
 padding: 0.2em 0 0.15em 1.6em;
}
#talent .area > li ul.character {
 display: block;
 font-size: 0;
 letter-spacing: -0.4em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 100%;
 white-space: nowrap
}
#talent .area > li ul.character li {
 display: inline-block;
 margin: 0 0.125rem;
}
#talent .area > li ul.character li img {
 height: 105px;
 width: auto;
 display: inline-block;
 text-align: center;
}
#talent .area > li.kanagawa ul.character li {
 z-index: 2;
 position: relative;
}
#talent .area > li.kanagawa ul.character li:nth-child(4) {
 position: absolute;
 left: 193px;
 top: -70px;
 z-index: 1;
}
#talent .area > li.kanagawa ul.character li:nth-child(5) {
 position: absolute;
 left: 27px;
 top: -70px;
 z-index: 1;
}
@media screen and (max-width: 750px) {
#talent .area > li.kanagawa ul.character li:nth-child(4) {
 left: 175px;
}
#talent .area > li.kanagawa ul.character li:nth-child(5) {
 left: 2px;
}
}
#talent .area > li.saitama ul.character li {
 z-index: 2;
 position: relative;
}
#talent .area > li.saitama ul.character li:nth-child(4) {
 position: absolute;
 left: 193px;
 top: -70px;
 z-index: 1;
}
#talent .area > li.saitama ul.character li:nth-child(5) {
 position: absolute;
 left: 31px;
 top: -70px;
 z-index: 1;
}
#talent .area > li.saitama ul.character li:nth-child(6) {
 margin: 0 0 0 -0.125rem;
}
#talent .area > li.yamaguchi ul.character li:nth-child(1),
#talent .area > li.yamaguchi ul.character li:nth-child(2),
#talent .area > li.yamaguchi ul.character li:nth-child(3) {
 z-index: 2;
 position: relative;
}
#talent .area > li.yamaguchi ul.character li:nth-child(4) {
 position: absolute;
 left: 0px;
 top: -80px;
}
#talent .area > li.yamaguchi ul.character li:nth-child(5) {
 position: absolute;
 right: 5px;
 top: -70px;
}
#talent .area > li.aichi ul.character li {
 z-index: 2;
 position: relative;
}
#talent .area > li.aichi ul.character li:nth-child(1) {
  position: absolute;
 left: 40px;
 top: -80px;
 z-index: 1;
 }

#talent .area > li.aichi ul.character li:nth-child(3) {
 position: absolute;
 right: 45px;
 top: -70px;
 z-index: 1;
 }
@media screen and (max-width: 750px) {
#talent .area > li.aichi ul.character li:nth-child(1) {
 left: 20px;
 }
 #talent .area > li.aichi ul.character li:nth-child(3) {
 right: 25px;
 }
}
#talent .area > li.saga ul.character li:nth-child(1) {
 z-index: 2;
 position: relative;
}
#talent .area > li.saga ul.character li:nth-child(2) {
 z-index: 1;
 position: absolute;
 left: -36px;
 bottom: 0;
}
#talent .area > li.saga ul.character li:nth-child(3) {
 z-index: 1;
 position: absolute;
 right: -54px;
 bottom: 0;
}
#talent .area > li ul.name {
 display: block;
 text-align: center;
 position: absolute;
 width: 85%;
 bottom: 5%;
 left: 0;
 right: 0;
 margin: 0 auto;
 line-height: 1.3;
 z-index: 5;
}
#talent .area > li ul.name li {
 display: inline-block;
 line-height: 1;
 font-size: 13px;
 font-weight: bold;
 margin: 0 0.25em;
 letter-spacing: 0;
}
@media screen and (max-width: 750px) {
 #talent {
  background: #79c0de;
  padding: 3rem 0;
 }
 #talent:after {
  content: "";
  display: block;
  background: url("../images/talent/japan.png") no-repeat;
  background-size: cover;
  position: fixed;
  width: 100%;
  padding-top: 119.75%;
  left: 0;
  top: 22vw;
  z-index: 1;
  opacity: 0.3;
 }
 #talent .inner {
  overflow: hidden;
  z-index: 2;
  width: 100%;
 }
 #talent .secTtl {
  height: 4.2em;
  margin-bottom: 2rem;
 }
 #talent .lead {
  width: 100%;
  margin: 0 auto 2rem;
  font-size: 90%;
 }
 #talent h3 {
  margin: 3rem auto 1.5rem;
  font-size: 2rem;
 }
 #talent .area {
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding-left: 15px;
 }
 #talent .area::-webkit-scrollbar {
  display: none;
 }
 #talent .area > li {
  flex: 1 0 60%;
  margin: 0 5px 0 0;
  position: relative;
 }
 #talent .area > li.big {
  width: auto;
 }
 #talent .tohoku > li:after {
  background: #0f7ce3;
 }
 #talent .kanto > li:after {
  background: #45a316;
 }
 #talent .chubu > li:after {
  background: #f2ac03;
 }
 #talent .kinki > li:after {
  background: #f4760f;
 }
 #talent .chugoku > li:after {
  background: #fc23c1;
 }
 #talent .shikoku > li:after {
  background: #905ed5;
 }
 #talent .kyushu > li:after {
  background: #fa2424;
 }
 #talent .area > li:before {
  padding-top: 100%;
 }
 #talent .area > li a {
  position: absolute;
  border-radius: 0;
  overflow: hidden;
 }
 #talent .area > li h4 {
  font-size: 1.4em;
  margin: 1em 0 0;
 }
 #talent .area > li ul.character li {
  margin: 0;
 }
 #talent .area > li ul.character li img {
  height: 28vw;
 }
 #talent .area > li.hokkaido ul.character, #talent .area > li.tochigi ul.character, #talent .area > li.gunma ul.character,#talent .area > li.kanagawa ul.character, #talent .area > li.niigata ul.character, #talent .area > li.nara ul.character,  #talent .area > li.saga ul.character, #talent .area > li.okinawa ul.character {
  top: 65%;
 }
 #talent .area > li.hokkaido ul.character li img,#talent .area > li.miyagi ul.character li img, #talent .area > li.tochigi ul.character li img, #talent .area > li.gunma ul.character li img, #talent .area > li.saitama ul.character li img, #talent .area > li.kanagawa ul.character li img, #talent .area > li.niigata ul.character li img,#talent .area > li.aichi ul.character li img,#talent .area > li.nara ul.character li img, #talent .area > li.yamaguchi ul.character li img, #talent .area > li.saga ul.character li img, #talent .area > li.okinawa ul.character li img {
  height: 20vw;
  margin-top: -8vw;
 }
  #talent .area > li.miyagi ul.character,
 #talent .area > li.saitama ul.character,
 #talent .area > li.aichi ul.character,
 #talent .area > li.yamaguchi ul.character {
  top: 60%;
 }
 #talent .area > li.saitama ul.character li:nth-child(4) {
		right: -0.5vw;
		left: auto;
  top: -12vw;
 }
 #talent .area > li.saitama ul.character li:nth-child(5) {
  left: 2vw;
		right: auto;
  top: -12vw;
 }
 #talent .area > li ul.name {
  width: 100%;
  bottom: 1em;
  padding: 0 5px;
  line-height: 1;
 }
 #talent .area > li ul.name li {
  font-size: 1rem;
 }
 #talent .area > li.saga ul.character li:nth-child(1) {
 margin-right: -10px;
}
#talent .area > li.saga ul.character li:nth-child(2) {
 position: relative;
 left: auto;
 bottom: auto;
}
#talent .area > li.saga ul.character li:nth-child(3) {
 position: relative;
 right: auto;
 bottom: auto;
 margin-left: -10px;
}
}