@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

#education h1 {
  background: url(../../images/faculty/visual2.jpg) center center/cover no-repeat;
}

#education h1 > div {
color:#fff;
text-indent:0;
font-size:24px;
text-align:center;
margin-top:-20px;
/*  background-image: url(../../images/advantage/education/header.svg);
*/
}

header {
  background: #fff;
}


@media print, screen and (min-width: 769px) {
#education h1 > div{
font-size:40px;
}
}


#company h1 {
  background: url(../../images/company/visual.jpg) center center/cover no-repeat;
}




#company h1 > div {
color:#fff;
text-indent:0;
font-size:24px;
text-align:center;
margin-top:-20px;
}


@media print, screen and (min-width: 769px) {
#company h1 > div{
font-size:40px;
}
}

#education .intro {
  text-align: left;
  width: 100%;
  margin: 30px auto 30px;
}

#education .intro p {
  margin-bottom: 20px;
  padding: 12px;
  line-height: 28px;
}

@media screen and (min-width: 769px) {

#education .intro {
  text-align: left;
  width: 100%;
  margin: 80px auto 30px;
}

  #education .intro p {
    margin-bottom: 20px;
  }
}

#education .intro figure {
  margin: 0 12px 48px;
  padding: 0 0 48px;
  position: relative;
}

@media screen and (min-width: 769px) {
  #education .intro figure {
    margin: 0 0 72px;
    padding: 0 0 72px;
  }
}

#education .intro figure:after {
  content: '';
  display: block;
  width: 124px;
  height: 1px;
  background: #d2d2d2;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#education .intro figure img {
  max-width: 641px;
  margin: 0 auto;
}

#education .intro section {
  position: relative;
  margin: 0 12px 48px;
  padding: 0 0 48px;
}

@media screen and (min-width: 769px) {
  #education .intro section {
    display: flex;
    margin: 0 0 72px;
    padding: 0 0 72px;
  }
  #education .intro section.reverse {
    flex-direction: row-reverse;
  }
}

#education .intro section:after {
  content: '';
  display: block;
  width: 124px;
  height: 1px;
  background: #d2d2d2;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#education .intro section h2 {
color:#001e3b;
  font-size: 20px;
  margin: 0 0 12px;
text-align:center;
}

#education .intro section h2:after, #education .intro section h2:before {
  display: none;
}

@media screen and (min-width: 769px) {
  #education .intro section h2 {
    margin: 0;

    font-size: 26px;
  }
}

#education .intro section .contents_body {
  box-sizing: border-box;
}

@media screen and (min-width: 769px) {
  #education .intro section .contents_body {
    width: 50%;
    margin: 0 20px;
  }
}

#education .pic {
  margin-bottom: 48px;
}

@media screen and (min-width: 769px) {
  #education .pic {
    margin-bottom: 124px;
  }
}

#education #subjects {
  padding: 24px 0;
  background: #e3e7ef;
}

@media screen and (min-width: 769px) {
  #education #subjects {
    padding: 48px 0;
  }
}

#education #subjects h2 {
  color: #2e3647;
  margin: 0 0 24px;
  padding: 0;
}

#education #subjects h2:before, #education #subjects h2:after {
  display: none;
}

@media screen and (min-width: 769px) {
  #education #subjects h2 {
    margin: 0 0 48px;
  }
}

@media screen and (min-width: 769px) {
  #education #subjects .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

#education #subjects .container section {
  margin-bottom: 36px;
}

@media screen and (min-width: 769px) {
  #education #subjects .container section {
    width: calc(50% - 16px);
    margin-bottom: 48px;
  }
}

#education #subjects .container section h3 {
  margin: 0 0 18px;
  padding: 0 12px 4px 12px;
  font-size: 18px;
  text-align: left;
  border-bottom: 1px solid #a50319;
}

@media screen and (min-width: 769px) {
  #education #subjects .container section h3 {
    font-size: 24px;
  }
}

#education #subjects .container section .copy {
  padding: 0 12px;
  margin: 0 0 18px;
  font-size: 16px;
}

@media screen and (min-width: 769px) {
  #education #subjects .container section .copy {
    font-size: 20px;
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
  }
}

#education #subjects .container section .contents_body {
  margin: 0 0 18px;
  padding: 0 12px;
}

#education #subjects .container section .subjects {
  padding: 0 12px;
}

@media screen and (min-width: 769px) {
  #education #subjects .container section .subjects {
    display: flex;
  }
}

#education #subjects .container section section {
  min-width: 50%;
  flex-grow: 1;
  margin: 0;
}

#education #subjects .container section section h4 {
  color: #a50319;
  font-size: 16px;
}

#education #subjects .container section section .contents_body {
  padding: 0;
  margin: 0;
}

#education #subjects .container img {
  margin-bottom: 48px;
}

@media screen and (min-width: 769px) {
  #education #subjects .container img {
    width: calc(50% - 16px);
  }
}

#education #subjects .container .eng {
  background: #fff;
  box-sizing: border-box;
  margin: 0 12px;
  padding: 12px;
}

@media screen and (min-width: 769px) {
  #education #subjects .container .eng {
    display: flex;
    margin: 0;
    padding: 32px;
    justify-content: space-between;
  }
}

#education #subjects .container .eng section {
  margin: 0;
}

#education #subjects .container .eng table.base {
  margin-top: 18px;
}


img.pic_none {
    display: block;
	width:auto;
	max-width:100%;
    margin: 0 auto;
    padding: 32px;
}

img.pic_vehicles {
    display: block;
	width:100%;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 769px) {
img.pic_vehicles {
    display: block;
    width:auto;
    margin: 1px auto 0;
    padding: 0;
}
}


table.base input {
height: 30px;
border:solid #ddd 1px;
    margin: 5px auto;

}

table.base textarea {
border:solid #ddd 1px;
    margin: 5px auto;

}

.red {
	color:#f00;
}

img.none {
    display: block;
	width:auto;
    margin: 0;
    padding: 0;
}


@media screen and (max-width: 768px) {
table.base textarea {
width: 90%;
height: 10em;
}
table.base input {
width: 90%;
}
}

div.privacy {
width: 90%;
max-width: 1000px;

    margin: 0 auto;
    padding: 0;
}

div.privacy h2 {
text-align:left;
font-size:18px;
}


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

div.privacy h2 {
display:block;
text-align:left;
font-size:16px;
    margin: 20px auto;
    padding: 0;
}

div.privacy h2:before {
background:none;
}

div.privacy h2:after {
background:none;
}
}


.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

img.workflow_pic{
	width:90%;
	max-width:400px;
    margin: 0px auto 20px;
}

img.workflow_pic2{
	width:60%;
	max-width:200px;
    margin: 0px auto 20px;
   display:block;
}

@media screen and (max-width: 768px) {
img.workflow_pic2{
   display:none;
}
}

img.workflow_pic3{
	width:60%;
	max-width:200px;
    margin: 0px auto 20px;
   display:none;
}

@media screen and (max-width: 768px) {
img.workflow_pic3{
   display:block;
}
}

/********会社概要*************************************/




.philosophy-block {
display:block;
width:90%;
max-width:1300px;
margin:30px auto;
}

.philosophy-block p {
font-family: 'Noto Serif JP', serif;
text-align:center;
font-size:50px;
line-height:100px;
font-weight:bold;
}

.start-block {
display:block;
width:90%;
max-width:1300px;
margin:30px auto;
}
.start-block p {
font-family: 'Noto Serif JP', serif;
text-align:left;
font-size:30px;
line-height:60px;
}

@media screen and (max-width: 768px) {
	.start-block p {
	text-align:left;
	font-size:20px;
	line-height:40px;
}
}


.business-block {
display:block;
width:96%;
max-width:1300px;
margin:30px auto;
}
.business-block p {
text-align:left;
font-size:30px;
line-height:60px;
}

@media screen and (max-width: 768px) {
	.business-block p {
	text-align:left;
	font-size:20px;
	line-height:40px;
}
}

@media screen and (max-width: 1200px) {
	.philosophy-block p {
	text-align:center;
	font-size:40px;
	line-height:80px;
	}
}

@media screen and (max-width: 960px) {
	.philosophy-block p {
	text-align:center;
	font-size:30px;
	line-height:60px;
	}
}

@media screen and (max-width: 768px) {
	.philosophy-block p {
	text-align:left;
	font-size:24px;
	line-height:48px;
	}
}

#company h2{
	font-size:50px;
}


@media screen and (max-width: 768px) {
	#company h2{
		font-size:30px;
	}
}

#education h2{
	font-size:50px;
}

@media screen and (max-width: 768px) {
	#education h2{
		font-size:30px;
	}
}


.en {
background:
-webkit-gradient(radial, 100% 0%, 20, 100% 0%, 800, from(#eee), color-stop(90%, #ddd), to(rgba(255,255,255,0)))
}


.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #e8bd71 50%, #b97334 50%);
  bottom:0;
  left:-50%;
  opacity:.1;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

/********会社概要*************************************/



.block-area {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.block-area li {
	flex: 0 1 26%;
	margin: 0 2% 30px 2%;
	padding: 20px 1% 20px 1%;
    background-color: #f5f5f5;
    background-image:
   repeating-linear-gradient(-45deg,
   #fff, #fff 7px,
   transparent 0, transparent 14px);
	border:solid #003466 3px;
	border-radius:20px;
	font-size: 24px;
	line-height:40px;
	color:#000;

}

.block-area a:hover {
	opacity:0.7;
}

/* 画面解像度が768px以下になると1列になります。*/

@media (max-width: 768px){
	.block-grid li {
		flex: 0 1 40%;
	margin: 0 2% 30px 2%;
	padding: 10px 2% 10px 2%;

	font-size: 16px;
	line-height:26px;

	}
}

.block-area2 {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.block-area2 li {
		flex: 0 1 40%;
	margin: 0 2% 30px 2%;
	padding: 10px 2% 10px 2%;
    background-color: #f5f5f5;
    background-image:
   repeating-linear-gradient(-45deg,
   #fff, #fff 7px,
   transparent 0, transparent 14px);
	border:solid #003466 3px;
	border-radius:20px;
	font-size: 24px;
	line-height:40px;
	color:#000;

}



/* 画面解像度が768px以下になると1列になります。*/

@media (max-width: 768px){
	.block-grid2 li {
		flex: 0 1 40%;
	margin: 0 2% 30px 2%;
	padding: 10px 2% 10px 2%;

	font-size: 16px;
	line-height:26px;

	}
}


section#strengths {
display:block;
width:90%;
max-width:1300px;
margin:30px auto;
}

section#strengths p {
text-align:left;
font-size:30px;
line-height:60px;
}

section#strengths p::first-letter {
font-family: 'Noto Serif JP', serif;
text-align:left;
font-size:60px;
color:#ae1828;
font-weight:bold;
}

@media (max-width: 768px){
	section#strengths p {
	text-align:left;
	font-size:16px;
	line-height:26px;
	}

	section#strengths p::first-letter {
	font-family: 'Noto Serif JP', serif;
	text-align:left;
	font-size:30px;
	color:#ae1828;
	font-weight:bold;
}
}


section#strength {
display:block;
width:90%;
max-width:1300px;
margin:30px auto 120px;
}

section#strength p{
  position: relative;
  text-align: center;
  border: 2px solid #003466;
  background: #fff;
  font-size:24px;
  margin:100px auto 60px;
	color:#000;
}

section#strength p:before,
section#strength p:after {
  position: absolute;
  content: '';
}

section#strength p:before {
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border: 2px solid #003466;
  border-radius: 50%;
  background: #fff;
}

section#strength p:after {
  top: 4px;
  left: 4px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 2px dashed #2373c0;
  background: #fff;
}

section#strength p i {
  font-size: 24px;
  line-height: 60px;
  position: absolute;
  z-index: 2;
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  text-align: center;
}

section#strength p span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 1.5rem;
}

section#strength p span:before,
section#strength p span:after {
  position: absolute;
  content: '';
}

section#strength p span:before {
  top: -36px;
  left: calc(50% - 34px);
  width: 68px;
  height: 40px;
  border: 2px dashed #2373c0;
  border-radius: 50vw 50vw 0 0;
}

section#strength p span:after {
  position: absolute;
  top: 4px;
  left: calc(50% - 34px);
  width: 72px;
  height: 10px;
  background: #fff;
}


@media (max-width: 768px){
section#strength p{
  text-align: left;
  border: 2px solid #003466;
  background: #fff;
  font-size:16px;
  margin:100px auto 60px;
	color:#000;
}
}


section#service-map {
display:block;
width:90%;
max-width:1300px;
margin:30px auto 120px;
}


section#service-map img {
display:block;
width:100%;
margin:0 auto;
}

iframe.streetview  {
	display:block;
	max-width:1124px;
	width:  98%;
    margin: 0 auto;
	padding:10px 0;
	height: 500px;
}

.business-box {
	border:solid #003466 3px;
	border-radius:20px;

}


.business-block h3 {
  width:90%;
  max-width:260px;
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: #003466;
  display:block;
    margin: 30px auto;
font-size:24px;
}

.business-block h3:after {
  position: absolute;
  bottom: -20px;
  left: 40%;
  width: 0;
  height: 0;
  content: '';
  border-width: 30px 30px 0 30px;
  border-style: solid;
  border-color: #003466 transparent transparent transparent;
}