@charset "utf-8";

/* 打ち消し */
/* .nav__header {
    display: none;
} */

.header__topic {
    display: none;
}

/*====================
atticle header
=====================*/

.article__header {
    min-width: 375px;
    height: auto;
    background-color: #FFFFFF;
}

.mainVisual__box {
    display: block;
    width: auto;
    height: 739px;
    background-image: url(..//images/mainVisual.jpg);
    background-size: cover;
    background-position: center center;
}

.navBtn__box {
    width: 100%;
    height: 63px;
    padding-top: 21px;
    /* box-sizing: content-box; */
}

.nav__btn--open {
    display: block;
    width: 29.5px;
    height: 20px;
    text-align: right;
    margin-left: 84%;
}

.nav__btn--close {
    display: block;
    width: 40px;
    height: auto;
}

.mainVisual {
    padding: 164px 0 404px 0;
    /* パディング調整 */
}

.mainVisual__txt {
    display: block;
    width: 285px;
    height: 171px;
    color: var(--primary-white);
    margin: 0 auto;
}

.mainVisual__item {
    font-family: Italiana;
}

.mainVisual__item--first {
    display: block;
    padding: 0 0.12% 0 0.31%;
    font-size: 5.5rem;
    line-height: 1;
}

.mainVisual__item--first :first-child {
    font-size: 7rem;
    letter-spacing: -7.7px;
}

.mainVisual__item--second {
    display: block;
    padding: 0 55% 0 34%;
    font-size: 4.5rem;
    line-height: 0.6;
}

.mainVisual__item--third {
    display: block;
    padding: 0 12% 0 47%;
    font-size: 65px;
    line-height: 0;
}

.mainVisual__item--third :first-child {
    font-family: Italiana;
    font-size: 8.5rem;
    letter-spacing: -2.55px;
}


.mainVisual__item--end {
    display: block;
    text-align: right;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 200;
    line-height: 3.7;
}

.mainVisual__item--end::before {
    content: '';
    display: inline-block;
    width: 38px;
    height: 1px;
    background-color: var(--primary-white);
    vertical-align: super;
}

.before {
    border: 1px dashed #C0C0C0;
    width: 59px;
    height: 27px;
    margin: 160px auto 0 auto;
    /* background-color: #A259FF; */
    position: relative;
}

.before::before {
    content: '';
    display: block;
    width: 59px;
    height: 27px;
    border: 1px dashed #C0C0C0;
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0;
}

.before::after {
    content: '';
    display: block;
    width: 89px;
    height: 41px;
    border: 1px dashed #C0C0C0;
    position: absolute;
    top: 53px;
    right: -15.5px;
}

.after {
    border: 1px dashed #C0C0C0;
    width: 59px;
    height: 27px;
    margin: 93px auto 0 auto;
    /* background-color: #A259FF; */
    position: relative;

}

.after::before {
    content: '';
    display: block;
    width: 59px;
    height: 27px;
    border: 1px dashed #C0C0C0;
    position: absolute;
    bottom: 0px;
    right: 0px;
    opacity: 0;
}


.after::after {
    content: '';
    display: block;
    width: 89px;
    height: 41px;
    border: 1px dashed #C0C0C0;
    position: absolute;
    bottom: 59.5px;
    right: -15.5px;
}



.subCaption__txt {
    position: relative;
    height: 599px;
    width: 225px;
    height: 103px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 93px auto 0;
    border: var(--primary-gray);
    border-style: dotted;
    color: #404040;
    text-align: center;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 171.5%;
    letter-spacing: 1.05px;
}

.mainCaption {
    height: auto;
    margin-top: 160px;
    padding-bottom: 160px;
    font-family: "Zen Kaku Gothic Antique";
    /* font-family: "Noto Serif JP"; */
    font-weight: 400;
    text-align: center;
    font-size: 1.5rem;
}

.mainCaption p:nth-of-type(2) {
    font-size: 1.2rem;
}

.mainCaption p span {
    display: block;
    font-size: 2rem;
}

.mainCaption :nth-child(2),
.mainCaption :nth-child(5) {
    margin-top: 22px;
}

.mainCaption :nth-child(3),
.mainCaption :nth-child(4) {
    margin-top: 43px;
}


@media screen and (min-width:769px){
    .mainVisual__txt {
        display: block;
        width: 410px;
        height: 171px;
        color: var(--primary-white);
        margin: 0 auto;
    }
    
    .mainVisual__item {
        font-family: Italiana;
    }
    
    .mainVisual__item--first {
        display: block;
        padding: 0 0.12% 0 0.31%;
        font-size: 8.5rem;
        line-height: 1;
    }
    
    .mainVisual__item--first :first-child {
        font-size: 10rem;
        letter-spacing: -7.7px;
    }
    
    .mainVisual__item--second {
        display: block;
        padding: 0 55% 0 34%;
        font-size: 7.5rem;
        line-height: 0.6;
    }
    
    .mainVisual__item--third {
        display: block;
        padding: 0 12% 0 47%;
        font-size: 9.5rem;
        line-height: 0;
    }
    
    .mainVisual__item--third :first-child {
        font-family: Italiana;
        font-size: 11.5rem;
        letter-spacing: -2.55px;
    }
    
    .mainVisual__item--end {
        display: block;
        text-align: right;
        font-family: "Noto Serif JP";
        font-size: 2.5rem;
        font-weight: 200;
        line-height: 4.5;
    }
}/* pc 769px */

/*====================
about
=====================*/

.pc {
    display: none;
}


@media screen and (min-width:769px) {
    .nav {
        height: 0;
        position: relative;
    }

    .nav__list {
        position: absolute;
        top: 0;
        right: 0;
        justify-content: center;
        width: 45%;
        font-size: 2.8rem;
        gap: 0 8.9%;
    }

    .nav__item--first {
        display: none;
    }

    .mainVisual__box {
        width: 55%;
        height: auto;
    }

    .nav__btn--open {
        display: none;
    }

    .article__header {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .subCaption {
        order: 2;
        order: 2;
        width: 100%;
        height: 100%;
        padding-bottom: 0px;
        background-color: var(--primary-green);
    }

    .subCaption__txt {
        background-color: var(--primary-white);
        width: 722px;
        height: 331px;
        border-style: solid;
        border-width: 2px;
        font-size: 3.4rem;
        font-weight: 200;
        color: #404040;
    }

    .before {
        border: 2px solid #C0C0C0;
        width: 219px;
        height: 57px;
        margin: 40px auto 0 600px;
        background-color: #ffffff;
        position: relative;


    }

    .before::before {
        content: '';
        display: block;
        width: 219px;
        height: 57px;
        border: 1px solid #C0C0C0;
        background-color: #ffffff;
        position: absolute;
        top: 0px;
        right: 0px;
        opacity: 0;
    }

    .before::after {
        content: '';
        display: block;
        width: 301px;
        height: 97px;
        border: 2px solid #C0C0C0;
        background-color: #e2e7e6;
        position: absolute;
        top: 93px;
        right: 84.5px;
    }

    .subCaption__txt {
        width: 560px;
        height: 280px;
        margin-top: 180px;
        font-size: 2.5rem;
    }

    .after {
        border: 2px solid #C0C0C0;
        width: 219px;
        height: 57px;
        margin: 190px 570px 0 auto;
        background-color: #ffffff;
        position: relative;

    }

    .after::before {
        content: '';
        display: block;
        width: 219px;
        height: 57px;
        border: 1px solid #C0C0C0;
        background-color: #ffffff;
        position: absolute;
        bottom: 0px;
        right: 0px;
        opacity: 0;
    }


    .after::after {
        content: '';
        display: block;
        width: 301px;
        height: 97px;
        background-color: #e2e7e6;
        border: 2px solid #C0C0C0;
        position: absolute;
        bottom: 101px;
        right: -125px;
    }

    .mainCaption {
        order: 1;
        width: 431px;
        margin-left: auto;
        margin-right: auto;
    }

    .mainCaption__txt {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .mainCaption p:nth-of-type(2) {
        font-size: 1.5rem;
    }

    .mainCaption p span {
        display: block;
        font-size: 2.6rem;
    }
}

/*====================
about 
=====================*/

.section--about {
    padding-top: 80px;
    position: relative;
}

.about__topics__item {
    margin-bottom: 53px;
    width: 100%;
    height: auto;
    margin: 0 auto 53px;
}

.about__topics__item img {
    min-width: 245px;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.about__topics :last-child {
    margin-bottom: 0;
}

.topics__txtBox {
    margin-top: 23px;
    width: 95%;
}

.topics__title {
    font-size: 2rem;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #000;
    text-decoration-thickness: 5%;
    /* 0.85px */
    text-underline-offset: 19%;
    /* 3.23px */
    text-underline-position: from-font;
    margin-top: 23px;
}

.txtBox__content {
    margin-top: 23px;
    font-size: var(--spMaintxt);
}

.txtBox__content li {
    line-height: 1.8;
    margin: 0 auto;
}

.topics__title--section {
    margin-top: 14px;
}

.topics__title--section dt {
    font-weight: 500;
}

.topics__title--section dd {
    margin-left: 20px;
}

.txtBox__content--end {
    margin-top: 14px;
}

.topics__txtBox a {
    display: block;
    margin-top: 37px;
    text-align: right;
    font-size: 1.2rem;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1.5%;
    /* 0.27px */
    text-underline-offset: 20%;
    /* 3.6px */
    text-underline-position: from-font;
}

.topics__txtBox a {
    transition: transform 0.3s ease;
}

/* animation */
.topics__txtBox a:hover {
    color: #ababab;
}
.topics__txtBox .yakuba {
    text-decoration-line: none;
}

.topics__txtBox {
    margin: 0 auto;
}

.staff__item {
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 17px;
}

.staff__name {
    display: inline-block;
    font-size: 1.7rem;
    margin-left: 20px;
}

.txtBox__content dd {
    font-size: 1.4rem;
}

.topics__txtBox .attention {
    margin-top: 50px;
    font-size: 1.2rem;
}


.section--member img {
    transition: transform 0.3s ease;
    display: inline-block;
    cursor: pointer;
  }
  
  .section--member img:hover {
    transform: scale(1.1);
  }

@media screen and (min-width:769px) {
    .section--about {
        padding: 40px 10% 153px 10%;
        position: relative;
    }

    .about__topics__item {
        display: flex;
        gap: 0 35px;
    }

    .section__box--about {
        padding: 280px 5% 100px;
    }

    .topics__title {
        font-family: "Noto Serif JP";
        font-size: 2.4rem;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: 4.5%;
        /* 1.35px */
        text-underline-offset: 9.5%;
        /* 2.85px */
        text-underline-position: from-font;
    }

    .topics__txtBox {
        width: 487px;
        height: auto;
    }

    .topics__txtBox a {
        font-size: 1.4rem;
    }

    .txtBox__content {
        font-size: 1.8rem;
    }

    .txtBox__content dd {
        font-size: 1.6rem;
    }

    .txtBox__content .degital {
        letter-spacing: 0.1em;
    }

    .staff__item {
        font-weight: 400;
        margin-top: 17px;
        font-size: 1.7rem;
        line-height: normal;
    }

    .staff__name {
        display: inline-block;
        font-size: 2.2rem;
        margin-left: 20px;
        font-weight: 500;
    }

    .topics__txtBox--end {
        /* background-color: #3099A0; */
        width: 400px;
    }

    .txtBox__content--staff dd {
        font-size: 1.6rem;
    }

    .attention {
        font-size: 1.4rem;
        color: #000000;
    }

    .sp {
        display: none;
    }

    .txtBox__content {
        display: flex;
        flex-wrap: wrap; /* 画面幅が狭い時に折り返し */
      }
      
      .txtBox__contentItem {
        flex: 1;
        min-width: 200px; /* モバイル対応用に必要に応じて設定 */
      }

    .about__topics :last-child {
        margin-bottom: 0;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
}

/*====================
member
=====================*/

.section--member {
    padding: var(--contentPadding);
}

.section__box--member {
    padding: 62px 10% 60px;
    position: relative;
}

.member__mainTxt {
    text-align: center;
    line-height: 1.2;
    margin-top: 40px;
}

.member__mainTxt p {
    margin-top: 14px;
}

.member__mainTxt--end {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.member__mainTxt .mainTxt--end {
    margin-top: 60px;
    line-height: 1.6;
}

.member__nav {
    display: block;
    width: 100px;
    height: 260px;
    /* background-color: #0ACF83; */
    margin: 20px auto 0;
    position: relative;
}

.member__logo {
    width: 97px;
    height: auto;
    position: absolute;
}

.member__logo--ai {
    width: 100px;
    top: 0px;
    left: 0;
}

.member__logo--yo {
    width: 93px;
    height: 93px;
    border-radius: 150px;
    border: 1px solid #000;
    top: 70px;
    left: -100px;
}

.member__logo--nago {
    width: 100px;
    top: 70px;
    left: 105px;
}

.member__logo--87 {
    width: 100px;
    height: 100px;
    top: 165px;
    left: -56px;
}

.member__logo--ff {
    width: 93px;
    height: 93px;
    top: 172px;
    left: 65px;
}

@media screen and (min-width:769px) {
    .section__box--member {
        padding: 120px 7.5% 153px;
        position: relative;
    }

    .member__nav {
        width: 250px;
        height: 550px;
        /* background-color: #0d638f9b; */
        margin: 30px auto 0;
        position: relative;
    }

    .member__logo {
        width: 250px;
        height: 250px;
        position: relative;
    }

    .member__logo--ff {
        position: absolute;
        width: 220px;
        height: auto;
        top: 80px;
        left: 15px;
    }

    .member__logo--yo {
        position: absolute;
        width: 215px;
        height: auto;
        border-radius: 150px;
        border: 1px solid #000;
        top: -10px;
        left: 300px;
    }

    .member__logo--87 {
        position: absolute;
        width: 240px;
        height: auto;
        top: 160px;
        left: -290px;
    }

    .member__logo--nago {
        position: absolute;
        width: 240px;
        height: auto;
        top: 270px;
        left: 230px;
    }

    .member__logo--ai {
        position: absolute;
        top: 380px;
        left: -80px;
    }

    .member__mainTxt {
        margin-top: 150px;
        position: relative;
    }

    .member__mainTxt p {
        margin-top: 80px;
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .member__mainTxt :nth-of-type(2) {
        margin-top: 0;
    }
}

/* pc 769px */

/*====================
studies  学んだものが中央寄りになっていない
=====================*/
.section__box--studies img {
    display: none;
}

.section__box--studies {
    padding: 73px 4.5% 108px;
}

.studies__topic {
    display: block;
    width: 60%;
    margin: 0 0 0 auto;
    text-align: right;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -4px;
    border-bottom: #000 solid 1.8px;
}

.studies__topic--box p {
    display: block;
    font-family: "Zen Kaku Gothic Antique";
    font-size: 1.4rem;
    text-align: right;
    margin: -2px 0 0 0;
    letter-spacing: normal;
}

.studies__content--skill {
    display: flex;
    width: 90%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 15px;
    margin: 27px auto 40px auto;
}

.skill__box {
    /* display: flex; */
    justify-content: center;
    text-align: center;
    /* flex-flow: column; */
    align-items: center;
    border: 1px dashed #ffae2c;
    padding: 9px;
    border-radius: 6px;
}

.studies__content--skill div:nth-of-type(2){
    border: 1px dashed #224be2;
}

.studies__content--skill div:nth-of-type(3){
    border: 1px dashed #f84bcd;
}

.studies__content--skill div:nth-of-type(4){
    border: 1px dashed #a1c6ff;
}

.studies__content--skill dt {
    font-family: Italiana;
    font-size: 2.2rem;
    line-height: 1;
    margin: 0 0 13px 0;
}

.studies__content--skill dd {
    width: 73%;
    font-size: 1.4rem;
    margin: 0 auto;
}

.studies__content--skill div:nth-of-type(4) dt {
    line-height: 19.2px;
}

/* 取り組んだ課題 */

.studies__content {
    position: relative;
}

.studies__content--task {
    margin: 39px auto 0 auto;
    width: 90%;
}

.studies__content--task li {
    font-size: 1.4rem;
    margin-left: 14px;
}

.studies__content--task li {
    margin-bottom: 16px;
    list-style-type: disc;
}

.studies__content--task::after {
    content: '';
    display: block;
    width: 107px;
    height: 100%;
    background-image: url(../images/seisakuKochira.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -212px;
    margin: 0 auto;

}

@media screen and (min-width:769px) {

    .section--studies {
        padding: var(--contentPadding);
    }

    .section__box--studies {
        padding: 230px 4.5% 120px;
    }

    .studies__topic {
        font-size: 4rem;
        font-weight: 400;
        margin: 0 0 0 auto;
    }

    .studies__topic--box p {
        font-size: 1.8rem;
    }

    .studies__content--skill {
        gap: 46px;
        margin-top: 90px;
    }

    .skill__box {
        display: flex;
        width: 100%;
        text-align: center;
        gap: 72px;
        padding: 11px 19px;
    }

    .skill__box dt {
        width: 235px;
        height: auto;
        margin: 0;
        font-size: 3.5rem;
    }

    .skill__box dd {
        font-size: 2.4rem;
    }

    .txtBox dl:first-of-type {
        margin-top: 0;
    }

    .txtBox {
        gap: 15px;
    }

    .studies__topic--box--end {
        margin-top: 150px;
    }


    .studies__content--skill div:nth-of-type(4) dt {
        line-height: 33px;
    }

    /* 取り組んだ課題 pc */

    .studies__content {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 60px auto 80px;
        gap: 0 48px;

    }

    .section__box--studies img {
        display: block;
        /* width: 446px; */
        width: 38%;
        min-width: 356px;
        max-width: 446px;
        height: auto;
    }

    .studies__content--task {
        margin: 0 0 0 28px;
        width: 53%;
    }

    .studies__content--task li {
        margin-left: 14px;
        font-size: 2.4rem;
    }

    .studies__content--task::after {
        width: 180px;
        bottom: -380px;

    }
}

/* pc 769px */

/*====================
works
=====================*/

.section__box--works {
    padding: 95px 2% 60px;
    /* overflow: hidden; */
    margin-top: 85px;
}

.section--works .section__topic span {
    letter-spacing: -10.8px;
}

.section--works {
    padding-bottom: 0;
}

/* slick */

/* 各スライドのフレームサイズ（ここがscaleの対象） */
.content__item .slick-slide > div {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
}

/* 中央のスライドだけ拡大 */
.content__item .slick-center > div {
    transform: scale(1.3);
    z-index: 2;
    transition: transform 0.5s ease;
}

/* 画像は親フレーム内でサイズ統一、トリミング */
.content__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* slick全体の設定 */
.content__item {
    overflow: visible;
}

.slick-track {
    display: flex !important;
    gap: 10px;
    align-items: center;
  }

/* スライダー全体のスタイル */
.slider-container {
    position: relative;
}

/* ボタンをスライダーの上部に配置 */
.slider-buttons {
    position: absolute;
    top: -40px; /* スライダーの上部に少し隙間を開ける */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
}

/* Next / Prev ボタンのスタイル */
.slick-prev, .slick-next {
    background-color: transparent;
    border: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

/* ボタンがスライダー内に隠れないように */
.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

/* 画像スライダーのスタイル */
.content__item {
    width: 90%;
    margin: 0 auto;
}

.content__item img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 20px;
}

.worksImg {
    width: 100%;
    height: auto;
    text-align: center;
}

.mainTxt {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: -0.8px;
    margin: 61px auto 0;
}

.mainTxt p {
    margin-bottom: 16px;
}

.mainTxt .toiro {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
    text-decoration-color: #FFFC40;
    text-decoration-thickness: 11.5%;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.mainTxt .toiro:nth-of-type(1) {
    color: #FF9A00;
}

.mainTxt .toiro:nth-of-type(2) {
    color: #3099A0;
}

.mainTxt .toiro:nth-of-type(3) {
    color: #A259FF;
}

.mainTxt .toiro:nth-of-type(4) {
    color: #0ACF83;
}

.mainTxt--end {
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    margin-top: 60px;
}

.linkTxt {
    font-size: 1.9rem;
}

@media screen and (min-width:769px) {

    .section__box--works {
        padding: 270px 2% 160px;
    }

    .section--works ul {
        display: block;
        width: 87%;
        margin: 0 auto;
    }

    .mainTxt {
        font-size: 2.4rem;
        margin-top: 100px;
    }

    .mainTxt p {
        margin-bottom: 24px;
        /* position: relative; */
    }

    .mainTxt--end {
        text-decoration: underline dotted #000;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: 12.5%;
        text-underline-offset: 25%;
        text-underline-position: from-font;
        margin-top: 60px;
    }

    .sankaku {
        display: none;
    }

    /* animation */
    .mainTxt--end {
        margin-top: 80px;
        transition: transform 0.3s ease;
    }

    .mainTxt--end:hover {
        transform: scale(1.1);
        color: #ababab;
        text-decoration-color: #ababab;
    }

    .linkTxt {
        font-size: 3rem;
    }
}

/* pc 769px */