@charset "UTF-8";
/* CSS Document */

.youtube {
	margin-bottom: 4em;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


.shop {
	width: 100%;
	text-align: center;
}

.bt-cart {
	position: relative;
    display: inline-block;
    padding: 1em 0em;
	text-align: center;
    text-decoration: none;
    background: #ECECEC;
    transition: .4s;
	font-size: 16px;
	width: 80%;
	border-radius: 3px;
	margin-bottom: 1em;
}

.bt-cart:hover {
	background: #FF9300;
    color: white;
	text-decoration:none;
}



.top {
	position: relative;
	width: 100%;
	margin-bottom: 15em;
	margin-top: 4em;
	height: 350px;
}

.top .top_img {
	position: relative;
}

.top .top_img .top_img1 {
	position: absolute;
	z-index: 2;
	width: 50%;
}


.top .top_text {
	position: relative;
}

.top .top_img .top_img2 {
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 10em;
}

.top .top_img .top_img2 img {
	width: 100%;
}

.top .top_h {
	position: absolute;
	z-index: 3;
	right: 0;
	width: 50%;
	text-align: center;
}

.top .top_h span {
	display: block;
	font-size: 40px;
	border-bottom: solid 4px #01336F;
}

.top .top_h p {
	font-size: 20px;
	margin-top: 0.5em;
	line-height: 1.5em;
}

.top_text_h {
	font-size: 22px;
	margin-bottom: 1em;
}


.top_text p {
	font-size: 14px;
}


/*con1*/
.con1 {
	margin-bottom: 15em;
	margin-top: 15em;
}

.con1 .con1_img {
	width: 100%;
	text-align: center;
	margin-bottom: 3em;
}

.con1 .con1_h {
	font-size: 22px;
	text-align: center;
	margin-bottom: 0.5em;
}

.con1 .con1_text {
	text-align: center;
}

.con1 .con1_text p {
	font-size: 16px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

/*con2*/
.con2 {
	width: 94.2%;
	text-align: center;
	margin-bottom: 6em;
	margin-left: auto;
	margin-right: auto;
}

.con2 .con2_img {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.con2 .con2_img img {
	width: 100%;
}

	.con2 .docking_image ul  {
		list-style: none;
		margin-bottom: 1em;
	}

	.con2 .docking_image li  {
		display: inline;
	}


	.con2 .docking_image li img {
		width: 25%;
	}

.con2 .con2_h {
	font-size: 22px;
	margin-bottom: 0.5em;
}

.con2 .con2_text p {
	font-size: 14px;
}

/*con3*/
.con3 {
	width: 100%;
	text-align: center;
	margin-bottom: 10em;
}

.con3 .con3_img {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.con3 .con3_h {
	font-size: 22px;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.con3 .con3_text p {
	font-size: 14px;
}

/*con4*/
.con4 {
	width: 100%;
	text-align: center;
}

.con4 .con4_img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.con4 .con4_h {
	font-size: 22px;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.con4 .con4_text p {
	margin-right: auto;
	margin-left: auto;
	font-size: 14px;
	width: 60%;
}

/*con5*/
.con5 {
	width: 100%;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 10em;
}

.con5 .con5_img {
	width: 100%;
}

.con5 .con5_img img {
	width: 90%;
}

.con5 .con5_text p {
	font-size: 14px;
}

.con5 .how_search {
	display: flex;
	flex-wrap: wrap;
	margin-top: 5em;
}

.con5 .how_search .how_img {
	width: 50%;
}

.con5 .how_search .how_img2 {
	width: 50%;
}


.con5 .how_search .how_img img {
	width: 80%;
}

.con5 .how_search .how_img2 img {
	width: 80%;
}

.con5 .how_search .how_text {
	width: 50%;
	font-size: 14px;
}

.con5 .how_search .how_text2 {
	width: 50%;
	font-size: 14px;
}

.con5 .how_search .how_text2 p {
	width: 63%;
	margin-left: auto;
	margin-right: auto;
}

/*con6*/
.con6 {
	width: 100%;
	text-align: center;
	margin-bottom: 10em;
}

.con6 .con6_img {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.con6 .con6_h {
	font-size: 22px;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.con6 .con6_text p {
	font-size: 14px;
	width: 57%;
	margin-left: auto;
	margin-right: auto;
}


/*con7*/
.con7 {
	width: 100%;
	text-align: center;
	margin-bottom: 10em;
}

.con7 .con7_img {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.con7 .con7_h {
	font-size: 22px;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.con7 .con7_text p {
	font-size: 14px;
}

.con7 .con7_parts table {
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1em;
}

.con7 .con7_parts td {
	width: 50%;
}




/*gallery*/
.gallery {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5em;
}

.gallery .pic img{
	width: 100%;
}

.gallery .pic {
	width: 22.5%;
	margin: 0em 1em;
}

/*size*/
.con8 {
	width: 100%;
	text-align: center;
	margin-bottom: 3em;
}

.con8 .con8_img {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.spec {
	text-align: left;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.spec table {
	border-collapse: collapse;
	border: solid 2px #666;
    width: 100%;
    margin-bottom: 20px;
	color: #3C3C3C;
	margin-left: auto;
	margin-right: auto;
}

.spec table th, .spec table td {
	border: solid 1px #666;
	padding: 12px 10px;
	text-align: center;
}

.spec table th {
	background: #e6e6e6;
}


/*パンフ*/
.pamphlet {
	margin-top: 5em;
	margin-bottom: 5em;
	text-align: center;
}

.pamphlet a {
	background-color: #E6E6E6;
	padding: 2em 15em;
	font-size: 14px;
}

.pamphlet a:hover {
	background-color: #F08301;
	padding: 2em 15em;
	color: #fff;
	text-decoration: none;
}


.contact {
	text-align: center;
	margin-top: 3em;
	margin-bottom: 2em;
	font-size: 14px;
	
}

.bkRGBA{
  /* 背景画像の透過用css */
  height: 100%;
  background: rgba(255,255,255,0.7);
}


.contact {
	background: url(/products/magnetic-privacyfilm-series/img/pf_image_1.png);
	background-repeat: no-repeat;
	height: 500px;
	background-position: 0 0;
	margin-top: 3em;
}

.contact_h {
	font-size: 25px;
	text-align: center;
	margin-bottom: 0.5em;
	
}

.contact_text {
	font-size: 16px;
	text-align: center;
}


.contact_all {
	display: flex;
	width: 1000px;
	margin-top: 2em;
}


.contact_mail {
	margin-left: 14em;
}

.contact_mail svg{
	width: 100px;
}


.mail_text {
	font-size: 20px;
	width: 230px;
	padding-left: 1em;
	padding-top: 1.7em;
}


.contact_tell {
	margin-left: 6em;
}

.contact_tell svg{
	width: 100px;
}

.tell_text {
	font-size: 20px;
	width: 230px;
	padding-left: 1em;
	padding-top: 0.8em;
}

.contact_tell a:hover path {
	fill:#f39800;
}

.contact_mail a:hover path {
	fill:#f39800;
}


.contact .rental {
	margin-top: 2em;
    background-color: rgba(2,52,110,0.7);  
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	font-weight: bold;
	padding: 1em 0;
}

.lp_page {
	width: 100%;
	margin-bottom: 3em;
	text-align: center;
}

.lp_page:hover {
	opacity: 0.7;
}

.lp_page img {
	width: 90%;
}

@media screen and (min-width:600px) and (max-width:1024px) {
    /*Tablet*/
	.top {
		height: 350px;
	}	
	
 .top_text_h {
		text-align: center;
	}
	
	.top .top_img1 img {
		width: 100%;
	}

.top .top_h {
	position: absolute;
	z-index: 3;
	right: 0;
	width: 45%;
	text-align: center;
}

.top .top_h span {
	font-size: 30px;
	border-bottom: solid 3px #01336F;
}


.top_text p {
	font-size: 14px;
	width: 90%;
		margin-left: auto;
	margin-right: auto;
}
	
.con1 .con1_text p {
		width: 74%;
	}	
	
	.con4 .con4_text p {
		width: 90%;
	}
	
	
/*gallery*/
.gallery {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5em;
}

.gallery .pic img{
	width: 100%;
}

.gallery .pic {
	width: 21.5%;
	margin: 0em 1em;
}

.spec {
	width: 100%;
}
	
.contact_h {
	font-size: 25px;
	text-align: center;
	margin-bottom: 0.5em;
	padding-top: 2em;
	
}

.contact_text {
	font-size: 16px;
	text-align: center;
}


.contact_all {
	display: flex;
	width: 100%;
	margin-top: 7em;
	margin-left: auto;
	margin-right: auto;
}


.contact_mail {
	margin-left: 0em;
}

.contact_mail svg{
	width: 100px;
}


.mail_text {
	font-size: 20px;
	width: 50%;
	padding-left: 0.5em;
	padding-top: 1.7em;
}


.contact_tell {
	margin-left: 1em;
}

.contact_tell svg{
	width: 100px;
}

.tell_text {
	font-size: 20px;
	width: 50%;
	padding-left: 0.5em;
	padding-top: 0.8em;
}

.contact_tell a:hover path {
	fill:#f39800;
}

.contact_mail a:hover path {
	fill:#f39800;
}
	
.lp_page {
	margin-top: 10em;
}


}


@media screen and (max-width:599px) {
    /*SmartPhone*/
	.top {
		height: 220px;
	}
	
.top .top_img {
	position: inherit;
}

.top .top_img .top_img1 {
	position: inherit;
	z-index: inherit;
	width: 100%;
}
	
	.top .top_img .top_img1 img {
		width: 100%;
	}


.top .top_text {
	position: inherit;
}

.top .top_img .top_img2 {
	width: 100%;
	position: inherit;
	z-index: inherit;
	top: 1em;
}

.top .top_img .top_img2 img {
	width: 100%;
}

.top .top_h {
	position: inherit;
	z-index: inherit;
	right: 0;
	width: 100%;
	text-align: center;
}

.top .top_h span {
	display: block;
	font-size: 28px;
	border-bottom: solid 2px #01336F;
}

.top .top_h p {
	font-size: 18px;
	margin-top: 0.5em;
	line-height: 1.5em;
}

.top_text_h {
	font-size: 18px;
	margin-bottom: 1em;
}


.top_text p {
	font-size: 13px;
}
	
/*con1*/
.con1 {
	margin-bottom: 10em;
	margin-top: 10em;
}

.con1 .con1_img {
	width: 100%;
	text-align: center;
	margin-bottom: 3em;
}

.con1 .con1_img img {
		width: 100%;
	}	
	
.con1 .con1_h {
	font-size: 20px;
}

.con1 .con1_text p {
	font-size: 14px;
	width: 90%;
	text-align: left;
}

/*con2*/

.con2 .con2_img {
	width: 100%;
}
	
.con2  img {
	width: 100%;
} 

	.con2 .docking_image li img {
		width: 32%;
	}
	
.con2 .con2_h {
	font-size: 20px;
	margin-bottom: 0.5em;
}

.con2 .con2_text p {
	font-size: 14px;
	text-align: left;
}

/*con3*/
.con3 .con3_img {
	width: 100%;
}
	
.con3 .con3_img img {
	width: 100%;
}

.con3 .con3_h {
	font-size: 20px;
}

.con3 .con3_text p {
	font-size: 14px;
	text-align: left;
}

/*con4*/
.con4 .con4_img img {
	width: 100%;
}

.con4 .con4_h {
	font-size: 20px;
}

.con4 .con4_text p {
	font-size: 14px;
	width: 95%;
	text-align: left;
}

/*con5*/

.con5 .con5_img img {
	width: 100%;
}

.con5 .con5_text p {
	font-size: 14px;
}

.con5 .how_search {
	flex-direction: column;
	margin-top: 3em;
}

.con5 .how_search .how_img {
	width: 100%;
	order: 0;
}

.con5 .how_search .how_img2 {
	width: 100%;
	order: 2;
}


.con5 .how_search .how_img img {
	width: 100%;
}

.con5 .how_search .how_img2 img {
	width: 100%;
}

.con5 .how_search .how_text {
	width: 100%;
	order: 1;
	margin-bottom: 2em;
	text-align: left;
}

.con5 .how_search .how_text2 {
	width: 100%;
	order: 3;
	text-align: left;
}

.con5 .how_search .how_text2 p {
	width: 100%;
}

/*con6*/
.con6 {
	width: 100%;
	text-align: center;
	margin-bottom: 10em;
}

.con6 .con6_img {
	width: 100%;
}
	
.con6 .con6_img img {
	width: 100%;
}

.con6 .con6_h {
	font-size: 20px;
}

.con6 .con6_text p {
	font-size: 14px;
	width: 90%;
	text-align: left;
}


/*con7*/
.con7 .con7_img {
	width: 100%;
}

.con7 .con7_img img {
	width: 100%;
}	
	
.con7 .con7_h {
	font-size: 20px;
}

.con7 .con7_text p {
	font-size: 14px;
	text-align: left;
}

.con7 .con7_parts table {
	width: 100%;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1em;
}

	.con7 .con7_parts tr td {
		display: block;
	}

.con7 .con7_parts td {
	width: 100%;
}


/*gallery*/
.gallery {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5em;
}

.gallery .pic img{
	width: 100%;
}

.gallery .pic {
	width: 42%;
	margin: 0em 1em;
}
	
.con8 .con8_img {
		width: 100%;
	}

.con8 .con8_img img {
		width: 100%;
	}

.spec {
	text-align: left;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


.spec table {
    width: 100%;
}
	
.spec table th, .spec table td {
	display: block;
}
	
.contact {
	background: url(/products/magnetic-privacyfilm-series/img/pf_image_1.png);
	background-repeat: no-repeat;
	height: 900px;
	background-position: 0 0;
	background-size: 100%;
}

.contact_h {
	font-size: 25px;
	text-align: center;
	margin-bottom: 0;
	
}
	
.contact_h p {
	padding-top: 4.5em;
	}

.contact_text {
	font-size: 16px;
	text-align: center;
}
		
.contact_all {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	width: 300px;
	margin-top: 4em;
}


.contact_mail {
	margin-left: 0;
	margin-top: 4em;
}

.contact_mail svg{
	width: 100px;
}


.mail_text {
	font-size: 20px;
	width: 230px;
	padding-left: 0;
	padding-top: 0.5em;
}


.contact_tell {
	margin-left: 0;
}

.contact_tell svg{
	width: 100px;
}

.tell_text {
	font-size: 20px;
	width: 230px;
	padding-left: 0;
	padding-top: 0;
	text-align: center;
}

.contact_tell a:hover path {
	fill:#f39800;
}

.contact_mail a:hover path {
	fill:#f39800;
}

.contact .rental {
	margin-top: 2em;
    background-color: rgba(2,52,110,0.7);  
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	font-weight: bold;
	padding: 1em;
	text-align: left;
}	
	
.lp_page img {
	width: 100%;
}
	
	.lp_page p {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}

/*パンフ*/	
	
.pamphlet a {
	padding: 2em 5em;
}

.pamphlet a:hover {
	padding: 2em 5em;
}
	
}