@charset "UTF-8";

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

:root {
    --brown: #362918;
    --en-font: 'Noto sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '7Meiryo', sans-serif;
    --main-font: "游ゴシック体", "Zen Kaku Gothic New", "halyard-display", "YakuHanJPs", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
    --font-size-18: 1.125rem;
    --letter-spacing-text: .06em;
}

body {
    color: var(--brown);
    font-size: 0.875rem;
    font-family: var(--main-font);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-text);
    line-height: 2.15;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: inherit;
    display: block;
}

li {
    list-style: none;
}

.container {
    margin: 0 auto;
    padding: 0 30px;
}

.sec-title-en {
    font-family: var(--en-font);
    font-size: 1.5rem;
    /*調整予定*/
    font-weight: 500;
    letter-spacing: .2rem;
    /*margin-bottom: 10px;*/
}

.sec-title {
    margin-bottom: 60px;
    /*letter-spacing: .2rem;*/
}

/*--- LINEボタン ---*/

#reserve .line-btn {
    display: block;
    text-align: center;
    border: #362918 solid 1px;
    color: #362918;
    border-radius: 100px;
    padding: 14px 0;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}

#reserve .line-btn:hover {
    color: #fafafa;
    background-color: #362918;
}

/* ローディング画面 
 
.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #fafafa;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  .loader-pc {
    display: none;
  }

  */

.pc-menu-contents {
    display: none;
}


/* パンをふわふわさせるアニメーション */

.fuwafuwa {
    animation: fuwafuwa 4s ease-in-out infinite alternate;
    transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0) rotate(-7deg);
    }

    50% {
        transform: translate(0, -7px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(7deg);
    }
}

.fuwafuwa2 {
    animation: fuwafuwa2 4s ease-in-out infinite alternate;
    transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa2 {
    0% {
        transform: translate(0, 0) rotate(10deg);
    }

    50% {
        transform: translate(0, -10px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(-10deg);
    }
}

.fuwafuwa3 {
    animation: fuwafuwa3 5s ease-in-out infinite alternate;
    transition: 5s ease-in-out;
}

@keyframes fuwafuwa3 {
    0% {
        transform: translate(0, 0) rotate(3deg);
    }

    50% {
        transform: translate(0, -3px) rotate(0deg);
    }

    100% {
        transform: translate(0, 0) rotate(-3deg);
    }
}

/*-- スクロールアップアニメーション --*/

.scroll_up {
    transition: 1s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}



.main-wrapper {
    max-width: 768px;
    margin: 0 auto;
    background-image: url(../img/all-background.png);
    background-position: top center;
    background-size: contain;
    background-repeat: repeat;
}


/*----- firstview-animation -----*/




/*----- header -----*/

#header {
    width: 100%;
    padding: 1rem 20px;
    /*調整中*/
    position: fixed;
    z-index: 999;
}

#header .site-title {
    display: block;
    width: 100px;
    /* 6rem */
    height: auto;
}

/*--- ハンバーガーメニュー ---*/

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-wrapper {
    display: block;
}

.menu-btn {
    position: relative;
    cursor: pointer;
    appearance: none;
    width: 34px;
    height: 12px;
    transition: ease 0.5s;
    z-index: 1000;
}


.menu-btn span {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #362918;
    transition: ease 0.5s;
}

.menu-btn span:nth-of-type(1) {
    top: 0;
}

.menu-btn span:nth-of-type(2) {
    top: 10px;
    bottom: 0;
    top: auto;
}

.menu-btn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(18deg);
}

.menu-btn.active span:nth-of-type(2) {
    transform: translateY(-4px) rotate(-20deg);

}

/* menu-lists */

.menu-lists {
    display: none;
    width: 100vw;
    height: 100vh;
    background-image: url(../img/background.png);
    background-repeat: repeat-y;
    text-align: center;
    margin: 0 auto;
    padding: 35% 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 888;
}

.menu-lists .site-title {
    margin-bottom: 60px;
}

.menu-lists .site-title img {
    display: block;
    object-fit: cover;
}

.menu-lists ul {
    display: block;
    color: #362918;
    font-size: 1rem;
    text-align: center;
}

.menu-lists ul li {
    font-family: var(--en-font);
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: left;
    border-bottom: 1px solid #ebe1d3;
    margin-bottom: 30px;
    padding-bottom: 30px;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
    position: relative;
}

.menu-lists ul li:first-of-type {
    border-top: 1px solid #ebe1d3;
    padding-top: 30px;
}

.menu-lists .footer-line,
.footer-insta {
    font-size: 1rem;
}

.menu-lists ul li span {
    font-family: var(--main-font);
    font-size: 0.625rem;
    font-weight: 400;
}


/*
    .menu-lists ul li:nth-child(3) {
        padding-bottom: 60px;
    }
    
    .menu-lists ul li:nth-child(4) {
        padding-bottom: 10px;
    }
*/


/* SNS */

.menu_line,
.menu_insta {
    position: relative;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}

/*
.menu-lists .menu_line::after {
    content: '';
    display: block;
    background-image: url(../img/right.svg);
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 17%;
    right: 26%;
  }

.menu-lists  .menu_insta::after {
    content: '';
    display: block;
    background-image: url(../img/right.svg);
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 27%;
    right: 26%;
  }
  */

.pc_nav {
    display: none;
    /*opacity: 0;*/
}

/*--- ハンバーガーメニューここまで ---*/

/*footerまでスクロールしたら消す*/
.is-hidden {
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease;
}

/*----- mainvisual -----*/

.mainvisual {
    position: relative;
    padding: 60px 30px;
}

.copy {
    color: #fafafa;
    font-weight: 600;
    text-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 330px;
    left: 12%;
    z-index: 99;
    margin-bottom: 10px;
}

.index-concept-lead {
    font-size: 1rem;
    letter-spacing: .01rem;
    font-weight: bold;
}



.index-concept-lead-word {
    opacity: 0;
    position: relative;
    margin: 0;

    transition: 3s cubic-bezier(.25, .46, .45, .94);
    animation: textanimation 3.5s forwards;
}

@keyframes textanimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 2文字目 */
.index-concept-lead-word:nth-child(2) {
    animation-delay: .05s;
}

/* 3文字目 */
.index-concept-lead-word:nth-child(3) {
    animation-delay: .1s
}

/* 4文字目 */
.index-concept-lead-word:nth-child(4) {
    animation-delay: .15s
}

/* 5文字目 */
.index-concept-lead-word:nth-child(5) {
    animation-delay: .2s
}

/* 6文字目 */
.index-concept-lead-word:nth-child(6) {
    animation-delay: .25s
}

/* 7文字目 */
.index-concept-lead-word:nth-child(7) {
    animation-delay: .3s
}

/* 8文字目 */
.index-concept-lead-word:nth-child(8) {
    animation-delay: .35s
}

/* 9文字目 */
.index-concept-lead-word:nth-child(9) {
    animation-delay: .4s
}

/* 10文字目 */
.index-concept-lead-word:nth-child(10) {
    animation-delay: .45s
}

/* 11文字目 */
.index-concept-lead-word:nth-child(11) {
    animation-delay: .5s
}

/* 12文字目 */
.index-concept-lead-word:nth-child(12) {
    animation-delay: .55s
}

/* 13文字目 */
.index-concept-lead-word:nth-child(13) {
    animation-delay: .6s
}

/* 14文字目 */
.index-concept-lead-word:nth-child(14) {
    animation-delay: .65s
}

/* 15文字目 */
.index-concept-lead-word:nth-child(15) {
    animation-delay: .7s
}

/* 16文字目 */
.index-concept-lead-word:nth-child(16) {
    animation-delay: .75s
}

/* 17文字目 */
.index-concept-lead-word:nth-child(17) {
    animation-delay: .8s
}



.copy .copy-en {
    font-family: var(--en-font);
    font-weight: 400;
    font-size: 0.625rem;
    letter-spacing: .09rem;
    padding-top: 20px;
}

.slidein {
    animation: slideIn 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
    0% {
        transform: translateX(80px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}



/*-- ふわふわ、もやもやのアニメーション --*/

.fluffy {
    animation: 4s 0s fluffy ease-in-out infinite;
}

@keyframes fluffy {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }
}

.fluffy-01 {
    position: absolute;
    top: 5%;
    right: -30%;
}


.fluffy-02 {
    position: absolute;
    top: 70%;
    right: 20%;
}

/*--- スライドショー ---*/

#slideshow {
    width: 100%;
    height: 540px;
    position: relative;
}

#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#slideshow img.active {
    opacity: 1;
    z-index: 10;
}

#slideshow img.last-active {
    z-index: 9;
}

/* --- scroll down --- */

.scrollbar-container {
    height: 300px;
    position: absolute;
    top: 35vh;
    right: 15%;
    z-index: 100;
}

.scrollbar-text {
    display: inline-block;
    position: absolute;
    bottom: 0;
    padding: 10px 10px 110px;
    color: #fafafa;
    text-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
    font-size: 0.7rem;
    font-family: var(--en-font);
    line-height: 1;
    letter-spacing: .3em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    left: 50%;
    transform: translateX(-50%);
}

.scrollbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1px;
}

.scrollbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100px;
    background: #fff;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
    animation: liner 3.5s infinite;
}

@keyframes liner {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    30% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    70% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}


/*----- ABOUT -----*/

#about {
    position: relative;
    padding-bottom: 160px;
    overflow-x: hidden;
    overflow-y: hidden;
}

#about .container {
    position: relative;
}

/*
#about svg {
    position: absolute;
    width: 100%;
    height: auto;
    top: 100%;
    left: 0;
    z-index: 9;
}
*/

/* --- コピーアニメーション ---*/

.about-copy-main {
    margin-bottom: 40px;
    line-height: 2.8rem;
    font-size: 1.125rem;
    /*1remと悩み中*/
    letter-spacing: .2em;
    font-weight: bold;
}



/* --- アニメーション終了 ---*/


#about .about-copy p {
    width: 70%;
    line-height: 2.5;
    text-align: justify;
    margin-bottom: 20px;
}

#about .about-copy p:last-of-type {
    margin-bottom: 0;
}


/* パンのイラスト */

.bread-illust-01 {
    position: absolute;
    top: 80%;
    right: 25%;
    width: 47px;
    height: auto;
}

.bread-illust-02 {
    position: absolute;
    top: 86%;
    right: 15%;
    width: 42px;
    height: auto;
}

/*----- 無限ループCSS -----*/

@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }

}

.scroll-infinity {
    position: relative;
    z-index: 99;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
}

.scroll-infinity__list--right {
    animation: infinity-scroll-right 80s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: calc(100vw / 2);
    margin-right: 20px;
}

.scroll-infinity__item>img {
    width: 100%;
    height: auto;
    border-radius: 0px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/*----- School -----*/

#school {
    position: relative;
    margin: 160px 0 80px;
}

#school .school-bg {
    /*background-image: url(../img/background.png);
    background-position: top center;
    background-size: contain;
    background-repeat: repeat-y;
    */
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}


/*-- School 各コンテンツ --*/

.school-contents {
    background-color: transparent;
    /*text-align: center;*/
    margin: 0 auto 40px;
    padding: 60px 0;
}

.school-contents p {
    text-align: justify;
}

#school .school-img {
    margin-bottom: 30px;
}

#school .school-img img {
    border-radius: 15px;
}

#school .article-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    /*display: inline-block;*/
    /*border-bottom: #000 solid 2px;*/
    /*padding-bottom: 10px;*/
}

#school .school-contents p span {
    font-size: 0.75rem;
}

#school .school-contents .alert-p {
    display: block;
    /*font-size: 0.875rem;*/
    opacity: 0.7;
    padding-top: 10px;
}

/* School コンテンツ 01-03 */

.school-contents-01 {
    position: relative;
}

.school-contents-01::before {
    position: absolute;
    content: "01";
    font-size: 1rem;
    font-weight: 800;
    top: 0;
    left: 0;
}

.illust-1 {
    width: 110px;
    position: absolute;
    top: -1%;
    right: -1%;
}

.school-contents-02 {
    position: relative;
}

.school-contents-02::before {
    position: absolute;
    content: "02";
    font-size: 1rem;
    font-weight: 800;
    top: 0;
    left: 0;
}

.illust-2 {
    width: 108px;
    position: absolute;
    top: 45%;
    right: -1%;
}


.school-contents-03 {
    position: relative;
}

.school-contents-03::before {
    position: absolute;
    content: "03";
    font-size: 1rem;
    font-weight: 800;
    top: 0;
    left: 0;
}

.illust-3 {
    width: 110px;
    position: absolute;
    top: 85%;
    right: -1%;

}


.school-contents:last-child {
    margin-bottom: 160px;
}


/*--- wave 

#school-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    left: 0;
    z-index: 1;
}

---*/

/*---- 詳細 ---*/

.detail {
    text-align: left;
    margin: 0 auto;
}

.detail dl {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ebe1d3;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.detail dl:first-of-type {
    padding-top: 30px;
    border-top: 1px solid #ebe1d3;
}

.detail dl:last-of-type {
    margin-bottom: 0;
}

.detail dt {
    font-weight: 600;
    width: 20%;
}

.detail dd {
    width: 80%;
}

.detail .alert {
    margin-left: 20%;
}

/*----- shop -----*/

#shop {
    /*background-image: url(../img/background.png);
    background-repeat: repeat-y;*/
    padding: 160px 0;
    position: relative;
}


.fluffy-03 {
    opacity: 0.5;
    position: absolute;
    top: -14%;
    left: -30%;
}

.fluffy-04 {
    position: absolute;
    bottom: -13%;
    left: -30%;
}

.fluffy-05 {
    width: 17rem;
    position: absolute;
    bottom: -49%;
    right: 0;
    opacity: 0.5;
}

.bread-illust-03 {
    width: 37px;
    height: auto;
    position: absolute;
    top: 3%;
    right: 26%;
}

.bread-illust-04 {
    width: 35px;
    height: auto;
    position: absolute;
    top: -2%;
    right: 12%;
}

/*--- wave ---

 #shop-svg {
    position: absolute;
    width: 100%;
    height: auto;
    top: -2%;
    left: 0;
    z-index: 2;
}
*/

#shop .map_img {
    margin: 0 auto 20px;
    position: relative;
}

#shop .map_img img {
    border-radius: 15px;
}

#shop .map_img .inaho-illust {
    position: absolute;
    top: 64%;
    right: 0;
}

#shop .map_img .inaho-illust img {
    width: 108px;
    height: auto;
}

#shop .shop-title {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: bold;
}

#shop .shop-adress {
    margin-bottom: 60px;
}

#shop .insta-btn {
    border-bottom: 1px solid #ebe1d3;
    padding-bottom: 60px;
    margin-bottom: 30px;
}

#shop .insta-btn a {
    display: block;
    color: #362918;
    border: #362918 solid 1px;
    text-align: center;
    border-radius: 100px;
    padding: 14px 0;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}

#shop .insta-btn a:hover {
    color: #fafafa;
    background-color: #362918;
}

#shop .car .sec-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 20px;
}

#shop .car p {
    text-align: left;
    margin-bottom: 60px;
}

#shop .car-img img {
    border-radius: 15px;
}



/*----- Reserve -----*/

#reserve {
    padding: 60px 0;
    border: #362918 solid 1px;
    border-radius: 30px;
    margin: 0 30px 160px;
    position: relative;
}

#reserve .sec-title-en {
    text-align: center;
}

#reserve .sec-title {
    text-align: center;
    margin-bottom: 60px;
}

#reserve .container {
    position: relative;
    overflow: hidden;
}


#reserve p {
    text-align: justify;
    margin: 0 auto 60px;
}

/*
#reserve .line-btn:hover {
    letter-spacing: 0.1rem;
    transform: scale(1.1);
}

#reserve .line-btn::after {
    background-image: url(../img/right-blue.svg);
    width: 1.5rem;
    height: 1.5rem;
    top: 31%;
    right: 9%;
  }

  */

/*--- wave 
#svg-bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 92%;
    left: 0;
    z-index: -1;
}

#svg-bg-01 {
    position: absolute;
    width: 100%;
    height: auto;
    top: -6%;
    left: 0;
    z-index: -1;
}

---*/


/* -------footer ------*/

#footer {
    background-image: url(../img/background.png);
    background-repeat: repeat-y;
    /*border-radius: 60px 60px 0 0;*/
    margin-top: 160px;
    padding: 80px 30px 30px;
}

#footer .site-title {
    width: 100px;
    /* 6rem */
    margin: 0 auto 20px;
}

#footer .footer-illust {
    position: relative;
    text-align: center;
}

#footer .illust {
    width: 100px;
    text-align: center;
    margin-bottom: 80px;
}

/* ふわふわをつけるか検討
.fluffy-footer {
    position: absolute;
    top: 20%;
    left: -50%;
    overflow-x: hidden;
}
*/

#footer ul li,
.pc-nav-inline ul li {
    font-family: var(--en-font);
    font-size: 1.125rem;
    text-align: left;
    line-height: 1.5;
    border-bottom: 1px solid #ebe1d3;
    margin-bottom: 30px;
    padding-bottom: 30px;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
    position: relative;
}

.pc-nav-inline ul li:hover {
    opacity: 0.5;
}

#footer ul li span {
    font-family: var(--main-font);
    font-size: 0.625rem;
    font-weight: 400;
}

#footer ul li:first-of-type {
    border-top: 1px solid #ebe1d3;
    padding-top: 30px;
}

#footer ul li:last-child {
    margin-bottom: 30px;
}

#footer ul li:hover {
    opacity: 0.5;
}

#footer .copyright {
    font-size: 0.75rem;
    text-align: center;
}

#footer .footer-line,
.footer-insta {
    font-family: var(--main-font);
    font-weight: 400;
    font-size: 1rem;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
    position: relative;
}

/*
.line-btn::after {
    content: '';
    display: block;
    background-image: url(../img/right.svg);
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 30%;
    right: 20%;
  }
  */

/*
#footer .footer_line::after {
    content: '';
    display: block;
    background-image: url(../img/brown-right.svg);
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 25%;
    left: 28%;
  }

  #footer .footer_insta::after {
    content: '';
    display: block;
    background-image: url(../img/brown-right.svg);
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 31%;
    left: 28%;
  }
    */


/*-- 最初のローディング画面 

    .start {
        background: #FFF;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 9000;
        opacity: 0.5;
    }
    .start p {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 9999;
        width: 280px;
    }
   -- */

/*---------- 小さいSP ----------*/
@media screen and (max-width: 375px) {}

/*---------- タブレット版 ----------*/
@media screen and (min-width: 768px) {

    /*
      .loader-sp {
        display: none;
      }

      .loader-pc {
        display: block;
      }
    */

    body {
        background-image: url(../img/pc-bg.png);
        background-position: top center;
        background-size: contain;
        background-repeat: repeat;
    }

    #header {
        position: static;
    }

    main {
        display: flex;
    }

    .main-wrapper {
        max-width: 375px;
        min-width: 375px;
    }

    .mainvisual {
        padding: 0 30px 80px;
    }

    .menu-btn {
        display: none;
    }

    .pc-menu-contents {
        display: flex;
        position: absolute;
        /* margin: 0 auto; */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100vh;
    }

    .pc-nav {
        display: flex;
        height: 100vh;
        position: absolute;
    }

    .pc-nav-inline {
        width: calc(51vw - 195px);
        height: 100vh;
        display: flex;
        justify-content: center;
        text-align: left;
        overflow: auto;
        padding: 160px 30px;
        position: fixed;
    }

    .pc-nav-inline ul li {
        font-family: var(--en-font);
        font-size: 1.125rem;
    }


    .pc-nav-inline ul li .footer-line,
    .footer-insta {
        font-size: 0.875rem;
    }

    .pc-nav-inline ul li span {
        font-family: var(--main-font);
        font-size: 0.625rem;
    }

    .pc-left {
        display: flex;
        height: 100vh;
        position: absolute;
    }

    .pc-left-inline {
        width: calc(51vw - 195px);
        height: 100vh;
        display: flex;
        justify-content: center;
        text-align: left;
        overflow: auto;
        padding: 45px 30px;
        position: fixed;
        right: 0;
    }

    .pc-left-inline img {
        width: 8rem;
        object-fit: contain;
    }

    .btn {
        display: none;
    }

    /* slideshow */
    #slideshow {
        height: 417px;
    }

    .copy {
        top: 200px;
    }

    .scrollbar-container {
        top: 28vh;
    }

    /* about */
    .bread-illust-01 {
        width: 48px;
    }

    .bread-illust-02 {
        width: 43px;
    }

    .bread-illust-03 {
        width: 38px;
    }

    .bread-illust-04 {
        width: 35px;
    }


    /* scroll */
    .scroll-infinity__item {
        width: calc(100vw / 7);
    }

    /* school */


    .illust-2 {
        top: 41%;
    }

}

/*----------- PC ----------*/

/*
       .loader-sp {
        display: none;
      }

      .loader-pc {
        display: block;
      }
*/

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

    /*
    main {
        display: flex;
    }
    */

    /* about */
    #about {
        position: relative;
    }

    .scrollbar-container {
        top: 25vh;
    }


}