@charset "UTF-8";

/* トップページの各セクション（制作について・最新情報・資料ダウンロード・FAQ・お問い合わせ案内は、ほかのページでも使う）
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* カルーセル
------------------------------*/
.swiper {
  margin: 49px 40px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 左右に余白を追加 */
    margin: 0px 0px;
  }
}

.swiper-slide img {
  width: 100% !important;
  height: 782px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 433px;
  }
}

.swiper-pagination-bullet {
  background: var(--color-white);
}

.swiper-pagination-bullet-active {
  background: var(--color-bg-gray);
}

/* 概要
------------------------------*/
.overview {
  text-align: center;
  margin: 100px 8%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: var(--sp-gutter);
    margin-right: var(--sp-gutter);
  }
}

.overview h1 {
  margin-bottom: 10px;
  color: var(--color-pink);
}

.overview p {
  margin-top: 10px;
}

/* 制作事例
------------------------------*/
.creation-case {
  text-align: center;
  padding: 100px 5%;

  /* スマホサイズ以下：背景は端まで残し、内側の余白でそろえる */
  @media (max-width: 767px) {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }
}

.horizontal-container {
  /* 横並びにする */
  display: flex;
  /* 縦方向の中央揃え */
  align-items: center;
  /* 要素間の隙間 */
  gap: 3%;
  /* 横方向の中央揃え */
  justify-content: center;
}

.horizontal-container h1 {
  color: var(--color-blue);
}

/* 斜め線 */
.fukidashi {
  width: 19px;
  height: 22px;
}

/* 斜め線 */
.fukidashi hr {
  width: 25px;
  border: 0;
  border-top: 3px solid var(--color-blue);
  border-radius: 2px;
  margin: 0;
  padding: 0;
}

/* 斜め線　左 */
.f-left {
  transform: rotate(60deg);
  transform-origin: 0% 0%;
}

/* 斜め線　右 */
.f-right {
  transform: rotate(120deg);
  transform-origin: 50% 27%;
}

@media (max-width: 844px) {
  .horizontal-container {
    /* 要素間の隙間 */
    gap: 10%;
  }

  /* 斜め線 */
  .fukidashi hr {
    width: 50px;
    border-top: 2px solid var(--color-blue);
  }

  /* 斜め線　右 */
  .f-right {
    transform-origin: 50% 32%;
  }

  /* ダウンロード */
  .download .horizontal-container {
    /* 要素間の隙間 */
    gap: 5%;
  }

  /* ダウンロード　斜め線 */
  .download .fukidashi hr {
    width: 20px;
  }

  /* 斜め線の高さ（資料ダウンロード以外にも効いている） */
  .fukidashi {
    height: 18px;
  }

  /* ダウンロード 斜め線　右 */
  .download .f-right {
    transform-origin: 50% 38%;
  }
}

.creation-case-contents {
  display: flex;
  margin: 50px auto 50px auto;
  justify-content: space-between;
  max-width: 1500px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 縦並びにする */
    flex-direction: column;
    margin: 0;
  }
}

.creation-case-item {
  margin: 0px 10px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 縦幅を空ける */
    margin-top: 15%;
  }
}

.creation-case-contents p {
  /* 折り返しが綺麗になるように調整 */
  font-size: 15px;
}

.creation-case-contents img {
  width: 100%;
  /* 角を丸くする */
  border-radius: 6px;
  margin-bottom: 20px;
}

/* 制作事例をもっと見る */
.creation-case .btn {
  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* ボタンの上に余白 */
    margin-top: 20%;
  }
}

/* 制作について
-------------------------------*/
.about-creation {
  text-align: center;
  margin: 100px 0px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding: 0 var(--sp-gutter);
  }
}

.about-creation .btn {
  margin-top: 30px;
}

/* 最新情報
---------------------------------- */
.news {
  /* 中央二配置 */
  margin: auto;
  /* 余白 */
  padding: 70px 0;
  /* 横方向の中央揃え */
  /* text-align: center; */
  /* 最大幅を設定（必要に応じて調整） */
  max-width: 1500px;

  @media (max-width: 1600px) {
    padding: 70px 5%;
  }

  /* スマホサイズ以下：背景は端まで残し、内側の余白でそろえる */
  @media (max-width: 767px) {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }
}

.news-icon {
  height: 119px;
  opacity: 0.2;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 79px;
  }
}

.news h2 {
  /* お好みの値に調整 */
  letter-spacing: 8px;
  margin-top: -20px;
  margin-bottom: 35px;
}

.tab-item-container {
  /* フレックスボックスのレイアウトに変更 */
  display: flex;
  gap: 10px;
}

/* タブ
※トップ画面（最新情報）、制作事例、ブログで使用　*/
.tab-item,
.tab-item-sub {
  /* 縦横中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 横並びにする */
  float: left;
  /* 共通 */
  padding: 10px;
  border-radius: 3px;
  /* マウスオーバー時の動き */
  transition: all 0.2s ease;
}

.tab-item {
  width: calc(50% - 10px);
}

/* 制作事例とブログのボタンの間に間隔をあける */
.home .tab-item.btn-pink-pink {
  margin-right: 20px;
}

.tab-item:last-child {
  /* 最後のアイテムには右のマージンを無効化 */
  margin-right: 0;
}

/* 選択時のスタイル 制作事例*/
#tab-creation-case:checked + .btn-pink-pink {
  color: var(--color-white);
  background: var(--color-pink);
}

/* 選択時のスタイル ブログ*/
#tab-blog:checked + .btn-blue-blue {
  color: var(--color-white);
  background: var(--color-blue);
}

/*ラジオボタンを全て消す*/
input[name='tab-item'] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab-content {
  clear: both;
  overflow: hidden;
}

/* トップページのみ　タブ切り替え時に中身も切り替えるための初期化 */
.news .tab-content {
  /* 初期状態で非表示 */
  display: none;
}

/* まだ制作事例がありません/まだ投稿がありません */
.no-post-message {
  margin: 50px 0 20px 0;
}

/*選択されているタブのコンテンツのみを表示*/
#tab-creation-case:checked ~ #tab-creation-case-content,
#tab-blog:checked ~ #tab-blog-content {
  display: block;
}

/* ------------------------------ */
.news-tab {
  display: flex;
  /* 中央に配置 */
  margin: auto;
  max-width: 1500px;
}

.news-tab .btn {
  width: 50%;
  padding: 10px 0px;
  margin: 0px 10px;
}

/* 最新情報（制作事例） */
.news-list {
  display: flex;
  /* アイテムが折り返されるように設定 */
  flex-wrap: wrap;
  /* 左詰め */
  justify-content: flex-start;
  margin: 50px auto;
  max-width: 1500px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* 縦並びにする */
    flex-direction: column;
    margin: 0;
  }
}

/* 記事のループ処理　リスト */
.news-list li {
  list-style: none;
}

.news-item {
  display: flex;
  /* カテゴリを縦方向に配置 */
  flex-direction: column;
  margin: 20px 10px;
  /* PCで3つ表示するための設定 */
  flex-basis: calc(33.33% - 20px);
  /* 親要素の最大幅を指定 */
  max-width: calc(33.33% - 20px);

  /* スマホサイズ以下は1つ表示 */
  @media (max-width: 767px) {
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}

/* カテゴリ */
.news-item span {
  color: var(--color-text-light);
  font-size: 16px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 11px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-small);
  }
}

/*　制作事例タブ内の要素
　　マウスオーバー時 */
#tab-creation-case-content .news-item-a:hover {
  .news-item-info {
    color: var(--color-pink);
  }
}

/*　ブログタブ内の要素
　　マウスオーバー時 */
#tab-blog-content .news-item-a:hover {
  .news-item-info {
    color: var(--color-blue);
  }
}

/* サムネイル　枠 */
.news-item-a figure {
  border-radius: 6px;
}

/* サムネイル */
.news-item-thumbnail {
  width: 100%;
  border-radius: 6px;
  /* アスペクト比を1:1で固定 */
  aspect-ratio: 1/1;
}

/*----------------------------------------------
  画像ホバー時のズーム Utility
----------------------------------------------*/
/* ズーム対象の画像 */
.u-zoom-img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  display: block;
}

/* ズーム対象の親要素 */
.u-zoom:hover .u-zoom-img {
  transform: scale(1.1);
}

/* はみ出し防止（マスク） */
.u-zoom-box {
  overflow: hidden;
}

/* 最新情報 */
.news-item-info {
  display: flex;
  /* タイトルと日付を両端に配置 */
  justify-content: space-between;
  /* 画像の大きさと同じにする */
  width: 100%;
  word-break: break-word;
}

/* タイトル */
.creation-case-title {
  margin-right: 10%;
  text-align: left;
  /* いい感じの箇所で改行 */
  word-break: auto-phrase;
  /* タイトルがはみ出ないように */
  width: 65%;
}

/* カテゴリ */
.news-item-category {
  /* 左端に配置 */
  margin-right: auto;
  /* 間隔 */
  margin-top: 5px;
  font-size: 18px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 13px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-body);
  }
}

/* 制作事例タブ内のカテゴリ
　　マウスオーバー時 */
#tab-creation-case-content .news-item-category:hover {
  color: var(--color-pink);
}

/* ブログタブ内のカテゴリ
　　マウスオーバー時 */
#tab-blog-content .news-item-category:hover {
  color: var(--color-blue);
}

/* 制作事例をもっと見る */
.see-more {
  height: 62px;
  width: 386px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 35px auto 0 auto;
  }

  @media (max-width: 438px) {
    height: 40px;
    width: 184px;
  }
}

/* 資料ダウンロード
-------------------------------- */
.download {
  text-align: center;
  padding: 100px 10%;

  /* スマホサイズ以下：背景は端まで残し、内側の余白でそろえる */
  @media (max-width: 767px) {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }
}

/* トップ画面で使用時　ピンク */
.home .download {
  background-image: url(../img/dot_pink.jpg);
  background-repeat: repeat;
}

.home .download h1 {
  color: var(--color-pink);
}

/* ダウンロード　斜め線 */
.home .download .fukidashi hr {
  border-top: 3px solid var(--color-pink);
}

/* トップ画面以外の画面で使用時　ブルー */
.page-template .download h1 {
  color: var(--color-blue);
}

/* ダウンロード　斜め線 */
.page-template .download .fukidashi hr {
  border-top: 3px solid var(--color-blue);
}

.download-container {
  position: relative;
  display: flex;
}

.download-box {
  position: relative;
  width: 680px;
  margin: 0 auto;
  padding: 30px 0px;
  /* Tap hereのアイコンを表示させる */
  display: flex;
}

.download p {
  font-size: 22px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 13px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-body);
  }
}

.image-box {
  /* ボックス画像の幅を全体に */
  width: 100%;
  /* アスペクト比を保つ */
  height: auto;
  display: block;
  /* 角を丸くする */
  border-radius: 6px;
}

/* Tap here の画像 */
.image-tap {
  width: 160px;
  height: 44px;
  background-image: url(../img/tap_here.png);
  background-size: cover;
  background-repeat: no-repeat;
  /* 背景画像と重ねる */
  position: absolute;
  bottom: 20%;
  right: -55px;
  /* 画像を少し傾ける */
  transform: rotate(-15deg);

  /* スマホサイズ以下：画面の端で切れないよう内側へ */
  @media (max-width: 767px) {
    right: -4px;
  }

  @media (max-width: 600px) {
    bottom: 15%;
    /* 画像のサイズは適宜調整 */
    width: 105px;
    height: 40px;
  }
}

/* Tap here の画像 マウスオーバー時 */
.download-box:hover .image-tap {
  background-image: url(../img/tap_here02.png);
  /* マウスオーバー時の動き */
  transition: all 0.2s ease;
}

/* FAQ
----------------------------------- */
.faq {
  /* 横並び指定 */
  display: flex;
  margin: 10% 5%;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 縦並び */
    flex-direction: column;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: var(--sp-gutter);
    margin-right: var(--sp-gutter);
  }
}

.faq-left {
  /*--幅を指定--*/
  flex-grow: 1;
  position: relative;
  /*--2要素の余白--*/
  margin-right: 2em;
  text-align: center;
  padding: 6% 3%;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-right: 0;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* スマホサイズ以下は非表示 */
@media (max-width: 960px) {
  .faq-left::after {
    display: none;
  }
}

/* FAQ横線 */
.faq-border-horizontal {
  /* スマホサイズ以外は非表示 */
  @media (min-width: 961px) {
    display: none;
  }
}

/* FAQ横線 */
.faq-border-vertical {
  /* スマホサイズ以外は非表示 */
  @media (max-width: 960px) {
    display: none;
  }
}

.faq-right {
  /* 幅を指定 */
  flex-grow: 1;
  padding: 4% 8%;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    padding: 10% 3%;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 質問リスト */
.faq-list {
  /* スマホサイズ以下：かたまりごと中央に置く（行頭のアイコンはそろえたまま） */
  @media (max-width: 767px) {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}

.faq-left img {
  height: 107px;
  opacity: 0.2;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 60px;
  }
}

.faq-right ul li {
  /* デフォルトの黒丸をなくす */
  list-style-type: none;
  /* relativeにして、アイコンの位置をabsoluteで調整 */
  position: relative;
  /* アイコンのスペースを確保 */
  padding-left: 35px;
  padding-bottom: 2%;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 15px;
  }
}

.faq-right ul li::before {
  /* SVGアイコン */
  content: url(../img/flower.svg);
  position: absolute;
  /* アイコンの水平方向の位置を調整 */
  left: 0;
  /* アイコンを縦方向の中央に配置 */
  top: 30%;
  /* 縦の中央揃えのために移動 */
  transform: translateY(-50%);
  /* アイコンの大きさ */
  width: 19px;
  height: 19px;
  background-size: contain;
  /* 縦方向の位置を細かく調整する場合に使用 */
  vertical-align: middle;
  padding-bottom: 5px;
}

.faq-list a:hover {
  color: var(--color-pink);
}

.faq-right .btn {
  height: 58px;
  width: 215px;
  margin-top: 40px;

  @media (max-width: 438px) {
    height: 40px;
    width: 184px;
  }
}

.faq-button {
  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    text-align: center;
  }
}

/* お問い合わせ
------------------------------------------------ */
.contact {
  padding: 80px 7%;

  /* スマホサイズ以下：背景は端まで残し、内側の余白でそろえる */
  @media (max-width: 767px) {
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
  }

  @media (max-width: 438px) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.contact .btn {
  height: 78px;
  width: 260px;
  margin-top: 30px;
  font-size: 25px;

  @media (max-width: 438px) {
    height: 40px;
    width: 184px;
    font-size: 18px;
  }
}

/* 大枠ボックス */
.contact-layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5%;

  /* スマホサイズ以下：左右のイラスト枠を消しているので、残った文章とボタンを中央に置く */
  @media (max-width: 767px) {
    justify-content: center;
  }
}

.contact-layer-in > img {
  width: auto;
}

.contact-img {
  flex: 1;
  text-align: center;

  /* スマホサイズ以下：左右のイラスト枠（今は空）が幅をとるので消す */
  @media (max-width: 767px) {
    display: none;
  }
}