@charset "UTF-8";

/*共通部分
-----------------------*/
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
/*HEADER
-----------------------*/
.logo {
    width: 180px;
    margin-top: 10px;
}

.main-nav{
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 25px;
    list-style: none;
}
.main-nav li {
    margin-left: 36px;
}
.main-nav a {
    color: #fff;
}
.main-nav a:hover {
    color: #ff8c00;
}
.page-header {
    display: flex;
    justify-content: space-between;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 5;
    width: 100%;
}
.wrapper {
    
    margin: 0 auto;
    padding: 0 4%;
}

/* HOME
------------------------*/
.home-content {
    text-align: center;
    margin-top: 0%;
    padding-top: 10%;
}
.home-content p{
    font-size: 1.125rem;
    margin: 10px 0 15px;
}

/* 見出し */
.page-title {
    font-size: 7rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}

/* ボタン */
.button {
    font-size: 1.375rem;
    background: #ff8c00;
    color: #fff;
    border-radius: 5px;
    padding: 18px 32px;
    margin-top: 4%;
    margin-bottom: 5%;
}
.button:hover {
    background: #ff8c00;
}

/*== ボタン共通設定 */
.button{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
      border: 1px solid #555;/* ボーダーの色と太さ */
      padding: 10px 30px;
      text-align: center;
      outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.button span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#ffffff;
}

.button:hover span{
  color: #ff8c00;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#ffffff;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}



/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
#home {
    background-image: url(../images/2022年度/justロゴ/背景画像＿正方形.jpg);
    min-height: 100vh;
}


#home .page-title {
    text-transform: none;
}

/* ABOUT
---------------------------*/
#about {

    margin-bottom: 0px;
}
.page-title {
    text-align: center;
}

/* フッター
----------------------------*/
footer {
    background-color: #432;
    text-align: center;
    padding: 26px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}

/* 記事内容
-----------------------------*/
article {
    width: 74%;
    order: 2;
}

.article {
    margin-bottom: 100px;
}


/* サイドバー
------------------------------*/
aside {
    width: 22%;
    order: 3;
}

.ad {
    order: 1;
}

.about-contents{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.post-info {
    position: relative;
    padding-top: 4px;
    margin-bottom: 40px;
}
.post-date {
    background: #ff8c00;
    border-radius: 50%;
    color: #fff;
    width: 100px;
    height: 100px;
    font-size: 1.625rem;
    text-align: center;
    position: absolute;
    top: 0;
    padding-top: 10px;
}
.post-date span{
    font-size: 1rem;
    border-top: 1px rgba(255,255,255,.5) solid;
    padding-top: 6px;
    display: block;
    width: 60%;
    margin: 0 auto;
}
.post-title{
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 2rem;
    font-weight: normal;
}
.post-title,
.post-cat {
    margin-left: 120px;
}
article img {
    margin-bottom: 20px;
}
article p {
    margin-bottom: 2rem;
}

.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #ff8c00 solid;
    font-weight: normal;
}
aside p {
    padding: 12px 10px;
}

.sub-staff {
    margin-bottom: 60px;
    text-align: center;
    list-style: none;
}
.sub-staff li {
    border-bottom: 1px #ddd solid;
}
.sub-staff a {
    color: #432;
    padding: 10px;
    display: block;
}
.sub-staff a:hover {
    color: #ff8c00;
}



/*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
    overflow: hidden;
    display: block;
  }
  
  /* アニメーションで傾斜がついている文字列を水平に戻す*/
  span.smoothTextTrigger{
    transition: .8s ease-in-out;
    transform: translate3d(0,100%,0) skewY(12deg);
    transform-origin: left;
    display: block;
  }
  span.smoothTextTrigger.smoothTextAppear{
      transform: translate3d(0,0,0) skewY(0);
  }

@media (max-width: 600px) {
    h1 {
        color: #ff8c00;
    }
}

/*モバイル版
---------------------------------*/
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
    }

    /* HEADER */
    .main-nav {
        font-size: 1rem;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .main-nav li {
        margin: 0 5px;
    }

    /* HOME */
    .home-content {
        margin-top: 0%;
    }

    .home-content h2 {
        margin-top: 50%;
    }

    .page-header {
        flex-direction: column;
        align-items: center;
        margin-top: 0%;
        padding-top: 10px;
    }

    /* ABOUT */
    .about-contents {
        flex-direction: column;
    }
    article,
    aside {
        width: 100%;
    }
    #about .page-title {
        margin-top: 30px;
    }
    aside {
        margin-top: 30px;
    }
    .post-info {
        margin-bottom: 30px;
    }
    .post-date {
        width: 70px;
        height: 70px;
        font-size: 1rem;
    }
    .post-date span {
        font-size: 0.875rem;
        padding-top: 2px;
    }
    .post-title {
        font-size: 1.375rem;
    }
    .post-cat {
        font-size: 0.875rem;
        margin-top: 10px;
    }
    .post-title,
    .post-cat {
        margin-left: 80px;
    }
    /* STAFF */
    .staff-content {
        margin-top: 20%;
    }




    #sns .wrapper {
        flex-direction: column;
    }
    .sns-box {
        width: 100%;
        margin-bottom: 30px;
    }



    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }
}

/* STAFF
-------------------------------*/
#staff {
    background-image: url(../images/2022年度/全体写真＿単体/フレ団.jpg);
    min-height: 90vh;
}

@media (max-width: 600px) {
    #staff {
        background-image: none;
        min-height: 18vh;
    }
    
}

#news {
    background-image: url(../images/2022年度/全体写真＿単体/新勧合宿.jpg);
    min-height: 90vh;
}

.staff-content {
    max-width: 800px;
    text-align: center;
}
.staff-content .page-title {
    text-align: center;
}
.staff-content p {
    font-size: 1.125rem;
    margin: 5px 2px 0 0;
}
 
.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
}

/* CONTACT
-----------------------------------*/
#contact {
    background-color: #555;
    min-height: 100vh;
}

#contact h2 {
    padding-top: 5%;
}



/* フォーム */
form div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom: 10px;
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #fff solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 240px;
}
    

textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"] {
    border: none;
    cursor: pointer;
    line-height: 1;
}


#contact h2,
#contact label {
    color: #fff;
}

@media (max-width: 600px){
    #contact h2 {
        padding-top: 18vh;
    }
}

/* 店舗情報・地図　*/
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* iframe */
iframe {
    width: 100%;
}

/* SNS */
#sns {
    background: #faf7f0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 30px;
}
.sns-box {
    width: 100%;
}










/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
  width:300px;
}

/*========= SVG操作手書き風にするためのCSS ===============*/

#mask .st0{
    fill:none;
    stroke:#fff;
    stroke-width:90;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}

/*========= レイアウトのためのCSS ===============*/

#container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}


/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
    
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .fadeUpTrigger{
        opacity: 0;
    }




/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
    position: relative;
  }


.second-nav {
    list-style: none;
}  

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  top:40px;
  z-index: 4;
    /*形状を指定*/
  background-color: rgba(0, 0, 0, 0.4);
  width:180px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #fff;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child a{
  border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  background:#3577CA;
}

/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding:50px 20px;
  }
  
  .sort-btn li{
    background:#eee;
    border-radius:10px;
    cursor: pointer;
    padding: 10px;
    margin:50px 10px;
  }
  
  .sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
    background:#ccc;  
  }
  
  /*横幅が480px以下になった際の指定*/
  @media only screen and (max-width: 480px) {
  .sort-btn{
    justify-content: space-between;
  }
    
  .sort-btn li{
    width:48%;
    margin:0 0 10px 0;
    text-align:center;
    } 
  }
  
  /*＝＝＝Muuriのレイアウトのための調整 */
  #photo .grid {
    position: relative;/*並び替えの基準点を指定*/
  }
  
  /*各画像の横幅などの設定*/
  #photo .item {
    display: block;
    position: absolute;
    width: 33%;/*横並びで3つ表示*/
    z-index: 1;
  }
  
  /*内側のボックスの高さが崩れないように維持*/
  #photo .item-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /*画像の横幅を100%にしてレスポンシブ化*/
  #photo .grid img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
  }
  
  /*横幅が768px以下になった際の指定*/
  @media only screen and (max-width: 768px) {
  #photo37 .item {
    width: 49.5%;/*横並びで2つ表示*/
  }
  }
  
  /*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
  #photo .fancybox-thumbs {
      background: transparent!important;
  }
  
  #photo .fancybox-thumbs__list a:before {
      border: 6px solid #FA999B;
  }

  #photo ul{
    margin:0;
    padding: 0;
    list-style: none;
  }
  
  #photo a{
    color: #333;
  }
  
  #photo a:hover,
  #photo a:active{
    text-decoration: none;
  }
  
  #photo h1{
    text-align: center;
    font-size:6vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin:30px 0;
  }
  
  #photo p{
    margin:0 10px 10px 10px;
    word-wrap : break-word;
  }

  @media (max-width: 600px){
    .staff-content {margin-top: 25px;
    }

    #photo {
        margin-top: 10%;
    }
  }

.sort-btn li:hover {
    background-color: #ccc;
}

.justoutとは h3 {
    margin: 10% 5% 5% 5%;
    font-size: 5rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}

@media (max-width: 600px) {
    .justoutとは h3 {
        font-size: 4vw;
    }

    .justoutとは span {
        font-size: 4vw;
    }

    .justoutとは p a {
        font-size: 2.5vw;
    }
}


.line-scroll{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}


.line-scroll::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#ff8c00;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/

.line-scroll:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


.justoutとは p {
    font-size: 3rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}

.justoutとは {
    margin-bottom: 5%;
}

.justoutとは p a {
    font-size: 2rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    color: #ff8c00;
    border-bottom: 1px solid #ff8c00;
}

#photo-home {
    background-image: url(../images/2022年度/全体写真＿単体/ユニバ.jpg);
    min-height: 90vh;
}

@media (max-width: 600px) {
    #photo-home {
        background-image: none;
        min-height: 18vh;
    }
    

}


/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.slider img {
    width:50vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}

@media (max-width: 600px) {
    .slider {
        padding-top: 15px;
    }
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

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

.slick-dots {
    text-align:center;
  margin:20px 0 0 0;
}

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

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

#about {
    background-color: #fff;
    min-height: 17vh;
}




/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#ff8c00;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #777;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}

#staff紹介 h3 {
    font-family: 'Philosopher', serif;
    font-size: 1rem;
}