@charset "utf-8";

:root{
	--main-color: #EBDCBB;
	--hover-text: #CAB057;
	--deep-color: #D5B269;
}

body{ min-width: 1250px; font-family: "Noto Sans JP"; font-weight: 300; font-size: 18px; }
.inner { width: 1200px; margin: 0 auto; padding: 0 25px; box-sizing: content-box; }
.s-inner { width: 1100px; margin: 0 auto; padding: 0 25px; box-sizing: content-box; }
.sp-only{ display: none; }

/* --------------------------------------------------------------------------- title */
.main-title { padding-bottom: 20px; position: relative; text-align: center; font-size: 40px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; line-height: 150%; }
.main-title:before{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); width: 90px; height: 2px; background: var(--deep-color); }


/* --------------------------------------------------------------------------- buttom */
.button{ width: 280px; }
.button a{ transition: all 0.2s; position: relative; display: flex; align-items: center; gap: 20px; padding: 23px 20px 23px 40px; text-align: center; }
.button a:before{ z-index: -1; content: ""; position: absolute; width: 69px; height: 69px; left: 0; top: 50%;transform: translateY(-50%) scaleX(1); transition: all 0.5s; transform-origin: left center; background: #E7D4AB; border-radius: 100px; }
.arrow{ display: block; transform: skew(45deg); width: 30px; height: 7px; border-right: 1px solid #000; border-bottom: 1px solid #000; }

.button a:hover:before{ width: 100%; }


/* --------------------------------------------------------------------------- header */
header{ min-width: 1250px; position: fixed; z-index: 110; left: 0; top: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 3% 18px;  background: url(../images/common/bg_header.png) center/cover no-repeat;  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); }
.header__logo{ width: 162px; }

.burger-menu{ width: calc(100% - 180px); text-align: right; }
.header__text{ padding-bottom: 20px; font-size: 12px; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; }
.header__menu{ display: flex; align-items: center; justify-content: flex-end; }
.header__menu a{ padding: 5px 15px; border-right: 1px solid #000; font-size: 16px; }
.header__menu a:last-of-type{ padding-right: 0; border: none; }


/* --------------------------------------------------------------------------- cta */
.cta-links{ padding: 75px 0 0; }
.cta-links-list{ width: 1000px; margin: 0 auto; display: flex; align-items: stretch; gap: 20px; }
.cta-links li{ width: calc((100% - 20px) / 3); }
.cta-links a{ transition: all 0.2s; position: relative; display: block; padding: 22px 20px; text-align: center; border: 1px solid #000; background: #000; color: #fff; }
.cta-links a .arrow{ position: absolute; right: 20px; top: 50%; transform: translate(0,-50%) skew(45deg); border-color: #fff; }
.cta-links a:hover{ background: #fff; color: #000; }
.cta-links a:hover .arrow{ border-color: #000; }

.cta { padding: 70px 0 80px; background: url(../images/index/bg_02.png) 120% 150%/680px no-repeat; }
.cta-inner{ width: 830px; margin: 0 auto; }
.cta__box{ background: url(../images/common/bg_cta.jpg) center/cover no-repeat; text-align: center; padding: 40px; }
.cta__box h3{font-size: 35px;line-height: 160%; font-family: "Zen Old Mincho", serif; font-weight: 600; font-style: normal; }
.cta__text{width: 87%; margin: 25px auto 0; background: #fff; padding: 25px;}
.cta__text p { font-size: 16px; line-height: 200%; }
.cta__text p span{font-size: 22px; line-height: 100%; padding: 0 0 20px; display: inline-block;}

.cta .news-more{padding: 30px 0 0;}
.cta .news-more a {background: #000; width: 274px; margin: 0 auto; border: 1px solid #000; }
.cta .news-more a p {line-height: 100%; font-size: 16px;}
.cta .news-more a:hover {background: #fff; color: #000; border: 1px solid #000;}
.cta .news-more a .arrow{right: 9px;}
.cta .news-more a:hover .arrow{ border-color: #000;}
/* --------------------------------------------------------------------------- footer */
footer{ padding: 70px 0 60px; background: #000; color: #fff; text-align: center; }
.footer__logo{ padding-bottom: 80px; }
.footer__nav{ padding-bottom: 110px; }
.footer__nav a{ padding: 0 20px; color: #fff; font-size: 14px; font-family: "Noto Sans JP"; font-weight: 500; }
.copyright{ font-size: 10px; }


/* --------------------------------------------------------------------------- news */
#news { padding: 0 0 100px; }
#news .main-title { margin-bottom: 40px; font-size: 40px; letter-spacing: 0.1em; }
.news__box { padding: 45px 50px 85px; background: #F5F2EC; }

.news-list { margin-bottom: 48px; }
.news-item { border-bottom: 1px solid #EAEAEA; }
.news-item a { display: flex; align-items: center; gap: 10px; padding: 22px 0; transition: color 0.2s; }
.news-item a:hover { color: var(--hover-text); }

.news-item__date { width: 110px; line-height: 170%; }
.news-item__title { width: calc(100% - 140px); line-height: 170%; font-size: 16px; }

.news-more { width: 325px; margin: 0 auto; }
.news-more a { position: relative; display: block; padding: 20px 20px; text-align: center; border: 1px solid var(--main-color); color: #fff; background: var(--deep-color); font-size: 19px; }
.news-more .arrow{ position: absolute; right: 20px; top: 50%; transform: translate(0,-50%) skew(45deg); width: 30px; border-color: #fff; }
.news-more a:hover { background: var(--hover-bg); color: var(--hover-text); }
.news-more a:hover .arrow{ border-color: var(--main-color); }



/* --------------------------------------------------------------------------- coming soon / empty */
	.coming-soon {
		width: 100%;
		box-sizing: border-box;
		padding: 90px 25px;
		text-align: center;
		background: #efefef;
	}
	.coming-soon__label {
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
		font-size: 32px;
		line-height: 150%;
		color: #000;
	}
	.coming-soon__text {
		padding: 24px 0 0;
		font-family: "Noto Sans JP";
		font-weight: 300;
		font-size: 16px;
		line-height: 200%;
		color: #9A9A9A;
	}

	/* 一覧ページの空状態もサイトトーンに統一 */
	.list_box__empty,
	.news_list__empty {
		list-style: none;
		width: 100%;
		box-sizing: border-box;
		padding: 90px 25px;
		text-align: center;
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
		font-size: 28px;
		line-height: 150%;
		color: #000;
	}
	.news-item--empty {
		padding: 50px 0;
		text-align: center;
		font-family: "Noto Sans JP";
		font-weight: 300;
		color: #9A9A9A;
		font-size: 16px;
	}


/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	body{ min-width: 100%; font-size: 14px; }
	.inner{ width: 90%; padding: 0; }
	.s-inner{ width: 90%; padding: 0; }
	.pc-only{ display: none; }
	.sp-only{ display: block; }

/* --------------------------------------------------------------------------- title */
	.main-title { font-size: 25px; padding-bottom: 15px; }
	.main-title::before{ width: 70px; border-width: 1px; }

/* --------------------------------------------------------------------------- buttom */
	.button{ width: 240px; }
	.button a{ padding: 19px 20px 19px 30px; font-size: 15px; }
	.button a::before{ width: 50px; height: 50px; }
	.arrow{ width: 30px; }

/* --------------------------------------------------------------------------- header */
	header{ min-width: 100%; padding: 0; }
	.header__logo{ width: 90px; margin-left: 2%; }
	.burger-menu{ width: 43%; padding-left: 4%; text-align: left; }
	.header__text{ padding-bottom: 0; font-size: 0.6em; line-height: 150%; }

	.header__menu { opacity: 0; visibility: hidden; width: 90%; position: fixed; z-index: 200; background: #fff; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 10%; z-index: 100; position: fixed; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); }
	.header__menu a { display: block; margin-bottom: 20px; font-size: 16px; color: #fff; padding-left: 30px; position: relative; }
	.header__menu a:before{ position: absolute; content: ""; left: 0; top: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: #fff; }
	
	.burger-btn { z-index: 150; width: 60px; height: 60px; position: relative; margin: 0 0 0 auto; background: #000; }
	.burger-btn span { transition: all 0.3s; position: absolute; left: 50%; transform: translateX(-50%); width: 50%; height: 1px; display: block; background: #fff; }
	.burger-btn span:first-of-type { top: 35%; }
	.burger-btn span:nth-of-type(2) { top: 50%; }
	.burger-btn span:last-of-type { top: 65%; }
	
	.is-active .header__menu{ opacity: 1; visibility: visible; }
	.burger-btn.is-active{ background: none; }
	.burger-btn.is-active span{ background: #fff; left: 50%; transform: translate(-50%,0); }
	.burger-btn.is-active span:first-of-type { top: 50%; transform: translate(-50%,0) rotate(45deg); }
	.burger-btn.is-active span:nth-of-type(2) { opacity: 0; }
	.burger-btn.is-active span:last-of-type { top: 50%; transform: translate(-50%,0) rotate(-45deg); }


/* --------------------------------------------------------------------------- cta */
	.cta-links { padding: 25px 0 0; }
	.cta-links-list { gap: 15px; width: 90%; margin: 0 auto; flex-direction: column; }
	.cta-links li { width: 100%; }
	.cta-links a { padding: 19px 20px; font-size: 15px; }

	.cta{ padding: 30px 0 50px; background: url(../images/index/bg_02.png) 150px 140px/600px no-repeat; }
	.cta-inner{ width: 90%; }
	.cta__box{ padding: 20px 0 25px; }
	.cta__box h3{font-size: 20px;}
	.cta__text{width: 85%; margin: 15px auto 0; font-size: 12px; padding: 17px 0 18px;}
	.cta__text p{ font-size: 12px; }
	.cta__text p span{ padding: 0 0 10px; font-size: 18px; }
	

	.cta .news-more{padding: 14px 0 0;}
	.cta .news-more a p {line-height: 100%; font-size: 15px;}
	.cta .news-more a{width: 100%; max-width: 240px;}
/* --------------------------------------------------------------------------- footer */
	footer { padding: 45px 0 50px; }
	.footer__logo { padding-bottom: 30px; }
	.footer__logo img { max-width: 145px; height: auto; }
	.footer__nav { display: flex; flex-direction: column; gap: 18px; width: 90%; margin: 0 auto; padding-bottom: 55px; text-align: left; }
	.footer__nav a { position: relative; padding: 0 0 0 25px;; font-size: 14px; }
	.footer__nav a:before{ content: ""; position: absolute; left: 0; top: 50%; transform: translate(0,-50); width: 15px; height: 1px; background: #fff; }

	.copyright { font-size: 11px; }
	
	
/* --------------------------------------------------------------------------- news */
	#news { padding: 0; }
	#news .inner{ width: 100%; }
	#news .main-title { margin-bottom: 20px; font-size: 25px; }

	.news__box { padding: 20px 5% 35px; }
	.news-list { margin-bottom: 35px; }
	.news-item a { padding: 14px 0; }
	.news-item__date { width: 90px; }
	.news-item__title { width: calc(100% - 100px); font-size: 14px; line-height: 150%; }

	.news-more{ width: 90%; margin: 0 auto; }
	.news-more a { padding: 15px 15px; font-size: 14px; }

/* --------------------------------------------------------------------------- coming soon / empty */
	.coming-soon { padding: 60px 20px; }
	.coming-soon__label { font-size: 22px; }
	.coming-soon__text { padding: 16px 0 0; font-size: 13px; }

	.list_box__empty,
	.news_list__empty { padding: 60px 20px; font-size: 20px; }
	.news-item--empty { padding: 35px 0; font-size: 13px; }

}