@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


/* ========== 記事内ページ送りのPrev/Nextボタン スタイル (20251014追記) ========== */

/* @keyframes shake-y は完全に削除します */

/* ボタン全体を横並びにするコンテナ */
.custom-prev-next-container {
    display: flex; 
    gap: 10px;    
    
    /* ボタンが折り返さないようにする */
    flex-wrap: nowrap; 
    
    /* スマホ画面に合わせてマージンを設定 */
    margin: 30px 5px 30px 15px; 
    justify-content: center; 
}

/* 個々のボタンの共通スタイル */
.custom-nav-button {
    display: inline-flex; 
    align-items: center;
    justify-content: center; /* PrevとNextのテキストを中央に揃える */
    
    /* 縦幅を固定 */
    height: 64px; 
    padding: 0 15px; /* 左右の余白を少し増やしました */
    
    color: #ffffff; 
    font-size: 24px; /* Prevボタンのサイズ */
    font-weight: bold;
    text-decoration: none; 
    border-radius: 4px; 
    
    /* クリック時の沈み込みに備え、transitionを設定 */
    transition: all 0.1s ease; 
    
    position: relative; 
    z-index: 1; 
}

/* Prevボタンのスタイル (グレー) */
.custom-nav-button.prev-button {
    background-color: #808080; 
    
    /* 立体的なボタンデザイン */
    box-shadow: 0 5px 0 #4f4f4f; 
    
    /* Prev: 比率 1 */
    flex-grow: 0.8; 
    flex-shrink: 0; 
    min-width: 80px; 
}

/* Prevボタンをクリックした時のスタイル */
.custom-nav-button.prev-button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #4f4f4f;
}

/* Nextボタンのスタイル (ブルー) */
.custom-nav-button.next-button {
    background-color: #3498db; 
    
    /* 立体的なボタンデザイン */
    box-shadow: 0 5px 0 #2c3e50; 
    
    /* Next: 比率 2 (Prevの約2倍) */
    flex-grow: 2; 
    font-size: 28px; /* Nextボタンの文字サイズ */
}

/* Nextボタンをクリックした時のスタイル */
.custom-nav-button.next-button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #2c3e50;
}

/* マウスホバー時の不透明度を調整 */
.custom-nav-button:hover {
    opacity: 0.8;
}

/* 矢印のスペース調整（任意） */
.custom-nav-button .arrow {
    margin: 0 5px;
}