@charset "utf-8";

/*------------------------------------------------------------------------------

  エイリアンのたまご ver.2.0 - 2025 -

------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------

  common

------------------------------------------------------------------------------*/
html,
body {
  color: #333;
  background: transparent url("../images/common/bg_common.png") center top no-repeat fixed;
  background-size: cover;
}

html {
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 86px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  margin: 0 auto;
}

@media (min-width: 768px) {
  html {
    padding-bottom: 0;
  }
}



/* ---- link ---------------------------------------- */
a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.65;
}



/*------------------------------------------------------------------------------

  header

------------------------------------------------------------------------------*/
header {
  position: relative;
  width: 100%;
  height: 80px;
}

header.home {
  padding-top: calc(100% * (1302 / 960));
  background: url("../images/top/mv_sp.png")
    center / cover;
}

header h1 {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 210px;
}

.collaboration {
  position: absolute;
  bottom: 6rem;
  right: 0.5rem;
  width: 128px;
}

/* event banner */
.banner-container {
  position: absolute;
  bottom: 1rem;
  width: 80%;
  max-width: 320px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media (min-width: 768px) {
  header h1 {
    top: 1.5rem;
    left: 2rem;
    width: 320px;
  }

  .btn-nav {
    top: 1.5rem;
    right: 1.5rem;
    width: 80px;
  }

  .collaboration {
    bottom: 2rem;
    right: 2rem;
  }

  .banner-container {
    bottom: 3rem;
    left: 4rem;
    right: auto;
  }
}

@media (min-width: 920px) {
  .collaboration {
    right: 4rem;
    width: 256px;
  }

  .banner-container {
    bottom: 4rem;
    max-width: 480px;
  }
}

@media (min-width: 1280px) {
  header {
    max-width: 1920px;
    height: 120px;
    margin: 0 auto;
    padding: 1rem;
  }

  header.home {
    padding-top: calc(100% * (1080 / 1920));
    background: url("../images/top/mv_pc.png")
      center / cover;
  }

  header h1 {
    top: 1.5rem;
    left: 2rem;
    margin: 0.5rem;
  }

  .btn-nav {
    display: none;
  }

  .banner-container {
    max-width: 640px;
    bottom: 4rem;
    left: 6rem;
    right: auto;
  }
}

@media (min-width: 1920px) {
  header.home {
    padding-top: 1080px;
  }
}



/*------------------------------------------------------------------------------

  footer

------------------------------------------------------------------------------*/
footer {
  background-color: #000048;
  padding: 1.5rem;
}

/* ---- Spec ---------------------------------------- */
.spec-wrap {
  background-color: #001f85;
  border-radius: 8px;
  margin: 0 auto 1.5rem;
}

.spec {
  font-size: 0.75rem;
  color: #fff;
  padding: 1rem;
}

.spec dt {
  float: left;
  width: 4rem;
  position: relative;
}

.spec dt::after {
  content: "：";
  position: absolute;
  right: 0;
}

.spec dd {
  padding-left: 4.5rem;
  margin: 0;
  /* white-space: nowrap; */
}

.spec dd:not(:last-child) {
  margin-bottom: 0.5rem;
}

/* store badge */
.store-badge {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  text-align: center;
  padding: 1rem;
  margin: 0;
  list-style: none;
  z-index: 50;
}

.store-badge li {
  display: inline-block;
}

.store-badge li:not(:last-child) {
  margin-right: 1rem;
}

.store-badge li img {
  display: block;
  height: 48px;
}

@media (min-width: 768px) {
  .spec-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
  }

  .spec {
    max-width: 480px;
    font-size: 0.875rem;
    padding: 1.5rem 2rem;
  }

  .spec dt {
    width: 4.5rem;
  }

  .store-badge {
  position: static;
  bottom: auto;
  left: auto;
  width: auto;
  background-color: transparent;
  padding: 0;
  margin-right: 2rem;
  z-index: 1;
}
}


/* ---- footer menu ---------------------------------------- */
.footer-menu {
  font-size: 0.875rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.footer-menu li {
  line-height: 2;
}

.footer-menu li a {
  color: #fff;
}

@media (min-width: 768px) {
  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .footer-menu li {
    display: block;
    padding: 0.5rem 1.5rem;
  }
}


/* ---- copyright ---------------------------------------- */
.pdp-logo {
  width: 96px;
  margin: 0 auto 1rem;
}

.copyright {
  text-align: center;
  color: #fff;
  font-weight: bold;
}





/*------------------------------------------------------------------------------

  nav

------------------------------------------------------------------------------*/
.btn-nav {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  width: 64px;
  z-index: 200;
}

#menu-conts {
  display: none;
  background: rgba(0, 70, 155, .9);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
}

.menu-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-width: 480px;
}

.main-menu-list {
  list-style: none;
  width: 160px;
  padding: 0;
  margin: 0 auto 2rem;
}

.main-menu-list li {
  padding: 0.5rem;
}

.sns-menu-title {
  background: transparent url(../images/common/title_frame.png) center center no-repeat;
  background-size: auto 48px;
  line-height: 3rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1rem;
}

.sns-menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.sns-menu-list li {
  display: block;
  width: 80px;
}



@media (min-width: 768px) {
  .btn-nav {
    top: 1.5rem;
    right: 1.5rem;
    width: 80px;
  }

  .main-menu-list {
    width: 240px;
  }

  .sns-menu-list li {
    display: block;
    width: 128px;
  }
}

@media (min-width: 1280px) {
  .pc-nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 95%;
    max-width: 1920px;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 53, 86, .75);
    margin: 0 auto;
    border-radius: 16px;
  }

  #menu-conts {
    display: block !important;
    background: none;
    position: static;
    width: auto;
    height: auto;
  }

  .menu-position {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .main-menu-list {
    display: block;
    width: fit-content;
    margin: 0;
    white-space: nowrap;
  }

  .main-menu-list li {
    display: inline-block;
    padding: 0;
  }

  .main-menu-list li img {
    height: 72px;
  }

  .sns-menu-title {
    display: none;
  }

  .sns-menu-list {
    display: block;
    width: fit-content;
    margin: 0 1rem;
    white-space: nowrap;
  }

  .sns-menu-list li {
    display: inline-block;
    width: 64px;
  }

  .sns-menu-list li:not(:last-child) {
    margin-right: 1rem;
  }
  
  header h1 {
    position: static;
    top: auto;
    left: auto;
  }
}




/*------------------------------------------------------------------------------

  object - project

------------------------------------------------------------------------------*/
/* ---- common ---------------------------------------- */
.contents-wrap {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.contents-wrap h2 {
  position: absolute;
  top: 1.5rem;
  background: transparent url(../images/common/title_frame.png) center center no-repeat;
  background-size: auto 60px;
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 2.4;
  color: #fff;
  z-index: 10;
}

@media (min-width: 1280px) {
  .contents-wrap h2 {
    top: 2rem;
    background-size: auto 96px;
    height: 96px;
    font-size: 2.5rem;
    line-height: 2.4;
  }
}




/* ---- sub menu ---------------------------------------- */
.sub-menu {
  position: relative;
  max-width: 1920px;
  background-color: #1b8baa;
  text-align: center;
  margin: 0 auto;
}

.sub-menu::before,
.sub-menu::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 32px;
  background-color: transparent;
  background-image: url('../images/common/partition.png');
  background-position: center;
  background-repeat: repeat-x;
  z-index: 5;
}

.sub-menu::before {
  top: -16px;
  left: 0;
  right: 0;
}

.sub-menu::after {
  bottom: -16px;
  left: 0;
  right: 0;
}

.sub-menu p {
  padding: 1.5rem 1rem 1rem;
}
.sub-menu p:last-child {
  padding: 0 1rem 1.5rem;
}

@media (min-width: 768px) {
  .sub-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
  }

  .sub-menu p {
    padding: 0.5rem;
  }

  .sub-menu p:last-child {
    padding: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .sub-menu {
    justify-content: center;
    gap: 2rem;
  }

  .sub-menu p {
    width: 480px;
  }
}



/* ---- Features ---------------------------------------- */
.features {
  background: transparent url(../images/features/bg_system.png) center top no-repeat;
  background-size: cover;
}

.features-container {
  position: relative;
  width: 75%;
  max-width: 420px;
  padding: 7rem 0 2rem;
  margin: 0 auto;
}

@media (min-width: 1280px) {
  .features-container {
    padding: 10rem 0 4rem;
  }
}




/* ---- Information ---------------------------------------- */
.top-info-wrap {
  max-width: 1024px;
  padding: 0.5rem 1.5rem;
  margin: 0 auto;
}

.top-info-wrap h2 {
  background: transparent url(../images/common/title_frame02.png) center center no-repeat;
  background-size: 90%;
  height: 4rem;
  text-align: center;
  line-height: 64px;
  color: #fff;
}

.top-info-list {
  background-color: #086782;
  padding: 1rem;
  border: solid 4px #84b3c1;
  border-radius: 16px;
}

.top-info-list dl {
  font-size: 0.875rem;
}

.top-info-list dt {
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.top-info-list dd {
  margin: 0 0 1rem 0;
  padding-bottom: 1rem;
  border-bottom: solid 1px #84b3c1;
}

.top-info-list dd a {
  display: block;
  color: #fff;

}

.list-cat {
  margin-right: 1rem;
}

.list-cat img {
  width: 80px;
}

.list-new {
  margin-left: 1rem;
}

.list-new img {
  width: 48px;
}

.list-more {
  text-align: center;
}

.list-more img {
  width: 160px;
}

.list-more a {
  display: block;
}

@media (min-width: 768px) {
  .top-info-wrap {
    padding: 2rem 3rem;
  }

  .top-info-list {
    padding: 2rem 3rem;
  }

  .top-info-wrap h2 {
    background-size: auto 100px;
    height: 100px;
    line-height: 100px;
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .top-info-list dl {
    font-size: 1rem;
  }
}

@media (min-width: 1280px) {
  .top-info-list dt {
    margin-bottom: 1.25rem;
  }

  .top-info-list dd {
    margin: 0 0 1.5rem 0;
    padding-bottom: 1.5rem;
  }

  .list-more img {
    width: 240px;
  }
}


/* Information Archives */
.info-cat-tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0.5rem 0 0;
  margin-bottom: 1rem;
}

.info-cat-tab li {
  display: block;
  width: 30%;
}

@media (min-width: 768px) {
  .info-cat-tab {
    flex-wrap: nowrap;
    width: 75%;
    padding: 0;
    margin: 0 auto 2rem;
  }

  .info-cat-tab li {
    width: auto;
  }
}

/* Information Entry */
.entry-title {
  font-size: 1.125rem;
  color: #fff;
}

.info-entry {
  color: #fff;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: solid 1px #84b3c1;
}

.prev-next {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
}

.prev-next a {
  font-weight: bold;
  color: #fff;
}

@media (min-width: 768px) {
  .entry-title {
    font-size: 1.5rem;
  }
}

/* Information category list */
.category-title {
  font-size: 1.5rem;
  color: #fff;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: dotted 1px #fff;
}



/* ---- Information Banner ---------------------------------------- */
.info-bn-wrap {
  background-color: #644cce;
}

.info-bn {
  padding: 1rem 1.5rem;
}

.info-bn p:not(:last-child) {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .info-bn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .info-bn p {
    width: 50%;
    padding: 0.5rem;
  }

  .info-bn p:not(:last-child) {
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .info-bn {
    width: 960px;
    margin: 0 auto;
  }
}




/* ---- Swiper ---------------------------------------- */
/* エイリアン サムネイル */
.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  /* width: calc(100% / 6); */
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.slider-thumbnail-wrap {
  background-color: #fff;
  padding: 1rem;
}

.slider-thumbnail {
  max-width: 960px;
}

.swiper-slide {
  text-align: center;
}

/* 左右矢印ナビゲーションを画像化 */
/* デフォルトの矢印を消す */
.swiper-button-prev01::after,
.swiper-button-next01::after,
.swiper-button-prev02::after,
.swiper-button-next02::after,
.swiper-button-prev03::after,
.swiper-button-next03::after {
  content: "" !important;
}

.swiper-button-prev,
.swiper-button-next {
  height: 44px;
  width: 30px;
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 44px !important;
  margin: auto;
  width: 30px !important;
}

/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(../images/common/arrow_l.png);
}

/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(../images/common/arrow_r.png);
}

/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

/* 左右矢印ナビゲーションを枠外に出す */
.swiper-button-prev01,
.swiper-button-prev03 {
  left: -34px !important;
}

.swiper-button-next01,
.swiper-button-next03 {
  right: -34px !important;
}

/* ページネーションを枠外に出す */
.swiper-pagination {
  bottom: 6px !important;
}

/* ページネーションのドット色を変更 */
.swiper-pagination-bullet-active {
  background-color: #ff0 !important;
}

@media (min-width: 768px) {
  .swiper-button-prev01,
  .swiper-button-next01 {
    height: 58px !important;
    width: 38px !important;
  }

  .swiper-button-prev01::after,
  .swiper-button-next01::after {
    height: 58px !important;
    width: 38px !important;
  }

  .swiper-button-prev01 {
    top: 24px !important;
    left: -42px !important;
  }

  .swiper-button-next01 {
    top: 24px !important;
    right: -42px !important;
  }

  .swiper-button-prev02,
  .swiper-button-next02,
  .swiper-button-prev03,
  .swiper-button-next03 {
    height: 122px !important;
    width: 80px !important;
  }

  .swiper-button-prev02::after,
  .swiper-button-next02::after,
  .swiper-button-prev03::after,
  .swiper-button-next03::after {
    height: 122px !important;
    width: 80px !important;
  }

  .swiper-button-prev03 {
    left: -90px !important;
  }

  .swiper-button-next03 {
    right: -90px !important;
  }
}

@media (min-width: 920px) {
  .swiper-button-prev01 {
    top: 40px !important;
    left: -42px !important;
  }

  .swiper-button-next01 {
    top: 40px !important;
    right: -42px !important;
  }
}

@media (min-width: 1280px) {
  .swiper-pagination {
    bottom: 32px !important;
  }

  .swiper-button-prev01,
  .swiper-button-next01 {
    height: 98px !important;
    width: 64px !important;
  }

  .swiper-button-prev01::after,
  .swiper-button-next01::after {
    height: 98px !important;
    width: 64px !important;
  }

  .swiper-button-prev01 {
    top: 36px !important;
    left: -68px !important;
  }

  .swiper-button-next01 {
    top: 36px !important;
    right: -68px !important;
  }
}




/*------------------------------------------------------------------------------

  object - utility

------------------------------------------------------------------------------*/
/* ---- 固定ページ汎用 ---------------------------------------- */
.page-wrap {
  max-width: 1280px;
  padding: 0 1rem;
  margin: 32px auto;
}

.page-frame {
  color: #fff;
  background-color: rgba(13, 35, 83, 0.9);
  padding: 1rem 1.5rem;
  border: solid 4px #84b3c1;
  border-radius: 16px;
}

.page-frame h2 {
  text-align: center;
  color: #fff;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: dotted 1px #0995ec;
}

.page-frame h3 {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: dotted 1px #fff;
}

.page-frame h4 {
  margin-bottom: 1rem;
}

.page-frame a {
  color: #ff5dd9;
}

.page-frame p,
.page-frame dl,
.page-frame ol,
.page-frame ul {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.page-frame dt {
  font-weight: bold;
}

.page-frame dd {
  margin-left: 0;
}

.page-frame dd:not(:last-child),
.page-frame li:not(:last-child) {
  margin-bottom: 1rem;
}

.page-frame ul,
.page-frame ol {
  padding-left: 1.25rem;
}

.page-frame dl.layout {
  padding-left: 1rem;
}

.page-frame dl.layout dt {
  float: left;
  width: 5rem;
  font-weight: normal;
  color: #fff;
}

.page-frame dl.layout dd {
  padding: 0;
  margin-left: 5rem;
}

@media (min-width: 768px) {
  .page-wrap {
    margin: 64px auto;
  }

  .page-frame {
    padding: 2rem 3rem;
  }
}




/* ---- pagenation ---------------------------------------- */
.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
}

.pagenation li {
  background-color: #001f85;
  border: solid 3px #fff;
  border-radius: 8px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.pagenation li:hover {
  opacity: 0.65;
}

.pagenation li a {
  display: block;
  color: #fff;
  padding: 0.5rem 1rem;
}

.pagenation li.current {
  background-color: #0995ec;
  color: #ff0;
  padding: 0.5rem 1rem;
}

.pagenation li.first,
.pagenation li.last,
.pagenation li.next,
.pagenation li.prev {
  background-color: #1b8baa;
}





/* ---- 404 not found ---------------------------------------- */
.notfound-wrap {
  max-width: 768px;
  margin: 0 auto;
}

.notfound-contents {
  padding: 2rem;
}

.notfound-contents h1 {
  font-size: 8rem;
  color: #fff;
  text-align: center;
  line-height: 1;
  margin-bottom: 1rem;
}

.notfound-contents h2 {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
}

.notfound-text p {
  color: #fff;
}

.notfound-text p:not(:last-child) {
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .notfound-text p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .notfound-wrap {
    position: relative;
    height: 50vh;
  }

  .notfound-contents {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}






/* ---- margin ---------------------------------------- */
.mb08 {
  margin-bottom: 8px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb24 {
  margin-bottom: 24px;
}

.mb32 {
  margin-bottom: 32px;
}

.mb48 {
  margin-bottom: 48px;
}

.mb64 {
  margin-bottom: 64px;
}

.mb80 {
  margin-bottom: 80px;
}

.mr08 {
  margin-right: 8px;
}

.mr16 {
  margin-right: 16px;
}

.mr24 {
  margin-right: 24px;
}

.mr32 {
  margin-right: 32px;
}

.margin-auto {
  margin: 0 auto;
}

.ml-auto {
  margin-left: auto;
}

.ml08 {
  margin-left: 8px;
}

.ml16 {
  margin-left: 16px;
}

.ml24 {
  margin-left: 24px;
}

.ml32 {
  margin-left: 32px;
}

.ml48 {
  margin-left: 48px;
}

.ml120 {
  margin-left: 120px;
}

.mlr08 {
  margin-left: 8px;
}



/* ---- padding ---------------------------------------- */
.pd08 {
  padding: 8px;
}

.pd16 {
  padding: 16px;
}

.pd24 {
  padding: 24px;
}

.pd32 {
  padding: 32px;
}

.pt32 {
  padding-top: 32px;
}


/* ---- on / off ---------------------------------------- */
.br-on {
  display: none;
}

.br-off {
  display: block;
}

@media (min-width: 768px) {

  .br-on {
    display: block;
  }

  .br-off {
    display: none;
  }

}



/* ---- text ---------------------------------------- */
/* align */
.text-center {
  text-align: center;
}

.text-right {
  text-align: end;
}



/* ---- page top ---------------------------------------- */
#pagetop {
  position: fixed;
  bottom: 88px;
  right: 1.5em;
  width: 80px;
  height: 80px;
  z-index: 20;
}

@media (min-width: 768px) {
  #pagetop {
    bottom: 1.5rem;
    width: 128px;
    height: 128px;
  }
}


/* ---- google map responsive ---------------------------------------- */
.g-map {
  position: relative;
  padding-top: 56.25%;
  /* or 75%;(4:3) */
  height: 0;
  overflow: hidden;
}

.g-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- youtube responsive ---------------------------------------- */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}





/*------------------------------------------------------------------------------

  layout

------------------------------------------------------------------------------*/
/* ---- grid ---------------------------------------- */
.grid-1col {
  display: grid;
  grid-template-rows: 560px;
  grid-template-columns: 1fr;
}

.grid-2col {
  display: grid;
  grid-template-rows: 560px;
  grid-template-columns: 1fr 240px;
}


/* ---- flex ---------------------------------------- */
.flex {
  display: flex;
}

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

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-item-end {
  align-items: end;
}

/* ---- position ---------------------------------------- */
.position-relative {
  position: relative;
}

.position-right {
  position: absolute;
  right: 0;
  top: 0;
}

.position-right-detail {
  position: absolute;
  right: 7px;
  top: 7px;
}