@charset'utf-8';

:root {
	--bug-dgr: 0, 110, 96;
	--bug-gr: 218, 226, 75;
	--bug-lgr: 251, 252, 237;
	--review-bg: 128, 111, 44;
	--bug-gld: 225, 214, 124;
	--bugp-gld: 234, 186, 74;
}



/*==============================
	modal
==============================*/
#aromicstyle.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

#modal-movie {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 20000;
}

#modal-movie:not(.is-open) {
	display: none;
	opacity: 0;
}

#modal-movie .modal-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .8);
}

/*content*/
#modal-movie .modal-content {
	position: absolute;
	left: 50%;
	width: calc(100% - 3em);
	max-width: 800px;
	max-height: 100vh;
	max-height: calc(var(--vh, 1vh) * 100);
	max-height: 84vh;
	background: #fff;
	overflow: scroll;
	transform: translate(-50%, -50%);
}

#modal-movie .modal-content p {
	line-height: 1.6em;
}

#modal-movie .modal-content .ttl {
	margin-bottom: .8em;
	padding-bottom: .2em;
	text-align: center;
	font-size: 1.4em;
	letter-spacing: .1em;
	border-bottom: 1px solid;
}

#modal-movie .modal-content p:not([class])+p:not([class]),
#modal-movie .modal-content p:not([class])>span+span {
	display: block;
	margin-top: .3em;
}


/*close*/
#modal-movie .modal-close {
	cursor: pointer;
}

#modal-movie .modal-close.window {
	width: auto;
	margin: .2em 0 0 2em;
	padding: 0;
	border: none;
	border-bottom: 1px solid;
	border-radius: 0;
	cursor: pointer;
}

#modal-movie .modal-close.text {
	width: 6em;
	margin: 2em auto 0;
	padding: .6em;
	text-align: center;
	line-height: 1em;
	color: var(--link);
	border: 1px solid;
	border-radius: 50vh;
}


@media screen and (min-width:426px) {
	#modal-movie .modal-content {
		top: 50%;
		padding: 2em;
	}
}

@media screen and (max-width:425px) {
	#modal-movie .modal-content {
		top: 44%;
		padding: 2em 1em;
		font-size: .9em;
	}

	#modal-movie .modal-content .ttl {
		font-size: 1.3em;
	}
}



/*==============================
	common
==============================*/
#anti-bug {
	max-width: 2000px;
	margin: auto;
}

#anti-bug>section:nth-of-type(n+3) {
	margin-top: 6em;
}

#anti-bug>section.bg-color {
	padding-bottom: 6em;
	background: rgb(var(--bug-lgr));
}

#anti-bug.premium>section.bg-color {
	background: #efeeea;
}

#anti-bug .circle {
	border-radius: 50vh;
}


/*title*/
#anti-bug h2.ttl {
	margin-bottom: 1.6em;
	text-align: center;
	font-size: 2em;
	font-weight: 600;
	line-height: 1em;
	letter-spacing: .1em;
}

#anti-bug>section.bg-color h2.ttl {
	padding: 1.2em 0;
	background: rgb(var(--bug-gr));
}

#anti-bug.premium>section.bg-color h2.ttl {
	background: #35380A;
	color: #fff;
}

#anti-bug h2.ttl span {
	font-size: .8em;
}


@media screen and (max-width:768px) {
	#anti-bug>section:nth-of-type(n+3) {
		margin-top: 4em;
	}

	#anti-bug>section.bg-color {
		padding-bottom: 4em;
	}

	#anti-bug h2.ttl {
		font-size: 1.6em;
	}
}

@media screen and (max-width:425px) {
	#anti-bug h2.ttl {
		margin-bottom: 1.2em;
		font-size: 1.4em;
		letter-spacing: 1px;
	}

	#anti-bug .column-link {
		font-size: .9em;
	}
}



/*==============================
	main
==============================*/
#anti-bug #main-vs {
	position: relative;
	width: 100%;
	max-width: 2000px;
	height: calc(100vw * .356);
	max-height: 500px;
	margin: auto;
	overflow: hidden;
}

#anti-bug #main-vs>* {
	position: absolute;
}

#anti-bug #main-vs>*:not(picture) {
	display: grid;
	align-content: center;
	z-index: 1;
}

#anti-bug #main-vs .box {
	top: 0;
	height: 100%;
	padding: 0 5em;
	font-weight: 600;
	background: rgba(255, 255, 255, .9);
}


#anti-bug.premium #main-vs .box {
	background: #00472d;
}

#anti-bug.premium #main-vs span {
	color: #ffffff;
}

#anti-bug #main-vs .box>* {
	width: 100%;
}

#anti-bug #main-vs .catch {
	font-size: 2em;
	font-weight: 600;
	line-height: 1.6em;
	letter-spacing: .06em;
}

#anti-bug.premium #main-vs .catch {
	color: #fff;
}

#anti-bug #main-vs h1 {
	font-size: 1.5em;
}

#anti-bug #main-vs h1 svg {
	display: block;
	width: 15em;
	margin: 1.4em 0 .8em;
	fill: rgb(var(--bug-dgr));
	stroke: none;
}

#anti-bug.premium #main-vs h1 svg {
	margin-bottom: 0;
	fill: #fff;
}

#anti-bug.premium #main-vs h1 img {
	max-width: 8em;
	filter: brightness(0) invert(1)
}

#anti-bug.premium #main-vs h1 span {
	display: block;
	padding-top: .5em;
}




#anti-bug #main-vs h1 span {
	letter-spacing: .1em;
}

#anti-bug #main-vs .circle {
	top: 1.4em;
	left: 23.2em;
	width: 8em;
	height: 8em;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.6em;
	color: #fff;
	background: rgba(var(--bug-dgr), .7);
}

#anti-bug.premium #main-vs .circle {
	background: rgba(var(--bugp-gld), .85);
	width: 9em;
	height: 9em;
	font-size: 1.2em;
	font-weight: bold;
}


#anti-bug #main-vs>picture:first-of-type {
	top: -4px;
	right: 8em;
	width: 10em;
	aspect-ratio: 13/32;
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
	z-index: 1;
}

#anti-bug.premium #main-vs>picture:first-of-type {
	display: none
}

#anti-bug #main-vs>picture:last-of-type {
	top: 0;
	right: -10vw;
	height: 100%;
	aspect-ratio: 25 / 9;
	margin: auto;
}

#anti-bug #main-vs>picture img {
	display: block;
	width: 100%;
}



@media screen and (max-width:1440px) {
	#anti-bug #main-vs .box {
		left: 0;
		padding: 0 6vw;
		font-size: .9em;
		color: #fff;
		text-shadow: .2em .2em .6em rgba(0, 0, 0, .6);
		background: none;
		z-index: 2;
	}

	#anti-bug #main-vs h1 svg {
		fill: #fff;
	}

	#anti-bug #main-vs>picture:first-of-type {
		right: 4vw;
		width: 12vw;
		min-width: 100px;
	}

	#anti-bug.premium #main-vs .box {
		background: none;
	}
}

@media screen and (min-width:769px) and (max-width:1440px) {
	#anti-bug #main-vs .circle {
		top: 2vw;
		left: 42vw;
	}
}

@media screen and (max-width:1024px) {
	#anti-bug #main-vs .box {
		font-size: 1.4vw;
	}

	#anti-bug #main-vs h1 svg {
		margin: 1em 0 .4em;
	}

	#anti-bug #main-vs .circle {
		font-size: 1.2em;
	}

	#anti-bug.premium #main-vs .circle {
		font-size: 1em;
	}

	#anti-bug #main-vs>picture:last-of-type {
		right: 0vw;
	}
}

@media screen and (max-width:768px) {
	#anti-bug #main-vs {
		height: calc(100vw * 1.075);
		max-height: 900px;
	}

	#anti-bug #main-vs .box {
		top: -14vw;
		display: block;
		padding: 0;
		font-size: 2vw;
		text-shadow: .2em .2em .6em rgba(0, 0, 0, .4);
		left: 6vw;
	}

	#anti-bug.premium #main-vs h1 img {
		filter: none
	}

	#anti-bug #main-vs h1 svg {
		width: 14em;
	}

	#anti-bug #main-vs .circle {
		top: auto;
		bottom: 20vw;
		left: 6vw;
		font-size: 1.4em;
	}

	#anti-bug.premium #main-vs .circle {
		bottom: 8vw;
		font-size: .9em;
	}

	#anti-bug #main-vs>picture:first-of-type {
		right: 2vw;
		width: 36vw;
		min-width: 170px;
		aspect-ratio: 7/3;
	}

	#anti-bug #main-vs>picture:last-of-type {
		aspect-ratio: 40/43;
	}

	#anti-bug.premium #main-vs h1 svg {
		fill: #00472d
	}

	#anti-bug.premium #main-vs .catch {
		color: #00472d;
		text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
	}

	#anti-bug.premium #main-vs h1 img {
		z-index: 1
	}

	#anti-bug.premium #main-vs h1 span {
		color: #00472d;
		text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
	}

}


@media screen and (max-width:425px) {
	#anti-bug #main-vs .catch {
		font-size: 2.4em;
	}

	#anti-bug #main-vs .circle {
		font-size: 4.2vw;
	}
}



/*==============================
	desc
==============================*/
#anti-bug #desc {
	position: relative;
	margin-bottom: 9em;
	padding: 3em 0 10em;
	background: rgb(var(--bug-gr));
}

#anti-bug.premium #desc {
	background: #35380A;
}

#anti-bug.premium #desc>p {
	color: #fff
}

#anti-bug #desc picture {
	display: block;
}

#anti-bug #desc picture img {
	display: block;
	width: 100%;
}

#anti-bug #desc>p {
	text-align: center;
	font-size: 1.5em;
	line-height: 2em;
	letter-spacing: 1px;
}


/*record*/
#anti-bug #desc .record {
	position: absolute;
	bottom: -9em;
	left: 0;
	right: 0;
	width: 23em;
	margin: 2em auto 0;
	padding: 2.2em 0 1.2em;
	background: #fdf8ed;
	box-shadow: .2em .2em .4em rgba(0, 0, 0, .1);
	border-radius: 1em;
	z-index: 10;
}

#anti-bug.premium #desc .record {
	bottom: -11em;
}

#anti-bug.premium #desc .record span {
	font-size: .6em;
}

#anti-bug #desc .record:before {
	position: absolute;
	top: -2em;
	left: 0;
	right: 0;
	display: block;
	content: '';
	width: 6em;
	height: 6em;
	margin: auto;
	background: url(img/record-icon.webp) top .4em center / 50% no-repeat #fdf8ed;
	border-radius: 50vh;
}

#anti-bug #desc .record>* {
	position: relative;
	z-index: 1;
}

#anti-bug #desc .record dt {
	max-width: 12.6em;
	margin: 0 auto .8em;
	padding-bottom: .4em;
	text-align: center;
	font-size: 1.4em;
	letter-spacing: 1px;
	background: #fff;
	border: 1px solid #eaba4a;
}

#anti-bug #desc .record dt b {
	position: relative;
	top: 2px;
	font-size: 1.6em;
	font-weight: 500;
}

#anti-bug #desc .record dd {
	display: flex;
	justify-content: center;
	align-items: center;
}

#anti-bug #desc .record dd p {
	line-height: 1.8em;
}

#anti-bug #desc .record dd p em {
	margin: 0 .1em;
	text-shadow: 0 0 #eaba4a;
	font-size: 1.16em;
	font-style: normal;
}

#anti-bug #desc .record dd picture {
	width: 11em;
	aspect-ratio: 3/2;
	margin-left: 1em;
}

#anti-bug #desc .record dd picture img {
	border-radius: 1em;
}


@media screen and (max-width:1440px) {
	#anti-bug #desc>p {
		font-size: 1.4em;
	}
}

@media screen and (max-width:1024px) {
	#anti-bug #desc {
		padding: 1.6em 0 9em;
	}

	#anti-bug #desc>p {
		font-size: 1.3em;
		letter-spacing: 0;
	}
}

@media screen and (min-width:769px) {
	#anti-bug #desc .record {
		width: 31em;
	}

	#anti-bug #desc .record dd p br:first-of-type {
		display: none;
	}
}

@media screen and (max-width:425px) {
	#anti-bug #desc {
		margin-bottom: 8em;
		padding-bottom: 6em;
	}

	#anti-bug #desc>p {
		font-size: 1.1em;
	}

	#anti-bug #desc .record {
		width: 21em;
		padding: 1.6em 0 1.2em;
		font-size: .9em;
	}

	#anti-bug #desc .record:before {
		width: 5em;
		height: 5em;
	}

	#anti-bug #desc .record dt {
		font-size: 1.2em;
	}

	#anti-bug #desc .record dd picture {
		width: 9em;
	}
}



/*==============================
	lineup
==============================*/
#anti-bug #lineup {
	margin-top: 14em;
}

#anti-bug.premium #lineup .lineup {
	text-align: center;
	color: #d02929
}


/*--------------一時的に中央寄せ*---23/4/25まで-----------*/

#contents #main-column #anti-bug.premium #lineup>ul {
	justify-content: center;
}

@media screen and (max-width:768px) {
	#anti-bug #lineup {
		margin-top: 13em;
	}
}

@media screen and (max-width:425px) {
	#anti-bug #lineup {
		margin-top: 11em;
	}
}




/*==============================
	point
==============================*/
#anti-bug #point ul {
	width: calc(100% - 4em);
	margin: auto;
}

#anti-bug #point picture {
	display: block;
	max-width: 600px;
	aspect-ratio: 40/23;
	margin: auto;
}

#anti-bug #point picture img {
	display: block;
	width: 100%;
	border-radius: 1em;
}

#anti-bug #point li h3 {
	margin: 1em auto;
	padding-bottom: .6em;
	text-align: center;
	font-size: 1.26em;
	line-height: 1.6em;
	border-bottom: 1px solid rgb(var(--bug-gr));
}

#anti-bug.premium #point li h3 {
	border-bottom: 1px solid #00472d;
}

#anti-bug #point li p {
	line-height: 1.6em;
}

#anti-bug #point .movie {
	max-width: 23em;
	margin: 1.2em 0 0 auto;
	padding: 1em;
	background: #fff;
	border: 1px solid rgb(var(--bug-gr));
}

#anti-bug #point .movie>* {
	line-height: 1.6em;
}

#anti-bug #point .movie dt {
	margin-bottom: .6em;
	padding-bottom: .4em;
	border-bottom: 1px solid;
}

#anti-bug #point .movie button {
	position: relative;
	display: block;
	width: 9em;
	margin: .6em 0 0 auto;
	padding: .8em 0 .8em 3em;
	line-height: 1em;
	color: var(--txt);
	background: rgb(var(--bug-gr));
	border: none;
	border-radius: 50vh;
	cursor: pointer;
}

#anti-bug #point .movie button svg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.2em;
	width: 1.4em;
	margin: auto;
	fill: none;
	stroke: var(--txt);
	stroke-width: 3px;
}


/*design*/
#anti-bug #point .design {
	position: relative;
	max-width: 800px;
	margin: 4em auto 0;
	padding: 2em;
	background: rgb(var(--bug-gr));
}

#anti-bug #point .design p {
	position: absolute;
}

#anti-bug #point .design picture {
	aspect-ratio: 1/1;
}


@media screen and (min-width:1441px) {
	#anti-bug #point ul {
		display: flex;
		justify-content: space-between;
		max-width: 1440px;
	}

	#anti-bug #point li {
		width: calc(100%/2 - 2em);
	}
}

@media screen and (max-width:1440px) {
	#anti-bug #point li {
		margin: auto;
	}

	#anti-bug #point li:nth-of-type(n+2) {
		margin-top: 3em;
	}

	#anti-bug #point li:first-of-type {
		max-width: 67em;
	}

	#anti-bug #point li:last-of-type {
		max-width: 70em;
	}
}

@media screen and (max-width:425px) {

	#anti-bug #point ul,
	#anti-bug #point picture {
		width: calc(100% - 1.6em);
	}

	#anti-bug #point li {
		font-size: .96em;
	}

	#anti-bug #point li h3 {
		font-size: 1.2em;
		font-weight: 400;
	}

	#anti-bug #point .movie {
		margin: 1.2em auto 0;
	}

	#anti-bug #point .movie button {
		padding-bottom: .9em;
	}
}



/*==============================
	design
==============================*/
#anti-bug #design {
	position: relative;
	margin: auto;
}

#anti-bug #design p {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	margin: auto;
	z-index: 2;
}

#anti-bug #design p span {
	display: inline-block;
	line-height: 1em;
}

#anti-bug #design p.txt span {
	display: block;
	background: #fff;
}

#anti-bug #design p.eng {
	top: 0;
	width: 100%;
	max-width: 768px;
	height: 100%;
}

#anti-bug #design p.eng span {
	position: absolute;
	font-size: 1.6em;
	letter-spacing: 1px;
}

#anti-bug #design p.eng span:first-of-type {
	top: .4em;
	left: 1em;
	color: rgb(var(--bug-lgr));
}

#anti-bug #design p.eng span:last-of-type {
	bottom: .6em;
	right: 1em;
	color: rgb(var(--bug-gr));
}

#anti-bug #design picture {
	position: relative;
	display: block;
	width: 100%;
	max-width: 768px;
	margin: auto;
	padding: 3em;
	background: rgb(var(--bug-gr));
	overflow: hidden;
}

#anti-bug #design picture:before {
	position: absolute;
	right: 0;
	content: '';
	width: 100%;
	background: rgb(var(--bug-lgr));
}

#anti-bug #design picture>* {
	position: relative;
	display: block;
	width: 100%;
	z-index: 1;
}


@media screen and (min-width:1025px) {
	#anti-bug #design {
		width: 1000px;
	}

	#anti-bug #design p.txt {
		top: 0;
		bottom: 0;
		left: 0;
		font-size: 1.5em;
	}

	#anti-bug #design p.txt span {
		margin-top: .8em;
		padding: 1em 2em;
		border: 1px solid;
	}

	#anti-bug #design p.eng {
		right: 1em;
	}

	#anti-bug #design picture {
		margin-right: 1em;
	}
}

@media screen and (max-width:1024px) {
	#anti-bug #design {
		max-width: 768px;
	}

	#anti-bug #design p.txt {
		bottom: 3em;
		left: 3em;
		font-size: 1.4em;
	}

	#anti-bug #design p.txt span {
		margin-top: .4em;
		padding: .6em 1em;
	}

	#anti-bug #design p.eng {
		left: 0;
		right: 0;
	}

	#anti-bug #design picture {
		margin: auto;
	}
}

@media screen and (min-width:769px) {
	#anti-bug #design {
		margin-top: 4em;
	}

	#anti-bug #design p.txt {
		width: 17em;
	}

	#anti-bug #design picture {
		aspect-ratio: 1/1;
	}

	#anti-bug #design picture:before {
		bottom: -384px;
		height: 768px;
		transform: skew(0deg, -45deg);
	}
}

@media screen and (max-width:768px) {
	#anti-bug #design p.txt {
		bottom: 3.1em;
		left: 2.2em;
		width: 14em;
		font-size: 1.2em;
	}

	#anti-bug #design picture {
		padding: 3em 2em;
	}

	#anti-bug #design picture:before {
		bottom: 0;
		height: 50%;
	}
}

@media screen and (max-width:425px) {
	#anti-bug #design {
		font-size: .9em;
	}

	#anti-bug #design p.txt {
		left: 1.4em;
	}

	#anti-bug #design p.eng span:first-of-type {
		left: .5em;
	}

	#anti-bug #design p.eng span:last-of-type {
		right: .5em;
	}

	#anti-bug #design picture {
		padding: 3em 1em;
	}
}



/*==============================
	aroma
==============================*/
#anti-bug #aroma picture {
	display: block;
	width: 8em;
	margin: 0 auto 1em;
	aspect-ratio: 1/1;
}

#anti-bug #aroma picture img {
	display: block;
	width: 100%;
	border-radius: 50vh;
}

#anti-bug.premium #aroma li {
	position: relative
}

#anti-bug.premium #aroma picture img.rare {
	border: 5px solid rgba(241, 205, 54, 1.00);
}

/*#anti-bug.premium #aroma picture img.rare::after{
  position: absolute;
  content: "希少精油";
  top:0;
  left:0;
color:rgba(241,205,54,1.00);}*/

#anti-bug #aroma p {
	text-align: center;
}

#anti-bug #aroma>p {
	font-size: 1.2em;
	line-height: 1.8em;
}

#anti-bug #aroma ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	width: calc(100% - 1em);
	margin: .4em auto 0;
}

#anti-bug #aroma li {
	width: 10em;
	margin-top: 1.6em;
}

#anti-bug #aroma li p {
	line-height: 1em;
}


@media screen and (max-width:768px) {
	#anti-bug #aroma picture {
		width: 7em;
	}

	#anti-bug #aroma>p {
		font-size: 1.1em;
	}

	#anti-bug #aroma ul {
		font-size: .9em;
	}

	#anti-bug #aroma li {
		width: 9em;
	}
}

@media screen and (max-width:425px) {
	#anti-bug #aroma>p {
		font-size: 1em;
	}

	#anti-bug #aroma li {
		width: 8em;
	}
}

@media screen and (max-width:320px) {
	#anti-bug #aroma ul {
		font-size: .8em;
	}
}



/*==============================
	howto
==============================*/
#anti-bug #howto picture {
	display: block;
	margin: auto;
}

#anti-bug #howto picture img {
	display: block;
	width: 100%;
}

#anti-bug #howto ul {
	width: calc(100% - 4em);
	margin: auto;
}

#anti-bug #howto li div h3 {
	margin: 1.2em auto 1em;
	padding-bottom: .8em;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: .1em;
	border-bottom: 1px solid;
}

#anti-bug #howto li div h3 b {
	margin-right: .1em;
	font-size: 1.2em;
}

#anti-bug #howto li div p {
	line-height: 1.6em;
}

#anti-bug #howto li div picture {
	width: calc(100% - 2em);
	max-width: 400px;
	aspect-ratio: 5/3;
	margin-top: 1em;
}

#anti-bug #howto li div picture img {
	border-radius: 1em;
}


@media screen and (min-width:1025px) {
	#anti-bug #howto ul {
		display: flex;
		justify-content: space-between;
		max-width: 1440px;
	}

	#anti-bug #howto li {
		width: calc(100%/2 - 1em);
	}
}

@media screen and (max-width:1024px) {
	#anti-bug #howto ul {
		max-width: 800px;
	}

	#anti-bug #howto li {
		margin: auto;
	}

	#anti-bug #howto li:nth-of-type(n+2) {
		margin-top: 3em;
	}
}

@media screen and (max-width:768px) {
	#anti-bug #howto h2.ttl {
		margin-bottom: 0 !important;
	}

	#anti-bug #howto ul {
		width: 100%;
	}

	#anti-bug #howto li div {
		padding: 0 2em;
	}
}

@media screen and (max-width:425px) {
	#anti-bug #howto li div {
		padding: 0 1em;
		font-size: .9em;
	}

	#anti-bug #howto li div h3 {
		font-size: 1.1em;
	}
}



/*==============================
	ショップサーブ用
==============================*/
#main-column>#itemDetail-wrap {
	max-width: none !important;
}

#itemDetail-cont {
	max-width: 1000px;
}