@charset "utf-8";

* { letter-spacing: 0px; }
.onMainContent { padding: 0px; }
.onMainVisual { margin-bottom: 13px; }
.onMainSummary { border-radius: 30px; }
.onMainSummaryTxtBox { position: absolute; top: 143px; left: 98px; color: #fff; z-index: 100; }
.onMainSummaryTxtBox .title { font-size: 50px; font-weight: 700; line-height: 1.2; margin-bottom: 27px; }
.onMainSummaryTxtBox .subtitle { color: #e9e9e9; font-size: 16px; font-weight: 300; line-height: 1.5; margin-bottom: 25px; }
.onMainSummaryTxtBox a { color: #d8d8d8; font-size: 15px; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.onKochensBoxLists { margin-top: 20px; }
.onKochensBoxLists li { text-align: left; color: #333; font-size: 16px; padding-left: 0; list-style: disc; margin-left: 25px; }
.flexComment { flex-direction: column; }
.flexComment > * { display: flex; }
.onFooterLayout .onFooterLogoList { bottom: -60px; }
.onKochensProcess { padding: 30px 36px; }
.onMainSummary li { padding: 100px; }
.onLayout.mainPage { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.blue01 { top: -80px; left: auto; right: 0; }
.blue02 { top: 160px; left: auto; right: -57px; }
.green01 { top: -150px; left: auto; right: -50px; }
.green02 { left: auto; top: 88px; right: -108px; }
.onMoveCharBanner { right: 100px; }
.onMoveCharBanner01 { right: 160px; top: 190px; transform: none; }
.onMoveCharBanner02 { transform: none; top: 260px; right: 210px; }

@media (max-width:1200px) {
  .onMainSummaryTxtBox { top: 50px; left: 50px; }
  .onFooterR { position: static; }
  .onFamilySite .onField { width: 100%; }
  .onFamilySite { margin-bottom: 20px; }
  .onFooterLayout .onFooterLogoList { bottom: -4px; }
  .onMoveCharBanner01 { top: 133px; }
  .onMoveCharBanner02 { top: 203px; }
}
@media (max-width: 1000px) {
   .onMoveCharBanner01 { top: 103px; right: 0px; }
   .onMoveCharBanner02 { top: 173px; right: 50px; }
}
@media (max-width:800px) {
  .onMainVisual { height: 730px; }
  .onMoveCharBanner01, .onMoveCharBanner02 { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: -10px; }
}
@media (max-width:640px) {
  .onMainSummary { border-radius: 0px; }
  .onMainSummaryTxtBox { top: 44px; left: 0; }
  .onMainSummaryTxtBox .title { font-size: 30px; }
  .onMainSummaryTxtBox .subtitle { font-size: 14px; }
  .onMainSummaryTxtBox a { font-size: 16px; }
  .onKochensProcess.imgScroll { overflow: visible; }
  .onKochensProcess.imgScroll > strong { white-space: normal; }
  .onKochensProcess.imgScroll > div { overflow: auto; }
}
