@charset "UTF-8";

.l-header {
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.16);
}

.subheader {
  margin-top: 120px;

  display: flex;
  align-items: center;

  height: 200px;
  background: url("../../img/old_wall.png") repeat;
  position: relative;

  overflow: hidden;
}

.subheader ._inner {
  max-width: 1100px;
  width: 88%;
  margin: 0 auto;
}

.subheader__bgimage {
  position: absolute;
  right: 0%;
  top: 0;
  z-index: 0;
  
  height: 200px;
  object-fit: cover;

  z-index: 0;
}

.subheader__title {
  font-family: "Noto Serif JP", serif;

  font-size: 4.0rem;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.subheader__title--sub {
  display: block;

  font-size: 2.0rem;
  font-weight: bold;
  color: #153169;
}

@media screen and (max-width: 767px) {
  .subheader {
    margin-top: 70px;
  }

  .subheader__title {
    font-size: 3.6rem;
  }
  .subheader__title--sub {
    font-size: 1.8rem;
  }
}



.bread ._inner {
  max-width: 1100px;
  width: 88%;
  margin: 20px auto 50px;
}

.bread__ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

.bread__ul li {
  display: flex;
  align-items: center;

  font-size: 1.4rem;
}

.bread__ul li:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background-color: #aaa;
  transform: rotate(15deg) translateY(1px);
  margin-left: 8px;
}

.bread__ul li a {
  color: #aaa;
  text-decoration: none;
}
.bread__ul li a:hover {
  text-decoration: underline;
}

.subcontent ._inner {
  max-width: 1100px;
  width: 88%;
  margin: 20px auto 50px;
}

.contentbox {
  margin-bottom: 90px;
}

.subcontent h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 4.0rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.subcontent h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  background: #153169;
  margin-top: 25px;
}

.subcontent h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 3.0rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 38px;

  position: relative;
}

.subcontent h3::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 3px;
  
  background: linear-gradient(
    to right, 
    #153169 0px, 
    #153169 100px, 
    #dddddd 100px, 
    #dddddd 100%
  );
}

.subcontent h4 {
  font-family: "Noto Serif JP", serif;

  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 20px;

  position: relative;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.subcontent h4::before {
  content: "";
  display: block;
  width: 25px;
  height: 4px;
  background: #153169;
}

.company-info + h4 {
  margin-top: 40px;
}

.flex-row {
  display: flex;
  justify-content: space-between;
}
.flex-row > div {
  flex-basis: 48%;
}

@media screen and (max-width: 1100px) {
  .flex-row {
    display: flex;
    flex-direction: column;
    gap: 90px;
  }
  .flex-row > div {
    flex-basis: 100%;
  }

}

@media screen and (max-width: 767px) {
  .subcontent h2 {
    font-size: 3.2rem;
  }
  
  .subcontent h3 { 
    font-size: 2.4rem;
  }
}

.company-info {
  width: 100%;
  border-top: 1px solid #dddddd;
}

.info-row {
  display: flex;
  border-bottom: 1px solid #dddddd;
}

.info-row dt {
  width: 250px;
  padding: 15px 0;
  background: #f7f7f7;
  flex-shrink: 0;

  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  
}

.info-row dd {
  padding: 15px 0 15px 30px;
  flex-grow: 1;

  font-size: 1.6rem;
  line-height: 1.5;
}

.info-row_map-wrap {
  position: relative;
  width: 100%;
  height: auto !important;
  padding-top: 56.25%;

  margin-top: 30px;
}
.info-row_map-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.flex-row_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 50px;
}

.flex-row_wrap h4 {
  width: calc(100% - 60% - 20px);
  line-height: 54px;
}

.flex-row_wrap h4::before {
  content: "";
  display: none;
}

.flex-row_wrap h4::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #153169;
  flex: 1;
}

.flex-row_wrap dl.company-info {
  width: 60%;
}

.flex-row_wrap dl.company-info dt {
  background: #f1f1f1;
  color: var(--color-base);
  width: 60%;
}

.flex-row_wrap dl.company-info dt br {
  display: none;
}

.flex-row_wrap dl.company-info dd {
  text-align: right;
}

.certification-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px 0;
}

.certification-box {
  flex-basis: 48%;
}


.certification .info-row {
  border: 0;
  margin-bottom: 11px;
}

.certification {
  border: 0;
}

.certification dt {
  background: none;
  color: var(--color-base);
  padding: 0;
  border: 0;
  text-align: left;
  font-weight: normal;

  width: calc(100% - 10px - 4em);

  display: flex;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
}
.certification dt::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  flex: 1;
}
.certification dd {
  padding: 0 0 0 15px;
  border: 0;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .company-info {
    border: 0;
  }
  .info-row {
    flex-direction: column;
    border: 0;
  }
  .info-row dt {
    width: 100%;
  }

  .info-row dd {
    width: 100%;
    padding: 15px 0 45px;
  }

  .certification-wrap {
  }
  
  .certification-box {
    flex-basis: 100%;
  }

  .certification .info-row {
    flex-direction: row !important;
  }
  .certification dt {
    width: calc(100% - 10px - 3em) !important;
  }
  .certification dd {
    width: auto !important;
    padding: 0 0 0 15px !important;
  }

  

}

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

}

.info-row a {
  color: #153169;
  text-decoration: underline;
}
.info-row a:hover {
  text-decoration: none;
}

ul.info-ul_circle {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.info-ul_circle li {
  position: relative;
  padding-left: 1em;
  line-height: 1.6;
  margin-bottom: 4px;
}

ul.info-ul_circle li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #153169;
}

.movie-wrap {
  margin-top: 40px;
  margin-bottom: 90px;
  background: #153169;
  padding: 40px;

  position: relative;
}

.movie-title {
  color: #fff;
  font-size: 3.0rem;
  line-height: 1.8;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.movie-wrap figure {
  max-width: 800px;
  margin: auto;
}

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

}

@media screen and (max-width: 767px) {
  .movie-wrap {
    margin: 40px auto 90px;
  }
  
  .movie-title {
    font-size: 1.8rem;
  }

  .movie-wrap figure {
    max-width: 88%;
    width: 88%;
    margin: auto;
  }
}

.rightfit-box_wrap {
  margin-left: max(20px, calc(50% - 550px));
  margin-right: 0;
  margin-bottom: 90px;
}

.rightfit-box_wrap ._inner {
  margin: 0;
}

.rightfit-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  gap: 50px;
}

.rightfit-box_text {
  flex-basis: 35%;
}

.rightfit-box_img {
  flex-basis: 60%;
}

.rightfit-box_img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

.service-info_wrap {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 50px;
}

.service-info_photo {
  width: 50%;
}
.service-info_photo img {
  width: 100%;
  aspect-ratio: 4/2.5;
  object-fit: cover;
  object-position: center;
}

.service-info_text {
  width: 48%;
}


.works-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px 20px;
  margin-top: 40px;
}

.works-list li {
  width: calc((100% / 3) - 40px);
}

.works-list li img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  margin-bottom: 10px;
}
.works-list li p {
  font-size: 1.6rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .rightfit-box_wrap ._inner {
    display: contents;
  }

  .rightfit-box_wrap {
    max-width: 1100px;
    width: 88%;
    margin: 20px auto 50px !important;
  }
  .rightfit-box {
    flex-direction: column;
    gap: 30px;
  }
  
  .rightfit-box_text {
    flex-basis: 100%;
    width: 100%;
  }
  
  .rightfit-box_img {
    flex-basis: 100%;
    width: 100%;
  }
  .rightfit-box_img img {
    border-radius: 10px;
  }

  .works-list {
    gap: 30px 15px;
  }
  
  .works-list li {
    width: calc((100% / 2) - 15px);
  }

  .works-list li p {
    font-size: 1.4rem;
  }

}

.hissu {
  color: red;
}

.form-wrap {
  margin-top: 40px;
  background: #f6f8fb;
  padding: 60px 30px;
}

.mailform {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  border-top: 1px solid #ccc;
}

form#mailformpro dl dt, form#mailformpro dl dd {
  float: none !important;
  font-size: 1.6rem !important;
  border-bottom: 1px solid #ccc;
  border-top: 0 !important;
}

form#mailformpro dl dt {
  width: 230px !important;
  padding: 15px !important;

  display: flex;
  align-items: center;
}

form#mailformpro dl dt div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

form#mailformpro dl dd {
  width: calc(100% - 230px) !important;
  padding: 15px !important;
}

.mfp_colored {
  background: #f6f8fb !important;
}

.must {
  margin-top: 3px !important;
  font-size: 1.3rem !important;
}

.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 15px !important;
  width: 300px !important;
}

.mfp_element_textarea {
  width: 100% !important;
}

.mfp_element_text:focus-visible {
  outline: 0 !important;
  background: #fafafa !important;
}

.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev {
  margin-top: 40px;
  width: 400px;
  
  background-image: linear-gradient(to right, #112843 0%, #4A6BA8 50%, #112843 100%) !important;
  background-size: 200% auto !important;
  background-position: 100% center !important;
  transition: background-position 0.3s ease-out !important;

  color: #fff;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  text-shadow: none !important;

  padding: 25px 40px !important;
  border-radius: 100px !important;
  
  border: none;
  cursor: pointer;
}

#mfp_button_cancel {
  background-image: linear-gradient(to right, #666 0%, #666 50%, #666 100%) !important;
  margin-top: 20px !important;
  transition: 0.3s;
}
#mfp_button_cancel:hover {
  background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, #ccc 100%) !important;
}

.mfp_element_submit:hover, .mfp_element_reset:hover, .mfp_element_button:hover, button.mfp_next:hover, button.mfp_prev:hover {
  background-position: 0% center !important;
  box-shadow: none !important;
}

@media screen and (max-width: 767px) {
  .mailform {
    flex-direction: column;
  }
  
  
  form#mailformpro dl dt {
    width: 100% !important;
    padding: 15px !important;
  }
  
  form#mailformpro dl dd {
    width: 100% !important;
    padding: 15px 0px 45px !important;
  }
  
  dt.mfp_colored, dt.mfp_achroma {
    background-color: #153169 !important;
    color: #fff !important;
  }
  dd.mfp_colored, dd.mfp_achroma  {
    background-color: #f6f8fb !important;
  }

  .mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mfp_element_all {
    width: 100% !important;
    max-width: 100% !important;
  }

}

#mfp_overlay_inner h4 {
  font-size: 1.8rem !important;
  margin-bottom: 20px !important;
}

table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
  font-size: 1.6rem !important;
  padding: 10px !important;
}

#mfp_overlay {
  top: 50% !important;
}

div#mfp_warning {
  font-size: 1.6rem !important;
  line-height: 1.8;
  padding: 10px !important;
}

.pp-box {
  margin-top: 40px;
}