/**
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
*/

.button.product_type_simple {
    display: none !important;
}
/*******ヘッダー類******************/

header.site-header{
	width:100% !important;
}
/* ヘッダー内のメインメニューを右寄せ */
.main-header-menu {
	max-width: 100% !important; /* 幅の制限を解除 */
    display: flex;
    justify-content: flex-end;  /* 右寄せ */
    align-items: center;        /* 垂直方向の中央揃え */
    gap: 20px;                  /* メニュー間の余白 */
}

/* メニューリンクのスタイル */
.main-header-menu li a {
    color: white;               /* 文字色を白に */
    text-decoration: none;      /* 下線を削除 */
    padding: 10px 15px;         /* クリック範囲を拡大 */
    transition: background 0.3s ease, border-radius 0.3s ease;
    background: transparent;    /* デフォルトは透明 */
    border-radius: 5px;         /* 角丸 */
}

/* クリック時（アクティブ）の効果 */
.main-header-menu li a:active {
    background: #333;           /* より暗い色 */
    transform: scale(0.95);     /* 押し込んだような効果 */
}

/*=========================================
#hamburger
=========================================*/
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 150;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.hamburger.is-active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hamburger span {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: #333333;
    transition: transform .3s;
}

.hamburger.is-active span {
    background-color: #ffffff;
}

.hamburger span:nth-child(1) {
    top: 30%;
}

.hamburger span:nth-child(2) {
    top: 60%;
}

.hamburger span:nth-child(3) {
    top: 90%;
}

/*=========================================
#drawer
=========================================*/
.drawer {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: 100%;
    height: 100vh;
    background-color: #333333;
    transition: opacity .3s, visibility .3s;
}

.drawer.is-active {
    visibility: visible;
    opacity: 1;
}

.drawer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.drawer__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.drawer__link {
    color: #ffffff !important;
    font-size: 18px;
    display: block;
    text-align: center;
    text-decoration: none !important;
    padding: 12px;
}




/* ===============================================
# 共通
=============================================== */
a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    font-style: italic;
    vertical-align: middle;

    shape-margin: .75rem;
}

.sp-show {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-show {
        display: block;
    }

    .sp-none {
        display: none;
    }
}
/* 🟢 drawerメニュー強制表示＆上書き防止 */
body .drawer__link {
  color: #ffffff !important;
  font-size: 18px !important;
  text-align: center !important;
  display: block !important;
  padding: 12px !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* 🟢 drawerリストを非表示にしていたテーマのulスタイルを上書き */
body .drawer__list {
  height: auto !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 5px !important; /* ← ここを40px→12pxなどに変更 */
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/*******ヘッダー類******************/

/* 上下の余白を小さくする */
.margin-small {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
	padding-top:0px !important;
	padding-bottom:0px !important;
}
/*******カード類******************/

/*セールのカード削除*/
.ast-on-card-button.ast-onsale-card{
	display: none;
}
/*タイトルの微調整*/
.entry-content .wp-block-columns {
	  padding-top: 5px;
    padding-left: 0px;
   	padding-bottom: 5px;
}
/*トップページのジャンル表示削除*/
.home ul.products li.product .ast-woo-product-category, .woocommerce-page ul.products li.product .ast-woo-product-category{
	display:none;
}
.archive ul.products li.product .ast-woo-product-category{
	display:block;
}
/*
.astra-shop-summary-wrap{
	display:none;
}*/
/*画像の微調整
.astra-shop-thumbnail-wrap{
	width:230px;
}
画像下の微調整
.astra-shop-summary-wrap{
	width:230px;
}*/

.out-of-stock .woocommerce-loop-product__title::after {
    content: " SOLD OUT";
    color: red;
    font-weight: bold;
}

.ahfb-svg-iconset{
	display: none;
}
/*******カード類******************/
/*******最新の投稿******************/
.latest-news-slider {
  display: flex;
	margin-bottom:15px;
  overflow-x: auto;
  gap: 16px;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.news-slide-card {
  flex: 0 0 auto;
  width: 220px;
  height: 185px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.news-slide-card .img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3; /* ★ 画像比率を固定 */
  overflow: hidden;
  border-radius: 4px;
  background-color: #f0f0f0;
}

.news-slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ★ 中央に合わせてトリミング */
}

.post-title {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  flex-grow: 1;
  text-align: left;          /* ← 左揃え */
  display: flex;
  align-items: flex-end;
}

.post-date {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  text-align: left;          /* ← 左揃え */
}
.latest-news-section {
 padding: 0px 20px;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
  border-bottom: 2px solid #eee;
}

.news-title {
   font-size: 28px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.5px;
 margin-bottom: 15px;
}

.news-more {
  position: relative;
  font-size: 14px;
  color: #0073aa;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.news-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #0073aa;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.news-more:hover {
  color: #005f8d;
}

.news-more:hover::after {
  transform: scaleX(1);
}
/* カテゴリーのバッジスタイル */
.category-badge {
    padding: 4px 8px;          /* 内側の余白 */
    border-radius: 4px;        /* 角の丸み（0pxにすると完全な四角） */
    font-size: 0.85em;         /* 文字サイズ調整 */
    font-weight: bold;         /* 文字を太く */
    display: inline-block;     /* インラインで四角く表示 */
    margin-right: 5px;         /* バッジ同士の余白 */
    border: 1px solid #005f8d; /* 枠線を追加 */
    transition: background 0.3s ease;
}

.post-category {
    color: #555;       /* 通常のテキスト色 */
    font-weight: bold; /* 目立たせる */
    min-width: 120px;  /* カテゴリーの幅を固定 */
  	width:15%;
  	text-align: center;
}

/* .post-title{
    color: #000;               /* 黒字に設定 */
/*     text-decoration: none;     /* 下線を削除 */ 
/*     font-weight: bold;         /* 文字を太字にする（任意） */ 
/*     transition: background 0.3s ease, color 0.3s ease; /* 滑らかなホバー効果 */ 
/*     padding: 4px 6px;          /* ホバー時に背景色がきれいに表示されるよう余白を追加 */ 
/*     display: inline-block;     /* 背景色が正しく表示されるようにする */ 
/*} */

.post-title:hover {
    color: #999999;               /* 文字色はそのまま黒に保持 */
    cursor: pointer;           /* ホバー時にポインターを表示 */
}
/*******最新の投稿******************/

.news-section {
  padding: 40px 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
}

.block-heading {
  font-size: 45px;
  margin-bottom: 10px;
}

/* 横スクロールさせる（スクロールバー表示あり） */
.news-list {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
}
.top-page{
	  display: flex;
    scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox用 */

}

.news-list .news-page{
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  align-items: flex-start;
}

.news-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
/* 各記事 */
.news-item {
  flex: 0 0 auto;
  width: 250px;
  scroll-snap-align: start;
  font-size: 14px;
}

.news-img {
  width: 100%;
  height: 140px;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 8px;
}
.news-page .news-img{
  flex-shrink: 0;
}
.fixed-thumb {
    width: 300px;
    height: 200px;
    object-fit: cover; /* 画像を切り取りながら全体をフィット */
    display: block;
}
.news-date {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  text-decoration: none !important;
}

.news-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}
.news-item a {
	color: #333;
	text-decoration: none;
}

/* スクロールバー（Chrome/Edge/Safari） */
.news-list::-webkit-scrollbar {
  height: 6px;
}

.news-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.news-list::-webkit-scrollbar-track {
  background-color: transparent;
}

/*******フッター******************/
/* フッター全体のスタイル */
.custom-footer {
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-around;  /* セクションを均等に横並び */
}

/* 各セクションのスタイル */
.footer-section {
    min-width: 200px;               /* 最小幅を設定 */
    text-align: center;             /* テキストを中央揃え */
}

/* カテゴリー見出しのスタイル */
.footer-category {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 2px solid #ccc;  /* 見出しを強調する下線 */
    padding-bottom: 5px;
}

/* リンクリストのスタイル */
.footer-links {
    list-style: none;               /* デフォルトのリストマーカーを削除 */
    padding: 0;
    margin: 0;
}

/* 各リンクのスタイル */
.footer-links li {
    margin: 8px 0;                  /* 上下に余白を追加 */
}
/* リンクの基本スタイル */
.footer-links a {
        font-size: 0.8em;
    color: #333;
    text-decoration: none;          /* 下線を削除 */
    transition: color 0.3s ease;    /* ホバー時の色変化をスムーズに */
    display: inline-block;          /* クリック範囲を拡大 */
    padding: 5px 10px;              /* クリックしやすい余白 */
}

/* ホバー時のエフェクト */
.footer-links a:hover {
    color: #0073aa;                 /* ホバー時に青色へ変化 */
    background-color: #f0f0f0;      /* 背景色を淡いグレーに */
    border-radius: 5px;             /* 角を丸くする */
}
.footer-section {
        margin-bottom: 20px;        /* セクション間に余白を追加 */
    }
/************** footer ************/

.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer-menu li {
  margin-bottom: 0px;
}

.footer-menu a:hover {
  color: #ccc;
}

.footer-menu .copyright {
  font-size: 14px;
  text-align: center;
  color: #ccc;
  margin-top: 40px;
}

.footer-menu {
  width: 100%;
  height: 100%;
  background-color: #000;
  padding: 60px 20px;
  color: #fff;
  text-align: left;
}
.custom-footer {
  background-color: #000;        /* 黒背景 */
  color: #fff;                   /* 白文字 */
  text-align: center;            /* 中央揃え */
  padding: 20px 0;               /* 上下の余白だけにする */
  font-family: sans-serif;       /* フォント指定 */
  font-size: 16px;
}

.footer-inner {
  max-width: 1200px;             /* 他セクションと幅を揃える */
  margin: 0 auto;                /* 中央寄せ */
  padding: 0 20px;               /* スマホでも左右余白 */
  box-sizing: border-box;
}

.custom-footer p {
  margin: 0;                     /* pタグのデフォルト余白削除 */
}
section + .custom-footer {
  margin-top: 0; /* 不要な上余白を削除 */
}



.ast-builder-grid-row-container-inner {
　background-color: #000;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
	max-width: 100%;
}
/************** footer ************/
/*******フッター******************/


/*******投稿記事******************/
.post-navigation {
		display: none;
	/*ナビゲーション削除**/
}
.entry-content[data-ast-blocks-layout] > * {
margin-left:5px;
}
.ast-narrow-container .site-content{
		background-color: White;
}
.entry-meta{
	display:none;
}

/*******投稿記事******************/

/* レスポンシブ対応 */


.img-container .box {
    width: 0;
    background-color: blue;
    position: absolute;
    left: 0;
    animation: stretch-shrink 0.6s linear forwards;
}
.img-container .box2 {
    width: 0;
    background-color: blue;
    position: absolute;
    bottom: 0%;
    left: 0;
    animation: stretch-shrink 0.6s linear forwards;
	  animation-delay: 0.3s; /* ボックス1が消えた後に起動 */
}
@keyframes stretch-shrink {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
.img-container {
    position: relative;
    width: 100vw;
    height: 600px;
    overflow: hidden; /* 必要に応じて要素がはみ出ないように */
}
.page-id-569 .ast-container{
	  margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* 横スクロール防止 */
}
/* 画像フェードイン */
.img-container .image {
    position: absolute;
    left: 31%;
    width: 50%; /* 画像の幅を指定 */
    height: auto;
    opacity: 0;
    animation: fade-in 0.6s ease-in forwards;
	  animation-delay: 0.2s; /* ボックス1が消えた後に起動 */
}
/* 画像フェードイン */
.img-container .image2 {
    position: absolute;
    bottom: 0%;
    left: 31%;
    width: 50%; /* 画像の幅を指定 */
    height: auto;
    opacity: 0;
    animation: fade-in 0.6s ease-in forwards;
    animation-delay: 0.5s; /* 画像1が消えた後にフェードイン */
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.img-container .top-img{
  position: absolute;
	width:100%;
	height:100%;
	background-image:url(https://hiroashimo.conohawing.com/wp-content/uploads/2025/02/watercolor8-1.jpg);
	background-size: cover;
  transition: opacity 1s ease;
}

.my-wp-block-buttons .wp-block-button .wp-block-button__link.has-background:hover {
    background-color: #000000 !important;
}

.bgcolor {
  background: #000;
  margin: 0;
  padding: 30px 50px;
}

.read-more {
  display: inline-block;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  padding: 12px 32px;
  font-size: 18px;
  border-radius: 4px;
  border: 1px solid #fff;
  transition: all 0.3s ease;
}
.read-more {
  display: inline-block;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  padding: 12px 32px;
  font-size: 18px;
  border-radius: 4px;
  border: 1px solid #fff;
  transition: all 0.3s ease;
}

.read-more:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

.read-more-service {
  display: inline-block;
  padding: 10px 25px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}
.read-more-service span {
  margin-left: 10px;
}

.read-more-service:hover {
  background-color: #ccc;
}
.read-more-service.white {
  display: inline-block;
  padding: 10px 25px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.read-more-service.white span {
  margin-left: 10px;
}

.read-more-service.white:hover {
  background-color: #000;
	color: #fff;
}

/* RECRUITセクション */
.recruit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://hiroashimo.conohawing.com/wp-content/uploads/2025/04/IMG_4115.jpg') no-repeat center center / cover;
  opacity: 0.4; /* ← ここで透過調整 */
  z-index: 1;
}
.recruit-content {
  position: relative;
  z-index: 2;
  color: #000;
}
.block-heading {
  font-size: 45px;
  margin-bottom: 15px;
  text-align: center;
}

.recruit-content h4 {
  font-size: 20px;
  margin: 20px 0 40px;
  text-align: left;
}

.recruit-contact-button {
  margin:20px 0px;
}
@media screen and (max-width: 768px) {
  .recruit-content {
    padding: 40px 20px;
    text-align: center;
  }

  .block-heading {
    font-size: 32px;
    text-align: center;
    margin-bottom: 12px;
  }

  .recruit-content h4 {
    font-size: 16px;
    margin: 16px 0 30px;
    text-align: center;
  }
}

.read-more-service {
  display: inline-block;
  padding: 10px 25px;
  background-color: #fff;
  color: #000;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}
.read-more-service span {
  margin-left: 10px;
}

.read-more-service:hover {
  background-color: #ccc;
}
.read-more-service.white {
  display: inline-block;
  padding: 10px 25px;
  background-color: #000;
  color: #FFF;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.read-more-service.white span {
  margin-left: 10px;
}

.read-more-service.white:hover {
  background-color: #ccc;
}

/* contactセクション */
.contact-section {
  background-color: #000;
  color: #fff;
  padding: 20px 0px;
  font-family: 'Helvetica Neue', sans-serif;
}
/* 横並びレイアウト（常にテキスト左・ボタン右） */
.contact-inner {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  max-width: 500px;
  margin: 0 auto;
  flex-wrap: nowrap;
  gap: 20px;
}

/* テキスト部分 */
.contact-text-box {
  text-align: center; /* ★中央寄せのポイント */
  max-width: calc(100% - 80px);
}
  .contact-text-box {
  position: relative; /* ここを基準に絶対配置する */
}

/* 英語タイトル（上） */
.sub {
  font-size: 18px;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;     /* テキスト中央 */
}

/* 日本語タイトル（下） */
.block-heading {
  font-size: 18px;
  margin-bottom: 15px;
  color: #fff;
   text-align: center;
}



/* 説明テキスト */
.contact-text {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 0;
  color: #fff;
  text-align: left;
}

/* ボタンラッパー */
.contact-button-box {
  flex: 0 0 60px;
  margin-left: auto;
  margin-top: 10px;
}
/* 丸いボタン */
.contact-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.contact-button:hover {
  background-color: #ccc;
  color: #000;
}
@media screen and (max-width: 768px) {
  .contact-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0px;
    text-align: center;
  }
	
  /* 説明テキスト */
  .contact-text {
	 margin-left: 24px;
	 padding-right:3px;
	 font-size: 12px;
  }

  .contact-text-box {
    flex-grow: 1;
    max-width: none;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
  }

  .sub {
    font-size: 16px;
  }

  .block-heading {
    font-size: 20px;
    margin-top: 20px;
　  margin-bottom: 10px;/* ここで中央に寄せる */
  }

  .contact-button-box {
    flex: 0 0 auto;
    margin-right: 5px;
  }
}


/* スマホ（例：画面幅600px以下）では幅100%に */
.fixed-thumb-page {
    width: 300px;
    height: 200px;
    object-fit: cover;
    display: block;
}

/**********ニュースページ**************/
/* ニュース一覧を縦に並べる */
.news-list-page {
  display: flex;
  flex-direction: column;
  gap: 20px;       /* アイテム間の余白 */
  margin: 0;
  padding: 0;
}

/* カード全体を横並びに */
.news-item-page {
  display: flex;            /* ← これで子要素を横並びに */
  flex-direction: row;      /* ← 明示的に行方向 */
  align-items: flex-start;  /* 画像とテキストを上揃え */
  gap: 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.news-item-page > a {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
/* 画像ブロック */
.news-img-page {
  flex-shrink: 0;
}
.news-img-page img {
  width: 200px;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* テキストブロック */
.news-content-page {
  flex: 1;                  /* 右側の空きスペースを使って広がる */
  display: flex;
  flex-direction: column;
  font-size: 20px;
}

/* 日付 */
.news-date-page {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 4px;
}

/* タイトル */
.news-title-page {
  font-size: 28px;
  color: #222;
  line-height: 1.4;
  /* 長いタイトルは2行に切り詰め */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* カテゴリーボタン */
.news-category-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.news-category-buttons .btn-category {
  display: inline-block;
  padding: 8px 16px;
  background-color: #000; /* 黒背景 */
  color: #fff; /* 白文字 */
  border: none;
  border-radius: 4px;
  text-decoration: underline; /* 下線あり */
  font-size: 14px;
  transition: all 0.3s ease;
  font-weight: bold;
}

.news-category-buttons .btn-category:hover {
  background-color: #333; /* 少し明るい黒 */
}

.news-category-buttons .btn-category.active {
  background-color: #000; /* アクティブも黒 */
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
}

/* ページネーション全体 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  /* gap: 8px; ← これを削除 */
}

.pagination a,
.pagination span {
  margin: 0 4px 8px 4px; /* ← 上下左右の余白を明示 */
}

/* ページ番号リンクと現在ページ */
.pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* ホバー時 */
.pagination .page-numbers:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

/* 現在ページ */
.pagination .current {
  background-color: #0073aa;
  border-color: #0073aa;
  color: #fff;
  cursor: default;
}

/* 「前へ」「次へ」リンク（← →）を太字に */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  font-weight: bold;
}

/* 無効状態（最初 or 最後のページで Prev/Next が出ないときの代替） */
.pagination .page-numbers.dots {
  cursor: default;
  border-color: transparent;
  background: none;
}

.custom-contact-form {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 30px;
  background: url('https://hiroashimo.conohawing.com/wp-content/uploads/2025/04/cropped-1000000230.png') center center no-repeat;
  background-size: 200px 200px;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  position: relative;
  font-family: 'Helvetica Neue', sans-serif;
  z-index: 1;
  color: #000;
}

@media (max-width: 768px) {
  .custom-contact-form {
    background-size: 50% auto;
    background-position:center center; /* ★ 下に移動 */
  }
}

.custom-contact-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: -1;
}

.custom-contact-form h2 {
  font-size: 32px;
  margin-bottom: 5px;
}

.custom-contact-form p {
  font-size: 18px;
  margin-bottom: 20px;
}

.custom-contact-form label {
  display: block;
  margin-bottom: 15px;
  font-size: 15px;
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #aaa;
  margin-top: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

.custom-contact-form textarea {
  height: 120px;
  resize: vertical;
}

.custom-contact-form input[type="submit"] {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
}

.custom-contact-form input[type="submit"]:hover {
  background-color: #000; /* ホバーでも変化しないよう固定 */
}

.custom-contact-form input[type="checkbox"] {
  margin-right: 5px;
}
.contact-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
.contact-box {
  background-color: #000;
  color: #fff;
  padding: 40px;
  border: 1px solid #333;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  max-width: 800px;
  width: 100%;
}
.contact-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contact-text {
  flex: 1;
}
.contact-box h2 {
  font-size: 36px;
  margin: 0;
}
.subtitle {
  font-size: 24px;
  margin: 10px 0 20px;
}
.description {
  font-size: 16px;
  line-height: 1.6;
}
.contact-button {
  font-size: 24px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  flex-shrink: 0;
}
.contact-button:hover {
  background-color: #fff;
  color: #000;
}
.contact-box h2{
  color: #fff;
}

body {
    background-color: #efefef;
}
nav {
    position: fixed;
    top: 24px;
    width: 100%;
    z-index: 10;
}
ul {
    height: 0;
    overflow: hidden;
    transition: .3s;
    list-style:none;
}
li a{
    padding: 8px;
    font-size: 16px;
    color: #464646;
    display: block;
    text-align: center;
    text-decoration: none;
}
.site-navigation{
	display:none;
}

/*****調整*****/

.custom-vision-box {
  all: initial;
  font-family: 'Helvetica Neue', sans-serif;
  background: #fff;
  max-width: 700px;
  margin: 0 auto;
  color: #000;
  box-sizing: border-box;
  text-align: left;
  width: 90%;
  padding: 20px 20px;
}
.custom-vision-box h1{
	font-size: 28px;
  font-weight: bold;
  margin-bottom: 0px;
  color: #000;
}
.custom-vision-box * {
  all: unset;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', sans-serif;
}
.custom-vision-title {
  display: block;
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 20px;
  color: #000;
  text-align: left;
}
.custom-vision-heading {
  display: block;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.6;
  border-bottom: 5px solid #999;
  padding-bottom: 0;
  margin-bottom: 0;
  color: #000;
  text-align: left;
  width: 93%;
}
.custom-vision-text {
  display: block;
  font-size: 1.5625rem;
  line-height: 1.9;
  margin-bottom: 5px;
  color: #000;
	padding: 0px 20px;
}
.custom-read-more-wrapper {
  display: flex;
  justify-content: center;
}
.custom-read-more {
	all: unset;
  display: inline-block;
  padding: 14px 28px;
  background-color: #000;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  border: 1px solid #000;
  border-radius: 4px;
}
.custom-read-more-white {
	all: unset;
  display: inline-block;
  padding: 14px 28px;
  background-color: #fff;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  border: 1px solid #000;
  border-radius: 4px;
	margin-bottom: 20px;
}

.custom-read-more-white:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}



.custom-read-more span {
  margin-left: 10px;
}
.custom-read-more:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

.fv-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 20px;
}

.fv-box {
  width: 90%;
  border: 1px solid #999;
  background-color: #fff;
  overflow: hidden;
}

.fv-box video {
  width: 100%;
  height: auto; /* 高さは動画比率に合わせる */
  display: block;
  object-fit: contain; /* 全体を表示（必要なら cover に変更可能） */
}

/* モバイル調整 */


  .fv-box {
    width: 100%;
    border: none;
  }
}

.service-container {
  background-color: #000;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-family: "Helvetica Neue", sans-serif;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
}

.section-title {
  font-size: 28px;
  margin: 0 0px 0px;
  color: #fff;
  text-align: left;
  font-weight: bold;
}

.service-container {
	background-color: #000
}
.service-box {
  text-align: left;
  padding: 0 20px;
  box-sizing: border-box;
}

.service-title {
  font-size: 28px;
  margin-bottom: 10px;
  color: #fff;
}

.service-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 16px 0;
  display: block;
}

.service-text {
  font-size: 1.5625rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #fff;
}

.read-more-wrapper {
  display: flex;
  justify-content: center;
}

.read-more {
  display: inline-block;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #fff;
  transition: all 0.3s ease;
}

.read-more:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

 
  .section-title {
    margin-left: 16px;
  }

.service-box h1{
  color: #fff;
}
.service-box h2{
  color: #fff;
}


.about-section {
  background-color: #fff;
  color: #333;
  padding: 60px 20px;
  font-family: "Helvetica Neue", sans-serif;
}

.about-header {
  max-width: 600px;
  margin: 0 auto 10px;
  text-align: left;
}

.about-header h1{
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 0px;
  color: #000;
}

.about-subtitle {
  font-size: 16px;
  color: #444;
}

.about-logo {
  text-align: center;
  margin-bottom: 20px;
}

.about-logo img {
  width: 150px;
  height: auto;
}

.about-text {
  max-width: 600px;
  margin: 0 auto 40px;
  text-align: left;
}

.about-heading {
  font-size: 22px;
  font-weight: 500;
  color: #555;
  margin: 0 0 12px;
}

.about-description {
  font-size: 16px;
  color: #444;
  line-height: 1.8;
}

.about-button-wrapper {
  text-align: center;
}

.about-button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 14px 36px;
  font-size: 18px;
  border-radius: 4px;
  border: 1px solid #000;
  transition: all 0.3s ease;
}

.about-button:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

/* オーバーレイを追加（中身に背景色を入れて、ボタンまで画像が見えるように） */
.recruit-overlay {
  background-color: rgba(255, 255, 255, 0.6);
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 40px;
  box-sizing: border-box;
}

.recruit-content {
  text-align: left;
}

.recruit-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.recruit-text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 40px;
  font-weight: bold;
}

.recruit-button-wrapper {
  text-align: center;
}

.about-button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 14px 36px;
  font-size: 18px;
  border-radius: 4px;
  border: 1px solid #000;
  transition: all 0.3s ease;
}

.about-button:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

  .recruit-overlay {
    padding: 40px 20px;
  }

  .recruit-title {
    font-size: 28px;
  }

  .recruit-text {
    font-size: 16px;
  }

  .about-button {
    font-size: 16px;
    padding: 12px 28px;
  }

.career-change-section {
  margin: 0 auto !important;
  padding: 0px 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  text-align: left;
}
.career-change-section > h2{
	margin-bottom:0px;
}
.career-change-section H1{
    padding: 0px 20px;
	text-align: left;
	margin-bottom: 0px;
}
.career-change-section h3{
	margin-top:20px;
}
.career-change-section > p{
    padding: 0px 0px;
	margin-bottom: 0px;
	text-align:left;
}
.footer-area {
  background-color: #000;     
  padding: 30px 0 0;           
  font-family: sans-serif;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: left;            
}
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}
.footer-menu li {
  margin-bottom: 5px;
}
.footer-menu li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
	padding: 0px;
}
.footer-menu li a:hover {
  text-decoration: underline;
}
.footer-copyright {
  color: #fff !important;
  font-size: 14px;
  text-align: center;
  margin: 20px 0 0 0;        
}




.section-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 5px;
}

.section-subtitle {
  font-size: 18px;
  margin-bottom: 30px;
}

.career-block {
  margin-bottom: 40px;
}

.block-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #444;
}

.image-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #aaa;
}

.block-description {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

.recruit-section {
  background-image: url('https://hiroashimo.conohawing.com/wp-content/uploads/2025/04/Recruit-1.png');
  background-size: cover;
  background-position: center;
  padding: 100px 20px;
  color: #000;
  position: relative;
}

.recruit-content {
  max-width: 500px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.6)；
}

.recruit-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.recruit-text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 40px;
  font-weight: bold;
}

/* ボタンを中央配置するラッパー */
.recruit-button-wrapper {
  text-align: center;
}

.recruit-button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 16px 40px;
  font-size: 18px;
  text-decoration: none;
  border: 2px solid #000;
  transition: all 0.3s ease;
}

.recruit-button:hover {
  background-color: #fff;
  color: #000;
  border-color: #000;
}

.vmv-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
  gap: 2px;
}

.vmv-section img {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  margin-left: 10px; /* ロゴ画像の左に空白を追加 */
}
.vmv-text{
	display: flex;  
	height:40px;
    flex-direction: column;
}
.vmv-text h3 {
  margin: 0;
  font-size: 1.5rem;
  height:40px;
  line-height: 40px;
}

.vmv-text p {
  margin: 5px 0 0;
  line-height: 1.5;
}
.vmv-text h3 {
  padding: 0px 0px;
}
.vmv-text2 p {
  margin: 0;
  margin-left: 10px;
  font-size: 1.4rem;
  margin-bottom:10px;
  line-height: 1.2; /* 行間を狭く設定 */
}

.message-section {
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #fff;
}
.message-section p,h3{
	text-align:left !important;
	padding:0px 0px;
}

.message-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.message-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-photo {
  max-width: 90%;
  width: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.message-name {
  font-size: 20px;
  font-weight: normal;
  line-height: 1.3;
}
.message-name2 {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3;
}
.profile-message {
  max-width: 700px;
  margin: auto;
  padding: 0 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #000;
  line-height: 2;
  text-align: center; /* ← 中央揃えに変更 */
}

.profile-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.profile-text {
  font-size: 16px;
  margin-bottom: 20px;
}

.outline-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #000;
  text-align: left;
}

.outline-section .outline-heading {
  font-size: 1.875rem;
  font-weight: bold;
  margin-bottom: 0px;
}

.outline-subheading {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}

.outline-table {
  border-top: 1px solid #aaa;
  text-align: left; /* 表の中身は読みやすく左揃え */
  margin-top: 20px;
}

.outline-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #aaa;
  padding: 15px 0;
  justify-content: center;
}

.outline-label {
  width: 100%;
  font-weight: bold;
  text-align: left;
  margin-bottom: 5px;
}

.outline-value {
  width: 100%;
  line-height: 0.9;
  white-space: pre-line;
  text-align: left;
}

.marketing-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 0px 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  text-align: center; /* ← 中央揃えに変更 */
}
.marketing-section h2{
	margin-bottom: 0px;
}

.section-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 18px;
  margin-bottom: 40px;
}

.marketing-block {
  margin-bottom: 40px;
}

.block-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.image-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  border: 1px solid #aaa;
  display: block;
}

.block-description {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  text-align: left; /* 説明文だけ左揃え */
}

.divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

.marketing-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 0px 20px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  text-align: left;
}

.marketing-block {
  margin-bottom: 40px;
}

.block-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.image-wrapper {
  width: 100%;
  margin-bottom: 20px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #aaa;
}

.block-description {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
	margin-bottom:0px;
}

.divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

.recruit-section {
  background-image: url('https://hiroashimo.conohawing.com/wp-content/uploads/2025/04/Recruit-1-300x233.png');
  background-size: cover;
  background-position: center;
  padding:0px 0px;
  color: #000;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  background-repeat: no-repeat;
	
}

.recruit-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.recruit-text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 40px;
  font-weight: bold;
}

/* ボタンを中央配置するラッパー */
.recruit-button-wrapper {
  text-align: center;
}

.recruit-button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 16px 40px;
  font-size: 18px;
  text-decoration: none;
  border: 2px solid #000;
  transition: all 0.3s ease;
}

.recruit-page {
  font-family: "Helvetica Neue", sans-serif;
  color: #000;
  max-width: 800px;
  margin: 0 auto;
  padding: 0px 20px;
}
.recruit-header h1 {
  font-size: 24px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.recruit-header .sub {
  font-size: 14px;
  margin-bottom: 20px;
}
.recruit-header h2 {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 30px;
}
.recruit-photo img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 40px;
}
.recruit-message-bg {
  position: relative;
  background-image: url('https://hiroashimo.conohawing.com/wp-content/uploads/2025/06/心震える瞬間をともに-1.png');
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  color: #fff;
}
.recruit-message-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 黒の40%透過フィルター */
  z-index: 0;
}
.recruit-message-inner {
  position: relative;
  z-index: 1;
  padding: 30px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.recruit-message-inner h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
.recruit-message-inner p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}
.recruit-cta {
  text-align: center;
  margin-top: 40px;
}
.recruit-button {
  display: inline-block;
  padding: 14px 32px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border: 1px solid #000;
  transition: 0.3s;
}
.recruit-button:hover {
  background: #fff;
  color: #000;
};

.contact-section h2,p,h3{
	text-align:left !important;
	padding:0px 0px;
}

.recruit-title-child {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}
.recruit-text-child {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 40px;
  font-weight: bold;
}

@media (max-width: 544px) {
    .site-below-footer-wrap[data-section="section-below-footer-builder"].ast-footer-row-mobile-stack .site-footer-section {
        display: block;
        margin-bottom: 0px;
    }
}
.site-below-footer-wrap {
    padding-top: 0px;
    padding-bottom: 0px;
}


.contact-section .sub {
  font-size: 30px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.block-heading {
  text-align: center;
}


@media (min-width: 922px) {
    .ast-narrow-container .site-content > .ast-container {
        max-width: 1240px;
    }
}
@media (max-width: 768px) {
    .custom-footer {
	        flex-wrap: wrap;                /* 画面が狭い場合は自動で折り返す */
    }
}
@media (min-width: 922px) {
    .ast-narrow-container .site-content > .ast-container {
        max-width: 1240px;
    }
}
@media (max-width: 600px) {
  .fixed-thumb-page {
    width: 180px;
    height: 120px;
    object-fit: cover;
    display: block;
  }
}
@media (max-width: 480px) {
  .fv-section {
    padding: 5px 0;
    margin-bottom: 15px;
  }
@media (max-width: 768px) {
  .service-container {
    padding: 20px 0;
  }
@media (max-width: 600px) {
  .vmv-section {
    flex-direction: row;
    align-items: flex-start;
  }
}
@media (min-width: 768px) {
  .custom-vision-box {
	padding: 30px 20px;
  }
}
	/* PC（768px以上）ではハンバーガーメニューを非表示 */
@media screen and (min-width: 769px) {
  .hamburger,
  .drawer {
    display: none !important;
  }
}

/* モバイル（768px以下）でだけハンバーガー表示 */
@media screen and (max-width: 768px) {
  .sp-show {
    display: block;
  }
  .sp-none {
    display: none;
  }
}