@charset "utf-8";
/*header footer*/
.sectionWrap{
    width:100%;
    max-width:1400px;
    margin:0 auto
}
@media only screen and (max-width: 1440px){
    .sectionWrap{
        max-width:92%;
        padding:0
    }
}
@media only screen and (max-width: 1440px){
    .sectionWrap{
        max-width:92%;
        padding:0
    }
}
@media only screen and (max-width: 767px){
    .sectionWrap{
        max-width:88%
    }
}

header,
footer,
.globalNavBg,
.sec-relatedGroups,
.sec-snsLogo{
    position:relative;
    overflow:hidden;
    font-weight:400;
    font-size:1.4rem;
    line-height:1.6;
    background:#fff;
    color:#333;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    width:100%;
    margin:auto;
    text-rendering:optimizeLegibility;
    font-kerning:normal;
    font-variant-ligatures:common-ligatures contextual;
    font-feature-settings:"kern", "liga", "clig", "calt";
    font-display:optional;
    font-family:YakuHanJP_Noto, 'Roboto', "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
header img,
footer img,
.globalNavBg img,
.sec-relatedGroups img,
.sec-snsLogo img{
    display: inline;
    width: auto;
    height: auto;
}
footer img,
.globalNavBg img,
.sec-relatedGroups img,
.sec-snsLogo img{
    vertical-align:initial;
}
header p,
footer p,
.globalNavBg p,
.sec-relatedGroups p,
.sec-snsLogo p{
    line-height:1.6;
}
.sanserif{
    font-family:YakuHanJP_Noto, 'Roboto', "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}
.serif{
    font-family:YakuHanMP_Noto, 'Cinzel',"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif
}
#pxBase.hidden,footer.hidden,.sec-relatedGroups.hidden,.sec-snsLogo.hidden{
    opacity:0
}
header{
    position:fixed;
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    align-items:flex-end;
    width:100%;
    padding:18px 0 0 40px;
    background:#fff;
    border-bottom:1px solid #F6F6F5;
    z-index:999
}
@media only screen and (max-width: 1280px){
    header{
        padding:18px 0 0 25px
    }
}
@media only screen and (max-width: 1024px){
    header{
        align-items:center;
        padding:0
    }
}
@media only screen and (max-width: 1024px){
    header .logoWrapBg{
        position:relative;
        z-index:100;
        width:100%;
        padding:20px 20px 20px 10px;
        background:#fff
    }
}
header .logoWrap{
    margin-bottom:41px;
    font-size:1.4rem;
    line-height: 1.6;
}
@media only screen and (max-width: 1024px){
    header .logoWrap{
        position:relative;
        top:inherit;
        left:inherit;
        width:256px;
        height:28px;
        margin-bottom:0
    }
}
@media only screen and (max-width: 1200px){
    header .logoWrap{
        margin-bottom:43px
    }
}
@media only screen and (max-width: 1024px){
    header .logoWrap{
        margin-bottom:0
    }
}
header .logoWrap a{
    display:block;
    color:#252E31;
    text-align:center
}
header .logoWrap img{
    width:117px;
    margin-right:10px;
    vertical-align:middle
}
@media only screen and (max-width: 1200px){
    header .logoWrap img{
        width:100px;
        margin-right:5px
    }
}
header .logoWrap .siteName{
    display:inline-block;
    margin:5px 0 0;
    font-size:14px;
    font-weight:700;
    transform:translateY(2px)
}
@media only screen and (max-width: 1200px){
    header .logoWrap .siteName{
        font-size:12px
    }
}
@media only screen and (max-width: 1200px){
    header .logoWrap .siteName{
        width:auto;
        font-size:11px
    }
}
@media only screen and (max-width: 1024px){
    header nav{
        width:auto
    }
}
header nav .btnListWrap{
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-end;
    padding-right:30px
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap{
        padding:0 5%
    }
}
@media only screen and (max-width: 360px){
    header nav .btnListWrap{
        padding:0 4%
    }
}
header nav .btnListWrap .linkBtnList{
    display:flex;
    flex-flow:row wrap;
    align-items:center
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList{
        width:100%;
        margin:10px 0 0
    }
}
header nav .btnListWrap .linkBtnList>li{
    position:relative
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li{
        display:none;
        margin:10px 0;
        width:calc(100% / 3);
        text-align:center
    }
}
@media only screen and (max-width: 375px){
    header nav .btnListWrap .linkBtnList>li{
        line-height:1.1
    }
}
header nav .btnListWrap .linkBtnList>li br.smp_se{
    display:none
}
@media only screen and (max-width: 375px){
    header nav .btnListWrap .linkBtnList>li br.smp_se{
        display:block
    }
}
header nav .btnListWrap .linkBtnList>li+li{
    margin-left:15px;
    padding-left:15px
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li+li{
        margin-left:0;
        padding-left:0
    }
}
header nav .btnListWrap .linkBtnList>li+li::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    display:inline-block;
    width:1px;
    height:20px;
    background:#EAEAE5
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li+li::before{
        display:none
    }
}
header nav .btnListWrap .linkBtnList>li>a{
    font-size:12px;
    font-weight:500;
    color:#252E31;
    transition:all .4s
}
header nav .btnListWrap .linkBtnList>li>a:hover{
    text-decoration:underline
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li>a:hover{
        text-decoration:none
    }
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li a::before{
        display:block;
        text-align:center;
        font-size:24px;
        font-family:'Material Symbols Outlined';
        line-height:1.1
    }
    header nav .btnListWrap .linkBtnList>li:nth-of-type(1) a::before{
        content:"\e032"
    }
    header nav .btnListWrap .linkBtnList>li:nth-of-type(2) a::before{
        content:"\f1d0"
    }
    header nav .btnListWrap .linkBtnList>li:nth-of-type(3) a::before{
        content:"\e7fd"
    }
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li.contact{
        width:100%;
        margin:5px 0 15px
    }
}
header nav .btnListWrap .linkBtnList>li.contact::before{
    display:none
}
header nav .btnListWrap .linkBtnList>li.contact>a{
    position:relative;
    display:block;
    padding:10px 25px;
    background:#36663A;
    color:#fff;
    text-decoration:none;
    border-radius:25px;
    overflow:hidden
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .linkBtnList>li.contact>a{
        padding:12px 12px;
        width:100%
    }
    header nav .btnListWrap .linkBtnList>li.contact>a .btnText{
        justify-content:center;
        font-size:14px
    }
}
header nav .btnListWrap .snsBtnList{
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    margin-left:20px
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .snsBtnList{
        margin:5px 0 20px
    }
}
header nav .btnListWrap .snsBtnList>li+li{
    margin-left:13px
}
header nav .btnListWrap .snsBtnList>li a{
    display:flex;
    align-items:center;
    width:28px
}
header nav .btnListWrap .snsBtnList>li a img{
    width:100%
}
@media only screen and (max-width: 1024px){
    header nav .btnListWrap .snsBtnList{
        display:none
    }
    header nav .btnListWrap .snsBtnList.active{
        display:flex !important;
        justify-content:center;
        width:100%
    }
}
header nav .globalnavListWrap{
    margin-top:5px
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        margin-top:0;
        opacity:0;
        pointer-events:none;
        transition:all .4s;
        overflow-y:scroll;
        align-items:flex-start;
        background-color: #fff;
    }
}
header nav .globalnavListWrap.active{
    opacity:1;
    pointer-events:auto
}
header nav .globalnavListWrap .globalnavList{
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-end
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap .globalnavList{
        justify-content:flex-start
    }
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap .globalnavList{
        width:100%;
        padding-top:69px
    }
}
header nav .globalnavListWrap .globalnavList>li{
    width:130px
}
@media only screen and (max-width: 1280px){
    header nav .globalnavListWrap .globalnavList>li{
        width:115px
    }
    header nav .globalnavListWrap .globalnavList>li.reformPage{
        width:130px
    }
}
@media only screen and (max-width: 1200px){
    header nav .globalnavListWrap .globalnavList>li{
        width:100px
    }
    header nav .globalnavListWrap .globalnavList>li.reformPage{
        width:125px
    }
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap .globalnavList>li{
        width:100%
    }
    header nav .globalnavListWrap .globalnavList>li.reformPage{
        width:100%
    }
}
header nav .globalnavListWrap .globalnavList>li>a{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:15px 0;
    font-size:14px;
    font-weight:500;
    color:#252E31
}
header nav .globalnavListWrap .globalnavList>li>a::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    display:inline-block;
    width:1px;
    height:20px;
    background:#EAEAE5
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap .globalnavList>li>a::before{
        display:none
    }
}
header nav .globalnavListWrap .globalnavList>li>a::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:3px;
    background:#f6f6f4;
    transition:all .6s
}
header nav .globalnavListWrap .globalnavList>li.reform a{
    width:150px
}
@media only screen and (max-width: 1024px){
    header nav .globalnavListWrap .globalnavList>li.reform a{
        width:100%
    }
}
header nav .globalnavListWrap .globalnavList>li.is-current a::after,header nav .globalnavListWrap .globalnavList>li.active a::after{
    background:#36663A
}
@media only screen and (min-width: 1025px){
    header nav .globalnavListWrap .globalnavList>li:hover a::after{
        background:#36663A
    }
}
header .headerBtns{
    display:none
}
@media only screen and (max-width: 1024px){
    header .headerBtns{
        display:block;
        position:absolute;
        top:54%;
        right:20px;
        transform:translateY(-50%);
        z-index:20;
        transition:1s all ease-in-out;
        overflow:hidden;
        z-index:999
    }
}
header .headerBtns.is-view{
    opacity:1;
    overflow:visible
}
header .headerBtns.is-view a>span{
    display:inline-block;
    width:auto;
    opacity:1
}
@media only screen and (max-width: 1024px){
    header .headerBtns .menu-trigger{
        position:relative;
        z-index:100;
        display:flex;
        flex-flow:column;
        justify-content:center;
        align-items:center;
        width:40px;
        height:35px;
        padding:0;
        cursor:pointer;
        transition:.3s all ease-in-out
    }
}
@media only screen and (max-width: 1024px){
    header .headerBtns .menu-trigger .hamburger{
        position:relative;
        width:40px
    }
}
header .headerBtns .menu-trigger span{
    display:inline-block;
    position:absolute;
    left:0;
    width:100%;
    height:1px;
    background-color:#36663A;
    transition:all .4s
}
header .headerBtns .menu-trigger span:nth-of-type(1){
    top:0;
    animation:menu-bar .75s forwards
}
header .headerBtns .menu-trigger span:nth-of-type(2){
    top:5px;
    animation:menu-bar .75s forwards
}
header .headerBtns .menu-trigger span:nth-of-type(3){
    top:10px;
    animation:menu-bar .75s forwards
}
header .headerBtns .menu-trigger.active span{
    background-color:#36663A !important
}
header .headerBtns .menu-trigger.active span:nth-of-type(1){
    animation:active-menu-bar01 .75s forwards
}
header .headerBtns .menu-trigger.active span:nth-of-type(2){
    animation:active-menu-bar02 .75s forwards
}
header .headerBtns .menu-trigger.active span:nth-of-type(3){
    width:100%;
    animation:active-menu-bar03 .75s forwards
}
header .headerBtns .menu-trigger .name{
    margin-top:15px;
    font-size:12px;
    font-weight:500;
    color:#36663A;
    text-align:center
}
header .headerBtns .is_scroll .menu-trigger{
    background:rgba(48,47,44,0.95)
}
@keyframes menu-bar{
    0%{
        transform:scale(0);
        transform-origin:left
    }
    100%{
        transform:scale(1);
        transform-origin:left
    }
}
@keyframes active-menu-bar01{
    0%{
        transform:translateY(0) rotate(0)
    }
    50%{
        transform:translateY(6px) rotate(0)
    }
    100%{
        transform:translateY(6px) rotate(20deg)
    }
}
@keyframes active-menu-bar02{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@keyframes active-menu-bar03{
    0%{
        transform:translateY(0) rotate(0)
    }
    50%{
        transform:translateY(-4px) rotate(0)
    }
    100%{
        transform:translateY(-4px) rotate(-20deg);
        width:100%
    }
}
.globalNavBg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    mix-blend-mode: multiply;
}
.sns_modal_title_1{
    width:100%;
    text-align:center;
    margin-bottom:10px
}
.sns_modal_title_2{
    width:100%;
    text-align:center;
    margin-bottom:10px
}
.sns_modal_title_img_1{
    height:25px;
    width: auto;
    display: inline;
    filter: none !important;
}
.sns_modal_title_img_2{
    height:30px;
    width: auto;
    display: inline;
    filter: none !important;
}
.sns_modal_icon_group{
    margin-top:20px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif !important
}
.sns_modal_icon_item{
    width:40%;
    padding-bottom:20px;
    text-align:center
}
.sns_modal_icon_item a{
    width:70%
}
.sns_modal_icon_item img{
    width:100%
}
.sns_modal_icon_item_title{
    margin-top:10px;
    font-size:12px
}
@media screen and (max-width: 1024px){
    .sns_modal_icon_item{
        width:45%;
        margin:0 2.5%
    }
    .modaal-container{
        border-radius:15px;
        overflow:hidden
    }
    .modaal-content-container{
        padding:30px 5% 15px
    }
    .sns_modal_icon_item_title{
        margin-top:0
    }
}
@media screen and (min-width: 364px){
    .sns_modal_icon_group{
        margin-top:30px
    }
    .sns_modal_icon_item{
        width:23%;
        margin:0 1%;
        padding-bottom:30px
    }
    .sns_modal_icon_item a{
        width:70%
    }
    .sns_modal_icon_item_title{
        font-size:14px
    }
}
.globalnavList li .subs{
    display:none;
    position:fixed;
    z-index:3;
    top:115px;
    left:0;
    right:0;
    padding:30px 0;
    background:#F6F6F5
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs{
        position:static;
        padding:0
    }
}
.globalnavList li .subs ul{
    display:flex;
    justify-content:center
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs ul{
        flex-wrap:wrap;
        justify-content:flex-start;
        margin-top:0;
        padding:10px 2.5%;
        text-align:left
    }
}
.globalnavList li .subs li{
    max-width:210px;
    margin:0 10px
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs li{
        width:22.5%;
        margin:10px 1.25%;
        text-align:center
    }
}
@media only screen and (max-width: 767px){
    .globalnavList li .subs li{
        width:47.5%
    }
}
.globalnavList li .subs li figure{
    border-radius:15px;
    overflow:hidden
}
.globalnavList li .subs li figure img{
    width:100%;
    height:auto
}
.globalnavList li .subs li p{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    margin-top:5px;
    font-size:14px;
    font-weight:500;
    color:#252E31
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs li p{
        font-size:12px;
        letter-spacing:-0.01em
    }
}
.globalnavList li .subs li p .icn{
    position:relative;
    display:block;
    width:20px;
    height:20px;
    margin-left:10px;
    background:#36663A;
    border-radius:20px
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs li p .icn{
        width:14px;
        height:14px;
        margin-left:4px
    }
}
.globalnavList li .subs li p .icn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-70%, -50%) rotate(45deg);
    width:7px;
    height:7px;
    border-top:solid 1px #fff;
    border-right:solid 1px #fff
}
@media only screen and (max-width: 1024px){
    .globalnavList li .subs li p .icn::before{
        width:5px;
        height:5px
    }
}
@media only screen and (max-width: 1024px){
    .accordion_icon,.accordion_icon span{
        display:inline-block;
        transition:all .4s;
        box-sizing:border-box
    }
    .accordion_icon{
        position:absolute;
        top:0;
        bottom:0;
        right:8%;
        width:14px;
        height:14px;
        margin:auto
    }
    .accordion_icon span{
        position:absolute;
        width:100%;
        height:2px;
        background-color:#36663A;
        border-radius:4px
    }
    .accordion_icon span:nth-of-type(1){
        top:5px;
        transform:rotate(0deg)
    }
    .accordion_icon span:nth-of-type(2){
        top:5px;
        transform:rotate(90deg)
    }
    .accordion_icon.active span:nth-of-type(1){
        display:none
    }
    .accordion_icon.active span:nth-of-type(2){
        top:5px;
        transform:rotate(180deg)
    }
}
footer{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    padding-top:75px;
    background:#36663A
}
@media only screen and (max-width: 767px){
    footer{
        padding-top:35px
    }
}
footer .footerColumnWrap{
    display:flex;
    flex-flow:row wrap;
    padding-bottom:75px
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap{
        width:100%;
        max-width:100%;
        padding-bottom:35px
    }
}
footer .footerColumnWrap .footerLeft{
    width:70%
}
@media only screen and (max-width: 1024px){
    footer .footerColumnWrap .footerLeft{
        width:55%
    }
}
@media only screen and (max-width: 991px){
    footer .footerColumnWrap .footerLeft{
        width:60%
    }
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft{
        width:100%;
        padding:0 30px
    }
}
footer .footerColumnWrap .footerLeft .footerLogo{
    width:115px
}
footer .footerColumnWrap .footerLeft .footerLicence{
    margin-top:50px
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft .footerLicence{
        margin-top:25px
    }
}
footer .footerColumnWrap .footerLeft .footerLicence p{
    font-size:12px;
    font-weight:400;
    color:#fff;
    line-height:2
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft .footerLicence p{
        font-size:10px
    }
}
footer .footerColumnWrap .footerLeft .footerBtnLink{
    display:flex;
    flex-flow:row wrap;
    margin-top:50px
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft .footerBtnLink{
        margin-top:25px
    }
}
footer .footerColumnWrap .footerLeft .footerBtnLink a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:170px;
    height:40px;
    background:#fff;
    border-radius:60px;
    font-size:14px;
    font-weight:400;
    color:#252E31
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft .footerBtnLink a{
        width:150px;
        height:35px;
        font-size:13px
    }
}
@media only screen and (max-width: 360px){
    footer .footerColumnWrap .footerLeft .footerBtnLink a{
        width:145px
    }
}
footer .footerColumnWrap .footerLeft .footerBtnLink a+a{
    margin-left:15px
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerLeft .footerBtnLink a+a{
        margin-left:10px
    }
}
@media only screen and (max-width: 360px){
    footer .footerColumnWrap .footerLeft .footerBtnLink a+a{
        margin-left:5px
    }
}
footer .footerColumnWrap .footerRight{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    width:30%
}
@media only screen and (max-width: 1024px){
    footer .footerColumnWrap .footerRight{
        width:45%
    }
}
@media only screen and (max-width: 991px){
    footer .footerColumnWrap .footerRight{
        width:40%
    }
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight{
        width:100%;
        margin-top:35px;
        padding-top:30px;
        border-top:1px solid rgba(255,255,255,0.3)
    }
}
footer .footerColumnWrap .footerRight .footerLinkList{
    width:50%
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList{
        display:flex;
        flex-flow:row wrap;
        width:100%;
        padding:0 10%
    }
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList li{
        width:calc(100% / 2)
    }
}
footer .footerColumnWrap .footerRight .footerLinkList li+li{
    margin-top:20px;
    line-height: 1;
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList li+li{
        margin-top:0
    }
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList li:nth-child(n+3){
        margin-top:20px
    }
}
footer .footerColumnWrap .footerRight .footerLinkList li a{
    font-size:13px;
    font-weight:400;
    color:#fff;
    transition:all .4s
}
footer .footerColumnWrap .footerRight .footerLinkList li a:hover{
    text-decoration:underline
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList li a:hover{
        text-decoration:none
    }
}
@media only screen and (max-width: 375px){
    footer .footerColumnWrap .footerRight .footerLinkList li a{
        font-size:12px
    }
}
@media only screen and (max-width: 767px){
    footer .footerColumnWrap .footerRight .footerLinkList+.footerLinkList{
        margin-top:35px;
        padding-top:30px;
        border-top:1px solid rgba(255,255,255,0.3)
    }
}
footer .footerCopyright{
    width:100%;
    padding:15px 0 10px;
    background:#2B5A2F
}
footer .footerCopyright p{
    font-size:12px;
    color:#fff;
    text-align:center
}
main,.sec-relatedGroups,.sec-snsLogo{
    padding-top:115px
}
@media only screen and (max-width: 1024px){
    main,.sec-relatedGroups,.sec-snsLogo{
        padding-top:69px
    }
}
main .bgGray,.sec-relatedGroups .bgGray,.sec-snsLogo .bgGray{
    background:#F6F6F5
}
main .sectionText,.sec-relatedGroups .sectionText,.sec-snsLogo .sectionText{
    font-size:30px;
    font-weight:400;
    font-family:'Shippori Mincho', serif
}
@media only screen and (max-width: 767px){
    main .sectionText,.sec-relatedGroups .sectionText,.sec-snsLogo .sectionText{
        font-size:24px
    }
}
main .sectionText .small,.sec-relatedGroups .sectionText .small,.sec-snsLogo .sectionText .small{
    font-size:18px
}
@media only screen and (max-width: 767px){
    main .sectionText .small,.sec-relatedGroups .sectionText .small,.sec-snsLogo .sectionText .small{
        font-size:16px
    }
}
main .sec-breadcrumb,.sec-relatedGroups .sec-breadcrumb,.sec-snsLogo .sec-breadcrumb{
    padding:15px 50px;
    line-height:1
}
@media only screen and (max-width: 767px){
    main .sec-breadcrumb,.sec-relatedGroups .sec-breadcrumb,.sec-snsLogo .sec-breadcrumb{
        padding:10px 20px
    }
}
main .sec-breadcrumb ol,.sec-relatedGroups .sec-breadcrumb ol,.sec-snsLogo .sec-breadcrumb ol{
    display:flex;
    flex-flow:row wrap;
    align-items:center
}
main .sec-breadcrumb ol>li>a,main .sec-breadcrumb ol>li>p,.sec-relatedGroups .sec-breadcrumb ol>li>a,.sec-relatedGroups .sec-breadcrumb ol>li>p,.sec-snsLogo .sec-breadcrumb ol>li>a,.sec-snsLogo .sec-breadcrumb ol>li>p{
    font-size:13px;
    color:#252E31
}
@media only screen and (max-width: 767px){
    main .sec-breadcrumb ol>li>a,main .sec-breadcrumb ol>li>p,.sec-relatedGroups .sec-breadcrumb ol>li>a,.sec-relatedGroups .sec-breadcrumb ol>li>p,.sec-snsLogo .sec-breadcrumb ol>li>a,.sec-snsLogo .sec-breadcrumb ol>li>p{
        font-size:11px
    }
}
main .sec-breadcrumb ol>li>a:hover,.sec-relatedGroups .sec-breadcrumb ol>li>a:hover,.sec-snsLogo .sec-breadcrumb ol>li>a:hover{
    text-decoration:underline !important
}
main .sec-breadcrumb ol>li+li,.sec-relatedGroups .sec-breadcrumb ol>li+li,.sec-snsLogo .sec-breadcrumb ol>li+li{
    position:relative;
    margin-left:15px;
    padding-left:20px
}
@media only screen and (max-width: 767px){
    main .sec-breadcrumb ol>li+li,.sec-relatedGroups .sec-breadcrumb ol>li+li,.sec-snsLogo .sec-breadcrumb ol>li+li{
        margin-left:10px;
        padding-left:15px
    }
}
main .sec-breadcrumb ol>li+li::before,.sec-relatedGroups .sec-breadcrumb ol>li+li::before,.sec-snsLogo .sec-breadcrumb ol>li+li::before{
    content:'';
    width:7px;
    height:7px;
    border-top:solid 1px #252E31;
    border-right:solid 1px #252E31;
    position:absolute;
    left:-3.5px;
    top:50%;
    transform:translateY(-50%) rotate(45deg)
}
@media only screen and (max-width: 767px){
    main .sec-breadcrumb ol>li+li::before,.sec-relatedGroups .sec-breadcrumb ol>li+li::before,.sec-snsLogo .sec-breadcrumb ol>li+li::before{
        width:6px;
        height:6px;
        left:-3px
    }
}
main .sec-pickup .sectionText,.sec-relatedGroups .sec-pickup .sectionText,.sec-snsLogo .sec-pickup .sectionText{
    font-size:36px;
    font-family:'Cormorant', serif
}
@media only screen and (max-width: 767px){
    main .sec-pickup .sectionText,.sec-relatedGroups .sec-pickup .sectionText,.sec-snsLogo .sec-pickup .sectionText{
        font-size:30px;
        text-align:center
    }
}
main .sec-pickup .splide__track,.sec-relatedGroups .sec-pickup .splide__track,.sec-snsLogo .sec-pickup .splide__track{
    padding:30px 0
}
main .sec-pickup .splide__arrow,.sec-relatedGroups .sec-pickup .splide__arrow,.sec-snsLogo .sec-pickup .splide__arrow{
    width:5em;
    height:5em;
    top:calc(50% - 20px)
}
main .sec-pickup .pickupList,.sec-relatedGroups .sec-pickup .pickupList,.sec-snsLogo .sec-pickup .pickupList{
    margin-top:40px
}
@media only screen and (max-width: 767px){
    main .sec-pickup .pickupList,.sec-relatedGroups .sec-pickup .pickupList,.sec-snsLogo .sec-pickup .pickupList{
        margin-top:25px;
        margin-bottom:0
    }
}
main .sec-pickup .pickupList li a,.sec-relatedGroups .sec-pickup .pickupList li a,.sec-snsLogo .sec-pickup .pickupList li a{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    border-radius:30px;
    overflow:hidden
}
@media only screen and (max-width: 767px){
    main .sec-pickup .pickupList li a,.sec-relatedGroups .sec-pickup .pickupList li a,.sec-snsLogo .sec-pickup .pickupList li a{
        border-radius:15px
    }
}
main .sec-pickup .pickupList li a .textWrap,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap,.sec-snsLogo .sec-pickup .pickupList li a .textWrap{
    position:absolute;
    z-index:5;
    bottom:30px;
    left:30px;
    right:30px
}
@media only screen and (max-width: 767px){
    main .sec-pickup .pickupList li a .textWrap,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap,.sec-snsLogo .sec-pickup .pickupList li a .textWrap{
        bottom:15px;
        left:15px;
        right:15px
    }
}
main .sec-pickup .pickupList li a .textWrap .tag,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .tag,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .tag{
    display:flex;
    justify-content:center;
    align-items:center;
    width:160px;
    height:26px;
    margin-bottom:10px;
    background:#fff;
    font-size:13px;
    font-weight:500;
    color:#252E31;
    border-radius:30px;
    line-height:1
}
@media only screen and (max-width: 991px){
    main .sec-pickup .pickupList li a .textWrap .tag,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .tag,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .tag{
        width:130px;
        height:22px;
        margin-bottom:10px;
        font-size:11px
    }
}
main .sec-pickup .pickupList li a .textWrap .name,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .name,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .name{
    font-size:30px;
    font-weight:500;
    font-family:YakuHanMP_Noto, 'Cinzel',"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    color:#fff;
    line-height:1.2
}
@media only screen and (max-width: 991px){
    main .sec-pickup .pickupList li a .textWrap .name,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .name,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .name{
        font-size:18px
    }
}
main .sec-pickup .pickupList li a .textWrap .area,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .area,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .area{
    margin-top:5px;
    font-size:15px;
    font-weight:500;
    font-family:YakuHanMP_Noto, 'Cinzel',"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    color:#fff
}
@media only screen and (max-width: 991px){
    main .sec-pickup .pickupList li a .textWrap .area,.sec-relatedGroups .sec-pickup .pickupList li a .textWrap .area,.sec-snsLogo .sec-pickup .pickupList li a .textWrap .area{
        margin-top:10px;
        font-size:13px;
        line-height:1.3;
        letter-spacing:-0.01em
    }
}
main .sec-pickup .pickupList li a .imgWrap,.sec-relatedGroups .sec-pickup .pickupList li a .imgWrap,.sec-snsLogo .sec-pickup .pickupList li a .imgWrap{
    position:relative
}
@media only screen and (max-width: 1024px){
    main .sec-pickup .pickupList li a .imgWrap::before,.sec-relatedGroups .sec-pickup .pickupList li a .imgWrap::before,.sec-snsLogo .sec-pickup .pickupList li a .imgWrap::before{
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        z-index:1;
        background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%)
    }
}
main .sec-pickup .splide__pagination,.sec-relatedGroups .sec-pickup .splide__pagination,.sec-snsLogo .sec-pickup .splide__pagination{
    position:relative;
    bottom:inherit;
    margin-top:30px
}
main .sec-pickup .splide__pagination li,.sec-relatedGroups .sec-pickup .splide__pagination li,.sec-snsLogo .sec-pickup .splide__pagination li{
    width:8px !important;
    height:8px !important;
    margin:0 9px
}
main .sec-pickup .splide__pagination li button,.sec-relatedGroups .sec-pickup .splide__pagination li button,.sec-snsLogo .sec-pickup .splide__pagination li button{
    width:8px !important;
    height:8px !important;
    padding:0
}
main .sec-pickup .splide__pagination li button::before,.sec-relatedGroups .sec-pickup .splide__pagination li button::before,.sec-snsLogo .sec-pickup .splide__pagination li button::before{
    width:8px !important;
    height:8px !important;
    font-size:8px !important;
    background:#E5E5D5 !important;
    line-height:8px !important;
    opacity:1 !important
}
main .sec-pickup .splide__pagination li .splide__pagination__page.is-active,.sec-relatedGroups .sec-pickup .splide__pagination li .splide__pagination__page.is-active,.sec-snsLogo .sec-pickup .splide__pagination li .splide__pagination__page.is-active{
    background:#36663A !important;
    opacity:1 !important
}
.sec-relatedGroups{
    padding:50px 0 60px;
    border-top:1px solid #F6F6F5
}
.sec-relatedGroups .sectionText{
    text-align:center;
    font-size:24px
}
.sec-relatedGroups .relatedGroupsList{
    margin-top:35px
}
@media only screen and (max-width: 767px){
    .sec-relatedGroups .relatedGroupsList{
        margin-top:35px
    }
}
.sec-relatedGroups .splide__track{
    padding:30px 0
}
.sec-snsLogo{
    padding:40px 0;
    border-top:1px solid #F6F6F5
}
@media only screen and (max-width: 767px){
    .sec-snsLogo{
        padding:30px 0 40px
    }
}
.sec-snsLogo .snsLogoWrap{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between
}
@media only screen and (max-width: 767px){
    .sec-snsLogo .snsLogoWrap{
        flex-flow:column;
        justify-content:center;
        align-items:center
    }
}
.sec-snsLogo .snsLogoWrap .snsIconList{
    display:flex;
    flex-flow:row wrap;
    align-items:center
}
.sec-snsLogo .snsLogoWrap .snsIconList>li+li{
    margin-left:20px
}
.sec-snsLogo .snsLogoWrap .snsIconList>li.facebook{
    width:31px;
    height:31px
}
.sec-snsLogo .snsLogoWrap .snsIconList>li.instagram{
    width:32px;
    height:32px
}
.sec-snsLogo .snsLogoWrap .snsIconList>li.youtube{
    width:34px;
    height:24px
}
@media only screen and (max-width: 767px){
    .sec-snsLogo .snsLogoWrap .sdgsWrap{
        margin-top:40px
    }
}
.sec-snsLogo .snsLogoWrap .sdgsWrap .logo{
    width:332px;
    height:auto
}
@media only screen and (max-width: 767px){
    .sec-snsLogo .snsLogoWrap .sdgsWrap .logo{
        width:300px
    }
}
.sec-snsLogo .snsLogoWrap .sdgsWrap p{
    font-size:10px;
    font-weight:500;
    text-align:center
}
.circle{
    display:block;
    width:6px;
    height:6px;
    background:#151515;
    opacity:.5;
    border-radius:100%;
    position:absolute;
    top:calc(50% - 3px);
    right:0
}
.circle span{
    display:block;
    width:6px;
    height:6px;
    background:#151515;
    opacity:.5;
    border-radius:100%;
    position:absolute;
    top:calc(50% - 3px);
    right:0;
    animation:circle_attention 1s infinite
}
.circle.white{
    background:#fff
}
.circle.white span{
    background:#fff
}
.circle.white100{
    opacity:1;
    background:#fff
}
.circle.white100 span{
    opacity:1;
    background:#fff;
    animation:circle_attention-white100 1s infinite
}
.circle.green100{
    opacity:1;
    background:#36663A
}
.circle.green100 span{
    opacity:1;
    background:#36663A;
    animation:circle_attention-white100 1s infinite
}
@media (min-width: 1280px){
    a .circle{
        animation:circle_hover_reverse 1s forwards
    }
    a .circle.white100{
        animation:circle_hover_reverse-white100 1s forwards
    }
    a:hover .viewBtn::after,a:hover .viewBtn_s::after,a:hover .outBtn::after{
        animation:line .4s ease-in-out forwards
    }
    a:hover .outBtn::after{
        animation:line_out .4s ease-in-out forwards
    }
    a:hover .circle{
        animation:circle_hover 1s forwards
    }
    a:hover .circle span{
        display:none
    }
    a:hover .circle_bottom,.globalNav__second-level .officeListAll a:hover .circle_bottom span{
        animation:circle_hover 1s forwards
    }
    a:hover .circle_bottom span,.globalNav__second-level .officeListAll a:hover .circle_bottom span span{
        display:none
    }
}
@keyframes line{
    0%{
        width:0%
    }
    100%{
        width:100%
    }
}
@keyframes line_reverse{
    0%{
        width:100%
    }
    100%{
        width:0%
    }
}
@keyframes line_out{
    0%{
        width:0%
    }
    100%{
        width:calc(100% - 25px)
    }
}
@keyframes line_out_reverse{
    0%{
        width:calc(100% - 25px)
    }
    100%{
        width:0%
    }
}
@keyframes circle_attention{
    0%{
        transform:scale(0);
        opacity:0
    }
    5%{
        opacity:.15
    }
    50%{
        opacity:.1
    }
    95%{
        transform:scale(6)
    }
    100%{
        opacity:0
    }
}
@keyframes circle_attention-white100{
    0%{
        transform:scale(0);
        opacity:0
    }
    5%{
        opacity:.95
    }
    50%{
        opacity:.1
    }
    95%{
        transform:scale(6)
    }
    100%{
        opacity:0
    }
}
@keyframes circle_hover_reverse{
    0%{
        transform:scale(6);
        opacity:.15
    }
    100%{
        transform:scale(1);
        opacity:.5
    }
}
@keyframes circle_hover_reverse-white100{
    0%{
        transform:scale(6);
        opacity:.15
    }
    100%{
        transform:scale(1);
        opacity:1
    }
}
@keyframes circle_hover{
    0%{
        transform:scale(1);
        opacity:.5
    }
    100%{
        transform:scale(6);
        opacity:.15
    }
}
.h1{
    margin-top: 4rem;
}