@charset "UTF-8";

/* トップページメインビジュアルのスライダーのアニメーション、キャッチコピー調整は790行目あたりのコードで調整可能 */

/*=================================================================
  font
  ================================================================= */
/* 全体のフォント設定 macはヒラギノ WindowsはNoto Sans Jp */
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Jp",
    sans-serif;
}

/* 欧文書体用 macはHelvetica WindowsはArial */
.font_helvetica {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/*=================================================================
  common
  ================================================================= */
body {
  background-color: #f0f2f5;
}

p {
  font-size: 16px;
  font-weight: 300;
  line-height: 27px;
}

img,
picture {
  width: 100%;
  height: auto;
}

ol {
  list-style-type: decimal;
  list-style-position: inside;
  line-height: 27px;
}

a {
  transition: 0.1s;
}

a:hover {
  opacity: 0.6;
}

@media (max-width: 440px) {
  p {
    font-size: 14px;
    line-height: 25px;
  }

  figcaption {
    font-size: 14px;
  }
}

/*パディング右左 横幅1600pxの時、およそ130pxの余白が基準 */
.top_wrap_padding {
  padding-right: 8.1%;
  padding-left: 8.1%;
  padding-top: 130px;
  padding-bottom: 130px;
}

.side_padding {
  padding-right: 8.1%;
  padding-left: 8.1%;
}

.wrap_padding {
  padding-top: 200px;
  padding-bottom: 200px;
}

/*パディング右左 横幅768pxの時、およそ50pxの余白が基準 */
@media (max-width: 834px) {
  .top_wrap_padding {
    padding-right: 6.5%;
    padding-left: 6.5%;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .side_padding {
    padding-right: 0;
    padding-left: 0;
  }

  .wrap_padding {
    padding-right: 6.5%;
    padding-left: 6.5%;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/*パディング右左 横幅375pxの時、およそ30pxの余白が基準 */
@media (max-width: 440px) {
  .top_wrap_padding {
    padding-right: 8.5%;
    padding-left: 8.5%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .wrap_padding {
    padding-right: 8.5%;
    padding-left: 8.5%;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* ボタン */
.link_button {
  color: #1e3a5f;
  width: 300px;
  height: 85px;
  padding-right: 15px;
  padding-left: 50px;
  border: 1px solid #1e3a5f;
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 1px 1px 1px rgba(30, 58, 95, 0.16);
  margin: 0 auto;
  transition: 0.4s;
}

.link_button p {
  font-weight: 600;
}

.button_icon {
  width: 63px;
}

.link_button:hover {
  opacity: 1;
  background-color: #fff;
}

@media (max-width: 834px) {
  .link_button {
    width: 200px;
    height: 55px;
    padding-right: 10px;
    padding-left: 30px;
  }

  .link_button p {
    font-size: 13px !important;
  }

  .button_icon {
    width: 41px;
  }
}

/* 今いるページのライン */
.active_line {
  position: relative;
}

.active_line::after {
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
}

/*=================================================================
  heading
  ================================================================= */
h1 {
  font-weight: 600;
  font-size: 36px;
}

h2 {
  font-weight: 600;
  font-size: 36px;
  margin-bottom: 60px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
}

h4 {
  font-weight: 600;
  margin-bottom: 20px;
}

h1 span,
h2 span {
  font-family: "Helvetica", "Arial", sans-serif;
  display: block;
  font-size: 18px;
  margin-bottom: 20px;
}

h2 span {
  font-weight: normal;
}

h1,
.content_wrap h1,
.content_wrap h2,
.guide h2 {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
}

.content_wrap h1,
.content_wrap h2 {
  font-size: 48px;
  margin-bottom: 40px;
}

.content_wrap h1 span,
.content_wrap h2 span {
  font-size: 25px;
}

/* トップページ */
.top_main h2 span {
  font-weight: bold;
}

.top_information h2 span {
  font-weight: normal;
}

/* お知らせページ */
.news_main h1 {
  text-shadow: none;
}

.news_main h1 span {
  font-weight: normal;
}

.news_main h2 {
  font-size: 20px;
}

@media (max-width: 834px) {
  h2 {
    font-size: 28px;
    margin-bottom: 40px;
  }

  h3 {
    font-size: 18px;
    margin-bottom: 40px;
  }

  .content_wrap h1,
  .content_wrap h2,
  .guide h1,
  .guide h2 {
    font-size: 32px;
    margin-bottom: 30px;
  }

  .content_wrap h1 span,
  .content_wrap h2 span,
  .guide h1 span {
    font-size: 20px;
  }
}

@media (max-width: 440px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 18px;
    margin-bottom: 30px;
  }

  h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  h1 span {
    font-size: 22px;
  }

  h2 span {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_wrap h1,
  .content_wrap h2,
  .guide h1,
  .guide h2 {
    font-size: 24px;
  }

  .content_wrap h1 span,
  .content_wrap h2 span,
  .guide h1 span,
  .guide h2 span {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .news_main h1 {
    font-size: 18px;
  }

  .news_main h1 span {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .news_main h2 {
    font-size: 16px;
  }
}

/*=================================================================
  common anime
  ================================================================= */
/* フェードイン */
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* オープニング */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: white;
  text-align: center;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo img {
  width: 70%;
}

.fadeInOp {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@media (max-width: 834px) {
  #splash_logo img {
    width: 100%;
  }
}

/* フェードアップ */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpTrigger {
  opacity: 0;
}

/*=================================================================
  swiper
  ================================================================= */
.swiper {
  width: 100%;
  height: auto;
  align-self: start;
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background-color: #ededed;
  opacity: 1;
  border: 3px solid #fff;
}

.swiper-pagination-bullet-active {
  background-color: #1e3a5f;
}

@media (max-width: 440px) {
  .swiper {
    width: 100vw;
    margin-left: calc(((100vw - 100%) / 2) * -1);
  }
}

/*=================================================================
  header
  ハンバーガーメニュー z-index設定
  ヘッダー100 メニュー200  ボタン250
  ================================================================= */
header {
  position: sticky;
  top: 0;
  width: 100%;
  padding-right: 8.1%;
  padding-left: 8.1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f2f5;
  z-index: 100;
  transition: all 0.6s;
}

.news_header {
  border-bottom: 2px solid #707070;
}

.top_header {
  position: fixed;
  top: 0;
  border-bottom: none;
  background-color: transparent;
}

.logo {
  max-width: 495px;
}

header nav {
  position: fixed;
  background-color: #f0f2f5;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow-y: scroll;
  opacity: 0;
  transform: translateX(100vw);
  transition: all 1.4s;
  transition-delay: 0.7s;
  z-index: 200;
}

header nav.open {
  opacity: 1;
  transform: translateX(0);
  transition: all 1s;
}

.hamburger_btn {
  display: block;
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 20px;
  z-index: 250;
}

.hamburger_btn span {
  display: inline-block;
  transition: all 0.6s;
  position: absolute;
  width: 60px;
  height: 3px;
  background: #000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.top_hamburger span {
  background: #fff;
}

.hamburger_btn span:nth-of-type(1) {
  top: -20px;
}

.hamburger_btn span:nth-of-type(3) {
  top: 20px;
}

.hamburger_btn.active span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 60px;
  background: #000;
}

.hamburger_btn.active span:nth-of-type(2) {
  opacity: 0; /*真ん中の線は透過*/
}

.hamburger_btn.active span:nth-of-type(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 60px;
  background: #000;
}

.nav_inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  opacity: 0;
  transition: all 0.7s;
}

.nav_inner.open {
  opacity: 1;
  transition: all 0.7s;
  transition-delay: 1s;
}

.nav_logo {
  width: 220px;
}

.nav_list ul {
  margin-bottom: 30px;
}

.nav_list ul li {
  margin-bottom: 8px;
}

.nav_list ul li:first-of-type {
  font-size: 18px;
  font-weight: 600;
}

.inline_wrap {
  display: inline-block;
}

.nav_sns {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav_sns_icon {
  width: 48px;
}

/* 背景黒塗り透過 */
header.change {
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.6s;
}

@media (max-width: 834px) {
  header {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .logo {
    max-width: 360px;
  }

  header nav {
    width: 375px;
  }

  .hamburger_btn span {
    width: 30px;
  }

  .hamburger_btn.active span:nth-of-type(1) {
    width: 30px;
  }

  .hamburger_btn.active span:nth-of-type(3) {
    width: 30px;
  }
}

@media (max-width: 440px) {
  header {
    padding-right: 8.5%;
    padding-left: 8.5%;
  }

  .logo {
    max-width: 245px;
  }

  .hamburger_btn {
    width: 20px;
  }

  .hamburger_btn span {
    width: 20px;
  }

  .hamburger_btn.active span:nth-of-type(1) {
    width: 20px;
  }

  .hamburger_btn.active span:nth-of-type(3) {
    width: 20px;
  }

  .nav_list ul {
    margin-bottom: 40px;
  }

  .nav_list ul li {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .nav_list ul li:first-of-type {
    font-size: 16px;
  }
}

/*=================================================================
  footer
  ================================================================= */
footer {
  border-top: 2px solid #707070;
  padding-top: 60px;
  padding-bottom: 80px;
  padding-right: 12.5%;
  padding-left: 12.5%;
}

.logo_box {
  margin-bottom: 50px;
}

.logo_box div p {
  display: inline-block;
  margin-right: 10px;
}

.logo_footer {
  max-width: 364px;
}

.footer_nav_list {
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  column-gap: 20px;
  margin: 0 auto 85px;
}

.footer_nav_list ul li {
  margin-bottom: 8px;
  position: relative;
}

.footer_nav_list ul li:first-of-type {
  font-weight: 600;
}

.copyright {
  text-align: center;
  font-size: 12px;
}

/* メニューのラインアニメーション */
.footer_nav_list li a::after {
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  transition: all 0.4s;
  transform: scale(0, 1);
  transform-origin: left top;
}

.footer_nav_list li a:hover::after {
  transform: scale(1, 1);
}

@media (max-width: 834px) {
  footer {
    padding-top: 30px;
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .logo_box p {
    font-size: 12px;
  }

  .footer_nav_list {
    margin-bottom: 60px;
  }

  footer ul li {
    font-size: 12px;
  }
}

@media (max-width: 440px) {
  .logo_footer {
    max-width: 260px;
  }

  .footer_nav_list {
    grid-template-columns: 1fr;
  }

  .footer_nav_list li a::after {
    width: 50%;
  }

  .footer_nav_list ul li {
    margin-bottom: 25px;
  }
}

/*=================================================================
  main visual
  ================================================================= */
/* トップページ */
.mainVisual {
  width: 100%;
  height: 100svh;
  min-height: 667px;
  position: relative;
  overflow: hidden;
}

/* トップページメインビジュアルの切り替わり用アニメ
    @keyframes img_cahngeのscale数値調整でズームアウト、ズームインの調整可能
    .img_mainVisualの「animation: img_change 18s infinite;」の18sと、各.img_mainVisual:nth-of-typeの数値変更で切り替わりスピードの調整可能

    現在の設定
    1つのスライドが18秒かけて表示⇀ズームアウト⇀非表示のアニメーションを行うように設定
    1枚目が表示される⇀6秒後に2枚目が表示される⇀12秒後に3枚目が表示される
    3枚目が表示された6秒後に再び1枚目が表示されるという重なりでループさせています
    つまり1枚18秒、「スライドの表示時間6秒×スライド3枚=18」となり均等のスピードで切り替わっているように見える仕組みです
    例えば1枚24秒、「スライドの表示時間8秒×スライド3枚=24」にすれば切り変わり速度は遅くなります
*/
@keyframes img_change {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

.img_mainVisual {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: img_change 18s infinite;
}

.img_src1 {
  background-image: url(../images/slider/winter/pc/winter_slider_harvester.jpg);
}

.img_src2 {
  background-image: url(../images/slider/winter/pc/winter_slider_forester.jpg);
}

.img_src3 {
  background-image: url(../images/slider/winter/pc/winter_slider_drone.jpg);
}

.img_mainVisual:nth-of-type(1) {
  animation-delay: 0s;
}

.img_mainVisual:nth-of-type(2) {
  animation-delay: 6s;
}

.img_mainVisual:nth-of-type(3) {
  animation-delay: 12s;
}

/*
  メインビジュアルキャッチコピーのサイズ 横幅1600pxの時、64pxが基準
  位置はposition: absoluteで固定、top, left, translateYの数値で位置変更可能
  画面幅にあわせて変動させたいのでfont-sizeはvwで指定、vwの数値変更でサイズ変更可能
*/
.mainVisual_copy {
  position: absolute;
  top: 50%;
  left: 8.1%;
  transform: translateY(-50%);
}

.mainVisual_copy p {
  color: #fff;
  font-size: 4vw !important;
  line-height: 2; /* 行の高さを2倍にする */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

@media (max-width: 834px) {
  .mainVisual_copy {
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* メインビジュアルキャッチコピーのサイズ 横幅768pxの時、48pxが基準*/
  .mainVisual_copy p {
    font-size: 6.25vw !important;
    white-space: nowrap;
  }
}

@media (max-width: 440px) {
  .mainVisual_copy {
    top: 32%;
  }

  /* メインビジュアルキャッチコピーのサイズ 横幅375pxの時、30pxが基準*/
  .mainVisual_copy p {
    font-size: 8vw !important;
  }
}

/*=================================================================
  top
  ================================================================= */
.top_main,
.top_main p {
  font-size: 20px;
}

.top_information {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  padding-bottom: 0;
}

.top_information_list li {
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #848484;
}

.top_information_list li:first-of-type {
  padding-top: 0;
}

.top_information_list li a {
  display: block;
  position: relative;
}

.top_information_list li h3 {
  margin-bottom: 30px;
  font-weight: normal;
  display: inline-block;
  position: relative;
}

.top_information_list li p {
  font-size: 12px;
  color: #767676;
  font-family: "Helvetica", "Arial", sans-serif;
}

.top_information_list li p::after {
  content: ">>";
  margin-left: 5px;
}

/* ラインアニメーション */
.top_information_list li a h3::after {
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  background-color: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  transition: all 0.4s;
  transform: scale(0, 1);
  transform-origin: left top;
}

.top_information_list li a:hover h3::after {
  transform: scale(1, 1);
}

.spacer {
  width: 100%;
  height: 130px;
}

.spacer:last-of-type {
  height: 200px;
}

/* 組織概要・事業内容・総合情報のセクションは各ページにも流用 */
.content_wrap {
  height: 823px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overview {
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../images/content_bg/pc/bg_mountain_01.jpg);
  background-size: cover;
  background-position: center center;
}

@supports (
  background-image: url("../images/content_bg/pc/bg_mountain_01.jpg")
) {
  .overview {
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/pc/bg_mountain_01.jpg);
    background-size: cover;
    background-position: center center;
  }
}

.business {
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../images/content_bg/pc/bg_mokuzai_01.jpg);
  background-size: cover;
  background-position: center center;
}

@supports (background-image: url("../images/content_bg/pc/bg_mokuzai_01.jpg")) {
  .business {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/pc/bg_mokuzai_01.jpg);
    background-size: cover;
    background-position: center center;
  }
}

.guide {
  height: 560px;
  text-align: start;
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../images/content_bg/pc/bg_karamatsu_01.jpg);
  background-size: cover;
  background-position: center center;
}

@supports (
  background-image: url("../images/content_bg/pc/bg_karamatsu_01.jpg")
) {
  .guide {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/pc/bg_karamatsu_01.jpg);
    background-size: cover;
    background-position: center center;
  }
}

.top_guide_inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 20px;
}

.text_box {
  margin-bottom: 40px;
}

.text_box p {
  line-height: 45px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
}

.top_guide_inner .text_box p {
  line-height: 30px;
}

@media (max-width: 834px) {
  .top_main,
  .top_main p {
    font-size: 16px;
  }

  .top_information {
    grid-template-columns: 1fr;
  }

  .top_information_list li {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .top_information_list li h3 {
    margin-bottom: 20px;
  }

  .content_wrap {
    height: 520px;
  }

  .spacer {
    height: 60px;
  }

  .spacer:last-of-type {
    height: 100px;
  }

  .guide {
    height: 520px;
  }

  .top_guide_inner {
    display: block;
    text-align: center;
  }

  .top_guide_inner .text_box p {
    line-height: 45px;
  }

  .overview {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/tb/bg_mountain_01_tb@2x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_mountain_01_tb@2x.jpg")
  ) {
    .overview {
      background-image: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/tb/bg_mountain_01_tb@2x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }

  .business {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/tb/bg_mokuzai_01_tb@2x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_mokuzai_01_tb@2x.jpg")
  ) {
    .business {
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/tb/bg_mokuzai_01_tb@2x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }

  .guide {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/tb/bg_karamatsu_01_tb@2x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_karamatsu_01_tb@2x.jpg")
  ) {
    .guide {
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/tb/bg_karamatsu_01_tb@2x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

@media (max-width: 440px) {
  .content_wrap {
    height: 600px;
    padding-right: 8.5%;
    padding-left: 8.5%;
  }

  .content_wrap p {
    text-align: justify;
    font-size: 16px;
  }

  .spacer {
    height: 80px;
  }

  .spacer:last-of-type {
    height: 80px;
  }

  .guide {
    height: 600px;
  }

  .text_box {
    margin-bottom: 100px;
  }

  .top_guide_inner .text_box p {
    text-align: justify;
  }

  .text_box p,
  .top_guide_inner .text_box p {
    line-height: 38px;
  }

  .overview {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/sp/bg_mountain_01_sp@3x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/sp/bg_mountain_01_sp@3x.jpg")
  ) {
    .overview {
      background-image: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/sp/bg_mountain_01_sp@3x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }

  .business {
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/sp/bg_mokuzai_01_sp@3x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_mokuzai_01_sp@3x.jpg")
  ) {
    .business {
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/sp/bg_mokuzai_01_sp@3x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }

  .guide {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/sp/bg_karamatsu_01_sp@3x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/sp/bg_karamatsu_01_sp@3x.jpg")
  ) {
    .guide {
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/sp/bg_karamatsu_01_sp@3x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

/*=================================================================
  news
  ================================================================= */
.news_main {
  padding-top: 5em;
  padding-right: 8.1%;
  padding-left: 8.1%;
}

/* 総合情報ページの活動報告にも流用 */
.article_wrap {
  padding-top: 130px;
  padding-bottom: 130px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #707070;
}

.article_wrap:last-of-type {
  padding-bottom: 200px;
  border-bottom: none;
}

.article_text_box {
  padding-right: 20px;
}

.article_text_box h1 {
  margin-bottom: 60px;
}

.article_text_box time {
  display: block;
  font-size: 13px;
  margin-bottom: 20px;
}

.article_text_box h2 {
  margin-bottom: 30px;
}

.article_text_box p {
  margin-bottom: 30px;
}

.article_text_box a {
  font-size: 14px;
  font-weight: 600;
  color: #1e3a5f;
  display: block;
  margin-bottom: 20px;
}
.article_text_box a.linkPdf {
  display: inline-block;
}

.article_text_box a:last-of-type {
  margin-bottom: 0;
}

.article_text_box a::after {
  content: ">>";
  margin-left: 5px;
}

.article_text_box a .icnPdf {
  position: relative;
  top: 0.2em;
  width: 1.4em;
  margin-right: 0.2em;
}

.boxNewsPdf {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.boxNewsPdf + .pNewsLink {
  margin-top: 2.0em;
}

@media (max-width: 834px) {
  .article_text_box p.pNewsLink {
    margin-bottom: 0;
  }
}

.boxNewsImg .boxImg {
  text-align: center;
}

.boxNewsImg .boxImg .caption {
  margin-top: 0.5em;
  font-size: 0.9rem;
}
@media (max-width: 834px) {
  .boxNewsImg .boxImg .caption {
    line-height: 1.4;
    font-size: 0.85rem;
  }
}

.boxNewsImg .boxImg + .boxImg {
  margin-top: 2.0em;
}
@media (max-width: 834px) {
  .boxNewsImg .boxImg + .boxImg {
    margin-top: 1.5em;
  }
}

@media (max-width: 834px) {
  .news_main {
    padding-top: 3.0em;
    padding-right: 0;
    padding-left: 0;
  }

  .news_main h1,
  .news_main .article_wrap {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .article_wrap {
    padding-top: 60px;
    padding-bottom: 60px;
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .article_wrap:last-of-type {
    padding-bottom: 100px;
  }

  .article_text_box {
    padding-right: 0;
  }
}

@media (max-width: 440px) {
  .article_wrap {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .article_text_box h1 {
    margin-bottom: 30px;
  }

  .article_wrap:last-of-type {
    padding-bottom: 80px;
  }
}

/*=================================================================
  about
  ================================================================= */
.message_wrap,
.vision_wrap,
.chart_wrap,
.year_wrap {
  border-bottom: 1px solid #707070;
}

.year_wrap:last-of-type {
  border-bottom: none;
}

.message_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 100px;
}

.message_wrap picture {
  order: 2;
}

.about_main .message_wrap p {
  margin-bottom: 40px;
}

.vision_wrap div {
  margin-bottom: 40px;
}

.vision_wrap ul {
  margin-bottom: 30px;
}

.members_text_box {
  margin-top: 60px;
}

.history_wrap_inner {
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
}

.history_wrap h3 {
  font-size: 30px;
  margin-bottom: 30px;
}

.year_wrap {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 50px;
  padding-left: 50px;
}

.year_wrap p {
  display: inline-block;
}

.year_wrap_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6.25%;
}

.year_detail_box div {
  margin-bottom: 15px;
}

.year_detail_box div:last-of-type {
  margin-bottom: 0;
}

.access_wrap {
  padding-top: 0;
}

.address_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6.25%;
}

.address_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 50px;
}

.address_box div {
  margin-right: 3.1vw;
}

.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 834px) {
  .message_wrap {
    display: block;
  }

  .message_image {
    float: right;
    margin-top: 167px;
    margin-bottom: 30px;
    margin-left: 15px;
    width: 329px;
    max-width: 100%;
  }

  .about_main .message_wrap p {
    margin-bottom: 30px;
  }

  .chart_wrap {
    padding-right: 0;
    padding-left: 0;
  }

  .chart_wrap h2,
  .chart_wrap .members_text_box {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .members_image {
    width: 100%;
  }

  .members_text_box {
    margin-top: 30px;
  }

  .history_wrap {
    padding-right: 0;
    padding-left: 0;
  }

  .history_wrap h2 {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .year_wrap {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .year_wrap_inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 15px;
  }

  .address_wrap {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 100px;
  }

  .access_wrap {
    padding-bottom: 100px;
  }
}

@media (max-width: 440px) {
  .message_wrap,
  .access_wrap {
    padding-right: 0;
    padding-left: 0;
  }

  .message_text,
  .history_wrap h2,
  .year_wrap,
  .chart_wrap h2,
  .chart_wrap .members_text_box,
  .access_wrap h2,
  .access_wrap .address_text {
    padding-right: 8.5%;
    padding-left: 8.5%;
  }

  .message_image {
    float: none;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
    order: 2;
  }

  .message_wrap {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vision_wrap div {
    margin-bottom: 30px;
  }

  .vision_wrap h3 {
    font-size: 14px;
  }

  .vision_wrap ol li {
    font-size: 14px;
    line-height: 25px;
  }

  .history_wrap h3 {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .address_box {
    grid-template-columns: 1fr;
    row-gap: 30px;
    margin-bottom: 30px;
  }

  .address_box div {
    margin-right: 0;
  }

  .map {
    position: static;
    height: 600px;
    padding-top: 0;
  }

  .map iframe {
    position: static;
    top: auto;
    left: auto;
  }

  .access_wrap {
    padding-bottom: 80px;
  }
}

/*=================================================================
  business
  ================================================================= */
.business_main .wrap_padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.business_main .wrap_padding:first-of-type {
  padding-top: 200px;
}

.business_main .wrap_padding:last-of-type {
  padding-bottom: 300px;
}

.business_main .text_box {
  margin-bottom: 60px;
}

.image_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.1%;
  margin-bottom: 100px;
}

.image_box img {
  margin-bottom: 20px;
}

.detail_box {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-top: 17px;
  padding-bottom: 17px;
}

.detail_box h3 {
  margin-bottom: 17px;
}

@media (max-width: 834px) {
  .business_main .wrap_padding {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .business_main .wrap_padding:first-of-type {
    padding-top: 60px;
  }

  .business_main .wrap_padding:last-of-type {
    padding-bottom: 100px;
  }

  .business_main .text_box {
    margin-bottom: 40px;
  }

  .image_box {
    margin-bottom: 60px;
  }
}

@media (max-width: 440px) {
  .business_main .wrap_padding {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .business_main .text_box {
    margin-bottom: 30px;
  }

  .business_main .wrap_padding:first-of-type {
    padding-top: 50px;
  }

  .business_main .wrap_padding:last-of-type {
    padding-bottom: 80px;
  }

  .image_box {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
    margin-bottom: 50px;
  }

  .image_box img {
    margin-bottom: 10px;
  }
}

.image_box figcaption2 {
  display: block;
  margin-bottom: 40px; /* キャプションの下に40pxのマージン */
}

/*=================================================================
  info, link
  ================================================================= */
.info_main .guide,
.title_visual {
  padding-top: 90px;
  padding-right: 8.1%;
  padding-left: 8.1%;
}

.info_main .guide {
  display: flex;
  column-gap: 70px;
}

.info_main .guide h1 span {
  white-space: nowrap;
}

.info_main .guide p {
  font-size: 20px;
  line-height: 30px;
}

.info_main .article_wrap {
  padding-top: 200px;
  border-bottom: 1px solid #707070;
}

.info_main .article_wrap h2 {
  margin-bottom: 60px;
}

.pdf_wrap,
.link_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6.25%;
  border-bottom: 1px solid #707070;
}

.pdf_inner div {
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #000;
}

.pdf_inner div:first-of-type {
  border-top: 1px solid #000;
}

.pdf_wrap a {
  font-size: 20px;
  position: relative;
}

.pdf_wrap a::after {
  content: url(../images/icon/pdf_icon.png);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 20%;
}

.recruit_text_box {
  margin-bottom: 100px;
}

.recruit_text_box p {
  margin-bottom: 60px;
}

.recruit_wrap .title_box {
  display: flex;
  padding: 20px 40px;
  background-color: #1e3a5f;
  color: #fff;
  margin-bottom: 65px;
}

.recruit_wrap .title_box h4 {
  flex-shrink: 0;
  line-height: 27px;
  font-size: 22px;
  font-weight: 600;
  margin-right: 60px;
  margin-bottom: 0;
}

.recruit_wrap .title_box p {
  font-weight: 600;
}

table {
  width: 100%;
  margin-bottom: 70px;
}

td {
  border-bottom: 1px solid #707070;
  padding: 30px 40px;
}

td:first-of-type,
td:nth-child(2) {
  border-top: 1px solid #707070;
}

tr td:first-of-type {
  font-weight: 600;
  white-space: nowrap;
}

.recruit_list {
  padding-right: 40px;
  padding-left: 40px;
}

.recruit_list li {
  margin-bottom: 20px;
}

.recruit_list ol li:last-of-type {
  margin-bottom: 0;
}

.info_main section:last-of-type {
  padding-bottom: 300px;
}

@media (max-width: 834px) {
  .info_main .article_wrap {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .info_main .guide {
    display: block;
    text-align: center;
  }

  .info_main .article_wrap {
    padding-top: 60px;
  }

  .info_main .article_wrap:last-of-type {
    padding-bottom: 60px;
  }

  .info_main .article_wrap h2 {
    margin-bottom: 30px;
  }

  .pdf_wrap,
  .link_wrap {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  .recruit_text_box {
    margin-bottom: 30px;
  }

  .recruit_text_box p {
    margin-bottom: 30px;
  }

  .info_main section:last-of-type {
    padding-bottom: 100px;
  }
}

@media (max-width: 440px) {
  .info_main .article_wrap {
    padding-right: 8.5%;
    padding-left: 8.5%;
  }

  .info_main .article_wrap {
    padding-top: 50px;
  }

  .info_main .article_wrap:last-of-type {
    padding-bottom: 50px;
  }

  .info_main .guide p {
    font-size: 16px;
    line-height: 38px;
  }

  .pdf_wrap a {
    font-size: 16px;
  }

  .recruit_wrap img {
    width: 100vw;
    margin-left: calc(((100vw - 100%) / 2) * -1);
  }

  .recruit_wrap h3 {
    font-size: 18px;
  }

  .recruit_text_box {
    margin-bottom: 60px;
  }

  .recruit_wrap .title_box {
    padding: 30px 15px;
  }

  .recruit_wrap .title_box h4 {
    font-size: 14px;
    margin-right: 30px;
  }

  .recruit_wrap p {
    font-size: 12px;
  }

  td {
    padding: 30px 15px;
    font-size: 11px;
  }

  .recruit_list {
    padding-right: 0;
    padding-left: 0;
  }

  .recruit_list h4 {
    font-size: 11px;
  }

  .recruit_list ol li {
    font-size: 11px;
  }

  .info_main section:last-of-type {
    padding-bottom: 80px;
  }
}

.link_bg {
  height: 560px;
  text-align: start;
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../images/content_bg/pc/bg_sahoroyama_01.jpg);
  background-size: cover;
  background-position: center center;
}

@supports (
  background-image: url("../images/content_bg/pc/bg_sahoroyama_01.jpg")
) {
  .link_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/pc/bg_sahoroyama_01.jpg);
    background-size: cover;
    background-position: center center;
  }
}

.link_wrap {
  border-bottom: none;
}

.link_inner div {
  border-top: 1px solid #707070;
  padding-top: 50px;
}

.link_main h2 {
  margin-bottom: 50px;
}

.link_main dt {
  font-size: 20px;
  margin-bottom: 20px;
}

.link_main dt::before {
  content: "●";
  margin-right: 10px;
}

.link_main dd {
  margin-left: 55px;
  margin-bottom: 50px;
}

.link_main section:last-of-type {
  padding-bottom: 300px;
}

@media (max-width: 834px) {
  .link_bg {
    height: 520px;
  }

  .wrap_padding.link_wrap {
    padding-right: 0;
    padding-left: 0;
  }

  .link_main section:last-of-type {
    padding-bottom: 100px;
  }

  .link_inner h2,
  .link_box {
    padding-right: 6.5%;
    padding-left: 6.5%;
  }

  .link_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/tb/bg_sahoroyama_01_tb@2x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_sahoroyama_01_tb@2x.jpg")
  ) {
    .link_bg {
      height: 560px;
      text-align: start;
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/tb/bg_sahoroyama_01_tb@2x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

@media (max-width: 440px) {
  .link_main h2 {
    margin-bottom: 30px;
  }

  .link_wrap {
    row-gap: 30px;
  }

  .link_inner h2,
  .link_box {
    padding-right: 0;
    padding-left: 0;
  }

  .link_inner {
    margin-right: 8.5%;
    margin-left: 8.5%;
    border-bottom: 1px solid #707070;
  }

  .link_inner:last-of-type {
    border-bottom: none;
  }

  .link_inner div {
    border-top: none;
    padding-top: 0;
  }

  .link_main dt {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .link_main dd {
    font-size: 14px;
    margin-left: 0;
    margin-bottom: 30px;
  }

  .link_main section:last-of-type {
    padding-bottom: 80px;
  }

  .link_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/sp/bg_sahoroyama_01_sp@3x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/sp/bg_sahoroyama_01_sp@3x.jpg")
  ) {
    .link_bg {
      height: 560px;
      text-align: start;
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/sp/bg_sahoroyama_01_sp@3x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

/*=================================================================
  privacy
  ================================================================= */
.privacy_bg {
  height: 560px;
  text-align: start;
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../images/content_bg/pc/bg_meotoyama_01.jpg);
  background-size: cover;
  background-position: center center;
}

@supports (
  background-image: url("../images/content_bg/pc/bg_meotoyama_01.jpg")
) {
  .privacy_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/pc/bg_meotoyama_01.jpg);
    background-size: cover;
    background-position: center center;
  }
}

.privacy_main h2 {
  font-size: 20px;
}

.privacy_main p {
  margin-bottom: 30px;
}

.privacy_main li,
.privacy_main dt,
.privacy_main dd {
  line-height: 27px;
}

.privacy_main dt {
  list-style-type: none;
  font-weight: normal;
  margin-bottom: 30px;
  counter-increment: list;
}

.privacy_main dt::before {
  content: "(" counter(list) ")";
}

.privacy_main dd {
  margin-bottom: 30px;
}

.privacy_main ol li:last-of-type p:last-of-type {
  margin-bottom: 0;
}

.privacy_main section:last-of-type {
  padding-bottom: 300px;
}

@media (max-width: 834px) {
  .privacy_bg {
    height: 520px;
  }

  .privacy_main section:last-of-type {
    padding-bottom: 100px;
  }

  .privacy_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/tb/bg_meotoyama_01_tb@2x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/tb/bg_meotoyama_01_tb@2x.jpg")
  ) {
    .privacy_bg {
      height: 560px;
      text-align: start;
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/tb/bg_meotoyama_01_tb@2x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

@media (max-width: 440px) {
  .privacy_main h2 {
    font-size: 18px;
  }

  .privacy_main li,
  .privacy_main dt,
  .privacy_main dd {
    font-size: 14px;
  }

  .privacy_main section:last-of-type {
    padding-bottom: 80px;
  }

  .privacy_bg {
    height: 560px;
    text-align: start;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5)
      ),
      url(../images/content_bg/sp/bg_meotoyama_01_sp@3x.jpg);
    background-size: cover;
    background-position: center center;
  }

  @supports (
    background-image: url("../images/content_bg/sp/bg_meotoyama_01_sp@3x.jpg")
  ) {
    .privacy_bg {
      height: 560px;
      text-align: start;
      background: linear-gradient(
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.5)
        ),
        url(../images/content_bg/sp/bg_meotoyama_01_sp@3x.jpg);
      background-size: cover;
      background-position: center center;
    }
  }
}

/*=================================================================
  contact
  ================================================================= */
.contact_wrap {
  max-width: 1170px;
  margin: 0 auto;
  padding: 20px 15px 30px;
}

.text_red {
  color: #f00;
}

.required::after {
  content: "※";
  color: #f00;
  font-size: 8px;
  padding-left: 1px;
  vertical-align: 5px;
}

::placeholder {
  color: #cecece;
}

.notice {
  font-size: 14px;
  margin-bottom: 15px;
}

.contact_wrap label {
  font-size: 13px;
}

.form_wrap dl {
  display: flex;
  margin-bottom: 15px;
}

.form_wrap dt {
  min-width: 16.66666667%;
  padding: 7px 15px 0;
  text-align: end;
}

.form_wrap dd {
  width: 100%;
  padding: 0 15px;
}

.form_decoration {
  padding: 6px 12px;
  width: 100%;
  height: 34px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form_decoration:focus {
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

textarea.form_decoration {
  height: auto;
}

.name {
  max-width: 10em;
}

.remark {
  display: inline-block;
  font-size: 0.9em;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.remark::before {
  content: "\f071";
  font: normal normal normal 14px/1 FontAwesome;
  color: #ffa200;
  padding-right: 3px;
}

.tel {
  max-width: 5em;
}

.prefectures {
  max-width: 8em;
}

.submit_wrap {
  width: 250px;
  margin: 30px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 50px;
}

.button_gray {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
  vertical-align: top;
  font-size: 13px;
  white-space: nowrap;
  color: #555;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 834px) {
  .form_wrap dl {
    display: block;
  }

  .form_wrap dt {
    text-align: start;
    padding: 7px 0 0;
    margin-bottom: 5px;
  }

  .form_wrap dd {
    padding: 0 0;
  }

  .form_decoration {
    padding: 6px 0;
  }
}