/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try it out on a free dummy site: https://zipwp.org/themes/astra/
Version: 4.8.11
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 9.3
Tested up to: 6.7
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */

.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);     /* 押し込んだような効果 */
}
/*******ヘッダー類******************/

/* 上下の余白を小さくする */
.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: 250px;
  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 {
  margin-bottom: 40px;
}

.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: 24px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.5px;
  margin: 0;
}

.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;
}

.news-section h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

/* 横スクロールさせる（スクロールバー表示あり） */
.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 {
	width:100%;
	height:100%;
  background-color: #000;
  /***padding: 60px 20px***/
  color: #fff;
  text-align: left;
}

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

.footer-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s;
  text-align: left;
}

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


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

.footer-menu .copyright {
  font-size: 14px;
  text-align: center;
  color: #ccc;
  margin-top: 40px;
}
/************** 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;
}
@media (min-width: 922px) {
    .ast-narrow-container .site-content > .ast-container {
        max-width: 1240px;
    }
}
/*******投稿記事******************/

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .custom-footer {
	        flex-wrap: wrap;                /* 画面が狭い場合は自動で折り返す */
    }
}

.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: #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;
}

/* RECRUITセクション */
.recruit-section {
  position: relative;  
  padding: 50px 20px;
  overflow: hidden;
  text-align: center;
}
.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;
}
.recruit-content h3 {
  font-size: 45px;
  margin-bottom: 15px;
  text-align: left;
}

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

.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;
  text-align: center;
  padding: 60px 20px;
  font-family: 'Helvetica Neue', sans-serif;
}

.contact-section h3 {
  color: #fff;
  font-size: 35px;
  margin-bottom: 5px;
}

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

.contact-text {
  font-size: 25px;
  line-height: 1.8;
  margin-bottom: 40px;
  color: #fff;
}

.contact-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
  text-decoration: none !important;
}

.contact-button:hover {
  background-color: #ccc;
}

/* スマホ（例：画面幅600px以下）では幅100%に */
.fixed-thumb-page {
    width: 300px;
    height: 200px;
    object-fit: cover;
    display: block;
}
@media (max-width: 600px) {
  .fixed-thumb-page {
    width: 180px;
    height: 120px;
    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: 1rem;
  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: cover;
  border: 1px solid #ccc;
  position: relative;
  font-family: 'Helvetica Neue', sans-serif;
  z-index: 1;
  color: #000;
}

.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;
  padding-right: 20px;
}
.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;
}