@charset "UTF-8";
/* CSS Document */

.hc{ display: none;}
footer{ display: none;}
html,body{ background: #FFFFFF;}
body{ font-size: 16px; font-family: 'Noto Serif JP', serif; line-height: 1.8;}
.mb{ width: 1100px; padding: 4.0em 0;}
@media screen and ( max-width: 480px ) {
  header{ position: sticky; top: 0;}
  body{ font-size: 14px;}
  .mb{ width: auto; margin: 0 1.0em; padding: 2.0em 0;} 
}


.section_header{ margin: 0; padding: 0; display: flex;}
.section_header *{ margin: 0;}
.section_header div{ margin: 0; flex: 0 0 50%;}
.section_header figure{ display: block; width: 100%;}
.section_header img{ display: block;}
.section_header h1{ display: flex; justify-content: center; align-items: center; background: #f0f0f0; width: 100%; height: 100%;}
.section_header h1 img{ width: 43%;}
@media screen and ( max-width: 480px ) {
  .section_header{ display: block; width: 80%; margin: 0 auto 0 auto; padding: 2.0rem 0 0 0;}
  .section_header h1{ display: block; width: 100%; padding: 100% 0 0 0; position: relative;}
  .section_header h1 img{ display: block; margin: auto; width: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
}

.section_copy .copy_title{ width:480px; margin: 0 auto;}
.section_copy .copy_body{ margin: 3.0rem 0 0 0; text-align: center; line-height: 2.0;}
.section_copy .copy_about{ margin: 3.0rem auto 0 auto; width: 120px;}
.section_copy .copy_text{ margin: 2.0rem auto 0 auto; width: 380px; font-size: 75%; }
@media screen and ( max-width: 480px ) {
  .section_copy .copy_title{ width: 90%;}
  .section_copy .copy_about{ width: 30%;}
  .section_copy .copy_text{ width: 80%;}
  
}

.section_navi .mb{ display: flex; gap: 1.0rem 2%; flex-wrap: wrap; width: 786px;}
.section_navi article{ flex: 0 0 32%; background: #f0f0f0;}
.section_navi article a{ display: block; text-decoration: none; padding: 0 0 1.0em 0;}
.section_navi article p{ margin: 0.7em 0 0 0; font-size: 75%; text-align: center;}
@media screen and ( max-width: 480px ) {
  .section_navi .mb{ width: auto;}
  .section_navi article{ flex: 0 0 49%;}
  .section_navi article p{ font-size: 50%;}
}

.section_material{}
.section_material h2{ width: 500px; margin: 0 auto;}
.section_material .content{ display: flex; gap: 0 4%; margin: 4.0rem 0 0 0; align-items: stretch;}
.section_material .content.reverse{ flex-direction:row-reverse;}
.section_material .body{ flex: 0 0 48%;}
.section_material .figure{ flex: 0 0 48%; position: relative;}
.section_material .figure figure{ display: block; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; background-attachment:scroll;}
.section_material h3{ font-size: 150%; color: #656851; font-weight: 600;}
.section_material h4{ margin: 1.0em 0 0 0; font-size: 125%; color: #656851; font-family: 'Noto Sans JP', sans-serif;}
.asset32{ width: 300px;}
.mt04_asset01{ width: 320px;}
@media screen and ( max-width: 480px ) {
  .section_material h2{ width: 100%;}
  .section_material .content,
  .section_material .content.reverse{ flex-direction: column-reverse; margin: 1.0rem 0 0 0;}
  .section_material .body{ flex: 0 0; width: auto;}
  .section_material .figure{ margin: 0; flex: 0 0; width: auto; padding: 125% 0 0 0; position: relative;}
  .section_material .figure figure{ margin: 0; position: absolute; top: 0; left: 0; }
  .section_material h3{ text-align: center; font-size: 118%;}
  .section_material h4{ text-align: center; font-size: 108%; font-weight: bold;}
  
  .asset32{ width: 70%; margin: 0 auto;}
  .mt04_asset01{ width: 60%; margin: 0 auto;}
}

.section_footer{ margin: 0; padding: 4.0rem; text-align: center;}
.section_footer h3{ width: 64px; margin: 0 auto;}
.section_footer h2{ margin: 1.5em 0 0 0; font-size: 187%; font-weight: 200;}
.section_footer a{ text-decoration: none;}
@media screen and ( max-width: 480px ) {
  .section_footer{ margin: 0; padding: 0;}
  .section_footer h3{ width: 12%}
  .section_footer h2{ font-size: 146%;}
  .section_footer p{ font-size: 86%;}
}