@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : spend.css
 author     : cnct_yamamoto
 style info : 過ごし方
=================================================================== */
/* -----------------------------------------------------------
	全体
----------------------------------------------------------- */
*{margin: 0;padding: 0;list-style: none;}
body {overflow-y:scroll;}
#spend #contents{margin: 0 auto !important;}
#spend #contents > *{font-family: "Noto Serif JP";}
/* -----------------------------------------------------------
	#header（cnct版）
----------------------------------------------------------- */
#header{width: 1190px;margin:0 auto 20px;}
#header #gnav li a{text-decoration: none;font-family: "Noto Serif JP";text-align: center;font-size:14px;font-weight: 600;line-height:1;letter-spacing: 2px;}
#header #gnav li a span{font-family: "EB Garamond";color: #D1B37B;font-size: 11px;font-weight: 400;line-height:1;display: block;margin-top: 4px;letter-spacing:normal;}
#header #gnav li.reservation a{color: #fff;}
/* -----------------------------------------------------------
	con_int
----------------------------------------------------------- */
#spend .con_int{
  padding:40px 0;
}
#spend .con_int h4 {
  text-align: center;
  margin-bottom: 27px;
  font-size: 24px;
  font-weight: 600;
  line-height: 170%;
  color: #291D1B;
  margin: 0;
}
#spend .con_int h4 span{
  display: block;
  color: #D1B37B;
  font-size: 24px;
  font-weight: 400;
  line-height: 170%;
  margin-top: -16px;
  font-family: "EB Garamond";
}

/* -----------------------------------------------------------
	course
----------------------------------------------------------- */
.course1 .ttl{background-color: #9C6B81;}
.course1 .time{color: #9C6B81;}
.course2 .ttl{background-color: #685178;}
.course2 .time{color: #685178;}
.course3 .ttl{background-color: #351422;}
.course3 .time{color: #351422;}
.course{margin-bottom: 120px;}
.course .ttl{padding: 16px 0;text-align: center;color: #fff;font-size: 24px;font-weight: 600;line-height: 170%;margin-bottom: 16px;}
.course .ttl span{font-size: 14px;font-weight: 400;line-height: 170%;display: block;margin-top: 8px;}
.course p.lead{font-size: 16px;font-weight: 400;line-height: 170%;text-align: center;margin-bottom: 64px;color: #000;}
.course .spot{display: flex;justify-content: space-between;margin-bottom: 48px;}
.course .spot .detail{width:400px;}
.course .spot .detail .heading{display: flex;margin-bottom: 24px;}
.course .spot .detail .heading .time{font-size: 24px;font-weight: 600;line-height:170%;margin-right: 16px;}
.course .spot .detail .heading .place{font-size: 32px;font-weight: 600;line-height:170%;}
.course .spot .detail .headline{color: #222;font-size: 20px;font-weight: 600;line-height: 170%;}
.course .spot .detail .text{color: #080628;font-size: 16px;font-weight: 400;line-height: 170%;}
.course .spot .detail .note{padding: 16px 20px;background-color: #F6F6EE;margin-top: 24px;display: inline-block;}
.course .spot .detail .note dl{display: flex;justify-content:flex-start;align-items: center;margin: 4px 0;}
.course .spot .detail .note dl dt{color: #866321;font-size: 16px;font-weight: 400;line-height: 170%;margin-right: 16px;min-width: 64px;text-align: right;}
.course .spot .detail .note dl dd{font-size: 16px;font-weight: 400;line-height: 170%;color: #222;}
.course .spot .detail .note dl dd span{font-size: 12px;}
.course .spot .img{width:500px;height: 280px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.course .spot .img img{width:100%;object-fit: cover;}
.course .root_list{padding-left: 16px;color: #4A3E3B;margin: 48px auto 48px calc(50% - 100px);width: 300px;position: relative;display: flex;gap: 16px;flex-direction: column;justify-content: center;align-items: start;}
.course .root_list::before {position: absolute;bottom: 0;left: 0;transform: translateX(-16px);content: '';width: 4px;height: 100%;border-right: 1px solid #7A1E1A;}
.course .root_list::after {position: absolute;bottom: -10px;left: -16px;content: '\25bc';color:#7A1E1A;font-size: 10px;}
.course .root_list .root_item{height: 30px;color:#291D1B;display: flex;justify-content: center;align-items: center;gap: 10px;white-space: nowrap;font-size: 14px;font-style: normal;font-weight: 600;}
