/*全体の余白を削除*/
*{	
margin:0;
padding:0;
}
/**/

/*html 両サイド余白の設定*/
html{
margin:0 auto;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
font-feature-settings: "pkna" 1;/* 固定hedderの高さ分 */
}
@media only screen and (max-width: 1024px)  {
	main{width:auto;
	padding:0 3%;}
}
@media only screen and (max-width: 768px) {
	main{width:auto;
	padding:0 1.5%;}
}
@media only screen and (max-width:480px) {
	main{width:auto;
	padding:0 1.2%;}
}
@media only screen and (max-width:350px) {
	main{width:auto;
	padding:0 1%}
}

/* PC表示オンリー */
@media only screen and (min-width:900px) {
	.pc {
		display:block;
	}
	.sp {
		display:none;
	}
}
/* スマホ表示オンリー */
@media only screen and (max-width:900px) {
	.pc {
		display:none;
	}
	.sp {
		display:block;
	}
	
}

/**/
	
main{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

/* 見出しのデザイン */
.index{
    border-bottom: 1px solid #19A6C0;
	border-left: 10px solid #19A6C0;
	padding: 7px;
	font-size:16px;
	font-size:1.6em;
}
/*　IDリンクスクロール位置　*/

span.anchorlink {
   position: relative;
   top: -56px;
   display: block;
}

/* 改行位置 */
span {
   display: inline-block;
}

/* 社長経歴のtable余白設定 */
.table1 {
	margin:30px;
	}
/**/

/* 事業理念のimage size設定 */
@media only screen and (min-width:750px) {
	.philosophy {
		margin:0 auto;
		width: 100%;
	}
	.philosophy_sp{
		display:none;
	}
}
@media only screen and (max-width:750px) {
	.philosophy{
		display:none;
	}
	.philosophy_sp{
		margin:0 auto;
		width: 100%;
	}
}
/**/


img {
   max-width: 100%;  /* 横幅に合わせて自動縮小するが、拡大はしない */
}

body{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
  background: #fbfcfd;
  url(images/bg-cherrybrossam.jpg);
  background-size: cover;

}

wrap{ 
  width: 960px;	   /*全体の幅を指定する*/  
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
  text-align:left;   /*全体を左揃えにする。*/
}

table.type1{
  width: 100%;
  border-collapse: collapse;
  border-radius: 15px;/*角の丸み*/
	padding:0 2rem;
}

table.type1 tr{
  border-bottom: solid 10px white;
  border-radius: 15px;
}

table.type1 tr:last-child{
  border-bottom: none;
  border-radius: 15px;
}

table.type1 th{
  font-size: 16px;
  position: relative;
  text-align: left;
  width: 20%;
  background: radial-gradient(#ebf6fa, #D7ECF4);
  color: black;
  text-align: center;
  padding: 10px 0;
  border-radius: 15px;

}

table.type1 th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #19A6C0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 15px;
}

table.type1 td{

  text-align: left;
  width: 70%;
  text-align: left;
  background: radial-gradient(#ebf6fa, #D7ECF4);
  padding: 10px 50px;
  border-radius: 15px;
}

.box0 {

    padding: 0.5em 0.5em;
    margin: 1em 0;
    width: 200px;	
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 3px #3f87ce;
    border-radius: 3px;
}
.box0 p {
    margin: 0; 
    padding: 0;
}


.box1 {
    margin: 2em 0;
    background: #dcefff;
}
.box1 .box-title {
    font-size:2.5em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box1 p {
    padding: 15px 20px;
    margin: 0;
}

.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #4169e1;/*文字色*/
    background: #ffe4e1;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}
/**/

/*経歴table*/
.career{
	margin:0 auto;
	list-style: none;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.career_text{
	text-align:left;
	height:auto;
	padding:0 2rem;
	margin:0 auto 0 0;
}
@media only screen and (min-width: 925px)  {
	.career_img{
		padding:0 0.5rem;
		margin:0 auto;
		width:130px;
		height:auto;
	}
}
@media only screen and (max-width: 925px)  {
	.career_img{
		padding:0 0.5rem;
		margin:0 auto;

		width:196px !important;
	}
}
.kaneko{
	list-style:none;
}
.pp1{
	/*color: #4e4e4e;*/
}
.pp2{
	font-size: 14px;
	color: #4e4e4e;
}
.pp2 a{
	text-decoration: none;
	color: #19a6c0;
}

@media only screen and (max-width: 1024px)  {
.career{
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: row;
	flex-direction: row;
	margin:0;
}
}
@media only screen and (max-width: 930px) {
.career{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin:0 auto;
}
.career_text{
	margin:0 auto 0 0;
}
}
@media only screen and (max-width:480px) {
.career{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin:0 auto;
}
.career_text{
	margin:0 auto 0 0;
}
}
@media only screen and (max-width:350px) {
.career{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width:200px;
	margin:0 auto;
}
.career_text{
	margin:0 auto 0 0;
}
}
/**/

/*ここから商品・サービス*/
.products{
	margin:0 auto;
	list-style: none;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.product{
	-webkit-box-flex: 0 0 auto;
	-ms-flex: 0 0 auto;	
	flex: 0 0 44.8%;	
	text-align: center;				
	box-sizing: border-box;
	max-width:100%;
	padding-bottom: 0.5rem;
	margin:2px;
}
.product h3{         
	padding: 10px;
	margin: 0;
}
.productimg{
	margin: 0 auto;
	padding: 1rem;
	position: relative;
}
.product_text{
	margin: 0;
	padding:0 1.5rem;
	text-align: center;
}
.product p{
	margin: 0;
	padding:1rem 2rem;
	text-align: left;
}
.product.watchover{
	border: 5px solid #a2bc10;
} 
.product.watchover h3{
	background: #a2bc10;
	color: #fff;		
} 
.watchover_title{
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    /* margin: 1.5em 0; */
    width: 90%;
    background: #ecf2cf;
    border-radius: 15px;
}
.product.tell{
	border: 5px solid #fb5859;		
} 
.product.tell h3{
	background: #fb5859;
	color: #fff;		
} 
.tell_title{
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    /* margin: 1.5em 0; */
    width: 90%;
    background: #fedede;
    border-radius: 15px;
}
.product.gps{
	border: 5px solid #06c7ea;		
} 
.product.gps h3{
	background: #06c7ea;
	color: #fff;		
} 
.gps_title{
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    /* margin: 1.5em 0; */
    width: 90%;
    background: #cdf4fb;
    border-radius: 15px;
}
.product.presence{
	border: 5px solid #FC0;		
} 
.product.presence h3{
	background: #FC0;
	color: #fff;		
} 
.presence_title{
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    /* margin: 1.5em 0; */
    width: 90%;
    background: #fff5cc;
    border-radius: 15px;
}
 
.product.tollfee{
	border: 5px solid #FC0;		
} 
.product.tollfee h3{
	background: #FC0;
	color: #fff;		
}

@media only screen and (max-width: 1024px)  {
.products{
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: row;
	flex-direction: row;
}
.product{
	margin:2px;
}
}
@media only screen and (max-width: 850px) {
.products{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.product{
	-webkit-box-flex: 0 0 auto;
	-ms-flex: 0 0 auto;	
	width:350px;
	margin:2px auto;
}
}
@media only screen and (max-width:480px) {
.products{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
}
}

@media only screen and (max-width:350px) {
.products{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
}
}
/**/
/*商品・サービス　アニメーション*/
.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}
/**/


/*access*/
.access{
	margin:0 auto;
	list-style: none;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;
	align-items: center;
}
.access{
	margin:0 auto;
	flex: 0;		
	text-align: center;				
	box-sizing: border-box;
	padding-bottom: 0.5rem;
}
.gmap{
	margin:0 10px;
	margin:0 1rem;
	width:65%;
	height:auto;
}
.info{
	text-align: left;
	margin:0 0 0 20px;
	margin:0 0 0 2rem;
	width:30%;
	height:auto;
}
@media only screen and (max-width: 1024px)  {
.access{
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: row;
	flex-direction: row;
}
}
@media only screen and (max-width: 870px) {
.access{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.gmap{
	width: 93%;
	height:auto;
	margin:0 auto 0 auto;
}
.info{
	margin:0 auto;
	width:93%;
}
}
@media only screen and (max-width:480px) {
.access{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
}
}
@media only screen and (max-width:350px) {
.access{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
}
}
/**/

/* 基本ぼたん */
/*.toi{
  display: inline-block; 
  color: #blue;
  background: orangered;
  padding: 15px 30px;
  text-decoration: none;
  transition: .3s; //全てのボタンにtransition設定
  border-radius: 5px;
}*/
.toi{
  display: inline-block;
  background-color: #ff741f;
  color: white;
  width: 190px;
  padding: 0.6em;
  text-decoration: none;
  border-radius: 30px;
  border: solid 2px white;
  box-shadow: 0 2px 4px 2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent;
  transition: .2s ease-out;
}
.toi:hover{
	 cursor: pointer;
	 text-decoration: none;
	 transform: translateY(-4px);
    box-shadow: 0 4px 8px 2px rgba(0,0,0,0.12), 0 3px 10px 0 rgba(0,0,0,0.12), 0 4px 7px -2px rgba(0,0,0,0.2);
}
.toi img{
	height: 15px;
    margin-right: 3px;
}

/* TOPへ戻るボタン */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}