@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
トップページ　スライドショー横
************************************/
.topslider-container {
  position: relative;
}

/* ===== 全体 ===== */
.fv-slider {
  display: flex;
  height: 50vh;
  min-height: 400px;
  /* flex-direction: row-reverse; */ 
  color: rgba(64, 54, 48,0.7);
}

/* ===== 学びながら、次の自分へ。 ===== */
.fv-title {
font-size: 3rem;
line-height: 1.5;
font-weight: bold;
}
@media (max-width: 767px) {
.fv-title { font-size: 1.7rem; }
}


/* ===== 左（固定） ===== */
.fv-left {
  width: 40%;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 2;
  /* border: solid 1px green; 確認用 */
}

/* ===== テキスト調整 ===== */
.fv-content {
  max-width: 500px;
  margin-right: auto;
  padding: 40px 0 40px 20px;
}

/* ===== 右（スライド） ===== */
.fv-right {
  width: 60%;
  position: relative;
  overflow: hidden;
  /* border: solid 1px blue; 確認用 */
}

/* スライド */
.fv-slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.fv-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.fv-slide.active {
  opacity: 1;
}

/* 画像の左ぼかし */
.fv-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
}

/* ===== スマホ ===== */
@media (max-width: 768px) {

  .fv-slider {
    flex-direction: column;
    height: auto;
  }

  .fv-left {
    width: 100%;
    order: 2;
  }

  .fv-right {
    width: 100%;
    height: 250px;
    order: 1;
  }

  /* スマホはぼかし弱め */
  .fv-right::before {
    width: 60%;
  }

  .fv-content {
    margin: auto;
    padding: 20px;
  }
}