@charset "UTF-8";

section.liver {
  z-index: 1;
  background: #D5F3FE;
}

#liver .liver .bg_w,
#liver .liver .bg_b {
  height: calc(100% - 30em);
  top: 17em;
}

.liverlist {
  width: 100%;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  margin-bottom: 8em;
}

/*-------------------------
下層
-------------------------*/
#liver .allliver {
  width: 100%;
  height: auto;
}

#liver.underlayer .container .inner {
  overflow: visible;
}

#liver.underlayer .liver .bg_w,
#liver.underlayer .liver .bg_b {
  top: 16em;
}

#liver.underlayer .liver .bg_b {
  height: 63%
}

#liver.underlayer .liver .bg_w {
  height: 100%;
}

/*detail*/
.liverdetail {
  z-index: 2;
}

/*データ情報*/
.liverdetail .detail_lname {
  margin: 1em auto 0;
  font-size: 6.25em;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.liverdetail .detail_lname-alf {
  margin: 0 auto;
  font-size: 1.875em;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: #0C5ECD;
  letter-spacing: .05em;
}

.liverdetail .btn_area {
  margin: 3em auto;
  font-size: 1.25em;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  gap: .8em .8em;
}

.liverdetail .btn_area a {
  display: block;
  overflow: hidden;
  padding: 1em;
  text-align: center;
  border-radius: 100vh;
  letter-spacing: .05em;
  line-height: 1;
}

.liverdetail .btn_area a.btn_yt {
  background: #fff;
  color: #111;
}

.liverdetail .btn_area a.btn_sr {
  background: #111;
  color: #fff;
}

.liverdetail .btn_area a.btn_tw {
  background: #fff;
  color: #1DA1F2;
}

.liverdetail .btn_area a.btn_sns-x {
  background: #fff;
  color: #000;
}

.liverdetail .btn_area a.btn_yt span {
  display: inline-block;
  padding: 0 0 0 1.25em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="%23e73323" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>') center left / auto .8em no-repeat;
  transition: .3s;
}

.liverdetail .btn_area a.btn_tw span {
  display: inline-block;
  padding: 0 0 0 1.25em;
  background: url("../img/tw_b.png") center left / auto .8em no-repeat;
  transition: .3s;
}

.liverdetail .btn_area a.btn_sns-x span {
  display: inline-block;
  padding: .015em 0 .015em 1.35em;
  background: url("../img/sns-x_b.png") center left / auto 1em no-repeat;
  transition: .3s;
  font-size: .85em;
}

.liverdetail .liver_catchcopy {
  font-size: 2em;
  font-weight: 700;
  color: #1EADEF;
  line-height: 1.4;
}

.liverdetail .datalist_area {
  border-top: 1px solid #fff;
  margin: 2em auto;
}

.liverdetail .datalist_area th,
.liverdetail .datalist_area td {
  vertical-align: middle;
  padding: .8em 0;
  border-bottom: 1px solid #fff;
}

.liverdetail .datalist_area th {
  width: 10em;
  font-size: 1.25em;
  color: #fff;
  white-space: nowrap;
}

.liverdetail .datalist_area td {
  font-size: 1.5em;
  font-weight: 700;
  color: #073358;
  text-shadow: -1px -1px 0 #92DAF8, 1px -1px 0 #92DAF8, -1px 1px 0 #92DAF8, 1px 1px 0 #92DAF8, 0px 0px 3px #92DAF8, 0px 0px 6px #92DAF8;
}

.liverdetail .datalist_area .noline {
  border-bottom: none;
  padding-bottom: 0;
}

/*全身絵*/
.liverdetail .graphic_area {
  width: 90%;
  z-index: 0;
  animation-name: DissSlidein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  opacity: 0%;
}

.emoji {
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

@keyframes DissSlidein {
  from {
    margin-top: -5%;
    opacity: 0%;
  }

  to {
    margin-top: 0%;
    opacity: 100%;
  }
}

.liverdetail .graphic_area img {
  width: auto;
  height: 82em;
}

/*+++++++++++++++++++++++++++
mediaクエリ【PC】
+++++++++++++++++++++++++++*/
@media (min-width: 641px) {
  .liverlist {
    gap: 3em 5%;
  }

  .liverlist li {
    width: 30%;
  }

  /*-------------------------
下層
-------------------------*/
  /*データ情報*/
  .liverdetail .info_area {
    width: 50%;
    z-index: 1;
  }

  /*.liverdetail .btn_area a {
    width: 10em;
  }*/
  .liverdetail .btn_area a {
    width: calc(33.3333% - .6em);
  }

  .liverdetail .btn_area a.btn_yt:hover {
    background: #111;
    color: #fff;
  }

  .liverdetail .btn_area a.btn_sr:hover {
    background: #fff;
    color: #111;
  }

  .liverdetail .btn_area a.btn_tw:hover {
    background: #1DA1F2;
    color: #fff;
  }

  .liverdetail .btn_area a.btn_sns-x:hover {
    background: #000;
    color: #fff;
  }

  .liverdetail .btn_area a.btn_tw:hover span {
    background: url("../img/tw_w.png") center left / auto .8em no-repeat;
  }

  .liverdetail .btn_area a.btn_sns-x:hover span {
    background: url("../img/sns-x_w.png") center left / auto 1em no-repeat;
  }

  /*全身絵*/
  .liverdetail .graphic_area {
    overflow: visible;
  }

  /*全身絵*/
  .liverdetail .graphic_area {
    margin-left: -40%;
  }

  .liverdetail .graphic_area img {
    float: right;
  }

  /*-------------------------
	画像個別対応
	-------------------------*/
  .liverdetail .graphic_area img.gra01 {
    margin-right: 0;
  }

  .liverdetail .graphic_area img.gra02 {
    margin-right: -22%
  }

  .liverdetail .graphic_area img.gra04 {
    margin-right: -22%
  }

  .liverdetail .graphic_area img.gra08 {
    margin-right: -14%
  }
}

/*+++++++++++++++++++++++++++
mediaクエリ【ノート】
+++++++++++++++++++++++++++*/
@media screen and (min-width:641px) and (max-width: 1199px) {
  body {
    font-size: 1.35vw
  }
}

/*+++++++++++++++++++++++++++
mediaクエリ【スマホ】
+++++++++++++++++++++++++++*/
@media screen and (max-width: 640px) {

  #liver .liver .bg_w,
  #liver .liver .bg_b {
    height: calc(100% - 20em);
    top: 12em;
  }

  .liverlist {
    width: calc(100% + 2em);
    margin: 0 -1em;
    gap: 2em 5%;
    margin-bottom: 4em;
  }

  .liverlist li {
    width: 45%;
  }

  #liver .image_area img {
    border: .35em solid #fff;
  }

  #liver .lname {
    padding: .7em;
    font-size: 1.25em;
  }

  /*-------------------------
	下層
	-------------------------*/
  #liver.underlayer .liver .bg_w,
  #liver.underlayer .liver .bg_b {
    width: 150%;
    top: 10em;
    left: -25%;
  }

  #liver.underlayer .liver .bg_b {
    height: 84%;
  }

  /*データ情報*/
  .liverdetail .info_area {
    width: 100%;
  }

  .liverdetail .detail_lname {
    margin: .25em auto 0;
    font-size: 4.5em;
  }

  .liverdetail .btn_area {
    margin: 1em 0 1.5em 0;

  }

  .liverdetail .btn_area a {
    width: calc(50% - .4em);
  }

  .liverdetail .liver_catchcopy {
    margin-top: .8em;
  }

  .liverdetail .datalist_area td {
    font-size: 1.45em;
  }

  /*全身絵*/
  .liverdetail .graphic_area {
    width: 100%;
    text-align: center;
  }

  .liverdetail .graphic_area img {
    height: 195vw;
  }

  /*-------------------------
	画像個別対応
	-------------------------*/
  .liverdetail .graphic_area img.gra01 {
    margin-right: 0;
    margin-left: -25%;
  }

  .liverdetail .graphic_area img.gra02 {
    margin-right: 0;
    margin-left: -12%;
  }

  .liverdetail .graphic_area img.gra04 {
    margin-right: 0;
    margin-left: -30%;
  }

  .liverdetail .graphic_area img.gra08 {
    margin-right: 0;
    margin-left: -18%;
  }
}