@charset "UTF-8";
/* ===================================================================
 LP サイト「リニューアル共通（ヘッダー・フッター付き）」テンプレート用：イベント詳細（本サイト /event/〜/ と同じ見た目）
 本サイト nd4b（css/pc.css・pc-page.css・sp.css・sp-page.css）の .event-single／.event-detail の規則と、要素の基本指定を抽出し、
 すべて #opus-rn-event の中に限定。書体はローカル TTF ではなく Google Fonts 版に置き換え。
 本サイト側のイベント詳細のデザインを変えたら、ここも合わせて更新すること。
==================================================================== */
/* 本サイトの html／body の基本指定（継承される値） */
#opus-rn-event{box-sizing:border-box;font-family:"Zen Kaku Gothic New",sans-serif;font-size:min(0.9722222222222222vw,14px);font-weight:400;line-height:180%;letter-spacing:min(0.09722222222222222vw,1.4px);text-align:justify;font-feature-settings:'palt';color:#574D43;word-break:break-all}
/* LP テーマ（canon）の *{word-break:break-word} を打ち消す */
#opus-rn-event *,#opus-rn-event *::before,#opus-rn-event *::after{word-break:inherit}
@media screen and (max-width:1023px){
  #opus-rn-event{color:#231815;font-size:13.5px;letter-spacing:.3px}
}
/* ---- pc.css ---- */
#opus-rn-event *,
#opus-rn-event *::before,
#opus-rn-event *::after{box-sizing: inherit;}
#opus-rn-event div,
#opus-rn-event h1,
#opus-rn-event h3,
#opus-rn-event p,
#opus-rn-event table,
#opus-rn-event th,
#opus-rn-event td{margin: 0; padding: 0;}
#opus-rn-event a{text-decoration: none;}
#opus-rn-event img{max-width: 100%; height: auto; vertical-align: bottom;}
#opus-rn-event a{color: inherit;}
#opus-rn-event a:link,
#opus-rn-event a:visited,
#opus-rn-event a:active{color:#7F7060;}
#opus-rn-event a:hover{text-decoration: none;}
#opus-rn-event table{border-collapse: collapse; border-spacing: 0;}
#opus-rn-event p{margin-bottom: min(1.7499999999999998vw,25.2px);}
#opus-rn-event h3{font-size: min(2.2222222222222223vw,32px); line-height: 180%; letter-spacing: min(0.2222222222222222vw,3.2px); margin-bottom: min(1.1111111111111112vw,16px);}
#opus-rn-event .event-single{background-color:#fff; background-image:url('https://opusstyle.jp/wp/wp-content/themes/nd4b/images/common/bg-texture.png'); background-position:left top; background-repeat:repeat; background-size:40px 40px;}
#opus-rn-event .ws-detail__bread-bar{background:#ECE6DD;padding:6px max(4%,calc((100% - 1180px)/2));border-bottom:1px solid #ece6dd;font-size:12px;color:#574d43;letter-spacing:.06em}
#opus-rn-event .ws-detail__bread-bar a{color:#574d43; text-decoration:none;}
#opus-rn-event .event-detail--standard{box-sizing:border-box; width:clamp(606.578px,59.167vw,852px); max-width:none; margin:0 auto; padding:clamp(45.511px,4.444vw,64px) 0 clamp(85.333px,8.333vw,120px);}
#opus-rn-event .event-detail__mainimg{margin:32px 0 24px;}
#opus-rn-event .event-detail__mainimg img{width:100%; height:auto; display:block;}
#opus-rn-event .event-detail__head{margin:0 0 20px;}
#opus-rn-event .event-detail__ttl{margin:8px 0 0; color:#574d43; font-family: YakuHanMP, "Shippori Mincho", "NotoSerifJP-Regular", serif; font-size:26px; font-weight:400; line-height:1.5;}
#opus-rn-event .event-detail__table{width:100%; border-collapse:collapse; margin:0 0 24px;}
#opus-rn-event .event-detail__table th,
#opus-rn-event .event-detail__table td{padding:14px 10px; border-top:1px solid #d9d9d9; font-size:14px; text-align:left; font-weight:400;}
#opus-rn-event .event-detail__table th{width:140px; color:#7f7060;}
#opus-rn-event .event-detail__table td{color:#574d43;}
#opus-rn-event .event-detail__table tr:last-child th,
#opus-rn-event .event-detail__table tr:last-child td{border-bottom:1px solid #d9d9d9;}
#opus-rn-event .event-detail__jumpbtn{text-align:center; margin:0 0 32px;}
#opus-rn-event .event-detail__jumpbtn a{display:inline-block; width:100%; max-width:400px; padding:16px; background:#a31717; color:#fff; text-decoration:none; font-size:14px; letter-spacing:.06em; text-align:center;}
#opus-rn-event .event-detail__jumpbtn a:hover{opacity:.85;}
#opus-rn-event .event-detail__checkpoint{margin:0 0 32px; padding:24px; background:#f5f3ef;}
#opus-rn-event .event-detail__checkpoint h3{margin:0 0 12px; font-size:16px; color:#a31717; letter-spacing:.06em;}
#opus-rn-event .event-detail__checkpoint .text p{margin:0; font-size:14px; line-height:1.9; color:#574d43;}
#opus-rn-event .event-detail__contenttitle{margin:0 0 16px; font-size:20px; color:#574d43; font-weight:400; font-family: YakuHanMP, "Shippori Mincho", "NotoSerifJP-Regular", serif;}
#opus-rn-event .event-detail__form{padding-top:40px; border-top:1px solid #d9d9d9;}
#opus-rn-event .event-detail__formhead{margin:0 0 24px; text-align:center; font-size:18px; color:#574d43;}
#opus-rn-event #page .event-single .event-detail--standard h3{min-width:0; max-width:none; border:0;}
#opus-rn-event #page .event-single .event-detail--standard .event-detail__checkpoint h3,
#opus-rn-event #page .event-single .event-detail--standard .event-detail__contenttitle{margin-top:0;}
#opus-rn-event .event-single .event-detail--standard img{max-width:100%; margin:0;}
#opus-rn-event .event-single .event-detail--standard .form{margin-top:0;}
#opus-rn-event .event-single .event-detail--standard .form-btn a{box-sizing:border-box; margin:0 auto; border-radius:0; max-width:400px;}
@media screen and (min-width:1441px){
  #opus-rn-event #page:not(#z) div.ws-detail__bread-bar > span > span,
  #opus-rn-event #page:not(#z) div.ws-detail__bread-bar.breadcrumbs{font-size:16px!important}
}
/* ---- pc-page.css ---- */
#opus-rn-event #page h1{color: #574D43; font-size: 28px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: 0.2em; padding: 0 0 0.75em;}
#opus-rn-event #page h3{font-size:25px; line-height: 34px; margin-bottom:20px; font-weight: 500;}
#opus-rn-event #page table{border-left:1px solid #000; border-top:1px solid #000; border-collapse: collapse; border-spacing: 0; margin:30px 0; width:100%;}
#opus-rn-event #page th{text-align: left; font-weight: normal; border-right:1px solid #000; border-bottom:1px solid #000; padding:12px;}
#opus-rn-event #page td{text-align: left; font-weight: normal; border-right:1px solid #000; border-bottom:1px solid #000; padding:12px;}
#opus-rn-event .event-single .form-btn a:hover{opacity: 0.8;}
#opus-rn-event .event-single .form-btn a{display: flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; color: #fff; font-size: 16px; border-radius: 30px; text-align: center; margin: 50px auto 80px; width: 100%; max-width: 620px; padding: 1.2em 1em; position: relative; transition: 0.3s; background-color: #B31815; border: 1px solid #B31815;}
#opus-rn-event #page .event-single th,
#opus-rn-event #page .event-single td,
#opus-rn-event #page .event-single table{border-color: #E9E9E9;}
#opus-rn-event .event-single .checkpoint{margin-bottom: 50px;}
#opus-rn-event .event-single .checkpoint div.text{white-space: pre-wrap;}
#opus-rn-event #page .event-single h3{border-bottom: 1px solid #F5F2EC; font-size: 22px; line-height: 1; margin: 20px auto; padding-bottom: 10px; font-weight: 300;}
#opus-rn-event .event-single img{margin:15px 0;}
#opus-rn-event .event-single .form{margin-top:30px;}
#opus-rn-event .nokoriwazuka-a{width: 180px; margin:0 0 12px 0; font-size: 0.9em; padding: 5px; color: #B31815; text-align: center; border:1px solid #B31815;}
/* ---- sp.css ---- */
@media screen and (max-width: 1023px){
  #opus-rn-event .ws-detail__bread-bar{padding:10px 16px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #opus-rn-event div,
  #opus-rn-event h1,
  #opus-rn-event h3,
  #opus-rn-event p,
  #opus-rn-event table,
  #opus-rn-event th,
  #opus-rn-event td{margin: 0; padding: 0;}
  #opus-rn-event a{text-decoration: none;}
  #opus-rn-event img{vertical-align: baseline; max-width: 100%; height: auto; vertical-align: bottom;}
  #opus-rn-event h1,
  #opus-rn-event h3,
  #opus-rn-event p,
  #opus-rn-event table,
  #opus-rn-event th,
  #opus-rn-event td{line-height: 165%; letter-spacing: 0.09em; color: #574d43;}
  #opus-rn-event h1,
  #opus-rn-event h3{font-weight: normal; letter-spacing: 0;}
  #opus-rn-event a{color: inherit;}
  #opus-rn-event a:link,
  #opus-rn-event a:visited,
  #opus-rn-event a:hover,
  #opus-rn-event a:active{color:#515151;}
  #opus-rn-event a:hover{text-decoration: none;}
  #opus-rn-event img{max-width: 100%;}
}
@media screen and (max-width: 1023px){
  #opus-rn-event .ws-detail__bread-bar{font-size:10px; padding:10px 6%;}
  #opus-rn-event .event-detail--standard{box-sizing:border-box; width:auto; max-width:none; padding:32px 16px 72px;}
  #opus-rn-event .event-detail--standard .event-detail__mainimg{margin:0 0 20px;}
  #opus-rn-event .event-detail__ttl{font-size: 20px;}
  #opus-rn-event .event-detail--standard .event-detail__table{table-layout:fixed; margin-bottom:24px;}
  #opus-rn-event .event-detail--standard .event-detail__table th{width:80px; padding:12px 8px; font-size:12px;}
  #opus-rn-event .event-detail--standard .event-detail__table td{padding:12px 8px; font-size:12px; overflow-wrap:anywhere;}
  #opus-rn-event .event-detail--standard .event-detail__table iframe{width:100%; max-width:100%;}
  #opus-rn-event .event-detail--standard .event-detail__jumpbtn{display:block; margin-bottom:32px;}
  #opus-rn-event .event-detail--standard .event-detail__jumpbtn a{width:100%; max-width:none; padding:16px 12px; font-size:14px;}
  #opus-rn-event .event-detail--standard .event-detail__checkpoint{padding:20px 16px;}
  #opus-rn-event .event-detail--standard .event-detail__form{padding-top:32px;}
}
@media screen and (max-width:1023px){
  #opus-rn-event .ws-detail__bread-bar{padding:10px 16px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media screen and (max-width:1023px){
  #opus-rn-event #page .breadcrumbs{font-size:10px;line-height:32px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #opus-rn-event #page .breadcrumbs a{text-decoration:none}
}
/* ---- sp-page.css ---- */
@media screen and (max-width: 1023px){
  #opus-rn-event table{text-align: left;}
  #opus-rn-event th{font-weight: normal;}
  #opus-rn-event #page h1{font-size:16px; text-align: center; padding:60px 0 50px 0; line-height: 32px;}
  #opus-rn-event #page h3{margin:10px 0; font-weight: 500; font-size:18px; line-height: var(--page-h3-line-height, 28px)!important;}
  #opus-rn-event #page .event-single p{width: 100%; min-width:  90%!important; max-width: 90%!important; margin: auto;}
  #opus-rn-event #page .event-single th{width: 20vw; padding: 3px; text-align: center;}
  #opus-rn-event .event-single h3{margin:10px 0; font-weight: 500; font-size:18px;}
  #opus-rn-event #page .event-single h3,
  #opus-rn-event #page .event-single .checkpoint h3{min-width: 90% !important; max-width: 90% !important; margin: auto auto 15px; font-size: 18px; font-weight: 300; padding-bottom: 5px;}
  #opus-rn-event .event-single .checkpoint{margin: auto auto 30px;}
  #opus-rn-event #page .event-single table{margin: 20px 0;}
  #opus-rn-event .event-single img{margin: 0 auto;}
}
@media screen and (max-width:1023px){
  #opus-rn-event #page .breadcrumbs{font-size:10px;line-height:32px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ---- 予約フォームの枠（本サイトの .event-detail__form と同じ寸法）。form.css の指定を保つため #opus-rn-event の外に置く ---- */
#opus-rn-event .event-detail--standard{padding-bottom:0}
/* 末尾の余白（見どころの下 32px）が枠の外へ抜けて白い帯にならないようにする */
#opus-rn-event .event-single{display:flow-root}
.opus-rn-eventform{padding:0 0 clamp(85.333px,8.333vw,120px);background:#fff url('https://opusstyle.jp/wp/wp-content/themes/nd4b/images/common/bg-texture.png') left top / 40px 40px repeat;color:var(--opus-rn-form-ink);font-family:"Zen Kaku Gothic New",sans-serif}
.opus-rn-eventform__inner{box-sizing:border-box;width:clamp(606.578px,59.167vw,852px);margin:0 auto;padding-top:40px;border-top:1px solid var(--opus-rn-form-line)}
.opus-rn-eventform__head{margin:0 0 24px;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:1.4px;text-align:center;color:var(--opus-rn-form-ink)}
.opus-rn-eventform__note{max-width:850px;margin:32px auto 0}
.opus-rn-eventform__note p{margin:0 0 .4em;font-size:15px;line-height:1.8;letter-spacing:.06em;text-align:left;color:var(--opus-rn-form-ink)}
.opus-rn-eventform__note a{color:var(--opus-rn-form-ink);text-decoration:underline}
@media screen and (min-width:1441px){
  .opus-rn-eventform__note p{font-size:16px}
}
@media screen and (max-width:1023px){
  .opus-rn-eventform{padding:0 16px 72px}
  .opus-rn-eventform__inner{width:auto;padding-top:32px}
  .opus-rn-eventform__head{line-height:29.7px;letter-spacing:1.62px}
  .opus-rn-eventform__note p{font-size:14px}
}