/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Template:     twentyfifteen
 Version:      1.0.0
*/

/* ここから下にCSSを追記 */

/* ページ内リンク（アンカーリンク）のスクロール位置を調整 */
html {
    scroll-behavior: smooth; /* スムーズにスクロールさせる（お好みで） */
}

/* ターゲットになった要素（IDがついている場所）の上部に余白を作る */
:target {
    scroll-margin-top: 20px; /* ヘッダーの高さ + 少し余裕を持たせた数値 */
}

.entry-title {
font-size: 22px;
font-size: 2.5rem;
}

/* 記事コンテンツ（白い紙の部分）の影を消してフラットにする */
.hentry {
    box-shadow: none;
    border: none;
    margin-left: 0;
    margin-right: 0;
}

/* ページ全体の背景色とコンテンツの背景色を合わせる（必要であれば） */
/* デフォルトのグレー背景を白にしたい場合 */
body {
    font-family: Outfit,Noto Sans JP,sans-serif;
}

/* 爽やかなマリンストライプ */
body {
background-color: #eef4f7;
    background-image: radial-gradient(circle at 50% 100%, #ddeeff 10%, transparent 11%), 
                      radial-gradient(circle at 50% 100%, #ddeeff 10%, transparent 11%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
            background-attachment: fixed; /* スクロールしても背景を固定する場合 */

}


/* 5. サイト全体の枠組みの幅調整（必要であれば） */
    .site {
        max-width: 100%; /* 全幅に広げる */
        margin: 0;
    }

.sidebar {
    float: none;
    position: relative;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}




@media screen and (min-width: 59.6875em) {
	
.sidebar {
float: none;
max-width: 400px;
width: 20%;
position: fixed;
left: 0;
top: 0;
}
	
	
    .site-content {
display: block;
float: none;
margin-left: 0;
width: 100%;
    }
}
    

/* ホーム（トップページ）の時だけ、記事タイトルを非表示にする */
.home.page .entry-header {
    display: none;
}

/* ホームの時だけ、コンテンツ上の余白を詰める */
.home.page .site-content {
    padding-top: 0 !important;
}

/* もし個別の記事エリア（hentry）の上余白も詰めたい場合 */
.home.page .hentry {
    padding-top: 0 !important;
}

/* コンテンツ幅の制限を解除して広げる */
.entry-content,
.entry-summary,
.page-content {
    max-width: 100% !important; /* または 1200px など好みの幅 */
    width: 100%;
}

/* 記事ヘッダー（タイトル部分）の幅も合わせる */
.entry-header {
    max-width: 100% !important;
}

/* PC表示（画面幅955px以上）の時のみ適用 */

.post{
	padding-left: 20%;
}

@media screen and (max-width: 59.6875em) {
    /* モバイルの調整が必要ならここに記述（今回はPCメインなので空でもOK） */
    .post{
	padding-left: 0%;
}
}

@media screen and (min-width: 59.6875em) {

    /* 1. Twenty Fifteen特有の「左側の背景色」を消す */
    body:before {
        display: none;
    }


    /* 3. 左サイドバーの背景を透明にする */
    #secondary {
        background-color: transparent;
        
        /* もし影などがあれば消す */
        box-shadow: none;
        border: none;
    }

    /* 4. 右側コンテンツエリアの背景調整 */
    .site-content {
        padding-top: 1%; /* 上の余白調整 */
        background: transparent; /* ここも透明に */
    }

    /* 記事部分（白い紙の部分）の背景をどうするか */
    /* 参考サイトのように、コンテンツ部分も背景になじませるなら透明に */
    .hentry {
        background: rgba(255, 255, 255, 0.0); /* 完全透明 */
        /* 文字が読みにくければ 0.8 くらいで半透明の白を入れる */
    }
}

.widget_nav_menu li{
	border-top: 0px solid rgba(51, 51, 51, 0.1);
	padding: 0;}

/* ウィジェットメニューのリンクスタイル */
.widget_nav_menu ul.menu li a {
    /* 1. リンクをブロック要素にして横幅いっぱいに広げる */
    display: block;
    
    /* 2. 文字をセンター揃え */
    text-align: center;
    font-weight: bold;
    
    /* 3. 上下の余白（高さを出す） */
    padding: 15px 0;
    
    /* 4. 下に点線を入れる */
    border-bottom: 2px dotted #aaaaaa;
    
    /* 余計な左の余白や装飾をリセット */
    padding-left: 0;
    box-shadow: none;
    text-decoration: none;
}

/* 一番上の項目の上にも点線を入れる場合 */
.widget_nav_menu ul.menu li:first-child a {
    border-top: 2px dotted #aaaaaa;
}

/* （オプション）マウスを乗せた時の色を変える */
.widget_nav_menu ul.menu li a:hover {
    color: #888; /* 好みの色に変更してください */
    background-color: #f9f9f9; /* 背景を少し変えるなど */
}


/* =========================================
   スマホメニューのデザイン（画面幅955px以下）
   ========================================= */
@media screen and (max-width: 59.6875em) {

    /* --- メニューリストのスタイル --- */
    .widget_nav_menu ul.menu li a {
        /* 前回のセンター揃えを「左揃え」に戻す */
        text-align: left !important;
        
        /* リンク全体をクリックしやすくし、余白を調整 */
        display: block;
        padding: 15px 40px 15px 10px; /* 右側の余白を多めにとって矢印と重ならないようにする */
        
        /* 矢印を配置するための基準点にする */
        position: relative;
        
        /* 点線の色や太さ（お好みで調整してください） */
        border-bottom: 1px dotted #ccc;
        text-decoration: none;
        font-weight: bold; /* 文字を少し太くする */
    }

    /* PC用に入れていた一番上の点線をスマホでは消す（お好みで） */
    .widget_nav_menu ul.menu li:first-child a {
        border-top: none;
    }

    /* --- 右端の矢印（→）を追加 --- */
    /* テーマ内蔵のアイコンフォントを使います */
    .widget_nav_menu ul.menu li a::after {
        content: '\f431'; /* 右矢印のアイコンコード */
        font-family: 'Genericons'; /* Twenty Fifteen内蔵フォント */
        
        /* 位置の調整（右端に絶対配置） */
        position: absolute;
        right: 15px; /* 右端からの距離 */
        top: 50%;
        transform: translateY(-50%); /* 上下中央揃え */
        
        /* 色とサイズ */
        color: #5cb85c; /* 画像のような緑色 */
        font-size: 18px;
    }

    /* --- （オプション）メニューエリア全体の背景色 --- */
    /*
    #secondary {
        background-color: #f4f8fb;
    }
    */
}
.site-branding{
	text-align: center;
}
.custom-logo {
       
        /* サイズの微調整（必要に応じて） */
        width: 100px; /* 横幅を指定 */
        text-align: center;
        margin: 0 auto -24px;}


/* スマホ表示（画面幅955px以下）の時だけロゴを差し替える */
@media screen and (max-width: 59.6875em) {
    .custom-logo {
        /* ▼ここに横長画像のURLを入れてください */
        content: url('https://kitaurara.jp/kitaurara/wp-content/uploads/2025/12/logoyoko.png');
        
        /* サイズの微調整（必要に応じて） */
        width: 200px; /* 横幅を指定 */
        height: auto; /* 高さは自動 */
        object-fit: contain;
    }
}



/* 装飾 */

/* --- 見出しの基本デザイン --- */

.sftitle h4, .sftitle2 h4 {
	
    position: relative;     /* 矢印などを配置する基準 */
    padding: 15px 0;        /* 文字上下の余白 */
    margin-bottom: 30px;    /* 下の要素との距離 */
    
    font-size: 20px;        /* 文字サイズ */
    font-weight: bold;      /* 太字 */
    color: #333!important;            /* 文字色 */
    
    /* 全体に引かれる薄い下線（水色っぽいグレー） */
    border-bottom: 5px solid #90b0bf;
}

/* --- 右端の濃い緑色の下線 --- */
.sftitle h4::after, .sftitle2 h4::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;           /* 薄い下線の太さと同じ分だけ下にずらす */
    width: 80px;            /* 濃い線の長さ */
    height: 5px;            /* 濃い線の太さ */
    background-color: #129ce1; /* 色 */
}

/* --- 右端の矢印（→） --- */
.sftitle h4::before {
    content: '\f431';       /* 矢印アイコンのコード */
    font-family: 'Genericons';
    
    position: absolute;
    right: 25px;            /* 右端からの距離（緑線の中央あたりに来るように） */
    top: 50%;
    transform: translateY(-65%); /* 上下中央揃えの微調整 */
    
    color: #129ce1;         /* 矢印の色（緑線と同じ） */
    font-size: 24px;        /* 矢印の大きさ */
    line-height: 1;
}

.sftitle2 h4::before {
    content: '\f430';       /* 矢印アイコンのコード */
    font-family: 'Genericons';
    
    position: absolute;
    right: 25px;            /* 右端からの距離（緑線の中央あたりに来るように） */
    top: 50%;
    transform: translateY(-65%); /* 上下中央揃えの微調整 */
    
    color: #129ce1;         /* 矢印の色（緑線と同じ） */
    font-size: 24px;        /* 矢印の大きさ */
    line-height: 1;
}



/* リンク（aタグ）のクリック範囲をh4全体に拡張する */
.sftitle h4 a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 矢印や下線より手前に配置してクリックを受け止める */
}

/* 念のためリンク自体の文字色や下線をリセット */
.sftitle h4 a {
    text-decoration: none;
    color: inherit;
}

/* =========================================
   トップページ：お知らせ2件表示エリア
   ========================================= */

/* 全体の枠組み */
.news-section-wrapper {
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between;
    width: 100%;
    padding: 0px 0;
    font-family: "Noto Sans", sans-serif; /* サイトのフォントに合わせる */
}

/* --- 左側：記事リストエリア --- */
.news-list-area {
    flex: 1; /* 横幅いっぱいに広げる */
    padding-right: 40px; /* 右のボタンとの余白 */
}

/* 個別の記事リンク */
.news-item-link {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 0px none !important; /* テーマの線を消す */
}
/* 2件目の上部に余白を開ける（必要であれば） */
.news-item-link + .news-item-link {
    margin-top: 0px;
}

/* ホバー時の挙動 */
.news-item-link:hover .news-title {
    text-decoration: underline;
    opacity: 0.8;
}

/* 日付のデザイン */
.news-date {
    color: #5cb85c; /* 緑色 */
    font-weight: bold;
    font-size: 18px;
    margin-right: 20px;
    white-space: nowrap; /* 日付を折り返さない */
    font-family: sans-serif; /* 数字をすっきり見せる */
}

/* タイトルのデザイン */
.news-title {
    font-size: 16px;
    line-height: 1.3;
}

/* --- 右側：すべて見るボタンエリア --- */
.news-btn-area {
    position: relative;
    padding-left: 40px; /* 線との距離 */
    white-space: nowrap;
}

/* 縦の点線（PCのみ） */
.news-btn-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    border-left: 2px dotted #ccc;
}

/* ボタンのリンク全体 */
.view-all-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    border-bottom: none !important;
}

/* 「すべて見る」の文字 */
.view-all-text {
    margin-right: 15px;
    font-size: 14px;
}

/* 緑の丸い矢印アイコン */
.view-all-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #eaa10e;
    border-radius: 50%;
    position: relative;
    transition: background-color 0.3s;
}

/* 矢印（CSSで描画） */
.view-all-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ボタンホバー時 */
.view-all-link:hover .view-all-icon {
    background-color: #3d8b4d; /* 少し濃くする */
}


/* =========================================
   スマホ・タブレット用レスポンシブ (955px以下)
   ========================================= */
@media screen and (max-width: 59.6875em) {
    
    /* 縦並びにする */
    .news-section-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 左側のリストエリア */
    .news-list-area {
        padding-right: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 記事ごとのスタイル調整 */
    .news-item-link {
        flex-wrap: wrap; /* タイトルが長ければ折り返す */
    }
    
    .news-date {
        font-size: 16px;
        margin-bottom: 5px; /* スマホでは日付とタイトルが近すぎないように */
    }

    /* 右側のボタンエリア（下に来る） */
    .news-btn-area {
        width: 100%;
        padding-left: 0;
        text-align: right; /* 右寄せにする */
        display: flex;
        justify-content: flex-end;
    }

    /* 縦の点線を消す */
    .news-btn-area::before {
        display: none;
    }
    
    /* ボタンの文字サイズ調整 */
    .view-all-text {
        font-size: 14px;
    }
}

/* sakanaクラスのアニメーション設定 */
.sakana {
    /* アニメーション名: yurayura */
    /* 時間: 3秒かけて動く */
    /* 動き方: ease-in-out（滑らかに） */
    /* 回数: infinite（無限に繰り返す） */
    /* 往復: alternate（行って戻ってを繰り返す） */
    animation: yurayura 1s ease-in-out infinite alternate;
}

/* 動きの定義 */
@keyframes yurayura {
    0% {
        transform: translateY(0); /* 開始位置 */
    }
    100% {
        transform: translateY(-15px); /* 上に15px動く */
    }
}

/* 動画の親枠（ここを基準にする） */
.dot-video .e-hosted-video {
    position: relative; /* オーバーレイを絶対配置するための基準 */
    display: block;     /* 隙間防止 */
}

/* 網点（ドット）のオーバーレイ */
.dot-video .e-hosted-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ▼ドットの模様（黒いドット） */
    /* 0.3 を変えると色の濃さが変わります */
/*     background-image: radial-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px); */
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    
    /* ▼ドットの間隔（密度） */
    /* 4px 4px を 3px 3px にすると細かくなります */
    background-size: 4px 4px;
    
    /* 動画の上に重ねる */
    z-index: 5;
    
    /* クリックを動画に通す（再生ボタンなどがある場合に重要） */
    pointer-events: none;
}



/* スマホ（767px以下）の時、動画の高さと幅を調整 */
@media screen and (max-width: 767px) {
	
    
    /* 1. ウィジェット自体の幅を画面いっぱいに強制する */
    .dot-video.elementor-widget-video, .dot-video2.elementor-widget-video {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    /* 2. 動画の比率（高さ）を決める箱 */
    .dot-video .elementor-wrapper, .dot-video2 .elementor-wrapper {
        width: 100% !important; /* 横幅は常に最大 */
        
        /* ▼ここの％を変えて「高さ」だけを調整してください */
        /* 177% = 9:16（かなり縦長） */
        /* 130% = 少し抑えめ */
        /* 100% = 正方形 */
        padding-bottom: 130% !important; 
        
        height: 0 !important;
    }

    /* 3. 動画本体を枠に合わせてトリミング */
    .dot-video .elementor-video, .dot-video2 .elementor-video {
        object-fit: cover !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}

.ms-slide-info{

}

.ms-info{
	padding: 0 0 0 18px;
	color: #333;
}

@media screen and (min-width: 59.6875em){
.site-info {
padding: 5% 0 0 0;
}
}


/* スライダー画像の角を丸くする */
#MS69463cb1c407d {
    border-radius: 20px !important; /* 角丸のサイズ */
    overflow: hidden !important;    /* 角からはみ出た画像を切り取る */
    
    /* Safari等のブラウザで角丸が効かない場合の対策 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    z-index: 1;
}


.ms-nav-prev{
	left:0;
}


.site-footer {
	padding: 2% 0 32px 0;
	margin: 32px 0 0 0;
	text-align: center;
	height: 400px;
background: url('https://kitaurara.jp/kitaurara/wp-content/uploads/2025/12/footbg.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: none;
width: 100%;
}

/* スマホ（767px以下）の時、動画の高さと幅を調整 */
@media screen and (max-width: 767px) {
	.site-footer {
	padding: 12% 0 0 0;}
}


/* Master Sliderを囲んでいる親要素にクラス名（例: .hero-slider-wrapper）をつけて指定 */
.hero-slider-wrapper {
    width: 100%;
    /* スライダーの比率に合わせて数値を指定してください */
    /* 例：16:9 の場合 */
    aspect-ratio: 3 / 2;
    
    /* 読み込み前でも高さが確保されるので、ガタつきがなくなります */
    overflow: hidden; 
}