/*--------------------------------------------------------------
  共通
  --------------------------------------------------------------*/
html {
    font-size: 62.5%;
}

.pc-mode {
    display: block;
}

.sp-mode {
    display: none;
}

@media (max-width: 768px) {
    .pc-mode {
        display: none;
    }

    .sp-mode {
        display: block;
    }

    .top h1 {
        font-size: 2.5rem !important;
    }
}

/*--------------------------------------------------------------
  フォント指定
  --------------------------------------------------------------*/
body {
    font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1.8;
    font-weight: 500;
    font-size: 1.5rem;
    color: #333;
}

b,
strong,
.bold {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Segoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

/* IE */
_:lang(x)::-ms-backdrop,
.selector {
    font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
}

.fon-min {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*--------------------------------------------------------------
  コンテンツ
  --------------------------------------------------------------*/
/*TOP*/
nav ul li {
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    font-size: 1.5rem;
}

nav ul li span {
    display: block;
    font-size: 1.2rem;
}

.navbar-light .navbar-nav .nav-link:after {
    content: '';
    width: 0;
    transition: all 0.3s ease;
    border-bottom: 3px solid #000;
    display: block;
}

.navbar-light .navbar-nav .nav-link:hover:after {
    width: 100%;
    border-bottom: 3px solid #000;
}

.top {
    margin-bottom: 0;
    padding: 200px 0;
}

.top img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.top h1 {
    font-size: 5rem;
    color: #fff;
}

.top p {
    padding-top: 60px;
    letter-spacing: 0.2em;
    color: #fff;
}

.top img {
    max-width: 100%;
    height: auto;
}

h2 img {
    max-width: 100%;
    height: auto;
}

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

.card-footer {
    background: #fff;
    border-top: none;
}

/*sec1*/
.sec1 {
    padding: 60px 0 45px;
    background: #fffcd4;
}

.sec1 .col-md-4 {
    padding-bottom: 15px;
}

.sec1 h2 {
    margin-bottom: 60px;
}

.sec1 h3 {
    font-weight: bold;
}

.sec1 p {
    font-size: 1.3rem;
}

.sec1 a {
    margin-top: 10px;
    font-size: 1.5rem;
}

/* btn-g */
.btn-g,
.btn-g.disabled,
.btn-g:disabled {
    color: #fff;
    background-color: #7aa44e;
    border-color: #7aa44e;
}

.btn-g:focus,
.btn-g.focus,
.btn-g:not(:disabled):not(.disabled):active:focus,
.btn-g:not(:disabled):not(.disabled).active:focus,
.show > .btn-g.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(81, 110, 52, 0.5);
}

.btn-g:hover {
    color: #fff;
    background-color: #516e34;
    border-color: #516e34;
}

.btn-g:not(:disabled):not(.disabled):active,
.btn-g:not(:disabled):not(.disabled).active,
.show > .btn-g.dropdown-toggle {
    color: #fff;
    background-color: #516e34;
    border-color: #516e34;
}

/*sec2*/
.sec2 {
    padding: 60px 0 45px;
    background: #fff;
}

.sec2 .col-md-3 {
    padding-bottom: 15px;
}

.sec2 h2 {
    margin-bottom: 15px;
}

.sec2 h3 {
    font-weight: bold;
}

.sec2 a {
    margin-top: 10px;
    font-size: 1.5rem;
}

/* btn-b */
.btn-b,
.btn-b.disabled,
.btn-b:disabled {
    color: #fff;
    background-color: #94c3d4;
    border-color: #94c3d4;
}

.btn-b:focus,
.btn-b.focus,
.btn-b:not(:disabled):not(.disabled):active:focus,
.btn-b:not(:disabled):not(.disabled).active:focus,
.show > .btn-g.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(81, 110, 52, 0.5);
}

.btn-b:hover {
    color: #fff;
    background-color: #88b1bf;
    border-color: #88b1bf;
}

.btn-b:not(:disabled):not(.disabled):active,
.btn-b:not(:disabled):not(.disabled).active,
.show > .btn-g.dropdown-toggle {
    color: #fff;
    background-color: #88b1bf;
    border-color: #88b1bf;
}

/*sec3*/
.sec3 {
    padding: 60px 0 45px;
    background: #fff;
}

.sec3 .col-md-3 {
    padding-bottom: 15px;
}

.sec3 h2 {
    margin-bottom: 15px;
}

.sec3 h3 {
    font-weight: bold;
}

.sec3 a {
    margin-top: 10px;
    font-size: 1.5rem;
}

/* btn-p */
.btn-p,
.btn-p.disabled,
.btn-p:disabled {
    color: #fff;
    background-color: #e79091;
    border-color: #e79091;
}

.btn-p:focus,
.btn-p.focus,
.btn-p:not(:disabled):not(.disabled):active:focus,
.btn-p:not(:disabled):not(.disabled).active:focus,
.show > .btn-g.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(81, 110, 52, 0.5);
}

.btn-p:hover {
    color: #fff;
    background-color: #bd6f70;
    border-color: #bd6f70;
}

.btn-p:not(:disabled):not(.disabled):active,
.btn-p:not(:disabled):not(.disabled).active,
.show > .btn-g.dropdown-toggle {
    color: #fff;
    background-color: #bd6f70;
    border-color: #bd6f70;
}

/*sec4*/
.sec4 {
    padding: 60px 0 45px;
    background: #fffcd4;
}

.sec4 h2 {
    margin-bottom: 60px;
}


.banner img {
    max-width: 100%;
    height: auto;
    padding-bottom: 15px;
}


/*--------------------------------------------------------------
  footer
  --------------------------------------------------------------*/
.footer {
    padding: 15px 0;
    text-align: center;
    background: #fff;
    font-size: 1rem;
}