@charset "utf-8";


/* intro
----------------------------------------------- */

.intro {
	position: relative;
	margin: -113px 0 0;
	overflow: hidden;
	z-index: 1;
}
.intro__inner {
}
.intro__lists {
	position: relative;
	    margin: 0 140px 0 0;
	overflow: hidden;
	z-index: 1;
}
.intro__list {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.intro__list:first-child {
	position: relative;
}
.intro__image {
}
.intro__image img {
	display: block;
	width: 100%;
	height: auto;
}
.intro__image2 {
}
.intro__image2 img {
	display: block;
	width: 100%;
	height: auto;
}
.intro__header {
	position: absolute;
    right: 0;
    bottom: 0;
    padding: 35px 0 0 70px;
	background-color: #fff;
	z-index: 1;
}
.intro__title {
	display: block;
	margin: 0 -10px -13px 0;
	color: #333;
	font-family: 'Noto Serif JP', serif;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 56px;
}
.intro__title2 {
    display: block;
    margin: 0 -10px -13px 0;
    color: #333;
    font-family: 'Noto Serif JP', serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 56px;
}
.intro__pages {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 140px;
	z-index: 2;
}
.intro__page {
	margin: 5px 0;
	width: 9px;
	height: 9px;
	border: 1px solid #5d4b30;
	border-radius: 50%;
	background-color: #fff;
	box-sizing: border-box;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 0.2s;
}

/* current */

.intro__page--current {
	background-color: #5d4b30;
}

/* initial */

.intro__pages {
	opacity: 0;
}

.intro__list {
	visibility: hidden;
}
.intro__list .intro__image span {
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.intro__list .intro__image span:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
}
.intro__list .intro__image img {
	transform: translateX(-10%);
}
.intro__list .intro__image2 span {
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.intro__list .intro__image2 span:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
}
.intro__list .intro__image2 img {
	transform: translateX(-10%);
}
.intro__list .intro__title {
	transform: translateX(-110%);
	overflow: hidden;
}
.intro__list .intro__title span {
	display: block;
	transform: translateX(110%);
}

/* ready */

.intro__list--ready {
	transition-property: visibility;
	transition-duration: 0s;
	transition-delay: 2s;
}
.intro__list--ready .intro__image span:after {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
	will-change: transform;
}
.intro__list--ready .intro__image img {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}
.intro__list--ready .intro__image2 span:after {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
	will-change: transform;
}
.intro__list--ready .intro__image2 img {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}
.intro__list--ready .intro__title,
.intro__list--ready .intro__title span {
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

/* start */

.js-intro-start .intro__pages {
	opacity: 1;
	transition-property: opacity;
	transition-duration: 0.85s;
	transition-delay: 0.5s;
}

/* open */

.intro__list--open {
	z-index: 2;
	visibility: visible;
	transition-delay: 0s;
}
.intro__list--open .intro__image span:after {
	transform: scaleX(0);
	transform-origin: right;
	transition-duration: 1s;
}
.intro__list--open .intro__image img {
	transform: translateX(0);
	transition-duration: 1.25s;
}
.intro__list--open .intro__image2 span:after {
	transform: scaleX(0);
	transform-origin: right;
	transition-duration: 1s;
}
.intro__list--open .intro__image2 img {
	transform: translateX(0);
	transition-duration: 1.25s;
}
.intro__list--open .intro__title,
.intro__list--open .intro__title span {
	transform: translateX(0);
	transition-duration: 1.5s;
	transition-delay: 0.5s;
}

/* close */

.intro__list--close .intro__image span:after {
	transform: scaleX(1);
	transform-origin: left;
	transition-duration: 1s;
}
.intro__list--close .intro__image img {
	transform: translateX(10%);
	transition-duration: 1s;
}
.intro__list--close .intro__image2 span:after {
	transform: scaleX(1);
	transform-origin: left;
	transition-duration: 1s;
}
.intro__list--close .intro__image2 img {
	transform: translateX(10%);
	transition-duration: 1s;
}
.intro__list--close .intro__title,
.intro__list--close .intro__title span {
	transition-duration: 1s;
	transition-delay: 0s;
}
.intro__list--close .intro__title {
	transform: translateX(110%);
}
.intro__list--close .intro__title span {
	transform: translateX(-110%);
}


/* scroll
----------------------------------------------- */

.scroll {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 140px;
	height: 140px;
	z-index: 1;
	transform: rotate(90deg);
}
.scroll__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 140px;
	height: 10px;
}
.scroll__label {
	width: calc(100% - 80px);
	color: #403b31;
	font-family: 'EB Garamond', serif;
	font-size: 12px;
	font-weight: 500;
}
.scroll__bar {
	position: relative;
	width: 80px;
	height: 1px;
	background-color: #c6bbac;
	overflow: hidden;
	z-index: 1;
}
.scroll__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #715d3f;
	z-index: 1;
	transform: translateX(-110%);
	animation-name: scroll;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}


/* topnews
----------------------------------------------- */

.topnews {
}
.topnews__outer {
	position: relative;
	z-index: 1;
}
.topnews__inner {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.topnews__header {
	padding: 63px 0 0;
	width: 190px;
}
.topnews__list {
	width: calc(100% - 245px);
}
.topnews__more {
	margin: 32px 0 0;
}
.topnews__label {
	position: absolute;
	top: 41px;
    left: -46px;
	pointer-events: none;
	z-index: 1;
}


/* topabout
----------------------------------------------- */

.topabout {
	margin: 160px 0 0;
}
.topabout__outer {
	position: relative;
	z-index: 1;
}
.topabout__inner {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.topabout__column:first-child {
	width: 45.3%;
}
.topabout__column:last-child {
	width: 47.5%;
}
.topabout__title {
}
.topabout__title img {
	width: 100%;
	height: auto;
}
.topabout__summary {
	padding: 81px 0 0;
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 36px;
}
.topabout__lists {
	display: flex;
	flex-wrap: wrap;
	padding: 15px 0 0;
}
.topabout__list {
	position: relative;
	margin: 23px 0 0;
	padding: 0 0 0 25px;
	width: calc(50% - 25px);
	font-size: 16px;
	line-height: 26px;
	z-index: 1;
}
.topabout__list:nth-child(odd) {
	width: calc(31.5% - 25px);
}
.topabout__list:before {
	display: block;
	position: absolute;
	top: 8px;
	left: 0;
	content: "";
	width: 10px;
	height: 10px;
	vertical-align: middle;
	border-radius: 50%;
	background-color: #807a71;
}
.topabout__label {
	position: absolute;
	top: -9px;
	right: -50px;
	pointer-events: none;
	z-index: 1;
}


/* toptreatment
----------------------------------------------- */

.toptreatment {
	margin: 106px 0 0;
}
.toptreatment__outer {
	position: relative;
	z-index: 1;
}
.toptreatment__inner {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.toptreatment__column:first-child {
	position: relative;
	padding: 0 0 70px;
	width: 39%;
	/*z-index: 1;*/
}
.toptreatment__column:last-child {
	width: 52.5%;
}
.toptreatment__lists {
	padding: 29px 0 0;
}
.toptreatment__links {
}
.toptreatment__link {
	margin: 0 0 2px;
}
.toptreatment__more {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 285px;
}
.toptreatment__label {
	position: absolute;
	    top: -18px;
    left: -40px;
	pointer-events: none;
	z-index: 1;
}

/* text */

.toptreatment .textline {
	margin: 41px 0 0;
}


/* topfeatures
----------------------------------------------- */

.topfeatures {
	position: relative;
	margin: 121px 0 0;
	z-index: 2;
}
.topfeatures__outer {
	position: relative;
	z-index: 1;
}
.topfeatures__inner {
	position: relative;
	z-index: 2;
}
.topfeatures__items {
	display: flex;
	flex-wrap: wrap;
	margin: -17px 0 0 -1px;
}
.topfeatures__item {
	margin: 72px 0 0 1px;
	width: calc(50% - 1px);
}
.topfeatures__image {
	font-size: 0;
}
.topfeatures__image img {
	width: 100%;
	height: auto;
}
.topfeatures__header {
	display: flex;
	align-items: center;
	margin: 22px 50px 0 0;
}
.topfeatures__no {
	margin: 0 20px 0 0;
	color: #caa26f;
	font-family: 'EB Garamond', serif;
	font-size: 64px;
	opacity: 0.6;
}
.topfeatures__label {
	position: absolute;
	top: 18px;
	right: -110px;
	pointer-events: none;
	z-index: 1;
}
.topfeatures__more {
	margin: 50px auto 0;
	width: 285px;
}

/* text */

.topfeatures .textline {
	margin: 15px 50px 0 0;
}


/* topmessage
----------------------------------------------- */

.topmessage {
	margin: 136px 0 0;
}
.topmessage__outer {
	position: relative;
	z-index: 1;
}
.topmessage__inner {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
.topmessage__column {
	width: calc(50% - 32px);
}
.topmessage__column:last-child {
	position: relative;
	padding: 0 0 70px;
	z-index: 1;
}
.topmessage__image {
	font-size: 0;
}
.topmessage__image img {
	width: 100%;
	height: auto;
}
.topmessage__more {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 285px;
	z-index: 1;
}
.topmessage__label {
	position: absolute;
	top: 0;
	right: -87px;
	pointer-events: none;
	z-index: 1;
}

/* title */

.topmessage .title--h2 {
	margin: 23px 0 0;
}

/* text */

.topmessage .textline {
	margin: 41px 0 0;
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:1000px) {


	/* nav
	----------------------------------------------- */

	.js-nav-ready {
		background-color: transparent;
	}
	.js-nav-compact {
		background-color: #fff;
	}


	/* intro
	----------------------------------------------- */

	/* hover */

	.intro__page:hover {
		background-color: #5d4b30;
	}


	/* retina
	----------------------------------------------- */
	
	@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
	}


}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:999px) {


	body {
	}


	/* intro
	----------------------------------------------- */

	.intro {
		margin: 0;
	}
	.intro__lists {
		margin: 0;
	}
	.intro__header {
		padding: 30px 45px 0;
	}
	.intro__title {
		margin: -5px -5px -5px 0;
		font-size: 15px;
		font-weight: 700;
		text-align: left;
		letter-spacing: 0.2em;
		line-height: 28px;
	}
	
.intro__title2 {
    margin: -5px -5px -5px 0;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.2em;
    line-height: 28px;
}
	.intro__pages {
		flex-direction: row;
		justify-content: flex-start;
		position: absolute;
		top: auto;
		left: 45px;
		right: 0;
		bottom: 105px;
		margin: 0 0 0 -10px;
		width: auto;
	}
	.intro__page {
		margin: 0 0 0 10px;
		width: 7px;
		height: 7px;
	}


	/* scroll
	----------------------------------------------- */

	.scroll {
		display: none;
	}


	/* topnews
	----------------------------------------------- */

	.topnews__inner {
		display: block;
		padding: 33px 0 0;
	}
	.topnews__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		width: auto;
	}
	.topnews__list {
		width: auto;
	}
	.topnews__more {
		margin: 0;
	}
	.topnews__label {
		position: absolute;
		top: auto;
		left: auto;
		right: 202px;
		bottom: 15px;
	}
	.topnews__label img {
		width: auto;
		height: 35px;
	}


	/* topabout
	----------------------------------------------- */

	.topabout {
		margin: 72px 0 0;
	}
	.topabout__inner {
		display: block;
	}
	.topabout__column:first-child,
	.topabout__column:last-child {
		width: auto;
	}
	.topabout__summary {
		padding: 11px 0 0;
		font-size: 16px;
	}
	.topabout__lists {
		display: block;
		padding: 7px 0 0;
	}
	.topabout__list {
		margin: 17px 0 0;
		padding: 0 0 0 27px;
		width: auto;
	}
	.topabout__list:nth-child(odd) {
		width: auto;
	}
	.topabout__list:before {
		top: 9px;
	}
	.topabout__label {
		top: auto;
		right: -20px;
		bottom: -26px;
	}
	.topabout__label img {
		width: auto;
		height: 213px;
	}


	/* toptreatment
	----------------------------------------------- */

	.toptreatment {
		margin: 37px 0 0;
	}
	.toptreatment__inner {
		display: block;
	}
	.toptreatment__column:first-child {
		padding: 0;
		width: auto;
	}
	.toptreatment__column:last-child {
		width: auto;
	}
	.toptreatment__lists {
		padding: 24px 0 0;
	}
	.toptreatment__links {
		padding: 35px 0 0;
	}
	.toptreatment__link {
		margin: 0 0 1px;
	}
	.toptreatment__more {
		position: static;
		margin: 23px 0 0;
		width: auto;
	}
	.toptreatment__label {
		top: auto;
		left: 0;
		bottom: -12px;
	}
	.toptreatment__label img {
		width: auto;
		height: 43px;
	}

	/* text */

	.toptreatment .textline {
		margin: 33px 0 0;
	}


	/* topfeatures
	----------------------------------------------- */

	.topfeatures {
		margin: 62px 0 0;
	}
	.topfeatures__items {
		display: block;
		margin: -11px 0 0;
	}
	.topfeatures__item {
		margin: 33px 0 0;
		width: auto;
	}
	.topfeatures__header {
		justify-content: space-between;
		margin: 10px 0 0;
	}
	.topfeatures__no {
		margin: 0;
		text-align: right;
		order: 2;
	}
	.topfeatures__label {
		top: 5px;
		left: -55px;
		right: auto;
	}
	.topfeatures__label img {
		width: auto;
		height: 484px;
	}
	.topfeatures__more {
		margin: 20px 0 0;
		width: auto;
	}

	/* title */

	.topfeatures .title {
		letter-spacing: -0.02em;
	}

	/* text */
	
	.topfeatures .textline {
		margin: 3px 0 0;
	}


	/* topmessage
	----------------------------------------------- */

	.topmessage {
		margin: 72px 0 0;
	}
	.topmessage__inner {
		display: block;
	}
	.topmessage__column {
		width: auto;
	}
	.topmessage__column:last-child {
		margin: 22px 0 0;
		padding: 0;
	}
	.topmessage__image {
		margin: 0 -15px;
	}
	.topmessage__more {
		position: static;
		margin: 19px 0 0;
		width: auto;
	}
	.topmessage__label {
		top: -6px;
		left: 39px;
		right: auto;
	}
	.topmessage__label img {
		width: auto;
		height: 106px;
	}
	
	/* title */
	
	.topmessage .title--h2 {
		margin: 10px 0 0;
	}
	.topmessage .title--h2 span {
		letter-spacing: -1em;
	}
	
	/* text */
	
	.topmessage .textline {
		margin: 13px 0 0;
	}


}


/* keyframes
----------------------------------------------- */

@keyframes scroll {
	45% {
		transform: translateX(0);
	}
	90% {
		transform: translateX(110%);
	}
	90.1%,
	100% {
		transform: translateX(-110%);
	}
}