@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page CSS
	Editor      : Bface Chiba
	Last Editor : Bface Chiba
	
	Update Description :
	[2024/02/02] top_scene追加
	[2024/01/19] top_scene追加
	[2021/11/15] 新規作成
====================================== */

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

	1. Redefinition
  2. Section [top_hero]
  3. Section [top_worries]
  4. Section [top_event]
  5. Section [top_value]
  6. Section [top_schedule]
  7. Section [top_theme]
  8. Section [top_outline]
  9. Section [top_lecture]
  10. Section [top_followup]
  11. Section [top_past]
  12. Section [top_committee]
  13. Section [top_faq]
  14. Section [top_voice]
  15. Section [top_discussion] 
  16. Section [top_bnr] 

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



/*===== 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: 0;
  background: url(../img/top/bg-visual.svg) repeat left top / 2px 2px, url(../img/top/img-visual.jpg) no-repeat center / cover;
  margin-bottom: 60px;
}

#top_hero #main_announce{
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
}

#top_hero #main_announce #main_contents {
  width: 62%;
  max-width: 640px;
  flex: 1
}

#top_hero #main_announce #main_contents > p{
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.8rem;
}
#top_hero #main_announce #main_contents > p.catch{
  color: #f39800;
  font-size: 2.4rem;
}

#top_hero #main_announce #main_contents > p.catch > span{
  position: relative;
  display: inline-block;
  padding: 0 3rem;
}

#top_hero #main_announce #main_contents > p.catch > span::before{
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 2rem;
  height: 4rem;
  background: url("../img/top/bg_ttl_left.png") no-repeat;
  background-size: contain;
}

#top_hero #main_announce #main_contents > p.catch > span::after{
  content: "";
  position: absolute;
  top: 0px;
  right: 0;
  width: 2rem;
  height: 4rem;
  background: url("../img/top/bg_ttl_right.png") no-repeat;
  background-size: contain;
}

#top_hero #main_announce #main_contents > p.catch > span > b{
  font-size: 3.4rem
}

#top_hero #main_announce #main_contents > p.catch > span > b > b{
  font-size: 4rem
}
#top_hero ul {
  width: 70%;
  margin: 50px auto 0;
}
#top_hero li{
  display: flex;
  font-weight: bold;
  color: #fff;
  margin: 0 20px 10px;
  font-size: 2rem;
}

#top_hero li > span{
  padding: 5px 10px;
  margin-right: 10px;
  background: #00adb7;
  border-radius: 3px;
  font-size: 1.6rem;
  line-height: 1.6;
}
#top_hero li p{
  flex: 1;
}
#top_hero #top_banner li img{width: 100%;}


@media (max-width: 1024px) {
  #top_hero #main_announce{
    padding-top: 8vw;
    padding-bottom: 8vw;
    max-width: none;
    width: 70%;
  }

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

}

@media (max-width: 768px) {
  #top_hero {
    margin-bottom: 8vw;
  }
  
  #top_hero #main_announce{
    padding-top: 9.34vw;
    max-width: none;
    width: 90%;
  }
  #top_hero #main_announce #main_contents {
    width: 100%;
    max-width: auto
  }
  #top_hero #main_announce #main_contents > figure{
    width: 80%;
    margin: 0 auto;
  }

  #top_hero #main_announce #main_contents >  p{
    margin-bottom: 5.33vw;
    font-size: 1.6rem;
  }
  #top_hero #main_announce #main_contents >  p.catch{
    font-size: 1.6rem;
  }
  #top_hero #main_announce #main_contents >  p.catch > span > b{
    font-size: 2.2rem
  }
  #top_hero #main_announce #main_contents >  p.catch > span > b > b{
    font-size: 2.6rem
  }
  
  
  #top_hero ul{
    width: 86%;
    margin: 8vw auto 0;
  }
  #top_hero li{
    margin: 0 0 2.66vw;
    font-size: 1.8rem;
  }
  #top_hero li > span{
    padding: 0 2.66vw;
    margin-right: 2.66vw;
    border-radius: 0.8vw;
    line-height: 2;
  }
  
  
  
  #top_hero #main_keynote{
    width: 100%;
  }
  #top_hero #main_keynote .speaker{
    box-shadow: 1.6vw 1.6vw 3.2vw 0 rgba(0, 0, 0, 0.3);
    padding: 0.53vw;
  }
  #top_hero #main_keynote .speaker + .speaker{
    margin-top: 5.33vw;
  }
  #top_hero #main_keynote .speaker > p:first-child{
    padding: 1.33vw;;
  }
  #top_hero #main_keynote .name{
    padding: 2.66vw;
  }
}


/*===== 3. Section [top_worries]  =====*/
#top_worries .tabs{
  display: flex;
  justify-content: space-between;
}

#top_worries .tabs li {
  width: calc(33.3% - 1px);
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #3d4a96;
  position: relative;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#top_worries .tabs li:nth-child(2){
  background: #0c7f84;
}

#top_worries .tabs li:nth-child(3){
  background: #3da963;
}

#top_worries .tabs li:hover{
  opacity: 0.8;
}

#top_worries .tabs li.active {
  opacity: 1
}

#top_worries .tabs li.active::after {
  position: absolute;
  content: "";
  top: 99%;
  left: calc(50% - 1rem);
  background: #3d4a96;
  height: calc(tan(10deg) * 10rem / 2);
  width: 2rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#top_worries .tabs li:nth-child(2).active::after {
  background: #0c7f84;
}

#top_worries .tabs li:nth-child(3).active::after {
  background: #3da963;
}

#top_worries div[data-tabCont] {
  display: none;
  background: #e0e2ee;
  padding: 2rem;
}

#top_worries div[data-tabCont]:nth-child(2) {
  background: #d9eaea;
}
#top_worries div[data-tabCont]:nth-child(3) {
  background: #e0f0e5;
}

#top_worries div[data-tabCont].active {
    display: block;
}

#top_worries div[data-tabCont] p{
  font-weight: bold;
  margin-bottom: 1rem;
  color: #3d4a96;
  font-size: 2.2rem;
}

#top_worries div[data-tabCont]:nth-child(2)  p{
  color: #0c7f84;
}

#top_worries div[data-tabCont]:nth-child(3)  p{
  color: #3da963;
}

#top_worries .top_worries_wrap li{
  font-size: 2rem;
}
@media (max-width: 768px) {
  #top_worries .tabs li{
    padding: 1.33vw;
    font-size: 1.4rem;
  }
  #top_worries div[data-tabCont] p{
    font-size: 2rem;
  }
  #top_worries .top_worries_wrap li{
    font-size: 1.6rem;
  }
}

/*===== 4. Section [top_event]  =====*/
#top_event > p{
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 20px;
}

#top_event ul:first-of-type p{
  text-align: center;
  font-weight: bold;
  color: #00adb7;
  font-size: 2rem
}

#top_event ul:first-of-type p span{
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#top_event ul:first-of-type p span::after, 
#top_event ul:first-of-type p span::before {
  width: 4rem;;
  height: 0.1rem;
  margin: 0 1rem;
  background: #00adb7;
  content: "";
}

#top_event ul:first-of-type figure{
  width: 80%;
  margin: 0 auto 20px;
}
#top_event ul.merit{
  background: #66ced4;
  padding: 20px;
}
#top_event ul.merit li{
  padding: 10px;
  background: #fff;
}

#top_event ul.merit li:not(:last-child){
  margin-bottom: 10px;
}

#top_event ul.merit li p{
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: dotted 1px #ccc;
  display: flex;
  align-items: center;
}

#top_event ul.merit li p b{
  display: block;
  width: 20px;
  height: 20px;
  background: #00adb7;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  font-size: 1.4rem;
  margin-right: 5px;
  color: #fff;
  line-height: 20px;
}

#top_event ul.merit li p span{
  flex: 1;
}
@media (max-width: 768px) {
  #top_event > p{
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 5.66vw;
  }
  #top_event ul:first-of-type p{
    font-size: 1.8rem;
  }
  #top_event ul:first-of-type figure{
    width: 100%;
    margin: 0 auto 5.33vw;
  }
  #top_event ul.merit{
    padding: 2.66vw;
  }
  
  #top_event ul.merit li{
    padding: 2.66vw;
  }

  #top_event ul.merit li:not(:last-child){
    margin-bottom: 2.66vw;
  }
  
  #top_event ul.merit li p{
    padding-bottom: 2.66vw;
    margin-bottom: 2.66vw;
    border-bottom: dotted 0.26vw #ccc;
    align-items: flex-start;
  }

  #top_event ul.merit li p b{
    width: 5.23vw;
    height: 5.23vw;
    margin-right: 1.33vw;
    line-height: 5.23vw;
  }

  
}
/*===== 5. Section [top_value]  =====*/
#top_value ul:first-of-type p{
  text-align: center;
  font-weight: bold;
  color: #00adb7;
  font-size: 2rem;
}

#top_value ul:first-of-type p span{
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#top_value ul:first-of-type p span::after, 
#top_value ul:first-of-type p span::before {
  width: 4rem;;
  height: 0.1rem;
  margin: 0 1rem;
  background: #00adb7;
  content: "";
}

#top_value .tabs{
  display: flex;
  justify-content: space-between;
}

#top_value .tabs li {
  width: calc(33.3% - 1px);
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #3d4a96;
  position: relative;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#top_value .tabs li:nth-child(2){
  background: #0c7f84;
}

#top_value .tabs li:nth-child(3){
  background: #3da963;
}

#top_value .tabs li:hover{
  opacity: 0.8;
}

#top_value .tabs li.active {
  opacity: 1
}

#top_value .tabs li.active::after {
  position: absolute;
  content: "";
  top: 99%;
  left: calc(50% - 1rem);
   background: #3d4a96;
  height: calc(tan(10deg) * 10rem / 2);
  width: 2rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#top_value .tabs li:nth-child(2).active::after {
  background: #0c7f84;
}

#top_value .tabs li:nth-child(3).active::after {
  background: #3da963;
}

#top_value div[data-tabCont] {
  display: none;
  background: #e0e2ee;
  padding: 2rem;
}

#top_value div[data-tabCont]:nth-child(2) {
  background: #d9eaea;
}
#top_value div[data-tabCont]:nth-child(3) {
  background: #e0f0e5;
}

#top_value div[data-tabCont].active {
    display: block;
}

#top_value div[data-tabCont] p{
  font-weight: bold;
  margin-bottom: 1rem;
  color: #3d4a96;
  font-size: 2.2rem;
}

#top_value div[data-tabCont]:nth-child(2)  p{
  color: #0c7f84;
}

#top_value div[data-tabCont]:nth-child(3)  p{
  color: #3da963;
}

#top_value .top_value_wrap li{
  font-size: 2rem;
}

@media (max-width: 768px) {
  #top_value .tabs li{
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.33vw;
  }
  #top_value ul:first-of-type p{
    font-size: 2rem;
  }
  #top_value div[data-tabCont] p{
    font-size: 2rem;
  }
  #top_value .top_value_wrap li{
    font-size: 1.6rem;
  }
}

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

#top_schedule > div{
  width: 80%;
  min-width: 102.4rem;
  margin: 0 auto;
}

#top_schedule > div dl{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;
}

#top_schedule > div dt{
  color: #fff;
  background: #00adb7;
  margin-right: 10px;
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 1.4rem;
}

#top_schedule > div dd{
  font-size: 1.8rem;
}
@media (max-width: 1024px) {
  #top_schedule  > div{
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  #top_schedule { margin: 0 2.67vw 10.67vw;}
  #top_schedule > div dl{
    flex-direction: column;
  }
  #top_schedule > div dt{
    margin-right: 0;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
  }
  #top_schedule > div dd{
    font-size: 1.6rem;
  }
}

/*===== 7. Section [top_theme]  =====*/
#top_theme span.pc{
  display:inline; 
}
#top_theme span.sp{
    display:none; 
  }
@media (max-width: 768px) {
  #top_theme span.sp{
    display:inline; 
  }
  #top_theme span.pc{
    display:none; 
  }
}
/*===== 8. Section [top_outline]  =====*/
#top_outline .outline_table_basic {
  width: 100%;
  height: 100%;
}
#top_outline .outline_table_basic th {
  position: relative;
  width: 100px;
  padding: 25px 20px;
  border-bottom: 2px solid #333;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
#top_outline .outline_table_basic th::before,
#top_outline .outline_table_basic th::after {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 10px;
  background: #333;
  content: "";
}
#top_outline .outline_table_basic th::before { left: 0;}
#top_outline .outline_table_basic th::after { right: 0;}
#top_outline .outline_table_basic td {
  padding: 25px 20px;
  border-bottom: 1px solid #ebebeb;
  vertical-align: middle;
  text-align: center;
  font-size: 1.6rem
}
#top_outline .outline_table_basic tr:first-child th{
  width: auto;
  padding: 1rem;
  border-bottom: none;
  background: #00adb7;
  font-size: 1.6rem;
  color: #fff
}
#top_outline .outline_table_basic tr:first-child th:not(:first-child){
  border-left: 0.1rem solid #fff;
  width: calc(33.3% - 50.1rem);
}
#top_outline .outline_table_basic tr:first-child th::after, 
#top_outline .outline_table_basic tr:first-child th::before{
  display: none!important;
}

@media (max-width: 768px){
  #top_outline .outline_table_basic_wrap{
    overflow-x: auto;
    text-align: center;
    width: calc(100% + 2.67vw);
    white-space: nowrap;
  }
  #top_outline .outline_table_basic{
    width: 100%;
    height: 100%;;
  }
  #top_outline .outline_table_basic th{
    border-left: none;
    border-top: none;
    border-right: none;
    padding: 2.66vw;
    font-size: 1.6rem;
  }
  #top_outline .outline_table_basic th::before,
  #top_outline .outline_table_basic th::after { 
    display: block; 
  }
  #top_outline .outline_table_basic tr:first-child th{
    display: table-cell;
    border-left: none;
    border-top: none;
    border-right: none;
    width: calc(250vw / 3)
  }
  #top_outline .outline_table_basic tr:first-child th:first-child{
    width: 30vw;
    background: #00adb7;
  }
  #top_outline .outline_table_basic tr th:first-child{
    position: sticky;
    top: 0;
    left: 0;
    border-bottom: none;
    background: #fff;
  }
  #top_outline .outline_table_basic tr:not(:first-child) th > span{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #333;
  }
  #top_outline .outline_table_basic td{
    border-bottom: 0.266vw solid #ebebeb;
    padding: 5.23vw 2.66vw;
  }
    
}

/*===== 9. Section [top_lecture]  =====*/
#top_lecture .lecture_wrap ul{
  display: flex;
  justify-content: space-between;
}

#top_lecture .lecture_wrap ul li{
  width: calc(33.3% - 20px);
}
#top_lecture li .lecture_theme{
  min-height:8rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #00adb7;
}
@media (max-width: 768px){
  #top_lecture .lecture_wrap{
    overflow-x: scroll;
  }
  #top_lecture .lecture_wrap ul{
    table-layout: fixed;
    width: 180vw;
  }
  #top_lecture .lecture_wrap ul li{
    width: calc(33.3% - 5px);
  }
  #top_lecture li .lecture_theme{
    font-size: 1.6rem;
  }
}

/*===== 10. Section [top_followup]  =====*/
#top_followup #schedule{
  width: 100%;
}
#top_followup #schedule tr:first-child th {
  background: #666;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

#top_followup #schedule tr:not(:first-child) {
  border-bottom: 1px #666 solid;
}
#top_followup #schedule tr:not(:first-child) th {
  background: #ededed;
  vertical-align: middle;
  padding: 10px;
}

#top_followup #schedule tr:not(:first-child) td{
  padding: 20px;
}

#top_followup .movie_wrapper{
  padding: 10px;
  background: #000;
  width: 60%;
  margin: 40px auto 0;
}
#top_followup .movie_wrapper div{
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}

#top_followup div.movie_wrapper iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 768px){
   #top_followup .movie_wrapper{
    padding: 2.66vw;
    width: 100%;
    margin: 5.333vw auto 0;
  }
}


  
/*===== 11. Section [top_past]  =====*/
#top_past .movie_wrapper > div {
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
  border: 10px solid #000;
}
#top_past .movie_wrapper iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#top_past dl{
  margin-top: 20px;
}
#top_past dt {
  padding: 10px;
  text-align: center;
  font-weight: bold;
  background: #00adb7;
  color: #fff;
}
#top_past dd{
  padding: 20px;
  background: #ededed;
  height: 100%
}
@media (max-width: 768px){
  #top_past .movie_wrapper .tit_strapline{
  }
  #top_past .movie_wrapper .tit_strapline::before, 
  #top_past .movie_wrapper .tit_strapline::after{
    display: none;
  }
  #top_past .movie_wrapper > div {
    border: 0.523vw solid #000;
  }
  #top_past a.boxlink span{
    font-size: 1.4rem;
  }
  #top_past dt {
    padding: 2.66vw
  }
  #top_past dd{
    padding: 2.66vw
  }
}

/*===== 12. Section [top_committee]  =====*/
#top_committee ul {
  width: 80%;
  min-width: 102.4rem;
  margin: 0 auto;
}
#top_committee ul li{
  padding: 3rem;
  display: flex;
}
#top_committee ul li:nth-child(odd){
  background: rgba(175,175,175,0.2);
}
#top_committee ul li b{
  display: inline-block;
  font-weight: bold;
  width: 10%;
  font-size: 1.8rem;
  min-width: 12rem;
}
#top_committee ul li span{
  display: block;
  flex: 1;
}
#top_committee .movie_wrapper{
  padding: 10px;
  background: #000;
  width: 60%;
  margin: 20px auto 40px;
}
#top_committee .movie_wrapper div{
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}
#top_committee div.movie_wrapper iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 1024px) {
   #top_committee ul {
    width: 100%;
    min-width: auto;
  }
}
@media (max-width: 768px) {
  #top_committee ul li{
    padding: 2.66vw;
    flex-direction: column;
  }
  #top_committee ul li b{
    width: 100%;
    display: block;
    margin-bottom: 1.33vw;
    font-size: 1.4rem;
  }
  #top_committee ul li span{
    font-size: 1.4rem;
  }
  
  #top_committee .movie_wrapper{
    padding: 2.66vw;
    width: 100%;
    margin: 5.33vw auto 10.66vw;
  }

}

/*===== 13. Section [top_faq]  =====*/
#top_faq {
  width: 80%;
  min-width: 102.4rem;
  margin: 0 auto;
}

#top_faq dl {
  margin: 2rem 0;
}
#top_faq .faq-question { 
  background-color: #fff;
  background: #66ced4;
  font-weight: bold;
  padding: 1.5rem 5rem 1.5rem 2rem; 
  cursor: pointer; 
  z-index: 1; 
  position: relative;
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  transition: .5s;
} 

#top_faq .faq-question:hover{
  background: #00adb7;
}
#top_faq .faq-question span:first-child{
  font-size: 3rem;
  margin-right: 1.5rem;
}

#top_faq .faq-question .i_box {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
}
#top_faq .faq-question .i_box:before, 
#top_faq .faq-question .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
#top_faq .faq-question .i_box:before {
  border-top: 0.2rem solid #fff;
  width: 2rem;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
#top_faq .faq-question .i_box:after {
  border-left: 0.2rem solid #fff;
  width: 0;
  height: 2rem;;
  top: 0;
  bottom: 0;
  right: 1rem;
  transition: .3s;
}
#top_faq .faq-question.open .i_box:after {
  height: 0;
}
#top_faq .faq-answer { 
  display: none;
  padding: 1.5rem 1.2rem;
}

#top_faq .faq-answer div{
  display: flex;
}

#top_faq .faq-answer span{
  display: inline-block;
  font-size: 2.4rem;
  background: #00adb7;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  text-align:center;
  line-height: 4rem;
  margin-right: 1rem;
}

#top_faq .faq-answer div p{
  flex: 1;
  margin-top: 1rem;
}

@media (max-width: 1024px) {
  #top_faq{
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  #top_faq dl {
    margin: 1.5rem 0;
  }
  #top_faq .faq-question { 
    background-color: #fff;
    background: #66ced4;
    font-weight: bold;
    padding: 1.5rem 4.5rem 1.5rem 1.5rem; 
  }
  
  #top_faq .faq-answer div p{
    margin-top: 0;
  }

}


/*===== 14. Section [top_voice]  =====*/
#top_voice ul:first-of-type p{
  text-align: center;
  font-weight: bold;
  color: #00adb7;
  font-size: 2rem;
}

#top_voice ul:first-of-type p span{
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#top_voice ul:first-of-type p span::after, 
#top_voice ul:first-of-type p span::before {
  width: 4rem;;
  height: 0.1rem;
  margin: 0 1rem;
  background: #00adb7;
  content: "";
}

#top_voice .tabs{
  display: flex;
  justify-content: space-between;
}

#top_voice .tabs li {
  width: calc(33.3% - 1px);
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #3d4a96;
  position: relative;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#top_voice .tabs li:nth-child(2){
  background: #0c7f84;
}

#top_voice .tabs li:nth-child(3){
  background: #3da963;
}

#top_voice .tabs li:hover{
  opacity: 0.8;
}

#top_voice .tabs li.active {
  opacity: 1
}

#top_voice .tabs li.active::after {
  position: absolute;
  content: "";
  top: 99%;
  left: calc(50% - 1rem);
   background: #3d4a96;
  height: calc(tan(10deg) * 10rem / 2);
  width: 2rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#top_voice .tabs li:nth-child(2).active::after {
  background: #0c7f84;
}

#top_voice .tabs li:nth-child(3).active::after {
  background: #3da963;
}

#top_voice div[data-tabCont] {
  display: none;
  background: #e0e2ee;
  padding: 2rem;
}

#top_voice div[data-tabCont]:nth-child(2) {
  background: #d9eaea;
}
#top_voice div[data-tabCont]:nth-child(3) {
  background: #e0f0e5;
}

#top_voice div[data-tabCont].active {
    display: block;
}

#top_voice div[data-tabCont] p{
  font-weight: bold;
  margin-bottom: 1rem;
  color: #3d4a96;
  font-size: 2.2rem;
}

#top_voice div[data-tabCont]:nth-child(2)  p{
  color: #0c7f84;
}

#top_voice div[data-tabCont]:nth-child(3)  p{
  color: #3da963;
}

#top_voice .top_voicee_wrap li{
  font-size: 2rem;
}

#top_voice dl{
  text-align: center;
  font-weight: bold;
  margin-top: 7rem;
}

#top_voice dt{
  font-size: 2rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

#top_voice dt span:first-child{
  color: #fff;
  background: #00adb7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  font-size: 1.6rem;
  width: 3rem;
  height: 3rem;
}


#top_voice dd{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#top_voice dd figure{
  width: 28rem;
}

#top_voice dd p{
  font-size: 2rem;
  margin-right: 3rem;
  background: #fdeacc;
  padding: 2rem;
  border-radius: 1rem;
}

#top_voice dd p span{
  background:linear-gradient(transparent 60%, #ff6 60%);
}
#top_voice dd p b{
  font-size: 4rem;
}
@media (max-width: 768px) {
  #top_voice .tabs li{
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.33vw;
  }
  #top_voice ul:first-of-type p{
    font-size: 2rem;
  }
  #top_voice div[data-tabCont] p{
    font-size: 2rem;
  }
  #top_voice .top_value_wrap li{
    font-size: 1.6rem;
  }
  #top_voice dt{
    font-size: 1.8rem;
  }
  #top_voice dt span:last-child{
  flex:1;
  text-align: left;
}
  #top_voice dd figure{
    width: 70%;
    margin: 2rem auto 0;
  }

  #top_voice dd p{
    font-size: 1.6rem;
    margin:0 auto;
    padding: 1.5rem;
    border-radius: 1rem;
    width: 90%;
    line-height: 1.8
  }

  #top_voice dd p b{
    font-size: 2.6rem;
  }
  
  
}

/*===== 15. Section [top_discussion]  =====*/
#top_discussion ul:first-of-type p{
  text-align: center;
  font-weight: bold;
  color: #00adb7;
  font-size: 2rem;
}
#top_discussion ul:first-of-type p span{
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#top_discussion ul:first-of-type p span::after, 
#top_discussion ul:first-of-type p span::before {
  width: 4rem;;
  height: 0.1rem;
  margin: 0 1rem;
  background: #00adb7;
  content: "";
}
#top_discussion .tabs{
  display: flex;
  justify-content: space-between;
}
#top_discussion .tabs li {
  width: calc(33.3% - 1px);
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #3d4a96;
  position: relative;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#top_discussion .tabs li:nth-child(2){
  background: #0c7f84;
}
#top_discussion .tabs li:nth-child(3){
  background: #3da963;
}
#top_discussion .tabs li:hover{
  opacity: 0.8;
}
#top_discussion .tabs li.active {
  opacity: 1
}
#top_discussion .tabs li.active::after {
  position: absolute;
  content: "";
  top: 99%;
  left: calc(50% - 1rem);
   background: #3d4a96;
  height: calc(tan(10deg) * 10rem / 2);
  width: 2rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#top_discussion .tabs li:nth-child(2).active::after {
  background: #0c7f84;
}
#top_discussion .tabs li:nth-child(3).active::after {
  background: #3da963;
}
#top_discussion div[data-tabCont] {
  display: none;
  background: #e0e2ee;
  padding: 2rem;
}
#top_discussion div[data-tabCont]:nth-child(2) {
  background: #d9eaea;
}
#top_discussion div[data-tabCont]:nth-child(3) {
  background: #e0f0e5;
}
#top_discussion div[data-tabCont].active {
    display: block;
}
#top_discussion div[data-tabCont] p:first-child{
  font-weight: bold;
  margin-bottom: 1rem;
  color: #3d4a96;
  font-size: 2.2rem;
}
#top_discussion div[data-tabCont]:nth-child(2) p:first-child{
  color: #0c7f84;
}
#top_discussion div[data-tabCont]:nth-child(3) p:first-child{
  color: #3da963;
}
#top_discussion .top_voicee_wrap li{
  font-size: 2rem;
}

@media (max-width: 768px) {
  #top_discussion .tabs li{
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.33vw;
  }
  #top_discussion ul:first-of-type p{
    font-size: 2rem;
  }
  #top_discussion div[data-tabCont] p{
    font-size: 2rem;
  }
  #top_discussion .top_value_wrap li{
    font-size: 1.6rem;
  }
}


/*===== 16. Section [top_bnr]  =====*/
#top_bnr{
  margin: 3rem auto 5rem;
}
#top_bnr a{
  display: block;
  width: 45%;
  min-width: 50rem;
  margin: 0 auto;
}
#top_bnr a img{
  width: 100%;
}

@media (max-width: 768px){
  #top_bnr{
    margin: 2rem auto 4rem;
  }
  #top_bnr a{
    width: 100%;
    min-width: auto;
  }
}