@charset "UTF-8";

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

article {
	background: rgba(255, 255, 255, 0.5);
}

.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) {
	.content {
		padding: 20px;
	}

	.shopping_icon {
		width: 120px;
		top: 35%;
	}
}

.shopping_icon.bigup {
	width: 80px;
}


/*===============-
  mainvisual
==========================================*/
.mainvisual_container {
	background-color: #fff;
}

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

@media screen and (min-width:981px) {
	.mainvisual {
		background: url(/coolupShade/images/mainvisual.jpg) no-repeat center -100px;
	}
}

.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: 75%;
	width: 65%;
	max-width: 720px;
	padding: 1%;
	transform: translate(-50%, -75%);
}

/*===============-
  lead文
==========================================*/
.top_lead {
	padding: 30px 0 50px;
}

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

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

.sp {
	display: inline;
}

.size_read {
	margin-bottom: 0;
	color: #004ea2;
	font-size: 1.5em;
	font-family: 'Zen Maru Gothic', sans-serif;
	text-align: center;
}

.size_img {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.size_img li {
	display: block;
	margin-bottom: 2em;
	width: 100%;
}

.size_img li figcaption {
	display: block;
	margin-top: 0.3em;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
}

.size_img li img {
	border-radius: 10px;
}

@media screen and (min-width:641px) {
	.sp {
		display: none;
	}

	.top_lead p.catch {
		font-size: 1.375em;
	}

	.size_img li {
		width: 32.333333%;
	}

	.size_img li figcaption {
		font-size: 1.0em;
	}
}

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

	.size_read {
		margin-bottom: 25px;
		font-size: 1.5em;
	}

	.size_img li figcaption {
		font-size: 1.2em;
	}
}

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

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

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

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

.headLine3 {
	margin-bottom: 0;
	color: #004ea2;
	font-size: 1.5em;
	font-family: 'Zen Maru Gothic', sans-serif;
	text-align: center;
}

.headLine4 {
	color: #004ea2;
}

@media screen and (min-width:641px) and (max-width: 980px) {
	.headLine3 {
		margin-bottom: 15px;
		font-size: 2em;
	}
}

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


/* Youtube */
.youtube {
	display: block;
	margin: 40px 0 80px;
}

.youtube iframe {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	height: auto;
	aspect-ratio: 16 / 9;
}


/*---------------
  TOP 紫外線、遮熱
------------------------------*/
.top_uv {
	text-align: center;
}

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

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

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

.top_uv .headLine3,
.top_uv .headLine4 {
	color: #f0a28b;
}


/*自動再生動画*/
.top_uv .autoplay_movie {
	position: relative;
	/* padding-top: 56.25%; */
	text-align: center;
	background: #000;
}

.top_uv .autoplay_movie video {
	/* position: absolute;
  top: 0;
  left: 0; */
	width: 100%;
	max-width: 1200px;
	height: 100%;
}


/*紫外線の透過量 メモ*/
@media screen and (max-width:640px) {
	.uv_block_image {
		margin-top: 50px;
		text-align: center;
	}

	.uv_block_image img {
		width: 180px;
	}
}

.uv_memo {
	text-align: left;
}

.uv_memo span{
	display: inline-block;
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
}

@media screen and (min-width:641px) {
	.uv_memo {
		text-align: right;
	}
}

/*---------------
  取り付けカンタン
------------------------------*/
/* 視界は良好 */
.top_clarity {
	display: flex;
	flex-wrap: wrap;
}

.top_clarity div {
	width: 100%;
	margin-top: 20px;
}

.top_clarity div p {
	margin-top: 10px;
	color: #004ea2;
	text-align: center;
	line-height: 1.2;
}

.top_clarity div p span{
	color: #333;
	font-size: 0.875rem;
}

@media screen and (min-width: 681px) {
	.top_clarity div {
		width: 48%;
		margin: 0 1%;
	}

	.top_clarity div p {
		font-size: 1.25em;
	}
}

/* top_attach */
.top_attach {
	display: flex;
	flex-wrap: wrap;
}

.top_attach div {
	width: 100%;
}

.top_attach div:nth-child(2) {
	margin-top: 20px;
	text-align: center;
}

@media screen and (min-width: 681px) {
	.top_attach div {
		width: 48%;
		margin: 0 1%;
	}

	.top_attach div:nth-child(2) {
		margin-top: 0;
	}
}

.attach_btn_area {
	margin: 20px 0;
	text-align: center;
}

.attach_btn_area .btn {
	border: 2px solid #459ed1;
	box-shadow: 2px 2px 2px #94acc5;
	color: #459ed1;
	font-size: 1.125em;
}

/* 埃がつかない ほか */
.feature_list {
	display: flex;
	flex-wrap: wrap;
}

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

.feature_list li a {
	display: block;
	height: 100%;
	padding: 20px 0;
	border: 3px solid #000;
	background-color: #fff;
	box-shadow: 4px 4px 1px #777;
	color: #343434;
	font-weight: bold;
	text-align: center;
	transition: 0.2s;
}

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

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

.feature_list li:last-child img {
	width: 80%;
	max-width: 160px;
}

@media screen and (max-width:640px) {
	.feature_list li:last-child figure {
		padding-top: 25%;
	}
}

@media screen and (min-width:641px) {
	.feature_list li:last-child {
		width: 98%;
	}

	.feature_list li:last-child br {
		display: none;
	}
}

@media screen and (min-width:981px) {
	.feature_list li figure img {
		max-width: 160px;
	}

	.feature_list li figure {
		padding: 0;
	}
}

.feature_pop {
	background-color: #fff;
}

.feature_pop .remodal-cancel {
	width: 100%;
	background-color: #242424;
}

.feature_pop .remodal-cancel:hover {
	background: #ef5350;
}

/*風通し*/
.wind .inner {
	padding: 1.5em;
}

.wind h4 {
	padding: 15px 0;
	border-radius: 1em;
	background-color: #004ea1;
	box-shadow: 4px 4px 2px #bbb;
	color: #fff;
	font-size: 4vw;
}

.wind h4+p {
	margin-top: 20px;
	line-height: 1.8;
}

@media screen and (min-width:981px) {
	.wind h4 {
		font-size: 1.875em;
	}
}

/*---------------
  ご購入はこちら
------------------------------*/
.purchase_btn {
	display: block;
	width: 80%;
	margin: 0 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.5em;
	}
}

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

.relate .stripe {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 5em;
}

.relate .stripe p,
.relate .stripe figure {
	display: block;
	width: 49%;
}

.relate .stripe p {
	line-height: 2em;
}

.relate .stripe strong {
	display: block;
	margin: 0.5em 0 1em;
	font-size: 2em;
}

.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: 15px 20px;
	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);
}

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

/*---------------
  動画
------------------------------*/
.movie-content-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movie-content-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mfp-content {
	max-width: 800px;
	padding-top: 44px;
}

.mfp-fade01.mfp-bg {
	opacity: 0;
	transition: all 0.2s ease-out;
}

.mfp-fade01.mfp-bg.mfp-ready {
	opacity: 0.7;
}

.mfp-fade01.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade01.mfp-wrap .mfp-content {
	opacity: 0;
	transition: all 0.2s ease-out;
}

.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}

.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}


/*---------------
  ポップアップ
------------------------------*/
.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);
}