@charset "utf-8";

/* ----------------------------------------------------------------------------
共通
------------------------------------------------------------------------------ */
body {
  font-size: 16px;
  /* font-family: 'M PLUS Rounded 1c', sans-serif; */
  font-family: 'Libre Franklin', sans-serif;
  color: rgb(59, 30, 30);
  /* 文字色 */
}

/* 画像全部に最大横幅を設定する */
img {
  max-width: 100%;
}

/* 横幅指定 */
.wrapper {
  max-width: 1100px;
  /* ページ横幅 */
  margin: 0 auto;
  /* 中央揃え */
  padding: 0 30px;
}

.URLLink {
  color: rgb(180, 103, 2);
}



/* ----------------------------------------------------------------------------
top
------------------------------------------------------------------------------ */

/* ------------------------------------------------
ヘッダー
--------------------------------------------------- */

header {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
  /* height: 9vh; */
  height: 80px;
  /* background-color: rgb(59, 30, 30);
  color: #ffffff; */
  font-weight: 700;
}

/* headerロゴ */
h1 {
  font-size: 2rem;
  padding-top: 22px;
}

/* ------------------------------------------------
メインナビ
--------------------------------------------------- */
.mainNavUl {
  display: flex;
  font-size: 1.5rem;
  text-transform: uppercase;
  /* 大文字に変換 */
  margin-top: 26px;
}

.mainNavUl li {
  margin-left: 30px;
}


.mainNavUl li a {
  display: inline-block;
  position: relative;
  /* 基準 */
  /* text-decoration: none; */
}

.mainNavUl li a:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  /* 下線をaの幅に合わせる */
  height: 2px;
  /* 下線の太さ */
  background: #3b1e1e;
  transform: scale(0, 1);
  transition: 0.4s;
}

.mainNavUl li a:hover:before {
  transform: scale(1);
}



/* ------------------------------------------------
MVTitle
--------------------------------------------------- */
.MV {
  height: 70vh;
  display: flex;
  /* 中央揃え用 */
  align-items: center;
  /* 天地中央 */
  justify-content: center;
  /* 中央揃え */
  margin-bottom: 50px;
  letter-spacing: .1em;
  background: url(../img/AdobeStock_449983266.jpeg) no-repeat right bottom/cover;
}


.MVTitle {
  font-weight: 800;
  text-shadow: 2px 2px 3px #dcdada;
  /* テキストシャドウ */
}

.mainTitle {
  font-size: 4rem;
  text-align: center;
  /* 中央揃え */
}



.subTitle {
  font-size: 1.8rem;
  text-align: center;
  /* 中央揃え */
}

/* WORKS ABOUT CONTACT */
h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  /* 中央揃え */
  background-color: rgb(247, 234, 217);
  margin-bottom: 30px;
  padding: 18px 0;
  text-transform: uppercase;
  /* 大文字に変換 */
}



/* PROFILE SKILL */
.profile,
.skill {
  text-align: center;
}


h3 {
  font-size: 1.7rem;
  font-weight: 400;
  /* text-align: center; */
  /* 中央揃え */
  text-transform: uppercase;
  /* 大文字に変換 */
  display: inline-block;
  border-bottom: 2px solid rgb(57, 45, 45);
  /* width: 150px; */
  padding: 0 10px;
  /* 下線幅用 */
  margin: 0 auto 30px;
  /* 中央揃え下部余白 */
}

.profilearticle,
.skillbody {
  text-align: left;
}

/* sectionクラスに下余白 */
.section {
  margin-bottom: 40px;
}



/* ------------------------------------------------
works
--------------------------------------------------- */
/* カード型 https://shanabrian.com/web/html-css-js-technics/css-card-hover-effect-animation.php*/

.card-box .card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 5px;
  background-color: #fff;
  cursor: pointer;
}

/* .card-box .card p.image {
  margin: -10px -10px 0;
} */

.card-box .card p.image img {
  vertical-align: top;
}

/* .card-box .card p.text {
  margin: 10px 0 0;
} */

.card-box .card {
  transition: box-shadow 0.3s, transform 0.3s;
}

.card-box .card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  transform: translate(0, -10px);
}

/* カード型ここまで */

.worksList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 25px;
}


.worksItem {
  display: block;
  width: 100%;
  padding-bottom: 30px;

}


.worksImg img {
  width: 100%;
  height: auto;
}

.worksName {
  font-weight: bold;
  margin: 10px auto 15px;
  height: 2em;
}

.workscategory {
  line-height: 1.5rem;
  display: inline;
  padding: 0.2rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.workscategory.paper {
  background-color: rgb(245, 221, 177);
}

.workscategory.web {
  background-color: rgb(200, 232, 248);
}

.workscategory.Video {
  background-color: rgb(206, 203, 248);
}

.worksInfo {
  line-height: 1.5rem;
  margin-bottom: 10px;
  display: inline;
}



/* ------------------------------------------------
about
--------------------------------------------------- */

/* aboutセクションのprofile/skillセクションに下余白 */
.about section {
  margin-bottom: 30px;
}

/* ------------------------------------------------
プロフィール
--------------------------------------------------- */
.profileWrap {
  display: flex;
  justify-content: space-between;
  letter-spacing: .1em;
  /* 文字間スペース */
  line-height: 1.5;
  /* 行の高さ */
}

/* プロフィール画像 */
.profileImg {
  width: 40%;
}

/* プロフィール本文 */
.profilearticle {
  width: 53%;
}

.profilearticle p {
  margin-bottom: 30px;
}


/* ------------------------------------------------
スキル 
--------------------------------------------------- */
.skillWrap {
  display: flex;
  flex-wrap: wrap;
  /* grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
  gap: 15px; */
  justify-content: space-between;
}

.skillItem {
  display: flex;
  width: 45%;
  margin-bottom: 20px;
  letter-spacing: .1em;
  /* 文字間スペース */
  line-height: 1.5;
  /* 行の高さ */
}

.skillImg {
  width: 15%;
  margin: 25px;
}

.skillName {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.skillbody {
  width: 70%;
}

/* ------------------------------------------------
contact
--------------------------------------------------- */
.googleForm {
  text-align: center;
}


/* 埋め込みテスト */
.formWrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px;
}

.formtext {
  margin: 40px 0 30px;
  line-height: 1.5;
  /* 行の高さ */
}


/* 名前、メールアドレス記入欄 */
input[type="text"],
input[type="email"],
textarea {
  border: 1px solid rgb(57, 45, 45);
  background-color: #ffffff;
  width: 60%;
  margin: 5px 0 20px;
}

form>p {
  line-height: 1.3;
  /* 行の高さ */
}

/* コメント */
textarea {
  width: 100%;
  height: 150px;
}

/* 送信ボタン */
.submitBtn {
  text-align: center;
  /* 中央揃え */
  background-color: rgb(250, 224, 191);
  /* 背景色 */
  padding: 15px 70px;
  border-radius: 8px;
  font-size: 1.2rem;

}

/* 中央寄せ */
.submitarea{
  display: grid;
  place-items: center;
}

.submitBtn:hover {
  background-color: rgb(57, 45, 45);
  color: #ffffff;

}

/* input[type=submit] {
  background-color: rgb(250, 224, 191);
  padding: 15px 70px;
  border-radius: 8px;
  font-size: 1.2rem;

}

input[type=submit]:hover {
  background-color: rgb(219, 165, 99);
  color: #ffffff;

} */


/* ------------------------------------------------
formthanks.html
--------------------------------------------------- */

.formthanksPage{
margin: 5vh 0;
}

.formthanksPage h2{
margin-bottom: 100px;
}

.formthanks{
  font-size: 1.2rem;
  margin-bottom: 100px;
}

.formthanks p{
  margin-bottom: 50px;
}

.formthanksTop{
  text-align: center;
  /* 中央揃え */
  background-color: rgb(250, 224, 191);
  /* 背景色 */
  padding: 1rem 2rem;
  width: 15rem;
  border-radius: 8px;
  font-size: 1.2rem;
  display: inline;
  margin-bottom: 150px;
}

/* 中央寄せ */
.formthanksTop{
  display: grid;
  place-items: center;
}

.formthanksTop:hover {
  background-color: rgb(57, 45, 45);
  color: #ffffff;

}

/* ------------------------------------------------
トップに戻るボタン
--------------------------------------------------- */

.float-button__wrap {
  display: none;
  /*最初は隠す*/
  width: 60px;
  height: 60px;
  background-color: rgb(250, 224, 191);
  color: rgb(57, 45, 45);
  /* border: 1px solid rgb(57, 45, 45); */
  position: fixed;
  /* ページに固定 */
  bottom: 20px;
  /* 固定場所下 */
  right: 10px;
  /* 固定場所右 */
  z-index: 10;
  /* 前面に表示 */
  opacity: 0.6;
  /* 透明度 */
  text-align: center;
  border-radius: 50%;
}

.float-button__wrap a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
  /* 装飾なし */
  font-size: 40px;
}

.float-button__wrap a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f106';
  font-weight: 900;
  /* 太字 */
  position: absolute;
  top: 9%;
  left: 27%;
  margin: auto;
  text-align: center;
}

#pageTopBtn:hover {
  opacity: 0.9;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------
footer
--------------------------------------------------- */
footer {
  background-color: rgb(57, 45, 45);
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 30px 0;
}

/* SNSリスト */
.snsList {
  display: flex;
  justify-content: center;
  margin: 10px 0 20px;
  font-size: 2rem;
  gap: 2rem;
}


/* -----------------------------------------------------------------------
worksPage
----------------------------------------------------------------------- */



/* ------------------------------------------------
slick
--------------------------------------------------- */
/* 画像コンテナ */
.container {
  max-width: 1000px;
  height: auto;
  margin: 0 auto 20px;
}

.slider {
  margin-bottom: 20px;
}

/* メインスライダー */
.slider img {
  width: auto;
  height: 40vw;
  object-fit: contain;
  margin: 0 auto;
}

/* youtube動画スライド用 */
iframe.youtube-169 {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;


}

/* youtubu動画天地中央 */
.youtubeflex a{
  height: 40vw;
  display: grid;
  place-items: center;
}

iframe.youtube-916 {
  width: auto;
  height: 40vw;
  aspect-ratio: 9 / 16;
  display: block;
  margin: auto;
}

/* youtubeサムネイルサイズ調整 */
.thumbAdjust{
  width: auto;
  height: 150px;
  display: block;
  margin: auto;
  /* text-align: center; */
}

/* サムネイルの画像間にスペース追加 */
.thumb .slick-slide {
  padding: 5px;
}



.slick-prev {
  left: 5px;
  /* 左側の矢印アイコンの位置 */
}

.slick-next {
  right: 5px;
  /* 右側の矢印アイコンの位置 */
}

.slick-arrow {
  z-index: 2;
  /* スライドの内側に表示する場合は表示順を前面にする */
}

.slick-arrow {
  z-index: 2 !important;
  /* 表示順を前面にする */
  width: 50px !important;
  /* アイコンのサイズ（幅） */
  height: 38px !important;
  /* アイコンのサイズ（高さ） */
}

.slick-next:before {
  background: url(../img/arrow.png) no-repeat !important;
  /* 右向きアイコン画像のパスを指定 */
  /* .slick-arrowのサイズ指定が正確ならno-repeatは不要 */
  background-size: contain !important;
}

.slick-prev:before {
  background: url(../img/arrow.png) no-repeat !important;
  /* 左向きアイコン画像のパスを指定 */
  background-size: contain !important;
  /* アイコンの左右を反転（反転させる場合はコメントアウトを外す） */
  transform: scale(-1, 1);
}

.slick-arrow:before {
  /* 画像アイコンを所定の位置に表示させるための設定 */
  content: "" !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

.slick-dots {
  /* ドットの上下位置（マイナス値が大きいほど下） */
  bottom: -50px;
}

.slick-dots li {
  /* ドットの間隔 */
  margin: 0 30px;
  /* ドットを表示するボックスのサイズ */
  width: 30px;
  height: 30px;
}

.slick-dots li button:before {
  content: '';
  /* ドットのサイズ */
  width: 30px;
  height: 30px;
  /* ドットを丸くする（削除または0にすれば四角くなる） */
  border-radius: 10%;
  /* ドットの色 */
  background: rgb(59, 30, 30);
  /* ドットの不透明度（0～1） */
  opacity: .5;
}

.slick-dots li.slick-active button:before {
  /* アクティブドットの色 */
  background: rgb(59, 30, 30);
  /* アクティブドットの不透明度（0～1） */
  opacity: 1;
}

/* ------------------------------------------------
Worksテキスト
--------------------------------------------------- */

/* Worksのメイン記事(ターゲット/工夫した点/改善点)下余白 */

.detail h3 {
  font-weight: 400;
  margin: 0 auto 20px;
  /* 中央揃え下部余白 */
}

.detailWrap {
  line-height: 1.5;
  /* 行の高さ */
  height: auto;
}

.detailWrap section {
  line-height: 1.6;
  /* 行の高さ */
  margin-bottom: 80px;
}




/* サイズ/制作時間/使用ソフト */
.detailFlexWrap {
  display: flex;
  /* 横並び */
  justify-content: space-between;
  /* margin-bottom: 25px; 下余白 */
  height: auto;
}

/* テキストの段落ごとに下余白 */
.detailWrap p {
  margin-bottom: 30px;
}

/* detailFlexWrapを非表示にした時用下余白 */
.ADDMB {
  margin-bottom: 60px;
}

/* ------------------------------------------------
ページ移動
--------------------------------------------------- */
.pageWrap {
  display: flex;
  /* text-align: center; */
  justify-content: space-evenly;
  margin-bottom: 100px;
  padding-top: 1rem;
  /* ボタンにdetailFlexWrapの下側が被るためaのpadding分つけた */
}

.pageWrap p a {
  font-size: 1.1rem;
  background-color: rgb(250, 224, 191);
  color: rgb(57, 45, 45);
  /* padding: 15px 20px; */
  border-radius: 5%;
  position: relative;
}

/* マウスホバー */
.pageWrap p a:hover {
  font-size: 1.1rem;
  background-color: rgb(57, 45, 45);
  color: rgb(250, 224, 191);
}

/* 前の作品 */
.pagePrev a {
  /* padding: 15px 20px 15px 35px; */
  padding: 1rem 1.5rem 1rem 2.5rem;
}

.pagePrev a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f104';
  font-weight: 900;
  font-size: 1.6rem;
  position: absolute;
  /* top: 23.5%; */
  top: 24%;
  left: 10%;
}

/* WORKS一覧 */
.pageTop a {
  /* padding: 15px 20px 15px 45px; */
  padding: 1rem 1.5rem 1rem 3.5rem;
}

.pageTop a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f518';
  font-weight: 900;
  font-size: 1.3rem;
  position: absolute;
  top: 30%;
  left: 7%;
}

/* 次の作品 */
.pageNext a {
  /* padding: 15px 35px 15px 20px; */
  padding: 1rem 2.5rem 1rem 1.5rem;
}

.pageNext a::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f105';
  font-weight: 900;
  font-size: 1.6rem;
  position: absolute;
  /* top: 23.5%; */
  top: 24%;
  right: 10%;
}

.pageNone {
  visibility: hidden;
}


/* ----------------------------------------------------------------------------
レスポンシブ
------------------------------------------------------------------------------ */
/* -------------------------------------------------------
960px以下に適用
------------------------------------------------------- */
@media screen and (max-width: 960px) {

  /* ----------------------------------------------------------------------------
共通
------------------------------------------------------------------------------ */

  /* 横幅指定 */
  .wrapper {
    max-width: 100%;
    /* ページ横幅 */
    margin: 0 auto;
    /* 中央揃え */
    padding: 0 20px;
  }

  /* WORKS ABOUT CONTACT */
  h2 {
    font-size: 1.6rem;
  }


  /* ----------------------------------------------------------------------------
top
------------------------------------------------------------------------------ */

  /* ------------------------------------------------
ヘッダー
--------------------------------------------------- */

  header {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    height: 80px;
    font-weight: 700;
  }

  /* headerロゴ */
  h1 {
    font-size: min(4.5vw, 1.7rem);
    /* 1.8rem? */
    padding-top: 22px;
  }

  /* ------------------------------------------------
メインナビ
--------------------------------------------------- */
  .mainNavUl {
    font-size: min(3.5vw, 1.5rem);
    margin-top: 28px;
  }

  /* ------------------------------------------------
MVTitle
--------------------------------------------------- */
  .MV {
    margin-bottom: 50px;
  }



  /* ------------------------------------------------
about
--------------------------------------------------- */

  /* aboutセクションのprofile/skillセクションに下余白 */
  .about section {
    margin-bottom: 30px;
  }

  /* ------------------------------------------------
プロフィール
--------------------------------------------------- */

  /* プロフィール画像 */
  .profileImg {
    width: 35%;
  }

  /* プロフィール本文 */
  .profilearticle {
    width: 60%;
  }

  /* ------------------------------------------------
スキル 
--------------------------------------------------- */

  .skillItem {
    width: 49%;
    margin-bottom: 25px;
  }

  .skillImg {
    margin: 15px;
  }

  .skillbody {
    width: 80%;
  }

  /* ------------------------------------------------
contact
--------------------------------------------------- */
  .formWrap {
    margin-bottom: 40px;
  }


}

/* -------------------------------------------------------
810px以下に適用
------------------------------------------------------- */
@media screen and (max-width: 810px) {

  /* ------------------------------------------------
スキル 縦並び
--------------------------------------------------- */
  .skillWrap {
    display: block;
  }

  .skillItem {
    width: 100%;
  }

  .skillImg {
    width: 10%;
  }

  .skillbody {
    width: 100%;
  }

}


/* -------------------------------------------------------
530px以下に適用 520?
------------------------------------------------------- */
@media screen and (max-width: 530px) {

  /* ----------------------------------------------------------------------------
共通
------------------------------------------------------------------------------ */
  /* 横幅指定 */
  .wrapper {
    padding: 0 10px;
  }

  /* WORKS ABOUT CONTACT */
  h2 {
    font-size: 1.5rem;
  }

  /* ------------------------------------------------
ヘッダー
--------------------------------------------------- */
  header {
    display: block;
    height: auto;
    margin-bottom: 50px;
  }

  /* headerロゴ */
  h1 {
    font-size: 1.8rem;
    /* min(4.5vw,1.5rem) */
    padding-top: 20px;
    text-align: center;
  }




  /* ------------------------------------------------
メインナビ
--------------------------------------------------- */

  .mainNav {
    padding: 0 10px;
  }

  .mainNavUl {
    font-size: 1.5rem;
    text-transform: uppercase;
    /* 大文字に変換 */
    margin: 20px auto 50px;
    justify-content: center;
  }

  .mainNavUl li {
    margin: 0 10px;
  }


  /* ------------------------------------------------
プロフィール
--------------------------------------------------- */
  .profileWrap {
    display: block;
    line-height: 1.4;
    /* 行の高さ */
  }

  /* プロフィール画像 */
  .profileImg {
    width: 60%;
    margin: 0 auto 20px;
  }

  /* プロフィール本文 */
  .profilearticle {
    width: 100%;
  }

  .profilearticle p {
    margin-bottom: 20px;
  }



  /* -----------------------------------------------------------------------
worksPage
----------------------------------------------------------------------- */

  /* ------------------------------------------------
Worksタイトル
--------------------------------------------------- */
  .detailWrap .detail h3 {
    font-size: 1.5rem;
    margin: 0 auto 15px;
    /* 中央揃え下部余白 */
  }




  .VideoLinkWrap {
    display: block;
  }

  /* ------------------------------------------------
サイズ/制作時間/使用ソフト
--------------------------------------------------- */

  /* サイズ/制作時間/使用ソフト */
  .detailFlexWrap {
    display: block;
    /* 縦並び */
    margin-bottom: 40px;
    /* 下余白 */
  }

  .detailFlexWrap .detail {
    margin-bottom: 50px;
  }

  .detailFlexWrap .detail h3 {
    margin: 0;
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  .detailFlexWrap .detail p {
    margin: 5px 0;
  }

  /* ------------------------------------------------
ページ移動
--------------------------------------------------- */
  .pageWrap {
    display: block;
    /* 縦並び */
    text-align: center;
    /* 中央揃え */
    margin-bottom: 30px;
  }

  .pageWrap p a {
    display: inline-block;
    margin-bottom: 30px;
    font-size: 1.1rem;
    background-color: rgb(250, 224, 191);
    color: rgb(57, 45, 45);
    /* padding: 15px 20px; */
    border-radius: 5%;
    position: relative;
  }

  /* 前の作品 */
  .pagePrev a {
    padding: 15px 20px 15px 35px;
  }

  .pagePrev a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f104';
    font-weight: 900;
    font-size: 1.6rem;
    position: absolute;
    top: 23.5%;
    left: 10%;
  }

  /* WORKS一覧 */
  .pageTop a {
    padding: 15px 20px 15px 45px;
  }

  .pageTop a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f518';
    font-weight: 900;
    font-size: 1.3rem;
    position: absolute;
    top: 30%;
    left: 5%;
  }

  /* 次の作品 */
  .pageNext a {
    padding: 15px 35px 15px 20px;
  }

  .pageNext a::after {
    font-family: 'Font Awesome 5 Free';
    content: '\f105';
    font-weight: 900;
    font-size: 1.6rem;
    position: absolute;
    top: 23.5%;
    right: 10%;
  }

  /* 前ページ/次ページがない場合は非表示 */
  .pageNone {
    visibility: hidden;
  }





}