@charset "UTF-8";
:root{
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #f8f8f8;
    --color-gray: #ddd;
    --color-theme: #f5695f;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
}

.mv .inner h2{
    overflow-wrap: anywhere;
    text-wrap: auto;
    word-break: auto-phrase;
}
main#news h1, main h2,main h3,main h4,main h5{
    overflow-wrap: anywhere;
    text-wrap: auto;
    word-break: break-word;
}

.mv {
    width: 100%;
    margin: 0 auto;
    padding: 21px 10px; 
    background: url(../img/mv_bg.webp)no-repeat top center;
    background-size: cover;
}
.mv .inner {
    max-width: 96%;
    margin: 0 auto;
    overflow: hidden;
}

.mv .swiper {
    overflow: visible;
}
.mv .swiper-slide{
    width: max-content;
    height: 30rem;
    position: relative;
    border-radius: 50px;
    overflow: hidden;
}

.mv .swiper-slide .img__block{
    width: 100%;
    height: 100%;
    position: absolute;
}
.mv .swiper-slide .img__block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mv .swiper-slide .txt__block{
    width: 100%;
    padding: 60% 27px 20px 10px;
    background: url(../img/cover_shadow_header.png)repeat-x bottom;
    position: absolute;
    bottom: 0;
    color: #fff;
    text-align: right;    
}

.swiper-slide .txt__block ul.tag__list{
    margin-bottom: 6px;
    display: flex;
    justify-content: flex-end;
}
.swiper-slide .txt__block ul.tag__list li {
    margin-left: 10px;
    font-size: 16px;
    display: inline-block;
}
.swiper-slide .txt__block ul.tag__list li:before{
    content: "#";
    display: inline-block;
}

.swiper-slide .txt__block h2 {
    margin-bottom: -3px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: normal;
}

br.ttl{display: none;}

.mv .swiper-slide .txt__block h2 br.ttl,
section#news .swiper-slide.swiper-slide-active h2 br.ttl, 
section#ranking .swiper-slide.swiper-slide-active h2 br.ttl{
    display: block;
}

.swiper-slide .txt__block time.date {
    display: inline-block;
    font-family: "rokkitt", serif;
    font-weight: 400;
    font-size: 20px;
}

.swiper-controller {
    max-width: 1150px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0;
    left: 0;
}
.mv .swiper-controller{
    bottom: 80px;
 }

section#news .swiper-controller,
section#ranking .swiper-controller{
    top: 80px;
}

.mv .swiper-button-prev, .mv .swiper-button-next,
section#news .swiper-button-prev, section#news .swiper-button-next,
section#ranking .swiper-button-prev, section#ranking .swiper-button-next{
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 2;
    position: relative;
}

.mv .swiper-button-prev,
section#news .swiper-button-prev,
section#ranking .swiper-button-prev{
    right: 88px;
    left: auto;
}
.mv .swiper-button-next,
section#news .swiper-button-next,
section#ranking .swiper-button-next{
    right: 69px;
}

.swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}
.swiper-button-prev::before, .swiper-button-next::before {
    content: '▲'!important;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #EFF0E0;
    display: block;
    color: #FFFFFD;
    font-size: 24px;
}
.swiper-button-prev::before{
    rotate: 270deg;
    text-shadow: 10px 10px 10px #fff, 0 0 0 #333;
}
.swiper-button-next::before {
    rotate: 90deg;
    text-shadow: 10px 10px 10px #fff, 0 0 0 #333;
}

.swiper-button-prev::after, .swiper-button-next::after {
    content: ''!important;
    display: block;
}

@media screen and (max-width:768px) {
    .mv .swiper-slide{
        height: 40rem;
    }
    .mv .swiper-controller {
        bottom: auto;
    }

    .swiper-slide .txt__block ul.tag__list li{
        font-size: 90%;
    }
    .swiper-slide .txt__block h2{
        font-size: 115%;
    }
    .swiper-slide .txt__block time.date{
        font-size: 110%;
    }

    .mv .swiper-button-next{
        right: 8px;
    }
    .mv .swiper-button-prev{
        right: 30px;
    }
}

@media screen and (max-width:768px) {
    .mv .swiper-slide{
        height: 42vh;
    }
}

/* 共通 */
.ttl{
    margin-bottom: 40px;
    font-family: tt-commons-pro, sans-serif;
    font-weight: 600;
    font-size: 52px;
    letter-spacing: -1px;
    display: flex;
    align-items: baseline;
    line-height: 1;
}
.ttl span {
    margin-left: 15px;
    display: block;
    font-size: 18px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
}
.ttl span:before{
    content: '';
    display: inline-block;
    margin-right: 11px;
}

@media screen and (max-width:768px) {
    .ttl{
        margin-bottom: 8.3%;
        font-size: 219%;
    }
    .ttl span{
        margin-left: 6px;
        font-size: 40%;
    }
    .ttl span:before{
        margin-right: 6px;
    }
}

/* news */
section#news{
    padding: 6.1% 0 8.2%;
    background: url(../img/contents_bg.png)repeat-y center top;
}

section#news .inner{
    max-width: 1150px;
    margin: 0 auto;
}

section#news .ttl span:before{
    width: 22px;
    height: 22px;
    background: url(../img/icon_rite.png);
    background-size: 100%;
}

.article__block{
    display: flex;
    flex-wrap: wrap;
}

section#news .swiper-wrapper,
section#ranking .swiper-wrapper{
    align-items: flex-end;
}

section#news .swiper-slide .img__block,
section#ranking .swiper-slide .img__block{
    width: 100%;
    max-width: 266px;
    height: 267px;
    border-radius: 20px;
    overflow: hidden;
}
section#news .swiper-slide:nth-child(even) .img__block{
    border: 7px solid #FEEAE9;
}
section#news .swiper-slide:nth-child(odd) .img__block{
    border: 7px solid #E5F2FB;
}
section#ranking .swiper-slide .img__block{
    border: 1px solid #333;
}

section#news .swiper-slide .img__block img,
section#ranking .swiper-slide .img__block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section#news .swiper-slide.swiper-slide-active,
section#ranking .swiper-slide.swiper-slide-active{
    width: 565px!important;
    border: 1px solid #333;
    border-radius: 20px;
    overflow: unset;
    position: relative;
    box-sizing: border-box;
    animation: purine 0.5s linear 1;
}
@keyframes purine {
    from {
      transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}

section#news .article__block .swiper-slide:nth-child(1),
section#ranking .article__block .swiper-slide:nth-child(1){
    width: 100%;
    max-width: 565px!important;
    border: 1px solid #333;
    border-radius: 20px;
    overflow: unset;
    position: relative;
    box-sizing: border-box;
}

section#news .swiper-slide.swiper-slide-active:after,
section#news .article__block .swiper-slide:nth-child(1):after{
    content: 'RECENT POSTS';
    display: block;
    font-family: tt-commons-pro, sans-serif;
    font-size: 20px;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

section#news .swiper-slide.swiper-slide-active a,
section#ranking .swiper-slide.swiper-slide-active a,
section#news .article__block .swiper-slide:nth-child(1) a,
section#ranking .article__block .swiper-slide:nth-child(1) a{
    width: 100%;
    padding: 35px 35px 45px;
    display: block;
    position: relative;
    overflow: hidden;
}

section#news .swiper-slide.swiper-slide-active .img__block,
section#ranking .swiper-slide.swiper-slide-active .img__block,
section#news .article__block .swiper-slide:nth-child(1) .img__block,
section#ranking .article__block .swiper-slide:nth-child(1) .img__block{
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 0;
    position: relative;
    background: #fff;
}

section#news .swiper-slide .txt__block ul.tag__list,
section#ranking .swiper-slide .txt__block ul.tag__list{
    display: none;
}

section#news .swiper-slide.swiper-slide-active .img__block img,
section#ranking .swiper-slide.swiper-slide-active .img__block img,
section#news .article__block .swiper-slide:nth-child(1) .img__block img,
section#ranking .article__block .swiper-slide:nth-child(1) .img__block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 
section#news .swiper-slide.swiper-slide-active .img__block:after,
section#ranking .swiper-slide.swiper-slide-active .img__block:after,
section#news .article__block .swiper-slide:nth-child(1) .img__block:after,
section#ranking .article__block .swiper-slide:nth-child(1) .img__block:after{
    content: '';
    background: url(../img/cover_shadow_header.png) repeat-x bottom;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

section#news .swiper-slide .txt__block,
section#ranking .swiper-slide .txt__block{
    width: 92%;
    margin: 16px auto 0;
    display: flex;
    flex-wrap: wrap-reverse;
}

section#news .swiper-slide.swiper-slide-active .txt__block,
section#ranking .swiper-slide.swiper-slide-active .txt__block,
section#news .article__block .swiper-slide:nth-child(1) .txt__block,
section#ranking .article__block .swiper-slide:nth-child(1) .txt__block{
    width: 100%;
    padding: 0 0 0 20px;
    max-width: 480px;
    position: absolute;
    display: block;
    color: #fff;
    bottom: 58px;
    left: 40px;
}

section#news .swiper-slide.swiper-slide-active  ul.tag__list,
section#ranking .swiper-slide.swiper-slide-active  ul.tag__list,
section#news .article__block .swiper-slide:nth-child(1) ul.tag__list,
section#ranking .article__block .swiper-slide:nth-child(1) ul.tag__list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

section#news .swiper-slide.swiper-slide-active  ul.tag__list li,
section#ranking .swiper-slide.swiper-slide-active  ul.tag__list li,
section#news .article__block .swiper-slide:nth-child(1) ul.tag__list li,
section#ranking .article__block .swiper-slide:nth-child(1) ul.tag__list li{
    margin: 0 10px 5px 0;
}
section#news .swiper-slide.swiper-slide-active  ul.tag__list li:before,
section#ranking .swiper-slide.swiper-slide-active  ul.tag__list li:before,
section#news .article__block .swiper-slide:nth-child(1) ul.tag__list li:before,
section#ranking .article__block .swiper-slide:nth-child(1) ul.tag__list li:before{
    content: "#";
    display: inline-block;
}

section#news .swiper-slide .txt__block h2,
section#ranking .swiper-slide .txt__block h2{
    height: 93px;
    margin: 6px 0 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 2.2;
    color: #333;
    overflow: hidden;
}

section#news .swiper-slide.swiper-slide-active .txt__block h2,
section#ranking .swiper-slide.swiper-slide-active .txt__block h2,
section#news .article__block .swiper-slide:nth-child(1) .txt__block h2,
section#ranking .article__block .swiper-slide:nth-child(1) .txt__block h2 {
    height: auto;
    margin: 0 0 -7px;
    font-size: 17px;
    line-height: 1.8;
    font-weight: normal;
    color: #fff;
    inline-size: 455px;
}

section#news .swiper-slide time.date,
section#ranking .swiper-slide time.date {
    display: inline-block;
    color: #FE80BF;
}
section#news .swiper-slide time.date:before,
section#ranking .swiper-slide time.date:before{
    content: '●';
    display: inline-block;
    font-size: 16px;
    margin-right: 14px;
}

section#news .swiper-slide.swiper-slide-active time.date,
section#ranking .swiper-slide.swiper-slide-active time.date,
section#news .article__block .swiper-slide:nth-child(1) time.date,
section#ranking .article__block .swiper-slide:nth-child(1) time.date  {
    color: #fff;
    font-size: 19px;
}
section#news .swiper-slide.swiper-slide-active time.date::before,
section#ranking .swiper-slide.swiper-slide-active time.date::before,
section#news .article__block .swiper-slide:nth-child(1) time.date::before,
section#ranking .article__block .swiper-slide:nth-child(1) time.date::before {
    display: none;
}

@media screen and (max-width:768px) {
    section#news{
        padding: 7.9% 3% 2.9%;
    }
    
    .article__block{
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        column-gap: 3%;
    }

    section#news .swiper-slide .img__block,
     section#ranking .swiper-slide .img__block{
        height: 25vh;
     }

    section#news .article__block .swiper-slide,
    section#ranking .article__block .swiper-slide{
        width: 48%;
    }

    section#news .article__block .swiper-slide:nth-child(1), 
    section#ranking .article__block .swiper-slide:nth-child(1){
        margin: 0 auto 14%;
    }
    section#news .article__block .swiper-slide:nth-child(1):after{
        font-size: 87%;
        bottom: 3px;
    }

     section#news .article__block .swiper-slide:nth-child(1) a, 
     section#ranking .article__block .swiper-slide:nth-child(1) a{
        padding: 20px 20px 25px;
     }

    section#news .article__block .swiper-slide:nth-child(1) .img__block, 
    section#ranking .article__block .swiper-slide:nth-child(1) .img__block{
        height: 42vh;
    }

    .article__block .swiper-slide:nth-child(1) time.date,
     section#ranking .article__block .swiper-slide:nth-child(1) time.date{
        font-size: 114%;
        line-height: 1;
     }

     section#news .article__block .swiper-slide:nth-child(1) .txt__block,
 section#ranking .article__block .swiper-slide:nth-child(1) .txt__block{
        width: 90%;
        bottom: 38px;
        left: 10px;  
 }

     section#news .article__block .swiper-slide:nth-child(1) .txt__block h2,
      section#ranking .article__block .swiper-slide:nth-child(1) .txt__block h2{
        margin: 0 0 -4px;
        font-size: 115%;
      }

      section#news .article__block .swiper-slide:nth-child(1) ul.tag__list li, section#ranking .article__block .swiper-slide:nth-child(1) ul.tag__list li{
        font-size: 90%;
        line-height: 1;
      }

      section#news .swiper-slide time.date,
    section#ranking .swiper-slide time.date{
        font-size: 110%;
    }

    section#news .swiper-slide .txt__block,
    section#ranking .swiper-slide .txt__block{
        margin: 7% auto 0;
    }

    section#news .swiper-slide time.date:before,
     section#ranking .swiper-slide time.date:before{
        font-size: 80%;
        margin-right: 6px;
     }

    section#news .swiper-slide .txt__block h2, 
    section#ranking .swiper-slide .txt__block h2{
        height: auto;
        margin: 1px 0 0;
        font-size: 100%;
        line-height: 1.7;
    }
    
    section#news .article__block .swiper-slide:nth-child(1) time.date, 
    section#ranking .article__block .swiper-slide:nth-child(1) time.date{
        font-size: 110%;
    }
}

/* ranking */
section#ranking{
    padding: 8.3% 0 8.4%;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

section#ranking .inner{
    max-width: 1150px;
    margin: 0 auto;
}

section#ranking .ttl span:before{
    width: 28px;
    height: 22px;
    background: url(../img/icon_rank.png);
    background-size: 100%;
}
.tab-list {
    margin-bottom: 4.7%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 14px;
}
.tab-item {
    padding: 8px 35px 6px;
    color: #333;
    text-align: center;
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 50px;
    transition: .4s ease-in-out;
    letter-spacing: 1px;
}

/* タブをクリックした時 ホバーした時 */
.tab-item:hover, .tab-item.is-active {
    background: #333;
    color: #fff;
}

/* パネル */
.panel-list {
    background-color: #fff;
}
.panel-item {
    display: none;
    width: 100%;
    background-color: #fff;
}
.panel-item.is-active {
    display: block;
    animation: panel-show .9s ease-in-out forwards;
}

/* パネル切り替えのアニメーション */
@keyframes panel-show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width:768px) {
    section#ranking{
        padding: 5.5% 3% 7.5%;
    }

    section#ranking .ttl{
        margin-bottom: 5.8%;
    }

    .tab-list{
        margin-bottom: 10.7%;
        gap: 12px 11px;
    }

    .tab-item {
        padding: 5px 3.8% 6px;
        font-size: 92%;
    }
    
}


/* bnr */
aside.feature_bnr__block{
    margin: 6.5% 0 6.8%;
    display: flex;
    justify-content: center;
    gap: 30px;
}

aside.feature_bnr__block > div{
    width: 100%;
    max-width: 560px;
}

@media screen and (max-width:768px) {
    aside.feature_bnr__block{
        margin: 6.5% 3% 9.7%;
        display: grid;
        gap: 20px 0;
    }
    aside.feature_bnr__block > div{
        margin: 0 auto;
    }
}

aside.keyword__block{
    width: 100%;
    max-width: 1160px;
    margin: 6.8% auto 8.4%;
    background-image: repeating-linear-gradient(90deg, #A7A7A7, #A7A7A7 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #A7A7A7, #A7A7A7 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #A7A7A7, #A7A7A7 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #A7A7A7, #A7A7A7 12px, transparent 12px, transparent 16px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

aside.keyword__block h1.ttl{
    padding: 29px 47px 23px;
    background-image: repeating-linear-gradient(90deg, #A7A7A7, #A7A7A7 12px, transparent 12px, transparent 16px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 2px;
}
aside.keyword__block h1.ttl span:before {
    width: 20px;
    height: 21px;
    background: url(../img/icon_search.png);
    background-size: 100%;
}

.keyword__wrap ul.tag__list {
    padding: 0px 39px 35px;
    display: flex;
    flex-wrap: wrap;
    gap: 19px 8px;
}
.keyword__wrap ul.tag__list li{
    width: 24.4%;
}
.keyword__wrap ul.tag__list li a{
    width: 100%;
    display: block;
    padding: 8px 0 6px;
    color: #333;
    text-align: center;
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 50px;
    transition: .4s ease-in-out;
    letter-spacing: 1px;
}
.keyword__wrap ul.tag__list li a:hover {
    background: #333;
    color: #fff;
}

@media screen and (max-width:768px) {
    aside.keyword__block {
        width: 98%;
        margin: 0 auto 9.6%;
    }
    aside.keyword__block h1.ttl{
        margin-bottom: 5.7%;
        padding: 4.2% 1.9% 3.2%;
    }
    .keyword__wrap ul.tag__list{
        padding: 0px 1% 5%;
        gap: 12px 8px;
    }
    .keyword__wrap ul.tag__list li{
        width: auto;
    }
    .keyword__wrap ul.tag__list li a{
        padding: 3px 10px 5px;
        font-size: 96%;
    }
}


section#eria{
    padding: 2.5% 0 0.5%;
    background: url(../img/contents_bg.png)repeat-y center top;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

section#eria .inner{
    max-width: 1150px;
    margin: 0 auto;
}

section#eria h1.ttl span:before {
    width: 12px;
    height: 18px;
    background: url(../img/icon_erea.png);
    background-size: 100%;
}

section#eria .eria__block{
    max-width: 1110px;
    margin: 5.9% auto;
    display: flex;
    flex-wrap: wrap;
    gap: 46px 19px;
}

section#eria .eria__block > div {
    max-width: 263px;
    position: relative;
}
section#eria .eria__block > div span.bg{
    width: 100%;
    max-width: 235px;
    height: 235px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: block;
}
section#eria .eria__block > div span.bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section#eria .eria__block > div span.bg:before{
    content: '';
    width: 100%;
    height: 100%;
    background: url(../img/cover_shadow_light.png);
    position: absolute;
    mix-blend-mode: darken;
}

section#eria .eria__block > div a{
    width: 100%;
    display: block;
    padding: 13px 14px;
    box-shadow: inset 0 0 10px #c3c4c7;
    border-radius: 25px;
}

section#eria .eria__block > div span.name{
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 18px;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    section#eria{
        padding: 5.6% 3% 0.5%;
    }
    section#eria h1.ttl{
        display: block;
        
    }
    section#eria h1.ttl span{
        display: block;
        margin-top: 17px;
    }

    section#eria .eria__block{
        width: 100%;
        max-width: 620px;
        margin: 5.9% auto 8.4%;
        gap: 15px 5%;
        justify-content: space-around;

    }

    section#eria .eria__block > div{
        width: 47%;
    }

    section#eria .eria__block > div a{
        padding: 10px 10px;
        box-shadow: inset 0 0 5px #c3c4c7;
    }
    section#eria .eria__block > div span.bg{
        max-width: 235px;
        height: 20vh;
    }
    
}


/* purpose */
section#purpose {
    padding: 2.5% 0 5.4%;
    background: #E5F2FB;
    border-bottom: 1px solid #333;
}

section#purpose .inner{
    max-width: 1150px;
    margin: 0 auto;
}

section#purpose h1.ttl span:before {
    width: 17px;
    height: 19px;
    background: url(../img/icon_trabel.png);
    background-size: 100%;
}

section#purpose .purpose__block{
    max-width: 1110px;
    margin: 5.2% auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 46px 37px;
}

section#purpose .purpose__block > div {
    position: relative;
}
section#purpose .purpose__block > div span.bg{
    width: 345px;
    height: 345px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: block;
}
section#purpose .purpose__block > div span.bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section#purpose .purpose__block > div span.bg:before{
    content: '';
    width: 100%;
    height: 100%;
    background: url(../img/cover_shadow_dark.png);
    position: absolute;
    mix-blend-mode: darken;
}
section#purpose .purpose__block > div a{
    width: 100%;
    display: block;
}

section#purpose .purpose__block > div span.name{
    margin: auto;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 50%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
section#purpose .purpose__block > div span.name >span{
    width: 100%;
    display: block;
    font-size: 30px;
    font-family: tt-commons-pro, sans-serif;
    line-height: 1;
}

@media screen and (max-width:768px) {
    section#purpose{
        padding: 6.7% 3% 1.5%;
    }

    section#purpose h1.ttl{
        margin-bottom: 0;
    }

    section#purpose .purpose__block{
        margin: 3.9% auto 0;
        display: block;
    }

    section#purpose .purpose__block > div{
        margin-bottom: 5.7%;
        overflow: hidden;
        border-radius: 30px;
    }

    section#purpose .purpose__block > div span.bg{
        width: 100%;
        height: 14vh;
        max-height: 190px;
    }
    section#purpose .purpose__block > div span.name{
        top: 30%;
        font-size: 90%;
    }
    section#purpose .purpose__block > div span.name >span{
        font-size: 167%;
        line-height: 2;
    }
}

aside.site_bnr__block {
    display: flex;
    justify-content: center;
    margin: 4.2% 0 3.7%;
    gap: 30px;
}

aside.site_bnr__block > div{
    width: 100%;
    max-width: 560px;
}

@media screen and (max-width:768px) {
    aside.site_bnr__block {
        margin: 6.8% 0 5.5%;
        display: grid;
    }

    aside.site_bnr__block > div{
        width: 90%;
        max-width: 660px;
        margin: 0  auto;
    }
}

/*mail*/
section#mail{
    padding: 4% 0 3.7%;
    background: #FEEAE9;
    text-align: center;
}
section#mail h1.ttl{
    justify-content: center;
}

section#mail .img__block {
    width: 9%;
    max-width: 69px;
    margin: 0 auto;
}

section#mail p.ttl_sub {
    margin: 27px 0 0;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 2px;
}
section#mail p.txt{
    font-size: 18px;
    margin-top: 20px;
    letter-spacing: 2px;
}
section#mail .mail_block {
    width: 100%;
    max-width: 480px;
    margin: 39px auto 0;
    display: flex;
    justify-content: center;
}
section#mail input[type="email"] {
    width: 100%;
    width: 390px;
    border-radius: 50px 0 0 50px;
    border: 1px solid #D6D6D6;
    padding: 14px 24px 11px;
    font-size: 18px;
}

section#mail span.submit_btn{
    width: 93px;
    margin-left: -6px;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #D6D6D6;
    overflow: hidden;
}
section#mail input[type="submit"] {
    width: 100%;
    padding: 9px 0 7px;
    background: #E5F2FB;
    display: block;
    font-size: 24px;
}

@media screen and (max-width:768px) {
    section#mail{
        padding: 7.6% 0 8.6%;
    }
    section#mail h1.ttl {
        margin-bottom: 4.4%;
    }
    section#mail p.ttl_sub{
        margin: 3.6% 0 0;
        font-size: 119%;
    }

    section#mail p.txt{
        font-size: 99%;
        margin-top: 3.9%;
        letter-spacing: 1px;
        line-height: 1.8;
    }

    section#mail .mail_block{
        margin: 4.2% 0 0;
    }
    section#mail input[type="email"]{
        width: 100%;
    }
}

aside.sns__link {
    margin: 2.2% 0 2.1%;
}
aside.sns__link ul {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}

aside.sns__link ul li.nav_sns {
    width: 31px;
}

@media screen and (max-width:768px) {
    aside.sns__link {
        margin: 5.6% 0 5.2%;
    }
}