@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page CSS
	Editor      : Bface Saeki
	Last Editor : Bface Chiba
	
	Update Description :
  [2022/09/29] top_recommend追加
  [2022/09/12] top_intro,top_pickup追加
	[2022/06/21] top_info修正
	[2022/03/10] 動画セクション追加
	[2022/03/01] プレスリリースセクション追加
====================================== */

/*========== Style Contents ==========

	1. Redefinition
  2. Section [top_hero]
  3. Section [top_info]
  4. Section [top_outline]
  5. Section [top_structure]
  6. Section [top_exhibitor]
  7. Section [top_others]
  8. Section [top_movie]
  9. Section [top_press]
  10. Section [top_intro]
  11. Section [top_pickup]
  12. Section [top_recommend]
  13. Animations
  14. Briefing

====================================== */



/*===== 1. Redefinition =====*/
/* box */
main { margin: 0 0 60px;}


@media (max-width: 1024px) {
  /* box */
  main { margin: 0 0 60px;}
}

@media (max-width: 768px) {
  /* box */
  main { margin: 0 0 8vw;}
}



/*===== 2. Section [top_hero]  =====*/
#top_hero {
  padding: 30px 0 0;
  background: /*url(../img/top/bg-visual.svg) repeat left top / 2px 2px, */url(../img/top/img-visual.jpg) no-repeat center center / cover;
  margin-bottom: 60px;
}

#top_hero #top_main #top_kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px 20px
}

#top_hero #top_main #top_kv .logo {
    width: 35%
}

#top_hero #top_main #top_kv .logo figure {
    width: 82%;
    margin: 0 auto 20px
}

#top_hero #top_main #top_kv .logo .flex {
    justify-content: center
}

#top_hero #top_main #top_kv .logo .flex li {
    width: calc(50% - 10px);
    margin: 5px
}

#top_hero #top_main #top_kv .logo .flex li a.boxlink {
    background: linear-gradient(135deg, #e7336e 0%, #b91f55 50%, #e7336e 100%) no-repeat left top / 200% auto;
    color: #fff;
    font-size: 1.6rem;
}

#top_hero #top_main #top_kv .logo .flex li a.boxlink span {
    z-index: 1;
    min-height: 60px;
}

#top_hero #top_main #top_kv .logo .flex li a.boxlink b {
    display: block;
    font-size: 1rem;
    margin-top: 5px
}

#top_hero #top_main #top_kv .logo .flex li a.boxlink:hover {
    background-position: right center;
    color: #ff0
}


#top_hero #main_announce {
    width: 50%;
    max-width: 800px;
    min-width: 0;
    margin: 0 100px;
    z-index: 0;
    position: relative
}


#top_hero #main_announce>div {
    display: flex;
    justify-content: space-between
}

#top_hero .slide{
  width: 100%;
  height: auto;
  background: #fff;
  line-height: 0;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}

::-webkit-full-page-media, :future, :root #top_hero .slide{
  background: rgba(0,0,0,0.5);
  }

#top_hero .slide a{
  position: relative;
}

#top_hero .slide a.soon{
	opacity: 1;
}
	
	
#top_hero .slide a:after{
  content:"";
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index: 2;
  border: 10px solid #000;
  opacity: .5;
}

#top_hero #top_banner {
  background: rgba(51,51,51,.9);
  width: 100%;
  padding: 20px;
  margin: 40px 0 0;
}

#top_hero #top_banner ul{
  display: flex;
  justify-content: center;
  margin: 0 auto;
/*	max-width: 1024px;*/
  flex-wrap: wrap;
}

#top_hero #top_banner li{
/*  width: calc(20% - 20px);*/
	width: calc(16.66% - 20px);
  margin: 0 10px;
  text-align: center;
}

#top_hero #top_banner li img{width: 100%;}

#top_hero #top_banner li a.soon{
  opacity: 1;
}

#bnr_area ul li img, #top_hero #top_banner li img {
	width: 100%
}
.slick-dots li button {
	width: 75px
}
#bnr_area {
	margin-bottom: 70px
}
#bnr_area ul {
	display: flex;
	justify-content: center;
	align-items: end;
}
#bnr_area ul li {
	width: 492px;
	margin: 0 10px
}

#bnr_area ul li p {
	text-align: center;
	font-size: 1.4rem;
	margin-bottom: 5px;
	font-weight: 700
}

#top_hero #top_banner02 {
  background: rgba(51,51,51,.7);
  width: 100%;
  padding: 10px;
  margin: 40px 0 0;
}


@media (max-width: 1024px) {
  main {
        margin: 0 0 60px
    }

    #top_hero #top_main #top_kv {
        flex-direction: column;
        padding: 0 5.33vw 2.66vw
    }

    #top_hero #top_main #top_kv .logo {
        width: 80%
    }

    #top_hero #top_main #top_kv .logo .flex li {
        width: 100%;
        margin: 1.33vw
    }
    #top_hero #main_announce {
        padding-top: 5.33vw;
        max-width: none;
        width: 90%
    }


  #top_hero .slide{
    width: auto;
    box-shadow: 1.33vw 1.33vw 2.66vw rgba(0,0,0,0.5);
  }

}


@media (max-width: 768px) {
  main {
        margin: 0 0 8vw
    }

    #top_hero {
        margin-bottom: 8vw
    }

    #top_hero #top_main #top_kv .logo,
    #top_others aside a img {
        width: 100%
    }
    #top_hero #top_main #top_kv .logo .flex li a.boxlink span {
    min-height: 5.5rem;
    padding: 1rem 5.34vw 1rem 2.66vw;
  }


  #top_hero .slide{
    width: auto;
    box-shadow: 1.33vw 1.33vw 2.66vw rgba(0,0,0,0.5);
  }
  
  #top_hero .slide a{
    padding: 0!important;
  }
  #top_hero .slide a:after{
    border: 1.33vw solid #000;
  }

  #top_hero #top_banner {
        padding: 2.66vw 0;
        margin: 8vw 0 0
    }
  
  #top_hero #top_banner li{
     width: calc(33.3% - 2.66vw);
    margin: 0 1.33vw;
  }
  
  .slick-dots li button {
    display: block;
    width: 6.66vw;
  }

  #bnr_area {
    margin: 0 auto 13.33vw;
    padding: 0 2.66vw
  }
  #bnr_area ul li {
    width: calc(50% - 2.66vw)
  }

}


/*===== 3. Section [top_info]  =====*/
#top_info {
  position: relative;
  margin-bottom: 60px;
  padding: 50px 0;
}

#top_info::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 87.5vw;
  height: 100%;
  background: rgba(170,170,170,.25);
  content: "";
}

#top_info > i {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(204,204,204,.5);
  font-size: 80px;
  font-family: 'Merriweather Sans', sans-serif;
  line-height: .8;
  transform: translateY(-50%);
}
#top_info > div > div{
  text-align: center;
  margin-top: 3rem;
}
#top_info > div > div p{
  position: relative;
  font-weight: bold;
  color: #fff;
  padding: 0.5rem 1.5rem;
  background: #000;
  display: inline-block;
  margin-bottom: 2rem;
}
#top_info > div > div p::after{
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  margin-left: -1rem;;
  border: 1rem solid transparent;
  border-top: 1.5rem solid #000;
}
#top_info > div > div a{
  display: block;
  width: 5rem;
  border: solid #000 0.1rem;
  padding: 1rem;
  background: #fff;
  margin: 0 auto;
}


#top_info > div > div img{vertical-align: bottom;}
#top_info ul {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 10px;
}

#top_info li:not(:last-child) { margin-bottom: 10px;}

#top_info ul li:not(:last-child) a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 30px 15px 20px;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
  border: 1px solid #ebebeb;
  background: rgba(255,255,255,.5);
  color: #333;
}
#top_info ul li:not(:last-child) a:not(.placeholder)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: #fff;
  content: "";
  opacity: 0;
  transition: .25s;
}
#top_info ul li:not(:last-child) 　a:hover::before { width: 100%; opacity: 1;}

#top_info ul li:not(:last-child) 　a:not(.placeholder)::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

#top_info ul li:not(:last-child) a.placeholder { pointer-events: none;}

#top_info ul time {
  position: relative;
  margin-right: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

#top_info ul time:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

#top_info ul span{
  display: inline-block;
  color: #ffffff;
  padding: 5px 10px;
  margin-right: 10px;
  width: 120px;
  text-align: center;
  font-size: 1.4rem;
}

#top_info ul span.information{background: #69bb3c;}
#top_info ul span.magazine{background: #4d87df;}
#top_info ul span.interview{background: #eba449;}


#top_info ul p {
  flex: 1;
  font-family: sans-serif;
}


@media (max-width: 768px) {
  #top_info {
    margin-bottom: 8vw;
    padding: 5.34vw 0 8vw;
  }

  #top_info > i { font-size: 3.0rem;}

  #top_info ul { padding: 0 2.67vw;}

  #top_info li:not(:last-child) { margin-bottom: 1.34vw;}

  #top_info ul li:not(:last-child) a {
    display: block;
    padding: 2.67vw 4vw;
    background: rgba(255,255,255,.7);
  }
  #top_info ul li:not(:last-child) a:not(.placeholder)::before { display: none;}

  #top_info ul li:not(:last-child) a:not(.placeholder)::after {
    right: 2.67vw;
    width: 1.34vw;
    height: 1.34vw;
  }

  #top_info ul time {
    display: inline-block;
    margin: 0 0 1.34vw;
    padding: 0 0 1.34vw;
    font-size: 1.4rem;
  }

  #top_info ul time:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 5.34vw;
    height: 1px;
  }

  #top_info ul p { font-size: 1.4rem;}
  
  #top_info ul span{
    padding: 0 2.66vw;
    margin: 0 0 0 1.33vw;
    width: auto;
    font-size: 1.2rem;
  }
}



/*===== 5. Section [top_outline]  =====*/
#top_outline {
  margin-bottom: 90px;
  position: relative;
}

#top_outline::before {
  position: absolute;
  bottom: calc(-30px);
  right: 0vw;
  z-index: -1;
  width: 87.5vw;
  height: calc(100% - 30px);
  background: rgba(170,170,170,.25);
  content: "";
}


@media (max-width: 1024px) {
  #top_outline::before {
    bottom: calc(-40px);
    height: calc(100% - 60px);
  }
}


@media (max-width: 768px) {
  #top_outline { margin: 0 2.67vw 10.67vw;}

  #top_outline::before {
    bottom: -2.67vw;
    right: -2.67vw;
    width: calc(87.5vw + 2.67vw);
    height: calc(100% - 10.67vw);
  }
}



/*===== 5. Section [top_structure]  =====*/
#top_structure { margin-bottom: 60px;}


@media (max-width: 768px) {
  #top_structure { margin: 0 2.67vw 8vw;}
}



/*===== 6. Section [top_exhibitor]  =====*/
#top_exhibitor { margin-bottom: 60px;}


@media (max-width: 768px) {
  #top_exhibitor { margin: 0 2.67vw 10.67vw;}
}

/*===== 6. Section [top_sns]  =====*/
#top_sns{
	margin-bottom: 80px;
}
#top_sns .flex2 > div{
  box-shadow: 2px 2px 5px rgb(0 0 0 / 25%);
  height: 400px;
  overflow-y: scroll;
}
@media (max-width: 768px) {
  #top_sns { margin: 0 2.67vw 10.67vw;}
  
  #top_sns .flex2 > div:first-child{
    margin-bottom: 5.33vw;
  }
}



/*===== 7. Section [top_others]  =====*/
#top_others .flex2 ul li {
/*  border: 1px solid #ccc;*/
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 1px;
  background: #fff;
}

#top_others .flex2 ul a,
#top_others .flex2 ul a img { display: block; padding: 0;}

#top_others aside {
  text-align: center;
}

#top_others aside .flex3::after{
  content: "";
  display: block;
  width: calc(33.33% - 10px);
}

#top_others aside a{
  max-width: 800px;
  margin: 0 0 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
  transition: .5s;
}

#top_others aside a:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
}

#top_others aside a img{
  vertical-align: middle;
}


@media (max-width: 768px) {
  #top_others { padding: 0 2.67vw;}
  
  #top_others .flex2 ul li {
    width: calc(50% - 2.68vw);
    margin: 0 1.34vw 1.34vw;
  }
  
/*
  #top_others aside{
    margin: 0 2.67vw;
  }
*/
  
  #top_others aside a {
    width: 100%;
    padding: 0!important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 1px 1px 1px rgb(0 0 0 / 15%);
    font-size: 1.8rem;
    transition: none;
    margin-bottom: 4vw;
  }
  
  #top_others aside a:hover {
    background-position: inherit;
    color: #fff;
  }
  #top_others aside a img{
      width: 100%;
  }
}


/*===== 8. Section [top_muvie]  =====*/

#top_movie{
  margin-bottom: 80px;
}

#top_movie > div > div{
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}

#top_movie > div iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (max-width: 768px) {
  #top_movie{
    margin: 0 2.67vw 10.67vw;
  }
}

/*===== 9. Section [top_press]  =====*/
#top_press {
  position: relative;
  margin-bottom: 60px;
  padding: 50px 0;
}

#top_press::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 87.5vw;
  height: 100%;
  background: rgba(170,170,170,.25);
  content: "";
}

#top_press > i {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(204,204,204,.5);
  font-size: 80px;
  font-family: 'Merriweather Sans', sans-serif;
  line-height: .8;
  transform: translateY(-50%);
}

#top_press ul {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 10px;
}

#top_press li:not(:last-child) { margin-bottom: 10px;}

#top_press ul li:not(:last-child) a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 20px 15px 30px;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
  border: 1px solid #ebebeb;
  background: rgba(255,255,255,.5);
  color: #333;
}
#top_press ul li:not(:last-child) a:not(.placeholder)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: #fff;
  content: "";
  opacity: 0;
  transition: .25s;
}
#top_press ul li:not(:last-child) a:hover::before { width: 100%; opacity: 1;}

#top_press ul li:not(:last-child) a:not(.placeholder)::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

#top_press ul a.placeholder { pointer-events: none;}

#top_press ul time {
  position: relative;
  margin-right: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

#top_press ul time:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

#top_press ul p {
  flex: 1;
  font-family: sans-serif;
}


@media (max-width: 768px) {
  #top_press {
    margin-bottom: 8vw;
    padding: 5.34vw 0 8vw;
  }

  #top_press > i { font-size: 3.0rem;}

  #top_press ul { padding: 0 2.67vw;}

  #top_press li:not(:last-child) { margin-bottom: 1.34vw;}

  #top_press ul li:not(:last-child) a {
    display: block;
    padding: 2.67vw 4vw;
    background: rgba(255,255,255,.7);
  }
  #top_press ul a:not(.placeholder)::before { display: none;}

  #top_press ul a:not(.placeholder)::after {
    right: 2.67vw;
    width: 1.34vw;
    height: 1.34vw;
  }

  #top_press ul time {
    display: block;
    margin: 0 0 1.34vw;
    padding: 0 0 1.34vw;
    font-size: 1.4rem;
  }

  #top_press ul time:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 5.34vw;
    height: 1px;
  }

  #top_press ul p { font-size: 1.4rem;}
}



/*===== 10. Section [top_intro] =====*/
#top_intro li{
  position: relative;
  background: #fff;
  padding: 20px 30px 20px 20px ;
  margin-right: 30px;
  width: calc(25% - 30px);
  font-weight: bold;
}

#top_intro li span{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
}

#top_intro li:nth-of-type(2) span{width: 38px;}
#top_intro li:nth-of-type(4) span{ width: 33px;}


#top_intro .arrow_down {
  position: relative;
  vertical-align: middle;
  text-decoration: none;
}


#top_intro .arrow_down::before{
  position: absolute;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#top_intro .arrow_down::before {
  top: -30px;
  right: 50%;
  transform: translateX(50%);
  box-sizing: border-box;
  border: 45px solid transparent;
  border-top: 25px solid #ededed;
}

@media (max-width: 768px){
  #top_intro{
    margin: 0 2.67vw 10.67vw;
  }
  
  #top_intro li{
    position: relative;
    background: #fff;
    padding: 20px 40px 20px 20px;
    margin-right: 0;
    width: 100%;
  }
  
  #top_intro li:nth-child(even){ padding: 20px 20px 20px 40px;}

  #top_intro li span{
    top: -2.66vw;
    right: -2.66vw;
    width: 8vw;
   z-index: 10;
  }
  
  #top_intro li:nth-child(even) span{left: -2.66vw;}
  #top_intro li:nth-of-type(2) span{width: 10.13vw;}
  #top_intro li:nth-of-type(4) span{ width: 8.8vw;}

  #top_intro .arrow_down {
    position: relative;
    vertical-align: middle;
    text-decoration: none;
  }
  
  #top_intro .arrow_down::before {
    top: -8vw;
    border: 12vw solid transparent;
    border-top: 6.67vw solid #ededed;
  }
 } 


/*===== ■11. Section [top_seminar] =====*/

#top_seminar .table_general table{
  height: auto;
}
.seminar_detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #666;
    font-size: 1.4rem;
}

@media (max-width: 768px){
  #top_seminar{
    margin:0 2.67vw 10.67vw;
  }
  
  #top_seminar figure {
      margin: 0 2.67vw 0 0;
      width: 32vw;
  }

}


/*===== ■11. Section [top_pickup] =====*/

#top_pickup ul.card_basic > li{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li a{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li a:hover{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li figure::before,
#top_pickup ul.card_basic > li figure::after{
  display: none;
}

#top_pickup ul.card_basic > li h3{
  border-bottom: 1px solid #ccc;
}

#top_pickup ul.card_basic > li figure img{
  border-radius: 10px 10px 0 0;
	width: 100%;
}

#top_pickup ul.card_basic > li a p > span {
  position: relative;
  padding-right: 25px;
  color: #e6316e;
}

#top_pickup ul.card_basic > li a p > span::before,
#top_pickup ul.card_basic > li a p > span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#top_pickup ul.card_basic > li a p > span::before {
  width: 19px;
  height: 19px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

#top_pickup ul.card_basic > li a p > span::after {
  width: 6px;
  height: 6px;
  right: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 768px){
  #top_pickup{
    margin:0 2.67vw 10.67vw;
  }
  
  #top_pickup ul.card_basic > li{
    border-radius: 4vw;
    margin-bottom: 8vw;
  }

  #top_pickup ul.card_basic > li a{
    border-radius: 4vw;
  }

  #top_pickup ul.card_basic > li a:hover{
    border-radius: 4vw;
  }

  #top_pickup ul.card_basic > li figure::before,
  #top_pickup ul.card_basic > li figure::after{
    display: none;
  }

  #top_pickup ul.card_basic > li h3{
    border-bottom: 0.266VW solid #ccc;
  }

  #top_pickup ul.card_basic > li figure img{
    border-radius: 2.67VW 2.67VW 0 0;
  }

  #top_pickup ul.card_basic > li a > span { padding-right: 6.68vw;}
  #top_pickup ul.card_basic > li a > span::before {
    width: 5.34vw;
    height: 5.34vw;
  }
  
  #top_pickup ul.card_basic > li a > span::after {
    width: 1.6vw;
    height: 1.6vw;
    right: 2.67vw;
  }

  #top_pickup ul.card_basic>li a {
    padding: 4vw!important;
  }
}


/*===== ■12. Section [top_recommend] =====*/
#top_recommend li > p{
  text-indent: 0;
}
@media (max-width: 768px){
  #top_recommend {
    padding: 0 2.67vw ;
  }
}


/*===== 13. Animations =====*/
#top_hero figure::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: calc(100% + 110px);
    background: #2172b3;
    content: "";
    animation: .6s ease-in-out .3s forwards hero01;
    z-index: 2
}

#top_hero figure svg {
    visibility: hidden;
    animation: .2s ease-in-out .6s forwards hero02
}
/*#top_hero figure::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: hsl(340,79%,55%);
  content: "";
  animation: hero01 .6s ease-in-out .3s forwards;
}
#top_hero figure svg {
  visibility: hidden;
  animation: hero02 .2s ease-in-out .6s forwards;
}*/


#top_info::before {
  opacity: 0;
  transform: translateX(-100%);
}
#top_info.anim::before { animation: move01 .6s ease-in-out .3s forwards;}

#top_outline::before {
  opacity: 0;
  width: 0;
}
#top_outline.anim::before { animation: move02 .6s ease-in-out .3s forwards;}

@keyframes hero01 {
  0% {
    width: 0;
    left: 0;
  }
  30% {
    left: 0;
    width: 100%;
  }
  70% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
@keyframes hero02 {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes move01 {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes move02 {
  0% {
    opacity: 1;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 87.5vw;
  }
}

/*===== 14. Briefing  =====*/

#briefing {
  text-align: center;
}

#briefing a{
  width: 50%;
  max-width: 800px;
  margin: 0 10px 80px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
  transition: .5s;
}

#briefing a:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#briefing a img{
  vertical-align: middle;
}


@media (max-width: 768px){
  #briefing{
    flex-direction: column;
    margin: 0 2.67vw;
  }
  
  #briefing a {
    width: 100%;
    margin: 0 0 10.67vw;
    padding: 0!important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 1px 1px 1px rgb(0 0 0 / 15%);
    font-size: 1.8rem;
    transition: none;
  }
  
  #briefing a:first-child {
    margin-bottom: 2.67vw;
  }
  
  #briefing a:hover {
    background-position: inherit;
    color: #fff;
  }
  #briefing a img{
      width: 100%;
  }
}



/* ===== Achv Modal ===== */
.achv-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.achv-modal.is-open{ display: block; }

.achv-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.achv-modal__dialog{
  position: relative;
  width: min(480px, 92vw);
  max-height: 88vh;
  margin: 6vh auto 0;
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  overflow: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  transition: .22s ease;
}
.achv-modal.is-open .achv-modal__dialog{
  transform: translateY(0);
  opacity: 1;
}

.achv-modal__close{
  position: sticky; /* スクロールしても上に残る */
  top: 0;
  margin-left: auto;
  display: block;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  font-size: 34px;
  line-height: 52px;
  cursor: pointer;
}

.achv-modal__content{
  padding: 0 22px 22px;
}

.achv-modal__badge{
  display: inline-block;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,211,0,.95);
  border: 2px solid rgba(0,0,0,.25);
  font-weight: 900;
  color:#000;
}

.achv-modal__title{
  margin: 0 0 14px;
  font-weight: 900;
  font-size: 2.0rem;
  color:#111;
}

.achv-modal__graph{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.12);
  background: #f3f6f9;
}
.achv-modal__graphcap{
  padding: 12px 14px;
  background: rgba(33,114,179,.95);
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
}
.achv-modal__graph img{
  display: block;
  width: 100%;
  height: auto;
}

.achv-modal__actions{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.achv-modal__btn{
  display: inline-block;
  background: #2172b3;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
}
.achv-modal__btn:hover{ opacity: .9; color:#fff; }

body.is-modal-open{ overflow: hidden; }

@media (max-width: 768px){
  .achv-modal__dialog{ margin-top: 4vh; width: 92vw; }
  .achv-modal__content{ padding: 0 14px 16px; }
  .achv-modal__title{ font-size: 1.7rem; }
}