@charset "utf-8";

/* CSS Document */



* {
	box-sizing: border-box;
	line-height:1;

	/*outline: 1px solid magenta;*/
}

a:link, a:visited{
	color:#000;
}

a:hover {
	transition:.3s;
}


#container {
	width: 100%;
	font-family: 'Noto Serif JP', 'Cormorant' ,serif;
}

#contents {
	width:100%;
	max-width:1000px;
	margin:0 auto ;
}


.kv {
	width:100%;
	background-color: #dbdad5;
	text-align: center;
	margin:50px 0 4rem 0;
	line-height:0;
}


.intro {
	width: 90%;
	margin: 0 auto;

}

.intro__head {
	text-align: center;
	margin-bottom: 5rem;
}


.caption {
	font-family: 'Hannari', serif;
	font-size: 2.4em;
	letter-spacing: -.2rem;
	line-height: 1em;
}

.caption__deco--1 {
	display: inline-block;
	background: #dcd6b7;
	border: 2px solid #938015;
	width: 4em;
	height: 1.2em;
	margin-right: .4em;
}

.caption__deco--2 {
	color: #938015;
}


.intro__head h1 {
	font-family: 'Cormorant', serif;
	font-weight: 400;
	font-size: 8em;
	line-height: 1em;
	text-align: center;
	font-kerning: auto;
	white-space: nowrap;
}

.sub {
	margin: 0 auto;
	width: 400px;
	font-family: 'Hannari' ,serif;
	font-size: 1.6em;
	line-height:1;
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-items: center;
}


/* outline */

.outline {
	margin: 0 auto 8rem;
	width: 70%;
}

.outline h2 {
	line-height:1em;	
	font-family: 'Hannari', 'Cormorant' ,serif;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
	margin-bottom:1em;
}

.outline p {
	font-size: 1rem ;
	margin-bottom: 1.2rem;
	letter-spacing: .1rem;
	font-family: 'Noto Serif JP' , serif;
	line-height:1.8;
}



@media (min-width: 767.98px) and (max-width: 1023px) {

.kv img {
	width:100%;
}


#contents {
	width:100%;
	padding: 2rem 1rem 2rem;
}

.intro {
	font-size:12px;
}




}


@media (max-width: 767.98px) {



.kv {
	margin:40px 0 4rem 0;
}



.kv img {
	width:100%;
}

#contents {
	padding: 0 1rem 2rem;
}


.caption {
	font-size:1.4rem;
}

.caption__deco--1 {
	width:2.2em;
	margin-right:.2em;
}

.intro {
	font-size:12px;
}

.intro__head h1 {
	font-size: 5em;
}

.sub {
	width: 50%;
}

.outline {
	width:100%;
	margin:0 auto 4rem
}


.outline h2{
	font-size:2em;
	font-weight:400;
}



}


/*--------------------
	item
--------------------*/


.item {
	font-size: 16px;
	color:#000;
	margin-bottom:8rem;
}


.item__head {
	background: url(img/230224_pict_vline.png) center top no-repeat;
	padding-top:120px;
	text-align: center;
	margin:0 0 2.4em 0;
}

.item__head h2 {
	font-family: 'Cormorant' ,serif;
	font-size: 4.4em;
	letter-spacing: -.1rem;
	font-weight: 400;
	margin-bottom:.1em;
}

.item__head .sub {
	font-size: 1em;
	font-weight:600;
}

.item__acc .sub {
	width: 24%;
	grid-template-columns: repeat(6, auto);
}


.item__jacket .sub,
.item__onep .sub {
	width: 20%;
	grid-template-columns: repeat(5, auto);
}


.item__blouse .sub,
.item__skirt .sub,
.item__shoes .sub {
	width: 16%;
	grid-template-columns: repeat(4, auto);
}


.item__bag .sub,
.item__pants .sub {
	width: 12%;
	grid-template-columns: repeat(3, auto);
}


.item__body p {
	font-size: 1.1em;
	line-height:2;
	margin-bottom: 3.2rem;
}

.item-List {
	display: grid;
}

.item-List__image {
	display: block;
	margin-bottom:1em;
}

.item-List__image img {
	max-width:100%;
}

.item-List--2col {
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 40px;
}


.item-List--3col {
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 50px;
}

.item-List__cassette {
	margin-bottom:4rem;
}

.item__brand {
	font-family: 'Cormorant' ,serif;
	font-weight: 600;
	font-size: 1.7em;
	margin-bottom:.6em;
}

.item__attention {
	font-size:.8em;
	line-height:1.4em;
}


.item__attention a {
	color:#233183;
	padding:0 .1em;
	text-decoration: underline;
}


.item__name {
	font-size: 1em;
	margin-bottom: 1.6em;
	line-height:1.6;
	margin-bottom:1em;
	letter-spacing: -0.01em;
}

.tag {
	display: inline-block;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	color: #938015;
	border:1px solid #938015;
	font-size: .7rem;
	margin-right: .2rem;
	padding: .3rem .4rem .2rem;
}

.item-List__image {
		overflow:hidden; 
		line-height:1;
}

.item-List__image img {
	transition:.3s all;
}

.item-List__image img:hover {
	transform:scale(1.03,1.03);
	transition:.3s all;
		line-height:1;
}



/* btn */

.btn {
	max-width: 400px ;
	width:auto;
	text-align: center;
	margin:0 auto ;
	border-radius: 2em;
}

.btn--primary {
	color:#fff;
	font-weight:400;
	padding:1em 1em;
	background: #938015;
}


.arrow {
	display:inline-block;
	width:.6em;
	height:.6em;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
  transform: rotate(45deg);
  margin-right:.8em;
  margin-top:-0.01em;
}



@media (min-width: 767.98px) and (max-width: 1023px) {

	.item-List--2col {
		grid-column-gap: 1em;
	}

	.item-List--3col {
		grid-column-gap: 1em;
	}

}

@media (max-width: 767.98px) {

	.item__acc .sub {
		width: 20%;
		grid-template-columns: repeat(6, auto);
	}


	.item-List--2col {
		display:block;
	}

	.item-List--3col {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1em;
	}

	.item {
		font-size:14px;
	}


}


.toc {
	background: #eae6d2;
	padding:3.2em 4em;
	margin-bottom:8rem;
	text-align: center;
}

.toc h2 {
	font-size:2em;
	font-weight:500;
	color:#938015;
	margin-bottom:.8em;
}


.tocList__item {
		display:inline-block;
		margin-right:.4em;
}

.tocList__item a {
		padding:.3em 1.6em .4em;
		font-size: 1.4em;
		line-height:3.2em;
		border-radius:2em;
		background: #fff;
		border:1px solid #938015;
}
.closing {
	margin-bottom:8em;
	font-size:14px;

}

.closing p {
	font-family: 'Hannari', 'Cormorant' ,serif;
	font-size:2em;
	line-height:1.6em;
	text-align: center;
	margin-bottom:1.6em;
}


@media (min-width: 767.98px) and (max-width: 1023px) {


.toc {
	padding:3.2em 2.4em;
	margin-bottom:8rem;
}

.toc h2 {
	font-size:2em;
}

.tocList__item {
		margin-right:.4em;
}

.tocList__item a {
		padding:.3em .8em .4em;
		font-size: 1.4em;
		line-height:3.2em;
		border-radius:2em;
}


}

@media (max-width: 767.98px) {


.toc {
	padding:2.4em 1.6em;
	margin-bottom:8rem;
}

.toc h2 {
	font-size:1.8em;
}


.tocList__item {
		margin-right:.2em;
}


.tocList__item a {
		font-size: 1em;
}




.closing p {
	font-size:1.4em;
}



}



/* -------------------- pagetop -------------------- */

/* ページの上部へ　右下固定版 */

#pagetop--fixed {
  position: fixed;
  bottom: 10vh;
  right: 1vw;
  background: #222;
  opacity: 0.7;
  border-radius: .2rem;
}

#pagetop--fixed a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#pagetop--fixed a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
  line-height:1.8;
}