/* index */
 #index nav {
   position: absolute;
   z-index: 9999;
 }

 .slider {
   position: relative;
   z-index: 1;
   /* height: 100vh; */
   /* padding-top: 84px; */
   /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
 }

 .slider-item01 {
   background: url(../img/index/img_01.jpg);
 }

 .slider-item02 {
   background: url(../img/index/img_02.jpg);
 }

 .slider-item03 {
   background: url(../img/index/img_03.jpg);
 }

 .slider-item04 {
   background: url(../img/index/img_04.jpg);
 }

 .slider-item05 {
   background: url(../img/index/img_05.jpg);
 }

 .slider-item06 {
   background: url(../img/index/img_06.jpg);
 }

 .slider-item07 {
   background: url(../img/index/img_07.jpg);
 }

 .slider-item08 {
   background: url(../img/index/img_08.jpg);
 }

 .slider-item {
   width: 100%;
   height: 100vh;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }

 .slick-prev,
 .slick-next {
   position: absolute;
   z-index: 25;
   top: 50%;
   cursor: pointer;
   outline: none;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   height: 25px;
   width: 25px;
 }

 .slick-prev {
   left: 2.5%;
   transform: rotate(-135deg);
 }

 .slick-next {
   right: 2.5%;
   transform: rotate(45deg);
 }

 /*ドットナビゲーションの設定*/

 .ful .slick-dots {
   position: relative;
   z-index: 3;
   text-align: center;
   margin: -50px 0 0 0;
 }

 .ful .slick-dots li {
   display: inline-block;
   margin: 0 5px;
 }

 .ful .slick-dots button {
   color: transparent;
   outline: none;
   border: none;
   width: 10px;
   height: 12px;
   display: block;
   border-radius: 50%;
   background: #fff;
 }

 .slick-dots .slick-active button {
   background: #006EB8;
 }

 .full {
   position: relative;
   height: 100vh;
   background-color: #006eb8;
   /* width: 100%;
   height: 100svh;
   height: 100vh;
   height: 100dvh;
   background: url("../img/index/banner-img1.jpg") center / cover;
   background-color: #006eb8; */
 }

 .full .kv-sub {
   margin-bottom: 32px;
 }

 .full .kv {
   margin-bottom: 32px;
 }

 .full h1 {
   padding: 0px 0 16px;
   font-size: 34px;
 }

 .full p {
   font-size: 16px;
   letter-spacing: 1px;
 }

 .banner-content {
   margin: 0;
   position: absolute;
   transform: translate(calc(50vw - 50%), calc(50vh - 50%));
   width: 100%;
   text-align: center;
   color: #ffffff;
   z-index: 20;
   width: 700px;
 }

 .is-animated {
   animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
 }

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

   100% {
     opacity: 1;
   }
 }

 .scrolldown3 {
   position: absolute;
   bottom: 40px;
   right: 50%;
   animation: mousemove 1.6s ease-in-out infinite;
   z-index: 20;
 }

 @keyframes mousemove {
   0% {
     bottom: 40px;
   }

   50% {
     bottom: 35px;
   }

   100% {
     bottom: 40px;
   }
 }

 .scrolldown3 span {
   position: absolute;
   left: -15px;
   bottom: 45px;
   color: #fff;
   font-size: 0.7rem;
   letter-spacing: 0.05em;
 }

 .scrolldown3 span::after {
   content: "";
   position: absolute;
   top: 10px;
   left: 17px;
   width: 1px;
   height: 15px;
   background: #fff;
   animation: mousepathmove 1.4s linear infinite;
   opacity: 0;
 }

 @keyframes mousepathmove {
   0% {
     height: 0;
     top: 10px;
     opacity: 0;
   }

   50% {
     height: 15px;
     opacity: 1;
   }

   100% {
     height: 0;
     top: 30px;
     opacity: 0;
   }
 }

 .scrolldown3:before {
   content: "";
   position: absolute;
   bottom: 0;
   left: -10px;
   width: 25px;
   height: 37px;
   border-radius: 10px;
   border: 1px solid #eee;
 }

 .scrolldown3:after {
   content: "";
   position: absolute;
   bottom: 26px;
   left: 0;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   border: 1px solid #eee;
 }

 .bg-img-top .container,
 .bg-img-bottom .container {
   max-width: initial;
 }

 .bg-img-top.section .row .col,
 .bg-img-bottom.section .row .col {
   padding: 0px;
 }

 .bg-img-top .bg-img,
 .bg-img-top .bg-img2,
 .bg-img-bottom .bg-img {
   height: 460px;
   background-repeat: no-repeat;
   /* background-size: 100% auto; */
   /* background-attachment: fixed; */
   background-position: center;
   background-size: cover;
 }

 .bg-img-top .bg-img {
   background-image: url(../img/index/bg-img1.jpg);
 }

 .bg-img-top .bg-img2 {
   background-image: url(../img/index/bg-img2.jpg);
 }

 .bg-img-bottom .bg-img {
   background-image: url(../img/index/bg-img3.jpg);
 }


 .bg-img-bottom .container h2 {
   font-size: 28px;
   text-align: center;
   letter-spacing: 7px;
   padding-top: 120px;
   margin-bottom: 16px;
 }

 .bg-img-bottom p {
   margin-bottom: 16px;
 }

 .bg-img-bottom small {
   text-align: center;
   display: block;
 }

 .bg-img-bottom .container p {
   text-align: center;
 }

 .project h1 span.maim {
   color: #222222;
 }

 .project {
   background-color: #F3F4F3;
 }

 .project .mt32 {
   margin-top: 32px;
 }

 .project .main p {
   letter-spacing: -0.5px;
 }

 .project .white_bg {
   background: #fff;
   padding: 24px;
   border-radius: 8px;
   margin-bottom: 32px;
 }

 .project table {
   margin-bottom: 32px;
 }

 .project table tr.fast {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
 }

 .gallery-box h5 {
   margin-bottom: 1em;
 }

 .gallery-box p {
   margin-bottom: 0.5em;
 }

 .gallery-box p.link {
   margin-bottom: 2em;
 }

 .gallery-box img {
   border-radius: 8px
 }


 /* what */
 .what .gray-bg {
   background: #F3F4F3;
   padding: 24px;
   border-radius: 8px;
   margin-bottom: 32px;
 }

 .what small {
   margin-bottom: 2em;
 }

 /* make-use-of */
 .episode {
   background-color: #F3F4F3;
   border: 4px solid #006EB8;
   border-radius: 24px;
   padding: 40px 32px 32px;
   position: relative;
   margin: 24px 0;
 }

 .episode p {
   font-size: 14px;
   line-height: 1.5;
   margin: 0 0 24px;
 }

 .episorde-item {
   display: flex;
   justify-content: center;
 }

 .episorde-item picture {
   margin-bottom: 0px;
 }

 .episode-item-box {
   width: 220px;
   margin-right: 20px;
 }

 .episode-item-box:nth-child(2) {
   margin-right: 0px;
 }

 figcaption {
   font-size: 14px;
   text-align: left;
 }

 .episode h5 {
   position: absolute;
   font-size: 20px;
   background-color: #006EB8;
   padding: 4px 32px;
   color: #fff;
   border-radius: 10px;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
 }

 .episode-link p {
   font-size: 14px;
   margin-top: 0px;
   line-height: 1;
 }

 /* art */
 #art .section {
   background-color: #006EB8;
   color: #ffffff;
 }

 #art h1 span.maim,
 #art h3 {
   color: #ffffff;
 }

 .gallery-container {
   display: flex;
   flex-wrap: wrap;
   padding: 0 30px;
   margin: 40px 0;
 }

 .gallery-item {
   width: calc(20% - 0px);
   margin-bottom: 24px;
   text-align: center;
 }

 .gallery-item img {
   width: 100%;
   height: auto;
   max-width: 196px;
 }

 /* cooperation */

 .cooperation-table {
   margin-bottom: 4em;
 }

 .cooperation-table th {
   width: 30%;
 }

 .cooperation-table p {
   margin-bottom: 1em;
   ;
 }

 .what h5 {
   margin-bottom: 0px;
 }

 .cooperation h5 {
   margin-bottom: 0px;
 }

 /* learn */
 .learn-box {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   margin-bottom: 2em;
 }

 .learn-box h5 {
   margin-bottom: 1em;
 }

 .learn-box h6 {
   margin-bottom: 0.5em;
 }

 .learn-box p {
   margin-bottom: 0.5em;
 }

 .learn-box p.link {
   margin-bottom: 2em;
 }

 .enquete ul {
   margin-bottom: 1.5em;
 }

 .enquete-box {
   text-align: center;
 }

 .floating-banner {
   position: fixed;
   z-index: 99999;
   bottom: 0;
   right: 0;
 }

 .banner {
   width: 300px;
   padding: 40px 10px;
   background: #3E9ED9;
   color: #fff;
   font-weight: bold;
   text-align: center;
 }

 .floating-banner a {
   text-decoration: none;
 }

 .copy {
   font-size: 24px;
   margin: 0 auto 20px;
   line-height: 1.6;
 }

 .cta {
   display: inline-block;
   width: 200px;
   height: 50px;
   line-height: 50px;
   font-size: 18px;
   background: #f4a100;
   box-shadow: 0px 0px 30px #02a7d8;
   border-radius: 25px;
   margin: 0
 }

 @media screen and (max-width: 990px) {
   .floating-banner {
     display: none;
   }
 }

 @media screen and (max-width: 560px) {
   .floating-banner {
     display: inline-block;
   }

   .banner {
     width: 100vw;
     padding: 8px;
   }

   .sp {
     display: none;
   }

   .copy {
     font-size: 18px;
     margin: 0 auto 6px;
   }

   .cta {
     height: 28px;
     line-height: 28px;
     font-size: 15px;
   }
 }

 /* common */
 /* 擬似要素でテキストを表示 */
 nav ul a {
   position: relative;
   margin-top: -10px;
   min-height: 94px;
 }

 .navItem a::after {
   display: block;
   margin-top: 0px;
   font-size: 0.7rem;
   font-weight: lighter;
   line-height: 0;
   text-align: center;
   position: absolute;
   top: 70%;
   left: 50%;
   transform: translate(-50%, -80%);
 }

 .navItemHome a::after {
   content: "ホーム";
 }

 .navItemSponsors a::after {
   content: "協賛企業";
 }

 .navItemCooperation a::after {
   content: "協力";
 }

 .navItemArtbrut {
   width: 130px;
 }

 .navItemArtbrut a::after {
   content: "アールブリュット";
   left: 10%;
   transform: translate(0%, -50%);
 }

 .navItemLearn a::after {
   content: "学び";
 }

 .navItemPastactivities {
   width: 170px;
 }

 .navItemPastactivities a::after {
   content: "これまでの活動";
 }

 .navItemGoods a::after {
   content: "協賛商品";
   left: 26%;
   transform: translate(0%, -50%);
 }

 .navItemGoods {
   width: 100px;
 }

 #nav-mobile {
   padding-top: 40px
 }

 i.small {
   vertical-align: bottom;
 }

 .end {
   margin-bottom: 0px !important;
   padding-bottom: 0px !important;
 }

 .loader-bg {
   width: 100vw;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   background-color: #006EB8;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .loader,
 .loader:before,
 .loader:after {
   border-radius: 50%;
   width: 1.5em;
   height: 1.5em;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation: load7 1.8s infinite ease-in-out;
   animation: load7 1.8s infinite ease-in-out;
 }

 .loader {
   color: #ffffff;
   font-size: 10px;
   margin: 80px auto;
   position: relative;
   text-indent: -9999em;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }

 .loader:before,
 .loader:after {
   content: '';
   position: absolute;
   top: 0;
 }

 .loader:before {
   left: -3.5em;
   -webkit-animation-delay: -0.32s;
   animation-delay: -0.32s;
 }

 .loader:after {
   left: 3.5em;
 }

 @-webkit-keyframes load7 {

   0%,
   80%,
   100% {
     box-shadow: 0 2.5em 0 -1.3em;
   }

   40% {
     box-shadow: 0 2.5em 0 0;
   }
 }

 @keyframes load7 {

   0%,
   80%,
   100% {
     box-shadow: 0 2.5em 0 -1.3em;
   }

   40% {
     box-shadow: 0 2.5em 0 0;
   }
 }

 @-webkit-keyframes load3 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }

   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }

 @keyframes load3 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }

   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }

 .section .row .col {
   padding: 0 30px;
 }

 .resp-img {
   max-width: 100%;
   height: auto;
 }

 .sp-br {
   display: none;
 }

 s.section picture {
   display: block;
   text-align: center;
 }

 .section li {
   position: relative;
   padding-left: 24px;
   margin-bottom: 8px;
 }

 .section li::before {
   content: '';
   display: inline-block;
   position: absolute;
   top: 8px;
   left: 0;
   width: 6px;
   height: 6px;
   background-color: #006eb8;
   border-radius: 5px;
 }

 .footer-logo {
   margin: 32px 0;
 }

 .page-footer p {
   font-size: 14px;
   margin-bottom: 40px;
 }

 .page-footer .row {
   margin-bottom: 0px
 }

 /*==================================================
アニメーション
===================================*/
 /* その場で */
 .fadeIn {
   animation-name: fadeInAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeInAnime {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* 下から */
 .fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 上から */
 .fadeDown {
   animation-name: fadeDownAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeDownAnime {
   from {
     opacity: 0;
     transform: translateY(-50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 左から */
 .fadeLeft {
   animation-name: fadeLeftAnime;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeLeftAnime {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* 右から */
 .fadeRight {
   animation-name: fadeRightAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeRightAnime {
   from {
     opacity: 0;
     transform: translateX(50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeInTrigger,
 .fadeUpTrigger,
 .fadeDownTrigger,
 .fadeLeftTrigger,
 .fadeRightTrigger {
   opacity: 0;
 }

 .mfp-bg {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-bg.mfp-ready {
   opacity: 0.8;
 }

 .mfp-bg.mfp-removing {
   opacity: 0;
 }

 .mfp-wrap .mfp-content {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
 }

 .mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
 }

 @media screen and (max-width: 992px) {
   nav ul a {
     min-height: auto;
   }

   .banner-content {
     padding: 0 30px;
   }

   .bg-img-bottom .container h2 {
     padding-top: 0px;
   }

   .section.top-what {
     padding-bottom: 0px;
   }

   .bg-img-top .bg-img,
   .bg-img-top .bg-img2,
   .bg-img-bottom .bg-img {
     height: 280px;
     background-attachment: initial;
   }

   h1 {
     padding: 80px 0;
   }

   h1 span.maim {
     font-size: 56px;
     margin-bottom: 16px
   }

   h1 span.sub {
     font-size: 16px;
   }

   h2 {
     margin: 0 0 40px;
   }

   nav {
     padding: 0 8px;
   }

   picture {
     margin-bottom: 16px;
     display: block;
     text-align: center;
   }



   .episode h5 {
     font-size: 16px;
     padding: 8px 24px;
   }

   .cooperation h5 {
     font-size: 16px;
   }

   .gallery-item {
     width: calc(33% - 10px);
   }
 }

 /* スマートフォン：max-width : 599px */
 @media screen and (max-width: 599px) {
   .brand-logo img {
     max-width: 100px;
   }

   .banner-content {
     padding: 0 30px;
     transform: translate(calc(50vw - 50%), calc(46vh - 46%));
     width: 90%;
   }

   .full .kv {
     margin-bottom: 8px;
   }

   .full .kv-sub {
     margin-bottom: 8px;
   }

   .full h1 {
     padding: 0 0 16px;
     font-size: 24px;
   }

   .full p {
     font-size: 13px;
   }

   .bg-img-top .bg-img,
   .bg-img-top .bg-img2,
   .bg-img-bottom .bg-img {
     height: 180px;
     background-attachment: initial;
   }

   .bg-img-bottom .container small {
     margin-bottom: 40px;
   }

   .section {
     padding-bottom: 40px;
   }

   h1 {
     padding: 40px 0;
   }

   p {
     margin: 0 0 1em;
   }

   .suponsors h2 {
     margin: 40px 0 40px;
   }

   .gallery-item {
     width: calc(33.3% - 10px);
     margin: 5px;
   }

   .project table {
     margin-bottom: 16px;
   }

   .project table tr,
   .project table tr.fast {
     border: none;
   }

   .project table th,
   .project table td {
     display: block;
   }

   .project th {
     background: #ffffff;
     padding: 16px 16px;
   }

   .project td {
     padding: 16px 16px;
   }

   .what h5 {
     margin-bottom: 16px;
   }

   .cooperation h5 {
     margin-bottom: 16px;
   }

   .cooperation-table {
     margin-bottom: 24px;
   }

   .cooperation p {
     text-align: left;
   }

   i.small {
     vertical-align: sub;
   }

   .cooperation-table tr {
     border: none;
   }

   .cooperation-table th {
     background-color: #F3F4F3;
   }

   #index .cooperation-table th {
     background-color: #ffffff;
   }

   .cooperation-table th,
   .cooperation-table td {
     width: 100%;
     display: block;
     padding: 16px 16px;
   }

   .cooperation-table ul {
     margin-bottom: 2em;
   }

   .sp-br {
     display: block;
   }
 }

 @media screen and (max-width: 660px) {}

 @media screen and (max-width: 768px) {}