@charset "UTF-8";

/* ベースのスタイル
------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;

  @media (min-width: 768px) and (max-width: 1023px) {
    font-size: 1vw;
  }
}

/* html {
  background-image: url(../images/web_tanakayu_haikei.png);
  background-attachment: fixed;
  background-size: cover;
} */

html::before {
  background-image: url(../images/web_tanakayu_haikei.png);
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}



body {
  font-family: "M PLUS 1", serif;
  font-weight: 400;
  line-height: 1.75;
  color: #193B50;
}

a {
  color: #fff;
  text-decoration: none;
}

a,
a:hover,
a i {
  transition: all 0.3s;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

h3 {
  font-size: 3rem;

  @media (max-width: 767.9px) {
    font-size: 2.4rem;
  }
}

h4 {
  font-size: 2rem;
}

p,
ul,
li,
td,
dt,
dd {
  font-size: 1.6rem;
}

/* 部品
------------------------------------------ */
/* フォント M PLUS 1 */
.plus01 {
  font-family: "M PLUS 1", serif;
}

/* フォント Anta */
.anta {
  font-family: "Anta", serif;
}

/* フォントウェイト ボールド400 */
.regular {
  font-weight: 400;
}

/* フォントウェイト ボールド700 */
.bold {
  font-weight: 700;
}

/* フォントサイズ16 */
.size-16 {
  font-size: 1.6rem;
}

/* フレックス */
.flex {
  display: flex;
}

/* PC-フレックス */
@media (min-width: 768px) {
  .pc-flex {
    display: flex;
  }
}

/* スマホ-フレックス */
@media (max-width: 767.9px) {
  .sp-flex {
    display: flex;
  }
}

/* ボタン */
.button {
  display: block;
  width: 20rem;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
  color: white;
  background-color: #DD5959;
  border-radius: 5rem;
  box-shadow: 0 0.6rem #F2A877;
}

.button:hover {
  filter: brightness(120%);
  font-size: 3rem;
  padding: 1.4rem 0;
}

.button:active {
  position: relative;
  top: 0.6rem;
  box-shadow: none;
}

/* width1080px */
.wrapper-1080 {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* コンテンツ */
.contents {
  padding: 6rem 3rem 10rem;
  box-shadow: 2rem 2rem 3rem 0 rgba(0, 0, 0, 15%);

  @media (max-width: 767.9px) {
    padding: 6rem 2rem 10rem;
    box-shadow: none;
  }
}


/* セクションタイトル h2 */
.section-title {
  position: relative;
  z-index: 0;
  font-size: 5rem;
  letter-spacing: 1rem;
  font-weight: 400;
  text-shadow: 5px 5px 0 #fff;
  margin-bottom: 3rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30rem;
  height: 3rem;
  background-color: #9BCFC4;
  z-index: -1;
}

/* スマホ時改行 */
.sp-br {
  @media (min-width: 768px) {
    display: none;
  }
}

/* ページ読み込み直後にフェードイン要素を非表示にする */
.animate__animated {
  opacity: 0;
}

/* 表示なし */
.no-display {
  opacity: 0;
}


/* カラム 幅調整
------------------------------------------ */
/* 左 */
.m-visual-left {
  width: 40.74%;
  max-width: 44rem;

  @media (max-width: 767.9px) {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }
}

/* 中央 */
.main-page,
.main-footer {
  width: 48.15%;
  max-width: 52rem;
  margin-left: 44rem;

  @media (max-width: 767.9px) {
    width: 100%;
    max-width: 100%;
    margin-left: 0rem;
  }

  @media (min-width: 768px)and (max-width: 1079.9px) {
    margin-left: 40.47%;
  }
}

/* 右 */
.main-aside {
  width: 11.11%;
  max-width: 12rem;
  margin-left: 96rem;

  @media (max-width: 767.9px) {
    width: 100%;
    max-width: 100%;
    margin-left: 0rem;
  }

  @media (min-width: 768px)and (max-width: 1079.9px) {
    margin-left: 88.89%;
  }
}


/* ヘッダー
------------------------------------------ */
/* メインビジュアル(PC左) */
.m-visual-left {
  position: fixed;
  height: 100vh;
  background-image: url(../images/bg_01.png);
  background-size: cover;
  box-shadow: -2rem 0 3rem 0 rgba(0, 0, 0, 15%);

  @media (max-width: 767px) {
    position: static;
    padding: 3rem 2rem;
  }
}

.m-visual-left-inner {
  padding: 0 3rem;
  margin: auto;
}

.m-visual-left-inner h1 {
  position: relative;
}

.logo {
  height: 100%;
}

.lotus-01,
.lotus-02 {
  position: absolute;
  z-index: 100;
}

.lotus-01 {
  width: 60%;
  top: -8rem;
  right: -8rem;
}

.lotus-02 {
  width: 80%;
  bottom: -12rem;
  left: -12rem;
}


/* ハンバーガーボタン */
.hamburger-button {
  position: fixed;
  z-index: 200;
  top: 1rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  background-color: rgba(225, 225, 225, 80%);
  border-radius: 10%;
}

@media (min-width: 768px) {
  .hamburger-button {
    display: none;
  }
}

.hamburger-button-bar {
  width: 4rem;
  height: .2rem;
  background-color: #193B50;
  transition: all 0.8s;
}

.hamburger-button-text {
  font-size: 1.6rem;
  transition: all 0.8s;
}

.hamburger-button-bar:first-child,
.hamburger-button-text {
  margin-bottom: .1rem;
}

/* ハンバーガーボタン アクティブ */
.hamburger-button-active .hamburger-button-bar {
  position: absolute;
  width: 4rem;
  top: 3rem;
  right: 1rem;
}

.hamburger-button-active .hamburger-button-bar:first-child {
  transform: rotate(225deg);
}

.hamburger-button-active .hamburger-button-text,
.sp-hamburger-button-active .hamburger-button-text {
  opacity: 0;
}

.hamburger-button-active .hamburger-button-bar:last-child {
  transform: rotate(-225deg);
}

/* メインヴィジュアル(PC右)
------------------------------------------ */
.m-visual-right {
  height: 100vh;

  @media (max-width: 767px) {
    display: none;
  }
}

.m-visual-right-inner {
  margin: auto;
}

.m-visual-right-inner h2 {
  font-size: 4rem;
  color: #fff;
}

/*プロフィール
------------------------------------------ */
.profile {
  background-color: #fff;
}

.profile h3 {
  margin-bottom: 2rem;
  padding-left: 2rem;
  ;
  border-left: 0.5rem solid #DD5959;
}

.profile h4 {
  margin-bottom: 1rem;
}

.profile-text-02 {
  margin-bottom: 6rem;
}

.skill-list-01,
.skill-list-02,
.skill-list-03,
.about-content-01 {
  margin-bottom: 4rem;
}


.profile-name span {
  font-size: 2rem;
  margin-left: 1rem;

  @media (max-width: 767.9px) {
    font-size: 1.6rem;
  }
}


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

.icon-pic img {
  width: 60%;
  border-radius: 50%;
  margin-bottom: 6rem;
}

.about-title span {
  font-size: 2rem;
  margin-left: 1rem;
}

.profile dt {
  display: inline-block;
  border-bottom: .1rem solid #429787;
}

.profile dd {
  margin-left: 2rem;
  margin-bottom: 1.2rem;
}

.graphic-list,
.website-list {
  max-width: 40rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 2rem;
  row-gap: 3rem;
  margin: 5rem auto;
}

.graphic-list li:not(:last-child),
.website-list li {
  font-size: 1.4rem;
  text-align: center;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  color: #fff;
  align-items: center;
  background-color: #DD5959;
  border-radius: 50%;
}

.graphic-list li:first-child {
  letter-spacing: -.1rem;
  ;
}

.graphic-list li:last-child {
  font-size: 1.4rem;
  text-align: center;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  align-items: center;
}



/*works
------------------------------------------ */
.works {
  background-color: #fff;
}

.works h3 {
  margin-bottom: 2rem;
  padding-left: 2rem;
  border-left: 0.5rem solid #DD5959;
}

.works-frame {
  margin-bottom: 6rem;
}

.works h4 {
  margin-bottom: 1rem;
}

.works h4 span {
  margin-left: 1rem;
}

.works p {
  margin-bottom: 4rem;
}

.design-img-01,
.design-img-02 {
  column-gap: 2rem;
  row-gap: 5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.design-img-01 img,
.design-img-02 img,
.design-img-03 img {
  width: 70%;
  box-shadow: 0.1rem 0.1rem 1rem 0.5rem rgba(0, 0, 0, 15%);
}

.design-img-03 {
  text-align: center;
}

.works-button {
  height: 6rem;
  margin: 10rem auto;
}

.works-button-02 {
  margin: 10rem auto 0;
}

.portrait-img-01,
.portrait-img-03 {
  text-align: center;
}

.portrait-img-02 {
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 2rem;
  justify-content: center;
}

.portrait-img-01 img,
.portrait-img-02 img,
.portrait-img-03 img {
  width: 45%;
}


/*プライス
------------------------------------------ */
.price {
  background-color: #fff;
}

.price h3 {
  margin-bottom: 1rem;
  font-size: 2.4rem;
  padding-left: 2rem;
  border-left: 0.5rem solid #DD5959;

  @media (max-width: 767.9px) {
    font-size: 2rem;
  }
}

.price-sub-text {
  margin-bottom: 3rem;
}

.price-frame-top {
  padding: 3rem 2rem;
  background-color: #fff;
  border: .2rem solid #9BCFC4;
  border-radius: 1rem;

  @media (max-width: 767.9px) {
    padding: 3rem 1rem;
  }
}

.price table {
  border-collapse: collapse;
  width: 100%;
}

.price table tr {
  border-bottom: 0.1rem solid #9BCFC4;
}

.price table tr td:nth-child(2) {
  text-align: end;
}

.price table th,
.price table td {
  padding: 1rem;
}

.price-frame-top-01 {
  margin-bottom: 3rem;
}

.price-frame-top-02,
.price-frame-top-03 {
  margin-bottom: 5rem;
}

.price-width-01 {
  width: 60%;
}

.price-price {
  font-size: 2.4rem;

  @media (max-width: 767.9px) {
    font-size: 2rem;
  }
}

.price .price-website-dt {
  font-size: 1.4rem;
  text-align: end;
  margin-bottom: 2rem;
}

.price-button {
  width: 28rem;
  height: 6rem;
  font-size: 1.6rem;
  line-height: calc(28/20);
  margin: 10rem auto 0;
  padding: 0.8rem;
}

.price-button:hover {
  padding: 0.2rem;
  font-size: 2rem;
}

/*そのほか
------------------------------------------ */
.other {
  background-color: #fff;
}

.other h3 {
  margin-bottom: 2.4rem;
  padding-left: 2rem;
  border-left: 0.5rem solid #DD5959;

  @media (max-width: 767.9px) {
    font-size: 2rem;
  }
}

.other-text-01 {
  margin-bottom: 6rem;
}

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

.other-portrait img {
  width: 40%;
  border-radius: 10%;
  margin-bottom: 10rem;
}

.other-button {
  height: 6rem;
  margin-bottom: 2rem;
}

/*コンタクト
------------------------------------------ */
.contact {
  background-color: #fff;
}

.contact-text {
  margin-bottom: 6rem;
}

.contact-sns {
  justify-content: center;
  column-gap: 1.2rem;
  margin-bottom: 6rem;
}

.sns-icon {
  width: 12rem;
  text-align: center;
}

.contact-sns dt {
  column-gap: 4rem;
  margin-bottom: 1rem;
}

.contact-sns dd {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.contact-sns dd i {
  height: 8rem;
  width: 8rem;
  border-radius: 50%;
  background-color: #193B50;
  margin: 0 auto;
}

.contact-sns i {
  font-size: 4.5rem;
  color: #fff;
  padding: 1.8rem;
}

.contact-sns i:hover {
  font-size: 6rem;
  color: #fff;
  padding: 1rem;
}

.contact-snsX {
  width: 80%;
  margin: 0 auto;
}

/* ページトップへ戻るボタン */
/* .button-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 3rem;
  right: 5rem;
  width: 8rem;
  height: 8rem;
  font-size: 3rem;
  color: #fff;
  background-color: #DD5959;
  border-radius: 20%;

  @media (max-width: 767.9px) {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
    bottom: 2rem;
    right: 2rem;
  }
} */



/*アサイド
------------------------------------------ */
.main-aside {
  position: fixed;
  z-index: 100;
}

@media (max-width: 767.9px) {
  .hamburger-menu {
    position: static;
  }
}

.aside-nav {
  margin: 5rem 2rem 0;

  @media (max-width: 767.9px) {
    margin: 0;
  }

  @media (min-width: 768px) and (max-width: 979px) {
    margin: 2rem 1rem 0;
  }
}

.aside-nav a {
  display: inline-block;
  font-size: 2rem;
  height: 8rem;
  width: 8rem;
  background-color: #9BCFC4;
  border-radius: 50%;
  line-height: 8rem;
  text-align: center;
  margin-bottom: 2rem;
}

.aside-nav a:hover {
  background-color: #DD5959;

  @media (min-width: 1280px) {
    font-size: 3.4rem;
    height: 14rem;
    width: 14rem;
    line-height: 14rem;
    transition: all 0.3s;
  }
}

/* 767.9px以下 ハンバーガーメニュー */
@media (max-width: 767.9px) {
  .hamburger-menu {
    position: fixed;
    top: 0;
    left: 100%;
    width: 30%;
    height: 100vh;
    text-align: end;
    padding: 10rem 2rem 0;
    background-color: rgb(25, 59, 80, 90%);
    transition: all 0.6s;
    visibility: hidden;
  }

  .aside-nav a,
  .header01Menu-nav a {
    display: inline-block;
    font-size: 2rem;
    height: 7rem;
    width: 7rem;
    background-color: #9BCFC4;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 7rem;
    text-align: center;
    margin-bottom: 2rem;
  }
}

/* 開いている状態 */
.hamburger-menu-active {
  left: 70%;
  visibility: visible;
  z-index: 100;
}

/*フッター
------------------------------------------ */
footer {
  height: 8rem;
  text-align: center;
}

footer small {
  display: block;
  color: #fff;
  margin-top: 2rem;
}

/* 下層ページ
----------------------------------------------------------------------
---------------------------------------------------------------------- */

/* 下層ページ共通 部品
------------------------------------------ */
.main01,
.main02 {
  box-shadow: 0rem 0rem 1rem 1rem rgba(0, 0, 0, 15%);
}

/* コンテンツ */
.contents-sub {
  padding: 10rem 5rem;

  @media (max-width: 767.9px) {
    padding: 10rem 2rem;
  }
}

/* セクションタイトル h3 */
.main01 h3,
.main02 h3 {
  margin-bottom: 2.4rem;
  padding-left: 2rem;
  border-left: 0.5rem solid #DD5959;

  @media (max-width: 767.9px) {
    font-size: 2rem;
  }
}

.main01 h4 {
  margin-bottom: 1rem;
}

/*下層ページ共通 ヘッダー
------------------------------------------ */
.header01Menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

.header01Menu-inner {
  justify-content: space-between;
  height: 8rem;
  padding: 1rem 3rem;
  background-color: rgba(255, 255, 255, 80%);

  /* @media (max-width: 767.9px) {
    padding: 2rem 3rem;
  } */

  /* @media (min-width: 768px) {
    background-color: rgba(255, 255, 255, 80%);
  } */
}

.header01Menu-logo img {
  width: 6rem;
  height: 6rem;
}

.header01Menu-toTop {
  flex-direction: column;
  font-size: 1.4rem;
  color: #193B50;
  margin-left: 0.6rem;

  animation-name: blinking;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

@keyframes blinking {
  0% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.header01Menu-toTop span {
  height: 1.6rem;
}

@media (max-width: 767.9px) {
  .header01Menu-nav ul {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .header01Menu-nav ul {
    column-gap: 1rem;
  }

  .header01Menu-nav a {
    display: block;
    font-size: 1.6rem;
    width: 10rem;
    height: 6rem;
    background-color: #9BCFC4;
    padding-top: 2rem;
    text-align: center;
  }

  .header01Menu-nav a:hover {
    background-color: #DD5959;
  }
}

/*下層ページ works_index  作品ページ メイン
------------------------------------------ */
.main01 {
  background-color: #fff;
}

.main01 p {
  margin-bottom: 2rem;
}

/* デザイン */
.design-P01 img {
  box-shadow: 0.1rem 0.1rem 1rem 0.5rem rgba(0, 0, 0, 10%);
}

.design-frame-P01 {
  margin-bottom: 10rem;
}

.design-P01 .design-frame-P01:last-child {
  margin-bottom: 0rem;
}

.design-list {
  flex-direction: column;
  row-gap: 6rem;
}

.design-card-img,
.design-poster-img {
  max-width: 45rem;
  column-gap: 4rem;

  @media (max-width: 767px) {
    margin: 0 auto;
    max-width: 70rem;
    width: 90%;
    flex-direction: column;
    row-gap: 4rem;
  }
}

.design-list-others{
  flex-wrap: wrap;
  flex-direction: row;
  column-gap:5rem ;
}

.design-others{
  width:45%;

  @media (max-width: 767px) {
  width:100%;

  }
}

.design-others-img {
  max-width: 30rem;
  column-gap: 4rem;

  @media (max-width: 767px) {
    margin: 0 auto;
    max-width: 70rem;
    width: 90%;
    flex-direction: column;
    row-gap: 4rem;
  }
}

@media (max-width: 767.9px) {

  .design-card-05 img,
  .design-card-06 img {
    margin: 0 auto;
    width: 70%;
  }
}

/* イラスト */
.illustration-title {
  letter-spacing: 4.2px;
}

.portrait-list {
  column-gap: 2rem;

  @media (max-width: 767.9px) {
    flex-direction: column;
    row-gap: 6rem;
  }
}

.portrait-list li {
  text-align: center;
}

.pf-po img {
  width: 100%;

  @media (max-width: 767.9px) {
    text-align: center;
    width: 70%;
  }
}

/*下層ページ price_index プライスページ メイン
------------------------------------------ */
.main02 {
  background-color: #fff;
}

.price-frame-P02,
.process-frame-P02 {
  padding: 8rem 3rem;
  border: .2rem solid #9BCFC4;
  border-radius: 1rem;
  margin-bottom: 10rem;

  @media (max-width: 767px) {
    padding: 8rem 2rem;
  }
}

.price-P02 .price-frame-P02:last-child {
  margin-bottom: 0rem;
}

/* .price-title {
  padding-left: 2rem;
  border-left: 0.5rem solid #DD5959;
} */

.price-scroll {
  font-size: 1.4rem;
}

.price-frame-P02 a {
  color: #DD5959;
  border-bottom: .1rem solid #DD5959;
}

/* テーブル内フォントサイズ */
.price-P02 table th {
  font-size: 2rem;

  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}

/* テーブル枠組 */
.table-box {
  overflow-x: auto;
  display: block;
}

.table-box table th,
.table-box table td {
  white-space: nowrap;
}

.price-P02 table {
  border-collapse: collapse;
  width: 100%;
}

.price-P02 table tr {
  height: 10rem;
  border-bottom: 0.1rem solid #9BCFC4;
}

.price-P02 table th,
.price-P02 table td {
  padding: 1rem;
}

.price-table {
  margin: 0 0 3rem;
}

.price-table td {
  text-align: center;
}

.th-title,
.price-table-01 td:nth-child(4),
.price-table-01 td:nth-child(5),
.price-table-02 td:nth-child(3),
.price-table-02 td:nth-child(4),
.price-table-03 td:nth-child(3) {
  text-align: start;
}

/* process プロセス 納品までの流れ
------------------------------------------ */

.process-P02 {
  background-color: #fff;
}

.process-P02 p {
  font-size: 1.6rem;
}

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

.process-contents dt {
  color: #fff;
  background-color: #429787;
  max-width: 30rem;
  width: 33.3%;
  font-weight: bold;
  line-height: calc(30/24);
  align-items: center;
  margin-right: 1rem;

  @media (max-width: 767.9px) {
    max-width: 767.9rem;
    width: 100%;
    margin-right: 0rem;
  }
}

.process-contents dt:first-child {
  padding-top: 0.8rem;
  border-radius: 3rem;
  background-color: #DD5959;

  @media (max-width: 767.9px) {
    width: 100%;
  }
}

.process-contents dt:not(:first-of-type) {
  height: 12rem;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  padding-left: 2rem;
  border-radius: 1rem;

  @media (max-width: 767.9px) {
    max-width: 767.9rem;
    width: 100%;
    height: 8rem;
    font-size: 2rem;
    margin-bottom: .5rem;
    margin-right: 0rem;
  }
}

.process-title-num {
  display: block;
  width: 9.3rem;
  font-size: 6rem;
  margin-right: 1rem;

  @media (max-width: 767.9px) {
    width: 6rem;
    font-size: 4rem;
  }
}

.process-contents dt:first-child,
.process-contents dd {
  font-size: 1.6rem;
}

.process-contents dt:first-of-type,
.process-contents dd:first-of-type {
  margin-bottom: 1rem;
  height: 4rem;
  text-align: center;

  @media (max-width: 767.9px) {
    margin-bottom: 2rem;
  }
}

.process-contents dd {
  width: 65%;
  line-height: calc(24/16);
  column-gap: 1rem;
  align-items: center;

  @media (max-width: 767.9px) {
    width: 100%;
  }
}

.process-contents dd:not(:first-of-type) {
  background-color: #C5EEE6;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.process-contents dd:first-of-type span {
  background-color: #F0CDC5;

  @media (min-width: 768px) {
    padding: .6rem 5.5%;
  }
}

.process-contents dd span {
  width: calc(50% - .5rem);
  padding: .4rem 5.5%;
  background-color: #fff;

  @media (max-width: 767.9px) {
    padding: 1rem 0.9rem;
  }
}

.process-frame-00 span {
  display: inline-block;
  height: 4rem;
  padding: 0.6rem 0;
  border-radius: 3rem;

  @media (max-width: 767.9px) {
    height: 6rem;
  }
}

@media (max-width: 767.9px) {
  .process-frame-00 span:first-child {
    padding: 1.6rem 0;
  }
}

@media (max-width: 767.9px) {
  .process-frame-00 span:nth-child(2) {
    padding: .4rem 0;
  }
}

.process-frame-all {
  padding: 1rem 1.2rem;

  @media (max-width: 767.9px) {
    padding: 1rem;
  }
}

.process-frame-all span {
  width: 28rem;
  border-radius: 5rem;

  @media (max-width: 767px) {
    border-radius: 1rem;
  }
}

@media (min-width: 768px) {
  .process-frame-01 span:nth-of-type(2) {
    height: 8rem;
  }
}

@media (min-width: 768px) {
  .process-frame-02 span:nth-of-type(1) {
    height: 8rem;
  }
}

.process-frame-03 span:nth-of-type(1) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-top: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 4rem;
  }
}

.process-frame-03 span:nth-of-type(2) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-bottom: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-bottom: 4rem;
  }
}

.process-frame-04 span:nth-of-type(1) {
  @media (min-width: 768px) {
    height: 8rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 0rem;
    margin-bottom: 2rem;
  }
}

.process-frame-04 span:nth-of-type(2) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-top: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 4rem;
    margin-bottom: 0rem;
  }
}

.process-frame-05 span:nth-of-type(1) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-bottom: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-bottom: 4rem;
  }
}

.process-frame-05 span:nth-of-type(2) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-top: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 4rem;
  }
}

@media (min-width: 768px) {
  .process-frame-06 span:nth-of-type(1) {
    height: 8rem;
  }
}

.process-frame-07 span:nth-of-type(1) {
  @media (min-width: 768px) {
    height: 8rem;
    margin-top: 2rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 4rem;
    margin-bottom: 0rem;
  }
}

.process-frame-07 span:nth-of-type(2) {
  @media (min-width: 768px) {
    height: 6rem;
    margin-bottom: 4rem;
  }

  @media (max-width: 767.9px) {
    margin-top: 0rem;
    margin-bottom: 4rem;
  }
}

.process-frame-P02 dl .process-text-01,
.process-frame-P02 dl .process-text-02,
.process-frame-P02 dl .process-text-03 {
  width: 100%;
  background-color: #fff;
}