@font-face {
font-family: 'KosugiMaru';
src: url('./../fonts/KosugiMaru-Regular.ttf') format('truetype');
}

*{
font-family:"KosugiMaru";
color:#2C4A52;
}
html, body, h1, h2, h3, h4, h5, h6{
font-size:16px;
}
a{
outline:none;
}

#header{
position:absolute;
top:0;
left:0;
z-index:10;
width:100%;
}
.header_in{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.header_in > h2{
box-sizing:border-box;
width:400px;
padding:16px;
}
.header_in > h2 img{
width:100%;
}
.header_in > a{
display:flex;
align-items:center;
justify-content:center;
width:60px;
padding:0 16px;
}
.header_in > a img{
width:100%;
}

.modal_image{
position:relative;
}
.modal_image > i{
position:absolute;
right:1em;
bottom:1em;
font-size:18px;
}
.modal_image:hover > i{
opacity:0.8;
}
/*
.products_detail_toggle {
width:95%;
}

.products_detail_toggle > dl{
width:100%;
padding: 0 5px;
}

.products_detail_toggle > dl > dt{
display:flex;
align-items:center;
justify-content:space-between;
min-height:3rem;
padding:0 1rem;
border:1px solid #479037;
cursor:pointer;
}
.products_detail_toggle > dl > dt > i{
font-size:20px;
color:#479037;
}
.products_detail_toggle > dl > dd{
display:none;
padding:16px 1rem 24px;
background-color:#f4f4f4;
}
.products_detail_toggle > dl.active > dd{
display:block;
}
.products_detail_toggle > dl > dd > *{
margin-top:24px;
}
.products_detail_toggle > dl > dd > *:first-child{
margin-top:0;
}
.products_detail_toggle > dl > dd > p{
line-height:1.25;
}
*/


@media screen and (min-width: 1025px){
  .header_in > a{
    transition:0.2s linear;
  }
  .header_in > a:hover{
    opacity:0.5;
  }
}

@media screen and (max-width: 767px){
  .header_in > h2{
    display:flex;
    align-items:center;
    justify-content:center;
    width:260px;
    height:60px;
    padding:0 16px;
  }
  .header_in > a{
    width:36px;
  }
}

.kamban_gradation{
background: rgb(170,221,238);
background: -moz-linear-gradient(top,  rgba(170,221,238,1) 0%, rgba(0,187,238,1) 50%, rgba(0,187,238,1) 100%);
background: -webkit-linear-gradient(top,  rgba(170,221,238,1) 0%,rgba(0,187,238,1) 50%,rgba(0,187,238,1) 100%);
background: linear-gradient(to bottom,  rgba(170,221,238,1) 0%,rgba(0,187,238,1) 50%,rgba(0,187,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaddee', endColorstr='#00bbee',GradientType=0 );
}
.kamban_bg{
overflow:hidden;
position:relative;
background-image:url(./../images/kamban_city.png);
background-size:cover;
background-position:center bottom;
}
.kamban_main{
width:100%;
height:57vw;
}

.kamban_main > img {
width:100%;
margin: 5rem 0 1.5rem; 
}

.kamban_main{
box-sizing:border-box;
padding-top:0px;
}
.kamban_main_in{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
/*
	height:90%;

*/
}
.kamban_main_in > *{
margin-top:0px;
}
.kamban_main_in > img {
width: 85%;
padding-top: 20rem;
margin-bottom: 5rem;
}
/*
.kamban_main_in > img:first-child {
width: 85%;
margin-top: 15%;
margin-bottom: auto;
vertical-align: middle;
}
*/
/*
.kamban_main_in > img:last-child {
display: flex;
margin: 0 1.5rem 1.5rem auto;
width: 20%;
}
*/
.kamban_main_in > *:first-child{
margin-top:0px;
}
.kamban_main_in > h1{
color: #002063;
text-shadow:0px 0px 10px #ffffff;
font-weight:bold;
font-size:3vw;
margin: 0;
}
.title_main{
margin: 0;
}
.title_main > h1{
color: #002063;
text-shadow:0px 0px 10px #ffffff;
font-weight:bold;
font-size:3vw;
margin: 0;
}
.kamban_main_contents{
box-sizing:border-box;
max-width:1024px;
width:90vw;
padding:24px;
background-color:rgba(255,255,255,0.75);
border-radius:24px;
line-height:1.4;
}
.kamban_main_contents > p{
font-size:20px;
}

.news{
background-color: #FEFCBD;
padding: 1.5rem;
line-height: 1.25rem;
box-shadow: 5px 5px 2px #666666;
}
.news_title{
	font-weight: bold;
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #002063;
}

@media screen and (max-width: 767px){
  .kamban_main{
    height:auto;
    padding-bottom:40px;
  }
  .kamban_main_in > *{
 /*   margin-top:24px; */
  }

.kamban_main_in > img {
width: 85%;
padding-top: 5rem;
margin-bottom: 4rem;
}
  .kamban_main_in > h1{
    font-size:6vw;
    line-height:1.4;
  }
  .title_main > h1{
    font-size:6vw;
    line-height:1.2;
  }
  .kamban_main_contents > p{
    font-size:16px;
  }
.kamban_main > img {
width:100%;
}
/*
.kamban_main_in > img:first-child {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
*/
	/*
.kamban_main_in > img:last-child {
display: flex;
margin: 0 1.5rem 1.5rem auto;
width: 20%;
}
	*/
}

.common_contents{
box-sizing:border-box;
width:100%;
background-attachment:fixed;
background-size:cover;
background-position:top center;
}
.common_contents.drivingsim{
background-image:url(./../images/kamban_city1.jpg);
}
.common_contents.kensetsu{
background-image:url(./../images/kamban_city2.jpg);
}
.common_contents.infra{
background-image:url(./../images/kamban_city1.jpg);
}
.common_contents_in{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
max-width:960px;
margin:0 auto;
padding:80px 40px;
border-radius:20px;
}
.common_contents_in > *{
margin-top:40px;
}
.common_contents_in > *:first-child{
margin-top:0;
}
.common_contents_in > h2{
font-size:24px;
font-weight:bold;
text-align:center;
}
.common_contents_in > h3{
line-height:1.5;
}
.common_contents_wrap{
display:flex;
width:100%;
align-items: flex-start;
	margin-top: 0;
}
.common_contents_wrap img{
width:100%;
}
.common_contents_wrap > *{
flex:1 0 0%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
background-color: #ffffff;
margin-left:40px;
padding:32px 0 40px;
	/*
border-radius:24px;
*/
	box-shadow:0 0 24px rgba(0,0,0,0.2);
}
.common_contents_wrap > *:first-child{
margin-left:0;
}
.common_contents_wrap > * > *{
display:flex;
flex-direction:column;
max-width:100%;
margin-top:24px;
padding: 0 1rem;
}
.common_contents_wrap > * > *:first-child{
margin-top:0;
}
.common_contents_wrap > * > a{
display:flex;
flex-direction:row;
justify-content:center;
width:100%;
padding:16px 0;
background-color:#479037;
}
@media screen and (min-width: 1025px){
	
  .common_contents_wrap > * > a:hover{
    background-color:#75AC69;
  }
}
.common_contents_wrap > * > a > *{
margin-left:0.5em;
color:#ffffff;
}
.common_contents_wrap > * > a > *:first-child{
margin-left:0;
}
.common_contents_wrap > * > a > i{
font-size:20px;
}
.common_contents_wrap > * > div > *{
margin-top:24px;
}
.common_contents_wrap > * > div > *:first-child{
margin-top:0;
}
.common_contents_wrap > * > div > h4{
padding-left:16px;
padding-right:16px;
line-height:1.4;
font-weight:bold;
font-size:20px;
}
.common_contents_wrap > * > div > p{
line-height:1.5;
}

@media screen and (max-width: 1024px){

.kamban_main_in > img {
width: 85%;
padding-top: 10rem;
margin-bottom: 5rem;
}
/*
.kamban_main_in > img:last-child {
display: flex;
margin: 0 1.5rem 1.5rem auto;
width: 25%;
}
*/
  .common_contents_in{
    padding:20px 24px;
  }

  .common_contents_wrap > *{
    margin-left:24px;
  }
}

@media screen and (max-width: 767px){

  .common_contents{
    background-size:contain;
  }

  .common_contents_wrap{
    flex-direction:column;
  }

  .common_contents_wrap > *{
    margin-top:40px;
    margin-left:0;
  }
  .common_contents_wrap > *:first-child{
    margin-top:0;
  }
}
@media screen and (max-width: 375px){
/*
.kamban_main_in > img:last-child {
display: flex;
margin: 0 1.5rem 1.5rem auto;
width: 80px;
}
*/
}
.set_padding{
box-sizing:border-box;
max-width:100%;
padding-right:16px;
padding-left:16px;
}
.break_for_smartphone{
display:none;
}
@media screen and (max-width: 767px){
  .break_for_smartphone{
    display:inline;
  }
}

#go_top{
position:fixed;
z-index:100;
bottom:calc(3em + 20px);
right:20px;
max-width:15%;
width:60px;
background:#002063;
}

#go_top img{
width:100%;
}

@media screen and (min-width: 1025px){
  #go_top > a{
    transition:0.2s linear;
  }
  #go_top > a:hover{
    opacity:0.75;
    cursor:pointer;
  }
}

#footer *{
font: 12px/1 sans-serif;
color:#000000;
}
#footer a{
color:#0066CC;
}
#footer .footer_in{
background-color:#002063;
}
#footer .footer_in address{
position:relative;
width:100%;
margin:0 auto;
padding:1em 0;
text-align:center;
color:#ffffff;
}

.common_textlinks_in{
padding:1rem 0;
border-top:3px solid #002063;
}

.common_textlinks_in > ul{
display:flex;
flex-wrap:wrap;
}

.common_textlinks_in > ul{
justify-content:center;
}
.common_textlinks_in > ul > li{
margin-left:0.75em;
padding-left:0.75em;
border-left:1px solid #666666;
}
.common_textlinks_in > ul > li:first-child{
margin-left:0;
padding-left:0;
border-left:0;
}

@media screen and (max-width: 767px){
  #common_textlinks{
    padding:0;
  }
  .common_textlinks_in{
    padding:16px 0.5rem;
  }
  .common_textlinks_in > ul{
    margin-top:-0.5rem;
  }
  .common_textlinks_in > ul > li{
    border-left:0;
    margin-left:0;
    margin-top:0.5rem;
  }
}

.icon_scroll{
  position:fixed;
  bottom:16px;
  left:calc(50% - 36px);
  padding-top: 80px;
  text-shadow:1px 1px 1px #000000;
  font-size:24px;
  color:#ffffff;
}
.icon_scroll span{
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
  box-shadow: -1px 1px 1px #000000;
}
.icon_scroll span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.icon_scroll span:nth-of-type(2) {
  top: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.icon_scroll span:nth-of-type(3) {
  top: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.modaal-overlay{
background-color:rgba(0, 175, 215,1)!important;
}
.modaal-container{
background:inherit;
box-shadow:inherit;
}
.modal_menu_in > ul > li{
display:flex;
justify-content:center;
align-items:center;
}
.modal_menu_in > ul > li > a{
padding:20px;
font-size:40px;
color:#ffffff;
}

@media screen and (min-width: 1025px){
  .modal_menu_in > ul > li > a:hover{
    background-color:rgba(255,255,255,0.2);
    border-radius:40px;
  }
}

@media screen and (max-width: 767px){
  .modal_menu_in > ul > li > a{
    padding:2.5vw 0;
    font-size:5vw;
  }
}