@charset "UTF-8";
html {
  font-size: 10px;
}

body {
  background-color: rgb(255, 255, 255);
  color: #a05a2b;
}

h2 {
  font-family: cursive;
  font-size: 3rem;
  margin-top: 5vh;
  margin-bottom: 5%;
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 4rem;
  }
}
/* ヘッダー */
header {
  width: 100%;
  height: 20vw;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(176, 214, 191, 0.7);
  /* ハンバーガーメニューアイコン */
  /*activeクラスが付与されると線が回転して×に*/
  /* ハンバーガーオープンメニュー */
}
header div.header_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
header div.header_logo div.header_logo_containerInner {
  height: 100%;
  justify-content: center;
}
header div.header_logo div.header_logo_containerInner div.header_logo_imgBox {
  height: 100%;
  justify-content: end;
  align-items: center;
}
header div.header_logo div.header_logo_containerInner div.header_logo_imgBox img.header_logo_img {
  height: 70%;
  width: 70%;
}
header div.header_logo div.header_logo_containerInner h1.header_logo_title {
  font-size: 4.5vw;
  font-weight: bold;
  font-family: cursive;
  align-items: center;
  justify-content: center;
}
header div.header_logo div.header_logo_containerInner div.header_logo_imgBox:nth-of-type(2) {
  justify-content: start;
}
header div.header_logo div.header_logo_containerInner div.header_logo_imgBox:nth-of-type(2) img.header_logo_img {
  left: 0;
}
header div.nav_btn {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 999;
  cursor: pointer;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background-color: rgba(222, 106, 141, 0.5019607843);
}
header div.nav_btn span {
  /* 細い線を３つ作る */
  content: "";
  display: inline-block;
  /*アニメーションの設定*/
  transition: all 0.4s;
  position: absolute;
  height: 5%;
  border-radius: 1rem;
  background-color: #ffffff;
  width: 40%;
  left: 30%;
}
header div.nav_btn span:nth-of-type(1) {
  /* 上の線の位置 */
  top: 32%;
}
header div.nav_btn span:nth-of-type(2) {
  /* 真ん中の線の位置 */
  top: 50%;
}
header div.nav_btn span:nth-of-type(3) {
  /* 下の線の位置 */
  top: 68%;
}
header div.nav_btn.active span:nth-of-type(1) {
  /* 上下中央で線の中心軸が交わればいいので、 
  位置を上下中央に持ってくる*/
  top: 50%;
  left: 20%;
  /* 線の中央を中心軸として、両端が回転する */
  transform: rotate(45deg);
  width: 60%;
}
header div.nav_btn.active span:nth-of-type(2) {
  opacity: 0; /*真ん中の線は透過*/
}
header div.nav_btn.active span:nth-of-type(3) {
  top: 50%;
  left: 20%;
  /* rotateはプラスが時計回り */
  transform: rotate(-45deg);
  width: 60%;
}
header nav#open_menu {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 900;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  /*背景色（斜めのグラデーション）*/
  background: linear-gradient(45deg, rgba(131, 219, 157, 0.9), rgba(229, 93, 135, 0.9));
  /*動き*/
  transition: all 0.6s;
  text-align: center;
}
header nav#open_menu div.open_menu_list {
  position: absolute;
  /* 要素の左上が親要素の真ん中に */
  top: 50%;
  left: 50%;
  /* 要素の半分だけ戻して要素の中央を親要素の中央に */
  transform: translate(-50%, -50%);
}
header nav#open_menu ul {
  padding: 0;
}
header nav#open_menu li {
  font-size: 2.5rem;
  padding-bottom: 3rem;
}
header nav#open_menu a {
  text-decoration: none;
  color: #fff;
}
header nav#open_menu.panel_active {
  /*アクティブクラスがついたら位置を0に*/
  right: 0;
}

/* レスポンシブ*/
@media screen and (min-width: 576px) {
  header {
    height: 15vw;
  }
  header div.header_logo div.header_logo_containerInner {
    justify-content: center;
  }
  header div.header_logo div.header_logo_containerInner h1.header_logo_title {
    font-size: 4.5vw;
  }
}
@media screen and (min-width: 768px) {
  header div.header_logo h1 {
    font-size: 4vw;
  }
  header nav#open_menu {
    width: 30%;
  }
}
@media screen and (min-width: 992px) {
  header div.header_logo h1 {
    font-size: 5vw;
  }
}
@media screen and (min-width: 1200px) {
  header div.header_logo h1 {
    font-size: 3rem;
  }
}
/* メイン */
main {
  margin: 5% auto;
  text-align: center;
}
main div.main_wrap {
  margin: auto;
}
main div.main_wrap section {
  margin-top: 5%;
  margin-bottom: 5%;
}
main div.main_wrap section.fadein {
  opacity: 0;
  transform: translateY(100px);
  transition: all 2s;
}
main div.main_wrap div.fadein {
  opacity: 0;
  transform: translateY(100px);
  transition: all 2s;
}
main div.main_wrap section.fadein.scrollin {
  opacity: 1;
  transform: translate(0);
}
main div.main_wrap div.fadein.scrollin {
  opacity: 1;
  transform: translate(0);
}
main div.main_wrap section.main_view {
  margin: 0 auto;
  /* 子要素の配置をセンタリングする
      imgはインライン要素のため、marginは効かない */
  text-align: center;
}
main div.main_wrap section.main_view img {
  width: 100%;
  height: auto;
}
main div.main_wrap section#profile div.profileArea {
  justify-content: space-around;
  align-items: center;
}
main div.main_wrap section#profile div.profileArea div.profileArea_textBox p.profileArea_textBox_text {
  text-align: start;
  color: #ca4e88;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  line-height: 2;
}
main div.main_wrap section#profile div.profileArea div.profileArea_textBox p.profileArea_textBox_text span {
  font-style: italic;
}
main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox {
  justify-content: center;
}
main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox img.profileArea_PhotoBox_img {
  width: 50%;
  min-width: 130px;
  border-radius: 20%;
}
main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox p.profileArea_PhotoBox_name {
  font-size: 1.6rem;
  margin-top: 1%;
}
main div.main_wrap section#skills.fluidBox {
  /* 画面幅100%の大きさにする */
  width: 100vw;
  position: relative;
  /* 親要素の左端から50%右へ */
  left: 50%;
  /* ↑の位置からこの要素幅の50%左へ */
  transform: translateX(-50%);
  background-color: rgba(176, 214, 191, 0.3215686275);
  padding: 5vh 0;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap {
  margin: auto;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner {
  margin: auto;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card {
  background-color: #fff;
  padding: 0;
  border-radius: 20% 0 20% 0;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_imgBox {
  align-items: center;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_imgBox div.skillsArea_card_imgBox_inner img.skillsArea_card_imgBox_img {
  width: 70%;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_imgBox div.skillsArea_card_imgBox_inner img.skillsArea_card_imgBox_img:not(.no-p) {
  padding: 5%;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_imgBox div.skillsArea_card_imgBox_inner p.skillsArea_card_imgBox_text {
  margin: 0;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_textBoxWrap div.skillsArea_card_textBox h5.skillsArea_card_textBox_title {
  font-size: 2rem;
  margin-bottom: 20px;
}
main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_textBoxWrap div.skillsArea_card_textBox p.skillsArea_card_textBox_text {
  text-align: start;
  font-size: 1.2rem;
}
main div.main_wrap section#works a {
  text-decoration: none;
  color: #ca4e88;
}
main div.main_wrap section#works div.works_textArea {
  margin: auto;
  margin-bottom: 5vh;
  text-align: start;
}
main div.main_wrap section#works div.works_textArea p.works_text {
  font-size: 1.2rem;
}
main div.main_wrap section#works div.works_textArea p.works_text span {
  text-decoration-color: #ca4e88;
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
main div.main_wrap section#works ul.works_slider {
  padding: 0;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content {
  background-color: #fff4f9;
  padding: 2vh;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox {
  height: 40vh;
  margin: 10px auto;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox img.slick_img.pc_img {
  width: 70%;
  height: auto;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox img.slick_img.mobile_img {
  width: 30%;
  height: 35%;
  padding: 0 1vh;
  /* 親要素にdisplay:flex と flex-direction: column をつけ、
  縦並びの要素に下記を付けると、topが最大限に空く。つまり、
  一番下の要素にこれを付ければ、その要素だけ親要素の最下部に配置される。 */
  margin-top: auto;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox {
  margin: auto;
  padding: 0 5%;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox h3.slider_content_title {
  font-size: 2.5rem;
  color: #ca4e88;
  margin-top: 3vh;
  margin-bottom: 5vh;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox p.slider_content_text:not(:last-of-type) {
  font-size: 1.2rem;
  text-align: start;
}
main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox p.slider_content_text:last-of-type {
  font-size: 1.5rem;
}
main div.main_wrap section#contact p.contact_text {
  font-size: 1.2rem;
}
main div.main_wrap section#contact p.contact_text a {
  text-align: none;
  color: #ca4e88;
}

@media screen and (min-width: 576px) {
  main {
    width: 90%;
  }
  main div.main_wrap section.main_view img {
    min-width: 70px;
    text-align: center;
  }
  main div.main_wrap section#profile div.profileArea div.profileArea_textBox p.profileArea_textBox_text {
    font-size: 1.4rem;
  }
  main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox p.profileArea_PhotoBox_name {
    font-size: 1.6rem;
  }
  main div.main_wrap section#works div.works_textArea {
    margin: auto;
    margin-bottom: 5vh;
    text-align: start;
  }
  main div.main_wrap section#works div.works_textArea p.works_text {
    font-size: 1.6rem;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox {
    margin: auto;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox img.slick_img.pc_img {
    width: 70%;
    height: auto;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_imgBox img.slick_img.mobile_img {
    width: 30%;
    height: 35%;
    padding: 0 1vh;
    /* 親要素にdisplay:flex と flex-direction: column をつけ、
    縦並びの要素に下記を付けると、topが最大限に空く。つまり、
    一番下の要素にこれを付ければ、その要素だけ親要素の最下部に配置される。 */
    margin-top: auto;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox h3.slider_content_title {
    margin-top: 3vh;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox div.slider_content_textWrap p.slider_content_text {
    font-size: 1.4rem;
  }
  main div.main_wrap section#contact p.contact_text {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  main div.main_wrap section#profile div.profileArea div.profileArea_textBox p.profileArea_textBox_text {
    font-size: 1.6rem;
  }
  main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox img.profileArea_PhotoBox_img {
    width: 90%;
  }
  main div.main_wrap section#profile div.profileArea div.profileArea_PhotoBox p.profileAr p.profileArea_PhotoBox_name {
    font-size: 2rem;
  }
  main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_textBoxWrap div.skillsArea_card_textBox p.skillsArea_card_textBox_text {
    font-size: 1.5rem;
  }
  main div.main_wrap section#works div.works_textArea {
    margin: auto;
    margin-bottom: 5vh;
    text-align: start;
  }
  main div.main_wrap section#works div.works_textArea p.works_text {
    font-size: 1.8rem;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox div.slider_content_textWrap p.slider_content_text {
    font-size: 1.4rem;
  }
  main div.main_wrap section#contact p.contact_text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 992px) {
  main div.main_wrap section#profile div.profileArea div.profileArea_textBox p.profileArea_textBox_text {
    font-size: 1.8rem;
  }
  main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_textBoxWrap div.skillsArea_card_textBox p.skillsArea_card_textBox_text {
    font-size: 1.4rem;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox div.slider_content_textWrap p.slider_content_text {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1200px) {
  main div.main_wrap section#skills.fluidBox div.skillsAreaWrap div.skillsAreaInner div.skillsArea div.skillsArea_card div.skillsArea_card_textBoxWrap div.skillsArea_card_textBox p.skillsArea_card_textBox_text {
    font-size: 1.8rem;
  }
  main div.main_wrap section#works ul.works_slider li.works_slider_list div.slide-img div.slider_content div.slider_content_textBox div.slider_content_textWrap p.slider_content_text {
    font-size: 1.8rem;
  }
}
footer {
  background-color: #b0d6bf;
  height: 50px;
  text-align: center;
  /* ブロック要素の上下中央揃えは、親要素にflex、justify-contentを使う */
  display: flex;
  justify-content: center;
  align-items: center;
}
footer div.footerWrap small.copyright {
  font-size: 1.5rem;
  align-items: center;
}

main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5vh;
  margin: auto;
  background-color: #fff4f9;
  border-radius: 50%;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap {
  margin: auto;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap span {
  font-size: 80%;
  color: #B70000;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap button {
  border-radius: 20%;
  background-color: rgba(176, 214, 191, 0.3215686275);
  margin-top: 5vh;
  padding: 1vh;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap div.btnBox {
  justify-content: space-around;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap p {
  padding-bottom: 2vh;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap p input.contact_form {
  background-color: rgba(176, 214, 191, 0.3215686275);
  text-align: start;
  padding: 5px;
  width: 30vw;
  max-width: 100%;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap p textarea.contact_form {
  background-color: rgba(176, 214, 191, 0.3215686275);
  text-align: start;
  padding: 5px;
  width: 40vw;
  max-width: 100%;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap p.contact_form.formText {
  font-size: 1.4rem;
  padding: 0;
}
main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5.mw_wp_form_complete {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 576px) {
  main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 {
    font-size: 1.6rem;
  }
  main div.main_wrap section.container_inner div#mw_wp_form_mw-wp-form-5 form div.formWrap p.contact_form.formText {
    font-size: 2rem;
  }
}/*# sourceMappingURL=style.css.map */