@charset "UTF-8";





/*
# =================================================================
# 汎用パーツのデザイン
# =================================================================
*/
.z9999{z-index:9999!important;}
.h200{height:200px!important;}
.h300{height:300px!important;}
.h400{height:400px!important;}
.h500{height:500px!important;}
.h600{height:600px!important;}
.h700{height:700px!important;}
.br_mob{display:none!important;}
.cover{object-fit:cover!important;}
.block{display:block!important;}

.flex_box001{display:flex;gap:1rem;}


.box_scroll{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 2rem;
position:relative;
width:100%;
padding:0;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
overflow-x: scroll;
white-space: nowrap;
box-sizing:border-box;
overflow-y:hidden;
}

.items_c{align-items: center;}
.items_b{align-items: end;}
.reverse{flex-direction:row-reverse!important;}
.gap05{gap:5px;}
.gap10{gap:10px;}
.gap15{gap:15px;}
.gap20{gap:20px;}
.gap25{gap:25px;}


.box_flex00{
display:flex;
}

.box_flex01{
display:flex;
flex-wrap : wrap;
justify-content:space-between;
}

.hr_design001{
	border:none;
	border-bottom:1px solid #ddd;
}



/* ========================================
   汎用ボックスデザイン集
   高級感とモダンさを兼ね備えた10種類
   ======================================== */
@charset "UTF-8";

/* ========================================
   Design 004: 横並びレイアウト（左画像）
   用途: 詳細説明、ストーリー性のあるコンテンツ
   ======================================== */
.box_design004 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3rem;
    background: linear-gradient(135deg, #F5F3E8 0%, #FFFFFF 50%, #F8F6EC 100%);
    padding: 3rem;
    margin: 3rem 0;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease;
}

.box_design004:hover {
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.08);
}

.box_design004 figure {
    flex: 0 0 45%;
    height: 360px;
    margin: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.box_design004:hover figure {
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.box_design004 figure::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--base01);
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.box_design004:hover figure::before {
    opacity: 1;
}

.box_design004 figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    transition: transform 0.6s ease;
}

.box_design004:hover figure img {
    transform: translate(-10px, -10px);
}

.box_design004_wrap {
    flex: 1;
}

.box_design004 h3 {
    writing-mode: vertical-rl;  /* 右から左へ縦書き */
    text-orientation: upright;   /* 文字を正立させる */	
    font-family: var(--font01);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #2A2824;
    margin: 0 0 1.5rem 0;
}

.box_design004_conts {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #2A2824;
}

/* 右画像バージョン */
.box_design004.reverse {
    flex-direction: row-reverse;
}

/* ========================================
   暗めバージョン（ダークトーン）
   ======================================== */
.box_design004.dark {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #252525 100%);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.box_design004.dark:hover {
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.box_design004.dark figure {
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.box_design004.dark:hover figure {
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.7),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

.box_design004.dark figure::before {
    border-color: var(--base03);
    opacity: 0.7;
}

.box_design004.dark:hover figure::before {
    opacity: 1;
}

.box_design004.dark h3 {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.box_design004.dark .box_design004_conts {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}







/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 768px) {
    /* 横並びを縦並びに */
    .box_design004 {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    
    .box_design004 figure {
        flex: none;
        width: 100%;
        height: 280px;
    }
    
    .box_design004.reverse {
        flex-direction: column;
    }
    
    .box_design004 h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .box_design004 {
        padding: 1.5rem 1rem;
        margin: 2rem 0;
    }
    
    .box_design004 figure {
        height: 240px;
    }
    
    .box_design004 h3 {
        font-size: 1.3rem;
    }
    
    .box_design004_conts {
        font-size: 0.95rem;
        line-height: 1.85;
    }
}

/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 768px) {
    /* 横並びを縦並びに */
    .box_design004 {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    
    .box_design004 figure {
        flex: none;
        width: 100%;
        height: 280px;
    }
    
    .box_design004.reverse {
        flex-direction: column;
    }
    
    .box_design004 h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .box_design004 {
        padding: 1.5rem 1rem;
        margin: 2rem 0;
    }
    
    .box_design004 figure {
        height: 240px;
    }
    
    .box_design004 h3 {
        font-size: 1.3rem;
    }
    
    .box_design004_conts {
        font-size: 0.95rem;
        line-height: 1.85;
    }
}


@charset "UTF-8";

/* ========================================
   背景デザイン集 - グラデーション＆パターン
   悠久の季 カラースキーム使用
   
   カラー定義:
   --base00: #000 (ブラック)
   --base01: #4698ac (ブルー)
   --base02: #dcd4ba (ベージュ)
   --base03: #db9f2c (オレンジ)
   --base04: #fff (ホワイト)
   ======================================== */

/* ========================================
   .bg001 - 海から夕日へのグラデーション
   用途: ヒーローセクション、トップコンテンツ
   ======================================== */
.bg001 {
    background: linear-gradient(
        135deg,
        var(--base00) 0%,
        #333 50%,
        var(--base02) 100%
    );
}

/* 透明度バージョン */
.bg001_alpha {
    background: linear-gradient(
        135deg,
        rgba(70, 152, 172, 0.9) 0%,
        rgba(91, 168, 184, 0.8) 50%,
        rgba(219, 159, 44, 0.9) 100%
    );
}


/* ========================================
   .bg002 - ラグジュアリーブラック
   用途: プレミアムセクション、特別プラン
   ======================================== */
.bg002 {
    background: linear-gradient(
        180deg,
        #000000 0%,
        #1a1a1a 50%,
        #2a2a2a 100%
    );
    position: relative;
}

.bg002::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(70, 152, 172, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(219, 159, 44, 0.06) 0%, transparent 40%);
    pointer-events: none;
}


/* ========================================
   .bg003 - 和風ベージュ
   用途: コンセプト、温泉、お食事セクション
   ======================================== */
.bg003 {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--base02) 50%,
        #e8e0c8 100%
    );
}

/* パターン付きバージョン */
.bg003_pattern {
    background: 
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--base02) 50%,
            #e8e0c8 100%
        );
    position: relative;
}

.bg003_pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(0, 0, 0, 0.02) 35px,
            rgba(0, 0, 0, 0.02) 70px
        );
    pointer-events: none;
}



/* ========================================
   Box More - 開閉コンテンツ（汎用）
   ======================================== */

.box_more {
    margin: 2rem 0;
}

/* 開閉ボタン */
.box_more_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: var(--font01);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #2A2824;
    background: transparent;
    border: 1px solid #2A2824;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.box_more_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #2A2824;
    transition: left 0.3s ease;
    z-index: -1;
}

.box_more_btn::after {
    content: '＋';
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.box_more_btn:hover {
    color: #fff;
    border-color: #2A2824;
}

.box_more_btn:hover::before {
    left: 0;
}

/* 開いた状態 */
.box_more_btn.active::after {
    content: '－';
    transform: rotate(180deg);
}

.box_more_btn.active {
    color: #fff;
    background: #2A2824;
}

.box_more_btn.active::before {
    left: 0;
}

/* コンテンツエリア */
.box_more_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    padding: 0 1rem;
}

.box_more_content.active {
    max-height: 2000px; /* 十分な高さを確保 */
    opacity: 1;
    padding: 1.5rem 1rem 0;
}

.box_more_content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #2A2824;
    margin: 0 0 1rem;
}

.box_more_content p:last-child {
    margin-bottom: 0;
}

/* ========================================
   バリエーション - アンダーライン版
   ======================================== */

.box_more.underline .box_more_btn {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0;
    background: transparent;
}

.box_more.underline .box_more_btn::before {
    display: none;
}

.box_more.underline .box_more_btn:hover,
.box_more.underline .box_more_btn.active {
    border-bottom-color: var(--base01);
    background: transparent;
    color: var(--base01);
}


/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {
    .box_more_btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .box_more_content {
        padding: 0 0.5rem;
    }
    
    .box_more_content.active {
        padding: 1rem 0.5rem 0;
    }
    
    .box_more_content p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .box_more_btn {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }
}






/* ========================================
   ラグジュアリーテキストエフェクト
   ======================================== */

/* ========================================
   2. 文字分割フェードイン
   使い方: <h2 class="char-fade">テキスト</h2>
   ======================================== */
.char-fade {
    display: inline-block;
}

.char-fade .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(-90deg);
    transform-origin: 50% 100%;
    transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.char-fade.animate .char {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* 文字ごとに遅延 */
.char-fade .char:nth-child(1) { transition-delay: 0.05s; }
.char-fade .char:nth-child(2) { transition-delay: 0.1s; }
.char-fade .char:nth-child(3) { transition-delay: 0.15s; }
.char-fade .char:nth-child(4) { transition-delay: 0.2s; }
.char-fade .char:nth-child(5) { transition-delay: 0.25s; }
.char-fade .char:nth-child(6) { transition-delay: 0.3s; }
.char-fade .char:nth-child(7) { transition-delay: 0.35s; }
.char-fade .char:nth-child(8) { transition-delay: 0.4s; }
.char-fade .char:nth-child(9) { transition-delay: 0.45s; }
.char-fade .char:nth-child(10) { transition-delay: 0.5s; }
.char-fade .char:nth-child(11) { transition-delay: 0.55s; }
.char-fade .char:nth-child(12) { transition-delay: 0.6s; }
.char-fade .char:nth-child(13) { transition-delay: 0.65s; }
.char-fade .char:nth-child(14) { transition-delay: 0.7s; }
.char-fade .char:nth-child(15) { transition-delay: 0.75s; }
.char-fade .char:nth-child(16) { transition-delay: 0.8s; }
.char-fade .char:nth-child(17) { transition-delay: 0.85s; }
.char-fade .char:nth-child(18) { transition-delay: 0.9s; }
.char-fade .char:nth-child(19) { transition-delay: 0.95s; }
.char-fade .char:nth-child(20) { transition-delay: 1s; }

/* ========================================
   6. ブラーフェードイン
   使い方: <h2 class="blur-fade">テキスト</h2>
   ======================================== */
.blur-fade {
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.95);
    transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blur-fade.animate {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* 遅延バージョン（複数要素を順番に） */
.blur-fade.delay-1 { transition-delay: 0.2s; }
.blur-fade.delay-2 { transition-delay: 0.4s; }
.blur-fade.delay-3 { transition-delay: 0.6s; }
.blur-fade.delay-4 { transition-delay: 0.8s; }

/* ========================================
   7. フォーカスイン（カメラのピント調整風）
   使い方: <h2 class="focus-in">テキスト</h2>
   ======================================== */
.focus-in {
    opacity: 0;
    filter: blur(30px) brightness(1.3);
    transform: scale(1.05);
    transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.focus-in.animate {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
	transition: all 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* より劇的な効果 */
.focus-in.dramatic {
    filter: blur(50px) brightness(1.5) contrast(1.2);
}

.focus-in.dramatic.animate {
    filter: blur(0) brightness(1) contrast(1);
}

/* ========================================
   8. ブラー＋上昇移動（エレガント）
   使い方: <h2 class="blur-up">テキスト</h2>
   ======================================== */
.blur-up {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(40px);
    transition: all 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.blur-up.animate {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ゆっくりバージョン（より高級感） */
.blur-up.slow {
    transition-duration: 2.5s;
}

/* 左右からのバージョン */
.blur-left {
    opacity: 0;
    filter: blur(15px);
    transform: translateX(-60px);
    transition: all 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.blur-left.animate {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.blur-right {
    opacity: 0;
    filter: blur(15px);
    transform: translateX(60px);
    transition: all 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.blur-right.animate {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

/* ========================================
   9. ダブルブラーエフェクト（奥行きのあるぼかし）
   使い方: <div class="double-blur">
              <h2>テキスト</h2>
           </div>
   ======================================== */
.double-blur {
    position: relative;
    display: inline-block;
}

.double-blur > * {
    position: relative;
    z-index: 2;
    opacity: 0;
    filter: blur(25px);
    transform: scale(0.9);
    transition: all 1.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 背景のぼかし層 */
.double-blur::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    filter: blur(40px);
    transform: scale(1.2);
    color: rgba(91, 187, 204, 0.3);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
}

.double-blur.animate > * {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.double-blur.animate::before {
    opacity: 0.5;
    filter: blur(60px);
    transform: scale(1.5);
}

/* ========================================
   10. 段階的ブラーフェード
   使い方: <div class="blur-gradient">
              <h2>テキスト</h2>
           </div>
   ======================================== */
.blur-gradient {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.blur-gradient > * {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px) scale(0.95);
    transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* グラデーションマスク */
.blur-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transform: translateY(-100%);
    transition: all 1.5s ease-in-out;
    z-index: 1;
}

.blur-gradient.animate > * {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.blur-gradient.animate::before {
    opacity: 1;
    transform: translateY(100%);
}
/* ========================================
   11. ソフトフォーカス（光が広がる感じ）
   使い方: <h2 class="soft-focus">テキスト</h2>
   ======================================== */
.soft-focus {
    position: relative;
    opacity: 0;
    filter: blur(25px) brightness(1.4);
    transform: scale(0.92);
    text-shadow: 0 0 40px rgba(255, 255, 255, 0);
    transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.soft-focus.animate {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
    text-shadow: 
        0 0 20px rgba(91, 187, 204, 0.3),
        0 0 40px rgba(91, 187, 204, 0.2),
        0 0 60px rgba(232, 148, 65, 0.1);
}

/* ゴールドバージョン */
.soft-focus.gold {
    color: #F4E5B8;
}

.soft-focus.gold.animate {
    text-shadow: 
        0 0 20px rgba(212, 175, 55, 0.4),
        0 0 40px rgba(212, 175, 55, 0.3),
        0 0 60px rgba(212, 175, 55, 0.2);
}
/* ========================================
   12. ディープブラー（極端なぼかしから）
   使い方: <h2 class="deep-blur">テキスト</h2>
   ======================================== */
.deep-blur {
    opacity: 0;
    filter: blur(50px) saturate(0);
    transform: scale(0.85) translateZ(0);
    transition: all 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.deep-blur.animate {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1) translateZ(0);
}

/* よりドラマチックなバージョン */
.deep-blur.ultra {
    filter: blur(80px) saturate(0) brightness(1.5);
}

.deep-blur.ultra.animate {
    filter: blur(0) saturate(1) brightness(1);
}
/* ========================================
   Table Design 001 - モダンシンプル
   ======================================== */
.table_design001 {
    margin: 2rem 0;
    overflow-x: auto;
}

.table_design001 table {
    width: 100%;
    border-collapse: collapse;
	border:none;
}

.table_design001 th,
.table_design001 td:first-child{
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #6B6660;
    border: none;
 border-bottom: 1px solid var(--base02);	
}

.table_design001 td {
	border:none;
    padding: 1.125rem 1.5rem;
    font-size: 0.95rem;
    color: #2A2824;
    background: #FFFFFF;
    border-bottom: 1px solid var(--base02);
}

.table_design001 tbody tr {
    transition: all 0.2s ease;
}

.table_design001 tbody tr:hover {
    background: #FAFAF8;
}

.table_design001 tbody tr:hover td {
    border-top-color: transparent;
}

.table_design001 .price {
    text-align: right;
    font-weight: 500;
    color: #2A2824;
}
/* ========================================
   Table Design 002 - ミニマルライン
   ======================================== */

.table_design002 {
    margin: 2rem 0;
    overflow-x: auto;
}

.table_design002 table {
    width: 100%;
    border-collapse: collapse;
}

.table_design002 th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #999;
    background: transparent;
    border-bottom: 1px solid #E8E5D8;
    text-transform: uppercase;
}

.table_design002 td {
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
    color: #2A2824;
    border-bottom: 1px solid #F5F3E8;
}

.table_design002 tr:last-child td {
    border-bottom: none;
}

.table_design002 tbody tr:hover {
    background: #FAFAF8;
}

.table_design002 .price {
    text-align: right;
    font-weight: 500;
}

/* ========================================
   Table Design 003 - クリーンモダン
   ======================================== */

.table_design003 {
    margin: 2rem 0;
    overflow-x: auto;
}

.table_design003 table {
    width: 100%;
    border-collapse: collapse;
    background: #FAFAF8;
}

.table_design003 th {
    padding: 1rem 2rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2A2824;
    background: #F5F3E8;
    border: none;
}

.table_design003 td {
    padding: 1.25rem 2rem;
    font-size: 0.95rem;
    color: #2A2824;
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #F5F3E8;
}

.table_design003 tr:last-child td {
    border-bottom: none;
}

.table_design003 .price {
    text-align: right;
    font-weight: 500;
    color: var(--base01);
}

/* ========================================
   Table Design 004 - エアリーシンプル
   ======================================== */

.table_design004 {
    margin: 2rem 0;
    overflow-x: auto;
}

.table_design004 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table_design004 th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #999;
    background: transparent;
    border-bottom: 2px solid #F5F3E8;
}

.table_design004 td {
    padding: 1.5rem 1.5rem;
    font-size: 0.95rem;
    color: #2A2824;
    border-bottom: 1px solid #FAFAF8;
}

.table_design004 tr:last-child td {
    border-bottom: none;
}

.table_design004 tbody tr {
    transition: background 0.2s ease;
}

.table_design004 tbody tr:hover {
    background: rgba(245, 243, 232, 0.3);
}

.table_design004 .price {
    text-align: right;
    font-weight: 500;
}

/* ========================================
   Table Design 005 - フラットモダン（推奨）
   ======================================== */

.table_design005 {
    margin: 2rem 0;
    overflow-x: auto;
}

.table_design005 table {
    width: 100%;
    border-collapse: collapse;
}

.table_design005 th,
.table_design005 td:first-child{
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #6B6660;
    background: #FAFAF8;
    border: none;
}

.table_design005 td {
    padding: 1.125rem 1.5rem;
    font-size: 0.95rem;
    color: #2A2824;
    background: #FFFFFF;
    border-top: 1px solid #F5F3E8;
}

.table_design005 tbody tr {
    transition: all 0.2s ease;
}

.table_design005 tbody tr:hover {
    background: #FAFAF8;
}

.table_design005 tbody tr:hover td {
    border-top-color: transparent;
}

.table_design005 .price {
    text-align: right;
    font-weight: 500;
    color: #2A2824;
}



/* ========================================
   共通：強調・ハイライト
   ======================================== */

.table_design001 .highlight,
.table_design002 .highlight,
.table_design003 .highlight,
.table_design004 .highlight,
.table_design005 .highlight {
    font-weight: 600;
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {
    .table_design001 th,
    .table_design001 td,
    .table_design002 th,
    .table_design002 td,
    .table_design003 th,
    .table_design003 td,
    .table_design004 th,
    .table_design004 td,
    .table_design005 th,
    .table_design005 td {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 600px) {
    /* 2カラムレイアウトを維持 */
    .table_design001 th,
    .table_design001 td,
    .table_design002 th,
    .table_design002 td,
    .table_design003 th,
    .table_design003 td,
    .table_design004 th,
    .table_design004 td,
    .table_design005 th,
    .table_design005 td {
        padding: 0.75rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .table_design001 th,
    .table_design002 th,
    .table_design003 th,
    .table_design004 th,
    .table_design005 th {
        font-size: 0.75rem;
    }
}



/* ========================================
   UL Design 001 - モダンラグジュアリー
   ======================================== */

.ul_design001 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design001 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul_design001 li {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
    border-bottom: 1px solid rgba(232, 229, 216, 0.5);
    transition: all 0.3s ease;
}

.ul_design001 li:last-child {
    border-bottom: none;
}

.ul_design001 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 8px;
    height: 1px;
    background: var(--base01);
    transition: width 0.3s ease;
}

.ul_design001 li:hover {
    padding-left: 2.5rem;
    color: #1a1a1a;
}

.ul_design001 li:hover::before {
    width: 16px;
}

/* ========================================
   UL Design 002 - ミニマルドット
   ======================================== */

.ul_design002 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design002 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul_design002 li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
}

.ul_design002 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 4px;
    height: 4px;
    background: var(--base01);
    border-radius: 50%;
}

/* ========================================
   UL Design 003 - エレガントライン
   ======================================== */

.ul_design003 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design003 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #E8E5D8;
}

.ul_design003 li {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
}

.ul_design003 li::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 1.5rem;
    width: 10px;
    height: 1px;
    background: var(--base01);
}

.ul_design003 li::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 1.3rem;
    width: 5px;
    height: 5px;
    background: #FFFFFF;
    border: 1px solid var(--base01);
    border-radius: 50%;
}

/* ========================================
   UL Design 004 - クリーンスペース
   ======================================== */

.ul_design004 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design004 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ul_design004 li {
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
    background: #FAFAF8;
    transition: all 0.3s ease;
}

.ul_design004 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background 0.3s ease;
}

.ul_design004 li:hover {
    background: #F5F3E8;
}

.ul_design004 li:hover::before {
    background: var(--base01);
}

/* ========================================
   UL Design 005 - フラットモダン（推奨）
   ======================================== */

.ul_design005 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design005 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul_design005 li {
    position: relative;
    padding: 0.875rem 0 0.875rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
}

.ul_design005 li::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0.875rem;
    font-size: 0.875rem;
    color: var(--base01);
    font-weight: 300;
}

/* ========================================
   UL Design 006 - ナンバリングラグジュアリー
   ======================================== */

.ul_design006 {
    margin: 2rem 0;
    padding: 0;
    counter-reset: luxury-counter;
}

.ul_design006 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul_design006 li {
    position: relative;
    padding: 1rem 0 1rem 3rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #2A2824;
    counter-increment: luxury-counter;
    border-bottom: 1px solid rgba(232, 229, 216, 0.3);
}

.ul_design006 li:last-child {
    border-bottom: none;
}

.ul_design006 li::before {
    content: counter(luxury-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--base01);
}

/* ========================================
   UL Design 007 - グリッドチェック
   ======================================== */

.ul_design007 {
    margin: 2rem 0;
    padding: 0;
}

.ul_design007 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.ul_design007 li {
    position: relative;
    padding: 0.75rem 0 0.75rem 2rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2A2824;
    background: #FAFAF8;
}

.ul_design007 li::before {
    content: '✓';
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    font-size: 1rem;
    color: var(--base01);
}

/* ========================================
   Strong要素のスタイル（全デザイン共通）
   ======================================== */

.ul_design001 strong,
.ul_design002 strong,
.ul_design003 strong,
.ul_design004 strong,
.ul_design005 strong,
.ul_design006 strong,
.ul_design007 strong {
    font-weight: 600;
    color: #1a1a1a;
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {
    .ul_design001 li,
    .ul_design002 li,
    .ul_design003 li,
    .ul_design004 li,
    .ul_design005 li,
    .ul_design006 li,
    .ul_design007 li {
        font-size: 0.875rem;
    }
    
    .ul_design007 ul {
        grid-template-columns: 1fr;
    }
}


.label_yellow{
font-weight:bold;
    background:linear-gradient(transparent 60%, #ff6 60%);
}

.bdr,.bdr_gray{ border: 1px solid #ccc; }/*灰*/
.bdr_red{ border: 1px solid #e00000; }/*赤*/
.bdr_blue{ border: 1px solid #0329ce; }/*青*/
.bdr_green{ border: 1px solid #01995e; }/*緑*/
.bdr_yellow{ border: 1px solid #ffe400; }/*黄*/
.bdr_navy{ border: 1px solid #133d94; }/*紺*/
.bdr_orange{ border: 1px solid #eca100; }/*橙*/
.bdr_pink{ border: 1px solid #eb67b5; }/*ピンク*/
.bdr_lime{ border: 1px solid #2abe0d; }/*黄緑*/
.bdr_aqua{ border: 1px solid #0baedd; }/*水色*/
.bdr_black{ border: 1px solid #000; }/*黒*/

/*角丸*/
.bdr_r4{ border-radius: 4px; }
.bdr_r8{ border-radius: 8px; }
.bdr_12{ border-radius: 12px; }

/*文字の横位置*/
.al_l{ text-align: left!important; }
.al_r{ text-align: right!important; }
.al_c{ text-align: center!important; }
.al_f{ display: flex;justify-content: center;align-items: center;text-align:left;}
.al_j{ text-align: justify!important;;}
.al_o{ text-align: left!important;display:inline-block!important;}
.al_t{ margin: auto!important;display:table!important;}
/*使い方：<p class="al_c"><span class="al_o">ここに左寄せ中央配置したいテキスト</span></p>*/
/*使い方：<div class="al_t"><p>ここに左寄せ中央配置したいテキスト</p><p>ここに左寄せ中央配置したいテキスト</p></div>*/
/*文字の縦位置*/
.vl_t{ vertical-align: top!important; }/*上寄せ*/
.vl_m{ vertical-align: middle!important; }/*中央寄せ*/
.vl_b{ vertical-align: bottom!important; }/*下寄せ*/


.bdr_box{box-sizing: border-box;}
.hidden{overflow: hidden;}



/*周りのブロックからの距離（margin）*/

.m_auto{ margin-left: auto !important; margin-right: auto !important;}


.m-50_t{ margin-top: -50px!important; }/*上からのmarginを0に*/
.m-50_r{ margin-right: -50px!important; }/*右からのmarginを0に*/
.m-50_b{ margin-bottom: -50px!important; }/*下からのmarginを0に*/
.m-50_l{ margin-left: -50px!important; }/*左からのmarginを0に*/

.m-100_t{ margin-top: -100px!important; }/*上からのmarginを0に*/
.m-100_r{ margin-right: -100px!important; }/*右からのmarginを0に*/
.m-100_b{ margin-bottom: -100px!important; }/*下からのmarginを0に*/
.m-100_l{ margin-left: -100px!important; }/*左からのmarginを0に*/

.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0_t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0_r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0_b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0_l{ margin-left: 0!important; }/*左からのmarginを0に*/

.m5{ margin: 5px!important; }
.m5_t{ margin-top: 5px!important; }
.m5_r{ margin-right: 5px!important; }
.m5_b{ margin-bottom: 5px!important; }
.m5_l{ margin-left: 5px!important; }

.m10{ margin: 10px!important; }
.m10_t{ margin-top: 10px!important; }
.m10_r{ margin-right: 10px!important; }
.m10_b{ margin-bottom: 10px!important; }
.m10_l{ margin-left: 10px!important; }

.m15{ margin: 15px!important; }
.m15_t{ margin-top: 15px!important; }
.m15_r{ margin-right: 15px!important; }
.m15_b{ margin-bottom: 15px!important; }
.m15_l{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.m20_t{ margin-top: 20px!important; }
.m20_r{ margin-right: 20px!important; }
.m20_b{ margin-bottom: 20px!important; }
.m20_l{ margin-left: 20px!important; }

.m25{ margin: 25px!important; }
.m25_t{ margin-top: 25px!important; }
.m25_r{ margin-right: 25px!important; }
.m25_b{ margin-bottom: 25px!important; }
.m25_l{ margin-left: 25px!important; }

.m30{ margin: 30px!important; }
.m30_t{ margin-top: 30px!important; }
.m30_r{ margin-right: 30px!important; }
.m30_b{ margin-bottom: 30px!important; }
.m30_l{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.m40_t{ margin-top: 40px!important; }
.m40_r{ margin-right: 40px!important; }
.m40_b{ margin-bottom: 40px!important; }
.m40_l{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.m50_t{ margin-top: 50px!important; }
.m50_r{ margin-right: 50px!important; }
.m50_b{ margin-bottom: 50px!important; }
.m50_l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60_t{ margin-top: 60px!important; }
.m60_r{ margin-right: 60px!important; }
.m60_b{ margin-bottom: 60px!important; }
.m60_l{ margin-left: 60px!important; }

.m70{ margin: 70px!important; }
.m70_t{ margin-top: 70px!important; }
.m70_r{ margin-right: 70px!important; }
.m70_b{ margin-bottom: 70px!important; }
.m70_l{ margin-left: 70px!important; }

.m80{ margin: 80px!important; }
.m80_t{ margin-top: 80px!important; }
.m80_r{ margin-right: 80px!important; }
.m80_b{ margin-bottom: 80px!important; }
.m80_l{ margin-left: 80px!important; }

.m90{ margin: 90px!important; }
.m90_t{ margin-top: 90px!important; }
.m90_r{ margin-right: 90px!important; }
.m90_b{ margin-bottom: 90px!important; }
.m90_l{ margin-left: 90px!important; }

.m100{ margin: 100px!important; }
.m100_t{ margin-top: 100px!important; }
.m100_r{ margin-right: 100px!important; }
.m100_b{ margin-bottom: 100px!important; }
.m100_l{ margin-left: 100px!important; }

.m120{ margin: 120px!important; }
.m120_t{ margin-top: 120px!important; }
.m120_r{ margin-right: 120px!important; }
.m120_b{ margin-bottom: 120px!important; }
.m120_l{ margin-left: 120px!important; }

.m150{ margin: 150px!important; }
.m150_t{ margin-top: 150px!important; }
.m150_r{ margin-right: 150px!important; }
.m150_b{ margin-bottom: 150px!important; }
.m150_l{ margin-left: 150px!important; }

.m200{ margin: 200px!important; }
.m200_t{ margin-top: 200px!important; }
.m200_r{ margin-right: 200px!important; }
.m200_b{ margin-bottom: 200px!important; }
.m200_l{ margin-left: 200px!important; }

.m300{ margin: 300px!important; }
.m300_t{ margin-top: 300px!important; }
.m300_r{ margin-right: 300px!important; }
.m300_b{ margin-bottom: 300px!important; }
.m300_l{ margin-left: 300px!important; }


/*周りのブロックからの距離（padding）*/
.p0{ padding: 0!important; }
.p0_t{ padding-top: 0!important; }
.p0_r{ padding-right: 0!important; }
.p0_b{ padding-bottom: 0!important; }
.p0_l{ padding-left: 0!important; }

.p5{ padding: 5px!important; }
.p5_t{ padding-top: 5px!important; }
.p5_r{ padding-right: 5px!important; }
.p5_b{ padding-bottom: 5px!important; }
.p5_l{ padding-left: 5px!important; }

.p10{ padding: 10px!important; }
.p10_t{ padding-top: 10px!important; }
.p10_r{ padding-right: 10px!important; }
.p10_b{ padding-bottom: 10px!important; }
.p10_l{ padding-left: 10px!important; }

.p15{ padding: 15px!important; }
.p15_t{ padding-top: 15px!important; }
.p15_r{ padding-right: 15px!important; }
.p15_b{ padding-bottom: 15px!important; }
.p15_l{ padding-left: 15px!important; }

.p20{ padding: 20px!important; }
.p20_t{ padding-top: 20px!important; }
.p20_r{ padding-right: 20px!important; }
.p20_b{ padding-bottom: 20px!important; }
.p20_l{ padding-left: 20px!important; }

.p25{ padding: 25px!important; }
.p25_t{ padding-top: 25px!important; }
.p25_r{ padding-right: 25px!important; }
.p25_b{ padding-bottom: 25px!important; }
.p25_l{ padding-left: 25px!important; }

.p30{ padding: 30px!important; }
.p30_t{ padding-top: 30px!important; }
.p30_r{ padding-right: 30px!important; }
.p30_b{ padding-bottom: 30px!important; }
.p30_l{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.p40_t{ padding-top: 40px!important; }
.p40_r{ padding-right: 40px!important; }
.p40_b{ padding-bottom: 40px!important; }
.p40_l{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.p50_t{ padding-top: 50px!important; }
.p50_r{ padding-right: 50px!important; }
.p50_b{ padding-bottom: 50px!important; }
.p50_l{ padding-left: 50px!important; }

.p60{ padding: 60px!important; }
.p60_t{ padding-top: 60px!important; }
.p60_r{ padding-right: 60px!important; }
.p60_b{ padding-bottom: 60px!important; }
.p60_l{ padding-left: 60px!important; }

.p70{ padding: 70px!important; }
.p70_t{ padding-top: 70px!important; }
.p70_r{ padding-right: 70px!important; }
.p70_b{ padding-bottom: 70px!important; }
.p70_l{ padding-left: 70px!important; }

.p80{ padding: 80px!important; }
.p80_t{ padding-top: 80px!important; }
.p80_r{ padding-right: 80px!important; }
.p80_b{ padding-bottom: 80px!important; }
.p80_l{ padding-left: 80px!important; }

.p90{ padding: 90px!important; }
.p90_t{ padding-top: 90px!important; }
.p90_r{ padding-right: 90px!important; }
.p90_b{ padding-bottom: 90px!important; }
.p90_l{ padding-left: 90px!important; }

.p100{ padding: 100px!important; }
.p100_t{ padding-top: 100px!important; }
.p100_r{ padding-right: 100px!important; }
.p100_b{ padding-bottom: 100px!important; }
.p100_l{ padding-left: 100px!important; }


/*周りのブロックからの距離（margin）*/
.m10_5_t{ margin-top: 10px!important; }
.m20_10_t{ margin-top: 20px!important; }
.m30_15_t{ margin-top: 30px!important; }
.m40_20_t{ margin-top: 40px!important; }
.m50_25_t{ margin-top: 50px!important; }
.m60_30_t{ margin-top: 60px!important; }
.m70_35_t{ margin-top: 70px!important; }
.m80_40_t{ margin-top: 80px!important; }
.m90_45_t{ margin-top: 90px!important; }
.m100_50_t{ margin-top: 100px!important; }
.m120_60_t{ margin-top: 120px!important; }
.m140_70_t{ margin-top: 140px!important; }
.m160_80_t{ margin-top: 160px!important; }
.m180_90_t{ margin-top: 180px!important; }
.m200_100_t{ margin-top: 200px!important; }
.m300_150_t{ margin-top: 300px!important; }
.m400_200_t{ margin-top: 400px!important; }

.m10_5_b { margin-bottom: 10px!important; }
.m20_10_b { margin-bottom: 20px!important; }
.m30_15_b { margin-bottom: 30px!important; }
.m40_20_b { margin-bottom: 40px!important; }
.m50_25_b { margin-bottom: 50px!important; }
.m60_30_b { margin-bottom: 60px!important; }
.m70_35_b { margin-bottom: 70px!important; }
.m80_40_b { margin-bottom: 80px!important; }
.m90_45_b { margin-bottom: 90px!important; }
.m100_50_b { margin-bottom: 100px!important; }
.m120_60_b { margin-bottom: 120px!important; }
.m140_70_b { margin-bottom: 140px!important; }
.m160_80_b { margin-bottom: 160px!important; }
.m180_90_b { margin-bottom: 180px!important; }
.m200_100_b { margin-bottom: 200px!important; }
.m300_150_b { margin-bottom: 300px!important; }
.m400_200_b { margin-bottom: 400px!important; }






/*フォントの装飾*/
.b{font-weight: bold!important; }/*太字*/
.normal{ font-weight: normal!important; }/*太字を解除*/




/*フォントサイズの設定*/

.f06em{ font-size: 0.6em!important; }
.f08em{ font-size: 0.8em!important; }
.f09em{ font-size: 0.9em!important; }
.f10em{ font-size: 1.0em!important; }
.f11em{ font-size: 1.1em!important; }
.f12em{ font-size: 1.2em!important; }
.f13em{ font-size: 1.3em!important; }
.f14em{ font-size: 1.4em!important; }
.f15em{ font-size: 1.5em!important; }
.f16em{ font-size: 1.6em!important; }
.f17em{ font-size: 1.7em!important; }
.f18em{ font-size: 1.8em!important; }
.f19em{ font-size: 1.9em!important; }
.f20em{ font-size: 2.0em!important; }
.f21em{ font-size: 2.1em!important; }
.f22em{ font-size: 2.2em!important; }
.f23em{ font-size: 2.3em!important; }
.f24em{ font-size: 2.4em!important; }
.f25em{ font-size: 2.5em!important; }
.f26em{ font-size: 2.6em!important; }
.f27em{ font-size: 2.7em!important; }
.f28em{ font-size: 2.8em!important; }
.f29em{ font-size: 2.9em!important; }
.f30em{ font-size: 3.0em!important; }

.f08rem{ font-size: 0.8rem!important; }
.f09rem{ font-size: 0.9rem!important; }
.f10rem{ font-size: 1.0rem!important; }
.f11rem{ font-size: 1.1rem!important; }
.f12rem{ font-size: 1.2rem!important; }
.f13rem{ font-size: 1.3rem!important; }
.f14rem{ font-size: 1.4rem!important; }
.f15rem{ font-size: 1.5rem!important; }
.f16rem{ font-size: 1.6rem!important; }
.f17rem{ font-size: 1.7rem!important; }
.f18rem{ font-size: 1.8rem!important; }
.f19rem{ font-size: 1.9rem!important; }
.f20rem{ font-size: 2.0rem!important; }
.f21rem{ font-size: 2.1rem!important; }
.f22rem{ font-size: 2.2rem!important; }
.f23rem{ font-size: 2.3rem!important; }
.f24rem{ font-size: 2.4rem!important; }
.f25rem{ font-size: 2.5rem!important; }
.f26rem{ font-size: 2.6rem!important; }
.f27rem{ font-size: 2.7rem!important; }
.f28rem{ font-size: 2.8rem!important; }
.f29rem{ font-size: 2.9rem!important; }
.f30rem{ font-size: 3.0rem!important; }

.f08px{ font-size: 8px!important; }
.f10px{ font-size: 10px!important; }
.f11px{ font-size: 11px!important; }
.f12px{ font-size: 12px!important; }
.f13px{ font-size: 13px!important; }
.f14px{ font-size: 14px!important; }
.f15px{ font-size: 15px!important; }
.f16px{ font-size: 16px!important; }
.f17px{ font-size: 17px!important; }
.f18px{ font-size: 18px!important; }
.f19px{ font-size: 19px!important; }
.f20px{ font-size: 20px!important; }
.f21px{ font-size: 21px!important; }
.f22px{ font-size: 22px!important; }
.f23px{ font-size: 23px!important; }
.f24px{ font-size: 24px!important; }



/*フォントの色設定*/
.red{ color: #e00000!important; }/*赤*/
.blue{ color: #0329ce!important; }/*青*/
.green{ color: #01995e!important; }/*緑*/
.yellow{ color: #ffe400!important; }/*黄*/
.navy{ color: #133d94!important; }/*紺*/
.orange{ color: #eca100!important; }/*橙*/
.pink{ color: #eb67b5!important; }/*ピンク*/
.purple{ color: #9940d2!important; }/*紫*/
.olive{ color: #9bb814!important; }/*オリーブ*/
.lime{ color: #2abe0d!important; }/*黄緑*/
.aqua{ color: #0baedd!important; }/*水色*/
.black{ color: #000!important; }/*黒*/
.gray{ color: #999!important; }/*灰*/
.white{ color: #fff!important; }/*白*/
.brown{ color: #4b1c1c!important; }/*茶*/


/*行間の設定*/
.lh10{ line-height: 1.0!important; }
.lh11{ line-height: 1.1!important; }
.lh12{ line-height: 1.2!important; }
.lh13{ line-height: 1.3!important; }
.lh14{ line-height: 1.4!important; }
.lh15{ line-height: 1.5!important; }
.lh16{ line-height: 1.6!important; }
.lh17{ line-height: 1.7!important; }
.lh18{ line-height: 1.8!important; }
.lh19{ line-height: 1.9!important; }
.lh20{ line-height: 2.0!important; }

/*テキスト間隔*/
.ls1px {letter-spacing:1px!important; }
.ls2px {letter-spacing:2px!important; }
.ls3px {letter-spacing:3px!important; }
.ls4px {letter-spacing:4px!important; }
.ls5px {letter-spacing:5px!important; }
.ls6px {letter-spacing:6px!important; }
.ls7px {letter-spacing:7px!important; }
.ls8px {letter-spacing:8px!important; }
.ls9px {letter-spacing:9px!important; }
.ls10px {letter-spacing:10px!important; }
.ls15px {letter-spacing:15px!important; }
.ls20px {letter-spacing:20px!important; }
.ls25px {letter-spacing:25px!important; }
.ls30px {letter-spacing:30px!important; }
.ls35px {letter-spacing:35px!important; }



/*テーブル横幅を指定*/
.tw05{ width: 5%; }
.tw10{ width: 10%; }
.tw15{ width: 15%; }
.tw20{ width: 20%; }
.tw25{ width: 25%; }
.tw30{ width: 30%; }
.tw35{ width: 35%; }
.tw40{ width: 40%; }
.tw45{ width: 45%; }
.tw50{ width: 50%; }
.tw55{ width: 55%; }
.tw60{ width: 60%; }
.tw65{ width: 65%; }
.tw70{ width: 70%; }
.tw75{ width: 75%; }
.tw80{ width: 80%; }
.tw85{ width: 85%; }
.tw90{ width: 90%; }
.tw95{ width: 95%; }
.tw100{ width: 100%; }




/*横幅を指定*/
.w05{ width: 5%!important; }
.w10{ width: 10%!important; }
.w15{ width: 15%!important; }
.w16{ width: 16%!important; }
.w17{ width: 17%!important; }
.w18{ width: 18%!important; }
.w19{ width: 19%!important; }
.w20{ width: 20%!important; }
.w21{ width: 21%!important; }
.w22{ width: 22%!important; }
.w23{ width: 23%!important; }
.w24{ width: 24%!important; }
.w25{ width: 25%!important; }
.w30{ width: 30%!important; }
.w31{ width: 31%!important; }
.w32{ width: 32%!important; }
.w33{ width: 33%!important; }
.w35{ width: 35%!important; }
.w40{ width: 40%!important; }
.w45{ width: 45%!important; }
.w48{ width: 48%!important; }
.w49{ width: 49%!important; }
.w50{ width: 50%!important; }
.w55{ width: 55%!important; }
.w60{ width: 60%!important; }
.w65{ width: 65%!important; }
.w70{ width: 70%!important; }
.w75{ width: 75%!important; }
.w80{ width: 80%!important; }
.w85{ width: 85%!important; }
.w90{ width: 90%!important; }
.w95{ width: 95%!important; }
.w100{ width: 100%!important; }










@media
only screen and (max-width : 600px){


/*横幅を指定*/
.w05,
.w10,
.w15,
.w18,
.w20,
.w24,
.w25,
.w30,
.w31,
.w32,
.w33,
.w35,
.w40,
.w45,
.w48,
.w49,
.w50,
.w55,
.w60,
.w65,
.w70,
.w75,
.w80,
.w85,
.w90,
.w95,
.w100{ width: 100%!important; }



/*上下にモバイルとデスクトップで異なるサイズの余白を空ける*/
.m10_05_t { margin-top: 5px!important; }
.m20_10_t { margin-top: 10px!important; }
.m30_15_t { margin-top: 15px!important; }
.m40_20_t { margin-top: 20px!important; }
.m50_25_t { margin-top: 25px!important; }
.m60_30_t { margin-top: 30px!important; }
.m70_35_t { margin-top: 35px!important; }
.m80_40_t { margin-top: 40px!important; }
.m90_45_t { margin-top: 45px!important; }
.m100_50_t { margin-top: 50px!important; }
.m120_60_t { margin-top: 60px!important; }
.m140_70_t { margin-top: 70px!important; }
.m160_80_t { margin-top: 80px!important; }
.m180_90_t { margin-top: 90px!important; }
.m200_100_t { margin-top: 100px!important; }
.m300_150_t { margin-top: 150px!important; }
.m400_200_t { margin-top: 200px!important; }

.m10_05_b { margin-bottom: 5px!important; }
.m20_10_b { margin-bottom: 10px!important; }
.m30_15_b { margin-bottom: 15px!important; }
.m40_20_b { margin-bottom: 20px!important; }
.m50_25_b { margin-bottom: 25px!important; }
.m60_30_b { margin-bottom: 30px!important; }
.m70_35_b { margin-bottom: 35px!important; }
.m80_40_b { margin-bottom: 40px!important; }
.m90_45_b { margin-bottom: 45px!important; }
.m100_50_b { margin-bottom: 50px!important; }
.m120_60_b { margin-bottom: 60px!important; }
.m140_70_b { margin-bottom: 70px!important; }
.m160_80_b { margin-bottom: 80px!important; }
.m180_90_b { margin-bottom: 90px!important; }
.m200_100_b { margin-bottom: 100px!important; }
.m300_150_b { margin-bottom: 150px!important; }
.m400_200_b { margin-bottom: 200px!important; }


.br_mob{display:block!important;}



}


/*---------------------------------------------------------------------
generated by Keni Template Maker Ver.8.0 on 2018-11-28 11:44:44
----------------------------------------------------------------------*/