@charset "UTF-8";
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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 {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

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: none; }

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

img {
  display: inline-block; }

.clearfix {
  *zoom: 1; }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
i {
  display: block; }

.hide-text {
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden; }

a {
  display: inline;
  cursor: pointer;
  text-decoration: none;
}

a:visited {
  color: #333333;
  text-decoration: none; }

a:active, a:focus {
  text-decoration: none; }


/*　画面サイズが779p以上はここを読み込む　*/
@media screen and (min-width: 779px) {
  body {
    margin: 0;
    padding: 0;
    font-family: Meiryo, "HiraKakuProN-W3", sans-serif;
    font-size: 14px;
    color: #2E160A; }
  img {
    touch-callout: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none; }
  .main{
    box-sizing: border-box;
    background: url(../img/bg_main_2021.png);
    background-position: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-bottom: 26px;
  }
  .title{
    display: inline-block;
    padding: 10px;
    line-height: 1.2;
    color: #333333;
    width: 600px;
    border-bottom: 1px solid #333333;
/*    background-color: rgb(0,0,0,0.3);*/
  }
  .lead{
    color: #333333;
    padding: 10px;
  }
  .btn{
    display: block;
    width: 120px;
    padding: 10px;
    margin: 0 0 10px 10px;
    color: #ffffff;
    background-color: #b7c888;
    text-align: center;
    border-radius: 20px;
  }
  .pc-subtitle{
     border-radius: 0;
     padding: 5px;
     width: 300px;
     text-align: left;
     background-color: #b7c888;
  }
  .link{
    display: inline-block;
    padding: 5px 8px;
    margin: 8px 8px 8px 20px;
    color: #2E160A;
    border-left: 5px solid #b7c888;
    background: rgb(255,255,255,0.7);
  }
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #8B8D75;
    color: #ffffff;
    text-align: center;
    padding: 5px;
  }
}
/*　画面サイズが778px以下はここを読み込む　*/
@media screen and (max-width: 778px) {
  body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: Meiryo, "HiraKakuProN-W3", sans-serif;
    font-size: 16px;
    color: #2E160A; }
  img {
    touch-callout: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none; }
  .main{
    box-sizing: border-box;
    background: url(../img/bg_main_2021.png);
    background-position: 70% 0;
    background-size: cover;
    min-height: 100vh;
    padding-bottom: 26px;
  }
  .title{
    padding: 5px;
    line-height: 1.2;
    background-color: rgb(255,255,255,0.9);
  }
  .lead{
    color: #ffffff;
    padding: 10px;
  }
  .btn{
    display: block;
    width: 120px;
    padding: 10px;
    margin: 0 0 10px 10px;
    background-color: rgb(255,255,255,0.9);
    border-radius: 20px;
    text-align: center;
  }
  .info{
    display: none;
    min-height: calc(100vh - 202px);
    background-color: rgb(255,255,255,0.5);
  }
  .link{
    display: inline-block;
    padding: 5px 8px;
    margin: 8px;
    color: #2E160A;
    border-left: 5px solid #b7c888;
    background: rgb(255,255,255,0.7);
  }
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #8B8D75;
    color: #ffffff;
    text-align: center;
    padding: 5px;
  }

}