@charset "UTF-8";
/* css document ------------------------
-- commnon
----

-- header
----メインヴィジュアル

-- mainWrapper
----モデルリスト一覧
----モデル情報
----他のモデル

-- footer
----
------------------------ */
/* ----------------------------------------------------------------
  SCSS CMN SET.
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
  body
---------------------------------------------------------------- */
body {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .1rem;
  font-family: "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #333;
  background-color: #faf3f5;
}

/* ----------------------------------------------------------------
  header
---------------------------------------------------------------- */
/*
  main-visual
---------------------------------------------------------------- */
.main-visual {
  text-align: center;
}

/* ----------------------------------------------------------------
  mainWrapper
---------------------------------------------------------------- */
.main-wrapper {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 769px) {
  .main-wrapper {
    padding: 0;
  }
}

/*
  モデルリスト一覧
---------------------------------------------------------------- */
.model-list {
  color: #ef63ad;
}

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

.grid--s {
  margin: -2rem 0 0 -2%;
}

.grid--s .grid__card {
  width: 48%;
  margin: 2rem 0 0 2%;
}

@media screen and (min-width: 451px) {
  .grid--s {
    margin: -1rem 0 0 -1%;
  }
  .grid--s .grid__card {
    width: 24%;
    margin: 1rem 0 0 1%;
  }
}

.grid--m {
  margin: -2rem 0 0 -2%;
}

.grid--m .grid__card {
  width: 48%;
  margin: 2rem 0 0 2%;
}

@media screen and (min-width: 451px) {
  .grid--m {
    margin: -2rem 0 0 -3.33%;
  }
  .grid--m .grid__card {
    width: 30%;
    margin: 2rem 0 0 3.33%;
  }
}

.grid__card__body {
  color: #ef63ad;
}

.grid__card__txt {
  font-size: 1.8rem;
  font-weight: 800;
}

.grid a {
  color: #ef63ad;
}

/*
  モデル情報
---------------------------------------------------------------- */
.info-model {
  margin-top: 4rem;
}

.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.profile__info {
  text-align: center;
  margin: 2rem 0 0 0;
}

.profile__txt {
  font-size: 2.4rem;
  font-weight: 800;
  color: #ef63ad;
}

@media screen and (min-width: 451px) {
  .profile {
    align-items: flex-end;
    flex-direction: unset;
  }
  .profile .profile__info {
    text-align: left;
    margin: 0 0 0 2rem;
  }
}

.list-qa {
  margin-top: 8rem;
  padding: 2rem;
  background-color: #fafafa;
}

@media screen and (min-width: 769px) {
  .list-qa {
    padding: 4rem;
  }
}

.list-qa__ttl {
  position: relative;
  z-index: 0;
  color: #00A0F0;
}

.list-qa__ttl::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2rem;
  left: -.4rem;
  display: block;
  width: 60px;
  height: 80px;
  background: url(../img/sakura-main.png) no-repeat;
  background-size: contain;
}

.list-qa__unit {
  margin-top: 2rem;
}

.list-qa__col:not(:first-child) {
  margin-top: 4rem;
}

.list-qa__txt {
  position: relative;
  z-index: 0;
  padding: .4rem 2rem .4rem 4rem;
  color: #333;
  background-color: #fafafa;
  border: 1px solid #333;
}

.list-qa__txt--q:before {
  content: 'Q';
  position: absolute;
  top: -1rem;
  left: -.1rem;
  z-index: 10;
  display: block;
  padding: 1rem;
  line-height: 1;
  font-weight: 800;
  color: #00A0F0;
  background-color: #fafafa;
  border: 2px solid #00A0F0;
}

.list-qa__txt--a {
  margin-top: 1.2rem;
}

.list-qa__txt--a:before {
  content: 'A';
  position: absolute;
  top: -1rem;
  left: -.1rem;
  z-index: 10;
  display: block;
  padding: 1rem;
  line-height: 1;
  font-weight: 800;
  color: #ef63ad;
  background-color: #fafafa;
  border: 2px solid #ef63ad;
}

/* ----------------------------------------------------------------
  footer
---------------------------------------------------------------- */
footer {
  text-align: center;
  margin-top: 8rem;
  background-color: #faf3f5;
}

/*
  コピーライト
---------------------------------------------------------------- */
.copy-right {
  display: inline-block;
  vertical-align: top;
  padding: 1rem 0;
  font-size: 14px;
  color: #00A0F0;
}

/* ----------------------------------------------------------------
  commnon
---------------------------------------------------------------- */
.max100 {
  max-width: 100%;
}

.mt-s {
  margin-top: 2rem;
}

.mt-xl {
  margin-top: 8rem;
}

.anchor {
  display: block;
  padding-top: 120px;
  margin-top: -120px;
}

.heading {
  font-weight: 800;
}

.heading--s {
  font-size: 1.8rem;
}

.heading--m {
  font-size: 3.2rem;
}

.heading--l {
  text-align: center;
  font-size: 4rem;
}

.con:not(:first-child) {
  margin-top: 8rem;
}

.con__ttl {
  color: #00A0F0;
}

.link-icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7.5px 0 7.5px 10.8px;
  border-color: transparent transparent transparent #24B089;
}

/* ----------------------------------------------------------------
  ナビ
---------------------------------------------------------------- */
.Toggle {
  display: block;
  position: fixed;
  right: 13px;
  top: 40px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 1000;
}

.Toggle span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 3px #7e746d;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}

.Toggle span:nth-child(1) {
  top: 9px;
}

.Toggle span:nth-child(2) {
  top: 18px;
}

.Toggle span:nth-child(3) {
  top: 27px;
}

.Toggle.active span {
  /* 最初のspanをマイナス45度に */
  /* 2番目と3番目のspanを45度に */
}

.Toggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.Toggle.active span:nth-child(2), .Toggle.active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ----------------------------------------------------------------
  ページトップ
---------------------------------------------------------------- */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 100;
  opacity: .8;
}

.page-top .page-top__body {
  display: block;
  width: 60px;
  height: 60px;
  color: #faf3f5;
  background-color: #00A0F0;
}

.page-top .page-top__arrow::before {
  content: '';
  width: 18px;
  height: 18px;
  border-top: solid 4px #faf3f5;
  border-right: solid 4px #faf3f5;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -8px;
}