@charset "utf-8";
/* メインビジュアル */
.mainvisual,
h2 {
    position: relative;
    z-index: 3;
}
.mainvisual {
    width: 100%;
    height: 6.4rem;
    padding-top: 6.4rem;
    background: url("../images/top/mainimg.jpg") center top no-repeat;
    background-size: cover;
    display: block;
    /*mask-image: linear-gradient(180deg, #f9f8f3 0%, #f9f8f3 75%, rgba(255,255,255,.1) 100%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #f9f8f3 0%, #f9f8f3 75%, rgba(255,255,255,.1) 100%, transparent);*/
    position: relative;
    z-index: 1;
}
.mainvisual::after {
    content: '';
    background: linear-gradient(to bottom, rgba(249,248,243,0) 75%, rgba(249,248,243,.8) 100%);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
h2 {
    margin-top: -.55rem;
    font-size: 1.75em;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    letter-spacing: .5em;
}
h2 span {
    font-family: "Roboto Flex", sans-serif;
    font-style: normal;
    font-size: 2.643em;
    line-height: 1.5em;
    display: block;
}
.mainunder {
    padding-top: 2.9rem;
    margin-top: -2.9rem;
    background: url("../images/top/bg-undermain.png") center top no-repeat;
}
.mainbnr {
    margin: .8rem auto;
    display: flex;
    justify-content: space-around; 
}
.mainbnr.b-two {
gap: 50px;/*2つの場合*/
}
.mainbnr li {
    width: calc(100% / 3 - .12rem);
    padding: .1rem;
    background: #fff;
    box-shadow: 0 0 .2rem 0 rgba(0,0,0,.05);
}
.mainbnr.b-two li{
 width: calc(100% / 2);
}
.mainbnr li figure {
    width: 100%;
    height: .8rem;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.mainbnr li figure img {
    max-width: .8rem;
    height: auto;
    margin-right: .16rem;
}
.mainbnr li figure figcaption {
    font-size: 1.125em;
    font-weight: 700;
}
.pickup {
    display: flex;
    align-items: center;
}
.pickup h3 {
    width: 1.6rem;
    font-size: 1.125em;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
}
.pickup ul {
    width: calc(100% - 1.6rem);
}
.pickup ul li {
    width: 100%;
    padding: .16rem 0;
    border-bottom: solid 1px var(--color-border);
    line-height: .26rem;
 display: flex;
 flex-wrap: wrap;
}
.pickup ul li a {
display: inline-flex;
}
.pickup ul li .date-box {
 width: 8%
}
.pickup ul li .category-box {
 width: 13%
}
.pickup ul li .title-box {
 width: 79%
}
.pickup ul li .date {
    font-size: .875em;
    font-weight: 700;
}
.pickup ul li .category {
    width: 1rem;
    height: .26rem;
    margin: 0 .12rem;
    background: var(--color-gray_light);
    border-radius: 100vh;
    font-size: .75em;
    text-align: center;
    display: inline-block;
}
.pickup ul li h1 {
    font-weight: 400;
    display: inline;
}
.about {
    margin-top: .8rem;
    padding: .8rem 1.6rem .8rem .8rem;
    background: url("../images/top/bg-about.png") right center no-repeat, url("../images/top/bg-about02.png") right 1.6rem bottom .2rem no-repeat, #fff;
    box-shadow: 0 0 .34rem 0 rgba(0,0,0,.05);
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.about h3 {
    font-size: 3em;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    line-height: 1.6em;
    letter-spacing: .1em;
    writing-mode: vertical-rl;
}
.about .about-content {
    width: 77.5%;
}
.about .about-content p {
    margin-bottom: 1em;
    font-size: 1.5em;
    line-height: 1.75em;
}
.about .btn-more {
    margin-top: .64rem;
}
.mission {
    padding: .2rem 0 1.6rem;
    margin-top: -.2rem;
    background: url("../images/top/bg-mission.png") -4.3rem top repeat-x, url("../images/top/bg-mission02.png") center 5.5rem no-repeat;
}
.mission section {
    width: auto;
    max-width: 15.12rem;
    margin: 1.8rem auto 0;
    display: flex;
}
.mission section:first-of-type {
    margin-top: 2rem;
}
.mission section:nth-child(odd) {
    padding-right: calc(50vw - 50%);
    justify-content: flex-start;
}
.mission section:nth-child(even) {
    padding-left: calc(50vw - 50%);
    justify-content: flex-end;
}
.mission section img {
    width: 52%;
    height: auto;
    object-fit: contain;
    align-self: baseline;
}
.mission section:nth-child(even) img {
    order: 2;
}
.mission section .mission-content {
    width: 5.8rem;
    position: relative;
    z-index: 3;
}
.mission section:nth-child(odd) .mission-content {
    margin-left: -.48rem;
}
.mission section:nth-child(even) .mission-content {
    margin-right: -.48rem;
}
.mission section .mission-content h3 {
    margin: .4rem 0;
    font-size: 3em;
    line-height: 1.5em;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    letter-spacing: -.05em;
}
.mission section:nth-child(even) .mission-content h3 {
    text-align: right;
}
.mission section .mission-content .mission-txt {
    padding: .48rem;
    background: #fff;
    box-shadow: 0 0 .2rem 0 rgba(0,0,0,.05);
}
.mission section .mission-content .mission-txt .btn-more {
    margin-top: .5rem;
}
.mission section:nth-child(even) .mission-content .mission-txt .btn-more {
    margin: .5rem 0 0 auto;
}
/* ふわっと */
.fadein {
    opacity: 0;
}
.fadein.inview  {
  animation-name: fade-in;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.project {
    padding: 1rem 0;
    background: url("../images/top/bg-project.jpg") center center no-repeat;
    background-size: cover;
}
.project .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .64rem;
}
.project h3 {
    width: 4.78rem;
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 2.5em;
    order: 2;
}
.project h3 span {
    font-family: "Roboto", sans-serif;
    font-size: 2.75em;
    line-height: 1.1em;
    display: block;
}
.project ul {
    width: 5.8rem;
    display: flex;
    gap: .16rem;
    flex-wrap: wrap;
}
.project ul li {
    border-radius: .04rem;
    overflow: hidden;
}
.news,
.info {
    margin: .8rem auto;
}
h3.common-top {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    line-height: 1.7em;
}
h3.common-top span {
    font-size: .5em;
    color: var(--color-blue);
    display: block;
}
.news .categoryselect,
.news .newslist,
.info .infolist {
    margin: .4rem auto;
}
.news .categoryselect {
    width: 100%;
    height: .64rem;
    padding: .12rem;
    background: #fff;
    border-radius: 100vh;
    display: flex;
    justify-content: space-between;
}
.news .categoryselect li {
    width: calc(100% / 5 - .08rem);
}
.news .categoryselect li a {
    height: .4rem;
    background: var(--color-gray_light);
    border-radius: 100vh;
    line-height: .4rem;
    text-align: center;
    display: block;
}
.news .categoryselect li a.current {
    background: var(--color-blue);
    color: #fff;
    font-weight: 700;
}
.news .newslist {
    display: none;
    flex-wrap: wrap;
    gap: .24rem;
}
.news .newslist.show {
    display: flex;
}
.news .newslist article {
    width: 2.67rem;
}
.news .newslist article figure {
    width: 100%;
    height: 1.8rem;
    border-radius: .1rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.news .newslist article.newsletter figure {
    align-items: flex-start;
}
.news .newslist article figure img {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.news .newslist article .date,
.info .infolist article .date {
    font-size: .875em;
    font-weight: 700;
    line-height: .26rem;
}
.news .newslist article .categorylist {
    text-align: left;
}
.news .newslist article .categorylist [class^=category] {
    width: auto;
    padding: .02rem .08rem .03rem;
    margin-right: .04rem;
    font-size: .75em;
    white-space: nowrap;
}
.news .newslist article .categorylist .category01 {
    background: #bcdeea;
}
.news .newslist article .categorylist .category02 {
    background: #efcf9e;
}
.news .newslist article .categorylist .category03 {
    background: #cedbd7;
}
.news .newslist article .categorylist .category04 {
    background: #e9c9c8;
}
.news .newslist article h1 {
    margin-bottom: .12rem;
    font-weight: 400;
    line-height: 1.2em;
}
.news .newslist article+div {
    width: 100%;
}
.news .btn-more,
.info .btn-more {
    margin: 0 auto;
}
.info .infolist article {
    padding: .75em 0;
    border-bottom: solid 1px var(--color-border);
}
.info .infolist article .date {
    margin-right: 2em;
}
.info .infolist article h1 {
    font-weight: 400;
    display: inline;
}

@media screen and (max-width:768px) { /* スマホの場合 */
/* メインビジュアル */
.mainvisual {
    width: 100%;
    height: 2.4rem;
    padding-top: 2.4rem;
    background: url("../images/top/mainimg-sp.jpg") center top no-repeat;
    background-size: cover;
    display: block;
}
h2 {
    margin-top: -.275rem;
    font-size: 5vw;
    line-height: 2em;
    letter-spacing: .2em;
}
h2 span {
    font-size: 10vw;
    line-height: 1em;
}
.mainunder {
    background: url("../images/top/bg-undermain.png") center 2.2rem no-repeat;
    background-size: 100% auto;
}
.mainbnr {
    margin: .4rem auto;
    flex-wrap: wrap;
    justify-content: center;
}
.mainbnr li {
    width: 100%;
    margin: .1rem auto;
}
.pickup {
    flex-wrap: wrap;
    align-items: flex-start;
}
.pickup h3 {
    width: 100%;
    font-size: 1.125em;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    letter-spacing: .1em;
}
.pickup ul {
    width: 100%;
}
.pickup ul li {
    padding: .16rem 0;
}
.pickup ul li span {
    display: inline-block;
}
.pickup ul li h1 {
    display: block;
}
.pickup ul li .date-box {
 width: 30%
}
.pickup ul li .category-box {
 width: 70%
}
.pickup ul li .title-box {
 width: 100%
}
.about {
    padding: .4rem .16rem;
    background: url("../images/top/bg-about.png") right .4rem no-repeat, url("../images/top/bg-about02.png") left center no-repeat, #fff;
    background-size: 20% auto, 50% auto;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.about h3 {
    margin: 0 auto .2rem;
    font-size: 1.5em;
}
.about .about-content {
    width: 100%;
}
.about .about-content p {
    font-size: inherit;
    line-height: inherit;
}
.about .btn-more {
    margin-top: .24rem;
}
.mission {
    padding: .2rem 0 1.6rem;
    margin-top: -.2rem;
    background: url("../images/top/bg-mission_sp.png") left top no-repeat, url("../images/top/bg-mission02.png") center 5.5rem no-repeat;
    background-size: 100% auto;
}
.mission section {
    max-width: 100%;
    margin: 1.6rem auto 0;
    flex-wrap: wrap;
}
.mission section:first-of-type {
    margin-top: 2rem;
}
.mission section:nth-child(odd) {
    padding-right: 0;
}
.mission section:nth-child(even) {
    padding-left: 0;
    justify-content: flex-end;
}
.mission section img {
    width: 100%;
    max-height: 2.25rem;
    z-index: 1;
}
.mission section:nth-child(even) img {
    order: 1;
}
.mission section .mission-content {
    width: calc(100vw - .32rem);
    margin-top: -3.6rem;
}
.mission section:nth-child(odd) .mission-content,
.mission section:nth-child(even) .mission-content {
    margin-left: auto;
    margin-right: auto;
}
.mission section:nth-child(even) .mission-content {
    order: 2;
}
.mission section .mission-content h3 {
    margin: .4rem 0;
    margin-bottom: 2rem;
    font-size: 1.5em;
}
.mission section .mission-content h3,
.mission section:nth-child(even) .mission-content h3 {
    text-align: center;
}
.mission section .mission-content .mission-txt .btn-more,
.mission section:nth-child(even) .mission-content .mission-txt .btn-more {
    margin: .5rem auto 0;
}
.project {
    padding: .16rem;
    background: url("../images/top/bg-project.jpg") center center no-repeat;
    background-size: cover;
}
.project .wrapper {
    flex-wrap: wrap;
    gap: 0;
}
.project h3 {
    width: 100%;
    font-size: 4.5vw;
    order: 1;
}
.project h3 span {
    font-size: 15vw;
}
.project ul {
    width: 100%;
    gap: .1rem;
    order: 2;
}
.project ul li {
    width: calc(50% - .05rem);
}
.news,
.info {
    margin: .4rem auto;
}
h3.common-top {
    font-size: 1.75em;
    line-height: 1.7em;
}
h3.common-top span {
    font-size: .5em;
    line-height: 1em;
}
.news .newslist,
.info .infolist {
    margin: .2rem auto;
}
.news .categoryselect {
    width: auto;
    height: .6rem;
    padding: .1rem .06rem;
    margin: .2rem -.16rem;
    background: #fff;
    border-radius: 0;
    justify-content: flex-start;
    overflow-y: scroll;
}
.news .categoryselect li {
    width: auto;
    margin: 0 .02rem;
}
.news .categoryselect li a {
    height: .32rem;
    padding: 0 .14rem;
    font-size: .75em;
    line-height: .32rem;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.news .categoryselect li a.current {
    background: var(--color-blue);
    color: #fff;
    font-weight: 700;
}
.news .newslist {
    gap: .12rem;
}
.news .newslist article {
    width: calc(50% - .06rem);
}
.news .newslist article figure {
    height: 1rem;
}
.news .newslist article .status {
    margin: .08rem 0;
}
.news .newslist article .status .date,
.info .infolist article .date {
    font-size: .75em;
    font-weight: 700;
    line-height: .2rem;
}
.news .newslist article .status .category {
    width: 1rem;
    height: .2rem;
    font-size: .75em;
    text-align: center;
    line-height: .2rem;
}
.info .infolist article h1 {
    display: block;
}

}

/* --- Breakpoint: 1050px --- */
@media (min-width: 768px) and (max-width: 1050px) {
 .pickup ul li .date-box {
    width: 80px;
}
 .pickup ul li .category-box {
    width: 125px;
}
 .pickup ul li .title-box {
  flex: 1
 }
.mission section .mission-content h3 {
 font-size: 2.5em;
 }
 .project h3 {
  font-size: 1.9em;
 }
 .project h3 span {
  font-size: 2em;
 }
 .project ul {
  width: 8rem;
  justify-content: center;
 }
}