@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&family=Montserrat:wght@500&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px; }

body {
  font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", sans-serif;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  background-color: #fff;
  color: #000000; }

* html body {
  overflow: hidden; }

body #wrapper {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  overflow: hidden; }

p {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px; }

ul {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  list-style-type: none; }

li {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  list-style-type: none; }

img {
  vertical-align: top;
  border-style: none; }

form {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border: 0px; }

fieldset {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border: 0px; }

a {
  outline: none;
  text-decoration: none; }

a img {
  border-style: none; }

a:link {
  text-decoration: none; }

a:visited {
  text-decoration: none; }

a:hover {
  text-decoration: none; }

a:active {
  text-decoration: none; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/* headline */
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-weight: normal; }

strong {
  font-weight: bold; }

/*--------------------*/
/*汎用クラス*/
/*--------------------*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.clearfix {
  min-height: 1px; }

.main a:link {
  text-decoration: underline; }

.main a:hover {
  text-decoration: none; }

.text-link:link,
.text-link:visited {
  text-decoration: underline;
  color: #000000; }

.text-link:hover {
  text-decoration: none; }

.small {
  font-size: 0.7em; }

.strong {
  font-weight: bold; }

.txt-center {
  text-align: center !important; }

.txt-left {
  text-align: left !important; }

html {
  font-size: 62.5%; }

body {
  min-width: 1280px;
  _display: inline;
  _zoom: 1; }

img {
  max-width: 100%; }

/*-----------------------------------------------------------------------------*/
footer {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 100%;
  background-color: #00bdf2;
  color: #000000; }

.footer {
  padding: 50px 0px 50px 0px;
  margin: 0px auto 0px;
  width: 1280px;
  position: relative;
  overflow: hidden;
  position: relative; }

.footer .icon {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 147px;
  position: absolute;
  right: 100px;
  bottom: -50px; }

.footer a {
  color: #000000; }

.footer_link {
  padding: 0px 0px 50px 0px;
  margin: 0px auto 0px;
  display: flex;
  justify-content: center;
  gap: 65px; }

.footer__logo {
  position: absolute;
  bottom: 50px;
  left: 20px;
  max-width: 200px; }

.footer .footer__logo:hover {
  opacity: 0.6; }

/*-----------------------------------------------------------------------------*/
/* ボタン共通 */
.footer_linkbtm01 {
  overflow: hidden;
  width: 300px;
  border-radius: 70px;
  border: 2px solid #4463a9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: 70px; }

.footer_linkbtm01 a {
  position: relative;
  z-index: 100;
  text-align: center;
  background: #ffffff;
  color: #4463a9;
  font-size: 1.6rem;
  line-height: 1.2;
  text-decoration: none;
  font-weight: bold;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center; }

.footer_linkbtm01 a:hover {
  background: #d8eefc;
  /* マウスオーバーカラー */ }

/*-----------------------------------------------------------------------------*/
.IconList1 a:before {
  /*白いひし型 */
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
  right: 20px;
  width: 15px;
  height: 15px;
  margin-top: -4px;
  background: #4463a9; }

.IconList1 a:after {
  /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
  right: 22px;
  width: 15px;
  height: 15px;
  margin-top: -4px;
  background: #ffffff; }

.IconList1 a:hover:after {
  /*「after要素」のマウスオーバー（カラーを合わせる） */
  background: #d8eefc; }

/*-----------------------------------------------------------------------------*/
.footer .copyright {
  padding: 50px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #fff; }

/*-----------------------------------------------------------------------------*/
#pageTopButton {
  position: fixed;
  z-index: 100;
  bottom: 15px;
  right: 15px; }

#pageTopButton a {
  width: 70px;
  height: 70px;
  background: #ffbb05;
  text-decoration: none;
  color: #ffffff;
  padding: 5px;
  text-align: center;
  display: block;
  border-radius: 50%; }

#pageTopButton a:hover {
  background: #ffffff;
  color: #ffbb05; }

.btm01 {
  padding: 5px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 1.2rem;
  display: block; }

.btm02 {
  font-size: 2rem;
  display: block; }

/*-------------------------------------------------------------------------------------*/
/*--svg対応--*/
img[src$=".svg"] {
  width: 100%;
  height: auto; }

.br01 {
  display: none; }

.br02 {
  display: block; }

.br03 {
  display: inline-block; }

span.sup {
  vertical-align: super;
  font-size: 0.75rem; }

.linktel {
  pointer-events: none; }

.sp-none {
  display: block; }

.pc-none {
  display: none; }

/* ==========================================================================
/* -- 画面の横幅が812pxまで
 ========================================================================== */
@media only screen and (max-width: 812px) {
  /*-------------------------------------------------------------------------------------*/
  body {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    min-width: inherit;
    _display: inherit;
    _zoom: inherit;
    width: 100%; }

  body.fixed {
    overflow: hidden; }

  /*-------------------------------------------------------------------------------------*/
  footer {
    padding: 0vw 0px 0vw 0px;
    margin: 0vw 0px 0vw 0px;
    width: 100%;
    background-color: #00bdf2;
    color: #000000; }

  .footer {
    padding: 10vw 0px 15vw 0px;
    margin: 0vw auto 0vw;
    width: 100%;
    position: inherit;
    overflow: inherit;
    position: relative; }

  .footer .icon {
    display: none; }

  .footer img {
    max-width: 100%; }

  .footer_link {
    padding: 0vw 0px 2vw 0px;
    margin: 0vw auto 0vw;
    width: 100%;
    display: block; }

  .footer .footer__logo {
    display: block;
    max-width: 40vw;
    position: relative;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center; }

  .footer .footer__logo:hover {
    opacity: 0.6; }

  /*-----------------------------------------------------------------------------*/
  /* ボタン共通 */
  .footer_linkbtm01 {
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    margin: 0px auto 5vw;
    width: 85%;
    border-radius: 18vw;
    border: 2px solid #4463a9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    float: inherit;
    height: auto; }

  .footer_linkbtm01 a {
    padding: 5vw 0px;
    margin: 0px auto 0px;
    display: block;
    position: relative;
    z-index: 100;
    text-align: center;
    background: #ffffff;
    color: #4463a9;
    font-size: 3.7vw;
    line-height: 1.2;
    text-decoration: none;
    font-weight: bold;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center; }

  .footer_linkbtm01 a:hover {
    background: #d8eefc;
    /* マウスオーバーカラー */ }

  /*-----------------------------------------------------------------------------*/
  .IconList1 a:before {
    /*白いひし型 */
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 45%;
    right: 20px;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    background: #4463a9; }

  .IconList1 a:after {
    /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 45%;
    right: 22px;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    background: #ffffff; }

  .IconList1 a:hover:after {
    /*「after要素」のマウスオーバー（カラーを合わせる） */
    background: #d8eefc; }

  .footer .copyright {
    padding: 7vw 0px 0vw 0px;
    margin: 0vw 0px 0vw 0px;
    text-align: center;
    font-size: 3vw;
    font-weight: normal;
    color: #fff; }

  /*-----------------------------------------------------------------------------*/
  #pageTopButton {
    position: fixed;
    z-index: 100;
    bottom: 1.5vw;
    right: 1.5vw; }

  #pageTopButton a {
    width: 15vw;
    height: 15vw;
    background: #ffbb05;
    text-decoration: none;
    color: #ffffff;
    padding: 1vw 0vw 0vw 0vw;
    text-align: center;
    display: block;
    border-radius: 50%;
    zoom: 1;
    /*IE*/
    /*		transition: background 0.5s;*/ }

  #pageTopButton a:hover {
    background: #ffffff;
    color: #ffbb05; }

  .btm01 {
    padding: 1vw 0px 0vw 0px;
    margin: 0vw 0px 0vw 0px;
    font-size: 3vw;
    display: block; }

  .btm02 {
    font-size: 4vw;
    display: block; }

  /*-------------------------------------------------------------------------------------*/
  .br01 {
    display: block; }

  .br02 {
    display: none; }

  .br03 {
    display: none; }

  .linktel {
    pointer-events: auto; }

  .sp-none {
    display: none; }

  .pc-none {
    display: block; } }
.body {
  background: rgba(218, 234, 207, 0.5);
  line-height: 1.55;
  font-size: 4.2666666667vw;
  letter-spacing: 0.02em;
  overflow-x: hidden; }
  @media screen and (min-width: 812px) {
    .body {
      font-size: 1.8rem; } }

.globalInner, .bl_sign__wrap {
  padding: 0 6.6666666667vw;
  max-width: 1080px;
  margin: 0 auto; }
  @media screen and (min-width: 812px) {
    .globalInner, .bl_sign__wrap {
      padding: 0; } }

/*-----------------------------------------------------------------------------*/
/* button primary */
.linkbtn {
  width: 100%;
  height: 14.9333333333vw; }
  @media screen and (min-width: 812px) {
    .linkbtn {
      height: 85px; } }
  .linkbtn a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffa61c;
    border-radius: 14.9333333333vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    z-index: 100;
    background: #ffa61c;
    color: #fff;
    text-align: center;
    font-size: 4.2666666667vw;
    line-height: 1.2;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s; }
    @media screen and (min-width: 812px) {
      .linkbtn a {
        line-height: 1.4;
        font-size: 2.4rem; } }
    .linkbtn a:hover {
      color: #ffa61c;
      background: #fff; }

/*-----------------------------------------------------------------------------*/
.IconList a:before {
  /*白いひし型 */
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
  right: 20px;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  background: #fff;
  transition: 0.3s; }
  @media screen and (min-width: 812px) {
    .IconList a:before {
      right: 20px;
      width: 15px;
      height: 15px; } }

.IconList a:after {
  /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
  right: 22px;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  background: #ffa61c;
  transition: 0.3s; }
  @media screen and (min-width: 812px) {
    .IconList a:after {
      /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
      width: 15px;
      height: 15px; } }

.IconList a:hover:before {
  background: #ffa61c; }
.IconList a:hover:after {
  /*「after要素」のマウスオーバー（カラーを合わせる） */
  background: #fff; }

/*-----------------------------------------------------------------------------*/
/* button elements */
.btn, .btn-green, .btn-red, .btn-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16vw;
  width: 100%;
  border: 2px solid;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  color: #fff;
  transition: 0.3s;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: bold; }
  @media screen and (min-width: 812px) {
    .btn, .btn-green, .btn-red, .btn-blue {
      height: 90px;
      font-size: 2.4rem; } }
  .btn:hover, .btn-green:hover, .btn-red:hover, .btn-blue:hover {
    background-color: #fff; }
  .btn::after, .btn-green::after, .btn-red::after, .btn-blue::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.3s; }

.btn-green {
  background-color: #7dc355;
  border-color: #7dc355; }
  .btn-green:hover {
    color: #7dc355; }

.btn-red {
  background-color: #d33b26;
  border-color: #d33b26; }
  .btn-red:hover {
    color: #d33b26; }

.btn-blue {
  background-color: #05559d;
  border-color: #05559d; }
  .btn-blue:hover {
    color: #05559d; }

.contents-wrapper {
  overflow-x: hidden; }

.asset_tree {
  width: 12.5333333333vw; }
  @media screen and (min-width: 812px) {
    .asset_tree {
      width: 96px; } }

.counter_list li {
  letter-spacing: 0;
  line-height: 1.625;
  position: relative;
  padding-left: 1.6em; }
  @media screen and (min-width: 812px) {
    .counter_list li {
      line-height: 1.36; } }
  .counter_list li span {
    font-size: 3.4666666667vw; }
    @media screen and (min-width: 812px) {
      .counter_list li span {
        font-size: 1.6rem; } }
  .counter_list li img {
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .counter_list li img {
        width: 20px; } }

.sec_block, .sec_block--s, .bl_sign {
  background-color: #fff;
  border-radius: 2rem;
  position: relative;
  padding: 8vw 5.3333333333vw; }
  @media screen and (min-width: 812px) {
    .sec_block, .sec_block--s, .bl_sign {
      padding: 40px 40px; } }
  .sec_block--s {
    padding: 6.6666666667vw 4vw; }
    @media screen and (min-width: 812px) {
      .sec_block--s {
        padding: 30px 20px; } }

.sec_conts, .bl_sign {
  margin-bottom: 8vw; }
  @media screen and (min-width: 812px) {
    .sec_conts, .bl_sign {
      margin-bottom: 40px; } }

.sec_ttl {
  text-align: center;
  color: #00af3f;
  font-weight: bold;
  font-size: 5.3333333333vw;
  font-family: "M PLUS Rounded 1c", sans-serif;
  letter-spacing: 0;
  line-height: 1.23;
  margin-bottom: 5.8666666667vw; }
  @media screen and (min-width: 812px) {
    .sec_ttl {
      text-align: left;
      font-size: 2.8rem;
      margin-bottom: 20px;
      line-height: 1.36; } }
  .sec_ttl span {
    font-size: 6.9333333333vw; }
    @media screen and (min-width: 812px) {
      .sec_ttl span {
        font-size: 3.6rem; } }

.header {
  position: relative; }
  .header__bg {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: -1; }
    .header__bg img {
      width: 100%; }
  .header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 12.2666666667vw; }
    @media screen and (min-width: 812px) {
      .header__inner {
        padding-top: 10%; } }
    @media screen and (min-width: 1440px) {
      .header__inner {
        padding-top: 12%; } }
  .header__main {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    left: -1%;
    max-width: 80.5333333333vw; }
    @media screen and (min-width: 812px) {
      .header__main {
        max-width: 560px; } }
    .header__main .asset01,
    .header__main .asset02,
    .header__main .asset03,
    .header__main .asset04,
    .header__main .asset05 {
      position: absolute;
      z-index: -1; }
    .header__main .asset01 {
      top: -4.8vw;
      left: -2.6666666667vw;
      max-width: 33.3333333333vw; }
      @media screen and (min-width: 812px) {
        .header__main .asset01 {
          top: -31px;
          left: -51%;
          max-width: none; } }
    .header__main .asset02 {
      bottom: -33.3333333333vw;
      left: 0vw;
      max-width: 46.1333333333vw; }
      @media screen and (min-width: 812px) {
        .header__main .asset02 {
          bottom: 12px;
          left: -46%;
          max-width: none; } }
    .header__main .asset03 {
      bottom: -33.3333333333vw;
      right: -5.3333333333vw;
      max-width: 29.0666666667vw; }
      @media screen and (min-width: 812px) {
        .header__main .asset03 {
          top: 60%;
          bottom: auto;
          right: -69%;
          transform: translate(-50%, -50%);
          max-width: none; } }
    .header__main .asset04 {
      bottom: 1%;
      right: -9%; }
      @media screen and (min-width: 812px) {
        .header__main .asset04 {
          bottom: 0;
          right: 0;
          transform: translate(50%, 100%); } }
    .header__main .asset05 {
      bottom: 0;
      left: 0; }
      @media screen and (min-width: 812px) {
        .header__main .asset05 {
          left: auto;
          bottom: 0;
          right: -42%;
          transform: translate(0, 50%); } }

.bl_lead {
  margin-top: 40.5333333333vw;
  margin-bottom: 21.3333333333vw; }
  @media screen and (min-width: 812px) {
    .bl_lead {
      margin-top: 22px;
      margin-bottom: 51px;
      width: 100%; } }
  .bl_lead__ttl {
    color: #00af3f;
    font-size: 6.9333333333vw;
    font-weight: bold;
    line-height: 1.38;
    letter-spacing: 0;
    margin-bottom: 6.9333333333vw;
    font-family: "M PLUS Rounded 1c", sans-serif; }
    @media screen and (min-width: 812px) {
      .bl_lead__ttl {
        font-size: 3.6rem;
        margin-bottom: 32px; } }
  .bl_lead__txt {
    color: #00782c;
    line-height: 1.6;
    font-size: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_lead__txt {
        font-size: 2.4rem;
        line-height: 1.66;
        max-width: 678px; } }

.bl_sign {
  position: relative;
  border-radius: 0;
  padding: 47.4666666667vw 6.6666666667vw 7.2vw; }
  @media screen and (min-width: 812px) {
    .bl_sign {
      border-radius: 2rem;
      padding: 40px 40px; } }
  .bl_sign__wrap {
    padding: 0;
    position: relative; }
  .bl_sign__bg {
    position: absolute;
    z-index: 1;
    top: -1px; }
  .bl_sign__img {
    position: absolute;
    z-index: 1;
    top: -16vw;
    left: 59%;
    transform: translateX(-50%);
    width: 66.9333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_sign__img {
        top: -150px;
        right: -5px;
        transform: translateX(0);
        max-width: 376px; } }
  .bl_sign .txt {
    letter-spacing: 0;
    font-size: 4.8vw;
    margin-bottom: 2.6666666667vw; }
    @media screen and (min-width: 812px) {
      .bl_sign .txt {
        font-size: 2.4rem;
        margin-bottom: 10px; } }
  .bl_sign .note {
    font-size: 3.7333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_sign .note {
        font-size: 1.4rem; } }

.bl_point {
  display: grid;
  gap: 8vw; }
  @media screen and (min-width: 812px) {
    .bl_point {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 29px; } }
  .bl_point__num {
    margin-bottom: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_point__num {
        margin-bottom: 20px; } }
  .bl_point__item01 {
    position: relative; }
    .bl_point__item01 .img {
      position: absolute;
      bottom: 0;
      right: 4.5333333333vw;
      max-width: 41.3333333333vw; }
      @media screen and (min-width: 812px) {
        .bl_point__item01 .img {
          right: 5px;
          max-width: 172px; } }
    .bl_point__item01 .bl_point__txt {
      width: 38%; }
      @media screen and (min-width: 812px) {
        .bl_point__item01 .bl_point__txt {
          width: 45%; } }
  .bl_point__item03 figure {
    width: 33.3333333333vw;
    margin: 0 auto; }
    @media screen and (min-width: 812px) {
      .bl_point__item03 figure {
        float: right;
        margin: 0 0 5px 15px;
        width: 91px; } }
  .bl_point__item03-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 4.2666666667vw; }
    @media screen and (min-width: 812px) {
      .bl_point__item03-inner {
        display: block; } }
  .bl_point__txt {
    letter-spacing: 0.02em; }

.bl_str__body {
  position: relative;
  display: grid;
  gap: 5.8666666667vw; }
  @media screen and (min-width: 812px) {
    .bl_str__body {
      display: block; } }
.bl_str__list {
  order: 2; }
.bl_str__img {
  order: 1;
  width: 61.6vw;
  margin: auto; }
  @media screen and (min-width: 812px) {
    .bl_str__img {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(calc(-50% - 10px));
      width: 250px; } }
.bl_str__note {
  order: 3; }
  @media screen and (min-width: 812px) {
    .bl_str__note {
      position: absolute;
      bottom: -20px;
      right: -10px;
      max-width: 350px; } }
.bl_str .sec_ttl:first-child {
  margin-bottom: 10.1333333333vw; }
  @media screen and (min-width: 812px) {
    .bl_str .sec_ttl:first-child {
      margin-bottom: 20px; } }

@media screen and (min-width: 812px) {
  .bl_fold__body {
    display: flex;
    gap: 30px;
    align-items: center; } }
.bl_fold__img {
  margin: -13.3333333333vw auto 6.4vw;
  text-align: center; }
  @media screen and (min-width: 812px) {
    .bl_fold__img {
      display: contents;
      max-width: 275px; } }
@media screen and (min-width: 812px) {
  .bl_fold__txt {
    width: fit-content; } }
@media screen and (min-width: 812px) {
  .bl_fold .sec_ttl {
    margin-bottom: 10px; } }

@media screen and (min-width: 812px) {
  .bl_eco__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center; } }
.bl_eco__link {
  margin-top: 6.1333333333vw; }
  @media screen and (min-width: 812px) {
    .bl_eco__link {
      margin-top: 0; } }
.bl_eco .sec_ttl {
  margin-bottom: 10px; }

.bl_share {
  background: #fff;
  position: relative;
  z-index: 2;
  padding-bottom: 9.0666666667vw;
  margin-top: 14.9333333333vw; }
  @media screen and (min-width: 812px) {
    .bl_share {
      padding-bottom: 85px;
      margin-top: 110px; } }
  .bl_share .birds {
    position: absolute;
    top: -10.6666666667vw;
    left: 55%;
    max-width: 21.0666666667vw; }
    @media screen and (min-width: 812px) {
      .bl_share .birds {
        top: -70px;
        left: 60%;
        max-width: none; } }
  .bl_share__bg {
    position: absolute;
    z-index: 1;
    top: -1px;
    width: 100%; }
  .bl_share__inner {
    padding: 0 6.6666666667vw;
    position: relative;
    z-index: 1;
    max-width: 910px;
    margin: 0 auto; }
    @media screen and (min-width: 812px) {
      .bl_share__inner {
        padding: 0; } }
    .bl_share__inner .meal01,
    .bl_share__inner .meal02 {
      position: absolute;
      z-index: 1; }
    .bl_share__inner .meal01 {
      top: -18.6666666667vw;
      left: -6.4vw;
      width: 34.4vw; }
      @media screen and (min-width: 812px) {
        .bl_share__inner .meal01 {
          top: -135px;
          left: -210px;
          width: auto; } }
    .bl_share__inner .meal02 {
      top: -5.3333333333vw;
      right: -2.6666666667vw;
      width: 24.2666666667vw; }
      @media screen and (min-width: 812px) {
        .bl_share__inner .meal02 {
          top: -55px;
          right: -220px;
          width: auto; } }
  .bl_share__head {
    text-align: center;
    color: #00af3f;
    padding-top: 11.7333333333vw;
    margin-bottom: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_share__head {
        padding-top: 70px;
        margin-bottom: 33px; } }
    .bl_share__head .sec_ttl {
      margin-bottom: 0; }
  .bl_share__head-en {
    font-family: "Montserrat", sans-serif;
    line-height: 1.5;
    letter-spacing: 0.08em;
    margin-bottom: 3.2vw; }
    @media screen and (min-width: 812px) {
      .bl_share__head-en {
        margin-bottom: 23px;
        line-height: 1; } }
  @media screen and (min-width: 812px) {
    .bl_share__lead {
      text-align: center;
      font-size: 2.4rem;
      margin-bottom: 54px; } }
  .bl_share__box {
    background-color: #daeacf;
    border-radius: 20px;
    position: relative;
    margin: 6.4vw 0 0; }
    @media screen and (min-width: 812px) {
      .bl_share__box {
        margin: 0; } }
    .bl_share__box .meal03,
    .bl_share__box .meal04,
    .bl_share__box .tree01,
    .bl_share__box .tree02 {
      position: absolute; }
    .bl_share__box .meal03 {
      width: 25.3333333333vw;
      bottom: -3.4666666667vw;
      left: -11.2vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box .meal03 {
          top: 40px;
          bottom: auto;
          left: -150px;
          width: auto; } }
    .bl_share__box .meal04 {
      width: 24.2666666667vw;
      top: -10.1333333333vw;
      right: -9.3333333333vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box .meal04 {
          top: auto;
          bottom: -30px;
          right: -150px;
          width: auto; } }
    .bl_share__box .tree01 {
      display: none; }
      @media screen and (min-width: 812px) {
        .bl_share__box .tree01 {
          display: block;
          left: -150px;
          bottom: -60px; } }
    .bl_share__box .tree02 {
      bottom: 0;
      right: 10.6666666667vw;
      width: 18.6666666667vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box .tree02 {
          top: -60px;
          bottom: auto;
          right: -130px;
          width: 96px; } }
  .bl_share__box-inner {
    padding: 5.8666666667vw 5.8666666667vw 23.4666666667vw; }
    @media screen and (min-width: 812px) {
      .bl_share__box-inner {
        padding: 50px 70px 70px; } }
  @media screen and (min-width: 812px) {
    .bl_share__box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 53px; } }
  @media screen and (min-width: 812px) {
    .bl_share__box-head .sec_ttl {
      margin-bottom: 0; } }
  .bl_share__box-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6.4vw;
    margin-bottom: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_share__box-logo {
        margin-bottom: 0; } }
    @media screen and (min-width: 812px) {
      .bl_share__box-logo {
        gap: 30px; } }
    .bl_share__box-logo .logo_j-milk {
      width: 30.4vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box-logo .logo_j-milk {
          width: 120px; } }
    .bl_share__box-logo .logo_gyunyu-smile {
      width: 26.1333333333vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box-logo .logo_gyunyu-smile {
          width: 120px; } }
  @media screen and (min-width: 812px) {
    .bl_share__box-body {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 48px; } }
  .bl_share__box-body .donichi-milk {
    margin-bottom: 5.8666666667vw; }
    @media screen and (min-width: 812px) {
      .bl_share__box-body .donichi-milk {
        margin-bottom: 0; } }
    .bl_share__box-body .donichi-milk .bnr {
      display: block;
      transition: 0.3s;
      margin-bottom: 2.9333333333vw; }
      @media screen and (min-width: 812px) {
        .bl_share__box-body .donichi-milk .bnr {
          margin-bottom: 27px; } }
      .bl_share__box-body .donichi-milk .bnr:hover {
        opacity: 0.7; }
      .bl_share__box-body .donichi-milk .bnr img {
        width: 100%; }
    .bl_share__box-body .donichi-milk .txt-link {
      display: block;
      text-align: center;
      color: #00782c;
      letter-spacing: 0;
      font-size: 4.8vw;
      transition: 0.3s; }
      @media screen and (min-width: 812px) {
        .bl_share__box-body .donichi-milk .txt-link {
          font-size: 2.4rem; } }
      .bl_share__box-body .donichi-milk .txt-link:hover {
        opacity: 0.7; }
  .bl_share__box-body .btn-group a {
    margin-bottom: 5.3333333333vw; }
    @media screen and (min-width: 812px) {
      .bl_share__box-body .btn-group a {
        margin-bottom: 32px; } }
    .bl_share__box-body .btn-group a:last-child {
      margin-bottom: 0; }

.bl__banner {
  padding: 0px 0px 0px 0px;
  margin: 10.0vw auto 0px;
  max-width: 100vw;
  position: relative;
  z-index: 1; }
  .bl__banner img {
    width: 100%; }
  .bl__banner .backs {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px; }
  .bl__banner .links {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    width: 80.0vw;
    bottom: 8.0vw;
    left: 3.5vw; }
  .bl__banner p a:hover {
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    zoom: 1; }
  @media screen and (min-width: 812px) {
    .bl__banner {
      padding: 0px 0px 0px 0px;
      margin: 50px auto 0px;
      max-width: 910px; }
      .bl__banner .backs {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px; }
      .bl__banner .links {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        position: absolute;
        width: 620px;
        bottom: inherit;
        top: 125px;
        left: 235px; } }