@charset "UTF-8";

/* ============================== */

/* 杉並区 */

/* ============================== */

/* 個別設定 */

.bgwrap{
	background: url(../img/bg.png);
	background-position: center;
	background-size: cover;
}

@media screen and (max-width: 768px) {
	.mv .page_ttl_area {
		padding-block: 6% 70%;
		background: none;
	}
}

/* section._com */

section._com .box{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: start;
}

section._com .p01{
	margin-bottom: 100px;
	padding: 15px 0;
	background: #726934;
	text-align: center;
	color: #fff;
	font-size: clamp(10px, 4vw, 28px);
	font-weight: bold;
	letter-spacing: 0.3em;
}

section._com .p02{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 30px;
	position: relative;
	text-align: center;
	font-size: clamp(10px, 3vw, 25px);
	font-weight: bold;
	letter-spacing: 0.2em;
}

section._com .p02::before{
	content: "";
	width: calc((100% - 10.4em) / 2);
	height: 1px;
	margin-right: 1em;
	background: #726934;
	position: absolute;
	bottom: 15px;
	left: 0;
}

section._com .p02::after{
	content: "";
	width: calc((100% - 10.4em) / 2);
	height: 1px;
	margin-left: 0.8em;
	background: #726934;
	position: absolute;
	bottom: 15px;
}

section._com .p02._l::before{
	width: calc((100% - 26em) / 2);
}

section._com .p02._l::after{
	width: calc((100% - 26em) / 2);
}

section._com .p03{
	margin: 200px auto 120px;
	padding: 15px;
	background: #DDDCD4;
	font-size: clamp(10px, 3vw, 25px);
	text-align: center;
	letter-spacing: 0.2em;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	section._com .box{
	}

	section._com .p01{
		margin-bottom: 50px;
		padding: 15px 0;
		/* background: #DDDCD4; */
		font-size: clamp(10px, 5.2vw, 28px);
		letter-spacing: 0.2em;
	}

	section._com .p02{
		font-size: clamp(10px, 5vw, 25px);
	}

	section._com .p02::before{
		bottom: 7px;
	}

	section._com .p02::after{
		bottom: 7px;
	}

	section._com .p02._l::before{
		width: calc((100% - 12em) / 2);
		bottom: 20px;
		left: -5vw;
	}

	section._com .p02._l::after{
		width: calc((100% - 12em) / 2);
		bottom: 20px;
	}

	section._com .p03{
		margin: 200px auto 50px;
		font-size: clamp(10px, 5.5vw, 25px);
		line-height: 1.5;
	}
}

/* section._01 */

section._01{
	padding-top: 150px;
}

section._01 .imgbox{
	width: 32%;
}

section._01 .imgbox .anno{
	margin-top: 15px;
}

section._01 .p01{
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	section._01{
		padding-top: 80px;
	}

	section._01 .imgbox{
		width: 80%;
		margin: 0 auto;
	}

	section._01 .imgbox .anno{
		margin-top: 10px;
	}
}

/* section._02 */

section._02{
	padding: 150px 0;
}

section._02 .p02{
	margin: 120px auto 50px;
}

section._02 .box._tt{
	background: #fff;
	border-radius: 10px;
}

section._02 .box._tt .item_l{
	width: 57%;
	padding-top: 1.8vw;
	box-sizing: border-box;
}

section._02 .box._tt .item_ll{
	margin-right: 20px;
}

section._02 .box._tt .item_ll .anno{
	font-size: clamp(7px, 1vw, 12px);
	position: relative;
	bottom: -30px;
}

section._02 .box._tt .item_r{
	width: 43%;
}

section._02 .box._tt p{
	font-weight: 600;
}

section._02 .box._tt p span{
	font-family: "cormo", serif;
	font-size: 1.2em;
}

section._02 .box._tt .p10{
	font-size: clamp(10px, 7vw, 65px);
	letter-spacing: 0.08em;
}

section._02 .box._tt .p20{
	font-size: clamp(10px, 5vw, 45px);
	letter-spacing: 0.08em;
}

section._02 .box._tt .p30{
	position: relative;
	bottom: -1.5em;
	font-size: clamp(10px, 10vw, 16px);
	font-weight: normal;
	letter-spacing: 0.08em;
}

section._02 .box._tt .p40{
	font-size: clamp(10px, 10vw, 45px);
}

section._02 .box._tt .p40 span{
	font-size: clamp(10px, 20vw, 200px);
}

section._02 .box._t .item._l{
	width: 50%;
}

section._02 .box._t .item._r{
	width: 46%;
	position: relative;
}

section._02 .box._t ul.flex{
	flex-direction: column;
}

section._02 .box._t .li{
	width: 100%;
	margin-bottom: 8px;
	padding: 18px 0 15px 15px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 15px;
}

section._02 .box._t .li p{
	font-size: clamp(10px, 2vw, 22px);
	font-weight: bold;
	line-height: 0.8;
}

section._02 .box._t .li span{
	color: #000;
	font-size: clamp(7px, 0.8vw, 12px);
}

section._02 .box._b .item{
	width: 31%;
}

section._02 .cover{
	width: 112%;
	height: 150vw;
	padding-top: 25px;
	background: #F0F0F0;
	margin-top: -90vw;
	margin-left: -6vw;
	box-shadow: 0 -5px 5px -5px #000;
	position: relative;
	z-index: 1;
	transition: 2s;
}

section._02 .cover.open{
	margin-top: 0;
	transition: 2s;
}

section._02 .cover .close{
	margin-top: -1em;
	opacity: 0;
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover.open .close{
	opacity: 1;
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover .read{
	opacity: 1;
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover.open .read{
	opacity: 0;
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover.open .arrow{
	transform: rotate(180deg);
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover .arrow{
	max-width: 50px;
	margin: 0 auto;
	display: block;
	transition: 2s;
	transition-delay: 1s;
}

section._02 .cover .read, section._02 .cover .close{
	font-size: clamp(10px, 3vw, 16px);
	text-align: center;
}

section._02 .cover .read{
	margin-top: 20px;
}

section._02 .item._c{
	padding-bottom: 1vw;
	background: #E3E1D6;
}

section._02 .item .txtbox{
	width: 90%;
	height: 320px;
	margin: 0 auto;
	padding: 35px 6%;
	box-sizing: border-box;
	background: #fff;
}

section._02 .item .txtbox .p10{
	width: fit-content;
	margin-bottom: 20px;
	padding: 3px 6px;
	box-sizing: border-box;
	background: #F4EFEF;
	color: #723434;
	font-size: clamp(10px, 1.5vw, 17px);
}

section._02 .item .txtbox .p20{
	margin-bottom: 25px;
	font-size: clamp(10px, 1.5vw, 20px);
}

section._02 .item .txtbox .p30{
	font-size: clamp(10px, 1.2vw, 14px);
	line-height: 2;
}

section._02 .slider .item{
	margin: 0 10px;
}

.slick-arrow{
	width: 40px;
	position: absolute;
	bottom: -15px;
}

.slick-arrow.prev-arrow{
	left: 20vw;
}

.slick-arrow.next-arrow{
	right: 20vw;
}

.slick-dots{
	margin-top: 40px;
	display: flex;
	justify-content: center;
	font-size: 0;
}

.slick-dots li:nth-of-type(2){
	margin: 0 5px;
}

.slick-dots li button {
    width: 30px;
    height: 10px;
    padding: 0;
    background: #726934;
		border: none;
    border-radius: 30px;
    opacity: 0.25;
}

.slick-dots li button:before {
    display: none;
}

.slick-dots li.slick-active button {
    opacity: 1;
}

section._02 .box._bb{
	margin-top: 80px;
	padding: 30px;
	box-sizing: border-box;
	border: 1px solid #726934;
	background: #fff;
}

section._02 .box._bb .item_l{
	width: 52%;
}

section._02 .box._bb .item_r{
	width: 40%;
}

section._02 .box._bb .p10{
	font-size: clamp(10px, 2.5vw, 25px);
}

section._02 .box._bb .p20{
	margin-top: 5px;
	font-size: clamp(10px, 1vw, 12px);
}

section._02 .box._bb .p30{
	margin: 20px 0 10px;
	font-size: clamp(10px, 1.4vw, 14px);
	line-height: 1.8;
}

section._02 .imgBox._13{
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	section._02{
		padding: 80px 0 50px;
	}

	section._02 .p01{
		margin-bottom: 50px;
	}

	section._02 .p02{
		margin: 60px auto 40px;
	}

	section._02 .box._tt{
		max-width: 500px;
		flex-direction: row;
	}

	section._02 .box._tt .item_l{
		width: 62%;
		padding-top: 5vw;
	}

	section._02 .box._tt .item_ll{
		margin-right: 0;
	}

	section._02 .box._tt .item_r{
		width: 45%;
	}

	section._02 .box._tt .item_lr{
		width: 100%;
		position: relative;
		text-align: center;
	}

	section._02 .box._tt .item_lr .anno{
		font-size: clamp(8px, 1vw, 10px);
		position: absolute;
		bottom: -60px;
		left: 3em;
		text-align: left;
	}

	section._02 .box._tt p{
	}

	section._02 .box._tt p span{
	}

	section._02 .box._tt .p10{
		font-size: clamp(10px, 9vw, 65px);
		text-align: center;
	}

	section._02 .box._tt .p20{
		font-size: clamp(10px, 5vw, 45px);
		text-align: center;
	}

	section._02 .box._tt .p30{
		width: 95%;
		padding-right: 5%;
		position: absolute;
		bottom: -2.5em;
		font-size: clamp(10px, 10vw, 12px);
		text-align: right;
	}

	section._02 .box._tt .p40{
		margin-top: 3vw;
		font-size: clamp(10px, 7vw, 45px);
	}

	section._02 .box._tt .p40 span{
		font-size: clamp(10px, 40vw, 200px);
		line-height: 0.7em;
	}

	section._02 .box._t .item._l{
		width: 90%;
		margin: 0 auto 30px;
	}

	section._02 .box._t .item._r{
		width: 100%;
	}

	section._02 .box._t ul.flex{
		width: 90%;
		margin: 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	section._02 .box._t .li{
		width: 48%;
		padding: 15px 0 15px 15px;
	}

	section._02 .box._t .li p{
		font-size: clamp(10px, 2.8vw, 22px);
		line-height: 1.2;
	}

	section._02 .box._t .li span{
	}

	section._02 .box._t .card{
		width: 80%;
		margin: 0 auto 40px;
	}

	section._02 .box._b .item{
	}

	section._02 .imgBox._04{
		width: 80%;
		margin: 0 auto;
	}

	section._02 .item._c{
		max-width: 350px;
		width: 80%;
		margin: 0 auto 40px;
		padding-bottom: 15px;
	}

	section._02 .item .txtbox{
		height: auto;
	}

	section._02 .item .txtbox .p10{
		font-size: clamp(10px, 5vw, 17px);
	}

	section._02 .item .txtbox .p10._fl{
		margin-bottom: 5px;
	}

	section._02 .item .txtbox .p20{
		font-size: clamp(10px, 5vw, 20px);
	}

	section._02 .item .txtbox .p30{
		font-size: clamp(10px, 4vw, 14px);
	}

	section._02 .box._bb{
		max-width: 350px;
		width: 70%;
		margin-top: 0;
		padding: 30px 20px;
	}

	section._02 .box._bb .item_l{
		width: 100%;
	}

	section._02 .box._bb .item_r{
		width: 100%;
		margin-top: 20px;
	}

	section._02 .box._bb .p10{
		font-size: clamp(10px, 4.2vw, 25px);
	}

	section._02 .box._bb .p20{
	}

	section._02 .box._bb .p30{
		font-size: clamp(10px, 3.2vw, 14px);
	}

	section._02 .imgBox._13{
		margin-top: 35px;
	}
}

@media screen and (min-width: 501px) {
	section._02 .cover{
		margin-top: -50vw;
	}
}

/* section._03 */

section._03{
	padding-bottom: 150px;
}

section._03 .box.rev{
	flex-direction: row-reverse;
}

section._03 .box{
	margin-bottom: 80px;
}

section._03 .box .item._l{
	width: 58%;
}

section._03 .box .item._r{
	width: 36%;
}

section._03 .imgnote{
	text-shadow: none;
	color: #000;
	bottom: -15px;
}

section._03 .imgnote.for_2l{
	bottom: -25px;
	text-align: right;
}

section._03 .imgbox .zoomBtn{
	max-width: 52px;
	top: 0;
	right: 0;
}

section._03 .p04{
	padding: 15px 0;
	border-top: 1px solid #817947;
	border-bottom: 1px solid #817947;
	font-size: clamp(10px, 3vw, 25px);
	font-weight: 600;
}

section._03 .p05{
	margin: 35px 0;
	font-size: clamp(10px, 2vw, 22px);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.8;
}

section._03 .p06{
	font-size: clamp(10px, 1.5vw, 16px);
	line-height: 2;
}

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

/* details {
  interpolate-size: allow-keywords;
}

details::details-content {
  transition: height 1s ease, opacity 0.3s ease;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

details[open]::details-content {
  height: auto;
  opacity: 1;
} */

details .arrow{
	max-width: 50px;
	margin: 0 auto;
	display: block;
	transition: 2s;
}

details[open] .arrow{
	transform: rotate(180deg);
	transition: 1s;
}

details .read{
	margin-top: 15px;
	font-size: clamp(10px, 3vw, 16px);
	text-align: center;
	transition: 1s;
}

details[open] .read{
	opacity: 0;
	transition: 1s;
}

details .close{
	margin-top: -1em;
	font-size: clamp(10px, 3vw, 16px);
	text-align: center;
	opacity: 0;
	transition: 1s;
}

details[open] .close{
	opacity: 1;
	transition: 1s;
}

details .p06{
	padding-top: 30px;
}

@media screen and (max-width: 768px) {
	section._03{
		padding-bottom: 100px;
	}

	section._03 .box.rev{
	}

	section._03 .box{
		width: 100%;
		margin-bottom: 50px;
		flex-direction: column !important;
	}

	section._03 .box .item._l{
		width: 100%;
	}

	section._03 .box .item._r{
		width: 100%;
		padding: 30px 5%;
		box-sizing: border-box;
		background: #fff;
	}

	section._03 .imgnote{
	}

	section._03 .p04{
		border-top: none;
		text-align: center;
		font-size: clamp(10px, 5vw, 25px);
	}

	section._03 .p04 span._sp{
		margin-right: 0.5em;
		display: inline-block;
		font-size: 0.8em;
	}

	section._03 .p05{
		margin: 25px auto;
		text-align: center;
		font-size: clamp(10px, 5.2vw, 22px);
	}

	section._03 .p06{
		font-size: clamp(10px, 3.8vw, 16px);
	}
}