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

.mkh_map_topwrap{
  display: flow-root;
  max-width: 1366px;
  margin-inline: auto;
  padding-left: 32px;
  box-sizing: content-box;
}
.mkh_topDetail-wrap{
  margin-top: clamp(0rem, -31.475rem + 52.46vw, 10rem);/* 0-160  960-1265 */
}
.mkh_map_TopHeading{
  font-family: var(--font-Zenmaru);
  font-size: clamp(1.25em,3.5vw,3.375em);
  font-weight: 900;
  color: #295167;
  line-height: calc(80/54);
  letter-spacing: 0.064em;
  white-space: nowrap;
}
.mkh_map_topDetailTxt{
  font-size: clamp(0.875em,2vw,1em);
  font-weight: 500;
  line-height: calc(32/16);
  letter-spacing: 0.1em;
  margin-top: 38px;/* 40-64 960-1254 */
}


/* mkh_map_img */
.mkh_map_img{
  position: relative;
  max-width: 907px;
  margin-inline-start: auto;
  text-align: center;
  margin-top: 24px;
  float: right;
  shape-outside: url(../img/map_sign.webp);
  shape-margin: 120px;
  margin-left: 40px;
}
 /* それぞれのブロック */
.mkh_map_Item{
  cursor: pointer;
}
/* それぞれのブロック リンク */
.mkh_map_Area{
  position: absolute;
  inset:0;
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
}
/* それぞれのブロック 吹き出し */
.mkh_map_tipwrap{
  position: absolute;
  display: inline-block;
  max-width: min-content;
  min-width: 318px;
  background-color: #295267;
  border: 2px solid #FFFFFF;
  border-radius: 15px;
  z-index: 8;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mkh_map_tipwrap::before,
.mkh_map_tipwrap::after{
  content: "";
  position: absolute;
  clip-path: polygon(0% 0%, 45% 100%, 100% 100%);
}
.mkh_map_tipwrap::before{
  width: 38px;
  height: 28px;
  background-color: #FFFFFF;
  border-radius: 10px 0 0 10px;
}
.mkh_map_tipwrap::after{
  width: 32px;
  height: 24px;
  background-color: #295267;
}
.mkh_map_tipwrap a{
  display: block;
  padding: 16px;
}
.mkh_map_tipTag{
  display: block;
  width: fit-content;
  font-family: var(--font-Zenmaru);
  font-size: 0.875em;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.064em;
  white-space: nowrap;
  padding: 1px 16px;
  border: 1px solid #FFFFFF;
  border-radius: 12px;
}
.mkh_map_tipHeading{
  margin-top: 14px;
  font-family: var(--font-Zenmaru);
  font-size: clamp(1.125em,2.5vw,2em);
  text-align: left;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.064em;
  white-space: nowrap;
}
p.mkh_map_tipTxt{
  font-size: 0.625em;
  color: #FFFFFF;
  text-align: left;
  font-weight: 500;
  line-height: calc(17/10);
  letter-spacing: 0.1em;
  margin-top: 14px;
}
.mkh_map_tipwrap b{
  display: block;
  font-size: 0.875em;
  color: #E1C569;
  text-align: end;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 8px;
  transition: opacity 0.2s ease;
}
/* 経営・事業戦略 */
.mkh_map_Item_bs{
  position: absolute;
  top: 6%;
  right: 20%;
  width: 47%;
  height: 29%;
}
.mkh_map_Area_bs{
  clip-path: polygon(15% 23%, 39% 7%, 100% 33%, 100% 52%, 42% 96%, 4% 64%, 11% 54%);
}
.mkh_mapTip_bs{
  top: -54px;
  left: -62%;
}
.mkh_mapTip_bs::before{
  bottom: -28px;
  right: 12px;
  transform: scale(-1);
}
.mkh_mapTip_bs::after{
  bottom: -24px;
  right: 16px;
  transform: scale(-1);
}
/* 商品開発 */
.mkh_map_Item_development{
  position: absolute;
  top: 31%;
  left: 31%;
  width: 69%;
  height: 26%;
}
.mkh_map_Area_development{
  clip-path: polygon(27% 40%, 70% 0%, 91% 31%, 31% 100%, 0% 60%, 0% 0%, 10% 0%);
}
.mkh_mapTip_development{
  top: 147px;
  left: 40%;
}
.mkh_mapTip_development::before{
  top: -28px;
  left: 53px;
  transform: scaleX(-1);
}
.mkh_mapTip_development::after{
  top: -22px;
  left: 54px;
  transform: scaleX(-1);
}
/* 商品開発 */
.mkh_map_Item_collaboration{
  position: absolute;
  top: 32%;
  left: 0;
  width: 31%;
  height: 30%;
}
.mkh_map_Area_collaboration{
  clip-path: polygon(30% 0%, 100% 74%, 40% 100%, 0% 76%, 0% 20%);
}
.mkh_mapTip_collaboration{
  top: -90px;
  left: 53%;
}
.mkh_mapTip_collaboration::before{
  bottom: -28px;
  left: 48px;
  transform: scaleY(-1);
}
.mkh_mapTip_collaboration::after{
  bottom: -22px;
  left: 54px;
  transform: scaleY(-1);
}
/* 販売･宣伝 */
.mkh_map_Item_marketing{
  position: absolute;
  bottom: 9%;
  left: 47%;
  width: 53%;
  height: 34%;
}
.mkh_map_Area_marketing{
  clip-path: polygon(49% 0, 100% 38%, 100% 73%, 68% 100%, 0 43%, 22% 11%);
}
.mkh_mapTip_marketing{
  bottom: 230px;
  left: -40%;
}
.mkh_mapTip_marketing::before{
  bottom: -28px;
  right: 49px;
  transform: scale(-1);
}
.mkh_mapTip_marketing::after{
  bottom: -22px;
  right: 54px;
  transform: scale(-1);
}
/* 販路拡大 */
.mkh_map_Item_expansion{
  position: absolute;
  bottom: 0%;
  left: 13%;
  width: 56%;
  height: 30%;
}
.mkh_map_Area_expansion{
  clip-path: polygon(50% 0%, 100% 66%, 56% 100%, 0% 62%);
}
.mkh_mapTip_expansion{
  bottom: 211px;
  left: 68%;
}
.mkh_mapTip_expansion::before{
  bottom: -28px;
  left: 27px;
  transform: scaleY(-1);
}
.mkh_mapTip_expansion::after{
  bottom: -22px;
  left: 32px;
  transform: scaleY(-1);
}



@media screen and (min-width:821px){
  /* mkh_map_img */
  .mkh_map_Item:hover .mkh_map_tipwrap {
    visibility: visible;
    opacity: 1;
  }
  .mkh_map_tipBtn:hover{
    opacity: 0.7;
  }
}




@media screen and (max-width:1200px){
  .mkh_map_topwrap{
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .mkh_topDetail-wrap{
    display: contents;
  }
  .mkh_map_TopHeading{
    order: -1;
    padding: 0 16px;
  }
  .mkh_map_topDetailTxt {
    order: 2;
    padding: 0 16px;
  }
  

  /* mkh_map_img */
  .mkh_map_img {
    float: unset;
    shape-margin: unset;
    margin-inline: auto;
    margin-top: clamp(-100px, calc(-100 * ((100vw - 430px) / 530)), 0px);/* 0 - -100 430-960 */
    padding: 0 8px;
  }
}


@keyframes show_bs{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  2.5%{
    opacity: 1;
    visibility: visible;
  }
  17.5%{
    opacity: 1;
    visibility: visible;
  }
  20%{
    opacity: 0;
    visibility: hidden;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes show_dev{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  20%{
    opacity: 0;
    visibility: hidden;
  }
  22.5%{
    opacity: 1;
    visibility: visible;
  }
  37.5%{
    opacity: 1;
    visibility: visible;
  }
  40%{
    opacity: 0;
    visibility: hidden;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes show_coll{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  40%{
    opacity: 0;
    visibility: hidden;
  }
  42.5%{
    opacity: 1;
    visibility: visible;
  }
  57.5%{
    opacity: 1;
    visibility: visible;
  }
  60%{
    opacity: 0;
    visibility: hidden;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes show_mark{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  60%{
    opacity: 0;
    visibility: hidden;
  }
  62.5%{
    opacity: 1;
    visibility: visible;
  }
  77.5%{
    opacity: 1;
    visibility: visible;
  }
  80%{
    opacity: 0;
    visibility: hidden;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes show_expa{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  80%{
    opacity: 0;
    visibility: hidden;
  }
  82.5%{
    opacity: 1;
    visibility: visible;
  }
  97.5%{
    opacity: 1;
    visibility: visible;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
@media screen and (max-width:820px){
  .mkh_mapTip_bs{
    top: -28px;
    left: 34%;
  }
  .mkh_mapTip_bs::before{
    right: 24.4634vw;
    transform: scaleY(-1);
  }
  .mkh_mapTip_bs::after{
    right: 24.951vw;
    transform: scaleY(-1);
  }

  .mkh_mapTip_development{
    top: 16.926vw;
    left: 30%;
  }
  .mkh_mapTip_development::before{
    left: 6.463vw;
  }
  .mkh_mapTip_development::after{
    left: 6.585vw;
  }

  .mkh_mapTip_collaboration{
    top: 2.025vw;
  }
  .mkh_mapTip_collaboration::before{
    left: 5.853vw;
  }
  .mkh_mapTip_collaboration::after{
    left: 6.585vw;
  }

  .mkh_mapTip_marketing{
    bottom: 37.048vw;
    left: -46%;
  }
  .mkh_mapTip_marketing::before{
    right: 9.975vw;
  }
  .mkh_mapTip_marketing::after{
    right: 10.585vw;
  }

  .mkh_mapTip_expansion{
    bottom: 33.731vw;
    left: 66%;
  }
  .mkh_mapTip_expansion::before{
    left: 3.292vw;
  }
  .mkh_mapTip_expansion::after{
    left: 3.902vw;
  }




  .mkh_map_tipwrap{
    min-width: auto;
    border-radius: 8px
  }
  .mkh_map_tipwrap a{
    padding: 9px 14px;
  }
  .mkh_tip_map{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mkh_tip_map::after{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../img/icon_bubble_arw.svg) center center no-repeat;
  }
  .mkh_map_tipTag{
    font-size: clamp(0.625rem, 0.349rem + 1.03vw, 0.875rem);/*10-14 430-820*/
  }
  .mkh_map_tipHeading{
    margin-top: -2px;
    font-size: clamp(0.875rem, 0.599rem + 1.03vw, 1.125rem);/*14-18 430-820*/
  }
  .mkh_map_tipHeading br{
    display: none;
  }
  p.mkh_map_tipTxt{display: none;}
  .mkh_map_tipBtn{display: none;}
  .mkh_map_tipwrap b{display: none;}

  .mkh_mapTip_bs{
    animation: show_bs 20s ease infinite;
  }
  .mkh_mapTip_development{
    animation: show_dev 20s ease infinite;
  }
  .mkh_mapTip_collaboration{
    animation: show_coll 20s ease infinite;
  }
  .mkh_mapTip_marketing{
    animation: show_mark 20s ease infinite;
  }
  .mkh_mapTip_expansion{
    animation: show_expa 20s ease infinite;
  }
}
@media screen and (max-width:560px){
  .mkh_mapTip_bs{
    left: 13%;
  }

  .mkh_mapTip_development {
    top: 29.926vw;
    left: 7%;
  }

  .mkh_mapTip_marketing{
    bottom: 39.048vw;
    left: -77%;
  }
  .mkh_mapTip_marketing::before{
    right: 11.975vw;
  }
  .mkh_mapTip_marketing::after{
    right: 13vw;
  }

  .mkh_mapTip_expansion{
    bottom: 38.731vw;
    left: 49%;
  }
  .mkh_mapTip_expansion::before{
    left: 15.292vw;
  }
  .mkh_mapTip_expansion::after{
    left: 16.302vw;
  }
}
@media screen and (max-width:430px){
  .mkh_mapTip_bs{
    left: -22%;
  }
  .mkh_mapTip_bs::before{
    right: 21.4634vw;
  }
  .mkh_mapTip_bs::after{
    right: 20.951vw;
  }

  .mkh_mapTip_development{
    top: 33.926vw;
    left: -19%;
  }
  .mkh_mapTip_development::before{
    left: 19.463vw;
  }
  .mkh_mapTip_development::after{
    left: 19.585vw;
  }

  .mkh_mapTip_collaboration {
    top: -3.975vw;
  }
  .mkh_mapTip_collaboration::before{
    left: 5.853vw;
  }
  .mkh_mapTip_collaboration::after{
    left: 7vw;
  }

  .mkh_mapTip_marketing{
    left: -78%;
  }
  .mkh_mapTip_marketing::before{
    right: 27.5vw;
  }
  .mkh_mapTip_marketing::after{
    right: 28.585vw;
  }

  .mkh_mapTip_expansion{
    bottom: 38.731vw;
    left: 27%;
  }
  .mkh_mapTip_expansion::before{
    left: 24.292vw;
  }
  .mkh_mapTip_expansion::after{
    left: 25.902vw;
  }
}