@charset "utf-8";
/*common
---------------------------------------------------------------*/
.wrapper { overflow: hidden; }
.inner { width:1080px; max-width: 100%; margin:0 auto; }

.main{ width:100%; height:840px; background:url(../img/mv.jpg) no-repeat center / cover; }

/* 夜間拝観リンクボタン */
.night_button {position: absolute; top:20px; left:352px; z-index: 10; margin:0; }
.night_button span {font-size: 1.2em; margin-right: .2em;}
.night_button a { display: inline-block; padding:4px 15px; background-color: #d0af4c; border: 1px solid #d0af4c; color: #fff; text-decoration: none;}
.night_button a::before {content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid#fff; transform: rotate( 90deg);}
.night_button a:hover {color: #d0af4c; background-color: #fff;}
.night_button a::before:hover {border-top: 1px solid #d0af4c; border-right: 1px solid #d0af4c;}

/* ページ内リンク */
.a-link{ display:-webkit-box; display:flex; flex-wrap:wrap; justify-content:center; gap:0.5em 2%; margin-block:1em; }
.a-link a{ display:inline-flex; justify-content:center; align-items: center; position:relative; 
	min-width:140px; height:34px; padding-inline:1.2em 2em; text-decoration:none; color:#222; background:#fdcd9f; }
.a-link a:hover{ background:#fdac97; }
.a-link a::before{ display: inline-block; position:absolute; content:""; width:6px; height:6px; right:1em;
  border-bottom:1px solid #222; border-right:1px solid #222; transform: rotate(45deg); }
.a-link.lang a{ height:30px; font-size:0.9em; background:#ff9270; }
.a-link.lang a:hover{ background:#fdac97; }

/*base
---------------------------------------------------------------*/
.data { table-layout: fixed; border-collapse: separate; border-spacing: 0 10px; margin-top: -10px; }
.data th {
	width: 20%; font-weight: normal; background: #f0ece9; padding: .2em;
	&:has(br) { line-height: 1.4;}
}
.data td { width: 80%; padding-left:.5em; }

/* footer */
footer { margin: 0 auto; }
footer .f_contact { padding: 4% 0; background: url("../img/f_contact_bg.jpg") no-repeat center / cover; color: #fff; }
footer .f_contact .detail a.tel { text-decoration: none; color: #fff; }
footer .f_contact .detail a.mail { display: block; padding: .2em; margin-top: 1%; text-align: center; border: 1px solid #fff; text-decoration: none; }
footer .f_contact .inner div { width: 48%; }
footer .f_contact .ttl { border-right: 1px solid #fff; font-size: 1.875em; line-height: 1.4; }
footer .f_contact .ttl span { display: inline-block; padding: .2em .5em; font-size: .5em; border: 1px solid #fff; }
footer .copy { background: #c04020; padding: 1em; color: #fff; font-size: 12px; text-align: center; margin: 0; }
footer .pagetop { position:fixed; bottom:0; right:0; }

/* header */
header { background:#fff; padding:10px ; color:#222;}
header a { color:#222; text-decoration:none;}
header a:hover { color:#d0af4c;}

/* ボタン */
.main .button{ display:flex; }
.button a { display: block; max-width: 420px; padding: 1em 0; text-align: center; text-decoration: none; 
background: linear-gradient(to bottom, #eb6359, #f79e4f);
background: -moz-linear-gradient(top, #eb6359, #f79e4f);
background: -webkit-linear-gradient(top, #eb6359, #f79e4f);}

.button.pointer_none a { pointer-events: none; }

.button.youtube-link {
	margin-top: 1em;
	a { margin-inline: auto;}
}


/* tbl */
.tbl { border:1px solid #d1cdca; }
.tbl tr > * { padding:1.2em; border:1px solid #d1cdca; }
.tbl th { background:#f0ece9; }
.tbl {margin: 0 auto;font-family:serif; }
.tbl tr > * { padding:.5em 1em; }
.tbl td { white-space:nowrap; background:#fff; }

/*en ch*/
.f-ch{ font-family: 'Noto Serif SC', serif; }
.f-kr{ font-family: 'Noto Sans KR', sans-serif; }
.lang_inner { margin-top: clamp(3em,5.6vw,60px); background: #fbf8e6;}
.lang_inner .data th { background: #fff; }
#en, #ch, #kr { padding-block:clamp(2em,5.6vw,60px); margin: 0 auto;}
.intro-txt{ margin:0 auto 3em; }
.intro-txt.txt-only { margin-bottom: unset;}
.lang_inner .flex { background:#fff; padding:30px;}
.lang_inner .txt .data { margin:0;}
.d-list{ display:flex; flex-wrap:wrap; gap:3%; margin:0 auto 3em; }
.d-list dt, .d-list dd{ padding:0.5em 0.3em; line-height:1.5; border-bottom:1px solid #cdcdcd; }
.d-list dt{ width:20%; color:#c13a1a; }
.d-list dd{ width:77%; }
.col2 .pic{ text-align:center; }
.col2 .txt .d-list dt, .col2 .txt .d-list dd{ width:100%; }
.col2 .txt .d-list dt{ padding-bottom:0; border:0; }
.ttl_con{ position:relative; margin-bottom: 1.5em; padding-block:1em 0.5em; font-size: 1.5em; line-height: 1.4; border-bottom:2px solid #eb6359; }
.ttl_con h2{ font-weight:normal; }
.ttl_con::before{ position:absolute; content:""; width:2.5em; height:2.5em; right:0; top:0; 
	background:url(../img/deco_ttl_momiji.png) no-repeat 0 0 / 100%; }
.ttl_con.sub{ font-size:1.2em; }
.btn{ display: inline-block; color: #fff; background: #d0af4c; padding: 10px 20px; text-decoration: none;	border: 1px solid #d0af4c; }
.bgW { background:#fbe6c6;} 
.list-dot li{ position:relative; margin-bottom:0.8em; padding-left:1em; line-height:1.5; }
.list-dot li::before{ position:absolute; content:""; width:6px; height:6px; left:0; top:0.7em; background:#eb6359; border-radius:50%; }

/*contents
---------------------------------------------------------------*/
/*タイトル*/
.con_ttl { position: relative; padding-top:0.6em; font-size: 2.375em; font-weight: normal; text-align: center; }
.con_ttl span { display: block; font-size: .4em; color: #c04020; }
.con_ttl::before { content: ""; position: absolute; top: 0; right: 0; left: 0; display: block; width:12px; height:12px; margin: 0 auto; border-radius: 50%;
background: linear-gradient(to bottom, #eb6359, #f79e4f);
background: -moz-linear-gradient(top, #eb6359, #f79e4f);
background: -webkit-linear-gradient(top, #eb6359, #f79e4f);}


/*main*/
.main { position: relative; }
.main .logo, .main .days{ position: absolute; }
.main .logo { top:2em; right:4.5vw; }
.main .days { bottom:3em; left:4.5vw; margin:0; }
.main .button { position: absolute; top: 20px; left: 20px; margin: 0; z-index: 1; }
.main .button a { padding: .5em 1em; background: -webkit-linear-gradient(top, #c43228, #dd5a0e); background: linear-gradient(to bottom, #c43228, #dd5a0e); }


/* instalive */
.instalive { margin-top: 5%; background: #f0ece9; }
.instalive .lead_box { padding:0 5% 5%; }
.btn_list { gap: 1em; margin-top: 3em; }
.btn_list li { width: 48%; }
.btn_list li a { display: block; }
.btn_list .button a { min-width: 100%; }

.news { margin-top: 5%; padding: 1.5% 3%; border: 2px solid #f28454; }

/*about -----------------------*/
.about { margin-top: 5%; }
.about .data { margin:35px auto 30px; }
.about .lead_box { margin-top: 0; font-size: 1.2em; color: #b23232; }

/* otherplan */
.otherplan { margin-top: 5%; padding: 5%; background: #f0ece9; }
.otherplan .subttl { display: flex; align-items: center; font-size: 1.875em; font-weight: normal; }
.otherplan .subttl .reserve { display: inline-block; margin-right: .5em; padding: 0 .5em; background: #c04020; font-size: .7em; color: #fff; }

.otherplan .subcopy { margin-bottom: 0; font-size: 1.4em; }
.otherplan .subcopy + p { margin-top: .5em; }

.otherplan .txt span { color: #c04020; }
.otherplan .txt span.big { font-size: 1.25em; }

.tokuten { padding:2%; border:1px solid #c04020; }
.tokuten dt { width: 15%; padding: .1em .8em; margin: .5em 0; background: #c04020; color: #fff; text-align: center; }
.tokuten dd { width: 85%; padding-left: 2%; margin: .5em 0; }

.otherplan .button { margin: 0; }

/* プレミアム拝観プラン */
.otherplan .premium .detail { margin-top: 32px; padding: 2%;
    border: 1px solid #c04020; }
.otherplan .premium .detail .ttl { margin: 0 0 .8em; padding: .2em 1.5em; font-size: 1.3em; font-weight: normal; background: #dfd9d4; position: relative; }
.otherplan .premium .detail .ttl::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 20px; height: 2px; margin: auto; background: #c04020; }

.otherplan .premium .detail .data { margin: 0; }
.otherplan .premium .detail .data.wide th { width: 15%; font-weight: normal; }
.otherplan .premium .detail .data.wide td { padding: .5em 1em; }
/*.otherplan .premium .detail .data { width: 48%; }*/
.otherplan .detail .data th { background: #fff; }
/*.otherplan .premium .detail .data { margin: -10px 0 0 0; }*/
.otherplan .premium .detail .button { width: 48%; margin: auto; }

/* 夕食付拝観プラン */
.otherplan .dinnerplan { margin-top: 5%; }
.otherplan .dinnerplan .detail .data { margin: -10px 0 15px 0; }
.otherplan .dinnerplan .detail figure { width: 46%; }
.otherplan .dinnerplan .detail figure img { width: 100%; }
.otherplan .dinnerplan .detail .leadbox { width: 51%; }
.otherplan .dinnerplan .detail .lead { width: 48%; }
.otherplan .dinnerplan .note a.tel { text-decoration: none; color: #2c2c2c; }
.otherplan .dinnerplan .note span { color: #c04020; }

.about .button.center a { margin: 30px auto 0; }

/* highlight -----------------------*/
.highlight { margin-top: 120px; }
.highlight .con_ttl {padding-bottom:54px; overflow:hidden;}
.highlight .con_ttl .highlight_ttl { display: inline-block; padding: 0 4em; text-align: center; color: #2c2c2c; font-size: 1em; position: relative; }
.highlight .con_ttl .highlight_ttl::before{ content: ""; position: absolute; top: -55px; left: 0; width: 164px; height: 124px; background: url(../img/decoration_left.png) no-repeat center / contain;}
.highlight .con_ttl .highlight_ttl::after{ content: ""; position: absolute; top: -30px; right: 0; width: 164px; height: 124px; background: url(../img/decoration_right.png) no-repeat center / contain;}

.highlight ul li { height: 360px; }
.highlight ul li .imgbox { width: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.highlight ul li .imgbox.copy_mizuno { position: relative; }
.highlight ul li .imgbox.copy_mizuno::after { content: "©水野克比古"; position: absolute; bottom: 5px; right: 5px; color: #fff; font-size: .8em; }
.highlight ul li:nth-child(2n) .imgbox { order: 1; }
.highlight ul li.hl01 .imgbox { background-image: url("../img/highlight_img01.jpg"); }
.highlight ul li.hl02 .imgbox { background-image: url("../img/highlight_img02.jpg?20240828"); }
.highlight ul li.hl03 .imgbox { background-image: url("../img/highlight_img03.jpg"); }
.highlight ul li.hl04 .imgbox { background-image: url("../img/highlight_img04.jpg"); }
.highlight ul li.hl05 .imgbox { background-image: url("../img/highlight_img05.jpg"); }
.highlight ul li .lead { position: relative; width: 50%;}
.highlight ul li .lead .num { margin: 0; color: #c2c2c2; font-size: 1.125em; }
.highlight ul li .lead .num span { font-size: 2em; }
.highlight ul li .lead .subttl { color: #c04020; font-size: 1.625em; font-weight: normal; }


.highlight ul li .lead > div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); width: 100%;  }
.highlight ul li:nth-child(odd) .lead > div { padding-left: 5%; }

/*event -----------------------*/
.event { position: relative; margin-top: 15%; }
.event::before { content: ""; position: absolute; top: -100px; display: block; width: 100%; height: 100%; background: #f0ece9; z-index: -1; }
.event .conttl { position: relative; }
.event .conttl .jp { position: absolute; top: 0; right: 0; height: 260px; font-size: 2.375em; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }
.event .conttl .en { font-size: 6.25em; margin: 0; color: #fff; line-height: 1.3; }
.event .subttl { font-size: 1.625em; color: #c04020; }
.event figure { width: 48%; }
.event figure img { width: 100%; }
.event .lead { width: 48%; }
.event .hour { padding: 5%; border: 2px solid #c04020; }
.event .hour h4 { color: #c04020; margin: 0; }
.event .hour .time { margin: 0; }
.event .hour .button { margin-top: 15px; margin-bottom: 0; }

/*special -----------------------*/
#special .con_ttl{ margin-bottom: 0.5em; }
.special { margin-top: 120px; }
.special_bg { margin-top: 34px; padding: 3em 0 4em; position: relative; }
.special_bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: url("../img/special_bg.jpg") center / cover; z-index: -1; opacity: .4; }
.special_bg.bg_2::before { background-image: url(../img/special_bg_2.jpg);}

.special_box .subttl{ margin-bottom: 1.0em; padding-bottom: 0.3em; font-size:clamp(1.25rem, 0.851rem + 1.7vw, 2rem); font-weight:normal; line-height: 1.4;
	text-align:center; border-bottom: 2px solid #d59180; }
.special_box.katana{ position:relative; z-index:1; padding-top:clamp(1.5em,4.6vw,50px); margin-top: clamp(3em,7.4vw,80px); }
.special_box.katana::before{ position:absolute; content:""; z-index:-1; width:100%; height:70%; top:0; left:0; background:rgb(0 0 0 / 5%); transform: skew(0deg,-6deg); }
.special_box.katana .intro-txt{ margin-bottom:0; }
.special_box .subcopy{ margin-block: 0.5em; text-align:center; font-size:clamp(1.063rem, 0.83rem + 0.99vw, 1.5rem); font-weight:normal; line-height:1.5; }
.special_box .subcopy.col{ margin-bottom:2.5em; text-align:center; font-size:1.2em; }
.special_box .subcopy.col .con{ display:inline-block; padding:0.1em 1.5em; color:#FFF; background:#9c1e23; }
.pic-box{ display:-webkit-box; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:2em; }
.pic-box .katana1{ width:67.2%; }
.pic-box .katana2{ width:31.5%; }
.img-center{ margin-inline:auto; }
.button.booking a{ margin-inline:auto; }

/* youtube */
.wrap-video { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; }
.video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0; }
.special_box.katana .wrap-video{ margin-top:2em; }

.special .one_image{ margin-top:clamp(2.5em,5.6vw,60px); }
.special .one_image .subttl{ font-size:clamp(1.125rem, 0.794rem + 1.41vw, 1.5rem); font-weight:normal; line-height:1.5; }
.special .one_image .img{ text-align:right; }
.special_head .lead { position: relative; }
.special_head .lead::before { content: ""; position: absolute; top: -5%; right: 0; left: 0; margin: 0 auto; width: 350px; height: 344px; background: url("../img/spcial_logo2.svg") no-repeat center / contain; z-index: -1; }
.special_head .lead .txt { margin-top: 2.5em; }
.special_head .lead .kome { margin-top: 1em; }
.special_head .img_box .img_ttl span { display: block; line-height: 1.5; position: relative; }
.special_head .img_box .img_ttl span::before { content: "見どころ"; position: absolute; top: 0; left: 0; padding: .2em .5em; line-height: 1.5; font-size: .9em; color: #fff; background-color: #957e60; }
.special .data th { width: 22%; background: #fff; }

/*access -----------------------*/
.access { margin-top: 5%; padding-bottom: clamp(3em,7.4vw,80px); }
.access .data {margin: 1% auto 1.5%;}
.map figure { width: 80%; margin: 0 auto; text-align: center; }
.map p { text-align:center; color: #c04020; font-size: 1.2em; }
.map figure img { max-width:100%; border: 1px solid #d0af4c;}
.access .button { margin: 0; }
.access .button a { margin: 30px auto 0; }


@media screen and (min-width: 600px) {
	
  .otherplan .subttl::before,
  .otherplan .subttl::after { content: ""; flex-grow: 1; height: 1px; background: #c04020; }
  .otherplan .subttl::before { margin-right: .4em; }
  .otherplan .subttl::after { margin-left: .4em; }
  
  .otherplan .subcopy { text-align: center; }
  .otherplan .txt { text-align: center; }
  
  .special_head { display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; }
  .special_head .lead { width: 40%; }
  .special_head .img_box { flex: 1; -webkit-box-flex: 1; margin-left: 5%; }

}

@media screen and (min-width: 960px) {

	.main .button a:hover { color:#FFF; }
  .special_head { align-items: center; }
  .special_head .img_box .img_ttl span { padding-left: 90px; }

	.intro-txt{ width:90%; }
	.d-list{ width:90%; }
	.col2{ display:flex; flex-wrap:wrap; gap:5%; }
	.col2 .pic{ width:56%; }
	.col2 .txt{ flex:1; }
	.col2 .txt .d-list{ width:auto; }

	.sorayama .subttl{ margin-top:-2.5em; margin-bottom:3em }

	.special_box.katana{ padding-bottom:2.5em; }
  
}

@media screen and (max-width:1100px){
	.inner { width: auto; margin-right:20px; margin-left:20px; }
}

@media screen and (max-width: 1024px) {
	
	.otherplan .detail .data th { width: 30%; }
	
	.highlight ul li .lead .subttl { font-size: 1.5em; }
	.event .conttl .en { font-size: 5em; }
	.event .conttl .jp { height: 300px; }
	footer .f_contact .ttl { font-size: 1.5em; }
	
}

@media screen and (min-width: 768px)and (max-width: 1024px) and (orientation: portrait) {
	.news {margin: 5% auto 7%;}
	.tbl {margin: 25px auto;}
	.highlight ul li .copyright {background-position: center left;}
	.access { margin-top: 80px;}
  
  .special_head .lead { width: 55%; }
  .special_head .img_box .img_ttl { margin-top: 0; }
  
}
	
@media screen and (max-width:959px){
	.event::before { top: -50px; }
  .special_head .img_box .img_ttl span::before { position: static; display: block; margin-bottom: .5em; text-align: center; }
	.sorayama .subttl{ margin-top:2.5em; }
}


@media screen and (min-width: 600px) and (max-width: 768px){
	.main .logo{ width: 25%; }
	.main .days{ width: 60%; }
	.lang_inner .inner{ margin-inline:5%; }
}


@media screen and (max-width:599px){
	
	.main{ height:600px; }
	.main .logo { width:35%; }
	.main .days { width:80%; bottom:2em; }
	.main .button{ top:15px; left:10px; }
	.main .button a { padding:0.2em 0.6em; font-size:0.8em; }
	.con_ttl { font-size: 1.6em; }
	.con_ttl::before{ width: 8px; height: 8px; }
	
	.night_button {top:50px; left: 10px; margin: 0;}
	.night_button span {font-size: 1.0em;}
	.night_button a {padding:2px 10px;}

	.data { width: 100%; margin: 0; }
	.data th, .data td { width: 100%; display: block; }
	.data td { padding-left: 0; padding-top: 2.5%; }
  
  .scrollWrap > .scroll > .hscroll { width: 800px; }

	/* instalive */
.instalive { .btn_list { gap: unset;} }
	
	.btn_list { margin-top: 1.5em; }
	.btn_list li { width: 100%; }
	.btn_list li + li { margin-top: 1em; }

	.about .data{margin:0 auto}
	.scrollWrap {padding-top: 15px;}

	/* 特典 */
	.tokuten dt, .tokuten dd { width: 100%; }
	.otherplan .subttl { display: block; font-size: 1.6em; }
	.otherplan .premium .detail .data { width: 100%; }
	.otherplan .premium .detail .button { width: 100%; }
	
	.otherplan .dinnerplan .detail .data { margin: 20px 0 15px 0; }
	.otherplan .dinnerplan .detail .leadbox { width: 100%; }
	.otherplan .dinnerplan .detail figure { width: 100%; }
	
	.otherplan .detail .data th,
  .otherplan .premium .detail .data.wide th { width: 100%; }
  
  .otherplan .subttl .reserve { display: block; margin-right: 0; text-align: center; }
  .otherplan .subttl .ttl { display: block; margin-top: .5em; line-height: 1.3; text-align: center; }
  
  .otherplan .subcopy { font-size: 1.2em; line-height: 1.5; }
	
	.special { margin-top: 60px; }
  .special .data th { width: 100%; }
	.button.booking a{ width:90%; }
	
	
	/* 見どころ ---------------------- */
	.highlight { margin-top: 65px; }
	.highlight .con_ttl {padding-bottom: 45px;}
	.highlight .con_ttl .highlight_ttl { padding: 0; }
	.highlight ul li { margin-bottom: 15px; height: auto; }
	.highlight ul li .imgbox { width: 100%; min-height: 220px; height: 100%; }
	.highlight ul li:nth-child(2n) .imgbox { order: 0; }
	.highlight ul li .lead { position: static; width: 100%; }
	.highlight ul li .lead .subttl { font-size: 1.3em; }
	.highlight ul li .lead > div { position: static; top: 0; left: 0; transform: none; }
	.highlight ul li:nth-child(odd) .lead > div { padding-left: 0; }

	.highlight .con_ttl .highlight_ttl::before {top: -25px; left: -50px; width: 114px; height: 124px; z-index: -1;}
	.highlight .con_ttl .highlight_ttl::after {position: absolute; top: -70px; right: -50px; width: 134px; height: 124px; z-index: -1;}
	
	/* イベント ---------------------- */
	.event::before { top: 35px; }
	.event .conttl .jp { position: static; margin: 0; height: auto; writing-mode: initial; }
	.event .conttl .en { display: none; }
	.event figure { width: 100%; order: 1; margin-top: 15px; }
	.event .lead { width: 100%; }
	
	/* アクセス ---------------------- */
	.access { margin-top: 80px; }
	.map figure { width: 100%; }
	.special_box .subcopy.col{ font-size: 0.9em; }
	
	/* フッター ---------------------- */
	footer .f_contact .inner div { width: 100%; }
	footer .f_contact .inner div { width: 100%; }
	footer .f_contact .ttl { font-size: 1.4em; border-right: none; }
	footer .copy { font-size: 10px; }
	
}