@charset "utf-8";

/* ----------------------------------
    reset
----------------------------------- */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
  *::before,
  *::after { 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
  }  
  body,h1,h2,h3,h4,h5{
    margin: 0px;
    padding: 0px;
    font-weight: normal;
  }
  ol, ul {
    list-style: none;
  }
  img {
    max-width: 100%;
    height: auto; 
  }
  table {
    border-collapse: collapse;
  }
  a{
    cursor: pointer;
  }

  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=esubmit],
  button,
  select,
  textarea {
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
  }
/* ----------------------------------
    reset
----------------------------------- */

body{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
color:#222222;
}


/* ----------------------------------
    ヘッダー
----------------------------------- */

#header{
	background-color:#FFFFFF;
	width:100%;
	border-bottom:1px solid #eeeeee;
}
.logo_box{
	width:400px;
}
.logo_box img{
	margin-left:50px;
	margin-top:25px;
	margin-bottom:25px;	
}
.low-header-title {
  border-bottom: 1px solid #eee;
  display:inline-block;
  width : 100%;
  height: 110px;
  margin-top:45px;	
	font-size:32px;
	font-weight:bold;
  text-align: center;
  position: relative;
  line-height: 1.5;
}
.low-header-title span {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  font-size: clamp(5rem, 8vw, 10rem);
  top: 40%;
  color: #EAEAEA;
  line-height: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  white-space : nowrap;
  letter-spacing: 0.1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img.textFFF {
  width:70%;
  margin-top:-20px;
}

/* ----------------------------------
    メイン
----------------------------------- */
main {
  width: 85%;
  margin: 30px auto;
  padding: 10px;
}
.shisaku_two_column {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items:top;
  margin-top: 50px;
  margin-bottom: 100px;
}
.left {
  width: 40%;
}
.right {
  width: 60%;
  text-align: center;
}
.topimg {
  width:70%;
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.harf_img {
  width:90%;
}


.shisaku_siyou {
  line-height:1.5rem;
}

.shisaku_siyou tr {
  border-bottom: 7px solid #FFFFFF;
}
.shisaku_onecolumn .shisaku_siyou {
  margin-left: auto;
  margin-right: auto;
}
.shisaku_onecolumn .shisaku_siyou th {
  width:40%;
  color: #333333;
  font-weight: bold;
  border-left: solid 5px #dddddd;
  padding-left: 8px;
}
.shisaku_onecolumn .shisaku_siyou tr {
  border-bottom: 7px solid #FFFFFF; 
  line-height: 1.5rem;
}
.use-cases {
  border: 1.5px solid #ff006f;
  padding: 3px 5px;
  font-size: 10.5px;
  color: #ff006f;
  margin-left:5px;
  font-weight: bold;
}

.shisaku_onecolumn {
  width:100%;
  margin-bottom: 30px;
 }
.kyoutyou {
 margin-left: 15%;
 line-height: 1.5rem;
 font-size: 1rem;
 font-weight: bold;
 font-style: italic;
 color: #000;
}
.kyoutyou p {
  background-color:#f1efef ;
  margin-bottom: 5px;
  border-radius: 10px;
  width:90%;
}

.hyoudai {
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: left;
  padding-top:15px;
  padding-bottom: 30px;
  text-align: center;
}


.midasi{
	width:100%;
	display:flex;
	margin-bottom:20px;
}
.midasi h2 {
	font-size:20px;
	font-weight:bold;
}

.setumei {
  padding: 0 20px;
  font-size: 1rem;
  text-align: justify;
  margin-top: 10px;
}

span.sitatuki {
 vertical-align: sub;
 font-size: 0.8em;
}

.shisaku-slider {
  display: flex;
  list-style-type: none;
  gap: 5px;
  animation: slide-flow 45s infinite ease-out 1s both;
  margin-top: 50px;
  margin-bottom: 100px;
}

.shisaku-slider li {
  width: 25%;
  flex: none;
}

.shisaku-slider li .img {
  width: 500px;
  object-fit:cover;
  height: 300px;
}
.shisaku-slider li p {
  line-height: 1.4;
  font-weight: bold;
  margin-top: .5em;
  color: grey;
  font-size: 1rem;
}


@keyframes slide-flow {
   0% {transform: translateX(0);}
 100% {transform: translateX(-130%);}
}
 .shisaku-slider:hover {
   animation-play-state: paused;
 }
 .shisaku-slider:hover .img {
   opacity: .8;
   cursor: grabbing;
 }

 .otoiawase{
	text-align:center;
}
.otoiawase p:hover {
	opacity: 0.55;
 }	
.otoiawase p{
	width:230px;
	font-size:17px;
	font-weight:bold;
	margin-top:50px;
	padding-bottom:5px;
	border-bottom:2px solid #dc2314;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
}

  @media (max-width:600px){
  .low-header-title {
  border-bottom: 1px solid #eee;
  display:inline-block;
  width : 100%;
  height: 90px;;
  margin-top:20px;	
	font-size:20px;
	font-weight:bolder;
  text-align: center;
  position: relative;
  line-height: 1.5;
  padding-bottom: 20px;
}
.low-header-title span {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  font-size:47px;
  top: 30%;
  color: #EAEAEA;
  line-height: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img.textFFF {
  width:450px;
  margin-top:0 px;
  margin-top: -5px;
}
.shisaku_two_column {
  width: 100%;
  flex-direction:column;
  margin-top: 30px;
  margin-bottom: 30px;
}
.left {
  width: 100%;
}
.right {
  width: 100%;
}
.topimg {
  width:100%;
  height:200px;
  margin-bottom: 10px;
  margin-top: 30px;
}
.harf_img {
  width:100%;
  margin-top: 10px;

}
.hyoudai {
  color: #000;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;
  margin-top:-20px;
}
.left table th {
  width:50%;
  color: #333333;
  font-weight: bold;
  border-left: solid 5px #dddddd;
  padding-left: 8px;
}
.left table td {
  width:50%;
}
.shisaku_onecolumn {
  width:100%;
  margin-bottom: 10px;
 }
.kyoutyou {
 margin-left: 5%;
 line-height: 1.5rem;
 font-size: 1rem;
 font-weight: bold;
}

.shisaku-slider li p {
  line-height: 1.4;
  font-weight: bold;
  margin-top: .5em;
  color: grey;
  font-size: 0.9rem;
}
.shisaku-slider {
  display: flex;
  list-style-type: none;
  gap: 5px;
  animation: slide-flow 20s infinite ease ease-out 1s both;
  margin-bottom: 50px;
}

.shisaku-slider li {
  width: 57%;
  flex: none;
}

.shisaku-slider li .img {
  width: 300px;
  object-fit:cover;
  height: 250px;
}
@keyframes slide-flow {
   0% {transform: translateX(0);}
 100% {transform: translateX(-430%);}
}
 .shisaku-slider:hover {
   animation-play-state: paused;
 }
 .shisaku-slider:hover .img {
   opacity: .8;
   cursor: grabbing;
 }

}