@charset "UTF-8";
/* Scss Document */
/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
base
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */
#contents { overflow: hidden; margin: 100px 0 0; padding: 0; }

/* intro */
#intro { min-height: 710px; margin: 100px 100px 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; position: relative; }
#intro p.txt { width: calc(100% - 550px); }
#intro p.txt span { margin: 0 0 70px; display: block; background: -webkit-linear-gradient(135deg, #d2939c 20%, #a8ce9c 80%, #a8ce9c); background: linear-gradient(135deg, #d2939c 20%, #a8ce9c 80%, #a8ce9c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; }
#intro img.main { margin: 0 0 0 60px; }
#intro img.mark { width: 664px; height: 760px; position: absolute; top: -50px; right: -140px; z-index: -1; opacity: 0.1; }

@media (max-width: 1440px) { #intro p.txt span { font-size: 50px; }
  #intro p.txt span br { display: none; } }
@media (max-width: 1180px) { #intro { margin: 100px 40px 0; display: -webkit-block; display: -moz-block; display: -ms-block; display: -o-block; display: block; }
  #intro p.txt { width: 100%; }
  #intro img.main { margin: 40px auto 0; display: block; } }
@media (max-width: 640px) { #intro { margin: 100px 20px 0; }
  #intro p.txt span { margin: 0 0 40px; font-size: 40px; } }
@media (max-width: 550px) { #intro img.main { width: 100%; height: auto; } }
@media (max-width: 500px) { #intro p.txt span { font-size: 24px; } }
/* businessType */
#businessType { margin: -70px 100px 0; padding: 0; list-style: none; }
#businessType li { width: 100%; height: auto; margin: 0 0 20px; padding: 0; border: 1px solid #231815; background-color: #FFF; }
#businessType li:last-of-type { margin: 0; }
#businessType li:nth-of-type(1) dl dt { background-color: #163e43; }
#businessType li:nth-of-type(2) dl dt { background-color: #dccb53; }
#businessType li:nth-of-type(3) dl dt { background-color: #5c551e; }
#businessType li:nth-of-type(4) dl dt { background-color: #9c5279; }
#businessType li dl { margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#businessType li dl dt { width: 20%; margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: center; }
#businessType li dl dd { width: 80%; margin: 0; padding: 0; }
#businessType li dl dd p { margin: 0; padding: 27px 30px; }
#businessType li dl dd ul { margin: 0; padding: 10px 10px 30px 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; list-style: none; }
#businessType li dl dd ul li { width: 160px; height: 160px; margin: 20px 20px 0 0; border: none; }
#businessType li dl dd ul li:last-of-type { margin: 20px 20px 0 0; }
#businessType li dl dd ul li img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1300px) { #businessType { margin: 80px 100px 0; } }
@media (max-width: 1180px) { #businessType { margin: 80px 40px 0; } }
@media (max-width: 900px) { #businessType li dl { display: -webkit-block; display: -moz-block; display: -ms-block; display: -o-block; display: block; }
  #businessType li dl dt { width: 100%; padding: 30px 0; }
  #businessType li dl dd { width: 100%; } }
@media (max-width: 640px) { #businessType { margin: 80px 20px 0; }
  #businessType li dl dd p { padding: 27px 20px; }
  #businessType li dl dd ul { padding: 10px 0 30px 20px; } }
@media (max-width: 450px) { #businessType li dl dd ul li { width: calc((100% - 40px) / 2); height: 120px; } }
/* 各グループ紹介 */
#business section { margin: 100px 0 0; padding: 0 100px 100px; position: relative; }
#business section::after { content: ''; width: 82%; height: 100%; position: absolute; top: 30px; right: 0; z-index: -1; background-color: #e7e9ef; }
#business section h3 { margin: 0; padding: 20px 0 20px 20px; border-left: 10px solid #4f7dcf; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; }
#business section h3 span { width: 100%; display: block; }
#business section h3 span:last-of-type { margin: 20px 0 0; }
#business section ul { margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; list-style: none; }
#business section ul li { width: calc((100% - 80px)/2); margin: 80px 80px 0 0; padding: 0; position: relative; }
#business section ul li:nth-child(even) { margin: 80px 0 0; }
#business section ul li a { width: 100%; height: 100%; padding: 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: flex-start; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); position: relative; transition: 0.1s linear; }
#business section ul li a img { position: relative; z-index: 1; }
#business section ul li a div { width: calc(100% - 240px); margin: 20px 0 0; padding: 0; position: relative; z-index: 2; }
#business section ul li a div p.title { margin: 0 0 0 -30px; padding: 20px 52px 20px 30px; color: #FFF; background-image: url("../img/common/svg/ar01.svg"); background-position: right 20px center; background-repeat: no-repeat; background-size: 22px 30px; transition: 0.1s linear; }
#business section ul li a div p.title span { margin: 0 0 15px; display: block; }
#business section ul li a div p.txt { margin: 30px 10px 0 30px; }
#business section ul li a:hover { text-decoration: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#business section ul li a:hover div p.title { color: #00336e; background-color: #e7e9ef; background-image: url("../img/common/svg/ar01_blue.svg"); }
#business section ul li::before, #business section ul li::after { content: ""; width: 0; height: 1px; position: absolute; z-index: 1000; transition: all 0.2s linear; transition-delay: 0s; background-color: #004ca1; }
#business section ul li::before { right: 0; top: 0; }
#business section ul li::after { left: 0; bottom: 0; }
#business section ul li a::before, #business section ul li a::after { content: ""; width: 1px; height: 0; position: absolute; transition: all 0.2s linear; transition-delay: 0.1s; background-color: #004ca1; }
#business section ul li a::before { left: 0; top: 0; }
#business section ul li a::after { right: 0; bottom: 0; }
#business section ul li:hover::before, #business section ul li:hover::after { width: 100%; transition-delay: 0.1s; }
#business section ul li:hover a::before, #business section ul li:hover a::after { height: 100%; transition-delay: 0s; }

@media (max-width: 1350px) { #business section ul li a { display: -webkit-block; display: -moz-block; display: -ms-block; display: -o-block; display: block; }
  #business section ul li a img { margin: 0 auto; display: block; }
  #business section ul li a div { width: 100%; }
  #business section ul li a div p.title { margin: 0; }
  #business section ul li a div p.txt { margin: 30px 0 10px; } }
@media (max-width: 1180px) { #business section { padding: 0 40px 100px; }
  #business section ul li { width: calc((100% - 40px)/2); margin: 80px 40px 0 0; } }
@media (max-width: 860px) { #business section ul li a div p.title { padding: 20px 42px 20px 20px; } }
@media (max-width: 700px) { #business section ul li a img { width: 100%; height: auto; margin: 0; } }
@media (max-width: 640px) { #business section { padding: 0 20px 100px; }
  #business section ul { display: -webkit-block; display: -moz-block; display: -ms-block; display: -o-block; display: block; }
  #business section ul li { width: 100%; margin: 80px 0 0; }
  #business section ul li a img { width: auto; margin: 0 auto; } }