@charset "utf-8";

#page-body .container {
  background: rgba(225, 225, 225, 0); /* デフォルト背景を透明 */
}
#page-body .container {
  max-width: none;
  background-color: #EDF5FF;
}
#page-body .container .main-container_content {
  position: relative;
  z-index: 1;
}
#page-body .main-container {
  margin: 0 auto;
  position: relative;
  color: #101010;
  font-family: 'Montserrat','Noto Sans JP',"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
  font-size: 15px;
  line-height: calc(25 / 15);
  letter-spacing: 1px;
}
#page-body .main-container:before,
#page-body .main-container:after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#page-body .main-container:after {
  left: auto;
  right: 0;
}
#page-body .main-container a {
  color: #101010;
  transition: 0.3s;
}
#page-body .main-container a:hover {
  opacity: 0.7;
}
#page-body .main-container li {
  list-style: none;
}
#page-body .main-visual {
  width: 100%;
}
#page-body .main-visual h1 {
  width: 90%;
  max-width: 1220px;
  position: relative;
  margin: 0 auto;
}
#page-body .main-visual h1 img {
  width: 100%;
  max-width: 342px;
  position: absolute;
  top: -310px;
  right: -11px;
}
#page-body .main-visual .main-visual-bg {
  width: 100%;
  max-width: 1200px;
  margin: 0 0 0 0;
  padding-top: 40px;
}
#page-body .main-visual2 .main-visual-bg {
  margin: 0 auto 0 0;
}

#page-body .main-container {
  width: 100%;
  margin: 100px auto 200px;
}

#page-body .main-container2 {
  margin-bottom: 0 !important;
}
#page-body .page-lead {
  width: 100%;
  max-width: 644px;
  position: relative;
  margin: 0 auto 153px;
  font-size: 17px;
  line-height: calc(30 / 17);
  letter-spacing: 0.02em;
}
#page-body .item-info {
  width: 90%;
  max-width: 1220px;
  margin: 0 auto 120px;
  display: flex;
  gap: 27px;
}
#page-body .item-info .border {
  width: 1px;
  position: relative;
  background: #101010;
}
#page-body .item-info .item-block {
  width: 31%;
  max-width: 370px;
  position: relative;
  margin-top: 6px;
}
#page-body .item-info .item-block:nth-child(1),
#page-body .item-info .item-block:nth-child(5) {
  margin-top: 146px;
}
#page-body .item-info .item-block h2 {
  position: absolute;
  top: -35px;
  left: 5px;
  z-index: 10;
  font-size: 90px;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 97%;
}
#page-body .item-info .item-block h2 span{
  font-size: 18px;
  font-weight: 600;
}  
#page-body .item-info .item-block p {
  margin: 20px 0 35px;
}
#page-body .more-btn a {
  display: flex;
  align-items: center;
  position: relative;
  right: 0;
  line-height: 1;
  transition: all .3s;
}
#page-body .more-btn a:hover {
  right: -3%;
  opacity: 1;
}
#page-body .more-btn .arrow {
  width: 25px;
  position: relative;
  display: inline-block;
  margin-right: 7px;
}
#page-body .more-btn .arrow::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0%;
  width: 100%;
  height: 1px;
  background: #101010;
}
#page-body .more-btn .arrow::after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 9px;
  height: 1px;
  background: #101010;
  transform: rotate(35deg);
}
#page-body .item-tag-area {
  width: 90%;
  max-width: 1220px;
  margin: 0 auto;
}
#page-body .item-tag {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 19px 15px;
  margin: 0 0 0 auto;
}
#page-body .item-tag li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 21px;
  border: 2px solid #101010;
  border-radius: 1000px;
  line-height: 1;
  letter-spacing: 0;
}
#page-body .item-tag li a:hover {
  background: #101010;
  color: #e7ddcc;
  opacity: 1;
}
#page-body .page-footer {
  width: 100%;
  margin-top: 150px;
  padding: 64px 0;
  background: #ded0b2;
  text-align: center;
}
#page-body .page-footer a {
  font-size: 18px;
  line-height: 1;
}
#page-body .page-footer a .arrow {
  position: relative;
  display: inline-block;
  margin-right: 15px;
  padding: 10px;
}
#page-body .page-footer a .arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #101010;
  border-right: solid 2px #101010;
  position: absolute;
  left: 10px;
  top: 8px;
  transform: rotate(-135deg);
}


/* lp_shadow1 */
#page-body .lp_shadow1 {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-top: -130px;
  text-align: left;
  left: 0;
  z-index: 0;
}
#page-body .lp_shadow1 img {
  animation: 20s ease infinite shadow1;
  transform-origin: center right;
}
@keyframes shadow1 {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(1.5); }
  100% { transform: scaleX(1); }
}
@media (max-width: 767px) {
  #page-body .lp_shadow1 {
    margin-top: -80px;
    left: auto;
    right: 0;
  }
  #page-body .lp_shadow1 img {
    width: 70%;
    margin: 0;
  }
}
/* lp_shadow2 */
#page-body .lp_shadow2 {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-top: -320px;
  text-align: right;
  right: 0;
  z-index: 0;
}
#page-body .lp_shadow2 img {
  animation: 20s ease infinite shadow2;
  transform-origin: top left;
}
@keyframes shadow2 {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(1.5); }
  100% { transform: scaleX(1); }
}
@media (max-width: 767px) {
  #page-body .lp_shadow2 img {
    width: auto;
    margin-top: -20%;
  }
}
@media (max-width: 425px) {
  #page-body .lp_shadow2 {
    margin-top: -210px;
  }
  #page-body .lp_shadow2 img {
    width: 70%;
    margin: 0;
  }
}
#page-body .hidden-768{
  display: block;
}
#page-body .visible-768 {
  display: none;
}

@media (max-width: 820px) {
}

@media (max-width: 767px) {
  #page-body {
    padding-bottom: 0;
  }
 #page-body > .container {
    padding: 0 0;
  }
  .breadcrumb-wrap {
    padding-right: 10px;
    padding-left: 10px;
  }
  #page-body .main-visual {
    display: flex;
    flex-direction: column-reverse;
  }
  #page-body .main-visual .main-visual-bg {
    margin: 0 auto 0 0;
    padding-top: 30px;
  }
  #page-body .main-visual2 .main-visual-bg {
    margin: 0 0 0 auto;
  }
  #page-body .main-visual h1 {
    width: 220px;
    position: relative;
  }
  #page-body .main-visual h1 img {
    width: 100%;
    position: absolute;
    top: 413px;
    left: -47px;
  }
  #page-body .main-container {
    margin: 50px auto 250px;
    font-size: 13px;
  }
  #page-body .page-lead {
    margin-bottom: 120px;
    margin-top: 170px;
    width: 80%;
    font-size: 13.5px;
    line-height: calc(52 / 26);
  }
  #page-body .item-info {
    flex-direction: column;
    gap: 100px;
    margin-bottom: 60px;
  }
  #page-body .item-info:nth-child(2) {
    flex-direction: column;
    gap: 100px;
    margin-bottom: 60px;
  }
  #page-body .item-info .item-block {
    width: 100%;
    max-width: none;
  }
  #page-body .item-info .item-block:nth-child(1),
  #page-body .item-info .item-block:nth-child(5) {
    margin-top: 0;
  }
  #page-body .item-info .item-block h2 {
    left: 10px;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 91%;
  }
  #page-body .item-info .item-block h2.no2 {
    left: auto;
    right: 10px;
  }
  #page-body .item-info .item-block p {
    margin-bottom: 25px;
  }
  #page-body .item-tag {
    width: 100%;
    max-width: unset;
    gap: 14px 10px;
  }
  #page-body .item-tag li a {
    padding: 10px 12px;
  }
  #page-body .page-footer {
    margin-top: 100px;
    padding: 45px 0;
  }
  #page-body .page-footer a {
    font-size: 14px;
  }
  #page-body .page-footer a .arrow {
    margin-right: 10px;
    padding: 9px;
  }
  #page-body .page-footer a .arrow::before {
    width: 8px;
    height: 8px;
  }
  #page-body .hidden-768 {
    display: none;
  }
  #page-body .visible-768 {
    display: block;
    width: 95%;
  }
}