html{  }

header{
  position:absolute; top:0;
  background-color:#172026; mix-blend-mode: multiply;
  width:100%; height:650px;
  text-align:center;
}
header:before{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  display:block; content:""; clear:both;
  /*background:#172026 url(/assets/svg/header.svg) no-repeat center 0;*/
  background:#172026 url(/assets/image/header.png) no-repeat center 0;
  background-size:cover;
  mix-blend-mode: multiply;
  width:100%; height:100%;
  opacity:0.9;
}

header > h1{ margin-top:50px; }

footer{
  position:relative;
  padding:36px 33px; background-color:#172026; mix-blend-mode: multiply;
  font-size:14px; line-height:28px; letter-spacing:0.06em; color:rgba(255, 255, 255, 0.6);
}
footer > .inner{ max-width:412px; margin:0 auto; }
footer > .inner > .tit{  }
footer > .inner > .tit > img{ vertical-align:middle; }
footer > .inner > .address{ font-size:15px; }
footer > .inner > .copyright{ font-size:13px; }
footer:before{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  display:block; content:""; clear:both;
  background:#172026 url(/assets/image/header.png) no-repeat center 100%;
  background-size:cover;
  mix-blend-mode: multiply;
  width:100%; height:100%;
  opacity:0.9;
}

main{
  max-width:412px;
  margin:0 auto;
  padding:0 28px;
}

section{
  /*outline:1px dashed red; box-shadow:0px 0px 10px cornflowerblue;*/
  text-align:center;
}

@media screen and (min-width:1104px){
  header{ height:930px; }
  header > h1{ margin-top:60px; }
  header:before{ background-image:url(/assets/image/header_pc.png); }
  
  main{
    width:100%; max-width:100%;
    padding:0; background-color:#F9F8F8;
    outline:1px dashed cyan; box-shadow:0px 0px 10px cornflowerblue;
  }
  footer{ font-size:20px; padding:87px 0 77px; }
  footer > .inner{ max-width:1126px; }
  footer > .inner{ display:flex; flex-direction:row; }
  footer > .inner > .tit{ order:1; flex-grow:1; text-align:right; }
  footer > .inner > .address{ order:3; flex-grow:1; }
  footer > .inner > .address{ font-size:20px; }
  footer > .inner > .copyright{ order:2; flex-shrink:0; padding-left:80px; padding-right:56px; text-align:center; }
  footer > .inner > .copyright{ font-size:18px; }
  footer:before{ background-image:url(/assets/image/header_pc.png); }
  
}
[data-page="error"],
[data-page="error"] body{ height:100%; }
[data-page="error"] main{ padding:88px 28px 156px; height:100%; }
[data-page="error"] main{ display:flex; justify-content:center; align-items:center; }
[data-page="error"] main{ color:#ffffff; }
[data-page="error"] footer{ position:absolute; left:0; bottom:0; width:100%; }
[data-page="error"] header{ height:100%; }
[data-page="error"] footer{ background-color:inherit; mix-blend-mode:inherit; }
[data-page="error"] footer:before{ background:none; mix-blend-mode:inherit; }
.page_404{}
.page_404 > h1{ font-weight:600; font-size:26px; line-height:38px; }
.page_404 > h1 > span{ display:block; }
.page_404 > .desc{ margin-top:26px; padding:0 2px; font-size:16px; line-height:20px; }
.page_404 > .cst_btn{ margin-top:50px; color:#000000; font-size:18px; font-weight:bold; background-color:#ffc000; height:48px; line-height:48px; border-radius:10px; padding:0 56px; }
@media screen and (min-width:1104px){
  [data-page="error"] main{ padding:130px 0 192px; }
  .page_404 > h1{ font-size:38px; line-height:54px; letter-spacing:0.04em; }
  .page_404 > .desc{ margin-top:30px; font-size:24px; line-height:36px; }
  .page_404 > .cst_btn{ font-size:24px; height:60px; line-height:60px; padding:0 62px; }
}