@charset "UTF-8";

/************************************************************/
/*   背景画像   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    .top_bgImg{
        background-image: url(../img/top/top_contents_back.jpg);
        background-position: center;
        background-repeat: repeat;
        background-size: auto;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    .top_bgImg{
        background-image: url(../img/top/top_contents_back.jpg);
        background-position: center;
        background-repeat: repeat;
        background-size: auto;
    }
}

/************************************************************/
/*   キービジュアル   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    .topKV01_set{
        width: 100%;
        margin: 40px 0;
        background-color: #F4F0EB;
        display: flex;
        justify-content: center;
    }
    .topKV01_set picture{
        width: 100%;
        max-width: 1800px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    .topKV01_set{
        width: 100%;
        margin: 60px 0;
        padding: 50px 0;
        background-color: #F4F0EB;
        display: flex;
        justify-content: center;
    }
    .topKV01_set picture{
        width: 100%;
        max-width: 1800px;
    }
}

/************************************************************/
/*   メニューエリア   */
/************************************************************/
/* 枠組み */
@media screen and (max-width:767px) { /*SP*/
    #topMenu_area{
        padding: 0 0 60px;
    }
    .topMenu01_set{
        width: 100%;
        display: grid;
        gap: 30px;
    }
    .topMenu01_box01{
        display: grid;
        gap: 30px;
        padding: 0 15px;
    }
    .topMenu01_box02{
        padding: 10px 15px 20px;
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 20px 0px 0px 20px;
        margin: 0 0 0 15px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    #topMenu_area{
        padding: 0 0 120px;
    }
    .topMenu01_set{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 50%;
        gap: 40px;
    }
    .topMenu01_box01{
        display: grid;
        justify-items: flex-end;
        align-content: start;
        gap: 50px;
    }
    .topMenu01_box02{
        padding: 10px 20px 20px;
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 20px 0px 0px 20px;
    }
}

/* リンク部分 */
@media screen and (max-width:767px) { /*SP*/
    .topMenu01_link_box{
        width: 100%;
    }
    .topMenu01_link_box a{
        display: block;
        position: relative;
    }
    .topMenu01_link_box a > p{
        position: absolute;
        bottom: 1.8vw;
        left: 5vw;
		font-size: 4vw;
		line-height: 1.5;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topMenu01_link_box{
        /* width: 412px; */
        width: 38.87vw;
    }
    .topMenu01_link_box a{
        display: block;
        position: relative;
    }
    .topMenu01_link_box a > p{
        position: absolute;
        /* bottom: 10px; */
        bottom: 0.94vw;
        /* left: 30px; */
        left: 2.83vw;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topMenu01_link_box{
        width: 412px;
    }
    .topMenu01_link_box a{
        display: block;
        position: relative;
    }
    .topMenu01_link_box a > p{
        position: absolute;
        bottom: 10px;
        left: 30px;
    }
}

/* news部分 */
@media screen and (max-width:767px) { /*SP*/
    .topMenu01_news_set{
        width: 100%;
    }
    .topMenu01_news_key_set{
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 15px;
        margin: 0 0 30px;
    }
    .topMenu01_news_key_box{
        font-size: var(--font45);
        font-weight: normal;
        line-height: 1;
        color: #fff;
    }
    .topMenu01_news_key_link{
        display: block;
        padding: 5px 0;
        color: #fff;
        position: relative;
        z-index: 1;
    }
    .topMenu01_news_key_link::before{
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--brown01);
        transition: var(--transition);
    }
    .topMenu01_news_key_link:hover::before{
        opacity: 0;
    }
    .topMenu01_news_list{
        display: grid;
        gap: 15px;
    }
    .topMenu01_news_box{
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: flex-start;
        gap: 15px;
        color: #fff;
    }
    .topMenu01_news_category{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
    }
    .topMenu01_news_box:hover .topMenu01_news_title,
    .topMenu01_news_box:hover .topMenu01_news_date{
        text-decoration: underline;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topMenu01_news_set{
        width: 100%;
        /* max-width: 480px; */
        max-width: 45.28vw;
    }
    .topMenu01_news_key_set{
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        /* gap: 20px; */
        gap: 1.89vw;
        /* margin: 0 0 30px; */
        margin: 0 0 2.83vw;
    }
    .topMenu01_news_key_box{
        font-size: var(--font60);
        font-weight: normal;
        line-height: 1;
        color: #fff;
    }
    .topMenu01_news_key_link{
        display: block;
        /* padding: 5px; */
        padding: 0.47vw;
        color: #fff;
        position: relative;
        z-index: 1;
    }
    .topMenu01_news_key_link::before{
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        /* height: 3px; */
        height: 0.28vw;
        background-color: var(--brown01);
        transition: var(--transition);
    }
    .topMenu01_news_key_link:hover::before{
        height: 100%;
    }
    .topMenu01_news_list{
        display: grid;
        /* gap: 15px; */
        gap: 1.42vw;
    }
    .topMenu01_news_box{
        display: grid;
        /* grid-template-columns: 90px 1fr; */
        grid-template-columns: 8.49vw 1fr;
        align-items: flex-start;
        /* gap: 15px; */
        gap: 1.42vw;
        color: #fff;
    }
    .topMenu01_news_category{
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding: 5px; */
        padding: 0.47vw;
        /* border-radius: 5px; */
        border-radius: 0.47vw;
        color: #fff;
    }
    .topMenu01_news_box:hover .topMenu01_news_title,
    .topMenu01_news_box:hover .topMenu01_news_date{
        text-decoration: underline;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topMenu01_news_set{
        width: 100%;
        max-width: 480px;
    }
    .topMenu01_news_key_set{
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 20px;
        margin: 0 0 30px;
    }
    .topMenu01_news_key_box{
        font-size: var(--font60);
        font-weight: normal;
        line-height: 1;
        color: #fff;
    }
    .topMenu01_news_key_link{
        display: block;
        padding: 5px;
        color: #fff;
        position: relative;
        z-index: 1;
    }
    .topMenu01_news_key_link::before{
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--brown01);
        transition: var(--transition);
    }
    .topMenu01_news_key_link:hover::before{
        height: 100%;
    }
    .topMenu01_news_list{
        display: grid;
        gap: 15px;
    }
    .topMenu01_news_box{
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: flex-start;
        gap: 15px;
        color: #fff;
    }
    .topMenu01_news_category{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
    }
    .topMenu01_news_box:hover .topMenu01_news_title,
    .topMenu01_news_box:hover .topMenu01_news_date{
        text-decoration: underline;
    }
}

/************************************************************/
/*   トップ　共通   */
/************************************************************/
/* リンクセット01 */
@media screen and (max-width:767px) { /*SP*/
    .topCMM_link_set{
        display: grid;
        justify-items: center;
        gap: 30px;
        padding: 0 15px;
    }
    .topCMM_link_box{
        display: block;
        width: 75vw;
        max-width: 320px;
    }
    .topCMM_link_title{
        height: 70px;
        background-color: #fff;
        padding: 15px 30px 15px 20px;
    }
    .topCMM_link_title p{
        padding: 0 0 5px;
        position: relative;
    }
    .topCMM_link_title p::before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 95%;
        height: 3px;
        background-color: var(--brown01);
    }
    .topCMM_link_title p::after{
        content: '';
        position: absolute;
        bottom: -9px;
        right: 5%;
        width: 12px;
        height: 20px;
        background-image: url(../img/common/linkafter_arr.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topCMM_link_set{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        /* gap: 30px 25px; */
        gap: 2.83vw 2.36vw;
    }
    .topCMM_link_box{
        display: block;
    }
    .topCMM_link_title{
        /* height: 70px; */
        height: 6.60vw;
        background-color: #fff;
        /* padding: 15px 30px 15px 20px; */
        padding: 1.42vw 2.83vw 1.42vw 1.89vw;
    }
    .topCMM_link_title p{
        /* padding: 0 0 5px; */
        padding: 0 0 0.47vw;
        position: relative;
    }
    .topCMM_link_title p::before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        /* width: 240px; */
        width: 22.64vw;
        /* height: 3px; */
        height: 0.28vw;
        background-color: var(--brown01);
    }
    .topCMM_link_title p::after{
        content: '';
        position: absolute;
        /* bottom: -9px; */
        bottom: -0.85vw;
        /* right: 10px; */
        right: 0.94vw;
        /* width: 12px; */
        width: 1.13vw;
        /* height: 20px; */
        height: 1.89vw;
        background-image: url(../img/common/linkafter_arr.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topCMM_link_set{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px 25px;
    }
    .topCMM_link_box{
        display: block;
    }
    .topCMM_link_title{
        height: 70px;
        background-color: #fff;
        padding: 15px 30px 15px 20px;
    }
    .topCMM_link_title p{
        padding: 0 0 5px;
        position: relative;
    }
    .topCMM_link_title p::before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 240px;
        height: 3px;
        background-color: var(--brown01);
    }
    .topCMM_link_title p::after{
        content: '';
        position: absolute;
        bottom: -9px;
        right: 10px;
        width: 12px;
        height: 20px;
        background-image: url(../img/common/linkafter_arr.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

/************************************************************/
/*   十和田の暮らしのコト   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #topLife_area{
        padding: 0 0 60px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    #topLife_area{
        padding: 0 0 90px;
    }
}

@media screen and (max-width:767px) { /*SP*/
    .topLife01_key_box{
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0px 150px 150px 0px;
        padding: 30px 30px 20px 15px;
        margin: 0 0 0 -15px;
    }
    .topLife01_key_box img{
        width: 100%;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topLife01_key_box{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        /* border-radius: 50px; */
        border-radius: 4.72vw;
        /* padding: 30px 15px; */
        padding: 2.83vw 1.42vw;
    }
    .topLife01_key_box img{
        /* width: 160px; */
        width: 15.09vw;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topLife01_key_box{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 50px;
        padding: 30px 15px;
    }
    .topLife01_key_box img{
        width: 160px;
    }
}

/************************************************************/
/*   移住のコト   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #topMove_area{
        padding: 0 0 60px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    #topMove_area{
        padding: 0 0 90px;
        overflow: hidden;
    }
}

@media screen and (max-width:767px) { /*SP*/
    .topMove01_key_box{
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0px 150px 150px 0px;
        padding: 30px 30px 20px 15px;
        margin: 0 0 0 -15px;
    }
    .topMove01_key_box img{
        width: 95%;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topMove01_key_box{
        grid-column: 1 / 4;
        /* width: 480px; */
        width: 45.28vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        /* border-radius: 0px 130px 130px 0px; */
        border-radius: 0.00vw 12.26vw 12.26vw 0.00vw;
        /* padding: 15px 30px 15px 15px; */
        padding: 1.42vw 2.83vw 1.42vw 1.42vw;
        position: relative;
        z-index: 1;
    }
    .topMove01_key_box::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        /* left: calc(-50vw + 240px); */
        left: calc(-50vw + 22.64vw);
        width: 50vw;
        height: 100%;
        background-color: #fff;
    }
    .topMove01_key_box img{
        /* width: 323px; */
        width: 30.47vw;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topMove01_key_box{
        grid-column: 1 / 4;
        width: 480px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 0px 130px 130px 0px;
        padding: 15px 30px 15px 15px;
        position: relative;
        z-index: 1;
    }
    .topMove01_key_box::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: calc(-50vw + 240px);
        width: 50vw;
        height: 100%;
        background-color: #fff;
    }
    .topMove01_key_box img{
        width: 323px;
    }
}

/************************************************************/
/*   バナーリンク   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #topLink_area{
        padding: 0 0 60px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    #topLink_area{
        padding: 0 0 120px;
        overflow: hidden;
    }
}

@media screen and (max-width:767px) { /*SP*/
    .topLink01_set{
        width: 100%;
        display: grid;
        gap: 25px;
    }
    .topLink01_box{
        width: 100%;
        padding: 0 0 0 15px;
    }
    .topLink01_bnr{
        display: block;
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    .topLink01_set{
        width: 100%;
        display: grid;
        /* gap: 30px; */
        gap: 2.83vw;
    }
    .topLink01_box{
        /* width: 930px; */
        width: 87.74vw;
        position: relative;
        z-index: 1;
    }
    .topLink01_box::after{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        /* right: calc(-1 * (100vw - 930px) /2 - 15px); */
        right: calc(-1 * (100vw - 87.74vw) /2 - 1.42vw);
        /* width: calc((100vw - 930px) /2 + 15px); */
        width: calc((100vw - 87.74vw) /2 + 1.42vw);
        height: 100%;
    }
    .topLink01_box.topLink01_spot::after{
        background-image: url(../img/top/top_bnr_sptback_pc.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topLink01_box.topLink01_info::after{
        background-image: url(../img/top/top_bnr_infoback_pc.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topLink01_bnr{
        display: block;
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    .topLink01_set{
        width: 100%;
        display: grid;
        gap: 30px;
    }
    .topLink01_box{
        width: 930px;
        position: relative;
        z-index: 1;
    }
    .topLink01_box::after{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        right: calc(-1 * (100vw - 930px) /2 - 15px);
        width: calc((100vw - 930px) /2 + 15px);
        height: 100%;
    }
    .topLink01_box.topLink01_spot::after{
        background-image: url(../img/top/top_bnr_sptback_pc.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topLink01_box.topLink01_info::after{
        background-image: url(../img/top/top_bnr_infoback_pc.png);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .topLink01_bnr{
        display: block;
    }
}

/************************************************************/
/*   移10生活リンク   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #i10_link_area{
        padding: 20px 0 0;
    }
    .i10_link_wrap{
        width: 85%;
        padding: 20px 15px;
        display: grid;
        gap: 25px;
        background-color: var(--brown01);
        position: relative;
    }
    .i10_link_wrap::after{
        content: '';
        position: absolute;
        top: 0;
        right: -35px;
        width: 35px;
        height: 100%;
        aspect-ratio: 1 / 2;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: var(--brown01);
    }
    .i10_link_key{
        font-size: var(--font26);
        color: #fff;
        line-height: 1.5;
    }
    .i10_link_list{
        display: flex;
        flex-wrap: wrap;
        gap: 10px 0;
        padding: 0 0 0 1px;
    }
    .i10_link_list li{
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        margin: 0 0 0 -1px;
    }
    .i10_link_list li a{
        display: block;
        padding: 0 10px;
        color: #fff;
        background-color: var(--brown01);
        font-size: var(--font14);
    }
    .i10_link_list li a:hover{
        color: #fff;
        background-color: var(--brown02);
    }
    .i10_link_set{
        width: 100%;
        display: grid;
    }
    .i10_link_box{
        width: 85%;
        display: flex;
        align-items: center;
        padding: 20px 0 20px 15px;
        font-size: var(--font18);
        position: relative;
        z-index: 1;
    }
    .i10_link_box::before{
    }
    .i10_link_box::after{
        content: '';
        position: absolute;
        top: 0;
        right: -35px;
        width: 35px;
        height: 100%;
        aspect-ratio: 1 / 2;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: #fff;
    }
    .i10_link_01{
        color: var(--brown02);
        background-color: #fff;
    }
    .i10_link_01::before{
    }
    .i10_link_01::after{
        background-color: #fff;
    }
    .i10_link_01:hover{
        color: #000;
    }
    .i10_link_02{
        color: #fff;
        background-color: var(--red02);
    }
    .i10_link_02::before{
    }
    .i10_link_02::after{
        background-color: var(--red02);
    }
    .i10_link_02:hover{
        color: var(--brown01);
    }
}
@media screen and (min-width:768px) and ( max-width:1059px) { /*TB*/
    #i10_link_area{
        overflow: hidden;
    }
    .i10_link_wrap{
        width: 100%;
        /* padding: 20px 0 15px 30px; */
        padding: 1.89vw 0 1.42vw 2.83vw;
        display: grid;
        /* gap: 15px; */
        gap: 1.42vw;
    }
    .i10_link_key{
        font-size: var(--font36);
        color: var(--brown02);
    }
    .i10_link_list{
        display: flex;
        flex-wrap: wrap;
        /* padding: 0 0 0 1px; */
        padding: 0 0 0 0.09vw;
    }
    .i10_link_list li{
        /* border-left: 1px solid var(--brown02); */
        border-left: 0.09vw solid var(--brown02);
        /* border-right: 1px solid var(--brown02); */
        border-right: 0.09vw solid var(--brown02);
        /* margin: 0 0 0 -1px; */
        margin: 0 0 0 -0.09vw;
    }
    .i10_link_list li a{
        display: block;
        /* padding: 0 10px; */
        padding: 0 0.94vw;
        color: var(--brown02);
        background-color: #fff;
    }
    .i10_link_list li a:hover{
        color: #fff;
        background-color: var(--brown02);
    }
    .i10_link_set{
        width: 100%;
        display: grid;
    }
    .i10_link_box{
        display: flex;
        align-items: center;
        /* height: 50px; */
        height: 4.72vw;
        /* padding: 5px 10px 5px 30px; */
        padding: 0.47vw 0.94vw 0.47vw 2.83vw;
        color: #fff;
        font-size: var(--font20);
        position: relative;
        z-index: 1;
    }
    .i10_link_box::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        /* left: calc(-50vw + 480px); */
        left: calc(-50vw + 45.28vw);
        width: 50vw;
        height: 100%;
    }
    .i10_link_box::after{
        content: '';
        position: absolute;
        top: 0;
        /* right: -25px; */
        right: -2.36vw;
        /* width: 25px; */
        width: 2.36vw;
        height: 100%;
        aspect-ratio: 1 / 2;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: #fff;
    }
    .i10_link_01{
        background-color: var(--brown01);
        /* width: 870px; */
        width: 82.08vw;
    }
    .i10_link_01::before{
        background-color: var(--brown01);
    }
    .i10_link_01::after{
        background-color: var(--brown01);
    }
    .i10_link_01:hover{
        color: #000;
    }
    .i10_link_02{
        background-color: var(--red02);
        /* width: 830px; */
        width: 78.30vw;
    }
    .i10_link_02::before{
        background-color: var(--red02);
    }
    .i10_link_02::after{
        background-color: var(--red02);
    }
    .i10_link_02:hover{
        color: var(--brown01);
    }
}
@media screen and (min-width:1060px) , print { /*PC*/
    #i10_link_area{
        overflow: hidden;
    }
    .i10_link_wrap{
        width: 100%;
        padding: 20px 0 15px 30px;
        display: grid;
        gap: 15px;
    }
    .i10_link_key{
        font-size: var(--font36);
        color: var(--brown02);
    }
    .i10_link_list{
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 0 1px;
    }
    .i10_link_list li{
        border-left: 1px solid var(--brown02);
        border-right: 1px solid var(--brown02);
        margin: 0 0 0 -1px;
    }
    .i10_link_list li a{
        display: block;
        padding: 0 10px;
        color: var(--brown02);
        background-color: #fff;
    }
    .i10_link_list li a:hover{
        color: #fff;
        background-color: var(--brown02);
    }
    .i10_link_set{
        width: 100%;
        display: grid;
    }
    .i10_link_box{
        display: flex;
        align-items: center;
        height: 50px;
        padding: 5px 10px 5px 30px;
        color: #fff;
        font-size: var(--font20);
        position: relative;
        z-index: 1;
    }
    .i10_link_box::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: calc(-50vw + 480px);
        width: 50vw;
        height: 100%;
    }
    .i10_link_box::after{
        content: '';
        position: absolute;
        top: 0;
        right: -25px;
        width: 25px;
        height: 100%;
        aspect-ratio: 1 / 2;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: #fff;
    }
    .i10_link_01{
        background-color: var(--brown01);
        width: 870px;
    }
    .i10_link_01::before{
        background-color: var(--brown01);
    }
    .i10_link_01::after{
        background-color: var(--brown01);
    }
    .i10_link_01:hover{
        color: #000;
    }
    .i10_link_02{
        background-color: var(--red02);
        width: 830px;
    }
    .i10_link_02::before{
        background-color: var(--red02);
    }
    .i10_link_02::after{
        background-color: var(--red02);
    }
    .i10_link_02:hover{
        color: var(--brown01);
    }
}