@charset "utf-8";
/*
Theme Name: heartful-taxi - WEB SITE
Theme URI: 
Description: heartful-taxi
Version: 1.0
Author: heartful-taxi
Author URI: 
Tags: heartful-taxi
*/








/* ------ 一段目  */

.com_box1 {
width: 100%;
margin: 0px;
padding: 160px 0px 100px 0px;
box-sizing: border-box;
overflow: hidden;
display: block;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
}

.com_waku1 {
width: calc(100% - 200px);
display: block;
margin: 0px auto;
padding: 0px;
box-sizing: border-box;
overflow: hidden;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
container-type: inline-size;
}

.com_waku1_img {
width: 50cqw;
aspect-ratio: 350 / 181;    
display: block;
margin:0px;
padding:0px;
box-sizing: border-box;
position: relative;
float: right;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;	
}

@keyframes AAnimeWaku{
   0% { z-index: 1; opacity: 0; transform:scale(1); }
   5% { z-index: 5; opacity: 1; transform:scale(1); }   
  25% { z-index: 5; opacity: 1; transform:scale(1); } 
  26% { z-index: 0; opacity: 1; transform:scale(1); }
  30% { z-index: 0; opacity: 0; transform:scale(1); }  
 100% { z-index: 0; opacity: 0; transform:scale(1); }
}

.com_waku1_img p:nth-of-type(1) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img01.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: AAnimeWaku 20s ease-out infinite;
animation-delay: 0s;
}

@keyframes BAnimeWaku{
   0% { z-index: 1; opacity: 0; transform:scale(1); }
   5% { z-index: 5; opacity: 1; transform:scale(1); }   
  25% { z-index: 5; opacity: 1; transform:scale(1); } 
  26% { z-index: 0; opacity: 1; transform:scale(1); }
  30% { z-index: 0; opacity: 0; transform:scale(1); }  
 100% { z-index: 0; opacity: 0; transform:scale(1); }
}

.com_waku1_img p:nth-of-type(2) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img02.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: BAnimeWaku 20s ease-out infinite;
animation-delay: 5s;
}

@keyframes CAnimeWaku{
   0% { z-index: 1; opacity: 0; transform:scale(1); }
   5% { z-index: 5; opacity: 1; transform:scale(1); }   
  25% { z-index: 5; opacity: 1; transform:scale(1); } 
  26% { z-index: 0; opacity: 1; transform:scale(1); }
  30% { z-index: 0; opacity: 0; transform:scale(1); }  
 100% { z-index: 0; opacity: 0; transform:scale(1); }
}

.com_waku1_img p:nth-of-type(3) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img03.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: CAnimeWaku 20s ease-out infinite;
animation-delay: 10s;
}


@keyframes DAnimeWaku{
   0% { z-index: 1; opacity: 0; transform:scale(1); }
   5% { z-index: 5; opacity: 1; transform:scale(1); }   
  25% { z-index: 5; opacity: 1; transform:scale(1); } 
  26% { z-index: 0; opacity: 1; transform:scale(1); }
  30% { z-index: 0; opacity: 0; transform:scale(1); }  
 100% { z-index: 0; opacity: 0; transform:scale(1); }
}

.com_waku1_img p:nth-of-type(4) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img04.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: DAnimeWaku 20s ease-out infinite;
animation-delay: 15s;
}

.com_waku1_txt {
width: 50cqw;
display: block;
margin:0px;
padding:0px;
box-sizing: border-box;
float: left;
font-size:0px;
line-height:0px;
overflow:hidden;
container-type: inline-size;
}

.com_waku1_txt h2 {
width: 100%;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 40px 0px 0px 40px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 3cqw;
line-height: 1.2;
font-weight: bold;
color: #3c88e4;
letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}

.com_waku1_txt h3 {
width: 100%;
text-align: left;
margin: 0.4em 0px 0px 0px;
padding: 0px 0px 0px 40px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}


.com_waku1_txt h4 {
width: 100%;
text-align: left;
margin: 1.2em 0px 0px 0px;
padding: 0px 0px 0px 40px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 3cqw;
line-height: 1.5;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}



.com_waku1_link {
	width: 100%;
	display: block;
	margin:0px 0px 0px 0px;
	padding:30px 0px 0px 0px;
	box-sizing: border-box;
	position: relative;
	clear: both;
	font-size:0px;
	line-height:0px;
	overflow:hidden;	
}


.com_waku1_link p {
	width: 32%;
	height:70px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	float: left;
	position: relative;
	display: inline-block;
    container-type: inline-size;
}

.com_waku1_link p + p { margin:0px 0px 0px 2%; }
.com_waku1_link p + p + p { margin:0px 0px 0px 2%; }
.com_waku1_link p + p + p + p { margin:10px 0px 0px 0px; }
.com_waku1_link p + p + p + p + p { margin:10px 0px 0px 2%; }

.com_waku1_link p a {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	text-decoration: none;
	text-align: left;
	display: inline-block;
	background: #0102c9;
}

.com_waku1_link p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 70px;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.com_waku1_link p a:hover {
color: #3c88e4;
background: #fff;
}

.com_waku1_link p a u {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 16px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: relative;
z-index: 3;
vertical-align: top;
text-align: left;
}

.com_waku1_link p a em{
display:block;
width: 16px;
height: 16px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 26px;
right: 10px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.com_waku1_link p a:hover em{
background-color: #3c88e4;
}




/* --------------------------------------------- 一段目  */














/*  スマートフォン ※iPhone6 Plus 以下を準拠  */
@media only screen and (max-width:899px) {






/* ------ 一段目  */

.com_box1 {
width: 100%;
margin: 0px;
padding: 66px 0px 0px 0px;
box-sizing: border-box;
overflow: hidden;
display: block;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
container-type: inline-size;
}

.com_waku1 {
width: 88cqw;
display: block;
margin: 0px auto;
padding: 0px;
box-sizing: border-box;
overflow: hidden;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
container-type: inline-size;
}

.com_waku1_img {
width: 100cqw;
aspect-ratio: 350 / 181;    
display: block;
margin:0px;
padding:0px;
box-sizing: border-box;
position: relative;
float: none;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;	
}

.com_waku1_img p:nth-of-type(1) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img01.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: AAnimeWaku 20s ease-out infinite;
animation-delay: 0s;
}


.com_waku1_img p:nth-of-type(2) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img02.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: BAnimeWaku 20s ease-out infinite;
animation-delay: 5s;
}


.com_waku1_img p:nth-of-type(3) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img03.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: CAnimeWaku 20s ease-out infinite;
animation-delay: 10s;
}


.com_waku1_img p:nth-of-type(4) {
position: absolute;
z-index: 0;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url("img/service_img04.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0;
animation: DAnimeWaku 20s ease-out infinite;
animation-delay: 15s;
}

    

.com_waku1_txt {
width: 100cqw;
display: block;
margin:0px;
padding:0px;
box-sizing: border-box;
float: none;
font-size:0px;
line-height:0px;
overflow:hidden;
container-type: inline-size;
}

.com_waku1_txt h2 {
width: 100%;
text-align: left;
margin: 1em 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.2;
font-weight: bold;
color: #3c88e4;
letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}

.com_waku1_txt h3 {
width: 100%;
text-align: left;
margin: 0.5em 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 7cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}


.com_waku1_txt h4 {
width: 100%;
text-align: left;
margin: 0.7em 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.5;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
}




.com_waku1_link {
width: 100%;
display: block;
margin:0px 0px 0px 0px;
padding:20px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;	
container-type: inline-size;
}


.com_waku1_link p {
width: 100cqw;
height: auto;
aspect-ratio: 5 / 1;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
float: left;
position: relative;
display: inline-block;
container-type: inline-size;
}

.com_waku1_link p + p { margin:10px 0px 0px 0px; }
.com_waku1_link p + p + p { margin:10px 0px 0px 0px; }
.com_waku1_link p + p + p + p { margin:10px 0px 0px 0px; }
.com_waku1_link p + p + p + p + p { margin:10px 0px 0px 0px; }

.com_waku1_link p a {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	text-decoration: none;
	text-align: left;
	display: inline-block;
	background: #0102c9;
}


.com_waku1_link p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.2;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.com_waku1_link p a:hover {
color: #fff;
background: #3c88e4;
}

.com_waku1_link p a u {
width: 100%;
margin: -0.5em 0px 0px 0px;
padding: 0px 0px 0px 16px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 50%;
left: 0px;
z-index: 3;
vertical-align: top;
text-align: left;
}

.com_waku1_link p a em{
display:block;
width: 16px;
height: 16px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 25px;
right: 10px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.com_waku1_link p a:hover em{
background-color: #fff;
}



/* --------------------------------------------- 一段目  */






}
/* -----------------------------------------------------------------------------------------------  スマートフォン ※iPhone6 Plus 以下を準拠   */