/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

@import url('./css/contact.css');

/**---- 問い合わせボタン----*/
.contact-btn {
  font-family:Noto Sans JP;
	writing-mode: vertical-rl;
  padding: 20px 10px;
  border: 1px solid #2bb3a3;
  color: #2bb3a3;
  background: #fff;
  font-size: 25px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.contact-btn:hover {
  background: #2bb3a3;
  color: #fff;
}

@media (max-width: 768px) {
  .contact-btn {
    right: 10px;
    padding: 15px 8px;
    font-size: 14px;
  }
}

.ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: none;
}


/* ==========================================================================
   スクロールして指定位置に達した時のスタイル（パソコン版）
   ========================================================================== */
.contact-btn.is-fixed {
  position: fixed !important; /* 強制的に固定配置にする */
  top: 150px;                 /* 画面の上から150px */
    right: 34px;              /* 右端から0px */
  z-index: 9999;              /* 最前面に表示 */
}

/* ==========================================================================
   スクロールして指定位置に達した時のスタイル（スマートフォン版）
   ========================================================================== */
@media screen and (max-width: 767px) {
  .contact-btn.is-fixed {
    top: 100px;               /* スマホは画面の上から100px */
    right: 5px;              /* 右端から5px */	  
  }
}


/**---- 問い合わせボタン----*/

.premium-blog-post-tags-container li{
  display: inline-block;
  background: #f1f1f1;
  color: #555;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  margin-top: 10px;
}


/**---- タグ一覧----*/
.entry-meta {
  display: none !important;
}


/**---- ナビ部分----*/

.ast-page-builder-template.single .post-navigation {
    padding: 2em;
}
/**---- ナビ部分----*/






/**---- 
 投稿用分岐
----*/


/* 最初は全部隠す */
.my-template-a, .my-template-b, .my-template-c {
  display: none !important;
}

/* bodyに特定のクラスがある時だけ、対応するテンプレートを表示する */
.active-layout_a .my-template-a { display: block !important; }
.active-layout_b .my-template-b { display: block !important; }
.active-layout_c .my-template-c { display: block !important; }




/**---- 
 投稿用分岐
----*/


/**---- 
 works
----*/

/* ===== works detail 共通 ===== */
.works-detail {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* メイン画像（ACF: top-img / m_top-img）を100%表示 */
.works-detail .main-top-img {
  margin-bottom: 35px;
}

/* pictureタグとimgタグが綺麗に100%幅になるよう調整 */
.works-detail .main-top-img picture,
.works-detail .main-top-img img {
  width: 100%;
  height: auto;
  display: block;
}

.works-detail .title {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* タグのレイアウト（チップ型） */
.works-detail .tag {
  margin-bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.works-detail .tag span {
  display: inline-block;
  background-color: #eeeeee;
  color: #333;
  padding: 6px 20px;
  border-radius: 50px;
  font-size: 14px;
  line-height: 1.2;
}

/* ===== URL部分のスタイル（修正版） ===== */
.works-detail .url {
  margin-bottom: 20px;
}

.works-detail .url a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  /* 文字幅（行間）16.8pt ÷ フォントサイズ14px ＝ 1.2 */
  line-height: 1.2;
  color: #00a491;
  text-decoration: underline;
  word-break: break-all; /* 長いURLの折り返し対策 */
}

.works-detail .url a:hover {
  opacity: 0.7;
}

.works-detail .desc {
  margin-bottom: 30px;
  line-height: 1.8;
}

/* ===== ギャラリー共通設定 ===== */
.gallery {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.gallery .item {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* ===== レイアウトA ===== */
.layout-a .gallery {
  grid-template-columns: 1fr 1fr 0.7fr;
  grid-template-rows: 200px 200px;
}
.layout-a .item:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-a .item:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-a .item:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
.layout-a .item:nth-child(4) { grid-column: 1; grid-row: 2; }
.layout-a .item:nth-child(5) { grid-column: 2; grid-row: 2; }

/* ===== レイアウトB（35% / 35% / 25%） ===== */
.layout-b .gallery {
  grid-template-columns: 1fr 1fr 0.7fr;
  grid-auto-rows: 200px;
  justify-content: space-between;
}

/* ===== レイアウトC（2カラム） ===== */
.layout-c .gallery {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 250px;
}

/* ホバー効果 */
.gallery .item:hover img {
  transform: scale(1.05);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .works-detail {
    padding: 20px 15px;
  }
  .works-detail .main-top-img {
    margin-left: -15px;
    margin-right: -15px;
  }
  .gallery {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 15px;
  }
  .layout-a .item,
  .layout-b .item,
  .layout-c .item {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 200px;
  }
}

/**-------------------- 
 worksここまで
------------------------*/


/**-------------------- 
 works部分の微調整
------------------------*/
@media (max-width: 921px) {
          .ast-blog-layout-5-grid .ast-blog-featured-section  {
        margin-bottom: 0.2em;
    }
}