@charset "utf-8";
*, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

body, html {
  height: 100%;
  margin: 0;
/*  display: flex;*/
  align-items:center;
  justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  scroll-behavior: smooth;
  color: grey;
}

header{
	position: fixed;		
}

body{
    line-height: 1.8;
}

.container{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.container2{
    max-width: 1240px;
    margin: 0px auto;
    padding: 0 20px;
}

a{
    color: #0092c9;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
ul{
    list-style-type: none;
}

main {
    margin: 0 auto;
    padding: 0 20px;
}

.header_inner{
	margin: auto;
    display: flex;
	background-color: #fff;
    justify-content: space-between;
    align-items: center;
	padding: 15px 15PX 10px 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;	
    z-index: 1;
	border-bottom: 3px solid #6e7ef5; 
}

.gnavi-list{
	display: flex;
    text-decoration: none;
	margin: auto;
	justify-content:center;
	align-items: center;
	width: 100%;
    z-index: 1;	
	background-color: #fff;
	padding-bottom: 10px;
	padding-top: 20px;
}	

.gnavi-list li{
	margin-left: 15px;
}

.gnavi-list a {
    position: relative;
	text-decoration: none;
    align-items: center;
    text-align: center;
	margin-left:15px; 
    color: #000;
    line-height: 1.8;
}

.gnavi-list a:hover{
    text-decoration: none;
}

.gnavi-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #6e7ef5;
	width: 100%; 
	height: 2px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.8s ease-out;
} 
.gnavi-list a:hover::after {
	transform: scale(1, 1);
}

.title-logo a{
	display:block;
}

.title-logo a{ overflow:hidden; }
.title-logo a img:hover{
	transform:scale(1.3);
	transition:0.3s;
}

#video{
	width: 100%;
	height: auto;
	position: relative;
	margin-top: 100px;
	z-index: -2;
}

.catchphrase{
 	position: absolute;
 	top:40%;
 	left: 50%;
 	height: 200px;
	width: 100%;
	text-align: center;
 	transform: translate(-50%,-50%);
 	color: #fff;
 	font-size: 2.0rem;
 	padding: 0!important;
	z-index: -1;
}

.catchphrase span{
	font-size: 1.2rem;	
}

.mainimg{
	position: relative;
	z-index: -3;
}

.mainimg .mainimg01 img {
  width: 100%;
  height: 100%;
  z-index: -3;
}

.mainimg .philosophy{
 position: absolute;
  top:50%;
  left: 50%;
  height: auto;
	width: 100%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 1.2rem;
  padding: 0!important;
	z-index: 0;
	text-align: center;
}

.philosophy span{
	font-size: 1.8rem;	
}

h2{
	text-align: center;
	padding-top: 50px;
	color: #440303;
	padding-bottom: 30px;
    }

.News_release{
    text-align: center;
	margin: auto;
}

.News_release .News_release{
    border-spacing: 15px 0px;
}

.News_release tr{
    width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
   border-bottom: 1px solid grey;    
}

.News_release th{
    font-size: 16px;
    border-color: #000;
    border-bottom: 1px solid grey;
    border-left: none;
    border-right: none;
}

.News_release td{
    font-size: 16px;
    border-color: #000;
    border-bottom: 1px solid grey;
    border-left: none;
    border-right: none;
}
.company{
    text-align: center;
}

.company .company{
    border-spacing: 20px 0px;
 }

.company tr{
    margin-bottom: 30px;
	padding: 10px 30px;
    margin: 0 auto;
}

.News_release .News_release .t_top{
    border-top: 1px solid grey;
}

.company th{
    font-size: 16px;
	text-align: left;
	padding: 20px;
	background-color: #f8f2ec;
	white-space: nowrap;
	text-align: center;
    border-bottom: 1px solid grey;
    border-left: none;
    border-right: none;
}

.company td{
    font-size: 16px;
    text-align: left;
    padding-left: 50px;
    margin-left: 20px;
    border-bottom: 1px solid grey;
    border-left-color: undefined;
    border-left-style: none;
    border-right: none;
}

h2 span{
	background: linear-gradient(transparent 65%, #cfd5d7 65%);
}

h3 span{
	background: linear-gradient(transparent 80%, #6e7ef5 80%);
}

.grid-container{	
	padding: 30px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 350px);
	justify-content: center;
	gap: 20px;
}

.grid_item{
	background-color: #ddd;
	height: 350px;
	text-align: center
}

#gi1{
	background-color: #fff;
	border: 1px solid grey;
}

#gi2{
	background-image: url("img/service_01.png");
	background-repeat: no-repeat;
	justify-content: center;
    cursor: pointer;
}

#gi3{
	background-color: #fff;
	border: 1px solid grey;	
}

#gi4{
	background-image: url(img/service_02.png);
	background-repeat: no-repeat;
	justify-content: center;
    cursor: pointer;	
}

#gi5{
	background-color: #fff;
	border: 1px solid grey;
}

#gi6{
	background-image: url(img/service_03.png);
	background-repeat: no-repeat;
	justify-content: center;
    cursor: pointer;
}

.grid-container2{	
	padding: 10px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 580px);
	justify-content: center;
	gap: 10px;
}

.grid-container2 .grid_item{
	background-color: #ddd;
	height: 600px;
	text-align: left;
	padding: 10px;
}

#gi21{
	background-color: #fff;
	border: 1px solid grey;
}

.employee1{
	text-align: center;
	margin: 0 auto;
	justify-content: center;
}

.grid-container3{	
	padding: 10px 10px 40px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 580px);
	justify-content: center;
	gap: 10px;
}

.grid-container3 .grid_item{
	background-color: #fff;
	height: 1000px;
	text-align: left;
	padding: 10px;
}

#gi31{
  	background-color: #fff;
	border: 1px solid grey;
}

Employee{
	margin-top: 100px;	
}

.grid-container4{	
	padding: 10px 10px 10px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	justify-content: center;
	gap: 30px;
}

.grid-container4 .grid_item{
	background-color: #fff;
	height: 850px;
	text-align: left;
	padding: 10px;
}

.employee img{
	width: 200px;
	height: 200px;
}

#gi41{
  	background-color: #fff;
	border: 1px solid grey;
}

#gi42{
  	background-color: #fff;
	border: 1px solid grey;
}

#gi43{
  	background-color: #fff;
	border: 1px solid grey;
}

.grid-container5{	
	padding: 10px 10px 10px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	justify-content: center;
	gap: 30px;
}

.grid-container5 .grid_item{
	background-color: #fff;
	height: 850px;
	text-align: left;
	padding: 10px;
}

#gi51{
  	background-color: #fff;
	border: 1px solid grey;
}

#gi52{
  	background-color: #fff;
	border: 1px solid grey;
}

.grid-container6{	
	padding: 30px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 500px);
	justify-content: center;
	gap: 10px;
}

.grid-container6 .grid_item{
	background-color: #ddd;
	height: 1200px;
	text-align: left;
	padding: 10px;
}

#gi61{
	background-color: #fff;
	border: 1px solid grey;
}

.grid-container6 .grid_item .h3_left{
	padding: 0px 0px 0px 0px;
	font-size: 16px;
	text-align: left;
}

#Skill{
    padding-top: 30px;
}

.grid-container8{	
	padding: 30px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 350px);
	justify-content: center;
	gap: 20px;
}

.grid-container8 .grid_item{
	background-color: #ddd;
	height: 250px;
	text-align: center
}

#gi81{
	background-color: #fff;
	border: 1px solid grey;
}

#gi82{
	background-color: #fff;
	border: 1px solid grey;
}

#gi83{
	background-color: #fff;
	border: 1px solid grey;
}

#gi84{
	background-color: #fff;
	border: 1px solid grey;
}

#gi85{
	background-color: #fff;
	border: 1px solid grey;
}

#gi86{
	background-color: #fff;
	border: 1px solid grey;
}

.employee{
	text-align: center;
    display: block;    
}

.employee1 img{
	width: 80%x;
	height: 80%;
    text-align: center;
	margin: auto;
}

h3{
	text-align: center;
    color: #bb5838;    
} 

.grid_item h3{
	padding: 5px 5px 0px 5px;
	font-size: 16px;
	text-align: center;
} 

.inquiry{
    position: fixed;
    bottom: 345px;
    right: 20px;
    opacity: 1.0;
	z-index: 2;
}

.iframe{
    text-align: center;
    margin: 30px auto 30px;    
}

.inquiry2{
    position: fixed;
    bottom: 200px;
    right: 20px;
    opacity: 1.0;
	z-index: 2;
}

#Recruit{
	padding-top: 120px;
}

#Contact{
	margin-top: 120px;
}

.access{
	text-align: center;
}

footer{
	margin-top: 40px;
    padding: 20px 0;
    background-color: #fff;
	border-top: 1px solid #000;
}

footer .gnavi-list2{
	display: flex;
	justify-content: center;
	margin: auto;
    margin-bottom: 20px;
    padding: 0 20px;
    color: #000;
}

footer .gnavi-list2 a{
    color: #000;
	margin-left: 30px;	
	text-decoration: none;
}

.gnavi-list2 a:hover{
    text-decoration: underline;
	border-bottom-color: #000;	
}

.tel{
    font-size: 13px;
    color: #000;
    text-align: center;
    padding-top: 20px;
}

.copyright{
    font-size: 13px;
    color: #000;
    text-align: center;
    padding-top: 20px;
}

.hamburger{
	display: none;
}

 .flow-chart {
    max-width: 800px;
    margin: -20px auto 0;
    padding: 50px 20px;
	 
}     

.flow-chart ol {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  align-items: center;
  list-style: none;
}

.flow-chart li {
  flex: 1;
  padding: 20px 0;
  background-color: #698dc9;
  color: #fff;
  font-weight: bold;
  text-align: center;
	
}

.flow-chart li:not(:last-child) {
  padding-right: 10px;
  clip-path: polygon(0px 0px, calc(100% - 20px) 0px, 100% 50%, calc(100% - 20px) 100%, 0px 100%);
	z-index: -1;
}

.flow-chart li:nth-child(even){
    background-color: #a1c3e6;
}

.formtable{
		margin: 20px 50px;
        border-collapse: collapse;
        background-color: #cbccd1;  /*#6e7ef5*/
        width: 90%;
		height: auto;
        color: #000;
    }

.formtable th, .formtable td{
        padding: 20px;
        border: 1px solid #fff;
        text-align: center;
}

.formtable th{
        background-color: #698dc9; 
		color: #fff;
}

.formtable th span{
        color: red;        
}
	
.formtable input[type="text"], .formtable textarea{
        background-color: #fff;
        width: 95%;
        padding: 5px 0;
		border: none;
}

textarea:focus{
        background-color: aqua;
}
    
#submit ,#reset{
        width: 100px;
        background-color: #698dc9;
		color: #fff;
        padding: 20px 0;
		margin-left: 50px;	
        border: none;
}


@media (max-width:1000px){
.gnavi-list{
	display: none;
}
	
nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #698dc9;
    padding-top: 180px;
/*    display: none; */
/*   ↓右から移動させる　アニメーション追加 */
    transition: 0.5s;
	text-align: center;
	  z-index: 1
	
    }	

   .gnavi-list-open nav{
        left: 0px;
    }  
	

	.gnavi-list{
        display: block;
        height: 100%;
/*        padding-bottom: 50px;*/
        overflow: auto;
		background-color: #698dc9;
		 padding: 30px 0;
    }
    
	.title-logo img{
		width: 35%;
		height: auto;
	}
	
	    header h1{
        z-index: 2
    }
	

  	
.nav-button{
    width: 50px;
    height: 50px;
    border: 2px solid #698dc9;
    margin-left: auto;
    position: relative;
	background-color: #698dc9;
	 z-index: 2;
}


.nav-button span{
    width: 30px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 8px;
}		
	
.nav-button span:nth-child(1){
    top: 12px;
}

.nav-button span:nth-child(2){
    top: 24px;
}

.nav-button span:nth-child(3){
    top: 36px;
}

  .gnavi-list-open .nav-button span:nth-child(1) {
    top: 24px;
    transform: rotate(315deg);
}

    .gnavi-list-open .nav-button span:nth-child(2){
        
    /*   短くして動かし削除　アニメーション追加 */
        width: 0;
        left: 50%;
    }
    
    .gnavi-list-open .nav-button span:nth-child(3){
    /*   上げて、逆回転させる　アニメーション追加 */ 
     top: 24px;
     transform: rotate(-315deg);
     }   
	
	
    
 .gnavi-list a {
    font-size: 30px;
    padding: 40px 10px;
    text-align: center;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0, 0, 0, 0)
}
    
  .gnavi-list-open .gnavi-list li{
        padding: 25px 10px;
    }


@media (max-width:600px){

	
.title-logo img{
		width: 30%;
		height: auto;		
	}


		
#video{
	width: 100%;
	height: auto;
	position: relative;
	margin-top: 100px;
	z-index: -1;
}	
	
.mainimg{
    margin-top: 20px;   
}
	
.catchphrase{
 	top:30%;
 	font-size: 1.8rem;
}
	
.mainimg .philosophy{
  font-size: 1.0rem;
}

.philosophy span{
	font-size: 1.6rem;	
}
	

	
h2{
	padding-top: 30px;
	padding-bottom: 20px;
}

.inquiry img, .inquiry2 img{
	width: 60%;
	height: 60%;
}

.inquiry{
    right: 10px;
	z-index: 2;
}
	
.inquiry2{   
    right: 10px;
	z-index: 2;
}	
	
.iframe{
    width: 50%;
	height: 50%;
	text-align: center;
    margin: 0 0 0 10px;
}	
	
footer{
    background-color: #f4e6c0;		
}
	
.grid-container2{	
	padding: 10px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 480px);
	justify-content: center;
	gap: 10px;
}	
	
.grid-container3{	
	padding: 10px 10px 40px 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, 480px);
	justify-content: center;
	gap: 10px;
}	

.grid-container3 .grid_item{
	background-color: #fff;
	height: 1200px;
	text-align: left;
	padding: 10px;
}
	
section{
    margin-bottom: 30px;       
}
    
section h2{
    margin-bottom: 10px; 
}
    
.mv-image img{
    height: 75vh;
    object-fit: cover;            
}
 
	
}