@charset "utf-8";
@media screen and (max-width: 980px){

	.only__pc {
		display: none;
	}
	html{
		font-size: 14px;
	}
	body {
		line-height: 1.6;
	}
	.snowFalling  {
		background-size: 200% auto;
	}

/* COMMON */
	body {
		background: url(img/bg_introduce.png) no-repeat #c7e7ea;
		background-size: 150% auto;
	}
	.icon-times:before {
		font-family: "Font Awesome 5 Free";
		content: "\f00d";
		font-weight: 900;
		margin: 0 0.5rem 0 0;
	}

.common__label {
	margin: 0 0 1rem;
	/*color: var(--blue);*/
	font-family: var(--serif);
	font-size: 1.1rem;
	letter-spacing: 0.2rem;
	text-align: center;
	line-height: 1.2;
	opacity: 0.4;
}
	.common__heading {
		margin: 0 0 2rem;
		font-size: 1.6rem;
		line-height: 1.5;
	}
	.common__heading small {
		font-size: 1rem;
	}
	.common__heading small strong {
		display: block;
		margin: 0.5rem 0 0;
		font-size: 1.4rem;
	}
	.common__midheading {
		margin: 0 0 1.5rem;
		font-size: 1.4rem;
		letter-spacing: 0.1rem;
		line-height: 1.5;
	}
	.common__minheading {
		margin: 0 0 1rem;
		font-size: 1.2rem;
	}
	.common__insert {
		height: auto;
	}


	.title {
		display: flex;
		height: 80vh;
		padding: 2rem 4vw 0;
	}
	.title__inner {
		background: rgba(255,255,255,0.4);
		border: var(--brown) solid 3px;
		margin: auto 0 0 0;
		padding: 1rem;
	}
.title__heading {
	letter-spacing: 2px;
	line-height: 1.2;
	position: relative;
}
	.title__heading small {
		margin: 0 0 0.5rem;
		font-size: 1.4rem;
	}
	.title__heading h1 {
		font-size: 2rem;
	}
	.title__comment {
		margin: 2rem 0 0;
		font-size: 1.2rem;
		line-height: 1.8;	
	}

	.introduce {
		padding: 4rem 4vw;
	}
	.introduce dl {
		padding: 2rem 0;
	}
	.introduce dl dd + dt {
		margin-top: 2rem;
	}
	.introduce p {
		margin: 2rem 0 0;
	}
	.introduce p strong {
		font-size: 1.4rem;
	}

	.caution {
		padding: 4rem 4vw 0;
	}
	.caution__wrap {
		display: block;
	}
	.caution__col {
		width: 100%;
		padding-bottom: 4rem;
	}
	.caution__list li {
		font-size: 1rem;
	}
	.caution p {
		margin: 2rem 0 0;
	}
	.caution p strong {
		font-size: 1.4rem;
	}
	.caution__image {
		width: 60%;
		margin: 0 0 0 auto;
	}

	.check {
		background: url(img/bg_check_top.png) top right no-repeat, url(img/bg_check_bottom.png) left bottom no-repeat #fff;
		background-size: 100% auto;
		padding: 4rem 4vw;
	}
	.check .common__heading {
		-webkit-text-stroke: 3px #fff;
		paint-order: stroke;
	}
	.check__wrap {
		display: block;
	}
	.check__col {
		width: 100%;
	}
	.check__image {
		width: 100%;
		margin: 1rem 0 0;
	}
.check__list {
	margin: 3rem 0 0;
	border: var(--brown) solid 5px;
	border-radius: 2rem;
	overflow: hidden;
}
	.check__list__inner {
		padding: 2rem;
	}
	.check__list__list {
		gap: 1.5rem 0;
	}
	.check__list__list li {
		width: 100%;
		font-size: 1rem;
	}
	.check__submit {
		margin: 2rem 0 0;
		padding: 2rem 0 0;
	}
	.check__submit button {
		width: 100%;
		font-size: 1.2rem;
	}
.check__list__title {
	background: var(--brown);
	padding: 1rem 0;
	text-align: center;
}
.check__list__title .common__midheading,
.check__list__title .common__label {
	color: #fff;
}
.check__list__title .common__midheading {
	margin: 0;
}
.check__result__inner {
	display: flex;
	background: rgba(255,255,255,0.6);
	width: 100%;
	height: 100vh;
	padding: 4rem 4vw;
	gap: 2rem;
	position: absolute;
	top: 0;
}
.check__result__label {
	display: flex;
	align-items: center;
	margin: 0 0 1rem;
	color: #a08576;
	font-family: var(--serif);
	font-size: 1.1rem;
	letter-spacing: 0.2rem;
	line-height: 1.2;
}
.check__result__label::after {
	content: "";
	background: #a08576;
	width: auto;
	height: 1px;
	flex-grow: 1;
	margin: 0 0 0 2rem;
}
.check__result__label strong {
	margin: 0 0 0 0.5rem;
	font-size: 2.2rem;
}
.check__result__inner .common__heading {
	padding: 0 0 1rem;
	color: var(--water);
	text-align: left;
}

	.chart {
		background: url(img/bg_chart_top.png) no-repeat top, url(img/bg_chart_bottom.png) no-repeat bottom #fafafa;
		background-size: 100% auto;
		padding: 4rem 4vw;
	}
	.chart__wrap {
		position: relative;
		margin: 2rem 0 0;
	}
	.chart__wrap__heading {
		text-align: center;
	}
	.circle-wrapper {
	}
	.circle-item {
		padding: 2rem;
		color: #fff;
		position: relative;
	}

	.circle-item::before {
		content: none;
	}
	.circle-item::after {
		content: "";
		position: absolute;
		top: 1rem;
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
		border: #fff solid 1px;
	}
.chart__label {
	margin: 0 0 1rem;
	font-family: var(--serif);
	font-size: 1.1rem;
	letter-spacing: 0.2rem;
	line-height: 1.2;
}
.chart__label strong {
	margin: 0 0 0 0.5rem;
	font-size: 2.2rem;
}
	.circle-item p {
		margin: 0;
		font-size: 1rem;
	}
	.chart__countermeasure {
		margin: 1rem 0 0;
	}
	.chart__countermeasure dt {
		font-size: 1rem;
	}
	.chart__countermeasure dd {
		font-size: 1rem;
	}

	.habit {
		padding: 0 0 8rem;
	}
	.habit::before {
		content: "";
		top: 2vw;
		right: 2vw;
		bottom: 2vw;
		left: 2vw;
	}
	.habit .common__heading {
		margin: -6rem 6vw 2rem;
		-webkit-text-stroke: 3px #e3cdb0;
		paint-order: stroke;
	}
	.habit__list {
		margin: 0 6vw;
	}
	.habit__list li {
		display: block;
	}
	.habit__list li + li {
		margin-top: 3rem;
		padding-top: 3rem;
		border-top: var(--brown) solid 1px;
	}
	.habit__list__image {
		width: 60vw;
		height: 60vw;
		margin: 0 auto 1rem;
	}
	.habit__col {
		width: 100%;
	}


	/*===============================================
	モーダルウィンドウ部分
	===============================================*/
	.modal {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		right: 0;
		z-index: 100;
		display: none;
	}
	.modal__inner {
		margin: 0 4vw;
		padding: 2rem;
	}
	.modal__wrap {
		display: block;
	}
.modal__wrap figure {
	height: calc(100vh - 80px - 6rem - 2.1rem - 3.6rem);
}

	.btn__toitems a {
		width: 90vw;
		padding: 2rem 0;
		font-size: 1.1rem;
	}
	.btn__toitems a::after {
		right: 1rem;
	}


/**/
	.items {
		padding: 4rem 4vw;
	}
	.items__data {
		padding: 0.5rem;
		top: initial;
		bottom: 0;
	}
	.items__data dt {
		padding: 0 0.5rem 0 0;
		font-size: 0.8rem;
	}
	.items__data dd:not(.items__data__label) {
		margin: 0 0.5rem;
		font-size: 0.8rem;
	}
	.items__data__label {
		padding: 0.2rem 0.3rem;
		line-height: 1.2;
	}
	.items__heading {
		display: block;
		margin: 0;
		padding: 1rem 0;
		font-size: 1.4rem;
	}

	.items__subheading {
		background: linear-gradient(to right, #000, rgba(0,0,0,0.3)); 
		width: 100%;
		padding: 1rem;
		font-size: 1.6rem;
		line-height: 1.4;
	}

	.itmes__ttl {
		display: block;
	}
	.itemList + .itmes__ttl {
		margin-top: 4rem;
	}
	.items__type {
		display: inline-block;
		width: auto;
		padding: 0.5rem 1rem;
		font-size: 1.1rem;
		line-height: 2.2rem;
	}
	.itemList + .common__heading {
		margin-top: 6rem;
	}

	.itemList {
		margin: 3rem auto 0;
	}
	.itemList > li {
		margin: 0 auto;
	}
	.itemList > li:nth-of-type(n+2) {
		margin-top: 3rem;
		padding-top: 3rem;
		border-top: var(--campaign) solid 1px;
	}
	.itemList__inner{
		display: block;
	}
	.itemList__itemImg {
		width: 80vw;
		height: 88vw;
		margin: 0 auto;
	}
	.itemList__col {
		width: 100%;
		padding: 2rem;
	}
	.itemList__label {
	}
	.itemList__title {
		font-size: 1.4rem;
	}
	.itemList__price {
		font-size: 1.1rem;
	}
	.itemList__price strong {
		font-size: 1.6rem;
	}
	.itemList__submit {
		max-width: 320px;
		margin: 3rem 0 0;
	}
	.itemList__submit a {
		font-size: 1.2rem;
	}

}