/* 


style.css


*/
@charset "UTF-8";






/* 

reset

*/

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ol,ul{
    list-style: none;
}

img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a{
    color: inherit;
    text-decoration: none;
}

button{
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}

.wrapper{
	min-width: 100vw;
	overflow: hidden;
}

/* 画像の表示・非表示 */
.img-pp {
    display: block;
}

.img-sp {
    display: none;
}
/* /画像の表示・非表示 */


/* 改行の設定 */
.pp{
    display: block;
}

.sp {
    display: none;
}

h2,
.about-txt p,
.header-nav-link li,
.table-left,
.p-bottom,
.instagram-heading h2,
.activity-board,
.activity-table,
.footer-nav-link li {
    word-break: keep-all;
}

/* /改行の設定 */




/* 

base

*/


html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 15rem;
}

body {
    position: relative;
    color: #272727;
    background-color: #5E8F4E;
    max-width: 100vw;
}

body,
button {
    font-family: var(--font-zen-maru);
    font-weight: var(--font-medium);
    font-style: var(--font-style-normal);
}

main {
    max-width: 100vw;
    overflow: hidden;
}





/* 

フォントの設定

*/
:root {
    --font-zen-maru: "Zen Maru Gothic", sans-serif;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --font-style-normal: normal;
}
/* 

/フォントの設定

*/









/* 

スクロールアニメーションの設定

*/

/* フェードイン */
.fadeIn {
    opacity: 0;
    transition: 2s;
}

.fadeIn.is-show {
    opacity: 1;
}
/* /フェードイン */

/* 下からふわっと--フェードイン */
.fadeIn-up {
    opacity: 0;
    transform: translate(0, 10%);
    transition: 2s;
}

.fadeIn-up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}
/* /下からふわっと--フェードイン */


/* 

/スクロールアニメーションの設定

*/













/* 

ヘッダーの設定

*/

.header {
    position: relative;
}

/* 

ヘッダーのナビゲーションの設定

*/

.header-nav {
    font-weight: var(--font-bold);
    width: 150px;
    display: flex;
    flex-direction: column;
    background-color: #fff0eb;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);
    border-radius: 20px;

    position: fixed;
    top: 3rem;
    left: 3rem;
    z-index: 10000;

    opacity: 1;
}

.header-nav-rogo {
    background-color: #fff;
    padding: 10px 25px 10px;
    border-radius: 20px 20px 0 0;
}

.header-nav-rogo img {
    width: 100%;
}

.header-nav-rogo img:hover {
    opacity: .6;
}

.header-btn {
    background-color: #5E8F4E;

    position: relative;
    width: 100%;
    padding: 30px 5px 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: 0 0 20px 20px;
    cursor: pointer;
}


/* ハンバーガーメニュー */
.btn-trigger {
    position: relative;

    width: 45px;
    height: 33px;
    cursor: pointer;
}

.btn-trigger span {
    position: absolute;
    left: 0;

    width: 100%;
    height: 3px;
    background-color: #eeeedb;
    border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
    top: 0;
}
.btn-trigger span:nth-of-type(2) {
    top: 15px;
}
.btn-trigger span:nth-of-type(3) {
    bottom: 0;
}   


#btn01.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
}
#btn01.active span:nth-of-type(2) {
    opacity: 0;
}
#btn01.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(-45deg);
    transform: translateY(-20px) rotate(-45deg);
}




.header-btn-p {
    color: #eeeedb;
    font-size: 1.8rem;
    font-weight: bold;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
}

/* /ハンバーガーメニュー */










/* ヘッダー---追加のナビゲーション */


/* カード型のナビゲーションの設定 */


/* オーバーレイ */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);

    display:flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
/* /オーバーレイ */

/* 表示状態 */
.nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
/* /表示状態 */

/* カード */
.nav-card {
    width: 90%;
    height: 650px;
    max-width: 380px;
    background: #5E8F4E;
    border-radius: 20px;
    padding: 24px 20px 10px;
    color: #272727;
    text-align: center;
    position: relative;

    /* カード単体のアニメーション */
    transform: translateY(20px);
    opacity: 0;
    transition: 0.3s ease;
    /* カード単体のアニメーション */
}

/* 表示中のカード */
.nav-overlay.is-visible .nav-card {
    transform: translateY(0);
    opacity: 1;
}
/* /表示中のカード */
/* /カード */



.close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* 「メニュー」の文字 */
.menu-title {
    font-size: 2.2rem;
    margin: 8px 0 20px;
    color: #F4F1DC;
}
/* /「メニュー」の文字 */

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


.menu-list li {
    margin-bottom: 12px;
}

.menu-list a {
    display: block;
    background: #DCECC5;
    color: #2F5D3A;
    padding: 10px;
    border-radius: 14px;
    font-size: 18px;
    transition: 0.3s;
}

.menu-list a:hover {
    background: #d2f496;
}


/* 長方形応募ボタン１ */
.inv-button1 {
    width: 300px;
    margin: 20px auto 0;
    background-color: #c8315a;
    box-shadow: 0 6px 0 #f8789a;
}

.inv-button1 .inv-button-inner {
    width: 280px;
    padding: 10px 20px;
    border: 2px dashed #C8E6C9;
}

.inv-button1 .inv-button-inner p {
    color: #C8E6C9;
    font-size: 1.6rem;
    font-weight: bold;
}
/* 長方形応募ボタン１ */


/* /カード型のナビゲーションの設定 */





/* ヘッダー---追加のナビゲーション */



/* 

/ヘッダーのナビゲーションの設定

*/






/* 

ヘッダーSNSのナビゲーションの設定

*/
.header-sns {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 50px;
    right: 5%;
    text-align: right;
    z-index: 10;
}

.header-sns a:first-of-type {
    padding-right: 50px;
}

.header-sns-box img {
    transition-duration: .4s;
}

.header-sns-box img:hover{
    transform: scale(1.1);
}
/* 

/ヘッダーSNSのナビゲーションの設定

*/





/* 

/ヘッダーの設定

*/













/* トップページの設定 */
#top-view {
    position: relative;
    bottom: 0;
    height: 103vh;
}


/* 

Agurokkaのロゴ（雲）の設定

*/
.agurokka-title {
    height: 21.5vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 10;
}

.agurokka-title img {
    height: 100%;
}
/* 

/Agurokkaのロゴ（雲）の設定


*/




/* 

キャッチフレーズの配置設定

*/
.catchphrase {
    position: absolute;
    top: 15%;
    right: 10vw;

    z-index: 10;
}

.catchphrase img {
    width: 30vw;
}
/* 

/キャッチフレーズの配置設定

*/









/* 

トップページの画像の設定

*/


/* slickを用いた画像のスライドショー */
.f-photoes {
    position: relative;
    width: 100%;
    /* height: 57vw; */
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.f-photoes div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;    
    z-index: 2;
}

.f-photoes div:nth-of-type(1){
    background-image: url(../images/f-photoes-1-1.jpg);
}
.f-photoes div:nth-of-type(2){
    background-image: url(../images/f-photoes-1-2.JPG);
}
.f-photoes div:nth-of-type(3){
    background-image: url(../images/f-photoes-1-3.png);
}

.add-animation {
    animation: fadezoom 10s linear 0s normal both;
}

@keyframes fadezoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}
/* /slickを用いた画像のスライドショー */

/* 

/トップページの画像の設定

*/

/* スクロールイラストの設定 */
.scroll-arrow {
    position: absolute;
    left: 18vw;
    bottom: 10vh;
    z-index: 10;
}


.scroll-arrow-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.scroll-arrow-box img {
    animation: down-arrow 1.3s ease infinite;
}

@keyframes down-arrow {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(0, 20%);
    }
    100% {
        transform: translate(0);
    }
}


.scroll-arrow-box::before {
    position: absolute;
    z-index: -1;
    content: "";
    background-image: url(../images/illust/scroll-circle.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.2));
    width: 15rem;
    height: 15rem;
    transform: rotate(0);
    animation: rotate-button 30s linear infinite;
}

@keyframes rotate-button {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }

}

.contact-button-box a p {
    color: #eeeedb;
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.4;
}


/* /スクロールイラストの設定 */


/* 

/トップページの設定

*/

















/* 

アグロッカとは？

*/


#second {
    position: relative;
    z-index: 3;
    margin-top: -1px;
}

#about {
    padding: 13% 10% 40%;
    background-image: url(../images/illust/square1.png);
    background-repeat: repeat;

    display: flex;
    justify-content: center;
}

.about-inner {
    width: 50%;
}



/* 

背景の山のイラストの設定

*/

.mount-top1 {
    width: 100vw;
    position: absolute;
    bottom: -10px;
    z-index: 5;
    overflow: hidden;
}

/* 

/背景の山のイラストの設定

*/




/* 

アグロッカとは？-----文章の調整

*/
.about-txt h2 {
    color: #f0e491;
    font-size: clamp(2rem, 3vw, 5rem);
    word-break: keep-all;
    margin-bottom: 13%;
    line-height: 160%;
}

.about-txt p {
    color: #eeeedb;
    font-size: clamp(1.8rem, 1.5vw, 2.3rem);
    margin-bottom: 5%;
    letter-spacing: 4px;
    line-height: 2.3;
}
/* 

/アグロッカとは？-----文章の調整

*/




/* 

アグロッカとは？-----写真の調整

*/
.about-txt {
    padding-inline: 7% 5%;

    position: relative;
    left: 10px;
    width: 55%;
}

.about-img {
    position: relative;
    width: 45%;
    height: 100%;

    display: flex;
    justify-content: center;
}

.about-txt-img {
    width: 80%;
    height: 55%;
    margin-top: 15%;

    position: relative;
    left: 70%;
    transform: translateX(-50%);
}

.about-img1 {
    width: 80%;
    height: 50%;
}

.about-img2 {
    width: 65%;
    height: 45%;

    position: absolute;
    bottom: -30%;
    right: -10%;
}

.about-img3 {
    display: none;
}

.about-txt-img img,
.about-img1 img,
.about-img2 img,
.about-img3 img {
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);
}

/* 

/アグロッカとは？-----写真の調整

*/


/* 

/アグロッカとは？

*/






/* 

背景の山のイラストの設定

*/
.mount-top2 {
    width: 100vw;
    position: absolute;
    bottom: -10px;
    z-index: 5;

    overflow: hidden;
}
/* 

/背景の山のイラストの設定

*/




/* 

メンバー紹介

*/












/* 

畑（野菜など）

*/

#third {
    position: relative;
    z-index: 4;
    margin-top: -1px;
}

#introduction1 {
    position: relative;

    padding: 0 18% 10%;
    background-image: url(../images/illust/square2.png);
    background-repeat: repeat;

    height: 3000px;
}

#introduction1 h2 {
    color: #31694e;
    font-size: 6rem;
    margin-bottom: 18%;
}




/* 

畑・木-----テーブルの共通設定

*/

/* メンバー全体のサイズ */
.each-member {
    width: 100%;
    position: absolute;
}
/* メンバー全体のサイズ */

/* テーブルの設定 */
.each-table {
    width: 50vw;

    position: relative;
    z-index: 10;
    background-color: #eeeedb;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);
}
/* /テーブルの設定 */

/* 行間・字間の設定 */
.table-txt {
    line-height: 3rem;
    letter-spacing: 2px;
}
/* /行間・字間の設定 */

/* 名前のサイズ */
.member-name {
    font-size: 2.7rem;
}
/* /名前のサイズ */

/* テーブルの上段 */
.table-top,
.table-top1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* /テーブルの上段 */

/* テーブルの左側 */
.table-left {
    position: relative;
    width: 20vw;
    padding: 8% 3%;
    color: #eeeedb;

    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px 0 0 0;
}
/* /テーブルの左側 */

/* テーブルの右側 */
.table-right {
    width: 30vw;
    padding: 5% 5%;
}
/* /テーブルの右側 */

/* テーブルの下段 */
.table-bottom,
.table-bottom1,
.table-bottom2 {
    width: 100%;
    padding: 5% 6%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
/* /テーブルの下段 */

/* ヘッダセル */
.p-top {
    margin-bottom: 7px;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: bold;
}
/* ヘッダセル */

/* データセル（名前以外） */
.table-right .p-bottom,
.table-bottom .p-bottom,
.table-bottom1 .p-bottom,
.table-bottom2 .p-bottom {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}
/* /データセル（名前以外） */

/* 上段の文章ごとの幅 */
.table-right .table-txt:first-of-type {
    margin-bottom: 20px;
}
/* 上段の文章ごとの幅 */



/* メンバーSNSの共通設定 */
.table-sns1,
.table-sns2 {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 10%;
    transition-duration: .4s;
}
/* /メンバーSNSの共通設定 */


/* ホバー時 */
.table-sns1:hover,
.table-sns2:hover {
    transform: scale(1.1);
}
/* /ホバー時 */


/* メンバーのSNS一つ目の設定 */
.table-sns1 {
    right: 10%;
}
/* /メンバーのSNS一つ目の設定 */


/* メンバーのSNS二つ目の設定 */
.table-sns2 {
    right: 25%;
}
/* /メンバーのSNS二つ目の設定 */


.each-member-base {
    position: relative;
    width: 70%;
    margin-bottom: 10%;
}

.each-member-img img {
    width: 45%;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);

    position: absolute;
    z-index: 15;
}

.each-field img {
    width: 100%;
    position: absolute;
    z-index: 5;
}
/* 

/畑・木-----テーブルの共通設定

*/







/* 

畑-----お米を作っている人

*/


/* 

畑-----テーブルの各々の設定

*/

/* メンバー１ */
.field1 {
    left: 5%;
}

.field-member1 .table-top {
    border-bottom: solid #00ae95 0.5px;
}

.field-member1 .table-left {
    background-color: #00ae95;
}

.field-member1 .table-right .p-top, 
.field-member1 .table-bottom .p-top {
    color: #00ae95;
}

.member-img1 img {
    top: -30%;
    right: -25%;
}

.field-img1 img {
    left: 15%;
    bottom: -45%;
}

/* /メンバー１ */



/* メンバー２ */
.field2 {
    left: 55%;
    transform: translateX(-50%);
    bottom: -30%;
}

.field-member2 .table-top {
    border-bottom: solid #ff6347 0.5px;
}


.field-member2 .table-left {
    background-color: #ff6347;
}

.field-member2 .table-right .p-top, 
.field-member2 .table-bottom .p-top {
    color: #ff6347;
}

.member-img2 img {
    top: -30%;
    right: -25%;
}

.field-img2 img {
    left: 25%;
    bottom: -45%;
}

/* /メンバー２ */




/* メンバー３ */
.field3 {
    left: 5%;
    bottom: -60%;
}

.field-member3 .table-top {
    border-bottom: solid #ee7800 0.5px;
}


.field-member3 .table-left {
    background-color: #ee7800;
}

.field-member3 .table-right .p-top, 
.field-member3 .table-bottom .p-top {
    color: #ee7800;
}

.member-img3 img {
    top: -30%;
    right: -25%;
}

.field-img3 img {
    left: 15%;
    bottom: -45%;
}

/* /メンバー３ */

/* 

/畑-----テーブルの各々の設定

*/


/* 

/畑-----お米を作っている人

*/


/* 

/畑（野菜など）

*/








/* 

背景の木のイラストの設定-----上

*/
.tree-top {
    width: 100vw;
    position: absolute;
    bottom: -10px;
    z-index: 5;

    overflow: hidden;
}
/* 

/背景の木のイラストの設定-----上

*/








/* 

木-----果物を作っている人

*/
#fourth {
    position: relative;
    z-index: 6;
    margin-block: -2px;

}

#introduction2 {
    position: relative;
    padding: 5% 18% 10%;
    background-image: url(../images/illust/square3.png);
    background-repeat: repeat;

    height: 1500px;
}



/* メンバー１ */
.tree1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

.tree-member1 .table-top {
    border-bottom: solid #ee7800 0.5px;
}

.tree-member1 .table-left {
    background-color: #ee7800;
}

.tree-member1 .table-right .p-top, 
.tree-member1 .table-bottom .p-top {
    color: #ee7800;
}

.member-img4 img {
    top: -30%;
    right: -25%;
}

/* /メンバー１ */



/* メンバー２ */
.tree2 {
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}

.tree-member2 {
    left: 50%;
    transform: translateX(-50%);
}

.tree-member2 .table-top {
    border-bottom: solid #762f07 0.5px;
}

.tree-member2 .table-left {
    background-color: #762f07;
}

.tree-member2 .table-right .p-top, 
.tree-member2 .table-bottom .p-top {
    color: #762f07;
}

.member-img5 img {
    top: -30%;
    right: -25%;
}
/* /メンバー２ */





/* 木ー最後のメッセージ */
.tree-last-message {
    position: absolute;
    right: 10vw;
    bottom: 0;

    font-size: 3rem;
    color: #eeeedb;
    padding-bottom: 10px;
    margin-block: 7% 5%;
    border-bottom: dashed 2px #eeeedb;
}
/* /木ー最後のメッセージ */




/* フルーツのイラストの設定 */
.orange {
    transform: rotate(30deg);
    animation-name: ani_orange;
    animation-duration: 4s;

    position: absolute;
    top: 5%;
    left: 7%;
}

.nashi {
    transform: rotate(-30deg);
    animation-name: ani_nashi;
    animation-duration: 5s;

    position: absolute;
    top: 35%;
    right: 7%;
}

.kuri {
    transform: rotate(30deg);
    animation-name: ani_kuri;
    animation-duration: 6s;

    position: absolute;
    top: 65%;
    left: 7%;
}

.fruit{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width: 200px;
}

/* /フルーツのイラストの設定 */








/* フルーツのアニメーションの設定 */

@keyframes ani_orange {
    50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(30deg);
    }
}

@keyframes ani_nashi {
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(-30deg);
    }
}

@keyframes ani_kuri {
    50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(30deg);
    }
}
/* /フルーツのアニメーションの設定 */









/* 

背景の木のイラストの設定-----下

*/
.tree-bottom {
    width: 100vw;
    position: relative;
    top: -10px;
    z-index: 5;
    margin-top: -2px;
    vertical-align: top;
    overflow: hidden;
}

/* 

/背景の木のイラストの設定-----下

*/


/* 

/木-----果物を作っている人

*/



/* 

/メンバー紹介

*/





/* 

スライドショーのアニメーション

*/
.fade-bc {
    width: 100%;
    height: 130vh;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    margin-top: -1px;
}

.fade-bc div:nth-of-type(2),
.fade-bc div:nth-of-type(3),
.fade-bc div:nth-of-type(4) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;

    opacity: 0;
}


.fade-bc div:nth-of-type(2){
    background-image: url(../images/taue_bc.jpg);
    animation: slide1 15s infinite;
}
.fade-bc div:nth-of-type(3){
    background-image: url(../images/cows_farm.jpg);
    animation: slide2 15s infinite;
}
.fade-bc div:nth-of-type(4){
    background-image: url(../images/satoukibi.jpg);
    animation: slide3 15s infinite;
}

@keyframes slide1 {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slide2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide3 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* 

/スライドショーのアニメーション

*/











/* 

背景の山のイラストの設定

*/

.mount-top3 {
    width: 100vw;
    position: absolute;
    bottom: 0;
    z-index: 5;
    overflow: hidden;
}

/* 

/背景の山のイラストの設定

*/











/* 

なぜメンバーになったのか

*/

#fifth {
    position: relative;
    z-index: 6;
    margin-top: -1px;
}

#reason {
    position: relative;
    
    padding: 0 18%;
    background-image: url(../images/illust/square4.png);
    background-repeat: repeat;

    height: 4000px;
}

#reason h2 {
    position: relative;

    margin: 30% 0 20%;
    color: #31694e;
    font-size: 5rem;
}


/* 

柵-----動物たちのイラストの調整

*/

.saku-animals {
    width: 100%;
    height: 400px;

    position: relative;
    top: 50px;
}

.saku-cow1,
.saku-cow2 {
    height: 50%;
    position: absolute;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    animation-name: anime_beside1;
}

.saku-chicken1,
.saku-chicken2 {
    height: 30%;
    position: absolute;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    animation-name: anime_jump;
}

.saku-cow1 img,
.saku-cow2 img,
.saku-chicken1 img,
.saku-chicken2 img,
.saku-kusa img {
    height: 100%;
}



/* 牛のイラスト-----右向き */

.saku-cow1 {
    top: 5vh;
    left: 0;

    animation-duration: 8.5s;
}

/* /牛のイラスト-----右向き */

/* 牛のイラスト-----左向き */

.saku-cow2 {
    top: -3vh;
    right: 0;

    animation-duration: 7s;
}

/* /牛のイラスト-----左向き */

/* にわとりのイラスト１ */

.saku-chicken1 {
    top: 0;
    left: 18vw;

    animation-duration: 2.5s;
}

/* /にわとりのイラスト１ */

/* にわとりのイラスト２ */

.saku-chicken2 {
    top: 20%;
    left: 45%;

    animation-duration: 3.5s;
}

/* /にわとりのイラスト２ */

/* 草のイラスト */

.saku-kusa {
    height: 8vw;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: 13vw;
}


/* /草のイラスト */



/* 横に移動するアニメーション */
@keyframes anime_beside1 {
    0% {
        transform: translate(0px, 0);
    }
    20% {
        transform: translate(10px, 20px);
    }
    40% {
        transform: translate(20px, 0);
    }
    60% {
        transform: translate(30px, 20px);
    }
    80% {
        transform: translate(20px, 0);
    }
    100% {
        transform: translate(10px, 20px);
    }
}
/* /横に移動するアニメーション */


/* ぴょんぴょん跳ねるアニメーション */
@keyframes anime_jump {
    0% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(30px);
    }
    20% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(25px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(30px);
    }
    90% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(25px);
    }
}
/* /ぴょんぴょん跳ねるアニメーション */


/* 

/柵-----動物たちのイラストの調整

*/




/* 

柵のイラストの設定

*/

.saku {
    width: 100%;

    position: absolute;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
}

/* 

/柵のイラストの設定

*/




/* 

牧場-----テーブルの各々の設定

*/

/* メンバー１ */
.ranch1 {
    z-index: 6;
}

.ranch-member1 .table-top,
.ranch-member1 .table-bottom1 {
    border-bottom: solid #ff6347 0.5px;
}

.ranch-member1 .table-left {
    background-color: #ff6347;
}

.ranch-member1 .table-right .p-top, 
.ranch-member1 .table-bottom1 .p-top,
.ranch-member1 .table-bottom2 .p-top {
    color: #ff6347;
}

.member-img6 img {
    top: -10%;
    right: -30%;
}

/* 草のイラストの設定 */
.kusa1 {
    height: 13%;

    position: absolute;
    bottom: -17%;
    right: -28%;
    
    z-index: 16;
}

.kusa1 img {
    height: 100%;
}
/* /草のイラストの設定 */



/* 牛のイラストの設定 */
.cow1 {
    height: 28%;

    position: absolute;
    bottom: -13%;
    right: -55%;
    z-index: -1;
}

.cow1 img {
    height: 100%;

}


/* /牛のイラストの設定 */



/* /メンバー１ */







/* メンバー２ */
.ranch2 {
    left: 60%;
    transform: translateX(-50%);
    bottom: -28%;
}

.ranch-member2 .table-top,
.ranch-member2 .table-bottom1 {
    border-bottom: solid #d9aacd 0.5px;
}


.ranch-member2 .table-left {
    background-color: #d9aacd;
}

.ranch-member2 .table-right .p-top, 
.ranch-member2 .table-bottom1 .p-top,
.ranch-member2 .table-bottom2 .p-top {
    color: #d9aacd;
}

.member-img7 img {
    top: -25%;
    right: -20%;
}

/* 草のイラストの設定 */
.kusa2 {
    height: 18%;

    position: absolute;
    bottom: -30%;
    left: -35%;
    
    z-index: 16;
}

.kusa2 img {
    height: 100%;
}
/* /草のイラストの設定 */


/* /メンバー２ */






/* メンバー３ */
.ranch3 {
    bottom: -49%;
}

.ranch-member3 .table-top,
.ranch-member3 .table-bottom1 {
    border-bottom: solid #ee7800 0.5px;
}


.ranch-member3 .table-left {
    background-color: #ee7800;
}

.ranch-member3 .table-right .p-top, 
.ranch-member3 .table-bottom1 .p-top,
.ranch-member3 .table-bottom2 .p-top {
    color: #ee7800;
}

.member-img8 img {
    top: -20%;
    right: -25%;
}

/* 草のイラストの設定 */
.kusa3 {
    height: 15%;
    position: absolute;
    bottom: -25%;
    right: -55%;
    
    z-index: 16;
}

.kusa3 img {
    height: 100%;
}
/* /草のイラストの設定 */



/* 牛のイラストの設定 */
.cow2 {
    height: 33%;

    position: absolute;
    bottom: -18%;
    right: -43%;
}

.cow2 img {
    height: 100%;
}
/* 　/牛のイラストの設定 */


/* /メンバー３ */



/* 

/牧場-----テーブルの各々の設定

*/




/* 

/なぜメンバーになったのか

*/



/* 

川のイラストの設定-----上

*/
.river-top {
    width: 100vw;
    position: absolute;
    bottom: -10px;
    z-index: 5;
}

.river-top::before {
    content: "";
    display: inline-block;
    width: 200px;
    height: 80%;

    background-image: url(../images/illust/rock1.png);
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    top: -30%;
    left: 10%;
    z-index: 10;
}

/* 

/川のイラストの設定-----上

*/








/* 

インスタグラムの紹介

*/




#sixth {
    position: relative;
    width: 100%;
    z-index: 7;
    margin-top: -1px;
}


#instagram {
    background-image: url(../images/illust/square5.png);
    background-repeat: repeat;

    height: auto;
}


.instagram-top {
    padding-inline: 18% 10%;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5%;
}


.instagram-heading {
    width: 100%;
    margin-bottom: 5%;
}

.instagram-heading h2 {
    color: #00456e;

    font-size: 4rem;
    font-weight: bold;
}


/* インスタグラムの表の設定 */

.instagram-table {
    width: 650px;
    background-color: #eeeedb;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);

    display: flex;
}

/* テーブルの左 */
.table-left2 {
    width: 40%;
    padding: 5% 0;
    font-size: 2.4rem;

    border-radius: 20px 0 0 20px;
    color: #eeeedb;
    background-color: #00ae95;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

}

.table-left2 .txt-p {
    font-weight: bold;
}
/* /テーブルの左 */

/* テーブルの右 */
.table-right2 {
    width: 60%;
    padding: 5%;
    font-size: 2rem;
}

.txt-around {
    border: solid #272727 1px;
    border-radius: 20px;
    width: 100%;
    padding: 5% 10%;

    position: relative;
    box-shadow: 0 4px 0 #0ad091;
    transition-duration: .1s;

}

.txt-around:hover {
    transform: translateY(4px);
    box-shadow: none;
}

.table-right2 .txt-p {
    position: relative;
}



.table-right2 .txt-p p::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    
    background-image: url(../images/rogo/Instagram_Glyph_Gradient.png);
    background-size: contain;
    
    position: relative;
    top: 4px;
    left: 0;

}


.table-right2 .txt-p p::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;

    background-image: url(../images/illust/arrow_right_black.png);
    background-size: contain;

    position: absolute;
    top: 4px;
    right: 0;
}

/* /テーブルの右 */

/* /インスタグラムの表の設定 */




/* 川のループスライダーの設定*/
.wrapper-slide {
	height: 530px;
	margin-top: 50px;
	overflow: hidden;
    z-index: 100;
}

.loopsliders{
	width: 100%;
	height: 100%;

	/* 背景画像 */
	background-image: url("../images/illust/slide_river3.png");
	background-repeat: repeat-x;
	background-size: cover;

	/* アニメーション */
	animation: scroll-right 50s infinite linear both;
}

.loopslider {
    width: 100%;
    height: 100%;
}

/* 背景画像の位置をずらす */

@keyframes scroll-right {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 1000px 0;
	}
}

/* /川のループスライダーの設定*/




/* 

/インスタグラムの紹介

*/








/* 

川のイラストの設定-----下

*/
.river-bottom {
    width: 100vw;
    position: relative;
    top:  -10px;

    background-image: url(../images/illust/square4.png);
    background-repeat: repeat;
    z-index: 5;
}

.river-bottom::before {
    content: "";
    display: inline-block;
    width: 200px;
    height: 80%;

    background-image: url(../images/illust/rock1.png);
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    bottom: -45%;
    right: 5%;
    z-index: 100;
}

.river-bottom::after {
    content: "";
    display: inline-block;
    width: 200px;
    height: 80%;

    background-image: url(../images/illust/kusa1.png);
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    bottom: -30%;
    right: 13%;
    z-index: 99;
}

.yellow-bc {
    position: relative;
    top: -10px;
    width: 100%;
    height: 400px;

    background-image: url(../images/illust/square4.png);
    background-repeat: repeat;
    z-index: -1;
}

/* 

/川のイラストの設定-----下

*/






/* 

背景の木のイラストの設定-----上

*/
.tree-top2 {
    position: absolute;
    bottom: -10px;
    z-index: 5;

    overflow: hidden;
}
/* 

/背景の木のイラストの設定-----上

*/








/* 

活動内容

*/

#seventh {
    position: relative;
    z-index: 8;
    margin-block: -1px;
}





/* 活動内容の文章の設定 */
#activity {
    position: relative;
    padding: 5% 18%;
    background-image: url(../images/illust/square3.png);
    background-repeat: repeat;


    /* height: 500px; */
}

.activity-board {
    border-radius: 20px;
    padding-inline: 5%;
    margin-bottom: 15%;
    letter-spacing: 2px;
    z-index: 10;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);


    /* ルーズリーフの設定 */
    background-color: #eeeedb; /* 背景色 */
    background-image: linear-gradient(180deg, #ccc 2px, transparent 2px); /* 罫線の色と太さ */
    background-size: 100% 9em; /* 行の高さ */
    line-height: 9em ; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
    /* /ルーズリーフの設定 */
}

#activity h2 {
    color: #f0e491;
    font-size: 5rem;
    margin-bottom: 7%;
}

.activity-txt {
    font-size: clamp(2rem, 1.5vw, 2.2rem);
}

.red {
    color: #e73131;
}

.activity-txt ul {
    list-style-type: disc;
    list-style-position: inside;
    font-feature-settings: "palt";
}

.activity-txt li {
    color: #272727;
}
/* /活動内容の文章の設定 */


/* 活動内容の過去のイベントの設定 */
.activity-table table {
    width: 100%;
    font-feature-settings: "palt";
    border-radius: 20px;
    border-spacing: 0;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.300);

}

.activity-table caption {
    color: #f0e491;
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 3%;
    text-align: center;
}

.activity-table caption::before,
.activity-table caption::after {
    display: inline-block;
    vertical-align: middle;

    background-color: #f0e491;
    border-radius: 20px;
    content: "";
    height: 5px;
    width: 100px;
}

.activity-table caption::before {
    margin-right: 15px;
}

.activity-table caption::after {
    margin-left: 15px;
}



.activity-table tr th,
.activity-table tr td {
    border-bottom: solid 1px #ccc;
    padding-block: 3%;
    padding-inline: 3%;
    font-size: clamp(1.6rem, 1.5vw, 2rem);
    text-align: left;
}

.activity-table tr th {
    letter-spacing: -0.25em;
}

.activity-table tr th .number-space {
    position: relative;
    left: -7px; 
}

.activity-table .table-color2023 {
    background-color: #e28484;
}
.activity-table .table-color2024 {
    background-color: #f0b58b;
}
.activity-table .table-color2025 {
    background-color: #F0E491;
}
.activity-table .table-color2026 {
    background-color: #BBC863;
}




.activity-table tr th {
    width: 20%;
    color: #272727;
}

.activity-table tr td {
    width: 80%;
    background-color: #eeeedb;
    letter-spacing: 1px;
}

.activity-table tr:first-child th {
    border-top-left-radius: 20px;
}

.activity-table tr:first-child td {
    border-top-right-radius: 20px;
}

.activity-table tr:last-child td {
    border-bottom-right-radius: 20px;
}

.activity-table tr:last-child th{
    border-bottom-left-radius: 20px;
}



/* /活動内容の過去のイベントの設定 */


/* 

/活動内容

*/













/* 

背景の木のイラストの設定-----下

*/
.tree-bottom2 {
    width: 100vw;
    position: relative;
    top: -10px;
    z-index: 5;
    overflow: hidden;
}
/* 

/背景の木のイラストの設定-----下

*/




/* 

背景の木の幹の設定

*/
.tree-miki {
    width: 100%;
    height: auto;
    overflow: hidden;

    position: relative;

    background-image: url(../images/illust/square6.png);
    background-repeat: repeat;

}

/* 

/背景の木の幹の設定

*/









/* 

よくある質問

*/

#eighth {
    position: relative;
    z-index: 9;
    margin-top: -1px;
}

#question {
    position: relative;

    padding: 5% 18% 10%;
    background-image: url(../images/illust/square6.png);
    background-repeat: repeat;

    height: 1000px;
}

.question-board h2 {
    color: #f0e491;
    font-size: 5rem;
    margin-bottom: 3%;
}




/* アコーディオンの設定 */

.accordion {
    letter-spacing: 1px;
}

.accordion-header {
    background-color: #fff;
    padding: 22px 55px 20px 30px;
    margin: 10px 0 0;
    transition: background-color .3s ease;
    cursor: pointer;
    position: relative;
    font-size: clamp(1.8rem, 3vw, 2rem);
    border-radius: 20px 20px 0 0;
}

/* プラスマイナスの設定 */
.accordion-header::before,
.accordion-header::after {
    position: absolute;
    content: "";
    top: 1px;
    right: 20px;
    bottom: 0;
    width: 12px;
    height: 2px;
    margin: auto;
    background-color: #151e2f;
}

.accordion-header::after {
    transform: rotate(-90deg);
    transition: transform 0.3s;
}
/* /プラスマイナスの設定 */


.accordion-header.active::after {
    transform: rotate(0deg);
}

.accordion-content {
    background-color: #f0e491;
    padding: 22px 55px 20px 30px;
    display: none;
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    border-radius: 0 0 20px 20px;
}

.accordion-header div,
.accordion-content div{
    position: relative;
    padding-left: 25px;
}

.accordion-header div::before {
    position: absolute;
    content: "Q";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #151e2f;
    font-size: 17px;
}

.accordion-content div::before {
    position: absolute;
    content: "A";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #151e2f;
    font-size: 17px;
}

/* hover */
.accordion-header:hover {
    background-color: #f2f2f2;
}
/* /hover */



/* /アコーディオンの設定 */







/* 

/よくある質問

*/





/* 

背景の木の根のイラストの設定

*/
.tree-roots {
    width: 100vw;
    position: relative;
    top: -10px;
    z-index: 5;
    overflow: hidden;
}

/* 

/背景の木の根のイラストの設定

*/


/* 

背景の地面の設定

*/
.ground {
    width: 100%;
    height: auto;
    overflow: hidden;

    position: relative;

    background-color: #F0E491;
    background-image: url(../images/illust/square4.png);
    background-repeat: repeat;

}

/* 

/背景の地面の設定

*/







/* 

登録ページ

*/

#ninth {
    position: relative;
    z-index: 10;
    margin-top: -1px;
}

#invitation {
    position: relative;

    padding-block: 10% 20%;
    background-image: url(../images/illust/square4.png);
    background-repeat: repeat;

}


.inv-img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    width: 1500px;
    height: 1000px;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 63%);
    mask-image: radial-gradient(rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 63%);
}

.inv-img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.inv-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
}

.inv-content h2 {
    font-size: 5rem;
    color: #ffffff;
}

.inv-content p a {
    font-size: 1.7vw;
}

.last-message {
    width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2%;
}

.inv-button {
    height: auto;
    padding: 10px;
    border-radius: 20px;
    display: flex;


    position: relative;
    transition-duration: .1s;
}





/* 長方形応募ボタン２ */

.inv-button2 {
    width: 500px;
    margin: auto;
    background-color: #c8315a;
    box-shadow: 0 6px 0 #f8789a;
}

.inv-button2 .inv-button-inner {
    width: 480px;
    padding: 30px 50px;
    border: 2.5px dashed #fff;
}

.inv-button2 .inv-button-inner p {
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
}
/* 長方形応募ボタン２ */

.inv-button-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    border-radius: 20px;
}

.inv-button-inner p{
    width: 100%;
    height: 100%;

    text-align: center;
}

.inv-button:hover {
    transform: translateY(6px);
    box-shadow: none;
}


/* 登録ページのデザインの設定 */



/* 

/登録ページ

*/








/* 

背景の土のイラストの設定-----上

*/
.soil-top {
    width: 100vw;
    position: absolute;
    bottom: -10px;
    z-index: 5;

    overflow: hidden;
}
/* 

/背景の土のイラストの設定-----上

*/







/* 固定する応募フォームボタンの設定 */
.contact-button {
    position: fixed;
    right: 7rem;
    bottom: 4rem;
    z-index: 10;

    transition: .5s;
}

.contact-button:hover {
    transform: scale(1.1);
}

/* フッターまでスクロールしたら消す */
.contact-button.is-hidden {
    visibility: hidden;
    opacity: 0;
}
/* /フッターまでスクロールしたら消す */

.contact-button-box a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 12rem;
    height: 12rem;
}

.contact-button-box a::before {
    position: absolute;
    z-index: -1;
    content: "";
    background-image: url(../images/illust/cloud-red.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.2));
    width: 170px;
    height: 170px;
    transform: rotate(0);
    -webkit-animation: rotate-button 10s linear infinite;
    animation: rotate-button 30s linear infinite;
}


@keyframes rotate-button {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }

}

.contact-button-box a p {
    color: #eeeedb;
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.4;
}


/* /固定する応募フォームボタンの設定 */



/* 固定するトップへのボタン */
.top-button {
    width: 130px;
    height: 130px;
    position: fixed;
    left: 4rem;
    bottom: 2rem;
    transform: translateY(130%);
    z-index: 10;
    transition: .5s ;
    filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.1));
    opacity: 0;
    visibility: hidden;
}


.top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-button.stop {
    position: absolute;
    bottom: 50vh;
}

.top-button img {
    width: 100%;
    height: 100%;
    transition: .5s;
}

.top-button img:hover {
    transform: scale(1.1);
}

/* /固定するトップへのボタン */







/* 

フッター

*/

.footer {
    position: relative;
    padding: 5% 10%;
    background-image: url(../images/illust/square7.png);
    background-repeat: repeat;

    height: auto;
    margin-top: -1px;
    /* width: 100vw; */
}


/* footer-topの設定 */
.footer-top {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    padding: 3% 2%;
    margin-bottom: 7%;
    width: 400px;

    background-color: #eeeedb;
    border-radius: 10px;

    transition-duration: .4s;
}

.footer-top:hover {
    opacity: .8;
}

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

.footer-top-img img {
    width: 100%;
    height: 100%;
}
/* /footer-topの設定 */

/* footer-bottomの設定 */
.footer-bottom {
    /* 点線の設定 */
    background-image : linear-gradient(to right, #eeeedb 5px, transparent 5px);
    background-size: 18px 2px;
    background-repeat: repeat-x;
    background-position: left top;
    /* /点線の設定 */

    padding-top: 5%;
    display: flex;
}

.footer-nav {
    width: 70%;
    color: #eeeedb;
}

.footer-nav-link {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
    gap: 20px;
}

.footer-nav-link li {
    width: 30%;
    font-size: 1.8rem;
}

.footer-nav-link li:hover {
    opacity: .8;
}




/* 

フッターSNSのナビゲーションの設定

*/
.footer-sns {
    display: inline-block;
    width: 30%;
    position: relative;

}

.footer-sns-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer-sns a:first-of-type {
    padding-right: 50px;
}

.footer-sns-box img {
    transition-duration: .4s;
}

.footer-sns-box img:hover{
    transform: scale(1.1);
}
/* 

/フッターSNSのナビゲーションの設定

*/

/* /footer-bottomの設定 */



/* 

/フッター

*/














@media screen and (max-width: 1280px) {
    
    /* 

    共通設定

    */
    .pp {
        display: none;
    }

    .sp {
        display: block;
    }
    /* 

    /共通設定

    */







    /* 

    ヘッダーのナビゲーションの設定

    */
    .header-nav {
        width: 100px;
        height: 100px;
        top: 0;
        left: 0;
        border-radius: 0 0 20px 0;
        box-shadow: none;
    }

    .header-nav-rogo {
        visibility: hidden;
        display: none;
    }

    .header-btn {
        width: 100px;
        height: 100px;
        padding: 5%;
        border-radius: 0 0 20px 0;
    }

    .header-btn-p {
        display: none;
    }


    /* ハンバーガーメニューの設定 */

    .btn-trigger {
        width: 45px;
        height: 33px;
    }

    .btn-trigger span:nth-of-type(2) {
        top: 15px;
    }

    #btn01.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(45deg);
        transform: translateY(10px) rotate(45deg);
    }

    #btn01.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(-45deg);
        transform: translateY(-20px) rotate(-45deg);
    }

    /* /ハンバーガーメニューの設定 */

    /* 長方形応募ボタン１ */
    .inv-button1 {
        margin: 18px auto 6px;
    }
    /* /長方形応募ボタン１ */



    /* 

    /ヘッダーのナビゲーションの設定

    */






    /* 

    トップページの設定

    */
    #top-view {
        height: 87vh;
    }

    /* 

    Agurokkaのタイトル画像の設定

    */
    .agurokka-title {
        /* height: 25vw; */
        height: 33vh;
        bottom: 0;
    }
    /* 

    /Agurokkaのタイトル画像の設定

    */


    /* 

    キャッチフレーズの配置設定

    */
    .catchphrase {
        right: 5vw;
    }

    .catchphrase img{
        width: 40vw;
    }
    /* 

    /キャッチフレーズの配置設定

    */


    /* 

    トップページの写真の設定

    */
    .f-photoes {
        height: 80vh;
    }

    /* 

    /トップページの写真の設定

    */



    /* 固定するスクロールの設定 */
    .scroll-arrow {
        bottom: 10vh;
    }

    .scroll-arrow-box::before {
        width: 15rem;
        height: 15rem;
    }
    /* /固定するスクロールの設定 */



    /* 

    アグロッカとは？

    */


    #about {
        display: block;
        padding: 13% 5% 50%;
    }

    .about-sp {
        display: flex;
    }

    .about-inner {
        width: 100%;
    }

    .about-txt {
        width: 100%;
    }

    .about-txt h2 {
        font-size: 3.2rem;
        margin-bottom: 5%;
    }

    .about-txt-img {
        display: none;
        width: 100%;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
    }

    .about-sp p {
        font-size: 1.8rem;
    }

    .about-img {
        margin-top: 5%;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: auto;
    }

    .about-img-spFlex {
        display: flex;
    }

    .about-img1 {
        position: relative;
        width: 40%;
        height: 30%;
        top: -10%;
        left: 5%;
    }

    .about-img2 {
        position: absolute;
        width: 40%;
        right: 8%;
        bottom: -10%;
    }

    .about-img3 {
        display: block;
        width: 40%;
        height: 20%;
        margin-top: 3%;

        position: absolute;
        top: -10%;
        right: -12%;
        transform: translateX(-50%);
    }



    /* 

    メンバー紹介

    */


    /* 畑（野菜など） */

    #introduction1 {
        height: 2500px;
    }

    #introduction1 h2 {
        font-size: 4.5rem;
    }

    /* 畑・木-----テーブルの共通設定 */

    .each-member-base{
        left: -15%;
    }


    /* テーブルの設定 */
    .each-table{
        width: 75vw;
    }
    /* /テーブルの設定 */

    /* 名前のサイズ */
    .member-name {
        font-size: 2.5rem;
    }
    /* /名前のサイズ */

    /* テーブルの左側 */
    .table-left {
        width: 25vw;
    }
    /* /テーブルの左側 */

    /* ヘッダセル */
    .p-top {
        font-size: 2rem;
    }
    /* /ヘッダセル */

    /* メンバーSNSの共通設定 */
    .table-sns1,
    .table-sns2 {
        width: 20px;
        height: 20px;
    }
    /* /メンバーSNSの共通設定 */

    .each-member-img img{
        width: 40%;
    }


    /* /畑・木-----テーブルの共通設定 */








    /* 畑-----お米を作っている人 */


    /* メンバー１ */

    .member-img1 img{
        top: -25%;
        right: -15%;
    }

    .field-img1 img {
        left: 40%;
        bottom: -25%;
    }
    /* /メンバー１ */

    /* メンバー２ */

    .field2 {
        transform: none;
    }

    .member-img2 img {
        top: -25%;
        right: -15%;
    }

    .field-img2 img {
        left: 50%;
        bottom: -25%;
    }
    /* /メンバー２ */

    /* メンバー３ */

    .member-img3 img{
        top: -25%;
        right: -15%;
    }

    .field-img3 img {
        left: 40%;
        bottom: -25%;
    }

    /* /メンバー３ */

    /* /畑-----お米を作っている人 */

    /* /畑（野菜など） */



    /* 木-----果物を作っている人 */

    #introduction2 {
        padding: 5% 18% 0;
    }

    /* メンバー１ */
    .tree1 {
        transform: none;
    }

    .member-img4 img{
        top: -25%;
        right: -15%;
    }

    /* /メンバー１ */

    /* メンバー２ */
    .tree2 {
        top: 53%;
        transform: none;
    }

    .member-img5 img{
        top: -25%;
        right: -15%;
    }
    /* /メンバー２ */

    /* 木ー最後のメッセージ */
    .tree-last-message {
        font-size: 2.2rem;
    }
    /* /木ー最後のメッセージ */

    /* フルーツのイラストの設定 */
    .orange {
        top: 5%;
        left: 0;
    }

    .nashi {
        top: 40%;
        right: 0;
    }

    .kuri {
        top: 80%;
        left: 0;
    }

    .fruit {
        width: 180px;
    }
    /* /フルーツのイラストの設定 */

    /* /木-----果物を作っている人 */

    /* 

    /メンバー紹介

    */









    /* スライドショーのアニメーション */
    .fade-bc {
        height: 110vh;
    }
    /* /スライドショーのアニメーション */




    /* なぜメンバーになったのか */
    #reason h2 {
        font-size: 4.5rem;
    }
    /* /なぜメンバーになったのか */


    /* 柵-----動物たちのイラストの調整 */

    /* 牛のイラスト-----右向き */

    .saku-cow1 {
        left: -10%;
        height: 20vw;
    }

    /* /牛のイラスト-----右向き */

    /* 牛のイラスト-----左向き */

    .saku-cow2 {
        top: -5vw;
        right: -10%;
        height: 20vw;
    }

    /* /牛のイラスト-----左向き */

    /* にわとりのイラスト１ */

    .saku-chicken1 {
        height: 10vw;
    }


    /* /にわとりのイラスト１ */

    /* にわとりのイラスト２ */

    .saku-chicken2 {
        height: 10vw;
    }

    /* /にわとりのイラスト２ */

    /* 草のイラスト */

    .saku-kusa {
        height: 30%;
        top: 50%;
        right: 10vw;
    }

    /* /草のイラスト */

    /* /柵-----動物たちのイラストの調整 */




    /* 牧場-----テーブルの各々の設定 */

    /* メンバー１ */
    .ranch1 {
        bottom: -2%;
    }

    .member-img6 img{
        top: -15%;
        right: -10%;
    }

    /* 草のイラストの設定 */
    .kusa1 {
        height: 15%;

        bottom: -33%;
        right: 20%;
    }

    /* /草のイラストの設定 */

    /* 牛のイラストの設定 */
    .cow1 {
        height: 28%;

        bottom: -30%;
        right: -10%;
    }
    /* /牛のイラストの設定 */

    /* /メンバー１ */

    /* メンバー２ */
    .ranch2 {
        bottom: -32%;
        transform: none;
    }

    .member-img7 img{
        top: -15%;
        right: -10%;
    }

    /* 草のイラストの設定 */
    .kusa2 {
        height: 20%;

        bottom: -25%;
        left: -5%;
    }

    /* /草のイラストの設定 */

    /* /メンバー２ */

    /* メンバー３ */
    .ranch3 {
        bottom: -53%;
    }

    .member-img8 img{
        top: -15%;
        right: -10%;
    }

    /* 草のイラストの設定 */
    .kusa3 {
        height: 20%;
        bottom: -50%;
        right: -20%;
    }
    /* /草のイラストの設定 */

    /* 牛のイラストの設定 */
    .cow2 {
        height: 35%;
        bottom: -45%;
        right: 0;
    }
    /* /牛のイラストの設定 */

    /* /メンバー３ */

    /* /牧場-----テーブルの各々の設定 */







    /* インスタグラムの紹介 */
    .instagram-top {
        position: relative;
        left: -10%;
    }

    .instagram-heading {
        margin-bottom: 5%;
    }

    .instagram-heading h2 {
        font-size: 3.5rem;
        margin-top: 5%;
    }

    /* インスタグラムの表の設定 */
    .instagram-table {
        width: 80%;
    }

    /* テーブルの左 */
    .table-left2 {
        font-size: 1.8rem;
    }
    /* /テーブルの左 */

    /* テーブルの右 */
    .table-right2 {
        font-size: 1.6rem;
    }
    /* /テーブルの右 */

    /* /インスタグラムの表の設定 */

    /* /インスタグラムの紹介 */







    /* 活動内容の文章の設定 */
    #activity {
        padding: 5% 5%;
    }

    #activity h2 {
        font-size: 4rem;
        margin-bottom: 6%;
    }

    .activity-txt {
        font-size: 1.8rem;
    }

    /* /活動内容の文章の設定 */

    /* 活動内容の過去のイベントの設定 */
    .activity-table caption {
        font-size: 3rem;
        margin-bottom: 6%;
    }

    .activity-table tr th,
    .activity-table tr td {
        padding: 3%;
        font-size: 1.8rem;
    }

    /* /活動内容の過去のイベントの設定 */







    /* よくある質問 */
    .question-board h2 {
        font-size: 4rem;
        margin-bottom: 5%;
    }

    /* アコーディオンの設定 */
    .accordion-header {
        font-size: 1.6rem;
    }
    /* /アコーディオンの設定 */

    /* /よくある質問 */





    /* 登録ページ */
    .inv-content {
        top: 55%;
    }

    .last-message {
        width: 120%;
    }
    /* /登録ページ */





    /* 固定する応募フォームボタンの設定 */
    .contact-button {
        right: 2rem;
        bottom: 2rem;
    }

    .contact-button-box a::before {
        width: 150px;
        height: 150px;
    }
    /* /固定する応募フォームボタンの設定 */


    /* 固定するトップへのボタン */
    .top-button {
        left: 0rem;
        bottom: 1rem;
        width: 100px;
        height: 100px;
    }

    .top-button.stop {
        bottom: 55vh;
    }
    /* /固定するトップへのボタン */








    /* フッター */

    .footer {
        padding: 5% 10%;
    }

    /* footer-topの設定 */
    .footer-top {
        width: 30vw;
    }


    /* /footer-topの設定 */

    /* footer-bottomの設定 */
    .footer-bottom {
        padding-top: 7%;
        flex-direction: column;
    }
    /* /footer-bottomの設定 */

    .footer-nav {
        width: 100%;
    }

    .footer-nav-link {
        width: 100%;
        margin: auto;
        position: relative;
        left: 0;
        right: 0;
        gap: 25px 18px;
    }

    .footer-nav-link li {
        text-align: center;
        font-size: 1.8rem;
        width: 45%;
    }


    /* フッターSNSのナビゲーションの設定 */
    .footer-sns {
        width: 100%;
        margin-top: 5%;
    }

    .footer-sns-box {
        display: inline;
        position: relative;
        top: 0;
        left: 65%;
    }
    /* /フッターSNSのナビゲーションの設定 */


    /* /フッター */

}











@media screen and (max-width: 767px) {
    
    /* スマホ用のイラストを表示 */
    .img-pp {
        display: none;
    }

    .img-sp {
        display: block;
    }
    /* /スマホ用のイラストを表示 */

    /* wbrを解除 */
    h2,
    .about-txt p,
    .header-nav-link li,
    .table-left,
    .p-bottom,
    .instagram-heading h2,
    .activity-board,
    .activity-table {
        word-break: normal;
    }

    .table-right .table-txt:last-of-type .p-bottom {
        word-break: keep-all;
    }

    /* /wbrを解除 */


    /* 頂上のイラストを画面幅最大にする */
    .mount-top1 img,
    .mount-top2 img,
    .mount-top3 img,
    .tree-top img,
    .tree-bottom img,
    .tree-top2 img,
    .tree-bottom2 img,
    .river-top img,
    .river-bottom img,
    .tree-roots img,
    .soil-top img {
        width: 100vw;
    }
    /* /頂上のイラストを画面幅最大にする */



    /* ヘッダーナビゲーション */
    .header-nav {
        width: 80px;
        height: 80px;
    }

    .header-nav-rogo {
        visibility: hidden;
        display: none;
    }

    .header-btn {
        width: 80px;
        height: 80px;
        padding: 5%;
        border-radius: 0 0 20px 0;
    }

    .header-btn-p {
        display: none;
    }
    /* ハンバーガーメニューの設定 */
    .btn-trigger {
        width: 35px;
        height: 33px;
    }

    /* /ハンバーガーメニューの設定 */


    /* ヘッダーSNSナビゲーションの設定 */
    .header-sns {
        width: 80%;
        top: 40px;
        right: 10%;
    }

    .header-sns img {
        width: 27px;
        height: 27px;
    }

    /* /ヘッダーSNSナビゲーションの設定 */

    /* ヘッダー---追加のナビゲーション */
    .nav-card {
        height: 540px;
        padding: 10px 20px 6px;
    }

    .close {
        top: 8px;
        right: 16px;
        font-size: 2.6rem;
    }

    .menu-title {
        font-size: 1.8rem;
        margin: 8px 0 10px;
    }

    .menu-list li {
        margin-bottom: 10px;
    }

    .menu-list a {
        padding: 8px;
        font-size: 1.6rem;
    }

    /* 長方形応募ボタン１ */
    .inv-button1 {
        width: 280px;
        background-color: #c8315a;
        box-shadow: 0 6px 0 #f8789a;
    }

    .inv-button1 .inv-button-inner {
        width: 260px;
        padding: 5px 10px;
        border: 2px dashed #C8E6C9;
    }

    /* /長方形応募ボタン１ */

    /* /ヘッダー---追加のナビゲーション */


    /* /ヘッダーナビゲーション */




    /* トップページの設定 */

    #top-view {
        height: 77vh;
    }

    /* Agurokkaのタイトル画像の設定 */
    .agurokka-title {
        width: 28vh;
        bottom: -10%;
    }
    /* /Agurokkaのタイトル画像の設定 */

    /* キャッチフレーズの配置設定 */
    .catchphrase {
        top: 50%;
        left: 40%;
        transform: translate(-50%, -50%);
    }

    .catchphrase img {
        min-width: 130%;
        height: 100%;

    }
    /* /キャッチフレーズの配置設定 */

    /* トップページの写真の設定 */
    .f-photoes {
        height: 75vh;
    }

    .f-photoes div:nth-of-type(1){
        background-image: url(../images/f-photoes-2-1.jpg);
    }
    .f-photoes div:nth-of-type(2){
        background-image: url(../images/f-photoes-2-2.jpg);
    }
    .f-photoes div:nth-of-type(3){
        background-image: url(../images/f-photoes-2-3.jpg);
    }

    /* /トップページの写真の設定 */


    /* 固定するスクロールの設定 */
    .scroll-arrow {
        bottom: 15vh;
    }

    .scroll-arrow-box::before {
        width: 10rem;
        height: 10rem;
    }
    /* /固定するスクロールの設定 */


    /* /トップページの設定 */




    /* アグロッカとは */

    #about {
        padding: 25% 8% 50%;
    }

    .about-txt {
        padding: 0;
    }

    .about-txt h2 {
        font-size: 2.6rem;
    }

    .about-sp p {
        font-size: 1.6rem;
    }

    .about-img1 {
        width: 50%;
        left: -3%;
    }
    .about-img2 {
        width: 50%;
        right: -3%;
    }
    .about-img3 {
        width: 50%;
        right: -28%;
    }

    /* /アグロッカとは */




    /* メンバー紹介 */

    /* 畑（野菜など） */
    #introduction1 {
        height: 2400px;
        padding: 10% 8% 10%;
    }

    #introduction1 h2 {
        font-size: 2.6rem;
    }


    /* 畑・木-----テーブルの共通設定 */

    .each-member-base {
        width: 100%;
    }

    .each-table {
        width: 100%;
    }


    .table-top{
        flex-direction: column;
    }

    .table-left {
        width: 100%;
        padding: 10% 8%;
        border-radius: 20px 20px 0 0;
    }

    .table-right {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .table-right .table-txt {
        width: 50%;
    }

    .p-top {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    .each-member-img img {
        width: 45%;
    }

    /* /畑・木-----テーブルの共通設定 */

    /* メンバー１ */
    .field1 {
        left: 0;
    }

    .member-img1 img {
        top: -10%;
        right: 0;
    }

    .field-img1 img {
        left: 0;
        bottom: -20%;
    }
    /* /メンバー１ */

    /* メンバー2 */
    .field2 {
        left: 0;
        bottom: -35%;
    }

    .member-img2 img {
        top: -23%;
        right: 0;
    }

    .field-img2 img {
        left: 0;
        bottom: -23%;
    }
    /* /メンバー2 */

    /* メンバー3 */
    .field3 {
        left: 0;
        bottom: -65%;
    }

    .member-img3 img {
        top: -13%;
        right: 0;
    }

    .field-img3 img {
        left: 0;
        bottom: -20%;
    }
    /* /メンバー3 */

    /* /畑（野菜など） */


    /* 木（果物を作っている人） */
    #introduction2 {
        padding: 5% 8% 0;
        height: 1500px;
    }
    
    /* メンバー1 */
    .tree1 {
        left: 0;
        bottom: -40%;
    }

    .member-img4 img {
        top: -20%;
        right: 0;
    }

    /* /メンバー１ */

    /* メンバー２ */
    .tree2 {
        top: 50%;
        left: 0;
    }

    .member-img5 img {
        top: -18%;
        right: 0;
    }

    /* /メンバー２ */

    /* 木ー最後のメッセージ */
    .tree-last-message {
        font-size: 1.8rem;
        margin-block: 7%;
    }
    /* /木ー最後のメッセージ */

    /* フルーツのイラストの設定 */
    .orange {
        top: 3%;
        left: 15%;
    }

    .nashi {
        top: 45%;
        left: 8%;
    }

    .kuri {
        top: 85%;
        left: 60%;
    }

    .fruit {
        width: 100px;
    }
    /* /フルーツのイラストの設定 */

    /* 背景の木のイラストの設定-----下 */
    .tree-bottom {
        top: -20px;
    }
    /* /背景の木のイラストの設定-----下 */


    /* /木（果物を作っている人） */
    /* /メンバー紹介 */


    /* スライドショーのアニメーション*/
    .fade-bc {
        height: 80vh;
    }
    /* /スライドショーのアニメーション*/



    /* なぜメンバーになったのか */
    #reason {
        padding: 3% 8% 10%;
        height: 3525px;
    }

    #reason h2 {
        margin: 20% 0 20%;
        font-size: 2.6rem;
    }
    /* /なぜメンバーになったのか */


    /* 柵-----動物たちのイラストの調整 */

    .saku-animals {
        height: 250px;
    }

    /* 牛のイラスト-----右向き */
    .saku-cow1 {
        height: 45%;
        top: 8%;
        left: 0;
    }
    /* /牛のイラスト-----右向き */

    /* 牛のイラスト-----左向き */
    .saku-cow2 {
        height: 45%;
        right: 0;
    }
    /* /牛のイラスト-----左向き */

    /* にわとりのイラスト１ */
    .saku-chicken1 {
        height: 30%;
        top: -7vh;
    }
    /* /にわとりのイラスト１ */

    /* にわとりのイラスト２ */
    .saku-chicken2 {
        height: 30%;
        top: 0;
    }
    /* /にわとりのイラスト２ */

    /* 草のイラスト */
    .saku-kusa {
        height: 30%;
        top: 45%;
        right: 15vw;
    }
    /* /草のイラスト */


    /* /柵-----動物たちのイラストの調整 */


    /* 牧場-----テーブルの各々の設定 */

    /* メンバー１ */
    .ranch1 {
        left: 0;
    }

    .member-img6 img {
        top: -11%;
        right: 0;
    }

    /* 草のイラストの設定 */
    .kusa1 {
        height: 8%;

        bottom: -23%;
        right: 40%;
    }
    /* /草のイラストの設定 */

    /* 牛のイラストの設定 */
    .cow1 {
        height: 18%;

        bottom: -20%;
        right: -10%;
    }
    /* /牛のイラストの設定 */

    /* /メンバー１ */


    /* メンバー２ */
    .ranch2 {
        left: 0;
        bottom: -35%;
    }

    .member-img7 img {
        top: -15%;
        right: 0;
    }

    /* 草のイラストの設定 */
    .kusa2 {
        height: 13%;

        bottom: -25%;
        right: 20%;
    }
    /* /草のイラストの設定 */

    /* /メンバー２ */

    /* メンバー３ */
    .ranch3 {
        left: 0;
        bottom: -60%;
    }

    .member-img8 img {
        top: -15%;
        right: 0;
    }

    /* 草のイラストの設定 */
    .kusa3 {
        height: 13%;

        bottom: -30%;
        right: 40%;
    }
    /* /草のイラストの設定 */

    /* 牛のイラストの設定 */
    .cow2 {
        height: 22%;

        bottom: -27%;
        right: -5%;
    }
    /* /牛のイラストの設定 */

    /* /メンバー３ */


    /* /牧場-----テーブルの各々の設定 */


    /* 川のイラストの設定 */
    .river-top::before,
    .river-bottom::before,
    .river-bottom::after {
        height: 100%;
    }
    /* /川のイラストの設定 */



    /* インスタグラムの紹介 */
    #instagram {
        padding-block: 5%;
    }
    .instagram-top {
        
        padding-inline: 3%;
        left: 0;
    }

    .instagram-heading h2 {
        font-size: 2.6rem;
        padding-left: 3%;
    }

    /* インスタグラムの表の設定 */
    .instagram-table {
        width: 100%;
    }
    /* /インスタグラムの表の設定 */

    /* テーブルの左 */
    .table-left2 {
        font-size: 1.6rem;
        font-weight: bold;
    }
    /* /テーブルの左 */

    /* テーブルの右 */
    .table-right2 {
        font-size: 1.5rem;
    }

    .table-right2 .txt-p p::after {
        display: none;
    }

    /* /テーブルの右 */


    /* 川のループスライダーの設定*/
    .wrapper-slide {
        height: 450px;
    }
    /* /川のループスライダーの設定*/

    /* 川のイラストの設定-----下 */
    .river-bottom::before {
        width: 100px;
        right: 0;
    }
    .river-bottom::after {
        width: 100px;
        right: 10%;
    }
    /* /川のイラストの設定-----下 */

    .yellow-bc {
        width: 100%;
        height: 200px;
    }


    /* /インスタグラムの紹介 */



    /* 活動内容の文章の設定 */
    #activity {
        padding: 10% 5% 15%;
    }
    .activity-board {
        /* ルーズリーフの設定 */
        background-size: 100% 6em; /* 行の高さ */
        line-height: 6em ; /* 文字の高さ */
        /* /ルーズリーフの設定 */
    }

    #activity h2 {
        font-size: 2.6rem;
    }

    .activity-txt {
        font-size: 1.6rem;
    }

    /* /活動内容の文章の設定 */

    /* 活動内容の過去のイベントの設定 */
    .activity-table caption {
        font-size: 2rem;
    }

    .activity-table caption::before,
    .activity-table caption::after {
        height: 5px;
        width: 50px;
    }

    .activity-table tr th,
    .activity-table tr td {
        padding-block: 5%;
        padding-inline: 4%;
        font-size: 1.4rem;
        text-align: left;
    }

    .activity-table tr th {
        width: 30%;
    }

    .activity-table tr td {
        width: 70%;
    }

    /* /活動内容の過去のイベントの設定 */


    /* よくある質問 */
    #question {
        padding: 7% 5% 10%;
    }

    .question-board h2 {
        font-size: 2.6rem;
        margin-bottom: 5%;
    }

    /* アコーディオンの設定 */
    .accordion-header {
        padding: 20px 55px 18px 28px;
    }
    /* /アコーディオンの設定 */

    /* /よくある質問 */



    /* 登録ページ */
    #invitation {
        padding-block: 20% 50%;
    }

    .inv-img {
        width: 1000px;
        height: 500px;
        
    }

    .inv-button2 {
        width: 300px;
        justify-content: center;
        padding: 8px;
    }

    .inv-button2 .inv-button-inner {
        width: 100%;
        padding: 8px 35px;
    }

    .inv-button2 .inv-button-inner p{
        font-size: 1.8rem;
    }

    .inv-button-inner p::after {
        display: none;
    }
    /* /登録ページ */






    /* 固定する応募フォームボタンの設定 */
    .contact-button {
        right: 1rem;
        bottom: 0rem;
    }

    .contact-button-box a p{
        font-size: 1.6rem;
    }

    .contact-button-box a::before {
        width: 120px;
        height: 120px;
    }
    /* /固定する応募フォームボタンの設定 */

    /* 固定するトップへのボタン */
    .top-button {
        width: 80px;
        height: 80px;
        bottom: 0rem;
    }

    .top-button.stop {
        bottom: 50vh;
    }
    /* /固定するトップへのボタン */



    /* フッター */
    .footer {
        padding: 10%;
    }

    /* footer-topの設定 */
    .footer-top {
        width: 250px;
        padding: 5% 3%;
        margin-bottom: 10%;
    }

    .footer-top img {
        width: 80%;
        height: 80%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    /* /footer-topの設定 */

    /* footer-bottomの設定 */
    .footer-bottom {
        padding-top: 10%;
    }
    /* /footer-bottomの設定 */


    .footer-nav-link li {
        font-size: 1.6rem;
    }


    /* フッターSNSのナビゲーションの設定 */
    .footer-sns {
        margin-top: 10%;
    }

    .footer-sns-box {
        left: 60%;
        transform: translate(0, -50%);
    }
    /* /フッターSNSのナビゲーションの設定 */

    /* /フッター */

}