body {
  color: #333333;
  background-color: #66A2AD;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, Verdana, 'メイリオ', Meiryo, sans-serif;
  /* GoogleChromeのバグ対策 */
  font-weight: 500;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  
}

.logo {
  width: 12.5%;
  min-height: 79.5px;
  min-width: 100px;
  margin-left: 40px;
}

.drawer-navbar {
  background-color: transparent;
  border: none;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  background-color: #666;
  height: 1px;
}

.drawer-hamburger {
  padding-top: 40px;
  padding-right: 40px;
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 0px;
}

.drawer-nav {
  background: transparent;
}

.drawer-overlay {
  background-color: rgba(237, 155, 89, 0.9);
}

  .drawer-menu-item{
  font: Yu Gothic;
  color:black ;
  font-size: 1rem;
}



h1 {
  font: Yu Gothic;
  font-weight: 500;
  color: lightgray;
  font-size: 1rem;
  margin-left: 10px;
  margin-top: 20px;
}

.line {
  border-top: 1px solid #98A6B5;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}


.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.25fr 1fr 0.25fr 0.25fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.25fr 0.25fr 0.25fr 0.25fr 0.25fr;
  gap: 0px 0px;
  grid-template-areas:
    "message_title"
    "message_text"
    "rinen_title"
    "rinen_text"
    "gaiyou"
    "syogo_title"
    "syogo_text"
    "syozai_title"
    "syozai_text"
    "ceo_title"
    "ceo_text"
    "esta_title"
    "esta_text"
    "sihon_title"
    "sihon_text"
    "kyoka_title"
    "kyoka_text"
    "bank_title"
    "bank_text"
    "jigyo_title"
    "jigyo_text"
    "torihiki_title"
    "torihiki_text"
    "kanyu_title"
    "kanyu_text";
}

.message_title {
  grid-area: message_title;
}

.message_text {
  grid-area: message_text;
}

.rinen_title {
  grid-area: rinen_title;
}

.rinen_text {
  grid-area: rinen_text;
}

.gaiyou {
  grid-area: gaiyou;
}

.syogo_title {
  grid-area: syogo_title;
}

.syogo_text {
  grid-area: syogo_text;
}

.syozai_title {
  grid-area: syozai_title;
}

.syozai_text {
  grid-area: syozai_text;
}

.ceo_title {
  grid-area: ceo_title;
}

.ceo_text {
  grid-area: ceo_text;
}

.esta_title {
  grid-area: esta_title;
}

.esta_text {
  grid-area: esta_text;
}

.sihon_title {
  grid-area: sihon_title;
}

.sihon_text {
  grid-area: sihon_text;
}

.kyoka_title {
  grid-area: kyoka_title;
}

.kyoka_text {
  grid-area: kyoka_text;
}

.bank_title {
  grid-area: bank_title;
}

.bank_text {
  grid-area: bank_text;
}

.jigyo_title {
  grid-area: jigyo_title;
}

.jigyo_text {
  grid-area: jigyo_text;
}

.torihiki_title {
  grid-area: torihiki_title;
}

.torihiki_text {
  grid-area: torihiki_text;
}

.kanyu_title {
  grid-area: kanyu_title;
}

.kanyu_text {
  grid-area: kanyu_text;
}


.message_title,
.rinen_title,
.gaiyou,
.torihiki_title,
.kanyu_title {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 30px;
  color: white;
  display: block;
  align-items: flex-start;
  text-align: start;
  border-bottom: solid 1px white;
}

.message_text,
.rinen_text,
.syogo_text,
.syozai_text,
.ceo_text,
.esta_text,
.sihon_text,
.kyoka_text,
.bank_text,
.jigyo_text,
.torihiki_text,
.kanyu_text {
  font-size: 0.9rem;
  color: white;
  font-weight: 200;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  align-items: flex-start;
  text-decoration: none;
}

.syogo_title,
.syozai_title,
.ceo_title,
.esta_title,
.sihon_title,
.kyoka_title,
.bank_title,
.jigyo_title {
  font-size: 1rem;
  color: white;
  font-weight: 400;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  align-items: flex-start;
}

.rightimg02 {
  text-align: right;
}

.images2 {
  max-width: 180px;
  margin-right: 10px;
}

footer {
  text-align: center;
  font: YuGothic;
  font-size: 0.6rem;
  color: #727171;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

@media(min-width: 360px) {
  .grid-container {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    grid-template-rows: 0.25fr 0.5fr 0.25fr 0.25fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.15fr 0.25fr 0.25fr 0.25fr 0.25fr 0.25fr 0.25fr;
    gap: 0px 0px;
    grid-template-areas:
      "message_title message_title"
      "message_text message_text"
      "rinen_title rinen_title"
      "rinen_text rinen_text"
      "gaiyou gaiyou"
      "syogo_title syogo_title"
      "syogo_text syogo_text"
      "syozai_title syozai_title"
      "syozai_text syozai_text"
      "ceo_title ceo_title"
      "ceo_text ceo_text"
      "esta_title esta_title"
      "esta_text esta_text"
      "sihon_title sihon_title"
      "sihon_text sihon_text"
      "kyoka_title kyoka_title"
      "kyoka_text kyoka_text"
      "bank_title bank_title"
      "bank_text bank_text"
      "jigyo_title jigyo_title"
      "jigyo_text jigyo_text"
      "torihiki_title torihiki_title"
      "torihiki_text torihiki_text"
      "kanyu_title kanyu_title"
      "kanyu_text kanyu_text";
  }
  
  .message_title {
    grid-area: message_title;
  }

  .message_text {
    grid-area: message_text;
  }

  .rinen_title {
    grid-area: rinen_title;
  }

  .rinen_text {
    grid-area: rinen_text;
  }

  .gaiyou {
    grid-area: gaiyou;
  }

  .syogo_title {
    grid-area: syogo_title;
  }

  .syogo_text {
    grid-area: syogo_text;
  }

  .syozai_title {
    grid-area: syozai_title;
  }

  .syozai_text {
    grid-area: syozai_text;
  }

  .ceo_title {
    grid-area: ceo_title;
  }

  .ceo_text {
    grid-area: ceo_text;
  }

  .esta_title {
    grid-area: esta_title;
  }

  .esta_text {
    grid-area: esta_text;
  }

  .sihon_title {
    grid-area: sihon_title;
  }

  .sihon_text {
    grid-area: sihon_text;
  }

  .kyoka_title {
    grid-area: kyoka_title;
  }

  .kyoka_text {
    grid-area: kyoka_text;
  }

  .bank_title {
    grid-area: bank_title;
  }

  .bank_text {
    grid-area: bank_text;
  }

  .jigyo_title {
    grid-area: jigyo_title;
  }

  .jigyo_text {
    grid-area: jigyo_text;
  }

  .torihiki_title {
    grid-area: torihiki_title;
  }

  .torihiki_text {
    grid-area: torihiki_text;
  }


  .kanyu_title {
    grid-area: kanyu_title;
  }

  .kanyu_text {
    grid-area: kanyu_text;
  }

  .message_title,
  .rinen_title,
  .gaiyou,
  .torihiki_title,
  .kanyu_title {
    font-size: 1rem;
    font-weight: 500;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 30px;
    color: white;
    display: block;
    align-items: flex-start;
    text-align: end;
    border-bottom: solid 1px white;
  }

  .message_text,
  .rinen_text,
  .syogo_text,
  .syozai_text,
  .ceo_text,
  .esta_text,
  .sihon_text,
  .kyoka_text,
  .bank_text,
  .jigyo_text,
  .torihiki_text,
  .kanyu_text {
    font-size: 0.9rem;
    color: white;
    font-weight: 200;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    align-items: flex-start;
  }

  .syogo_title,
  .syozai_title,
  .ceo_title,
  .esta_title,
  .sihon_title,
  .kyoka_title,
  .bank_title,
  .jigyo_title {
    font-size: 1rem;
    color: white;
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    align-items: flex-start;
  }

  
    .images2 {
  max-width: 180px;
  margin-right: 10px;
}
  
}

@media(min-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 170px 170px 3fr;
    grid-template-rows: 1.2fr 0.2fr 0.2fr 0.5fr 0.2fr 0.2fr 0.2fr 0.35fr 0.4fr 1.25fr 0.3fr 1.35fr;
    gap: 0px 0px;
    grid-template-areas:
      "message_title message_text message_text"
      "rinen_title rinen_text rinen_text"
      "gaiyou syogo_title syogo_text"
      "gaiyou syozai_title syozai_text"
      "gaiyou ceo_title ceo_text"
      "gaiyou esta_title esta_text"
      "gaiyou sihon_title sihon_text"
      "gaiyou kyoka_title kyoka_text"
      "gaiyou bank_title bank_text"
      "gaiyou jigyo_title jigyo_text"
      "torihiki_title torihiki_text torihiki_text"
      "kanyu_title kanyu_text kanyu_text";
  }

  .message_title {
    grid-area: message_title;
  }

  .message_text {
    grid-area: message_text;
  }

  .rinen_title {
    grid-area: rinen_title;
  }

  .rinen_text {
    grid-area: rinen_text;
  }

  .syogo_title {
    grid-area: syogo_title;
  }

  .syogo_text {
    grid-area: syogo_text;
  }

  .syozai_title {
    grid-area: syozai_title;
  }

  .syozai_text {
    grid-area: syozai_text;
  }

  .ceo_title {
    grid-area: ceo_title;
  }

  .ceo_text {
    grid-area: ceo_text;
  }

  .esta_title {
    grid-area: esta_title;
  }

  .esta_text {
    grid-area: esta_text;
  }

  .sihon_title {
    grid-area: sihon_title;
  }

  .sihon_text {
    grid-area: sihon_text;
  }

  .kyoka_title {
    grid-area: kyoka_title;
  }

  .kyoka_text {
    grid-area: kyoka_text;
  }

  .bank_title {
    grid-area: bank_title;
  }

  .bank_text {
    grid-area: bank_text;
  }

  .jigyo_title {
    grid-area: jigyo_title;
  }

  .jigyo_text {
    grid-area: jigyo_text;
  }

  .gaiyou {
    grid-area: gaiyou;
  }

  .torihiki_title {
    grid-area: torihiki_title;
  }

  .torihiki_text {
    grid-area: torihiki_text;
  }


  .kanyu_title {
    grid-area: kanyu_title;
  }

  .kanyu_text {
    grid-area: kanyu_text;
  }


  .logo {
    width: 12.5%;
    min-height: 79.5px;
    min-width: 100px;
    margin-left: 40px;
  }

  h1 {
    font: Yu Gothic;
    font-weight: 400;
    color: white;
    font-size: 1.5rem;
    margin-left: 40px;
    margin-top: 50px;
  }

  .line {
    border-top: 1px solid #98A6B5;
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
  }

  .title_main_A {
    margin: 10px auto auto 0px;
  }

  .message_title,
  .rinen_title,
  .gaiyou,
  .torihiki_title,
  .kanyu_title {
    font-size: 1rem;
    margin-left: 40px;
    margin-right: 0px;
    color: white;
    display: block;
    align-items: flex-start;
    text-align: start;
    padding-top: 0px;
    border-bottom: solid 1px #98A6B5;
  }

  .syogo_title,
  .syozai_title,
  .ceo_title,
  .esta_title,
  .sihon_title,
  .kyoka_title,
  .bank_title,
  .jigyo_title {
    font-size: 1rem;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    color: white;
    display: flex;
    align-items: flex-start;
    text-align: left;
    border-bottom: solid 1px #98A6B5;
  }

  .message_text,
  .rinen_text,
  .syogo_text,
  .syozai_text,
  .ceo_text,
  .esta_text,
  .sihon_text,
  .kyoka_text,
  .bank_text,
  .jigyo_text,
  .torihiki_text,
  .kanyu_text {
    font-size: 1rem;
    color: white;
    margin-left: 0px;
    margin-right: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;
    align-items: flex-start;
    text-align: start;
    border-bottom: solid 1px #98A6B5;
  }
  
    .images2 {
  max-width: 300px;
  margin-right: 10px;
}
  
}

@media(min-width: 900px) {
  .grid-container {
    display: grid;
    grid-template-columns: 170px 170px 3fr;
    grid-template-rows: 2.25fr 0.75fr 0.75fr 1.25fr 0.75fr 0.75fr 0.75fr 1fr 1.25fr 3.5fr 1fr 4fr;
    gap: 0px 0px;
    grid-template-areas:
      "message_title message_text message_text"
      "rinen_title rinen_text rinen_text"
      "gaiyou syogo_title syogo_text"
      "gaiyou syozai_title syozai_text"
      "gaiyou ceo_title ceo_text"
      "gaiyou esta_title esta_text"
      "gaiyou sihon_title sihon_text"
      "gaiyou kyoka_title kyoka_text"
      "gaiyou bank_title bank_text"
      "gaiyou jigyo_title jigyo_text"
      "torihiki_title torihiki_text torihiki_text"
      "kanyu_title kanyu_text kanyu_text";
  }


  .message_title {
    grid-area: message_title;
  }

  .message_text {
    grid-area: message_text;
  }

  .rinen_title {
    grid-area: rinen_title;
  }

  .rinen_text {
    grid-area: rinen_text;
  }

  .syogo_title {
    grid-area: syogo_title;
  }

  .syogo_text {
    grid-area: syogo_text;
  }

  .syozai_title {
    grid-area: syozai_title;
  }

  .syozai_text {
    grid-area: syozai_text;
  }

  .ceo_title {
    grid-area: ceo_title;
  }

  .ceo_text {
    grid-area: ceo_text;
  }

  .esta_title {
    grid-area: esta_title;
  }

  .esta_text {
    grid-area: esta_text;
  }

  .sihon_title {
    grid-area: sihon_title;
  }

  .sihon_text {
    grid-area: sihon_text;
  }

  .kyoka_title {
    grid-area: kyoka_title;
  }

  .kyoka_text {
    grid-area: kyoka_text;
  }

  .bank_title {
    grid-area: bank_title;
  }

  .bank_text {
    grid-area: bank_text;
  }

  .jigyo_title {
    grid-area: jigyo_title;
  }

  .jigyo_text {
    grid-area: jigyo_text;
  }

  .gaiyou {
    grid-area: gaiyou;
  }


  .torihiki_title {
    grid-area: torihiki_title;
  }

  .torihiki_text {
    grid-area: torihiki_text;
  }

  .kanyu_title {
    grid-area: kanyu_title;
  }

  .kanyu_text {
    grid-area: kanyu_text;
  }


  .logo {
    width: 12.5%;
    min-height: 79.5px;
    min-width: 100px;
    margin-left: 40px;
  }

  h1 {
    font: Yu Gothic;
    font-weight: 400;
    color: white;
    font-size: 1.5rem;
    margin-left: 40px;
    margin-top: 50px;
  }

  .line {
    border-top: 1px solid #98A6B5;
    margin: 20px 40px 10px;
  }

  .title_main_A {
    margin: 10px auto auto 0px;
  }

  .message_title,
  .rinen_title,
  .gaiyou,
  .torihiki_title,
  .kanyu_title {
    font-size: 1rem;
    margin-left: 40px;
    color: white;
    display: block;
    align-items: center;
    text-align: start;
    border-bottom: solid 1px #98A6B5;
  }

  .syogo_title,
  .syozai_title,
  .ceo_title,
  .esta_title,
  .sihon_title,
  .kyoka_title,
  .bank_title,
  .jigyo_title {
    font-size: 1rem;
    margin-left: 0px;
    color: white;
    display: flex;
    align-items: center;
    text-align: left;
    border-bottom: solid 1px #98A6B5;
  }

  .message_text,
  .rinen_text,
  .syogo_text,
  .syozai_text,
  .ceo_text,
  .esta_text,
  .sihon_text,
  .kyoka_text,
  .bank_text,
  .jigyo_text,
  .torihiki_text,
  .kanyu_text {
    font-size: 1rem;
    color: white;
    margin-left: 0px;
    margin-right: 40px;
    display: block;
    align-items: center;
    text-align: start;
    border-bottom: solid 1px #98A6B5;
  }
}

@media (min-width: 1024px) {
  .drawer-navbar-header {
    z-index: 3;
  }
  
  .drawer-menu-item{
  font: Yu Gothic;
  color:black ;
  font-size: 1.2rem;
}
}


@media (min-width: 2560px) {
  .container {
    max-width: 1920px;
    margin: 0 auto;

  }

  .drawer-navbar-header {
    z-index: 3;
  }

  .adjust-space {
    margin-top: 50px;
  }
}