@charset "utf-8";
/*
theme Name:es-preadポートフォリオ用テーマ
version:1.1.0
Author:es-pread 大塚健海
Description:当サイト専用に作成されたオリジナルテーマです。
*/

/*
レスポンシブ設定
PC 768px〜
*/

/* ==============================
    フォント読み込み
============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');

/* ==============================
    PC版
============================== */

/* --------------------
    全体
-------------------- */
html {
  font-size: 10px;
}

body {
  font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-weight: 300;
  position: relative;
  font-size: 1.6rem;
  color: #333;
  background: #fff;
}

body.fixed {
  position: fixed;
  width: 100%;
}

body::after {
  pointer-events: none;
  display: block;
  content: "";
  position: absolute;
  z-index: 9999999;
  opacity: 0.6;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./images/texture_paper.png");
  background-size: 16.0rem auto;
}

#wrapper {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

input[type="text"],
input[type="password"],
textarea {
  resize: none;
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 0.5em 0 0;
  padding: 0.6em 0.8em;
  border: solid 1px #dedede;
  border-radius: 0.2em;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

/*===== サイズ系 =====*/
.w-980 {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 50px;
}

.w-900 {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 50px;
}

.w-1000 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 50px;
}

/*===== フォント系 =====*/
.font-Montserrat {
  font-family: 'Montserrat', sans-serif;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.color-gray {
  color: #7F7F7F;
}

/*===== テーマカラー系 =====*/
.color__thema-color {
  color: #FBB03B;
}

.border_thema-color {
  border-color: #FBB03B;
}

.bg_thema-color,
.after-bg_thema-color::after {
  background: #FBB03B;
}

/*===== 表示系 =====*/
.visible-none {
  display: none !important;
}

@media screen and (min-width:801px) {
  .visible-sp {
    display: none !important;
  }
}

/* --------------------
    ヘッダー
-------------------- */
#header_wrapper {
  position: fixed;
  z-index: 30000;
  top: 0;
  font-size: 16px;
  width: 100%;
  background: #fff;
}

.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

/*===== 左部 =====*/
header .logo {
  display: block;
  height: 38px;
  margin: 11px 0 11px 50px;
}

header .logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/*===== 右部 =====*/
.header_right {
  display: flex;
}

/*----- グローバルナビ -----*/
#header_wrapper #gNav ul.header-nav {
  display: flex;
  justify-content: center;
  height: 40px;
  margin: 0 auto;
}

#header_wrapper #gNav ul.header-nav>li {
  display: flex;
  align-items: center;
}

#header_wrapper #gNav ul.header-nav>li:not(:first-child) {
  margin-left: 32px;
}

#header_wrapper #gNav ul.header-nav>li.menu-item-has-children {
  position: relative;
}

#header_wrapper #gNav ul.header-nav>li a {
  position: relative;
  display: block;
  padding: 0.5em 0;
}

#header_wrapper #gNav ul.header-nav>li a::after {
  transition: 0.3s ease-in-out;
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: currentColor;
}

#header_wrapper #gNav ul.header-nav>li a:hover:after {
  left: calc(50% - 0.75em);
  right: calc(50% - 0.75em);
}

/*----- SNS -----*/
.header-sns {
  display: flex;
  align-items: center;
  margin: 0 32px;
}

.header-sns li {
  width: 32px;
}

.header-sns li:not(:first-child) {
  margin-left: 16px;
}

.header-sns li a {
  display: block;
}

/*----- ハンバーガーボタン -----*/
header .toggle-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 16px;
  margin-right: -8px;
  padding: 0 2px
}

header .toggle-btn span {
  transition: 0.3s ease-out;
  display: block;
  width: 100%;
  height: 1px;
  margin: 3px 0;
  background: currentColor;
}

/* --------------------
    TOPへ戻るボタン
-------------------- */
.totop {
  opacity: 0.4;
  transform: translateY(0);
  transition: 0.3s ease;
  display: block;
  width: 1.75em;
  padding: 0 0 2.0em;
  margin: 0 auto;
}

.totop:hover {
  transform: translateY(-20%);
}

/* --------------------
    フッター
-------------------- */
body:not(.home) footer {
  background: #F5F5F7;
}

footer h2 {
  font-size: 40px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 1.4em;
}

footer h2::after {
  display: block;
  content: "";
  width: 1em;
  height: 0.1em;
  margin: 0.51em auto 0;
  background: currentColor;
}

/*===== お問い合わせ =====*/
#contact {
  padding: 56px 0 72px;
}

#contact textarea {
  height: calc((1.8em * 6) + 1.0em);
}

#contact .contact-lead {
  font-size: 1.8rem;
  line-height: 1.75;
  text-align: center;
  margin-bottom: 2.2em;
}

#contact .contact_inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

#contact .contact_inner>* {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#contact .form_note {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 0.8em;
  color: red;
  text-indent: -1em;
  margin-left: 1em;
}

#contact .form_optional {
  font-size: 0.85em;
  font-weight: normal;
  opacity: 0.7;
}

#contact .g-recaptcha {
  display: flex;
  justify-content: center;
  margin-bottom: 3.2rem;
}

#contact label.btn-01 {
  margin: 0 auto;
}

#contact:not(.send_ok) label.btn-01 {
  pointer-events: none;
  opacity: 0.3;
  background: #999;
  border-color: #999;
}

#contact .contact-error {
  line-height: 1.4;
  text-align: center;
  color: red;
  margin-bottom: 1.5em;
}

#contact .contact-step[hidden] {
  display: none !important;
}

#contact .contact-confirm-list {
  max-width: 720px;
  margin: 0 auto 2.4em;
  text-align: left;
}

#contact .contact-confirm-row {
  display: flex;
  gap: 1.6rem;
  padding: 1.2em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#contact .contact-confirm-row dt {
  flex: 0 0 10em;
  font-weight: 600;
}

#contact .contact-confirm-row dd {
  flex: 1;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
}

#contact .contact-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

#contact .btn-01--ghost {
  color: #0066CC;
  background: #fff;
}

#contact .btn-01--ghost:hover {
  color: #fff;
  background: #0066CC;
}

#contact .contact-btn-send.is-loading,
#contact .contact-btn-send:disabled {
  pointer-events: none;
  opacity: 0.55;
}

#contact .contact-progress {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0.4em auto 1.4em;
}

#contact .contact-progress-ring {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

#contact .contact-progress-ring__track {
  stroke: rgba(0, 102, 204, 0.15);
  stroke-width: 8;
}

#contact .contact-progress-ring__bar {
  stroke: #0066CC;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke 0.2s ease;
}

#contact .contact-progress-value,
#contact .contact-progress-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#contact .contact-progress-value {
  font-size: 2rem;
  font-weight: 700;
  color: #0066CC;
}

#contact .contact-progress-check {
  color: #0066CC;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#contact .contact-progress[data-state="done"] .contact-progress-value {
  opacity: 0;
}

#contact .contact-progress[data-state="done"] .contact-progress-check {
  opacity: 1;
  transform: scale(1);
}

#contact .contact-progress[data-state="done"] .contact-progress-ring__bar {
  stroke: #1a9d5c;
}

#contact .contact-progress[data-state="done"] .contact-progress-check {
  color: #1a9d5c;
}

#contact .contact-progress-status {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1.6em;
}

#contact .contact-complete-body {
  max-width: 720px;
  margin: 0 auto;
}

#contact .contact-complete-title {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1em;
}

#contact .contact-complete-text {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  #contact .contact-confirm-row {
    display: block;
  }

  #contact .contact-confirm-row dt {
    margin-bottom: 0.4em;
  }
}

/*===== コピーライト・ナビゲーション =====*/
footer .copyright {
  font-size: 1.4rem;
  color: #fff;
  padding: 1.65rem 0;
  background: #444;
}

footer .copyright ._inner {
  display: flex;
  justify-content: space-between;
}

footer .copyright .footer-nav {
  display: flex;
  align-items: center;
}

footer .copyright .footer-nav li:not(:first-child) {
  margin-left: 3.0em;
}

/* --------------------
    ページコンテンツ
-------------------- */
#page_wrapper {
  padding-top: 60px;
}

/* --------------------
    共通パーツ
-------------------- */
/*===== ボタン =====*/
.btn-01 {
  transition: 0.3s ease;
  cursor: pointer;
  display: table;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  padding: 0.5em 4.125em;
  background: #0066CC;
  border: solid 2px #0066CC;
  border-radius: 100em;
}

.btn-01 input {
  display: none;
}

.btn-01:hover {
  color: #0066CC;
  background: #fff;
}

/*===== 実績ないテキスト =====*/
p.no-posts {
  text-align: center;
  color: #999;
  margin: 1em 0;
}

/* ==============================
    スマホ版
============================== */

@media screen and (max-width:800px) {
  body {
    font-size: 1.4rem;
  }

  .visible-pc {
    display: none !important;
  }

  /*===== サイズ系 =====*/
  .w-980 {
    padding: 0 20px;
  }

  .w-900 {
    padding: 0 20px;
  }

  .w-1000 {
    padding: 0 20px;
  }

  /* --------------------
    ヘッダー
  -------------------- */
  .header_inner {
    padding: 0 20px;
  }

  /*===== 左部 =====*/
  header .logo {
    height: 48px;
    margin: 0;
    padding: 10px 0;
  }

  /*----- グローバルナビ -----*/
  #header_wrapper #gNav {
    transition: 0.5s ease-out;
    opacity: 0;
    overflow-y: auto;
    position: fixed;
    z-index: 20000;
    top: 48px;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
  }

  #header_wrapper #gNav ul.header-nav {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 0.5em 40px 10em;
  }

  #header_wrapper #gNav ul.header-nav>li {
    display: block;
    margin: 0;

  }

  #header_wrapper #gNav ul.header-nav>li:not(:first-child) {
    margin-left: 0;
  }

  #header_wrapper #gNav ul.header-nav>li a {
    transition: 0.5s ease-out;
    display: block;
    padding: 0.25em 0;
  }

  /* 展開時 */
  body.menuIn #header_wrapper #gNav {
    opacity: 1.0;
    bottom: 0;
  }

  body.menuIn #header_wrapper #gNav ul.header-nav>li a {
    padding: 1.75em 0;
  }

  body.menuIn header .toggle-btn span {
    margin: -0.5px 0;
  }

  body.menuIn_02 header .toggle-btn span:first-child {
    transform: rotate(45deg);
  }

  body.menuIn_02 header .toggle-btn span:last-child {
    transform: rotate(-45deg);
  }

  /*----- SNS -----*/
  .header-sns {
    margin-right: 0;
  }

  .header-sns li {
    width: 24px;
  }

  .header-sns li:not(:first-child) {
    margin-left: 8px;
  }

  /* --------------------
    フッター
  -------------------- */
  footer h2 {
    font-size: 2.8rem;
  }

  /*===== お問い合わせ =====*/
  #contact {
    padding: 48px 0 56px;
  }

  #contact .contact-lead {
    font-size: 1.4rem;
    margin-bottom: 3.5em;
  }

  #contact .contact_inner {
    flex-direction: column;
  }

  #contact .contact_inner>* {
    gap: 32px;
    flex: auto;
  }

  /*===== コピーライト・ナビゲーション =====*/
  footer .copyright {
    font-size: 1.2rem;
  }

  footer .copyright ._inner {
    flex-direction: column-reverse;
    align-items: center;
  }

  footer .copyright .footer-nav {
    margin-bottom: 1.2em;
  }

  /* --------------------
    ページコンテンツ
  -------------------- */
  #page_wrapper {
    padding-top: 48px;
  }

  /* --------------------
    共通パーツ
  -------------------- */
  /*===== パンくずリスト =====*/
  .breadcrumb {
    background: #F0F0F0;
  }

  .breadcrumb .breadcrumb-list {
    padding: calc((40px - 21px) / 2) 18px;
  }

}

/*1で解説*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-40%);
  }

  100% {
    transform: translateY(0);
  }
}

.prllx {
  transition: 1.25s ease-in-out;
  pointer-events: none;
  transform: translateY(3.0rem);
  opacity: 0;
}

.prllx_on {
  pointer-events: unset;
  transform: translateY(0);
  opacity: 1.0;
}