@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
*/

/*---CLUB WAKA CSS---*/

@media screen and (min-width: 600px){
    .onsp{display: none;}
}
@media screen and (max-width: 599px){
    .onpc{display: none;}
}

/*サイト全体の背景 ここから*/
@media screen and (min-width: 600px){
#body_wrap {
    max-width: 100%;
    overflow-x: clip;
    position: relative;
    z-index: 1;
    background-image: url(https://club-waka.com/wp-content/uploads/2026/07/20260731-dairiseki-bg-01.webp);
    background-size: cover;
    background-attachment: fixed;
}
}
@media screen and (max-width: 599px){
/*↓のcssでスマホでもスクロール時の背景固定が可能*/
#body_wrap::before {
    content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(https://club-waka.com/wp-content/uploads/2026/07/20260731-dairiseki-bg-01.webp);
background-size:cover;
}
}
/*サイト全体の背景 ここまで*/
.l-header{
    background: transparent!important;
}
.l-fixHeader:before{
    background: rgba(255,255,255,0.5)!important;
}
.l-header__bar{
    display: none;
}
/*スマホの追従ヘッダーを少し透過
@media screen and (max-width: 599px){
    .l-header{opacity: 0.9;}
}*/
/*スマホの追従ヘッダーの背景色を変更*/
@media screen and (max-width: 599px){
[data-scrolled=false] [data-spfix="1"] .l-header__inner{
background: transparent!important;
}    
[data-scrolled=true] [data-spfix="1"] .l-header__inner{
background: rgba(255,255,255,0.5)!important;
}
.c-iconBtn__icon{color: #000!important;}
}

/*スマホ開閉メニューの「MENU」の文字の背景色*/
.c-widget__title.-spmenu{
    /*background: linear-gradient(135deg, #d9b36a 0%, #f8f2d6 45%, #ffffff 50%, #f8f2d6 55%, #d9b36a 100%);*/
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold; 
}
/*PCのヘッダーメニューにマウスホバー下際の下線の位置調整*/
.c-gnav>.menu-item>a:after {
    bottom: 20%;
}
.c-gnav, .p-spMenu__nav{
    font-weight: 700!important;
}
.c-gnav a::after{background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%)!important;}

.c-gnav > .-current > a, .c-gnav>.menu-item>a:hover{
font-size: 14px;
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;    
}

@media screen and (min-width: 600px){
.top-section-01{
    position: relative;
}
    .top-section-01-img-right {
    position: absolute;
    right: 10%;
    top: 20%;
    width: 45% !important;
}
.top-section-01-img-right-02{
position: absolute;
    right: 0%;
    top: 0%;
}
.top-section-01-img-left-02 {
    position: absolute;
    left: 10%;
    top: 8em;
    width: 45% !important;
    z-index: 10;
}
}
@media screen and (max-width: 599px){
    .top-section-01{
    position: relative;
    padding-bottom: 16em!important;
}
.top-section-01-img-left{
    position: absolute;
    left: -8%;
    width: 80% !important;
}
.top-section-01-img-right {
        position: absolute;
        right: -3%;
        top: 14em;
        width: 80% !important;
        z-index: 10;
    }
.top-section-01-img-left-02 {
    position: absolute;
    width: 80% !important;
    top: 14em;
    z-index: 10;
}
.top-section-01-img-right-02 {
    position: absolute;
    width: 80% !important;
    right: -8%;
}
}



/*-パディング・マージン ここから-*/
@media screen and (min-width: 600px){
    .pc-mar-left-2rem{margin-left: 2rem!important;}

    .pc-pad-top-4rem{padding-top:4rem!important;}
    .pc-pad-top-8rem{padding-top:8rem!important;}

    .pc-pad-bt-1_5rem{padding-bottom:1.5rem!important;}    
    .pc-pad-bt-4rem{padding-bottom:4rem!important;}
    .pc-pad-bt-8rem{padding-bottom:8rem!important;}
    .pc-pad-bt-12rem{padding-bottom:12rem!important;}
    .pc-pad-bt-20rem{padding-bottom:20rem!important;}
    .pc-pad-bt-45vw{padding-bottom: 45vw !important;}
}
@media screen and (max-width: 599px){
    .sp-mar-left-2rem{margin-left: 2rem!important;}
    .sp-pad-bt-1_5rem{padding-bottom:1.5rem!important;}
    .sp-mar-bt-2rem{margin-bottom: 2rem!important;}

    .sp-pad-top-4rem{padding-top:4rem!important;}
    .sp-pad-top-8rem{padding-top:8rem!important;}

    .sp-pad-bt-4rem{padding-bottom:4rem!important;}
    .sp-pad-bt-8rem{padding-bottom:8rem!important;}
    .sp-pad-bt-12rem{padding-bottom:12rem!important;}
    .sp-pad-bt-30rem{padding-bottom:30rem!important;}
    .sp-pad-bt-33rem{padding-bottom:33rem!important;}    
}
/*-パディング・マージン ここまで-*/

@media screen and (min-width: 600px){
    .top-message-title{
        text-align: right!important;
        padding-right: 2vw!important;
        font-size: 2rem!important;
    }
}
@media screen and (max-width: 599px){
    .top-message-title{font-size: 1.5rem!important;}
}

.center{text-align: center;}
@media screen and (min-width: 600px){
    .pc-fs-1_5rem{font-size: 1.5rem!important;}
    .pc-fs-2rem{font-size: 2rem!important;}
    .pc-center{text-align: center;}
    .pc-float-right{float: right!important;}
    .pc-float-left{float: left!important;}
}
@media screen and (max-width: 599px){
    .sp-fs-1_2rem{font-size: 1.2rem!important;}    
    .sp-fs-1_5rem{font-size: 1.5rem!important;}
    .sp-center{text-align: center;}
}


/*****ボタンのデザイン1 ここから*****/
.btn-gold {
    /* ボタンの形状と余白 */
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 14px;
    border-radius: 2px;
    
    /* 文字色：背景のゴールドに合わせて視認性の高い黒系 */
    color: #1a1a1a;
    
    /* 明るいゴールドのグラデーション（冒頭のイメージ再現） */
    background: linear-gradient(
        45deg,
        #d9b36a 0%,   /* 少し深みのある金 */
        #f8f2d6 45%,  /* 明るいシャンパンゴールド */
        #ffffff 50%,  /* 中心に強い光の反射 */
        #f8f2d6 55%,  /* 明るいシャンパンゴールド */
        #d9b36a 100%  /* 少し深みのある金 */
    );
    
    /* ボタンの縁取り（高級感を出す細いライン） */
    border: 1px solid #c5a059;
    
    /* 影をつけて少し浮かせる */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* 変化を滑らかにする */
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

/*スマホで中央揃え*/
@media screen and (max-width: 599px){
.btn-gold{
 display: table;
 margin:0 auto;   
}
}

/* ホバー（マウスを乗せた時）の演出 */
.btn-gold:hover {
    /* 少し明るくし、影を強くして浮き上がらせる */
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.4);
    transform: translateY(-2px);
}
/*****ボタンのデザイン1 ここまで*****/


/*****ボタンのデザイン2 ここから*****/
@media screen and (min-width: 600px){
.gold-btn-pattern2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 30px;
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
    border: 1px solid #C5A059;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    border-radius: 5px;
    height: 80%;
    width: 95%;
}
.oubohouhou-rich-column .swell-block-columns__inner {
    margin-left: 0;
}
.gold-btn-pattern3 {
        display: table;
        text-align: center;
        padding: 12px 30px;
        background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
        border: 1px solid #C5A059;
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        transition: all 0.3s ease;
        border-radius: 5px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 599px){
    .gold-btn-pattern2, .gold-btn-pattern3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 30px;
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
    border: 1px solid #C5A059;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    border-radius: 5px;
    margin: 0 auto 4em!important;
    width: 98%;
    height: 50px;
}
}
.gold-btn-pattern2:hover, .gold-btn-pattern3:hover {
  /* 背景を少し濃くして枠線を際立たせる */
  background: linear-gradient(45deg, #A07208 0%, #C89418 75%, #A07208 100%);
  /* 枠線を明るい金色に変更 */
  border-color: #FFF4D0;
  /* 枠線の周りにくっきりしたゴールドの影を配置 */
  box-shadow: 0 0 0 2px rgba(255, 244, 208, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
}
/*****ボタンのデザイン2 ここまで*****/





.page-id-116 h1.c-pageTitle, .page-id-239 h1.c-pageTitle{
    display: none;
}
@media screen and (min-width: 600px){
.page-id-116 .l-mainContent__inner>.post_content {
    margin-top: -6rem!important;
}
}
@media screen and (max-width: 599px){
.page-id-116 .l-mainContent__inner>.post_content {
    margin-top: -2rem!important;
}
}

.top-tel a {
    color: #000;
}
.top-tel i {
    font-size: 0.9rem;
}

.gs-message-title{
    font-size:2rem;
    color: #f1678b;
    font-weight: 700;
    line-height: 2.5rem;
}
@media screen and (min-width: 600px){
.gs-message-title:after {
    background: radial-gradient(circle farthest-side, #f1678b, #f1678b 30%, transparent 30%, transparent);
    background-size: 20px;
    content: '';
    display: inline-block;
    height: 20px;
    width: 88%;
}
}
@media screen and (max-width: 599px){
.gs-message-title:after {
    background: radial-gradient(circle farthest-side, #f1678b, #f1678b 30%, transparent 30%, transparent);
    background-size: 20px;
    content: '';
    display: inline-block;
    height: 20px;
    width: 100%;
}
}

.gs-access-title{
    font-size:2rem;
    color: #8ad4d2;
    font-weight: 700;
    line-height: 2.5rem;
}

.relative{
    position: relative!important;
}
@media screen and (min-width: 600px){
.mizutama-01 img {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 5%;
}
.mizutama-02 img {
    position: absolute;
    top: 20%;
    right: 0%;
    width: 5%;
}
.mizutama-03 img {
    position: absolute;
    bottom: 0%;
    left: 30%;
    width: 5%;
}
.mizutama-04 img {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 5%;
}
.kirakira-01 img {
        position: absolute;
        top: -10%;
        left: -5%;
        width: 5%;
    }
.kirakira-02 img {
        position: absolute;
        top: -35%;
        left: -2%;
        width: 2.5%;
    }
}

@media screen and (max-width: 599px){
.mizutama-01 img {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 15%;
}
.mizutama-02 img {
    position: absolute;
    top: 16%;
    right: 0%;
    width: 15%;
}
.mizutama-03 img {
    position: absolute;
    bottom: -7%;
    left: 0%;
    width: 15%;
}
    .mizutama-04 img {
    position: absolute;
    bottom: -8%;
    right: 0%;
    width: 15%;
}
.kirakira-01 img {
        position: absolute;
        top: -8%;
        left: -4%;
        width: 7%;
    }
.kirakira-02 img {
        position: absolute;
        top: -8%;
        left: -4%;
        width: 7%;
    }
}

.pink span{
color: #f1678b;
}

.access-column{
    background: #fff;
    padding: 0.5em!important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

@media screen and (min-width: 600px){
    .recruit-box{
            background: rgba(255, 255, 255, 0.5);
            padding: 2em!important;
            border-radius: 5px;
            border: 2px solid; /* 太さを指定（色は下で上書きされます） */
  border-image: linear-gradient(
    45deg,
    #B8860B 0%,   /* 暗いブロンズ */
    #FFD700 25%,  /* 明るい金 */
    #FFF8DC 50%,  /* ハイライト（白金） */
    #DAA520 75%,  /* 金 */
    #B8860B 100%  /* 暗いブロンズ */
  ) 1;
    }
}
@media screen and (max-width: 599px){
    .recruit-box{
            background: rgba(255, 255, 255, 0.5);
            padding: 2em 0.5em 2em!important;
            border-radius: 5px;
            border: 2px solid; /* 太さを指定（色は下で上書きされます） */
  border-image: linear-gradient(
    45deg,
    #B8860B 0%,   /* 暗いブロンズ */
    #FFD700 25%,  /* 明るい金 */
    #FFF8DC 50%,  /* ハイライト（白金） */
    #DAA520 75%,  /* 金 */
    #B8860B 100%  /* 暗いブロンズ */
  ) 1;
    }
}

@media screen and (min-width: 600px){
.recruit-table th {
    width: 30% !important;
    color: #333;
    background: transparent;
    padding-left: 6em;
}
.recruit-table th, .recruit-table td {
    border: 1px solid transparent;
    padding-bottom: 1.5em !important;
}
}
@media screen and (max-width: 599px){
  .recruit-table th {
    color: #333;
    background: transparent;
}
.recruit-table th, .recruit-table td {
    border: 1px solid transparent;
}
.recruit-table th {
    line-height: 0em;
    padding-bottom: 0 !important;
}
.recruit-table td{
   padding-bottom: 2em !important;
   padding-left: 2em !important;
}
}

h3.recruit-h3{
    color: #623E2D;
}
.post_content h3.recruit-h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(98, 62, 45, 1) 0%, rgba(98, 62, 45, 1) 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%)!important;
}


/*****リクルートボタンのデザイン ここから*****/
.btn-gold-recruit {
    /* ボタンの形状と余白 */
    display: table;
    margin: 0 auto;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 14px;
    border-radius: 2px;
    
    /* 文字色：背景のゴールドに合わせて視認性の高い黒系 */
    color: #1a1a1a;
    
    /* 明るいゴールドのグラデーション（冒頭のイメージ再現） */
    background: linear-gradient(
        45deg,
        #d9b36a 0%,   /* 少し深みのある金 */
        #f8f2d6 45%,  /* 明るいシャンパンゴールド */
        #ffffff 50%,  /* 中心に強い光の反射 */
        #f8f2d6 55%,  /* 明るいシャンパンゴールド */
        #d9b36a 100%  /* 少し深みのある金 */
    );
    
    /* ボタンの縁取り（高級感を出す細いライン） */
    border: 1px solid #c5a059;
    
    /* 影をつけて少し浮かせる */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* 変化を滑らかにする */
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

/*スマホで中央揃え*/
@media screen and (max-width: 599px){
.btn-gold-recruit{
 display: table;
 margin:0 auto;   
}
}

/* ホバー（マウスを乗せた時）の演出 */
.btn-gold-recruit:hover {
    /* 少し明るくし、影を強くして浮き上がらせる */
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.4);
    transform: translateY(-2px);
}
/*****リクルートボタンのデザイン ここまで*****/

@media screen and (min-width: 600px){
.pc-wid-50vw img {
    width: 50vw;
}
}

.futoji{
    font-weight: 700;
}

.gold-text{
    background: linear-gradient(45deg, #B8860B 0%, #DAA520 75%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold; 
}
ol.list-zikyuu {
    display: table;
    margin: 0 auto;
}

.system-table th,.system-table td{
    border: transparent;
    background: transparent;
    font-weight: 700;
    font-size: 1.2em;
}
.system-table tr.sub-title{
    border-bottom: 1px solid #000;
    font-size: 1.3em;
}
.system-table th{
    text-align: left;
}
.system-table td{
    text-align: right;
}
.system-table-under{
display: flex;
gap: 2em;
justify-content: center;
align-items: center;
font-size: 1.2em;
font-weight: 700;
}