@charset "utf-8";

/*=====ヘッダー*/
header {
  position: relative;
  height: 60px;
}

/* 制作実績ページ */
/* 最初の説明文 */
.text_content {
  line-height: 1.8;
  text-align: center;
  padding-bottom: 20px;
}

#dangoya,
#dangoya_re,
#tsubasa,
#minaty,
#wcbnaturallife,
#tsubasa_wp {
  scroll-margin-top: 80px;
}

/* 制作実績（文+写真） */
.grid_works1 {
  display: grid;
  grid-template-columns: 438px 434px;
  justify-content: space-between;
  width: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  align-items: start; /* 基本は上揃え */
}

/* 制作実績左側 */
.wrap_txt_works {
}

/* セクション見出し */
/* タイトル */
.ttl_works1 {
  color: #2f5d50;
  line-height: 1.8;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* タイトル1行目 */
.ttl_works_main {
  display: inline;
  font-size: 2.8rem;
  font-weight: 700;
  font-family: "Manrope", sans-serif;
  padding: 0 20px;
  background: linear-gradient(transparent 70%, #f4f1c9 70%);
}

/* タイトル2行目 */
.ttl_works_sub {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #2f5d50;
}

/* タイトルここまで */

.text_works1 {
  line-height: 1.8;
}

/* 制作実績右側（写真・サイトにとぶ） */
.img-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  align-self: center;
  align-self: center; /* 写真だけ中央 */
}

/* 画像 */
.img-link img {
  width: 100%;
  height: 100%;
  display: block;
}

/* オーバーレイ文字 */
.img-link-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(47, 93, 80, 0.7); /* 好きな色でOK */
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* hover時 */
.img-link:hover .img-link-text {
  opacity: 1;
  transform: scale(1);
}

/* ブログ個別ページ */

.blog_wrapper {
  padding: 0 100px;
}

.ttl_blog1 {
  font-size: 3.2rem;
  font-weight: 600;
  color: #2f5d50;
  line-height: 1.4;
  padding-bottom: 10px;
}

.date_blog1 {
  font-size: 1.8rem;
  color: #2f5d50;
  line-height: 1.4;
  padding-bottom: 10px;
}

.content_blog1 {
  line-height: 1.6;
  padding: 20px 0 60px;
}

/* ブログ内文章 */

.content_blog1 a {
  text-decoration: none;
  font-weight: 500;
}

.content_blog1 h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 40px 0 20px;
  /* ボーダー */
  display: inline-block;
  background: linear-gradient(transparent 70%, #f4f1c9 70%);
}

.content_blog1 h3 {
  font-size: 1.8rem;
  color: #2f5d50;
  font-weight: 600;
  margin: 16px 0 8px;
}

.content_blog1 li {
  list-style: inside;
}

/* ブログ内文章ここまで */

.img_blog1 {
  display: block;
  margin: 0 auto;
  padding: 30px;
}

/* お問い合わせ */
/* お問い合わせ画面 */
.table_form {
  width: 720px;
  margin: 0 auto;
}

.table_form th {
  width: 180px;
  white-space: nowrap;
  font-weight: 500;
  padding: 18px 19px;
  text-align: left;
  vertical-align: middle;
}

.table_form td {
  font-weight: 500;
  padding: 18px 19px;
  width: 100%;
  padding: 12px 0 12px 20px;
}

.text_form {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
  font-size: 1.6rem;
  box-sizing: border-box;
  padding: 3px 5px;
}

.area_form {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
  font-size: 1.6rem;
  box-sizing: border-box;
  padding: 3px 5px;
  min-height: 170px;
}

label {
  display: inline-block; /* 背景色をつけるために */
  padding: 6px 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

label:hover {
  background-color: #ebebeb;
}

/* メールフォームボタン */
.btn_form_submit {
  display: block;
  width: 270px;
  border-radius: 30px; /* ← 角を丸くする */
  background-color: #2f5d50;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 17px 63px;
  margin: 36px auto 0;
}

.btn_form_submit:hover {
  background-color: rgba(36, 75, 65, 1);
  color: #f4f1c9;
}

/* メールフォームここまで */

/* Thanks画面 */

/* ブレークポイント＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 768px) {
  /*ここにcssを書く*/
  /*イメージ設定*/
  img {
    max-width: 100%;
    height: auto;
  }
  /*=====ヘッダー*/
  header {
    position: relative;
  }

  /* 制作実績ページ */

  .text_content {
    line-height: 1.8;
    text-align: center;
  }

  .grid_works1 {
    display: block;
    width: 100%;
  }

  .wrap_txt_works {
    padding-top: 20px;
  }

  /* セクション見出し */
  /* タイトル */
  .ttl_works1 {
    color: #2f5d50;
    line-height: 1.8;
    text-align: center;
    padding-top: 0;
    padding-bottom: 20px;
  }

  /* タイトル1行目 */
  .ttl_works_main {
    display: inline;
    font-size: 2.4rem;
    font-weight: 700;
    font-family: "Manrope", sans-serif;
    padding: 0 20px;
    background: linear-gradient(transparent 70%, #f4f1c9 70%);
  }

  /* タイトル2行目 */
  .ttl_works_sub {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    color: #2f5d50;
  }

  /* タイトルここまで */

  .text_works1 {
    line-height: 1.8;
    padding-bottom: 20px;
  }

  /* 制作実績（写真・サイトにとぶ） */
  .img-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
  }

  /* 画像 */
  .img-link img {
    width: 100%;
    display: block;
  }

  /* オーバーレイ文字 */
  .img-link-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(47, 93, 80, 0.7); /* 好きな色でOK */
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* hover時 */
  .img-link:hover .img-link-text {
    opacity: 1;
    transform: scale(1);
  }

  /* ブログ個別ページ */

  .blog_wrapper {
    padding: 0;
  }

  .ttl_blog1 {
    font-size: 3.2rem;
    font-weight: 600;
    color: #2f5d50;
    line-height: 1.4;
    padding-bottom: 10px;
  }

  .date_blog1 {
    font-size: 1.8rem;
    color: #2f5d50;
    line-height: 1.4;
    padding-bottom: 10px;
  }

  .content_blog1 {
    line-height: 1.6;
    padding: 20px 0 60px;
  }

  .img_blog1 {
    display: block;
    margin: 0 auto;
    padding: 30px;
  }

  /* お問い合わせ */
  /* お問い合わせ画面 */
  .table_form,
  .table_form tr,
  .table_form th,
  .table_form td {
    display: block;
    width: 100%;
  }

  .table_form {
    width: 100%;
    margin: 0 auto;
  }

  .table_form th {
    width: 100%;
    white-space: nowrap;
    font-weight: 500;
    padding: 18px 19px;
    text-align: left;
    vertical-align: middle;
  }

  .table_form td {
    font-weight: 500;
    padding: 18px 19px;
    width: 100%;
    padding: 12px 20px 12px 20px;
  }

  .text_form {
    width: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 1.6rem;
    box-sizing: border-box;
    padding: 3px 5px;
  }

  .area_form {
    width: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
    font-size: 1.6rem;
    box-sizing: border-box;
    padding: 3px 5px;
    min-height: 170px;
  }

  label {
    display: inline-block; /* 背景色をつけるために */
    padding: 6px 6px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  label:hover {
    background-color: #ebebeb;
  }

  /* メールフォームボタン */
  .btn_form_submit {
    display: block;
    width: 270px;
    border-radius: 30px; /* ← 角を丸くする */
    background-color: #2f5d50;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 17px 63px;
    margin: 36px auto 0;
  }

  /* メールフォームここまで */

  /* Thanks画面 */
}

@media (hover: none) {
  .img-link-text {
    display: none;
  }
}