/*
Theme Name: RDSGN ORIGINAL									
*/


/**********************************************
    PC版 CSS
**********************************************/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');/*日本語明朝*/
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');/*見出しに使っている英語*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/**************************************************************
全体
**************************************************************/
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%;
}

.kusa{
	  font-family: 'Kosugi Maru', sans-serif;
}
/**************************************************************
リンク
**************************************************************/
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;
}

.sp{
	display:none;
}

/*********************************当社について*************************/


.about-p{

}

.about-p h2{
	background-color:#004484;
	padding:30px;
	font-size:18px;
	color:#fff!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 20px;
	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{
	padding:10px;
	margin:0 auto;
	font-size:12px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.about-p p br{
	display:none;
}

.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;
}

/* ====== Reset-ish ====== */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* ====== Header ====== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  z-index: 1000;
  transition: opacity .5s ease, transform .5s ease;
  gap: 8px;
}

/* 左メニュー */
.header-left{
  width: 68%;
  background: rgba(255,255,255,.9);
  padding: 12px 14px;
  position: relative;
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  font-family: 'Rubik', sans-serif;
}
.header-left .logo{ margin: 8px 0 6px; }
.header-left .logo img{ width: 100%; }
.header-left .sns{
  display: flex; justify-content: center; gap: 8px;
  margin: 6px 0 12px;
}
.header-left .sns a{ width: 18%; }
.nav ul{ list-style: none; padding: 0; margin: 6px 0 0; }
.nav li{ margin: 6px 0; }
.nav a{ text-decoration: none; color: #000; font-weight: 600; font-size: 14px; }

/* 右ボタン */
.header-right{
  text-align: right;
  background: rgba(255,255,255,.9);
  padding: 10px 12px;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  font-family: 'Rubik', sans-serif;
}
.reserve{
  text-decoration: none; color:#000; font-weight:700; font-size: 12px; line-height:1.3;
}

/* ====== Hero ====== */
.hero{ position: relative; height: 88vh; overflow:hidden; }
.hero img{ width:100%; height:100%; object-fit: cover; }
.catchcopy{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; text-align:center; font-size:1.6rem; line-height:1.5;
  font-weight:700; text-shadow:0 4px 8px rgba(0,0,0,.96);
  font-family:'Rubik', sans-serif; padding: 0 10px; box-sizing: border-box;
}
.catchcopy img{ width: 220px; }

/* ====== Gallery block ====== */
.gal{ display:flex; flex-direction: column; background:#EAE3DA; }
.gal-l, .gal-r{ width:100%; }
.gal-r{ padding:28px 16px; box-sizing:border-box; }
.gal-r h3{ font-size:20px; font-weight:400; margin-bottom:14px; }
.gal-r p{ margin-bottom:14px; font-size:14px; text-align:left; }

/* ====== Hotels head / titles ====== */
.hotels{ padding:60px 16px; }
.loof-hotels{
  max-width: 100%;
  margin: 0 auto;
  padding: 60px 16px 40px;
  font-family: "Noto Serif JP", serif;
  color:#111; text-align:center;
}
.loof-head{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-bottom:28px;
}
.jp-lead{ font-size:14px; letter-spacing:.08em; position:relative; }
.jp-lead::after{
  content:""; display:inline-block; width:96px; height:1px; background:#bbb; margin-left:8px; vertical-align:middle;
}
.en-ttl{
  font-family:"EB Garamond", serif;
  font-weight:600; font-size:36px; line-height:1; margin:0 0 0 10px;
}
.view-all{
  position: static; display:block; margin: 8px 0 0 auto; width:max-content;
  font-size:14px; text-decoration:none; color:#111; font-family:"EB Garamond", serif;
}

/* ====== Vertical label + thumb grid ====== */
.loof-grid{
  display:grid; grid-template-columns: 1fr; gap:24px; padding: 10px 0;
}
.loof-card{
  display:flex; align-items:center; justify-content:flex-start; gap:16px;
}
.vlabel{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size:16px; letter-spacing:.08em;
}
.thumb-wrap{ display:flex; flex-direction:column; align-items:center; width: 100%; }
.thumb{
  width:100%; aspect-ratio: 3/4; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.thumb:hover img{ transform: scale(1.03); }
.more{ margin-top:8px; text-decoration:none; font-size:14px; color:#600; }

/* ====== Purpose circles ====== */
.circle-list{
  display:flex; justify-content:flex-start; gap:16px; padding: 0 4px; overflow-x:auto; -webkit-overflow-scrolling: touch;
}
.circle{
  width:88px; height:88px; border-radius:50%; overflow:hidden; position:relative; flex: 0 0 auto; text-decoration:none;
}
.circle img{ width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.circle span{
  position:absolute; inset:auto 0 8px 0; text-align:center; color:#fff; font-size:12px; font-weight:700;
  text-shadow:0 2px 5px rgba(0,0,0,.45); padding:0 4px;
}
.circle:hover img{ transform: scale(1.08); }

/* ====== Area buttons ====== */
.area-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
.area-btns a{
  display:inline-block; padding:10px 20px; border:1px solid #999; border-radius:26px;
  text-decoration:none; color:#111; font-size:14px; background:#fff;
}
.area-btns a:active{ background:#111; color:#fff; }

/* ====== Misc ====== */
.sec-ttl{ font-size:16px; margin:20px 0 14px; text-align:left; }