@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/* 明朝体 */
.min01, th{
font-family:serif !important;
}
/* murecho */
.murecho300, .l-topTitleArea__body h1{
  font-family: "Murecho", sans-serif;
  font-weight: 300 !important;
}

/* PCヘッダーの非表示 */
@media (min-width: 960px) {
	header{display:none;}
    }

/* カテゴリの文字色*/
.c-categoryList__link,.c-postThumb__cat {
color:#222 !important;
}

/* SPメニュー見出し*/
.c-widget__title.-spmenu {
color:#222;
}

/*ボタン*/
.is-style-btn_normal a{
	color:#222;
}
.is-style-btn_normal a:hover{
	opacity:0.8;
}
.is-style-btn_line a:hover{
	color:#222 !important;
}
.is-style-more_btn a:hover{
background:#222;
border:1px solid #fff;
}

/*右ボックス620px*/
.right-620{
max-width:620px;
margin:0 0 0 auto ;
}

/*右ボックス520px*/
.right-520{
max-width:520px;
margin:0 0 0 auto ;
}

/*ボックス520px*/
.txt-width520{
max-width:520px;
}

/*横スクテキスト非表示*/
.c-scrollHint{
display:none;
}

/*footer非表示*/
footer{
display:none;
}

/*backtotop*/
.c-fixBtn{
	background:#222;
}

/*ページネーション*/
[class*=page-numbers].current, [class*=page-numbers]:hover {
    color: #222;
}

/* TOP背景画像PC用*/
@media (min-width: 980px) {
  .sec1{
    background-image: url('https://hakononaka.co/wp-content/uploads/2025/11/bg-001.jpg');
	background-size: cover;
  }
	.sec2{
    background-image: url('https://hakononaka.co/wp-content/uploads/2025/11/bg-002-2.jpg');
	background-size: cover;
  }

}
/* TOP背景画像SP用*/
@media (max-width: 979px) {
  .sec1{
    background-image: url('https://hakononaka.co/wp-content/uploads/2025/11/sp-bg001.jpg');
	background-size: cover;
  }
	.sec2{
    background-image: url('https://hakononaka.co/wp-content/uploads/2025/11/sp-bg002-2.jpg');
	background-size: cover;
  }
}
/* ========================================
箱を回転させる
========================================= */
/* 回転アニメーションの定義 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 要素にアニメーションを適用 */
.spin {
    /* アニメーション名 | 実行時間 | 進行度合い | 繰り返し */
    animation: spin 5s linear infinite;
    /* (任意) 要素の中心を基準に回転させる */
    transform-origin: center center;
}
/* ========================================
モノクロ表示
========================================= */
/* デフォルトの状態: モノクロを適用 */
.p-img img {
   /* グレースケールを100%適用してモノクロにする */
    filter: grayscale(100%);
    
    /* (任意) ホバー時の変化を滑らかにするためのトランジション */
    transition: filter 0.3s ease-in-out;
    
    /* 画像が親要素に収まるように設定 (必要に応じて) */
    width: 100%;
    height: auto;
    display: block;
}

/* ホバー時の状態: グレースケールを解除してカラーに戻す */
.p-img:hover img {
    /* グレースケールを0%に戻す（つまりカラー表示） */
    filter: grayscale(0%);
}

/* ========================================
ページ背景動画のスタイル
========================================= */
/* 背景動画のベース（iOS対応） */
#page-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -100;
    pointer-events: none;
}

#page-background-video .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* ここが重要 */
    -o-object-fit: cover;
    opacity: 0.2;
    will-change: transform;
}

/* フォールバック用：動画が非表示のときはポスターが背景として見えるように */
#page-background-video[data-video-hidden="true"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* アクセシビリティ：減らしたい人向け */
@media (prefers-reduced-motion: reduce) {
    #page-background-video .bg-video { display: none; }
    #page-background-video { background: url('https://hakononaka.co/wp-content/uploads/2025/11/noise_poster.jpg') center/cover no-repeat; }
}

/* ========================================
フッター前のウィジェットの上の余白を削除
========================================= */
.w-beforeFooter {
    margin: 0 auto !important;
}

.l-content {
    margin: 0px auto;
}

/* ========================================
フッター上の余白を無くす
========================================= */
#content{
	margin-bottom:0;
}
.w-beforeFooter {
    margin: 0 auto;}

/* ========================================
スマホの時レイアウト調整
========================================= */

/* 子要素に縦向きの際の並び順を指定 */
@media screen and (max-width: 820px) {
.reversebox-order1 {
  order: 2;}
.reversebox-order2 {
  order: 1;
}
.sp-only-center{
 text-align:center !important;
}
.pc-only-center{
 text-align:left;
}
.pc-only-center2{
 text-align:right;
}
.con-btn .is-layout-flex:not(.is-vertical).is-content-justification-center {
 justify-content: right;
	}
/*余白の追加*/
.sp-pd10{
padding-left:10px;
padding-right:10px;
}
}