@charset "UTF-8";

/*-- Edit infomation===================================
File name:base.css
Description: layout-base
Editor: YT@TX
Last Editor: YT@TX
Date: 2022.01.14
===================================================--*/
.content {
	position: relative;
	max-width: 980px;
	padding: 15px 20px;
}

.content.white_bg {
	background-color: #fff;
}

.shopping_icon {
	position: fixed;
	right: 10vw;
	top: 30%;
	z-index: 3;
	transition: 2s;
}

.shopping_icon.bigup {
	animation: bigUpAnime 0.5s forwards;
	top: auto;
	right: 10px;
	bottom: 20px;
}

@keyframes bigUpAnime {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

@media screen and (max-width:980px) {
	.shopping_icon {
		width: 15vw;
	}
}

@media screen and (min-width:981px) {
	.shopping_icon {
		width: 120px;
		top: 50%;
		right: calc((100% - 1000px) / 2);
		;
	}

	.content {
		padding: 25px;
	}

	.shopping_icon.bigup {
		width: 80px;
	}
}


/*===============-
  mainvisual
==========================================*/
.mainvisual_container {
	position: relative;
}

.mainvisual {
	border-radius: 0 0 50vw 50vw;
	background: url(/preshade/images/mainvisual.jpg) no-repeat center -7vw;
	background-size: cover;
	height: 50vw;
}

.logo_content {
	position: relative;
	padding-top: 50%;
	overflow: hidden;
}

.logo_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.logo_inner figure {
	position: absolute;
	left: 50%;
	top: 80%;
	width: 70%;
	max-width: 720px;
	padding: 15px 20px;
	transform: translate(-50%, -80%);
}

@media screen and (min-width:981px) {
	.logo_inner figure {
		padding: 25px;
	}
}


/*===============-
  lead文
==========================================*/
.top_lead {
	background-color: #fff;
}

.top_lead p.catch {
	margin: 30px 0;
	color: #6e6e6e;
	font-size: 1.125em;
	text-align: center;
	line-height: 1.8;
}

.top_lead p.catch span {
	font-size: 1.75rem;
}

@media screen and (min-width:641px) {
	.top_lead p.catch {
		font-size: 1.375em;
	}
}

@media screen and (min-width:981px) {
	.top_lead p.catch {
		font-size: 1.5em;
	}
}

.headLine2 {
	display: block;
	margin: 0 auto;
	padding: 10px;
	border-radius: 3em;
	border: 5px solid #7f61a7;
	background: #fff;
	color: #7f61a7;
	font-size: 4vw;
	text-align: center;
	font-family: 'Zen Maru Gothic', sans-serif;
}

.headLine2 span {
	font-size: 1.25em;
}

@media screen and (min-width:641px) {
	.headLine2 {
		font-size: 1.5em;
	}

	.headLine2 span {
		font-size: 1.25em;
	}
}

@media screen and (min-width:981px) {
	.headLine2 {
		font-size: 1.75em;
	}

	.headLine2 span {
		font-size: 1.5em;
	}
}

.top_point {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 15px 20px;
	background-color: #fff;
}

.top_point .flex_point {
	display: block;
	background: url(/preshade/images/point_bg.png) no-repeat right bottom;
}

.top_point .flex_point > div {
	padding: 20px;
}

/* .top_point .flex_point > div:nth-child(2) {
	padding: 20px;
} */

.top_point .flex_point>div:nth-child(2) p{
	width: 86%;
	margin-left: auto;
}

.lottie_wrap{
	position: relative;
	aspect-ratio: 1/1;
}

.lottie_wrap #lottie{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#lottie svg{
	transform: scale(1.6) !important;
}


.top_point .flex_point {
	display: flex;
	justify-content: space-evenly;
}

.top_point .flex_point>div {
	width: 46%;
}

.top_point .flex_point>div:nth-child(2) {
	padding: 0;
}


/*動画 remodal*/
.remodal {
	padding: 0;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*---------------
  TOP 紫外線、遮熱
------------------------------*/
.top_uv {
	margin: 50px 0;
	padding: 40px 0;
}

@media screen and (min-width:641px) {
	.top_uv {
		padding: 80px 0;
	}
}

.top_uv section {
	text-align: center;
}

.top_uv section:first-child {
	margin-top: 0;
}

@media screen and (max-width:640px) {
	.top_uv section {
		margin-top: 80px;
	}
}

.top_uv .lead_text {
	text-align: center;
}

.lead_text .headLine2 {
	margin-top: 40px;
}

.top_uv .headLine2 {
	border: 5px solid #f0a28b;
	color: #f0a28b;
}

.top_uv .lead_text p {
	margin-top: 20px;
	line-height: 1.8;
	color: #6e6e6e;
	font-size: 1.125em;
}

@media screen and (min-width:641px) {
	.top_uv .lead_text p {
		font-size: 1.375em;
	}
}

.top_uv .headLine3 {
	margin-bottom: 15px;
	color: #f0a28b;
	font-size: 2em;
	font-family: 'Zen Maru Gothic', sans-serif;
}

.top_uv .headLine4 {
	color: #f0a28b;
}

@media screen and (min-width:481px) {
	.top_uv .headLine3 {
		font-size: 2.125em;
	}
}

@media screen and (min-width:641px) {
	.top_uv .headLine3 {
		margin-bottom: 25px;
		font-size: 2.25em;
	}
}

@media screen and (min-width:981px) {
	.top_uv .headLine3 {
		font-size: 2.5em;
	}
}


/*---------------
  サーモ実験
------------------------------*/
/*サーモ実験*/
.uv_bg_color {
	padding: 15px 20px;
	background-color: #fcede8;
}

.flex_thermography {
	display: block;
}

.flex_thermography div {
	width: 98%;
	margin: 20px 1%;
}

.flex_thermography div p {
	color: #777;
}

@media screen and (min-width:481px) {
	.flex_thermography {
		display: flex;
	}

	.flex_thermography div {
		width: 48%;
	}
}

@media screen and (min-width:981px) {
	.uv_bg_color {
		padding: 25px;
	}
}

/*---------------
  ミラー効果
------------------------------*/
.mirror .mirror_effect figure {
	margin-bottom: 20px;
}

.mirror .mirror_effect figcaption {
	margin-top: 10px;
	color: #999;
}

.mirror .mirror_effect figcaption span {
	font-size: 1.5em;
	font-weight: bold;
}

@media screen and (max-width:480px) {
	.mirror .spView {
		display: block;
	}

	.mirror .pcView {
		display: none;
	}
}

@media screen and (min-width:481px) {
	.mirror .spView {
		display: none;
	}

	.mirror .pcView {
		position: relative;
		display: block;
	}

	.mirror .pcView>p {
		position: absolute;
		z-index: 2;
		padding: 0.5em 0;
		top: 50%;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.7);
		font-size: 1.375em;
		text-align: center;
		transform: translateY(-50%);
	}

	.mirror .pcView:hover>p {
		display: none;
	}
}

/*---------------
  プライバシーも守ります
------------------------------*/
.feature_area .headLine2 {
	margin-top: 50px;
	border-color: #46aab4;
	color: #46aab4;
}

.feature_list {
	display: block;
	margin-bottom: 50px;
}

.feature_list li {
	width: 98%;
	margin: 20px 1% 0;
	text-align: center;
}

.feature_list li figure {
	border: 3px solid #46aab4;
	text-align: center;
}

@media screen and (min-width:481px) {
	.feature_list {
		display: flex;
		flex-wrap: wrap;
	}

	.feature_list li {
		width: 48%;
	}
}

.feature_masa {
	display: block;
	height: 100%;
	margin: 20px 0;
	padding: 20px 0;
	border: 3px solid #333;
	background-color: #fff;
	box-shadow: 4px 4px 1px #777;
	text-align: center;
	transition: 0.2s;
}

.feature_masa a{
	color: #333;
}

.feature_masa a:hover {
	box-shadow: none;
	transform: translate(4px, 4px);
}

.feature_masa figure {
	padding: 0 4%;
	margin-top: 20px;
	text-align: center;
}

.feature_masa figure img {
	width: 80%;
	max-width: 160px;
}

.purchase_btn {
	display: block;
	width: 80%;
	margin: 40px auto;
	padding: 10px 0;
	border-radius: 1em;
	border: 5px solid #f71f5b;
	background: #fff;
	box-shadow: 4px 4px 1px #c58e9e;
	color: #f71f5b;
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	transition: 0.2s;
}

.purchase_btn:hover {
	box-shadow: none;
	transform: translate(4px, 4px);
}

@media screen and (min-width: 981px) {
	.purchase_btn {
		font-size: 1.25em;
	}
}

/*---------------
  カラーは２色
------------------------------*/
.pattern_area .headLine2 {
	margin-top: 0;
	border-color: #46aab4;
	color: #46aab4;
}

.pattern_list {
	display: block;
	margin-bottom: 50px;
}

.pattern_list>div {
	width: 98%;
	margin: 20px 1% 0;
	text-align: center;
}

.pattern_list>div:nth-child(2) {
	margin: 40px 1% 0;
}

.pattern_list figure {
	border: 3px solid #46aab4;
	text-align: center;
}

.pattern_list>div ul {
	display: flex;
	flex-wrap: wrap;
}

.pattern_list>div ul li {
	width: 48%;
	margin: 20px 1% 0;
}

.pattern_list>div ul li a {
	display: block;
	border: 2px solid #46aab4;
	color: #46aab4;
	box-shadow: 3px 3px 3px rgba(69, 100, 67, 0.5);
	transition: .3s;
}

.pattern_list>div ul li a:hover {
	box-shadow: none;
	transform: translate(3px, 3px);
}

@media screen and (min-width:481px) {
	.pattern_list {
		display: flex;
		flex-wrap: wrap;
	}

	.pattern_list>div {
		width: 48%;
	}

	.pattern_list>div:nth-child(2) {
		margin: 20px 1% 0;
	}
}


/*---------------
  関連商品
------------------------------*/
.relate {
	padding: 0 0 80px;
}

@media screen and (min-width:641px) {
	.relate {
		padding: 40px 0 80px;
	}
}

.relate .headLine3 {
	padding: 10px 0;
	border-radius: 3em;
	background-color: #242424;
	color: #fff;
	font-size: 1.5em;
	font-family: 'Zen Maru Gothic', sans-serif;
	text-align: center;
}

.relate ul {
	position: relative;
	display: flex;
	justify-content: center;
}

.relate ul li {
	width: 48%;
	margin: 20px 1%;
}

.relate li figure {
	border: 3px solid #333;
}

.relate li div {
	margin-top: 20px;
	text-align: center;
}

.relate li div img {
	width: 80%;
	max-width: 240px;
}

.relate li p {
	margin-top: 20px;
	color: #555;
	text-align: center;
	line-height: 1.5;
}



/*---------------
  吹き出し
------------------------------*/
.balloon {
	position: relative;
	border-radius: 1.5em;
	padding: 1em;
}

.balloon::before {
	content: "";
	position: absolute;
	left: 50%;
	border: 15px solid transparent;
	transform: translateX(-50%);
}

.balloon::after {
	content: "";
	position: absolute;
	left: 50%;
	border: 15px solid transparent;
	transform: translateX(-50%);
}

/*コンテンツの上用*/
.balloon.over {
	margin-bottom: 40px;
}

.balloon.over::before {
	bottom: -40px;
}

.balloon.over::after {
	bottom: -36px;
}

/*コンテンツの下用*/
.balloon.under {
	margin-top: 40px;
}

.balloon.under::before {
	top: -40px;
}

.balloon.under::after {
	top: -36px;
}

.balloon strong {
	font-size: 1.25em;
	font-weight: bold;
}

.balloon span {
	color: #565656;
	font-size: 0.875em;
}

.balloon strong {
	font-size: 1.25em;
	font-weight: bold;
}

/*色 青*/
.top_intro .balloon {
	border: 2px solid #6abff1;
	background-color: #f7fbff;
	text-align: center;
}

.top_intro .balloon.over::before {
	border-top: 25px solid #6abff1;
}

.top_intro .balloon.over::after {
	border-top: 25px solid #f7fbff;
}

.top_intro .balloon.under::before {
	border-bottom: 25px solid #6abff1;
}

.top_intro .balloon.under::after {
	border-bottom: 25px solid #f7fbff;
}

.top_intro .balloon strong {
	color: #459ed1;
}

.top_intro .balloon a {
	display: inline-block;
	padding: 0.2em 1em;
	margin-top: 1em;
	border-radius: 0.8em;
	border: 2px solid #459ed1;
	background-color: #fff;
	box-shadow: 2px 2px 2px #94acc5;
	color: #459ed1;
	transition: 0.2s;
}

.top_intro .balloon a:hover {
	box-shadow: none;
	transform: translate(2px, 2px);
}

/*色 赤*/
.top_uv .balloon {
	border: 2px solid #ffa88f;
	background-color: #fff9f7;
}

.top_uv .balloon.over::before {
	border-top: 25px solid #ffa88f;
}

.top_uv .balloon.over::after {
	border-top: 25px solid #fff9f7;
}

.top_uv .balloon.under::before {
	border-bottom: 25px solid #ffa88f;
}

.top_uv .balloon.under::after {
	border-bottom: 25px solid #fff9f7;
}

.top_uv .balloon strong {
	color: #f77d62;
}

.top_uv .balloon a {
	display: inline-block;
	padding: 0.2em 1em;
	margin-top: 1em;
	border-radius: 0.8em;
	border: 2px solid #f77d62;
	background-color: #fff;
	box-shadow: 2px 2px 2px #c59494;
	color: #f77d62;
	transition: 0.2s;
}

.top_uv .balloon a:hover {
	box-shadow: none;
	transform: translate(2px, 2px);
}


/*---------------
  枠
------------------------------*/
.waku {
	position: relative;
	border-radius: 1.5em;
	margin-bottom: 40px;
	padding: 1em;
	border: 2px solid #ffa88f;
	background-color: #fff9f7;
}

a.btn {
	display: inline-block;
	padding: 0.2em 1em;
	border-radius: 0.8em;
	border: 2px solid #ffa88f;
	background-color: #fff;
	box-shadow: 2px 2px 2px #c59494;
	color: #f77d62;
	transition: 0.2s;
}

a.btn:hover {
	box-shadow: none;
	transform: translate(2px, 2px);
}


/*---------------
  ポップアップ
------------------------------*/
.pop_wrap {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 300px;
	height: 300px;
	animation: rotation 3s infinite linear;
}

@-webkit-keyframes rotation {
	0% {
		-webkit-transform: translateY(0);
	}

	5% {
		-webkit-transform: translateY(-10px);
	}

	10% {
		-webkit-transform: translateY(0);
	}

	15% {
		-webkit-transform: translateY(-10px);
	}

	20% {
		-webkit-transform: translateY(0);
	}
}

@keyframes rotation {
	0% {
		transform: translateY(0);
	}

	5% {
		transform: translateY(-10px);
	}

	10% {
		transform: translateY(0);
	}

	15% {
		transform: translateY(-10px);
	}

	20% {
		transform: translateY(0);
	}
}

.pop_close {
	position: absolute;
	top: -25px;
	right: 0;
	cursor: pointer;
}

.pop_wrap a:hover,
.pop_close:hover {
	opacity: 1;
}

.pop_wrap a:hover img,
.pop_close:hover img {
	filter: contrast(1.2);
}