@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
.font-dela {
font-family: 'Dela Gothic One', sans-serif !important;
font-weight: 400;
}
body,html {
font-family: 'Murecho', "M PLUS 1", "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
h1 {
font-size: clamp(1.6em, 4vw, 2.4em);
font-family: 'Dela Gothic One', sans-serif !important;
inline-size: fit-content;
font-weight: normal!important;
letter-spacing: 0.1em;
}
h2 {
font-size: clamp(1.5em, 4vw, 1.8em);
color: #61492b !important;
font-family: 'Dela Gothic One', sans-serif !important;
font-weight: normal!important;
letter-spacing: 0.05em;
}
h3 {
font-size: clamp(1.3em, 4vw, 1.4em);
color: #61492b !important;
font-family: 'Dela Gothic One', sans-serif !important;
font-weight: normal!important;
letter-spacing: 0.05em;
}
/*************************************************
ページ全体（またはフェードさせたい要素）に適用
**************************************************/
body {
animation-name: fadeIn;
animation-duration: 1.2s; /* ふわっとする時間 */
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/* ふわっと表示させるアニメーションの内容 */
@keyframes fadeIn {
0% {
opacity: 0; /* 最初は透明 */
}
100% {
opacity: 1; /* 徐々に表示 */
}
}
/*************************************************
* トップページスライダー画像の位置調整（ヘッダを透過にするため）
**************************************************/
.home .swiper,
.home .main-visual,
.home .vk_slider {
margin-top: -100px !important;
padding-top: -100px !important;
}
/*スライダー画像の背景色（スライダーのすぐ下に別の色の背景カバーが存在するので）*/
.home .swiper, .home .main-visual, .home .vk_slider {
background-color: #667534 !important;
}
/*************************************************
* ヘッダーコンテナとヘッダートップを全幅
**************************************************/
.header-top .container,
.site-header-container {
width: 100% !important;
max-width: 100% !important;
}
/*************************************************
* サイトヘッダーの背景色とサイズ
**************************************************/
.site-header {/*下層ページ共通のグラデーション*/
background: linear-gradient(
to bottom,
rgba(8, 26, 0, 0.75) 0%,
rgba(8, 26, 0, 0) 100%
) !important;
background-color: rgba(102, 117, 52, 1) !important;
overflow: visible;
z-index: 1000;
position: relative;
min-height: 70px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0);
}
.home .site-header {/*とップページのみのグラデーション*/
background: linear-gradient(
to bottom,
rgba(0, 72, 145, 0.75) 0%,
rgba(0, 72, 145, 0) 100%
) !important;
background-color: rgba(102, 117, 52, 0) !important;
}
/* スクロール後 */
.header_scrolled .site-header {
background: linear-gradient(
to bottom,
rgba(8, 26, 0, 0.75) 0%,
rgba(8, 26, 0, 0) 100%
) !important;
background-color: rgba(102, 117, 52, 0.9) !important;
clear: both;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100vw;
min-height: 70px !important;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
animation: header_drop .5s ease-out 0s 1 alternate none running;
}
/*@media (max-width:1324px) {/* 画面幅が992px以下のときに適用される */
/*.header_scrolled .site-header,
.site-header {
min-height: 85px !important;
}*/
/*}*/
@media (max-width:992px){
.header_scrolled .site-header,
.site-header{
min-height: 60px !important;
}
}
/*************************************************
* ロゴ カスタマイズ
**************************************************/
.site-header-logo {
text-align: left !important;
padding: 0;
}
.site-header-logo img {
top: 8px;
left: 30px;
margin-right: 5px !important;
position: fixed !important;
max-height: 50px;
}
/*@media (max-width: 1324px) {
.site-header-logo img,
.header_scrolled .site-header img {
top:15px;
left: 20px;
}
}*/
@media (max-width: 992px) {
.site-header-logo img,
.header_scrolled .site-header img {
top: 10px;
left: 5x;
max-height: 40px;
}
}
@media (max-width: 640px) {
.site-header-logo img,
.header_scrolled .site-header img {
top: 8px;
left: 10px;
max-height: 40px;
}
}
/* スクロールしてもロゴが表示されるようにする */
.header_scrolled .site-header-logo {
display: none;
display: initial !important /* 上のnoneを打ち消している */
}
/*************************************************
* グローバルナビ カスタマイズ
**************************************************/
#global-nav {
margin-top: 5px;
margin-right: 140px;
}
@media (max-width: 992px) {
#global-nav {
display: none !important;
}
}
@media (max-width: 992x) {
body:not(.header_scrolled) .global-nav--layout--float-right {
display: none;
}
}
@media (max-width: 992px) {
.header_scrolled .site-header .global-nav {
display: none !important;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 992px) {
body.device-pc .vk-mobile-nav-menu-btn {
display: block;
}
}
@media (min-width: 993px) {
body.device-pc .vk-mobile-nav-menu-btn {
display: none;
}
}
@media (min-width: 992px) {
body.device-pc .vk-mobile-nav {
display: block;
}
}
/* グローバルナビの文字透過防止 */
#global-nav .global-nav {
opacity: 100% !important;
}
/* グローバルナビのカラー */
#global-nav {
color: #fff !important;
}
.device-pc .global-nav-list > li > a {
color: #fff !important;
}
/* グローバルナビの文字装飾 */
.global-nav-name {
font-size:14px !important;
font-weight: 500;
}
/* メニュー日本語の下の英字 */
.global-nav-list > li .global-nav-description {
font-weight: bold;
}
/* プルダウンメニューサイズ */
.global-nav-list>li>ul.sub-menu {
width: 130px !important;
margin-left: -65px;
}
/* プルダウンメニュー背景色 */
.global-nav .sub-menu {
background-color: #34250e !important; /* 背景色 */
overflow-y: hidden !important;
}
/* プルダウンの文字色 */
.global-nav .sub-menu a {
color: #fff !important;
text-align: center;
}
/* プルダウン ホバー時 */
.global-nav .sub-menu a:hover {
background-color: #667534 !important;
color: #fff !important;
}
/*******************************************************
* Instagramメニューの文字を消してアイコン化
* *****************************************************/
/* 外観＞メニューで「Instagram」を追加して、CSSオプション欄に「menu-instagram」と入力する
CSSオプションが表示されていない場合は、右上の表示オプションからCSSにチェックいれる。*/
/* Instagramメニュー */
.menu-instagram a {
width: 32px;
height: 32px;
display: inline-block;
position: relative;
overflow: hidden;
/* 文字を画面外へ飛ばす */
text-indent: -9999px;
white-space: nowrap;
}
/* Instagramアイコン表示 */
.menu-instagram a::before {
content: "\f16d";
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 24px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* アイコンは元の位置に戻す */
text-indent: 0;
line-height: 1;
}
/*************************************************
* ハンバーバーメニュー カスタマイズ
**************************************************/
/* ハンバーバーメニューの位置調整 */
.vk-mobile-nav {
padding-top: 70px !important;
background-color: #667534;
}
/* ボタン位置 */
.vk-mobile-nav-menu-btn {
position: fixed !important;
top: 23px !important;
right: 15px !important;
left: initial; /* leftを無効化 */
border: none !important;
}
@media (min-width: 993px) {
.vk-mobile-nav-menu-btn {
display: none;
}
}
@media (max-width: 992px) {
.vk-mobile-nav-menu-btn {
display: block !important;
top: 12px !important;
right: 3px !important;
}
}
/* ハンバーバーメニュー内 */
.vk-mobile-nav nav ul li {
list-style: none;
line-height: 1.65;
text-align: left;
}
.vk-mobile-nav nav > ul {
border-top: 1px solid #4c591f;
}
.vk-mobile-nav nav ul li a {
border-bottom: 1px solid #4c591f;
}
/* ハンバーガーボタン */
#vk-mobile-nav-menu-btn {
width: 40px;
height: 40px;
position: relative;
background: transparent;
border: none;
color: transparent; /* 元のMENU文字を隠す */
text-indent: -9999px;
overflow: visible;
}
/* 三本線 */
#vk-mobile-nav-menu-btn::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
width: 20px;
height: 2px;
background: #fff;
transform: translateX(-50%);
box-shadow:
0 7px 0 #fff,
0 14px 0 #fff;
}
/* メニューオープン時の × */
#vk-mobile-nav-menu-btn.menu-open::before,
#vk-mobile-nav-menu-btn.menu-open::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: #fff;
box-shadow: none;
}
#vk-mobile-nav-menu-btn.menu-open::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#vk-mobile-nav-menu-btn.menu-open::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* 表示されるスピード */
.vk-mobile-nav {
transition: all 1.0s ease !important;
}
/* プルダウンのボタンの色 */
.vk-menu-acc .acc-btn {
background-color: #fff;
border: 1px solid #fff !important;
}
/*************************************************
* 追従ボタン（2つ縦に並べる スマホも同じ）
**************************************************/
/*ウィジェットから「フッター上部」にカスタムhtmlを追加して
*下記を記述する（アイコンはお好みで）
★PC版はひとつだけ表示させる(クラスに「pc-none」を追加してある)
*/
/* ▼ PC表示（デフォルト） */
.fixed-buttons {
position: fixed !important;
top: 100px; /* ナビの下に来るように調整 */
right: 0px; /* 画面右端からの距離 */
display: flex !important;
flex-direction: column; /* 縦に並べる */
gap: 2px;
z-index: 10000;
}
.fixed-btn {
writing-mode: vertical-rl; /* 縦書き（右から左へ） */
text-orientation: upright; /* 文字を立てて表示 */
background: #f1d70c;
color: #34250e;
font-family:"Dela Gothic One";
padding: 20px 10px; /* 縦書き用に上下を広めに */
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
text-decoration: none;
text-align: center;
font-size: 110%;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
transition: background 0.3s;
}
@media (min-width:993px) { /* PC版には表示させない */
.pc-none {
display: none;
}
}
@media (max-width: 1024px) and (min-width:769px) {
.fixed-btn {
font-size: 90% !important;
}
}
.fixed-btn:hover {
background: #667534;
color:#f1d70c;
}
.swiper {
z-index: 0 !important;
}
.fixed-buttons .svg-inline--fa { /* アイコンが左寄りになるのを防ぐ*/
margin-left:5%;
}
/* ▼ スマホ表示（幅992px以下） */
@media (max-width: 992px) {
.fixed-buttons {
position: fixed;
bottom: 0; /* 画面下に固定 */
top: auto;
right: 0;
left: 0;
flex-direction: row; /* 横並びに切り替え */
justify-content: space-around;
padding: 0;
background: none;/* フッターっぽく背景をつける */
/*border-top: 1px solid #ccc;*/
}
.fixed-btn {
writing-mode: horizontal-tb; /* スマホでは横書きに */
text-orientation: mixed;
flex: 1; /* 幅を均等にする */
padding: 12px 0 12px 12px;
border-radius: 0;
background: #f1d70c;
font-size: 16px;
}
.page_top_btn { /*ページトップの位置調整*/
position: fixed;
right: 2%;
bottom: 70px;
}
/* コピーライトを上にずらす */
.site-footer-copyright p {
padding-bottom: 3rem !important/* 下に余白を作る */
}
.fixed-buttons .svg-inline--fa { /* アイコンが左寄りになるのを防ぐ*/
margin-left:0 !important;
}
}
/*************************************************
* フッター カスタマイズ
**************************************************/
/*ボーダー非表示*/
.site-footer {
text-align: center;
border-top: none !important;
}
/*背景色*/
.footer-nav {
background-color: #c38f43;
}
/*リンク色*/
.site-footer nav li a, nav li a {
color: #fff !important;
text-decoration: none;
}
/*ホバー時装飾*/
.site-footer nav li a:hover {
text-decoration: underline;
}
/* フッターメニュー余白調整 */
.site-footer-copyright p .nav li, nav li {
list-style: none;
line-height:1.6rem;
margin: 0 0 10px 0;
}
@media (max-width: 480px) {
.site-footer-copyright p {
font-size: 80%;
}
}
/* フッターメニュースマホでは非表示 */
@media (max-width: 1023px) {
.footer-nav {
display:none;
}
}
/* コピーライトのボックス*/
.site-footer {
background-color: #34250e;
color: #fff;
}
/* Powered by Lightning を非表示 */
.site-footer-copyright p:last-child {
display: none;
}
/* ページトップボタンを丸くする */
.page_top_btn {
width: 50px;
height: 50px;
border-radius: 50% !important;
background-color: #667534;
border: 2px solid #fff;
box-shadow: none;
}
/* ページトップ位置調整 */
.page_top_btn {
bottom: 10% !important;
}
/*************************************************
* 翻訳ボタンの位置調整
**************************************************/
/* GTranslate のサイズ・位置調整 */
.gt_switcher_wrapper {
position: fixed !important;
top: 20px !important;
right: 15px !important;
bottom: 5px !important; /* 数字は調整 */
z-index: 100000 !important;
height: 5px;
}
@media (max-width:992px) {
.gt_switcher_wrapper {
height: 10px !important;
right:46px !important;
top: 15px !important;}
}
select:where(:not([multiple]):not([size])) {
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M6 8L0 0h12z'/%3E%3C/svg%3E);
background-repeat: no-repeat;
background-position: right 1em center;
background-size: .75em .5em;
padding-right: 0.5em;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
font-size: 0.7rem;
border: 2px solid var(--vk-color-border-form);
border-radius: var(--vk-size-radius);
padding: .5em 0.5em;
margin: 0;
width: 100%;
color: var(--vk-color-text-body);
background-color: #fff;
}
/*/////////////////////////////////////////////////////
↓ここから HOMEコンテンツ内のスタイル
//////////////////////////////////////////////////////*/
/*************************************************
* 画像サイズ調整
**************************************************/
/* 画像サイズ */
.img410 { width: clamp(40%, 5vw, 100%); }
.img710 { width: clamp(70%, 5vw, 100%); }
.img810 { width: clamp(80%, 5vw, 100%); }
.img910 { width: clamp(90%, 5vw, 100%); }
/* 余白*/
.mglr32 { margin-inline: clamp(30px, 3vw, 20px) !important; }
.mglr10 { margin-inline: clamp(10px, 3vw, 0) !important; }
/*************************************************
* トップページ - タイトルとアイコン
**************************************************/
.homesection-title {
text-align: center;
}
.homesection-title img {
width: clamp(70px, 5vw, 150px)!important;
height: auto;
}
.homesection-title__en {
font-size: clamp(30px, 3vw, 42px)!important;
line-height: 0.7em;
margin-top: 20px !important;
}
.homesection-title__ja {
font-size: clamp(20px, 1.4vw, 20px) !important;
letter-spacing: .2em;
margin-top: -10px !important; /* PC */
}
@media (max-width: 768px) {
.homesection-title__ja {
margin-top: -15px !important; /* スマホ */
}
}
/*************************************************
* トップページ - キャンプサイト
*************************************************
.homecampsite {
width:100%;
}
.homecampsite .homecampsite__ph {
width: 100%;
}
.homecampsite .homecampsite__txt {
margin-top: clamp(10px, 1.4vw, 20px);
margin-right: clamp(10px, 1.4vw, 0);
margin-top: clamp(10px, 1.4vw, 20px);
margin-left: clamp(10px, 1.4vw, 0);
width: 500px !important;
}
@media (max-width: 1024px) {
.homecampsite .homecampsite__txt {
width: 100%; !important; スマホ
}
}*/
/*************************************************
* トップページ - プラン・イベント
**************************************************/
/* カラム全体 */
.plan-columns {
align-items: stretch;
}
/* 各カラム */
.plan-columns .wp-block-column {
display: flex;
flex-direction: column;
margin-bottom:clamp(10px, 3vh,30px);
}
/* 白いカード */
.plan-card {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
/* コンテンツ幅を100％に */
.plan-card > p,
.plan-card > h3 {
width: 100%;
}
/* カード内を縦並び */
.plan-card.is-layout-flow {
display: flex;
flex-direction: column;
}
/* 画像を下へ押し下げる */
.plan-card .wp-block-image:last-child {
margin-top: auto;
}
.plan-card h3 {
font-size:2em;
}
.plan-card p {
font-size: clamp(1em, 2vw, 0.8em);
}
/* 1260px以下 */
@media (max-width: 1260px) {
.plan-card{
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
}
.plan-card > .wp-block-column {
flex-basis: 100% !important;
margin-left: 0 !important;
}
}
@media (max-width: 1259px) and (min-width: 781px) {
.plan-columns .wp-block-column .vk_button_link_txt {
font-size: 0.7em;
}
.plan-card h3 {
font-size:1.2em;
}
}
@media (max-width: 780px) {
.plan-card h3 {
font-size:1.6em;
}
}
/*************************************************
* トップページ - 施設案内 metaslider 余白
**************************************************/
/* Flexslider */
#metaslider_596 {
margin: 0 0 -5px 0 !important;
}
#metaslider_596.flexslider {
margin: 0 0 -5px 0 !important;
}
/*************************************************
* トップページ - FUJIYAMAジャンボリービレッジ
**************************************************/
/* カラム全体 */
.footer-village {
align-items: stretch;
}
/* 各カラム */
.footer-village .wp-block-column {
display: flex;
flex-direction: column;
}
/* カード */
.village-card {
width: 100%;
flex: 1;
}
/* カード内を縦並び */
.village-card.is-layout-flow {
display: flex;
flex-direction: column;
}
.village-card h4 {
border-bottom: 1px dotted #fff;
padding-bottom: 10px;
margin-bottom:10px !important;
font-size: 1.4em;
}
@media (max-width: 1757px) and (min-width: 1261px) {
.village-card h4 {
font-size: 1.2em !important;
}
.village-card .wp-block-column .vk_button_link_txt {
font-size: 1em !important;
}
}
@media (max-width: 1260px) {
.footer-village.wp-block-columns {
flex-direction: column;
padding-left: 30px;
padding-right: 20px;
}
.footer-village.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
/*margin-left: 0 !important;*/
border-bottom: 1px dotted #fff;
padding-bottom: clamp(60px, 3vh, 80px)!important;
}
.village-card h4 {
border-bottom: none !important;
padding-bottom: 0px !important;
margin-bottom:0px !important;
}
}
@media (max-width: 992px) {
.footer-village.wp-block-columns {
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
}
@media (max-width: 768px) {
.footer-village.wp-block-columns {
flex-direction: column;
padding-left: 70px;
padding-right: 15px;
}
.village-card h3 {
font-size: 1.6em !important;
}
.village-card h4 {
font-size: 1.2em !important;
border-bottom: none !important;
padding-bottom: 0px !important;
margin-bottom:0px !important;
}
}
@media (max-width: 575px) {
.footer-village.wp-block-columns {
flex-direction: column;
padding-left: 40px;
padding-right: 10px;
}
}
/*************************************************
* トップページ - インスタ埋め込みの「Instagramでフォロー」ボタンの背景色の変更
**************************************************/
#sb_instagram .sbi_follow_btn a {
background: #d13695 !important;
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////
↓ここから 下層ページ
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*************************************************
* 下層ページ - ページタイトル背景に画像
**************************************************/
.page-header {
background-color: rgba(0, 0, 0, 0.5) !important;
/*background-image: url("https://asagiri-camp.net/wp/wp-content/uploads/2026/07/bg-pageheader-2.webp");*/
background-image: url("https://asagiri-camp.net/wp/wp-content/uploads/2026/07/bg-pageheader-2.webp");
background-size: cover; /* 全体に表示 */
background-position: right center; /* 中央配置 */
background-repeat: no-repeat;
height: 240px !important;
}
@media (max-width: 1260px) {
.page-header {
height: 180px !important;
}
}
@media (max-width: 991px) {
.page-header {
height: 130px !important;
}
}
/*文字装飾*/
.page-header-inner {
position: relative;
z-index: 5;
text-shadow: 2px 2px 2px #000;
margin: 3em auto;
}
@media (max-width: 991px) {
.page-header-inner h1 {
font-size: 1.8em !important;
}
}
/*************************************************
* 下層ページ - metaslider
**************************************************/
/* 下の余白 */
#metaslider-id-888 .flexslider {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#metaslider-id-888 .flexslider.flex-viewport {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#metaslider-id-888 .flex-pauseplay {
display: none !important;
}
/* MetaSliderのあらゆる背景を透明にする */
#metaslider-id-888 ,
#metaslider-id-888 .slides li,
#metaslider-id-888 .flexslider,
#metaslider-id-888 .flex-viewport {
background: transparent !important;
background-color: transparent !important;
}
/*************************************************
* 下層ページ - よくある質問
**************************************************/
/* Q の色 */
.vk_faq .vk_faq_title::before {
color: #bd6d54 !important;
}
/* A の色 */
.vk_faq .vk_faq_content::before {
color: #667534 !important;
}
/*************************************************
* 下層ページ - キャンプ予約の投稿埋め込み
**************************************************/
/* 記事タイトルのリンク色 */
/*.wp-block-latest-posts li > a:where(:not(:last-child)) {
color: #667534 !important;
font-weight:bold !important;
}*/
/* tableストライプの色変更 */
.wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1) {
background-color: #F1EBDD;
}
/*************************************************
* 投稿
**************************************************/
/* 記事タイトル位置 */
.page-header-title, h1.page-header-title {
text-align: left;
}
/*************************************************
* 画像拡大時の背景変更
**************************************************/
.wp-lightbox-overlay .scrim { /*背景色*/
background-color: #000 !important;
}
.wp-lightbox-close-button { /*閉じるボタン色*/
fill: #fff !important;
}
/*************************************************
* WordPressの基本tableのborder色
**************************************************/
.wp-block-table :is(table,thead,tbody,tfoot,th,td) {
border-color: #a2a395 !important;
}