/**
 * 会社案内（カンパニー）ページ専用スタイル
 *
 * company.scss から生成（手動コンパイル）。実際に読み込まれるのは本ファイル。
 * archive.php / page-album.php と同じ黄色背景＋スターアイコン付き中央ヘッダーを踏襲し、
 * 本文(the_content())を白い本文ボックス内に表示する。
 */

.p-company {
  background: #F9CA4A;
  padding-top: 180rem;
  padding-bottom: 200rem;
}

.p-company .--inner {
  max-width: 920rem;
  margin: 0 auto;
  padding: 0 40rem;
  box-sizing: border-box;
}

.p-company .--header-company {
  text-align: center;
  padding-bottom: 60rem;
}

.p-company .--header-company .--icon-star {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 300rem;
}

.p-company .--header-company .--icon-star img {
  position: absolute;
  left: -100rem;
  top: -40rem;
}

.p-company .--header-company .--ttl-company {
  font-size: 48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-company .--company-box {
  background: #fff;
  border-radius: 16rem;
  padding: 60rem;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.08);
}

.p-company .--company-box .--thumbnail {
  margin-bottom: 40rem;
}

.p-company .--company-box .--thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 8rem;
}

.p-company .--company-box .--content {
  font-size: 16rem;
  line-height: 1.8;
  color: #333;
}

.p-company .--company-box .--content p {
  margin-bottom: 24rem;
}

.p-company .--company-box .--content h2 {
  font-size: 24rem;
  font-weight: bold;
  margin: 48rem 0 24rem;
  padding-bottom: 12rem;
  border-bottom: 2px solid #F9CA4A;
}

.p-company .--company-box .--content h3 {
  font-size: 20rem;
  font-weight: bold;
  margin: 32rem 0 16rem;
}

.p-company .--company-box .--content ul,
.p-company .--company-box .--content ol {
  margin: 24rem 0;
  padding-left: 24rem;
}

.p-company .--company-box .--content ul li,
.p-company .--company-box .--content ol li {
  list-style-type: disc;
  margin-bottom: 8rem;
}

.p-company .--company-box .--content ol li {
  list-style-type: decimal;
}

.p-company .--company-box .--content blockquote {
  margin: 32rem 0;
  padding: 24rem;
  background: #f5f5f5;
  border-left: 4px solid #F9CA4A;
  font-style: italic;
}

.p-company .--company-box .--content img {
  max-width: 100%;
  height: auto;
  border-radius: 8rem;
  margin: 24rem 0;
}

.p-company .--company-box .--content > *:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 1420px) {
  .p-company {
    padding-top: 140rem;
    padding-bottom: 140rem;
  }

  .p-company .--company-box {
    padding: 48rem;
  }

  .p-company .--company-box .--content h2 {
    font-size: 22rem;
    margin: 40rem 0 20rem;
  }

  .p-company .--company-box .--content h3 {
    font-size: 18rem;
    margin: 28rem 0 14rem;
  }
}

@media screen and (max-width: 750px) {
  .p-company {
    padding-top: 80rem;
    padding-bottom: 120rem;
  }

  .p-company .--inner {
    padding: 0 20rem;
  }

  .p-company .--header-company {
    padding-bottom: 40rem;
  }

  .p-company .--header-company .--icon-star {
    width: 250rem;
  }

  .p-company .--header-company .--icon-star img {
    left: -80rem;
    top: -30rem;
    width: 50rem;
  }

  .p-company .--header-company .--ttl-company {
    font-size: 64rem;
  }

  .p-company .--company-box {
    padding: 32rem;
    border-radius: 12rem;
  }

  .p-company .--company-box .--thumbnail {
    margin-bottom: 32rem;
  }

  .p-company .--company-box .--content {
    font-size: 26rem;
    line-height: 1.7;
  }

  .p-company .--company-box .--content p {
    margin-bottom: 32rem;
  }

  .p-company .--company-box .--content h2 {
    font-size: 32rem;
    margin: 40rem 0 20rem;
  }

  .p-company .--company-box .--content h3 {
    font-size: 28rem;
    margin: 32rem 0 16rem;
  }
}