@charset "UTF-8";
/* CSS Document */
/*=========================================== 
スマホ向けのレイアウトの指定：～768px 
===========================================*/
@media only screen and (min-width: 0px) {
	body {
		overflow-x: hidden;
	}

	#container {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

	#wrapper {
		width: 100%;
		margin: 0 auto;
	}

	/*メインビジュアル*/
	.mv {
		background: url(../images/dress-up_mv.jpg) no-repeat top center;
		background-size: cover;
	}

	/*コンテンツ*/
	.costume {
		width: 90%;
		margin: 80px auto;
		text-align: center;
	}

	/*注釈*/
	p.attention {
		padding: 20px 30px;
		border: solid 1px rgb(255, 0, 0);
		color: rgb(255, 0, 0);
		font-size: 14px;
		line-height: 1.5;
		display: inline-block;
		margin-bottom: 30px;
		font-weight: bold;
	}

	/*タブ*/
	.tab {
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 0;
		text-align: left;
		background: rgb(240, 240, 240);
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
	}

	.tab li {
		flex: 1;
		box-sizing: border-box;
		flex-basis: 140px;
		height: 40px;
		padding: 0 15px;
		margin: 0;
		font-size: 20px;
		text-align: center;
		line-height: 40px;
		color: rgb(130, 130, 130);
		background: rgb(220, 220, 220);
		display: inline-block;
		cursor: pointer;
		white-space: nowrap;
	}

	.tab li.current {
		color: rgb(255, 255, 255);
		background: rgb(136, 196, 204);
	}

	.contents .content {
		display: none;
	}

	.contents .content:nth-child(1) {
		display: block;
	}

	.costume h2.heading {
		margin: 0 auto;
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		font-family: serif;
	}

	/*両端に線を伸ばす*/
	.costume h2.heading {
		display: flex;
		align-items: center;
	}

	.costume h2.heading:before,
	.costume h2.heading:after {
		border-top: 1px solid rgb(230, 230, 230);
		content: "";
		flex-grow: 1;
	}

	.costume h2.heading:before {
		margin-right: 16px;
	}

	.costume h2.heading:after {
		margin-left: 16px;
	}

	.costume ul.menu {
		font-size: 0;
		text-align: center;
	}

	.costume ul.menu li {
		margin: 32px 16px 0;
		display: inline-block;
	}

	.costume ul.menu li img {
		width: 100%;
		max-width: 374px;
		height: auto;
	}

	.costume h3.title {
		margin: 0 auto;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		line-height: 1.3;
		font-family: serif;
	}

	.costume .line {
		width: 128px;
		margin: 16px auto 60px;
	}

	.costume h4.title {
		margin: 0 auto 20px;
		font-size: 26px;
		text-align: center;
		font-family: serif;
	}

	span.renewal {
		margin-left: .5em;
		padding: 6px;
		font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
		font-size: 14px;
		font-weight: bold;
		color: #ffffff;
		background: #B2A652;
	}

	/*両端に線を伸ばす*/
	.costume h4.title {
		display: flex;
		align-items: center;
	}

	.costume h4.title:before {
		margin-right: 10px;
		content: "";
		flex-grow: 3;
	}

	.costume h4.title:after {
		border-top: 1px solid rgb(240, 240, 240);
		margin-left: 10px;
		content: "";
		flex-grow: 28;
	}

	.costume_box_02,
	.costume_box_04 {
		margin: 60px auto;
	}

	.costume .girl {
		margin: 0 auto 60px;
		padding: 60px 0 0 0;
	}

	.costume .boy,
	.costume .baby {
		margin: 60px auto;
		padding: 60px 0 0 0;
		border-top: 2px solid rgb(230, 230, 230);
	}

	.costume .maternity {
		margin: 60px auto 0;
		padding: 60px 0 0 0;
		border-top: 2px solid rgb(230, 230, 230);
	}

	.costume .content ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px 2%;
		overflow: hidden;
		margin: 20px auto 0;
	}

	.costume .content ul li {
		width: 23.5%;
		max-width: 220px;
		float: left;
	}

	.costume .content ul li:last-of-type {
		margin-right: auto;
	}

	.costume .content ul li img {
		width: 100%;
		height: auto;
	}

	/*コンテンツ > 可変部分*/
	.costume .girl .line {
		border: solid rgb(255, 215, 231);
		border-width: 2px 0 0 0;
	}

	.costume .girl h4.title:before {
		border-top: 1px solid rgb(255, 215, 231);
	}

	.costume .boy .line {
		border: solid rgb(158, 200, 241);
		border-width: 2px 0 0 0;
	}

	.costume .boy h4.title:before {
		border-top: 1px solid rgb(158, 200, 241);
	}

	.costume .baby .line {
		border: solid rgb(249, 237, 140);
		border-width: 2px 0 0 0;
	}

	.costume .maternity .line {
		border: solid rgb(180, 223, 177);
		border-width: 2px 0 0 0;
	}

	.content li {
		position: relative;
	}

	.tag::before {
		position: absolute;
		font-family: serif;
		letter-spacing: 0.1rem;
		font-weight: bold;
		display: inline-block;
		color: #fff;
		top: 0;
		left: 0;
		font-size: 1.3rem;
		line-height: 1.4rem;
		padding: 3px 4px 3px 5px;
		pointer-events: none;
	}

	.tag.new::before {
		content: "NEW";
		background-color: #B2A652;
	}

	.tag.premium::before {
		content: "+¥3,000";
		letter-spacing: .02em;
		background-color: #88C4CC;
	}
}

/*=========================================== 
PC向けのレイアウトの指定：768px〜
===========================================*/
@media only screen and (min-width: 769px) {
	#container {
		width: 100vw;
	}

	/*コンテンツ*/
	.costume {
		width: auto;
		max-width: 940px;
		padding: 0 10px;
	}

	.costume ul.menu li a:hover {
		opacity: 0.8;
		filter: alpha(opacity=80);
		/* IE 6,7*/
		-ms-filter: "alpha(opacity=80)";
		/* IE 8,9 */
		-moz-opacity: 0.8;
		/* FF , Netscape */
		-khtml-opacity: 0.8;
		/* Safari 1.x */
		zoom: 1;
		/*IE*/
	}

	.costume h3.title {
		line-height: 1;
	}

	/*両端に線を伸ばす*/
	.costume h4.title:before {
		flex-grow: 1;
	}

	.costume h4.title:after {
		flex-grow: 30;
	}

	.tag::before {
		border-radius: 47px;
		top: 10px;
		left: 10px;
		font-size: 1.4rem;
		padding: 2.6rem 1.3rem 2.6rem 1.5rem;
		width: 66px;
		box-sizing: border-box;
		aspect-ratio: 1;
	}

	.tag.premium::before {
		padding: 2.6rem 0;
	}

	/*.costume .content ul.first{
	margin: 0;
}*/
}