@charset "UTF-8";
/* CSS Document */
/*====================================================
   HTML5 display definitions
====================================================*/

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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

abbr[title] { border-bottom: 1px dotted; }
strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; clear:both; }
mark {background: #ff0;color: #000}
code,kbd,pre,samp { font-family: monospace, serif ; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; max-width: 100%; height:auto; }
svg:not(:root) { overflow: hidden; }
figure,figcaption { margin: 0;padding:0; }
table { border-collapse: collapse; border-spacing: 0; }

/*====================================================
size style
====================================================*/
.clear { clear: both!important; }
.hide { display: none; }
.vlnT { vertical-align: top!important; }
.vlnM { vertical-align: middle!important; }
.vlnB { vertical-align: bottom!important; }
.vlnL { vertical-align: baseline!important; }
.fltL { float: left!important; }
.fltR { float: right!important; }
.imgL { float: left; margin: 0 15px 15px 0; }
.imgR { float: right; margin: 0 15px 15px; }

/*====================================================
TEXT
====================================================*/
.gth { font-family: "游ゴシック体", "Yu Gothic", YuGothic,"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }
.bold { font-weight: bold; }
.red { color: #BB0003; }
.right { text-align: right!important; }
.left { text-align: left!important; }
.center { text-align: center!important; }

/*====================================================
settings
====================================================*/
:root {
  --fontFamily:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;
  --fontSize: 16px;
  --lineHeight: 1.8em;
  --txtColor: #000;
  --linkColor: #0f2540;
  --mainColor: #0f2540;
  --subColor1: #897d55;
  --subColor2:#636363;
  --bgColor1: #e9e9e1;
  --bgColor2: #f3f3e0;
  --ctsWidth: 1200px;
}

/*====================================================
Links
====================================================*/
a {
	background: transparent;
	color: var(--linkColor);
	outline: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
a:focus { outline: none; }
a:active,a:hover { outline: 0; opacity:0.8; }
a:link,a:visited {
	color: var(--linkColor);
}
a:hover,a:active {
  opacity: .8;
  text-decoration: none;
}
a img {
  border-style: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
a:hover img {
	opacity: 0.8;
}
a.no_hvr:hover, a.no_hvr:hover img {
  opacity: 1!important;
}

/*====================================================
common hack style
====================================================*/
/* */
.cf:after { content: ''; display: block; clear: both; height: 0; visibility: hidden; }
/* for IE6,7 */
.cfi {zoom: 1;display: inline-table;min-height: 1%; }
/* number bug IE6 */
ul, ol, li { zoom: normal; }
img { vertical-align: bottom; }
* {
  word-break: break-all;
  box-sizing: border-box;
}

/*====================================================
Common
====================================================*/
h1,h2,h3,h4,h5,p {
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
ul,li,dl,dt,dd,ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bold { font-weight: bold; }
.size10 { font-size: 10px; }
.size11 { font-size: 11px; }
.size12 { font-size: 12px; }
.size13 { font-size: 13px; }
.size14 { font-size: 14px; }
.size15 { font-size: 15px; }
.size16 { font-size: 16px; }
.size17 { font-size: 17px; }
.size18 { font-size: 18px; }
.size19 { font-size: 19px; }
.size20 { font-size: 20px; }
.size21 { font-size: 21px; }
.size22 { font-size: 22px; }
.size23 { font-size: 23px; }
.size24 { font-size: 24px; }
.size25 { font-size: 25px; }
.size26 { font-size: 26px; }
.size27 { font-size: 27px; }
.size28 { font-size: 28px; }
.size29 { font-size: 29px; }
.size30 { font-size: 30px; }
.red { color: #D60003; }
.navy{color:var(--mainColor)}

.mb0 { margin-bottom: 0 !important; }
.mb3 { margin-bottom: 3px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

.mt0 { margin-top: 0 !important; }
.mt3 { margin-top: 3px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }

.mr0 { margin-right: 0 !important; }
.mr3 { margin-right: 3px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

.ml0 { margin-left: 0 !important; }
.ml3 { margin-left: 3px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }

.pb0 { padding-bottom: 0 !important; }
.pb3 { padding-bottom: 3px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }

.pt0 { padding-top: 0 !important; }
.pt3 { padding-top: 3px !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }

.pl0 { padding-left: 0 !important; }
.pl3 { padding-left: 3px !important; }
.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }

.pr0 { padding-right: 0 !important; }
.pr3 { padding-right: 3px !important; }
.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }

.p30{
padding: 30px;
}

.br10{
border-radius: 10px
}

/* ----------- 共通レイアウト -----------  */

#rak_main{
margin: 0 auto;
width:950px;
}

.cArea{
	test-aligh:center;
    font-family:var(--fontFamily);
	font-size:var(--fontSize);
	line-height:var(--lineHeight);
}
.cArea img{
width: 100%;
max-width: 100%;
}
.cArea .hGold{
color: var(--subColor1);
font-size: 28px;
font-weight: bold;
line-height: 1.6
}

.cArea .hGold_ul{
border-bottom: 1px solid var(--subColor1);
padding-bottom: 12px;
}

.cArea .hNavy{
color: var(--mainColor1);
font-size: 28px;
font-weight: bold;
line-height: 1.6
}
.cArea .h3{
color: var(--mainColor);
font-size: 28px;
}
.cArea .border{
border: 1px solid var(--mainColor);
}
.cArea .borderTb{
border-top: 1px solid var(--mainColor);
border-bottom: 1px solid var(--mainColor);
}

.cArea .borderTGold{
border-top: 1px solid var(--subColor1);
}
.cArea .bgColor2{
background: var(--bgColor2);
}
.cArea .fBlock{
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.cArea .fBlock.alCenter{
align-items: center !important;
}
.cArea .fBlock.jcCenter{
justify-content: center !important;
}

.cArea .fBlock .fBlockImg{
width: 450px;
}
.cArea .fBlock .fBlockTxt{
width:calc(100% - 450px) ;
}
.cArea .fBlock .fBlockSImg{
width: 400px;
}
.cArea .fBlock .fBlockSTxt{
width:calc(100% - 400px) ;
}
.cArea .fBcolumn2 > li,
.cArea .fBcolumn2 > div{
width:49%;
}
.cArea .fBcolumn3 > li{
width:31%;
}
.cArea .fBcolumn4{
justify-content: flex-start;
gap:16px; 
}
.cArea .fBcolumn4 > li{
width:225px;
}

.cArea .fBcolumn3 > li img,
.cArea .fBcolumn4 > li img{
width: 100%
}

.cArea .fBcolumn3 a,
.cArea .fBcolumn4 a{
text-decoration: none;
}

.cArea .linkBox a {
color: var(--mainColor);
line-height: 1.5;
}
.cArea .linkBox a .linkImg{
position: relative;
}
.cArea .linkBox a .linkImg p{
width:225px;
height: 100px;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 10px;
}
.cArea .linkBox a .linkImg::after,
.cArea .linkLineBox a::after{
content: '';
display: block;
position: absolute;
border-radius:18px;
right: 0;
width: 36px;
height: 36px;
background-color:var(--mainColor);
background-image: url("../image/arrow.svg");
background-size: 36px;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.25s ease;
will-change: transform;
}

.cArea .linkBox a .linkImg::after{
bottom: -18px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}

.cArea .linkBox a:hover .linkImg::after,
.cArea .linkLineBox a:hover::after{
transform: scale(1.333);
}
.cArea .linkBox a h3{
font-size: 14px;
font-weight: bold;
}

.cArea .arrowS::before{
content: '';
display: inline-block;
width: 20px;
height: 16px;
background: url("../image/arrow_mini.svg");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center left;
}
.cArea .linkLineBox {
border-top: 1px solid var(--mainColor)
}
.cArea .linkLineBox a{
display: block;
height: 56px;
line-height: 56px;
text-decoration: none;
border-bottom: 1px solid var(--mainColor);
position: relative;
}
.cArea .linkLineBox a::after{
top: 10px;
}
.cArea .memo{
background-color: var(--bgColor1);
display: inline-block;
border-radius: 20px;
padding: 0 10px;
}
/* ----------- ヘッダー -----------  */

.cArea #header{
display: flex;
justify-content: space-between;
}
.cArea #header h1{
width: 210px;
}
.cArea #header .hNav{
width: 710px;
font-size: 14px;
font-weight: bold;
}
.cArea #header .hNav li a{
display: block;
height: 30px;
padding: 0 10px;
line-height: 30px;
text-decoration: none;
border-radius: 6px;
}
.cArea #header .mainNav{
display: flex;
justify-content: space-between;
background-color: var(--mainColor);
border-radius: 10px;
padding: 10px;
}

.cArea #header .mainNav li a{
color: #fff;
background: rgba(255,255,255,0);
}

.cArea #header .mainNav li a:hover{
background: rgba(255,255,255,0.2)
}
.cArea #header .mainNav li a.spBtn{
padding: 0 18px;
background: var(--subColor1);
}
.cArea #header .subNav{
display: flex;
justify-content: flex-start;
padding: 10px;
}


/* ----------- フッター -----------  */
.cArea #hotelInfo{
display: flex;
justify-content: space-between;
background-color: var(--bgColor1);
padding: 30px;
margin-top: 60px;
} 
.cArea #hotelInfo h1{
width: 210px;
}
.cArea #hotelInfo .hotelInfoR{
width: 270px;
}
.cArea #hotelInfo .hotelInfoR .btn a{
display: block;
text-align: center;
height: 46px;
line-height: 46px;
text-decoration: none;
color:#fff;
font-weight: bold;
border-radius: 10px;
margin-bottom: 15px;
}

.cArea #hotelInfo .hotelInfoR .btn a:hover{
opacity: 0.5

}
.cArea #hotelInfo .hotelInfoR .btnGold a{
background: var(--subColor1);
}
.cArea #hotelInfo .hotelInfoR .btnGray a{
background: var(--subColor2);
}
.cArea #hotelInfo .hotelInfoMini p{
display: inline-block;
padding-right: 10px;
}
.cArea #hotelInfo .hotelInfoMini p a{
line-height: 20px;
text-decoration: none;
}

.cArea #hotelInfo .hotelInfoMini p a:hover{
text-decoration: underline;
}

/* ----------- トップページ -----------  */
.cArea .mainImg{
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 20px;
}

.cArea .mainImg img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade4 16s infinite;
}

/* 1枚あたり1秒表示（合計4秒） */
.cArea .mainImg img:nth-child(1){ animation-delay: 0s; }
.cArea .mainImg img:nth-child(2){ animation-delay: 4s; }
.cArea .mainImg img:nth-child(3){ animation-delay: 8s; }
.cArea .mainImg img:nth-child(4){ animation-delay: 12s; }

/* ふんわり：表示→維持→フェードアウト */
@keyframes fade4{
  0%   { opacity: 0; }
  10%  { opacity: 1; }  /* フェードイン */
  35%  { opacity: 1; }  /* 表示キープ */
  45%  { opacity: 0; }  /* フェードアウト */
  100% { opacity: 0; }
}

/* アクセシビリティ：動きを減らす設定の人は止める */
@media (prefers-reduced-motion: reduce){
  .cArea .main img{ animation: none; opacity: 0; }
  .cArea .main img:first-child{ opacity: 1; }
}

.cArea .topHanabiLogo{
width:100px;
margin: 0 auto;
}

.cArea .videoBlock{
}

.cArea .videoBlock video{
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}

/* ----------- 下層ページタイトル -----------  */
.cArea .titleBlock{
background-image: url("../image/bg_title.jpg");
background-size: 950px 160px;
background-repeat: no-repeat;
background-position: top left;
position: relative;
}

.cArea .titleBlockImg{
min-height: 225px;
}
.cArea .titleBlock .titleImg{
position: absolute;
top: 0;
right: 0;
width: 323px;
height: 225px;
}

.cArea .titleBlock h1{
position: relative;
color: #fff;
font-size: 28px;
height: 160px;
display: flex;
align-items: center;
padding-left: 40px;
}

.cArea .read{
font-size: 18px;
font-weight: bold;
color: var(--mainColor);
margin-top: 40px;
}

/* ----------- レストラン -----------  */
.timeList li span{
display: inline-block;
width: 100px;
}
.gallery{
  width: 440px;
  display: grid;
  grid-template-columns: repeat(3, 140px);
  grid-template-rows: 300px 96px;
  column-gap: 10px;
  row-gap: 8px;
  margin-bottom: 24px;
}

.gallery .mainPhoto{
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  width: 440px;
  height: 300px;
  overflow: hidden;
}

.gallery .mainPhoto .m{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}

/* 状態による表示切替 */
.gallery[data-active="1"] .m1{ opacity: 1; }
.gallery[data-active="2"] .m2{ opacity: 1; }
.gallery[data-active="3"] .m3{ opacity: 1; }

/* サムネ */
.gallery .thumb{ grid-row: 2; cursor: pointer; }
.gallery .thumb img{
  width: 140px;
  height: 96px;
  object-fit: cover;
  opacity: .7;
  transition: opacity .2s ease;
}
.gallery .thumb:hover img{ opacity: 1; }

/* ----------- アクセス -----------  */
.time_table{
width: 100%;
color: var(--mainColor);
}
.time_table .head{
background: var(--bgColor1);
border-top: 1px solid var(--mainColor);
border-bottom: 1px solid var(--mainColor);
}
.time_table th,
.time_table td{
padding: 10px 30px;
text-align: center;
vertical-align:  middle;
}
.time_table td{
border-bottom: 1px solid var(--mainColor);
}

/* ----------- FAQ -----------  */
.faq {
color:var(--mainColor);
}
.faq dt{
border-top: 1px solid var(--mainColor);
font-size: 18px;
padding: 20px 10px 15px 50px;
position: relative;
font-weight: bold;
}
.faq dt::before,
.faq dd::before{
position: absolute;
top: 15px;
left: 0;
width: 40px;
height: 40px;
font-size: 28px;
display: block;
}

.faq dd{
padding: 15px 10px 15px 50px;
position: relative;
}
.faq dt::before{
content: 'Q.';
}
.faq dd::before{
content: 'A.';
}

/* ----------- 客室 -----------  */
.lineList li{
padding: 12px 10px;
border-bottom: 1px solid var(--mainColor);
font-size: 14px;
line-height: 1.6;
display: flex;
justify-content: flex-start;
}
.lineList li:first-child{
border-top: 1px solid var(--mainColor);
}
.lineList li h4{
width: 110px;
}
.lineList li p{
width: calc(100% - 120px);
}