/*
Theme Name: RDSGN ORIGINAL									
*/

.pc{display:none;}
.grecaptcha-badge { visibility: hidden; }
/**********************************************
    PC版 CSS
**********************************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');/*日本語明朝*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

.righteous {
  font-family: "Righteous", sans-serif;

  font-style: normal;
}


/**************************************************************
全体
**************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font: 500 16px/1.75 "Noto Sans JP", sans-serif;
    color: #000;
    text-align: left;
    letter-spacing: 0.05em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    font-size: 13px;
    margin: 0px;
    text-align: center;
    line-height: 180%;
}


/**************************************************************
リンク
**************************************************************/
a:link {
    color: #000;
    text-decoration: none;
	transition: 1.0s ;
}
a:visited {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: none;
}
a:active {
    color: #000;
    text-decoration: none;
}

.about-p{

}

.about-p h2{
	background-color:#000;
	padding:20px!important;
	font-size:20px!important;
	color:#fff!important;
	margin:0!important;
}

.about-mv{
	background-image: linear-gradient(rgba(0, 88, 171, 0.6), rgba(0, 88, 171, 0.6)), url(https://p-pata.com/pataweb/wp-content/themes/rdsgn/image/base/hbg.jpg);
	background-color: #0058ab;
	padding:15px;
	background-position: center;
	text-align:center;
}
.about-mv img{
	width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}

.about-p h3{
	font-size:16px;
	line-height:150%;
	padding:20px;
	color:#3e7dd2;
}

.about-p p{
	margin:0 auto;
	font-size:13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	padding:20px;
}

.about-p .link-botan{
	width:300px;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}

.about-p .link-botan a{
	background: #007cd8;
        color: #fff;
        background-image: url(https://p-pata.com/pataweb/wp-content/themes/rdsgn/image/base/hbg.jpg);
	padding:15px;
	display:block;
	border-radius:10px;

}

.about-p .link-botan a:hover{	transition: 1.0s ;
    opacity:0.7;}
.about-p .link-botan img{
	width:100%;
	height:auto;
	display:block;
}

.footer{
	margin-top:50px;
	padding:10px;
	background-color:#565656;
	color:#fff;
	font-size:11px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.footer p{
	margin-bottom:10px;
}

/*****************************************************
メインビジュアル
*************************************/

.mv{
  max-height:1000px;
  overflow:hidden;
  position:relative;
}

/* 暗いフィルター（背景だけ暗く・ロゴは暗くしない） */
.mv::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);        /* 濃さは .25〜.55 で調整 */
  z-index: 1;                         /* ロゴより下、背景より上 */
  pointer-events: none;               /* クリック阻害を防ぐ */
}
.mv .head{
	position:absolute;
	top:0;
	padding:15px;
	width:100%;
	box-sizing:border-box;
	justify-content:space-between;
	 z-index: 3;
}
.mv .head .logo{
	width:60%;
	margin:0 auto;
}
.mv .head .logo img{
	width:100%;
	height:auto;
}

.mv .m-logo{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%); /* どんなサイズでも中央に */
	 z-index: 2;
}
.mv .m-logo img{
	width:120px;
	height:auto;
}


/* スマホ版：ハンバーガー化（HTML改変なし） */
.awaji-navi{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1000;
  /* 触れる領域を少し広めに */
  width: 48px;
  height: 48px;
}

/* 三本線ボタン（擬似要素で描画） */
.awaji-navi::before,
.awaji-navi::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  /* クリックしやすい透明の当たり判定 */
  background: transparent;
}
.awaji-navi::before{
  /* 三本線 */
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 24px; height: 2px;
  background:#222;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -7px 0 #222,
    0  7px 0 #222;
}
/* 開いているときは × に見せる */
.awaji-navi:hover::before,
.awaji-navi:focus-within::before{
  width: 24px; height: 2px; background:#222;
  box-shadow:none;
  transform: translate(-50%, -50%) rotate(45deg);
}
.awaji-navi:hover::after,
.awaji-navi:focus-within::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:24px; height:2px;
  background:#222;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* リストをドロワー化（デフォルトは非表示） */
.awaji-navi ul{
  position: absolute;
  top: 52px;
  right: 0;
  width: min(86vw, 320px);
  max-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: 
    max-height .35s ease,
    opacity .25s ease,
    transform .25s ease;
}

/* 開いた状態 */
.awaji-navi:hover ul,
.awaji-navi:focus-within ul{
  max-height: calc(100dvh - 90px);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* リスト内スタイル（縦並び・タップしやすく） */
.awaji-navi li{
  list-style: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.awaji-navi li:last-child{ border-bottom: 0; }

.awaji-navi a{
  display: block;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.awaji-navi a:active{ background: rgba(0,0,0,.04); }

/* 画面右端でのはみ出し防止 */
.awaji-navi{ contain: layout paint; }




/*************************************************
 * 
 *               サイトの説明
 * 
 * ***************************************/

.intro{
	background-color:#f3f1e6;
	padding:50px 20px;
	background-image:url(https://tabi-1.net/wp-content/uploads/2025/10/namisen.png);
	position:right center;
	background-repeat:no-repeat;
	color:#6a5c40;
	box-sizing:border-box;
}
.intro-inner{

}
.intro-inner .pic{

}
.intro-inner .pic img{
  width:100%;
  height:auto;
  border-radius:10px;
  position: relative;
  z-index: 1; /* 影より前に */
}


.intro-inner .text{
	box-sizing:border-box;
}
.intro-inner .text h3{
	margin-top:15px;
	font-size:20px;
	margin-bottom:15px;
	letter-spacing:-0.5px;
	font-weight:700;
}
.intro-inner .text p{
	font-size:15px;
	text-align:left;
	letter-spacing:0.5px;
	line-height:190%;
}

/**********************************************************
 * 
 *                  穴場観光
 * 
 * ***********************************************/


.anaba-k{}

/* ===== Hero ===== */
.anaba-k .hero{
  --band-bg: #00b398;         /* 帯の色（お好みで） */
  --meta-bd: rgba(255,255,255,.5);
  --radius: 10px;
  --shadow: 0 10px 24px rgba(0,0,0,.18);
}

.anaba-k .hero-media{
  position: relative;
  margin: 0;
  line-height: 0;
  overflow: visible;   /* 画像外の帯も表示 */
}

/* 背景画像 */
.anaba-k .hero-media > img{
  width: 100%;
  height: clamp(260px, 42vw, 520px);  /* 画像の縦サイズ */
  object-fit: cover;
  display: block;
}

/* タイトル帯 */
.anaba-k .hero-caption{
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: clamp(-18px, -3vw, -24px);  /* 画像から少しはみ出す */
  background: var(--band-bg);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 3vw, 28px);
}

/* タイトル */
.anaba-k .hero-caption h1{
	font-weight:800;
	font-size:18px;
  margin: 0 0 .6em;
}

/* メタ情報のバッジ */
.anaba-k .hero-meta{
  display: flex;
  gap: .10rem;
  flex-wrap: wrap;
	justify-content:center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size:12px;

}

.anaba-k .hero-meta .meta{
  display: inline-block;
  border: 1px solid var(--meta-bd);
  padding: .35em .8em;
  border-radius: 6px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	line-height:180%;
  background: rgba(255,255,255,.08);
}

.anaba-k-flex{
	display:flex;
	flex-wrap:wrap;
	padding:60px 20px;
}

.anaba-k-flex .box{
	width:46%;
	margin:2%;
	margin-bottom:20px;
}
.anaba-k-flex .box img{
	width:100%;
	height:auto;
	margin-bottom:20px;
	border-radius:10px;
}
.anaba-k-flex .box h3{
	font-size:15px;
	margin-bottom:10px;
}
.anaba-k-flex .box p{
	font-size:12px;
	line-height:160%;
	text-align:left;
	height:200px;
	overflow:hidden;
}
.anaba-k-flex .box p br{
	display:none;
}
.anaba-k-flex .botan a{
	display:block;
	padding:10px;
	border-radius:5px;
	background-color:#00b398;
	color:#fff;
	font-size:11px;
	text-align:center;

	margin:0 auto;
	margin-top:25px;
}
.anaba-k-flex .box h4{
	background-color:#fd7878;
	padding:10px;
	border-radius:5px;
	color:#fff;
	font-size:12px;
	line-height:100%;
	margin-bottom:15px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-weight:normal;
}

/******************************************
 * 
 *           宿
 * 
 * ****************************************************/

.yado{
	padding:0 0 60px 0;
}

.yado h2{
	font-size:30px;
	  font-family: "Righteous", sans-serif;
  font-style: normal;
	color:#6cb8de;
	padding:20px;
}

/* ===== 固定モザイク（PC） ===== */
.mosaic-fixed {
  padding: 20px;
  --gap: 10px;
  --radius: 8px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* 12カラム */
  grid-auto-rows: minmax(80px, 7.2vw);
  gap: var(--gap);
}

/* 各セル共通 */
.mosaic-fixed .cell {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ddd center/cover no-repeat;
  background-image: var(--bg);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: block;
}
.mosaic-fixed .cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.mosaic-fixed .cell p{
	padding:15px;
	color:#fff;
	font-size:13px;
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.9),
    -2px -2px 4px rgba(0,0,0,0.9),
    2px -2px 4px rgba(0,0,0,0.9),
    -2px 2px 4px rgba(0,0,0,0.9);
}

/* 縦長・横長のバランス */
.i1, .i2, .i4, .i9, .i13 {
  grid-column: 1 / -1 !important;
  aspect-ratio: 16 / 9;
}
.i3, .i6, .i8, .i14, .i15, .i16 {
  aspect-ratio: 3 / 4;
}

/* ===== スマホ対応（768px以下） ===== */
@media (max-width: 768px) {

  .mosaic-fixed {
    grid-template-columns: repeat(2, 1fr); /* 2列構成 */
    grid-auto-rows: auto;
    gap: 8px;
    padding: 15px;
  }

  /* 全てのグリッド指定をリセット */
  .mosaic-fixed > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* 全幅で見せたいアイテム */
  .i1, .i2, .i4, .i9, .i13 {
    grid-column: 1 / -1 !important; /* 2列またぎ */
    aspect-ratio: 16 / 9;
  }

  /* 他のアイテムは通常比率で2列配置 */
  .mosaic-fixed .cell {
    aspect-ratio: 4 / 3;
  }

  /* スマホ最小幅では1列 */
  @media (max-width: 480px) {
    .mosaic-fixed {
      grid-template-columns: 1fr; /* 1列化 */
      gap: 10px;
    }
  }
}


.dogs h2{
	padding:20px 20px;
	font-size:30px;
	margin-top:15px;
}

/* ===== Layout ===== */
.fmtokyo{
	padding:20px;
  --gap: 18px;
  --radius: 14px;
  --brand: #5db8b2;      /* バッジ色ベース */
  --ink: #1f2b36;
  --muted: #6b7b87;
  display: grid;
  grid-template-columns: 360px 1fr; /* 左カラム幅 */
  gap: var(--gap);
  align-items: start;
}

/* 左：ヒーロー */
.fmt-hero{
	display:none;
  position: sticky;      /* スクロールしても見える演出（不要なら static） */
  top: 24px;
  align-self: start;
  border-radius: var(--radius);
  overflow: hidden;
}
.fmt-hero img{
  width: 100%; height: auto; display: block;
}
.fmt-hero .hero-copy{
		display:none;
  display: grid; align-content: end;
  padding: 24px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
	font-size:12px;
}
.fmt-hero .hero-copy h2{
  font: 700 32px/1.2 "Noto Serif JP","Noto Sans JP",serif;
  margin: 8px 0 0;
	color:#fff!important;
	padding:20px 0 40px 0!important;
}

/* 右：カード Masonry（CSS Columns で手軽に） */
.fmt-cards{
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width: 1100px){ .fmt-cards{ column-count: 2; } }
@media (max-width: 640px){
  .fmtokyo{ grid-template-columns: 1fr; }
  .fmt-cards{ column-count: 1; }
  .fmt-hero{ position: static; }
}

/* ===== Card base ===== */
.card{
  break-inside: avoid;                 /* 列の途中で分割しない */
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--gap);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, opacity .15s;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

/* 写真カード */
.card.photo{
  aspect-ratio: 4/3;                   /* ベース比率 */
  background: #ddd center/cover no-repeat;
  background-image: var(--img);
}
.card.photo.tall{ aspect-ratio: 3/4; } /* 縦長 variation */
.card.photo::after{                     /* 読みやすいよう薄く暗く */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
}
.card.photo h3{
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  margin: 0; z-index: 1;
  font: 700 16px/1.5 "Noto Sans JP",sans-serif;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
	color:#fff!important;
}

/* バッジ（数字） */
.card .badge{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--brand);
  color: #fff;
  font: 700 14px/1;
	  font-family: "Righteous", sans-serif;
  padding: 10px 10px 8px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}

/* 右上の “Challenge!” ラベル */
.card .label{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font: 700 12px/1 ;
	  font-family: "Righteous", sans-serif;
  color: rgba(255,255,255,.95);
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}

/* 動画アイコン（必要なカードに .has-video） */
.card.has-video::before{
  content:""; position:absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="black" d="M19 14v20l16-10z"/></svg>') center/56% no-repeat;
}

/* MORE カード */
.card.more{
  background: #e8f4f2;
  color: var(--ink);
  display: grid; place-items: center;
  padding: 26px 18px;
  aspect-ratio: 4/3;
}
.card.more.soft{ background: #d5ecf3; }
.card.more .more-body{
  text-align: center; display: grid; gap: 14px; justify-items: center;
}
.card.more img{ width: 120px; height: auto; opacity: .85; }
.card.more .more-title{
  font: 700 16px/1.3 "Noto Sans JP",sans-serif; color: var(--ink);
}
.card.more button{
  font: 700 13px/1 "Noto Sans JP",sans-serif;
  padding: 10px 18px; border-radius: 10px; border: 2px solid rgba(0,0,0,.15);
  background: #fff; color: var(--muted);
}

.pink{
	color:#ec7b7b!important;
}
.green{
	color:#fff!important;
	padding-bottom:15px!important;
}

/**************************************
 * 
 * FOOD
 * 
 * *************************************/

.food{
	background-color:#3cca86;

	color:#fff;
}

.food h2{
	padding:25px 0;
	font-size:30px;
}

.f-come{
	display:flex;
	justify-content:center;
	align-items:center;
}
.f-come img{
	height:150px;
	width:auto;
}
.f-come p{
	font-size:13px;
	padding:0 20px;
}

.insta-flex{

	padding:15px;
}
.insta-flex .int{
	overflow:hidden;
	margin:2%;
	padding:10px;
	border-radius:10px;
	background-color:#fff;
	color:#6f5e48;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

}
.insta-flex .int h3{
	margin-bottom:20px;
	margin-top:20px;
}
.insta-flex .int p{
	font-size:13px;	margin-bottom:20px;
}