@charset "UTF-8";
/*
 * sp/top.css スマホ版トップページ
 */

/* タイトル部分　*/

.bg01 {
	background-image: url("../../img/top/top_img01.png");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	height: 65vh;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); 
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%); 
	margin: -100px auto 0px;
}

.top_text{
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
	padding: 20px;
    position: absolute;
    top: 35%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
	white-space: nowrap;
}
.top_text:before, .top_text:after {
    content: '';
    padding: 40px;
    position: absolute;
    left: 50%;
    width: 100%;
    top: 50%;
    display: block;
    border: 1px solid #fff;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    animation: 10s infinite alternate ease-in-out tipsy;
}
.top_text:before {
    border-color: #FFF #FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    z-index: -1;
}
.top_text:after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF #FFF;
	box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

@keyframes tipsy {
0 {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
}


.text-small{
	font-size: 1.0rem;
}


.under {
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 0.1em;
	background: linear-gradient(transparent 70%, #E1F5FE 70%);
}

/* 光が無くとも効果を発揮する画期的なコーティング剤 */

.bg02 {
	background-image: url("../../img/top/top_img02.jpg");
	height: auto;
	background-position: center right;
    -webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%); 
    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
	margin: 0 auto;
	padding: 64px 0px;
	background-repeat: no-repeat;
}

.sub_title02 {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  font-weight: 600;
  position: relative;
  display: inline-block;
  margin: 0px auto 40px;
  color: #fff;
}

/*以下で線を表示*/
.sub_title02:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;/*線の上下位置*/
  display: inline-block;
  width: 100%;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #fff;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/* 光触媒効果 */

.bg03 {
    background: linear-gradient(126deg, rgba(0,23,42,1) 0%, rgba(6,42,79,1) 70%, rgba(8,51,97,1) 90%);
	background-position: center right;
    -webkit-clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
    clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
	margin: 0 auto;
	padding: 0px 16px 16px;
	background-repeat: no-repeat;
}

.text-size01{
	font-size: 1.5em;
	letter-spacing: 0.1em;
	padding: 8px 0px 0px 16px;
}

.text-size02{
	font-size: 1rem;
	padding: 0px 0px 0px 16px;
}

.btn-01 {
	color: #fff;
	border: none;
	padding: 4px 24px;
	letter-spacing: 0.2em;
	display: block;
	margin: 0px 0px 0px auto;
}

/* 施工サービス */

.bg04{
    background: linear-gradient(180deg, rgba(0,23,42,1) 0%, rgba(6,42,79,1) 70%, rgba(8,51,97,1) 90%);
	-webkit-clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0 95%);
	clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0 95%);
	padding: 64px 0px;
}

.img_wrap{
  width: 100%;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
  object-fit: cover;
  object-position: center bottom;	
}
.img_wrap a:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

.simple_square_btn5 {
	display: block;
	font-size: 1.0em;
	letter-spacing: 0.1em;
	padding: 0.4em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #000;
}
.simple_square_btn5:hover {
	 opacity:0.8;
	 cursor: pointer;
	 text-decoration: none;
	color: #fff;
}