/* Client-specific Styles */
html {
  scroll-behavior: smooth;
}

#outlook a {
  padding: 0;
}

img {
  width: 100%;
}

/* Force Outlook to provide a "view in browser" button. */
/* ルートの文字サイズを10pxに設定 */

body {
  width: 100%;
  background: #fff;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "lucida grande", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";

}


/* Force Hotmail to display emails at full width */
a:link,
a:visited {
  text-decoration: none;
  color: #000;
}


/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
/* Reset Styles */

.main_content {
  max-width: 1000px;
  width: 100%;
  background: #fff;
  
}

.mv_movie {
  aspect-ratio: 920 / 517;
}

.mv_movie iframe{
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  object-fit: cover;
}

.c_jsbt,
.location,
.location ul,
.floor_wrap,
.floor4_list .floor_item:nth-last-of-type(1) .c_flex {
  justify-content: space-between;
}

.chirashi_btn,
.main_content,
.orange_bar,
.download_app,
.info_ttl,
.section_inner,
.x,
#page-top a img,
.twitter-timeline {
  margin: auto;
}

.small,
.btn,
footer,
.content_subtitle,
.accordion-parent,
.warning,
.lineup_txt,
#collapseButton {
  text-align: center;
}

.btn_container,
.social_area,
.inner+.inner,
.lineup_container+.lineup_container {
  margin-top: 4%;
}

.btn_container2,
.small,
.c_flex+.c_flex,
.point_content_wrap,
.point_content_wrap .point_content:nth-of-type(1) {
  margin-top: 2%;
}

.event_txtbox {
  padding: 2%;
}

.section_inner,
.btn {
  padding: 4%;
}

.event_txt {
  margin-top: 1%;
}


a:hover {
  opacity: 0.75;
}

.caution {
  font-size: 0.7rem;
}

.small,
.lineup_txt {
  font-size: 0.9rem;
}

h1 {
  width: 100%;
}

.bl_btn {
  background: #074597;
}

.btn:hover {
  color: #fff !important;
}

.border_or,
.border_gl {
  border-radius: 15px;
}

.border_or {
  border: 2px solid #F3981C;
}

.border_gl {
  border: 2px solid #C8C8C8;
}

/*フッター*/
footer {
  background: #f0f0f0;
}

.footer_inner {
  padding: 2% 10%;
}

.copyright {
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 1.5%;
}

address {
  font-style: normal;
  font-size: 2vw;
  padding: 2% 0;
}

.logo {
  width: 20%;
}

.c_flex,
#accordion,
.floor,
.location,
.location ul,
.c_flexlayout {
  display: flex;
}

.c_flex {
  flex-wrap: wrap;
}

.floor4_list .floor_item:nth-of-type(3) .c_flex {
  flex-wrap: nowrap;
}

/* ページトップ */
#page-top {
  position: fixed;
  right: 1%;
  bottom: 12%;
  z-index: 999;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

#page-top a {
  border-radius: 5px;
  background: #1D50A3;
  color: #FFFFFF;
  overflow: hidden;
  width: 40px;
  height: 40px;
}

#page-top a img {
  width: 60%;
  vertical-align: -webkit-baseline-middle;
  padding: 6px 0;
}

.tab {
  border: 1px solid #ddd;
  cursor: pointer;
  padding: 5.5% 3.5% 5.5%;
}

.tab.active {
  background: repeating-linear-gradient(-45deg,
      #fff,
      #fff 15px,
      #FEF5E9 0,
      #FEF5E9 30px);
  border: #F3981C 3px solid;
}


.shadow_bg {
  padding: 6% 4%;
  background: #fff;
  box-shadow: #868686 0px 0px 10px;
  border-radius: 40px;
}

.content_subtitle,
.point_content+.point_content {
  margin-top: 6%;
}

#accordion,
.c_flexlayout {
  align-items: center;
}

.accordion-parent {
  border: none;
  background: #1d50a2;
  font-weight: normal;
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}

.accordion-child {
  display: none;
  animation: show 0.85s;
  padding: 2% 0 5%;
}

.accordion-icon {
  width: 3%;
  position: absolute;
  right: 5%;
  top: 32%;
  transform: rotate(180deg);
}

.accordion-icon-up {
  transform: rotate(0);
}

.accordion-parent p {
  color: #fff;
  padding: 8px 0 10px;
  margin: 2% 0 0;
}

.top_menu li {
  width: 30%;
}

.top_submenu li {
  width: 49%;
}

.download_app {
  width: 80%;
}

.event_list {
  gap: 1%;

  & li {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }
}

.warning {
  font-size: 2rem;
  margin-top: 3%;
}

.orange_bar {
  background: #f3981c;
  padding: 3% 0;
}

.info_ttl {
  max-width: 35%;
}

.place,
.floorguide,
.floor,
.location_ttl,
.social_ttl,
.warning,
.accordion-parent p,
#collapseButton,
.tab.active,
.btn,
.event_title {
  font-weight: 700;
}


.place,
.floorguide {
  margin: 3% 0 2%;
  color: #1c50a1;
  border-bottom: #1c50a1 2px solid;
}

.floor {
  align-items: baseline;
  border-bottom: #e2e2e2 3px solid;
  padding: 3% 2% !important;
}

.categories {
  width: 60%;
  padding-left: 3%;
}

.video,
.map,
.floor4_list .floor_item:nth-last-of-type(1) {
  width: 100%;
}

.map {
  height: 350px;
  padding: 5% 0 7%;
}

.video {
  height: 275px;
}

.location ul {
  flex-wrap: wrap;
}

.location ul li {
  width: 46%;
  padding: 1% 0.5%;
}

.location_ttl {
  margin: 25px 0;
}

.location_ttl,
.social_ttl {
  border-bottom: #074597 2px solid;
  font-size: 2.5rem;
  color: #074597;
}

.floor4_list {
  width: 100%;
}

.social {
  padding: 8% 0;
}

.c_flexlayout,
.event_list {
  justify-content: center;

}

.floor_wrap {
  box-shadow: 5px 5px 1px #dddddd;
  background: #fff;
  border-left: 8px solid;
  position: relative;
}

.bl_prp {
  border-color: #885094;
}

.bl_r {
  border-color: #E73D4A;
}

.bl_or {
  border-color: #EF8200;
}

.bl_bg {
  border-color: #17A694;
}

.bl_bl {
  border-color: #035FA5;
}

.bl_pr {
  border-color: #D12E8A;
}

.tab-content {
  display: none;
  margin: 4% auto 2%;
  border: #1D50A2 2px solid;
  border-radius: 30px;
  background: #fff;
  padding: 8% 4%;
}

#collapseButton {
  margin: 20px auto 0;
  padding: 5px;
  cursor: pointer;
  background-color: #ddd;
  width: 25%;
  border-radius: 10px;
}

.c_asp34,
.location_txt {
  width: 40%;
}
.r_border{
  border: 2px solid red;
  border-radius: 15px;
  font-weight: bold;
  padding: 2.5% 0 ;
  text-align: center;
}
.r_border:visited{
  color: red;
}

.c_grid{
  display: grid;
  grid-template-rows: auto;
}

.floor4_list .floor_item:first-child {
  width: 50%;
}

.floor4_list .floor_item:nth-child(2) {
  width: 49%;
}

.floor_item_inner{
  position: relative;

  &::before{
    content: "";
    position: absolute;
    background-image: url(./img/index_img/pc_reform_item.png);
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
  }
}


/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}



@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(300px);
  }
}

@media (min-width: 1000px) {
  .sp {
    display: none !important;
  }

  body {
    background: url(./img/index_img/whats_edion_lp_bg.webp);
    background-size: contain;
  }

  .floor3_list li {
    width: 23%;
  }

  .section_listtitle {
    font-size: 0.9rem;
  }

  .section {
    font-size: 1rem;
  }

  .accordion-parent p,
  .place {
    font-size: 2rem;
  }

  .content_subtitle {
    font-size: 3rem;
  }

  .wd40,
  .floor_txtbox {
    margin: 0 auto;
  }

  .floor_wrap {
    padding: 2% 2.5% 3% 4%;
    /* padding-bottom: 3%; */

    &.--lg{
      padding: 7.3% 1.5% 7.3% 4%;
    }
  }

  .floor_item_inner::before{
    width: 80px;
    height: 80px;
  }



  .content .inner {
    padding: 5% 8% 0;
  }

  .floor_main {
    font-weight: 700;
  }

  /* .tab {
    margin: 5px;
  } */

  .section_title {
    width: 5%;
  }

  .orange_bar:nth-of-type(3) .info_ttl {
    width: 20%;
  }

  .section_listtitle,
  .wd40 {
    width: 40%;
  }
  .event_list{
    flex-wrap: nowrap;
  }

  .event_list li {
    width: 49%;
    
  }

  .x {
    width: 50%;
  }

  .chirashi_btn {
    width: 80%;
  }

  .twitter-timeline {
    width: 95%;
  }


  .event_txtbox {
    height: 200px;
  }

  .section,
  .section_title,
  .social,
  .floor_main {
    display: flex;
  }

  .social {
    justify-content: space-between;
  }

  .section,
  .section_title,
  .floor_wrap {
    align-items: center;
  }

  .c_asp {
    aspect-ratio: 18/9;
    object-fit: cover;
    margin: 0;
  }

  .floor4_list li {
    width: 23% !important;
  }

  .c_grid{
    grid-column-gap: 1.2%;
  }

  .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 4%;
  }

  .parent1 {
    grid-template-columns: repeat(4, 1fr);
  }

  .parent2 {
    grid-template-columns: repeat(5, 1fr);
  }

  .floor_name{
    display: flex;
    align-items: center;
    margin-right: 1em;
  }

  /*　----------------------
  　 FLOOR1-4 〇〇のフロア
  ---------------------- */

  /* 1列の場合 */
  .div1-1 {
    grid-area: 1 / 1 / 2 / 3;
  }

  /* 2列の場合 */
  .div1-2 {
    grid-area: 1 / 1 / 3 / 3;
  }

  /* ==== */

  /*　------------------------------------------
  　 各フロアの画像（パソコン、ゲーム・eスポーツ…）
  ---------------------------------------------- */

  /* 1列の場合 */
  .div2-1 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div3-1 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div4-1 {
    grid-area: 1 / 5 / 2 / 6;
  }

  /* 2列の場合 */
  .div2-2 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div3-2 {
    grid-area: 1 / 4 / 2 / 5;
  }

  /* .div4-2 {
    grid-area: 2 / 3 / 3 / 4;
  } */

  .div5-2 {
    grid-area: 2 / 3 / 3 / 4;
  }

  /* ==== */

  .side_nav {
    position: fixed;
    top: 10px;
    right: 0;
    width: 50px;
  }

  .floor_item_inner::before{
      top: -18%;
      left: -11%;
      background-size: 80px;
  }

}


/*スマホ*/
@media (max-width: 999px) {

  #footer{
    padding-bottom: 14%;
  }

  .c_grid{
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    padding-bottom: 4%;
  }

  .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 2%;
    grid-row-gap: 2%;
  }

  .parent1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }

  .parent2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  .div1-1 {
    grid-area: 1 / 1 / 2 / 3;
  }

  .div1-2  {
    grid-area: 1 / 1 / 2 / 3;
  }

  /*　------------------------------------------
  　 各フロアの画像（パソコン、ゲーム・eスポーツ…）
  ---------------------------------------------- */

  /* 2列の場合 */
  .div2-1 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .div3-1 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .div4-1 {
    grid-area: 3 / 1 / 4 / 3;
  }

  /* 3列の場合 */
  .div2-2 {
    grid-area: 2 / 1 / 3 / 2;;
  }

  .div3-2 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .div4-2 {
    grid-area:  3 / 2 / 4 / 3;
    
  }

  .div5-2 {
    grid-area:  3 / 1 / 4 / 2;
  }

  /* ==== */

  .tab.--lg{
    padding: 3% 2%;
  }

  .snk {
    object-fit: cover;
    aspect-ratio: 26/8 !important;
  }

  .pc {
    display: none !important;
  }

  .event_list li,
  .categories,
  .floor_main,
  .twitter-timeline,
  .sp_wd100,
  .floor4_list .floor_item:nth-last-of-type(1) img {
    width: 100%;
  }

  .accordion-parent p {
    font-size: 1rem;
  }

  .event_list {
    display: block;

    & li+li {
      margin-top: 2%;
    }
  }

  .floor_item {
    width: 100%;
  }


  .place,
  .section_title {
    font-size: 1.2rem;
  }

  .top_menu .btn {
    font-size: 2vw;
  }

  .warning,
  .section {
    font-size: 2.5vw;
  }

  .warning {
    font-size: 0.9rem;
  }

  .floor_main .section {
    font-size: 3vw;
  }

  .content_subtitle {
    font-size: 4.25vw;
  }

  .categories {
    margin-top: 3%;
  }

  .content,
  .x+.x {
    margin-top: 6%;
  }

  .floor_wrap {
    padding: 3%;
    /* flex-direction: column; */
  }

  .floor_item_inner::before{
      top: -12%;
      left: -5.5%;
      background-size: clamp(65px, calc(126 / 750 * 100vw), 150px);
      width: clamp(65px, calc(126 / 750 * 100vw), 150px);
      height: clamp(65px, calc(126 / 750 * 100vw), 150px);
  }


  .social_area {
    padding: 0 3%;
  }

  .content .inner {
    padding: 5% 4% 0;
  }

  .sp_flex {
    margin-top: 2%;
    display: flex;
  }

  .floor_num {
    width: 100%;
  }

  .section_title {
    width: 8%;
  }

  .event_txtbox {
    height: 150px;
    background: #fff;
  }

  .logo {
    width: 30%;
    margin: auto;
  }

  .chirashi {
    width: 93%;
    padding: 5% 0;
  }

  .sp_cflex {
    display: flex;
  }


  .c_flex {
    flex-wrap: nowrap;
  }

  .c_asp {
    aspect-ratio: auto;
  }

  .floor {
    display: block;
  }

  .floor_txtbox {
    padding: 2%;
    margin-top: 1%;
    min-height: 60px;
    max-height: 80px;
  }

  /* .floor_item+.floor_item {
    margin-left: 1%;
  } */

  .orange_bar:nth-of-type(3) .info_ttl {
    width: 25%;
  }

  .floor_img.floor2,
  .floor_img.floor3,
  .floor_img.floor4_02,
  .floor_img.floor5,
  .floor_img.floor6,
  .floor_img.floor7 {
    bottom: -5%;
    left: 2%;
    z-index: 888;
  }

  .floor_img.floor4_01 {
    width: 15%;
    right: 1%;
    bottom: 10%;
  }

  .pd0 {
    padding-bottom: 0;
  }

  .floor_img.floor6 {
    width: 2%;
    left: 3%;
    bottom: -10%;
  }

  .floor_img.floor4_02,

  .floor_img.floor5,
  .floor_img.floor6,
  .floor_img.floor7 {
    width: 10%;
  }

  .floor_img.floor2 {
    width: 4%;
  }

  .floor_img.floor3 {
    width: 6%;
  }

  .floor3_list {
    flex-direction: column;
  }

  .floor3_list li {
    width: 100%;
  }

  .side_nav {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}