@charset 'utf-8';

/*card.css*/


/*初回注文*/

.design-menu {
  position: relative;
  padding: 30px;
  width: min(500px, 100%);
  height: fit-content;
  background-image: url(../img/card/card-fast-bg-img.webp);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;

  margin-block: 200px 80px;
  margin-inline: auto;
}

/* 768px～（タブレット）
  -------------------------------------------- */
@media (min-width: 768px) {
  .design-menu {
    padding: 55px;
    width: min(700px, 100%);
  }
}

/* 960px～（タブレット）
  -------------------------------------------- */
@media (min-width: 960px) {
  .design-menu {
    display: grid;
    width: min(1200px, 100%);

    gap: 20px;
    grid-template-areas: 'title menu2' 'title menu2' 'comment comment';
    grid-template-columns: 400px 1fr;
    grid-template-rows: 70px 200px 1fr;
    margin-block: 280px 80px;
  }
}

.design-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 /.3);
}

.design-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 10px;

  gap: 25px;
}

/* 768px～（タブレット）
-------------------------------------------- */
@media (min-width: 768px) {
  .design-menu ul {
    padding: 50px;
    background-color: rgb(255 255 255 /.5);

    margin-inline: auto;
  }
}

/* 960px～（タブレット）
  -------------------------------------------- */
@media (min-width: 960px) {
  .design-menu ul {
    margin-top: 0;
    padding: 77px;

    grid-area: menu2;
  }
}

.design-menu img {
  display: block;
  width: min( 150px, 100%);

  margin-inline: auto;
}

/* 768px～（タブレット）
-------------------------------------------- */
@media (min-width: 768px) {
  .design-menu img {
    width: min( 200px, 100%);
  }
}

.design-menu span {
  margin-left: -28px;
  font-size: 4rem;
  text-align: center;
}

.fast-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(400px, 100%);
  background-color: #fff;
  border: double 4px #f7c6c6;
  border-radius: 20px;

  margin-inline: auto;
}

/* 960px～（タブレット）
-------------------------------------------- */
@media (min-width: 960px) {
  .fast-flex {
    grid-area: title;
  }
}

.fast-flex img {
  width: 30px;
}

/* 768px～（タブレット）
-------------------------------------------- */
@media (min-width: 768px) {
  .fast-flex img {
    width: 50px;
  }
}

.fast-flex h1 {
  padding: 20px;
  color: var(--base-color5);
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
}

/* 768px～（タブレット）
-------------------------------------------- */
@media (min-width: 768px) {
  .fast-flex h1 {
    font-size: 2.3rem;
  }
}

/* 960px～（タブレット）
-------------------------------------------- */
@media (min-width: 960px) {
  .fast-flex h1 {
    font-size: 3rem;
  }
}

#design-img {
  padding: 30px;
  background-color: #fffbf5;
}

.design-text {
  opacity: .4;
  width: 100%;
  height: 200px;
  background-image: url(../img/card/card-title-img.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.design-text h1 {
  padding: 10px;
  font-size: 1.8rem;
  background-color: #fff;
}

.design-text ul {
  display: flex;
}

.design-text li {
  color: var(--base-color5);
  font-size: 2rem;
}


#page-title {
  opacity: .3;
  position: relative;
  background-image: url(../img/card/card-title-img.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#page-title h1 {
  text-shadow: 5px 3px 0 rgba(243, 125, 164, .9);
}

/*共通タイトル色別*/
.section-title2 {
  background-color: var(--base-color);
}

.section-title2 h1 {
  color: var(--base-color5);
}

/*初回料金案内*/
#price-view {
  margin-block: 50px;
}

#price-view p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
  font-size: 1.3rem;
  line-height: 1.7;
  background-color: rgb(255 255 255 /.8);
}

/* 768px～（タブレット）
  -------------------------------------------- */
@media (min-width: 768px) {
  #price-view br {
    display: none;
  }

  #price-view p {
    margin-top: 41px;
    padding: 14px;
    font-size: 1.6rem;
  }
}

/* 960px～（パソコン）
  -------------------------------------------- */
@media (min-width: 960px) {
  #price-view p {
    margin-top: 0;

    grid-area: comment;
  }
}

/*料金表*/

.card-text p {
  padding: 10px;
  font-size: 1.5rem;
  text-align: center;
  white-space: nowrap;
}

/* 768px～（タブレット）
  -------------------------------------------- */
@media (min-width: 768px) {
  .card-text p {
    font-size: 1.8rem;
  }
}

/* 960px～（パソコン）
  -------------------------------------------- */
@media (min-width: 960px) {
  .card-text p {
    font-size: 2rem;
  }
}

.card-text ul {
  border-right: solid 1px #b9acac;
  border-bottom: solid 1px #b9acac;
  border-left: solid 1px #b9acac;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.card-text li {
  padding: 5px;
  color: var(--text-color3);
  font-size: 1.6rem;
  line-height: 4;
  text-align: center;
  background-color: var(--text-color2);
  border-top: solid 1px #b9acac;
}

/* 768px～（タブレット）
  -------------------------------------------- */
@media (min-width: 768px) {
  .card-text li {
    padding: 25px;
  }
}

.card-text li span {
  padding: 20px;
  color: #fda2a2;
  font-size: 1.8rem;
  line-height: 1.8;
  text-align: right;
}

/* 768px～（タブレット）
  -------------------------------------------- */
@media (min-width: 768px) {
  .card-text li span {
    font-size: 2rem;
  }
}

/* 960px～（パソコン）
-------------------------------------------- */
@media (min-width: 960px) {
  .card-text li span {
    font-size: 2.3rem;
  }
}

/* 768px～（パソコン）
-------------------------------------------- */
@media (min-width: 768px) {
  .tab-content {
    padding: 20px 50px;
  }
}

.text-loop {
  margin: 0;
  padding-top: 42px;
  padding-bottom: 0;
  background-color: var(--base-color);
}

.text-loop div:nth-child(odd),
.text-loop div:nth-child(even) {
  color: var(--base-color5);
}


/*料金案内名刺ページ指定*/

.flexbox {
  display: block;
}
.flexbox .box1 {
  width: 100%;

  margin-block: 20px;
  margin-inline: auto;
}
.flexbox .box2 {
  width: 100%;

  margin-inline: auto;
}

.contents-tab {
  margin-top: 0;
  margin-bottom: 20px;
  width: 75%;

  margin-inline: auto;
  padding-block: 20px;
}

/* 768px～（パソコン）
-------------------------------------------- */
@media (min-width: 768px) {
  .contents-tab {
    margin-top: 40px;
    width: min(1200px, 100%);
  }
}

/* 960px～（パソコン）
-------------------------------------------- */
@media (min-width: 960px) {
}

/* 960px～（パソコン）
-------------------------------------------- */
@media (min-width: 960px) {
  /*画像文字横並びを縦並び、セットで横並びに変更*/
  .tab_content_description {
    display: flex;
    flex-wrap: wrap;
  }
}

/*名刺ページ用タブの色*/
.kirikae-tab input:checked + .tab-style {
  background-color: var(--base-color5);
}

/*名刺ページ用線の色*/
.instance-box ul {
  border: dotted 1px var(--base-color5);
}

/*名刺ページ用金額文字色*/
.instance-box .number {
  color: var(--base-color5);
}


/* 768px～（パソコン）
-------------------------------------------- */
@media (min-width: 768px) {
  .instance-box {
    margin-top: 66px;
  }
}

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

/* 768px～（パソコン）
-------------------------------------------- */
@media (min-width: 768px) {
  .flexbox {
    display: flex;

    gap: 20px;
  }
}

.flexbox img {
  width: min(500px, 100%);
}


.box1 {
  margin: auto;
  width: 55%;
}

.box2 {
  margin: auto .5rem;
  width: 45%;
}


#flow {
  position: relative;
  padding: 20px 40px 50px;
  background-image: url(../img/card/card-bg-img.webp);
  background-position: center center;
  background-size: contain;
  background-repeat: repeat;
}


/* 960px～（タブレット）
    -------------------------------------------- */
@media (min-width: 960px) {
  #flow {
    padding: 20px 130px 100px;
  }
}

#flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--base-color), transparent);
}

.flow-design {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow {
  padding-left: 0;
  width: 80%;
}

@media (min-width: 960px) {
  .flow {
    width: 70%;
  }
}

.flow > li {
  padding: 20px;
  background-color: #fff;
  border: 2px solid var(--base-color1);
  border-radius: 20px;
}

@media (min-width: 768px) {
  .flow > li {
    padding: 30px;
    font-size: 1.6rem;
  }
}

.flow > li:not(:last-child) {
  position: relative;
  margin-bottom: 40px;
}

.flow > li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -39px;
  left: 50%;
  width: 0;
  height: 0;
  border: solid 10px transparent;
  border-top-color: #fda2a2;

  translate: -50%;
}

.flow > li dl dt {
  margin-bottom: .5em;
  padding-bottom: .5em;
  color: #fda2a2;
  font-weight: 500;
  font-size: 1.4rem;
  border-bottom: 2pt dashed #fda2a2;
}

@media (min-width: 768px) {
  .flow > li dl dt {
    font-size: 1.6rem;
  }
}

.flow > li .icon {
  margin-right: .5em;
  color: #fda2a2;
  font-size: 2.3rem;
  font-family: 'Nothing You Could Do', system-ui;
}

.flow > li dl dd {
  margin: 0;
  line-height: 1.5;
}