@media (max-width: 620px) {
	/*===============================
	MARK: common
	=================================*/
	html,
	body {
		overflow-x: hidden;
	}

	.pc-content {
		display: none !important;
	}
	.sp-content {
		display: block;
	}

	img {
		max-width: 100%;
	}

	/*===============================
	MARK: header
	=================================*/

	.site-logo {
		padding-left: 5px;
	}

	.site-logo a {
		display: block;
		margin-top: 7px;
	}

	.site-logo img {
		width: 45px;
	}

	/*===============================
	MARK: MV
	=================================*/
	.main-visual {
		background-image: none;
	}

	/*===============================
	MARK: main content
	=================================*/

	.intro-content {
		padding-block: 40px;
		font-size: var(--fz18);
		text-align: center;
		line-height: 2;
	}

	.intro-text {
		margin-top: 50px;
	}

	#look_book .heading .lead {
		font-size: 1rem;
		letter-spacing: 1.8;
	}

	.lb-item {
		flex-direction: column;
		gap: 10px;
		margin-bottom: 20px;
	}

	.large .lb-img {
		width: 100%;
		max-width: 100%;
	}

	.lb-combi {
		flex-direction: row;
		padding-inline: 15px;
	}

	.large .plus {
		padding-inline: 10px 30px;
	}

	.lb-rows {
		flex-direction: column;
		gap: 0px;
	}

	.lb-item.middle {
		flex-direction: row;
	}

	.middle .lb-combi {
		flex-direction: column;
	}

	.lb-item.multi-column {
		flex-direction: column;
		width: 100%;
	}

	.multi-column.middle .lb-img {
		width: 100%;
		max-width: unset;
		height: 220px;
	}

	.multi-column.middle img {
		object-position: center;
	}

	.multi {
		flex-direction: row;
		gap: 10px;
	}

	.middle .lens {
		max-width: 84px;
	}

	.middle .plus {
		padding-block: 15px 15px;
		width: 0.8em;
	}

	.lb-rows.modal-control {
		flex-direction: row;
	}

	.lb-rows.modal-control .lb-item.small {
		width: 47.5%;
	}

	.lb-img button::after {
		width: 70px;
		height: 20px;
	}

	.d-flex.select-item {
		flex-direction: column;
		align-items: center;
	}

	.select-frame {
		max-width: 246px;
		margin-left: 46px;
		margin-bottom: 30px;
	}

	.select-lens {
		max-width: 235px;
		margin-left: 53px;
		margin-top: -30px;
	}

	.select .text-right {
		font-size: var(--fz12);
	}

	#lens_color {
		border-radius: 50px 50px 0 0;
	}

	#lens_color .heading {
		margin-bottom: 60px;
	}

	.color-variant,
	.color-heading,
	.color-summary {
		flex-direction: column;
	}

	.color-wrap {
		width: 100%;
	}

	.color-heading {
		gap: 10px;
	}

	.color-name {
		width: 100%;
	}

	.color-name span {
		padding-block: 20px;
	}

	.color-copy {
		padding-block: 10px;
	}

	.color-summary {
		gap: 10px;
	}

	.color-summary .color-sample {
		width: 100%;
	}

	#recommended {
		border-radius: 50px 50px 0 0;
	}

	.point {
		margin-top: 40px;
		padding: 30px 20px 30px 20px;
	}

	.point01 .point-heading {
		margin-bottom: 30px;
	}

	.point-heading h4 {
		column-gap: 20px;
	}

	.point-heading h4 img {
		width: 70px;
	}

	.point-heading h4 span {
		font-size: var(--fz20);
	}

	.density-wrap {
		gap: 20px;
		margin-bottom: 30px;
	}

	.density-img small {
		font-size: var(--fz12);
	}

	.point02 .density-text,
	.point03 .density-text {
		font-size: 1rem;
	}

	.density-icon {
		position: relative;
		right: unset;
		top: unset;
		transform: unset;
		height: auto;
		margin-inline: auto;
		width: 50%;
		margin-top: 20px;
	}

	.voice-inner {
		padding-block: 40px 30px;
	}

	.voice-inner .rows {
		flex-direction: column;
		row-gap: 15px;
	}

	.voice-inner .rows.left {
		flex-direction: column-reverse;
	}

	.voice-inner .rows.right {
		align-items: end;
	}

	.voice-item {
		padding: 15px 30px;
		font-size: 1rem;
		min-width: unset;
		margin-top: 20px;
	}

	.voice-inner .icon {
		width: 75px;
	}

	.left .voice-item::before {
		left: 45px;
		top: unset;
		bottom: -5px;
		transform: rotate(-60deg);
	}

	.right .voice-item::before {
		left: unset;
		right: 45px;
		top: unset;
		bottom: -5px;
		transform: rotate(60deg);
	}

	#service h3 {
		font-size: var(--fz30);
	}
	#service h3 + p {
		font-size: 1rem;
	}

	#feature .d-flex {
		flex-direction: column;
	}

	#service .d-flex {
		flex-direction: column;
	}

	/* モーダル調整 */

	.modal__header {
		top: -40px;
		right: -7px;
	}

	/*===============================
	MARK: footer
	=================================*/
	.copyright {
		font-weight: 400;
		font-size: var(--fz14);
	}
}