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

/*royalgardenのCSS*/

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

/**ヘッダーの背景色 ここから**/
/*.l-fixHeader:before, .p-spMenu__inner::before{background: linear-gradient(135deg, #d9b36a 0%, #f8f2d6 45%, #ffffff 50%, #f8f2d6 55%, #d9b36a 100%);}*/
nav#gnav, .c-gnav {
    font-weight: 700;
}
.l-header__bar.pc_{display: none;}

/*PCのヘッダーメニューにマウスホバー下際の下線の位置調整*/
.c-gnav>.menu-item>a:after {
    bottom: 20%;
}
.c-gnav>.menu-item>a:hover{
/*color:#e6d166;*/
color: #ddb962;
transition: all 0.3s ease;
}

.-body-solid .l-fixHeader, [data-scrolled=true] [data-spfix="1"] .l-header__inner{
    border-bottom: 4px solid #d9b36a;
}

/*スマホ開閉メニューの「MENU」の文字の背景色*/
.c-widget__title.-spmenu{
    background: linear-gradient(135deg, #d9b36a 0%, #f8f2d6 45%, #ffffff 50%, #f8f2d6 55%, #d9b36a 100%);
    color: #000!important;
}
/**ヘッダーの背景色 ここまで**/

@media screen and (max-width: 599px){
    .page-id-10 .l-mainContent__inner>.post_content{
        margin-top: -2.3rem!important;
    }
    .p-mainVisual{
        z-index: 10!important;
    }
}
h1.c-pageTitle{display: none;}
div#breadcrumb{z-index: 10;}
@media screen and (min-width: 600px){
   .page-id-153 .l-mainContent__inner>.post_content{
        margin-top: -4rem!important;
    } 
}
@media screen and (max-width: 599px){
    .page-id-153 .l-mainContent__inner>.post_content {
    margin-top: -2rem;
}
}
/*.top-section-02 {
    background: linear-gradient(-45deg, #462523 0%, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
}*/
#body_wrap {
    background: linear-gradient(135deg, #462523 0%, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #d9b36a 100%);
}

@media screen and (min-width: 600px){
    .pc-mar-left-5vw{margin-left: 5vw!important;}
    .pc-mar-left-7vw-right-m7rem {margin-left: 7vw !important;margin-right: -7vw !important;}
    .pc-mar-left-15vw{margin-left: 15vw!important;}
    .pc-pad-top-6rem{padding-top: 6rem!important;}
}
@media screen and (max-width: 599px){
    .sp-mar-bt-m2_3rem{margin-bottom: -2.3rem!important;}
    .sp-mar-bt-5rem{margin-bottom: 5rem!important;}
    .sp-mar-lr-0_5rem{margin-left: 0.5rem!important;margin-right: 0.5rem!important;}

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


/*****縦型スライダー ここから*****/
/* 縦型スライダーのサイズ設定 */
.myVerticalSlider {
  width: 100%;
  max-width: 400px; /* 縦長写真の横幅に合わせて調整 */
  height: 640px!important;    /* ★重要：縦スライドには高さの指定が必須です */
  margin: 0 auto;
}

.myVerticalSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせて画像を切り抜く設定 */
  /*border-radius: 8px;*/ /* 角丸にする場合 */
}

/* ページネーションの色をゴールド系にする（サイトの雰囲気に合わせる） */
.myVerticalSlider .swiper-pagination-bullet-active {
  background: #c5a059;
}
/*****縦型スライダー ここまで*****/


/*****横型スライダー ここから*****/
/* 横スライダー全体のサイズ */
.myHorizontalSlider {
  width: 100%;
  max-width: 400px; /* 縦長写真に合わせた横幅 */
  height: auto;     /* 高さは自動、または固定（例：600px） */
  margin: 0 auto;
}

.myHorizontalSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*border-radius: 8px;*/
}

/* 左右の矢印の色をゴールドにする（サイトに合わせて調整） */
.myHorizontalSlider .swiper-button-next,
.myHorizontalSlider .swiper-button-prev {
  color: #c5a059;
}
/*****横型スライダー ここまで*****/





.relative{position: relative!important;}


/**トップページのスライダーのバライラスト ここから**/
.top-slider{
  width: 100%;
  max-width: 400px; /* 縦長写真の横幅に合わせて調整 */
  height: 640px!important;    /* ★重要：縦スライドには高さの指定が必須です */
  margin: 0 auto;
  position: relative!important; 
}
img.pc-top-bara-01 {
    position: absolute;
    top: -8%;
    left: -10%;
    z-index: 1;
    width: 30%;
}
img.pc-top-bara-02 {
    position: absolute;
    bottom: -5%;
    right: -10%;
    z-index: 1;
    width: 30%;
}
.pc-top-bara-03 img {
    position: fixed;
    top: 15%!important; /* 画面中央付近に固定（お好みで調整） */
    left: 12%;
    width: 12%; /* 画像サイズ */
    z-index: 1;
    display: none; /* 最初は隠しておく */
    pointer-events: none; /* クリックを透過させる（SEO・ユーザビリティ配慮） */
}
img.pc-top-bara-05{
    position: absolute;
    top: -6%;
    left: -7%;
    z-index: 1;
    width: 35%;
}
img.sp-top-bara-01 {
    position: absolute;
    top: -6%;
    left: -4%;
    z-index: 1;
    width: 25%;
}
img.sp-top-bara-02 {
    position: absolute;
    bottom: 20%;
    right: -4%;
    z-index: 1;
    width: 30%;
}
img.sp-top-bara-05 {
    position: absolute;
    top: -4%;
    left: -4%;
    z-index: 1;
    width: 35%;
}
/**トップページのスライダーのバライラスト ここまで**/

@media screen and (min-width: 600px){
    .pc-fs-1_5rem{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 599px){
    .sp-fs-1_5rem{
        font-size: 1.5rem;
    }
}

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





/*****ボタンのデザイン ここから*****/
.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);
}
/*****ボタンのデザイン ここまで*****/