@charset "UTF-8";

/*
Theme Name: Johei Oku Portfolio
Author: Johei Oku
Description: 学習成果を掲載するポートフォリオサイトのためのWordPressテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
 */

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* body */
  body {
  color: #333;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}

/* header */

  /* ハンバーガーメニュー設定 */
  /* スマホのみで表示 */
  @media screen and (max-width: 640px) {

    .bgr {
      width: 80px;
      height: 64px;
      border: 1px solid #F933CD;
      position: fixed;
      top: 10px;
      right: 25px;
      z-index: 1;
      cursor: pointer;

  }
  
  /* 以下長さや高さは、%表記で統一 */
  .bgr span {
      /* display: block; */ 
      /* ↑これでspanの棒がでるので気合で指定しても良 */
      width: 80%;
      height: 5%;
      background-color: #F933CD;
      position: absolute;
      inset: 0;
      margin: auto;
      transition: 0.5s;
  }
  
  .bgr span:nth-child(1) { /* 一番下 */
      top: 40%;
  }
  
  .bgr span:nth-child(3) { /* 一番上 */
      top: -40%;
  }
  
    /* なんかよく分かっとらんけど、ネットの情報を参考に気合でやったらできた。:after要素ってなに笑？ */
    .bgr:after {
      display: block;
      content:"menu";
      width:50px;
      margin-top:65%;
      margin-left: 30%;
      font-size:12px;
      color:#F933CD;
    }
  
  
  
  /* クリック後 */
  .bgr.active {
      background-color:#FFDBF7;
      border: 1px solid #444;
  }
  
  .bgr.active:after {
    content: "♡";
    margin-left: 44%;
    color:#444;
  
  }
  
  /* スの部分 */
  
  .bgr.active span:nth-child(1) { /* 一番下 */
      background-color: #444;
      top: 16%;
      right: 20%;
      width: 33%;
      transform: rotate(40deg);
     
  }
  .bgr.active span:nth-child(2) { /* 真ん中 */
      background-color: #444;
      /* opacity: 0; */
      width: 50%;
      right: 60%;
      /* top: 6px; */
      transform: rotate(-40deg);
  }
  .bgr.active span:nth-child(3) { /* 一番上 */
      background-color: #444;
      width: 40%;
      right: 48%;
      top: -45%;
      /* top: -20px; */
  }
  
  /* キの部分 */
  
  .bgr.active span:nth-child(4) { /* 一番上 */
      background-color: #444;
      width: 30%;
      left: 40%;
      top: -40%;
      /* top: -20px; */
      transform: rotate(-10deg);
  }
  
  .bgr.active span:nth-child(5) { /* 真ん中 */
      background-color: #444;
      /* opacity: 0; */
      width: 50%;
      left: 50%;
      top: -10%;
      transform: rotate(70deg);
  }
  
  .bgr.active span:nth-child(6) { /* 一番下 */
      background-color: #444;
      /* top: 10px; */
      width: 40%;
      left: 50%;
      transform: rotate(-10deg);
  }
}

  /* nav設定 */
  .nav_sp {
    display: none;
  }

  @media screen and (max-width: 640px) {
    /* ここでスマホ用のnav設定 */
    .nav_sp{
      display: block;
      /* PC表示の際には非表示だった、nav_spを表示 */
      position: fixed;
      /* position、固定、幅・高さ、100%の設定 */
      width: 100%;
      height: 100%;
      top: 0;
      /* OKU:重要；ここで無理やり隠している設定 */
      left: 100%;
      /* top 0、left 100%で枠外に隠す設定 */
      background-color: #FFDBF7;
      /* 背景色適宜 */
      transition: 0.3s;
      /* 隠していいる、.nav_spを戻して見せる時のtransition設定 */
      /* OKU:ここでスライドした動きに見えるのは、そーゆーもんで理解しておくしかないみたい */
  }

  .nav_sp .nav_inner{
      padding-top: 150px;
      /* padding-topで適宜見やすい位置に調整 */
  }

  .nav_sp .nav_inner a{
      display: block;
      /* aタグのブロックボックスへの変換 */
      text-align: center;
      line-height: 60px;
      /* 水平・縦中央揃い 縦中央はline-height:60pxの設定 */
      color: #444;
      font-weight: bold;
      letter-spacing: 0.1em;
      margin-bottom: 50px;
  }

  .nav_sp.drawer{
      left:0;
      /* バーガーボタンがクリックされたら、drawerクラスを追加するための設定 */
  }
  }


header {
  margin-bottom: 20px;
}

/* PC用nav設定 */
.header {
  /* position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 24px 40px;
  background-color: #e4e4e468;
}
/* Hero画像の上にかませているのがミソ */

@media screen and (max-width:640px) {
  .header  {
    display: none;
    /* padding: 12px 20px;
    height: 60px; */
    }
  }


.header > h1 {
  font-size: 20px;
}

@media screen and (max-width:640px) {
  .header > h1 {
    font-size: 10px;
    }
}

.header > h1 > a:hover {
  color: #f933cd;
}

.header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 20px; */
}



.header li {
  border-left: 1px dotted #999;
  /* margin: 0 0 0 20px; */
}

@media screen and (max-width:640px) {
  .header li {
    font-size: 10px;
    }
  }

.header li a {
  display: block;
  line-height: 22px;
  /* background-color: #f0f; */
  padding: 20px;
}

@media screen and (max-width:640px) {
  .header li a {
    padding: 10px;
    }
  }

.header li a:hover {
  color: #f933cd;
  border-bottom: 1px solid #f933cd;
}

.header .li_service {
  background-color: #FFDBF7;
  border-radius: 30px;
  color: #444;
  /* padding: 20px; */
  /* line-height: 22px; */
}



.header .li_service a:hover {
  background-color: #fff;
}

@media screen and (max-width:640px) {
  .main_image {
    height: 300px;
    /* margin-top: 30px; */
    }
  }


/* main */
.main {
  max-width: 960px;
  margin: 0 auto;
}

/* スマホ用レイアウト */
@media screen and (max-width: 640px) {
  .main {
    padding: 0 20px;
  }
}

/* section {
  width: min(92%, 960px);
  margin: 0 auto;
} */

main .h2 {
  padding: 10px 0px 10px 20px;
  border-left: 10px solid v #F933CD;
  background: #FFDBF7;
  margin-bottom: 40px;
}

@media screen and (max-width:640px) {
  main .h2 {
    margin-bottom: 20px;
    }
  }

.service_container {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  /* height: 160px; */
  align-items: center;
  padding: 40px;
  gap: 40px;
  margin-bottom: 60px;
}

@media screen and (max-width:640px) {
  .service_container {
    grid-template-columns: 1fr;
    padding: 20px ;
    gap: 20px;
    margin-bottom: 30px;
    justify-items: center;
    align-items: center;
    }
  }

  @media screen and (max-width:640px) {
    .service_container > img  {
      width: 100px;
      /* margin: 0 auto; */
      }
    }

.service_container > h3 {
  font-size: 20px;
  line-height: 160%;
}

@media screen and (max-width:640px) {
  .service_container > h3 {
    font-size: 16px;
    text-align: center;
    }
  }

.service_container li {
  font-size: 20px;
  line-height: 160%;
}

@media screen and (max-width:640px) {
  .service_container li {
    font-size: 16px;
    text-align: center;
    }
  }

.h2 > h2 {
  font-size: 28px;
  line-height: 160%;
}

@media screen and (max-width:640px) {
  .h2 > h2 {
    font-size: 20px;
    }
  }

.h2 > p {
  font-size: 20px;
  line-height: 160%;
}

section h3 {
  font-size: 24px;
  line-height: 160%;
  /* margin-bottom: 40px;  */
}


.works_container img {
  margin-bottom: 40px;
}

@media screen and (max-width:640px) {
  .works_container img {
    width: 300px;
    margin-bottom: 10px;
    }
  }

.works_container p {
  font-size: 16px;
  font-weight: bold;
  line-height: 160%; 
}

@media screen and (max-width:640px) {
  .works_container p {
    text-align: center;
    margin-bottom: 40px;
    }
  }

.works_container > h3 {
  margin-bottom: 40px;
  font-size: 20px;
  margin-left: 28px;
}

@media screen and (max-width:640px) {
  .works_container > h3 {
    font-size: 20px;
    margin-bottom: 10px;
    }
  }

.web, .design, .publication {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 40px;
  margin-bottom: 80px;
}

@media screen and (max-width:640px) {
  .web, .design, .publication {
    grid-template-columns: 1fr;
    padding: 10px ;
    gap: 20px;
    margin-bottom: 10px;
    justify-items: center;
    align-items: center; 
    /* これはまた新しい境地に到達しましたねｗｗｗ伸びしろですね♪ */
    /* 下の文章が長いと、画像が中央に寄らない仕様みたいです。brで文章に改行を入れてあげましょう♪ */
    }
  }

.button a {
  display: block;
  background-color: #f933cd;
  border-radius: 30px;
  color: #fff;
  width: 160px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.button > a:hover {
  color: #f933cd;
  /* border-bottom: 1px solid #f933cd; */
  background-color: #fff;
}

/* footer */
footer {
  background-color: #eee;
  margin-top: 60px;
}

/* divでくくると変になったからそのままシンプルに指定した */
footer > h2 {
  font-size: 36px;
  text-align: center;
  line-height: 1.6;
  padding-top: 30px;
}

@media screen and (max-width:640px) {
  footer > h2 {
    font-size: 24px;
    padding-top: 20px;
    }
  }

footer > p {
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}


footer > .footer_main {
  display: flex;
  justify-content: center;
  gap: 20px;
  height: 200px;
  align-items: center;
  /* margin-bottom: 20px; */
}

@media screen and (max-width:640px) {
  footer > .footer_main {
    gap: 10px;
    }
  }

footer .footer_sentences h3 {
  line-height: 1.6;
  margin-bottom: 10px;;
}

@media screen and (max-width:640px) {
  footer .footer_sentences h3 {
    font-size: 16px;
    }
  }

footer .footer_sentences p {
  line-height: 1.6;
  padding-right: 20px;
  padding-bottom: 20px;
}

@media screen and (max-width:640px) {
  footer .footer_sentences p {
    font-size: 14px;
    }
  }

.footer_main > img {
  width: 200px;
}

.footer_last {
  background-color: #FFDBF7;
  padding: 10px 40px;
  text-align: right;
  color: #444;
}

.footer_last .footer_link  {
  margin-bottom: 20px;
}

@media screen and (max-width:640px) {
  .footer_last .footer_link {
    font-size: 12px;
    }
  }

.footer_link a {
  border-bottom: 1px solid #444;
}

.footer_link a:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}


/* ---------------------------以下style.cssからの変更点----------------------------------- */
/* header部分 */
.main_image {
  /* position: relative; */
  background: url(images/Page_hero.png) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh; /* ちょっと大きすぎかもなので、100pxでも良 */
  margin-bottom: 10px;
}

@media screen and (max-width:640px) {
  .main_image {
    height: 300px;
    /* margin-top: 30px; */
    }
  }

/* main部分 */
.container {
  /* background-color: #eee;
  height: 400px; */
  margin: 0 auto;
}

.container > p {
  text-align: center;
  display: block;
  padding: 184px 99px;
  font-size: 36px;

}

/* 以下wpのコンテンツにCSSを反映させる設定 */
/* .wp_content の　子孫セレクターとして、指定してあげると、コンテンツが反映されるよ♪ */

/* .main {
  width: min(92%, 960px);
  margin: 0 auto;
} */

h1.wp_title {
  font-size: 48px;
  line-height: 1.6;
  border-bottom: 1px solid #999;
  margin-bottom: 60px;
}

@media screen and (max-width:640px) {
  h1.wp_title {
    font-size: 28px;
  }
  }

h2.wp-block-heading {
  padding: 10px 0px 10px 20px;
  border-left: 10px solid #F933CD;
  background: #FFDBF7;
  margin-bottom: 20px;
  line-height: 1.5;
}

.wp_content p {
  margin-left: 28px;
  margin-right: 28px;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

@media screen and (max-width:640px) {
  .wp_content p {
    margin-left: 0px;
    margin-right: 0px;
  }
  }

.wp_content h3 {
  margin-left: 28px;
  margin-bottom: 20px;
  font-size: 24px;
}

@media screen and (max-width:640px) {
  .wp_content h3 {
    margin-left: 0px;
  }
  }

.wp_content p > strong {
  font-size: 20px;
  margin-bottom: 20px;
}

.wp_content input {
  margin-top: 20px;
  height: 50px;
}


@media screen and (max-width: 640px) {
  .wp_content input{
    width: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ↑のwidthを指定すると、下のラジオボタンが変になるので記述しました */
.wp_content label input {
  width: auto;
}

.wp_content textarea {
  width: 600px;
  height: 200px;
  padding: 10px;
  margin-top: 20px;
}

@media screen and (max-width: 640px) {
  .wp_content textarea{
    width: 300px;
    margin-top: 40px;
  }
}


.wp_content label input {
  height: 10px;
}

.wp_content .c-button {
  width: 200px;
  background-color: #FFDBF7;
  border: 1px solid #FFDBF7;
  color: #444;
  cursor: pointer;
}
.wp_content .c-button:hover {
  width: 200px;
  background-color: #fff;
  border-bottom: 1px solid #f933cd;
  color: #f933cd;
}

.wp_content li {
  margin-left: 28px;
  margin-right: 28px;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.wp_content a {
  border-bottom: 1px solid #999;
}

.wp_content a:hover {
  color: #f933cd;
  border-bottom: 1px solid #f933cd;
}