﻿@charset "UTF-8";

/* Scss Document */
/*しろ*/
/*みどり*/
/*くろ*/
/*タイトルbg*/
.margin_bottom {
  margin-bottom: 70px;
}

@media screen and (max-width: 767.98px) {
  .margin_bottom {
    margin-bottom: 50px;
  }
}

@media screen and (min-width: 768px) {
  #message .contents h2 {
    font-weight: 400;
    padding-left: 0.5em;
    border-left: 2px solid #4B7626;
    margin-bottom: 30px;
  }

  #message .contents table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px 1px;
  }

  #message .contents table tr th {
    color: #FFFFFF;
    background-color: #4B7626;
    font-weight: 400;
    padding: 1.5%;
    text-align: center;
  }

  #message .contents table tr th.middle {
    vertical-align: middle;
  }

  #message .contents table tr th.pale_green {
    background-color: #D1DD99;
    color: #000000;
    font-weight: 600;
  }

  #message .contents table tr td {
    background-color: #F7F8F8;
    padding: 1.5%;
    text-align: center;
  }

  #message .bottom_none {
    margin-bottom: 0 !important;
  }

  #message p.small.inlineLeft {
    text-align: right;
    margin-top: 20px;
  }

  #message h3 {
    font-weight: 400;
    color: #4B7626;
    margin-bottom: 25px;
    margin-top: 80px;
  }

  #message h4 {
    font-weight: 400;
    color: #000000;
    margin-bottom: 20px;
  }

  #message ol.kana li {
    list-style-type: katakana;
    line-height: 2.2;
    margin-left: 1.5em;
    margin-top: 0.5em;
  }
}

/*max*/
table th:nth-child(1) {
  width: 16%;
}

table th:nth-child(2) {
  width: 84%;
}

/*topページここから*/
#message_main p.p_lead {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}

#message_main p.little {
  margin-bottom: 20px !important;
}

#message_main .btn_div {
  background: #F6F6F6;
  padding: 50px 5% 50px;
}

#message_main .btn_div .btn_box {
  margin-bottom: 0;
}

#message_main .banner_box ul {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

#message_main .banner_box ul li {
  list-style-type: none;
  margin-left: 0;
}

@media screen and (max-width: 767.98px) {
  table th:nth-child(1) {
    width: 25%;
  }

  table th:nth-child(2) {
    width: 75%;
  }

  #message .contents h2 {
    font-weight: 400;
    padding-left: 0.5em;
    border-left: 2px solid #4B7626;
    margin-bottom: 30px;
  }

  #message .contents table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px 1px;
  }

  #message .contents table tr th {
    color: #FFFFFF;
    background-color: #4B7626;
    font-weight: 400;
    padding: 1.5%;
    text-align: center;
  }

  #message .contents table tr th.middle {
    vertical-align: middle;
  }

  #message .contents table tr th.pale_green {
    background-color: #D1DD99;
    color: #000000;
    font-weight: 600;
  }

  #message .contents table tr td {
    background-color: #F7F8F8;
    padding: 1.5%;
    text-align: center;
  }

  #message .bottom_none {
    margin-bottom: 0 !important;
  }

  #message p.small.inlineLeft {
    text-align: right;
    margin-top: 20px;
  }

  #message h3 {
    font-weight: 400;
    color: #4B7626;
  }

  #message h4 {
    font-weight: 400;
    color: #000000;
  }

  #message ol.kana li {
    list-style-type: katakana;
    line-height: 2.2;
    margin-left: 1.5em;
    margin-top: 0.5em;
  }

  #message_main .btn_div {
    background: #F6F6F6;
    padding: 50px 5% 50px;
  }

  #message_main .btn_div .btn_box {
    margin-bottom: 0 !important;
  }

  #message_main .banner_box ul {
    display: block;
    margin-top: 50px;
  }

  #message_main .banner_box ul li {
    list-style-type: none;
    margin-left: 0;
  }

  #message_main .banner_box ul li:nth-child(2) {
    margin-top: 30px;
  }
}

/*
 calc(x + (1vw - y)*z)
 x =最小値
 y =最小値を適用したい横幅の1%   100/767=7.6px   1vw-7.6px=0
 z =(最大値を適用したい横幅の1%-最小値を適用したい横幅の1%)*〇=文字サイズの最大値と最小値の差
 (12-7.6)*〇=20
 20/5.6=3.571
 font-size: calc(16px+((1vw-7.6px)*(20/5.6));
(12-7.6)*〇=4
*/
#message main p {
  font-size: calc(1.6rem + ((1vw - 0.76rem) * (3/4.4)));
  line-height: 2.2;
}

#message_main p.p_lead {
  font-size: calc(1.6rem + ((1vw - 0.76rem) * (4/4.4)));
}

#message h2 {
  font-size: calc(2rem + ((1vw - 0.76rem) * (4/4.4)));
  line-height: 1.3;
}

#message h3 {
  font-size: calc(2rem + ((1vw - 0.76rem) * (4/4.4)));
  line-height: 1.3;
}

#message h4 {
  font-size: calc(2rem + ((1vw - 0.76rem) * (4/4.4)));
  line-height: 1.3;
}

@media (min-width: 1200px) {
  #message main p {
    font-size: 1.6rem;
  }

  #message h2 {
    font-size: 2rem;
  }

  #message h3 {
    font-size: 2rem;
  }

  #message h4 {
    font-size: 2rem;
  }

  #message main p.p_lead {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  #message main p {
    font-size: 1.3rem;
  }

  #message h2 {
    font-size: 1.6rem;
  }

  #message h3 {
    font-size: 1.6rem;
  }

  #message h4 {
    font-size: 1.6rem;
  }

  #message main p.p_lead {
    font-size: 1.6rem;
  }
}

  #message_main .contents .banner_box ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
}
  #message_main .contents .banner_box ul li {
    line-height: 0;
  }
  #message_main .contents .banner_box ul li:nth-child(3) {
    margin-top: 30px;
  }
  #message_main .contents .banner_box ul li:nth-child(4) {
    margin-top: 30px;
  }
