/* Loading背景画面設定　*/
#splash {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: #19191a;
    text-align: center;
    color: #fff;
}

#splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999999;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
}
/* Loadingバー中央配置　*/


/* ------------------------------------動き-------------------------------- */
.smooth {
    -webkit-animation-name: smoothAnime;
    animation-name: smoothAnime;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}


@-webkit-keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}

@keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}

/* ------------------------------------FV専用アニメーション　ここまで-------------------------------- */

.fadeDown {
    -webkit-animation-name: fadeDownAnime;
    animation-name: fadeDownAnime;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

@-webkit-keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.smoothTrigger,
.fadeDownTrigger {
    opacity: 0;
}

/* ------------------------------------動き　終了-------------------------------- */


li {
    list-style: none;
}

main {
    margin-top: 5%;
    /* height: 100%; */
}

.br-sp {
    display: none;
}

.br-pc {
    display: block;
}

/* -------------------コンセプト----------------------  */
.concept {
    color: white;
    margin: auto 40px;
}

@media screen and (min-width:769px) {
    .concept {
        width: 976px;
        margin: 120px auto 140px;
    }
}

.concept-contents {
    margin-bottom: 100px;
    -webkit-font-smoothing: antialiased
}

@media screen and (min-width:769px) {
    .concept-contents {
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -webkit-text-orientation: upright;
                text-orientation: upright;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
        margin: 0 0 0 auto;
        height: 600px;
        padding: 0;
        position: relative;
    }

    .concept-logo {
        position: absolute;
        left: -15%;
        bottom: 5%;
        width: 130px;
    }
}

.concept-logo img {
    width: 100%;
}

.concept-title {
    font-size: 1.1875rem;
    line-height: 1.84211;
    letter-spacing: .075em;
    margin: -.42105em 0 1.68421em
}

@media screen and (min-width:769px) {
    .concept-title {
        font-size: 1.375rem;
        line-height: 2;
        margin: 0 -.5em 0 5em
    }
}



.concept-text {
    font-size: .9375rem;
    line-height: 2.06667;
    letter-spacing: .075em;
    margin: -.53333em 0
}

@media screen and (min-width:769px) {
    .concept-text {
        font-size: .9rem;
        line-height: 2.75;
        margin: 0 -.93333em;
    }
}

.parallax-bg {
    background-image: url('../img/parallax01.jpg');
    /* background-attachment: fixed; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70vh;
    width: 100%;
}



/* ------------------留村とは-------------------------- */
.about-sec {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: white;
    margin: auto 40px;
}

@media screen and (min-width:769px) {
    .about-sec {
        width: 976px;
        margin: 0 auto 140px;
    }
}

.about-title {
    padding-top: 3em;
    font-size: 1rem;
    position: relative;
}

.about-title::after {
    content: '';
    position: absolute;
    width:110px;
    height: 2px;
    background-color: white;
    bottom: -6%;
    left: -1%;
}

.what {
 padding-top: 2em;
 padding-left: 2em;
 font-size: 1.5rem;
 position: relative;
 width: -webkit-fit-content;
 width: -moz-fit-content;
 width: fit-content;
}

.what::after {
    content: "what's?";
    position: absolute;
    top: 55%;
    right: -50%;
    font-size: 1rem;
}

.about-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
}

.about-text {
    width: 55%;
}

.about-text span {
    display: inline-block;
}

.iwate-img {
    width: 45%;
    max-width: 600px;
}

.iwate-img img {
    width: 100%;
}

/*==================================================
スライダーのためのcss
===================================*/
.slide-pic {
    padding-left: 0;
    margin-top: -3em;
}

.slide-pic img {
    width: 100%;
    /*スライダー内の画像を横幅100%に*/
    height: auto;
}


/* ------------------ベン図------------------------ */
.flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 7em;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: white;
}

@media screen and (min-width:769px) {
    .flow {
        width: 976px;
        margin: 0 auto 140px;
    }
}

.season {
    width: 55%;
    position: relative;
    line-height: 1.85;
}


.season li {
    position: absolute;
    list-style: none;
    text-align: center;
    font-size: 1.1rem;
}

.work03 {
    top: 200px;
    left: 190px;
    position: relative;
}

.work03::before {
    content: "03.";
    position: absolute;
    top: -95%;
    left: 43%;
    font-size: 1.1rem;
    font-weight: 500;
}

.work01 {
    bottom: 160px;
    left: 140px;
    position: relative;
}
.work01::before {
    content: "01.";
    position: absolute;
    top: -55%;
    left: 43%;
    font-size: 1.1rem;
    font-weight: 500;
}

.work02 {
    bottom: 160px;
    left: 295px;
    position: relative;
}

.work02::before {
    content: "02.";
    position: absolute;
    top: -55%;
    left: 40%;
    font-size: 1.1rem;
    font-weight: 500;
}

.work01 span, .work02 span, .work03 span {
    font-weight: bold;
    font-size: 1.1rem;
}

.venn {
    max-width: 800px;
    min-width: 400px;
    position: relative;
}

.venn img {
    width: 100%;
}

.venn-sp {
    display: none;
}

.arrow {
    position: absolute;
    top: -5%;
    right: 0;
    left: 0;
    width: 45.2043%;
    margin: 0 auto;
    -webkit-animation-name: arrowCircle;
    animation-name: arrowCircle;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes arrowCircle {
    30% {
        transform: rotateZ(-180deg) translate3d(0, 0, 0)
    }

    50% {
        transform: rotateZ(-180deg) translate3d(0, 0, 0)
    }

    80% {
        transform: rotateZ(-360deg) translate3d(0, 0, 0)
    }

    100% {
        transform: rotateZ(-360deg) translate3d(0, 0, 0)
    }
}

@keyframes arrowCircle {
    30% {
        transform: rotateZ(-180deg) translate3d(0, 0, 0)
    }

    50% {
        transform: rotateZ(-180deg) translate3d(0, 0, 0)
    }

    80% {
        transform: rotateZ(-360deg) translate3d(0, 0, 0)
    }

    100% {
        transform: rotateZ(-360deg) translate3d(0, 0, 0)
    }
}


.flow-text {
    margin-bottom: 100px;
    padding: 0 94px 0 38px;
    -webkit-font-smoothing: antialiased;
}

@media screen and (min-width:769px) {
    .flow-text {
        width: 45%;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -webkit-text-orientation: upright;
                text-orientation: upright;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
        margin: 0;
        height: 600px;
        padding-top: 6em;
        line-height: 2.2;
        font-size: 1.05rem;
    }
}

.program {
    color: white;
}

@media screen and (min-width:769px) {
    .program01,
    .program02-contents,
    .program03-contents {
        width: 1076px;
        margin: 0 auto 60px;
    }
}

@media screen and (min-width:769px) {
    .schedule-contents {
        width: 976px;
        margin: 0 auto 20px;
    }
}

.program01-title h2, .program02-title h2, .program03-title h2 {
    position: relative;
    width: 320px;
    font-size: 1.2rem;
    margin-left: 3em;
    margin-bottom: 2em;
    padding-left: 10px;
}

.program02-title h2 {
    margin: 7em 0 3em auto;
    font-size: 1rem;
    line-height: 1.5;
}

.program03-title h2 {
    margin-top: 7em;
    padding-left: 20px;
}

.program01-title h2::before {
    content: "";
    position: absolute;
    background: url("../img/program/program-title01.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100vh;
    top: -30%;
    left: -20%;
}

.program02-title h2::before {
    content: "";
    position: absolute;
    background: url("../img/program/program-title02.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100vh;
    top: -90%;
    left: -22%;
}

.program03-title h2::before {
    content: "";
    position: absolute;
    background: url("../img/program/program-title03.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 100vh;
    top: -30%;
    left: -20%;
}

.program01-contents p,
.program02-contents p,
.program03-contents p
 {
    -webkit-margin-before: 0;
    margin-block-start: 0;
    -webkit-margin-after: 0;
    margin-block-end: 0;
}

.program01-link {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    margin: 0 0 3.5em auto;
}

.program01-btnBlock {
    width: 55%;
    margin-block-start: 0em;
    margin-block-end: 1em;
    /* margin-top: 4%; */
    /* margin-right: 10%; */
}


.program01-pic {
    width: 40%;
}

.program01-pic img {
    width: 100%;
    max-width: 600px;
}

.program01-picVeg img {
    width: 100%;
    max-width: 550px;
}

.program02-text {
    margin-left: 140px;
}

.imp01 {
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 1px solid #fff;
}

/* .program02-btn, .program01-btn {
    text-align: center;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 1em;
}

.program02-btn::after,
.program01-btn::after {
    content: '';
    position: absolute;
    top: 35%;
    right: -10%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
    transform: skew(45deg);
}

.program02-btn:hover::after,
.program01-btn:hover::after {
    right: -15%;
    transition: all .5s;
}

.program02-btn a,
.program01-btn a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 12px 22px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.program02-btn a:hover,
.program01-btn a:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    transition: all .5s;
} */


.bn30 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border: 6em;
    cursor: pointer;
    outline: none;
    font-size: 16px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(45deg, #4568dc, #71cadc);
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5em 1.5em;
    border-radius:21px;
    box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    color: white;
}

.bn30 .text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #4568dc, #b06ab3);
}

.bn30:after {
    content: "";
    border-radius: 18px;
    position: absolute;
    margin: 4px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: #19191a;
    ;
}

.bn30:hover {
    background-image: linear-gradient(-45deg, #4568dc, #71cadc);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
}

.bn30:hover .text {
    background-image: linear-gradient(-45deg, #4568dc, #71cadc);
}

.slideBox {
    margin-top: 5em;
}

/* .program02-text span {
    font-weight: bold;
    font-size: 1.2rem;
} */

/* .google-schedule {
    position: relative;
    z-index: 90;
} */

.schedule-contents h3 {
    border-bottom: 2px solid white;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.schedule-pic {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
}

.schedule-pic img {
    width: 100%;
}

#calendar {
    padding-top: 2em;
}

/* -------------------------プログラム02 普代村について--------------------------- */
@media screen and (min-width:769px) {
    .program02-fudaiMember {
        width: 976px;
        margin: 0 auto 140px;
        padding-top: 2em;
    }
}

.program02-memberPic {
    width: 30%;
    margin-right: 1em;
}

.program02-memberPic img {
    width: 100%;
}

.program02-fudaiLink {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: .5em;
}

.program02-fudaiLink::after {
    content: '';
    position: absolute;
    top: 45%;
    right: -10%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
    transform: skew(45deg);
}

.program02-fudaiLink:hover::after {
    right: -15%;
    transition: all .5s;
}

.program02-fudaiLink a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 12px 32px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.program02-fudaiLink a:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all .5s;
}

.program02-fudaiMemberTitle {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.5rem;
    position: relative;
}

.program02-fudaiMemberTitle::before {
    content: "";
    position: absolute;
    background: url("../img/program/program02-check.png") no-repeat;
    background-size: contain;
    width: 170px;
    height: 100vh;
    top: -80%;
    left: -20%;
}

.staff-pic img {
    margin-top: 2em;
    width: 100%;
}

/* -------------------------インタビュー対象者　アコーディオンメニュー -----------------------------*/

.fudaiMember-interview {
    width: 100%;
    margin: 0 auto;
    border-bottom: 2px solid #888;
}

input {
    display: none;
}

input~div {
    height: 1px;
    overflow: hidden;
}

input~div>* {
    opacity: 0;
    transition: 0.5s;
    /* font-size: 12px; */
    /* line-height: 1.75em; */
}

input+label {
    display: block;
    position: relative;
    padding: 25px 0;
    font-weight: 700;
    font-size: .9rem;
}

input+label:after,
input+label:before {
    position: absolute;
    background: rgb(255, 255, 255);
    content: '';
    transform: rotate(0deg);
    transition: 0.5s;
    top: 50%;
}

input+label:after {
    right: 4px;
    height: 10px;
    width: 2px;
    margin-top: -5px;
}

input+label:before {
    right: 0;
    width: 10px;
    height: 2px;
    margin-top: -1px;
}

input:checked~div {
    height: auto;
    margin: 0 0 50px;
}

input:checked~div>* {
    opacity: 1;
    transition: 0.5s;
    transition-delay: 0.25s;
}

input:checked+label:before {
    transform: rotate(360deg);
    transition: 0.5s;
}

input:checked+label:after {
    transform: rotate(450deg);
    transition: 0.5s;
}

label:hover {
    cursor: pointer;
}


.parallax-bg02 {
    background-image: url('../img/autumn.jpg');
    /* background-attachment: fixed; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70vh;
    width: 100%;
}



/* ------------------募集内容-------------------- */
.recruitment {
    line-height: 1.85;
}

.recruitment p {
    -webkit-margin-before: 0;
            margin-block-start: 0;
}

.recBlock {
    padding-top: 100px;
    padding-bottom: 50px;
    background: #ffffff;
    overflow: hidden;
}

.recWrapper {
    max-width: 1286px;
    margin: 0 auto;
}

.recTitle {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    line-height: .1;
    position: relative;
    z-index: 2;
    color: rgb(0, 0, 0);
    top: -1px;
}

.recTitle::after {
    content: "RECRUITMENT";
    position: absolute;
    top: 0;
    left: 45%;
    padding-top: 3em;
    font-size: .9rem;
}

.recContent {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    padding: 0 26px;
}

.recDetail {
    flex: 1;
    padding-right: 76px;
}

.recNature {
    color: rgb(0, 0, 0);
}

.recNatureList {
    width: 100%;
    margin: 36px 0 50px;
}

.recNatureBlock {
    border-bottom: 1px solid #393939;
    padding: 45px 0 30px;
}

.recNatureItem {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    font-weight: 500;
    margin-bottom: 10px;
}

.recBlockHeading {
    width: 135px;
    text-indent: 6px;
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

.recBlockContent {
    flex: 1;
    font-size: 1rem;
}

.recNatureText {
    letter-spacing: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    /* margin-block-end: 0; */
}

.explanation {
    font-weight: 700;
    border-bottom: 2px solid black;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 5px;
}

.explanation-ct {
    font-size: .9rem;
}

.free {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0;
}

.cost-attention {
    font-size: .85rem;
    font-weight: 300;
    margin-bottom: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
}

.imp {
    font-weight: 700;
    font-size: 1.05rem;
}

.indent {
    padding-left: 1em;
    text-indent: -1em;
}

.caution-border {
    background: linear-gradient(transparent 70%, #a2eef3 0%);
    display: inline;
}

.recNatureNote {
    font-size: .9rem;
}

.recNatureText span, .recNatureNote span {
    display: inline-block;
}

.recNatureTitle {
    font-size: 1rem;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
}

/* .mt-blank {
    margin-top: 3em;
} */

.recLink {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: .5em;
}

.recLink::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    transform: skew(45deg);
}

.recLink:hover::after {
    right: -12%;
    transition: all .5s;
}

.recLink a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    padding: 12px 32px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.recLink a:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all .5s;
}

.recListImages {
    max-width: 40%;
    width: 541px;
    padding-top: 7px;
}


.recListImages li {
    margin-bottom: 69px;
    list-style: none;
}

.recLogo {
    width: 180px;
    margin-left: auto;
    margin-right: auto;
}

.recListImages li img {
    width: 100%;
}

.company-Reclink {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /* margin: 1em 0 0 0; */
}

.company-Reclink img {
    width: 100%;
    max-width: 140px;
}

.company-Reclink::after {
    content: '';
    position: absolute;
    top: 40%;
    right: -20%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    transform: skew(45deg);
}

.company-Reclink:hover::after {
    right: -25%;
    transition: all .5s;
}

.company-Reclink a {
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.company-Reclink a:hover {
    transition: all .5s;
}



/* --------------------ご案内---------------------- */
.guide {
    background: #fff;
    padding-top: 1em;
    margin: 0;
    overflow: hidden;
    line-height: 1.85;
}

.guide-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 39px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.guide-title::after {
    content: "GUIDE";
    position: absolute;
    top: 6%;
    left: 21%;
    padding-top: 3em;
    font-size: .9rem;
}

.guideTabsWrapper {
    text-align: center;
}

@media screen and (min-width: 751px) and (max-width: 1279px) {
.guide-tabs {
     width: calc(100% - 40px);
     margin: 0 20px;
 }
}

.guide-tabs {
    display: inline-flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1238px;
    width: 100%;
    padding-top: 30px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
}

@media screen and (min-width: 751px) and (max-width: 1279px) {
   .guide-tabLink {
        width: calc(100% / 4 - 10px);
    }
}

.guide-tabLink {
    display: block;
    border: 1px solid #19191a;
    width: calc(100% / 3 - 10px);
    height: 64px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #19191a;
    text-align: center;
    padding-top: 7px;
    letter-spacing: 0;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
}

.guide-tabLink:hover {
    color: #fff;
    background: #19191a;
}

.guide-tabLink::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #19191a;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .3s ease;
}

.guide-tabLink:hover:before {
    opacity: 1;
}

.guide-tabLink.tabActive:before {
    opacity: 1;
}

.guide-tabLink span {
    display: block;
    width: 100%;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-family: sans-serif;
}

.guide-tabLink.tabActive {
    color: #fff;
    background: #19191a;
}

.guide-tabsContent {
    margin-top: 60px;
}

.guide-tabBlock {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
}

@media screen and (min-width:769px) {
    .guide-tabBlock {
        width: 976px;
        margin: 0 auto 50px;
    }
}

 .guide-tabBlock.tabActive {
    opacity: 1;
    visibility: visible;
    position: static;
}

/* ---------------------ワークベースについて----------------------- */
.blue-baseText {
    text-align: center;
    padding-bottom: 2em;
    line-height: 2.3;
}


.blue-baseText span {
    display: inline-block;
}

.blue-baseBtn {
    text-align: center;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

.blue-baseBtn::after {
    content: '';
    position: absolute;
    top: 35%;
    right: -5%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    transform: skew(45deg);
}

.blue-baseBtn:hover::after {
    right: -10%;
    transition: all .5s;
}

.blue-baseBtn a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    padding: 12px 22px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.blue-baseBtn a:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all .5s;
}

.blue-baseList {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 751px) and (max-width: 1279px) {
    .blue-baseList {
        padding: 0 10px;
        margin: 32px 0;
    }
}

.blue-baseImg {
    margin: 20px;
    width: calc(50% - 40px);
    flex-grow: 1;
}

@media screen and (min-width: 751px) and (max-width: 1279px) {
    .blue-baseImg {
        margin: 10px;
        width: calc(50% - 20px);
    }
}

.blue-baseImg img {
    width: 100%;
}

/* .sdgs {
    margin: auto 40px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.sdgs-text {
    line-height: 2.3;
}

.sdgs-text span {
    display: inline-block;
}

.sdgs-pic {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.sdgs-pic img {
    width: 100%;
} */
/* -----------------------/ワークベースについて----------------------- */

/* -------------------------普代村について--------------------------- */
.fudai-text {
    line-height: 2.3;
}

.fudai-text span {
    display: inline-block;
}

.fudai-text strong {
    font-size: 1.2rem;
    font-weight: 700;
}

.fudaiMember {
    margin-top: 6em;
}

.fudaiMember-title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.5rem;
    position: relative;
}

.fudaiMember-title::before {
    content: "";
    position: absolute;
    background: url("../img/guide/check.png") no-repeat;
    background-size: contain;
    width: 170px;
    height: 100vh;
    top: -80%;
    left: -20%;
}

.fudaiMember-interviewLi {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.member-pic {
    width: 35%;
    margin-right: 1em;
}

.member-pic img {
    width: 100%;
}

.member-text {
    width: 60%;
}

.member-introduction span {
    display: inline-block;
    line-height: 2.3;
}

.fudaiLink {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: .5em;
}

.fudaiLink::after {
    content: '';
    position: absolute;
    top: 45%;
    right: -10%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    transform: skew(45deg);
}

.fudaiLink:hover::after {
    right: -15%;
    transition: all .5s;
}

.fudaiLink a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    padding: 12px 32px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.fudaiLink a:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all .5s;
}

/* -------------------------/普代村について--------------------------- */

/* -------------------------運営者について--------------------------- */
.profile {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.profile-pic {
    width: 35%;
    margin-right: 1em;
}

.profile-pic img {
    width: 100%;
}

.profile-text {
    width: 60%;
}

.profile-introduction span, .story-text span {
    display: inline-block;
    line-height: 2.3;
}

.company-link {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 1em 0 0 0;
}

.company-link img {
    width: 100%;
    max-width: 160px;
}

.company-link::after {
    content: '';
    position: absolute;
    top: 40%;
    right: -10%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    transform: skew(45deg);
}

.company-link:hover::after {
    right: -15%;
    transition: all .5s;
}

.company-link a {
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.company-link a:hover {
    transition: all .5s;
}

/* -------------------------/運営者について--------------------------- */


/* --------------------留村プログラムで大事にすること---------------------------- */
.important {
    color: white;
}

@media screen and (min-width:769px) {
    .important {
        width: 976px;
        margin: 0 auto 140px;
    }
}

.important-sec {
    height: 100%;
}

.important-title {
    padding-top: 3em;
    font-size: 1rem;
    position: relative;
}

.important-title::after {
    content: '';
    position: absolute;
    width: 160px;
    height: 2px;
    background-color: white;
    bottom: -1%;
    left: -1%;
}

.important-jaTitle {
    font-size: 1.5rem;
    margin-bottom: 4em;
}

.im-sec01, .im-sec02, .im-sec03 {
    padding-bottom: 4em;
    position: relative;
}

.im-sec01::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: url("../img/village.png") no-repeat;
    background-size: contain;
    width: 600px;
    height: 600px;
    bottom: -60%;
    right: 5%;
    opacity: .3;
}

.im-sec03::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: url("../img/important-venn.png") no-repeat;
    background-size: contain;
    width: 350px;
    height: 350px;
    bottom: -0%;
    right: 5%;
    opacity: .4;
}

.im-sec01 h4, .im-sec02 h4, .im-sec03 h4 {
    font-size: 1.2rem;
    position: relative;
    padding-left: 3.5em;
}

.im-sec01 h4::before {
    content: "";
    position: absolute;
    background: url("../img/important-number/important01.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 100vh;
    top: -70%;
    left: -2%;
}

.im-sec02 h4::before {
    content: "";
    position: absolute;
    background: url("../img/important-number/important02.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 100vh;
    top: -70%;
    left: -2%;
}

.im-sec03 h4::before {
    content: "";
    position: absolute;
    background: url("../img/important-number/important03.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 100vh;
    top: -70%;
    left: -2%;
}

.im-text01 span, .im-text02 span, .im-text03 span {
    display: inline-block;
}
/* ----------------/留村プログラムで大事にすること----------------------- */

/* ------------------フッター---------------------------------------- */


.foot {
    color: white;
    height: 100%;
}


@media screen and (min-width:769px) {
    .foot-contents {
        width: 976px;
        margin: 0 auto 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.foot-logo {
    width: 40%;
}

.logo {
    width: 40%;
    max-width: 700px;
}

.logo img {
    width: 100%;
}

.foot-copy {
    font-size: 1rem;
    line-height: 1.6;
}

.foot-company {
    width: 60%;
}

.footName {
    font-size: 1.2em;
    font-weight: bold;
}

.earth-btn {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 2em 0 0 0;
}

.earth-btn img {
    width: 100%;
    max-width: 170px;
}

.earth-btn::after {
    content: '';
    position: absolute;
    top: 40%;
    right: -15%;
    width: 40px;
    height: 8px;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
    transform: skew(45deg);
}

.earth-btn:hover::after {
    right:-20%;
    transition: all .5s;
}

.earth-btn a {
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.earth-btn a:hover {
    transition: all .5s;
}

.earthLink {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: .5em;
}

.earthLink::after {
    content: '';
    position: absolute;
    top: 45%;
    right: -10%;
    width: 30px;
    height: 8px;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
    transform: skew(45deg);
}

.earthLink:hover::after {
    right: -15%;
    transition: all .5s;
}

.earthLink a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 12px 32px;
    transition: all 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.earthLink a:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: all .5s;
}



.copyright {
    text-align: center;
    padding-top: 2em;
}