@charset "utf-8";

/* -----------------------
front-page.php
-------------------------*/
.mainvisual {
  width: 100%;
  height: 40vh;
  padding: 2rem 3rem;
}
/* ------------------------
header.php
-------------------------*/
#front-page-header {
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  padding: 7px clamp(1rem, -0.615rem + 8.08vw, 6.25rem);
  background-color: #ffffffce;
  position: sticky;
  top: 0;
  z-index: 3;
  .menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0 2rem;
  }
}
#front-page-header a {
  transition: 0.2s ease;
}
#front-page-header a:hover {
  color: var(--accent-color);
}
/* ------------
main
------------- */
.blank {
  display: none;
}
#front-page {
  .prologue {
    display: flex;
  }
  .suggestion {
    position: relative;
    padding-top: 100px;
    margin-bottom: 1rem;
  }
  .span {
    font-size: 1.5rem;
    color: var(--sub-color-red);
  }
  .suggestion::before {
    content: "";
    width: 40px;
    height: 60px;
    background-color: var(--main-color);
    position: absolute;
    top: 10px;
    left: 110px;
  }
  .suggestion::after {
    content: "";
    border: 50px solid transparent;
    border-top: 35px solid var(--main-color);
    position: absolute;
    top: 60px;
    left: 80px;
  }
}
/* ----------
sample-site
------------- */
#sample-site {
  .heading2 {
    text-align: center;
    margin-bottom: 4rem;
  }
  .heading2::before,
  .heading2::after {
    content: "●";
    color: var(--accent-color);
    padding: 0 1rem;
  }
  & img {
    height: 250px;
    object-fit: cover;
    transition: 0.2s ease-in;
  }
  & img:hover {
    scale: 1.1;
  }
  .image {
    height: 250px;
    overflow: hidden;
  }
  .item30 {
    margin-bottom: 1rem;
  }
}
/* ------------
service
------------- */
.service {
  .section-title {
    text-align: left;
  }
  li {
    list-style-type: disc;
    margin-left: 1rem;
  }
  li::marker {
    color: var(--main-color);
  }
}
/* -----------
flow
----------- */
#flow.back-ground-color {
  background-color: var(--main-color);
}
.number {
  background-color: var(--sub-color-red);
  display: grid;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #fff;
  font-size: 1.4rem;
  margin: 0 auto;
}
.flow {
  .inner {
    background-color: #fff;
    padding: clamp(1rem, 0.385rem + 3.08vw, 3rem)
      clamp(1rem, 0.692rem + 1.54vw, 2rem);
  }
  & li {
    width: 16%;
    position: relative;
    & p:last-of-type {
      font-size: 0.9rem;
    }
  }
  .flex-box {
    align-items: flex-start;
  }
  .flow-title {
    text-align: center;
    font-size: clamp(1rem, 0.908rem + 0.46vw, 1.3rem);
    margin: 0.5rem 0;
  }
  li::after {
    content: "▶";
    position: absolute;
    top: 15px;
    right: -40px;
    scale: 2;
    color: lightgray;
  }
  & li:last-of-type::after {
    content: none;
  }
}
/* ----------
induction
------------*/
#induction {
  p {
    margin-bottom: 1rem;
  }
}
/* ----------
about
------------*/
#about {
  text-align: center;
  p {
    line-height: clamp(2rem, 1.692rem + 1.54vw, 3rem);
    padding: 0 1rem;
  }
  .inner {
    background-color: #fff;
    border-radius: 50px;
    padding: 3rem 0;
  }
}
/* ----------
faq
------------- */
.details {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
  transition: 0.3s ease-in;
}
.summary {
  list-style-type: none;
  cursor: pointer;
}
.details:hover {
  outline: 3px solid var(--accent-color);
}
.details[open] .summary {
  margin-bottom: 1rem;
}
.ans {
  font-size: 1.2rem;
  color: rgb(255, 123, 61);
}
.quest {
  font-size: 1.2rem;
  color: var(--main-color);
}
/* --------------------------
loop.php(contact)
--------------------------- */
#contact {
  p {
    margin-bottom: 1rem;
    text-align: center;
  }
  .border-red {
    border-bottom: 3px solid var(--sub-color-red);
  }
}
/* --------------------------
page-service.php
----------------------------*/
.description {
  text-align: center;
  margin: 0 1rem 3rem;
}
.tax {
  font-size: 0.9rem;
}
#page-service {
  .flex-box {
    align-items: flex-start;
  }
  .heading2 {
    width: fit-content;
    margin-bottom: 0;
    border-bottom: 5px solid var(--accent-color);
  }
  /* ----------
  section plan
  ------------*/
  .plan .item {
    width: 49%;
    padding: clamp(2rem, 1.692rem + 1.54vw, 3rem)
      clamp(1rem, 0.385rem + 3.08vw, 3rem);
    background-color: #fff;
    margin-bottom: 2rem;
    & summary {
      color: var(--main-color);
      cursor: pointer;
    }
    & dt {
      width: 70%;
    }
    & dd {
      width: 30%;
    }

    .heading3 {
      text-align: right;
    }
    .example {
      margin-bottom: 2rem;
      border: 3px dashed var(--main-color);
      padding: 1rem;
      list-style: disc;
      & li {
        margin-left: 1rem;
        font-size: 0.9rem;
      }
    }
    .button {
      margin: 2rem auto 2rem 0;
    }
  }
  .breakdown {
    display: flex;
    flex-wrap: wrap;
  }
  .plan {
    .details-inner,
    & dl {
      background-color: var(--base-color);
      padding: 0.5rem 1rem;
      font-weight: normal;
      font-size: 0.8rem;
    }
    & dt {
      border-bottom: 1px dashed var(--accent-color);
      width: 70%;
    }
    & dd {
      border-bottom: 1px dashed var(--accent-color);
      width: 30%;
      text-align: right;
    }
  }
  .sub-title {
    background-color: var(--accent-color);
    color: #fff;
    padding-left: 1rem;
    text-align: left;
    margin-bottom: 2rem;
    font-size: clamp(1.5rem, 1.346rem + 0.77vw, 2rem);
  }
}
/* ----------
section price-detail
----------- */
#price-detail {
  & h3 {
    color: var(--accent-color);
    font-size: clamp(1.3rem, 1.238rem + 0.31vw, 1.5rem);
  }
  .container {
    background-color: #fff;
    padding-bottom: 3rem;
  }
  .item {
    width: 48%;
  }
  & dt,
  & dd {
    width: 70%;
    border-bottom: dashed 1px var(--accent-color);
    line-height: 2.5;
  }
  & dd {
    width: 30%;
    text-align: right;
    border-bottom: dashed 1px var(--accent-color);
    line-height: 2.5;
  }
  & p:not(:first-child) {
    margin: 1rem 0;
    color: var(--accent-color);
  }
}
/* ---------------
section standard
------------------*/
#standard {
  .items {
    padding: 2rem clamp(1rem, 0.692rem + 1.54vw, 2rem);
    border: 8px dashed #f8edde;
  }
  & ul {
    margin-bottom: 1rem;
  }
  & p {
    color: var(--accent-color);
    margin-bottom: 1rem;
  }
  .item-title {
    margin-bottom: 1rem;
  }
  .item-title::before {
    content: "✓ ";
    color: var(--accent-color);
  }
  .item-title li {
    margin: 0.5rem 0.5rem 0;
  }
  .item-title li::before {
    content: "- ";
  }
}
/* -------------
section preparation
---------------*/
#preparation {
  & h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--sub-color-blue);
  }
  & h3 {
    margin-bottom: 1rem;
  }
  & p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .item {
    width: 48%;
    padding: 2rem clamp(1rem, 0.692rem + 1.54vw, 2rem);
    border: 8px dashed #f8edde;
    align-self: stretch;
  }
}
/* -------------
section attention
---------------*/
#attention {
  background-color: var(--main-color);
  padding: 0 clamp(0.2rem, -1.892rem + 10.46vw, 7rem)
    clamp(1rem, -0.231rem + 6.15vw, 5rem);

  > p {
    font-size: clamp(3rem, 2.077rem + 4.62vw, 6rem);
    color: var(--main-color);
    -webkit-text-stroke: 1px #fff;
  }
  .container {
    background-color: #fff;
    padding: clamp(2rem, 1.692rem + 1.54vw, 3rem)
      clamp(1rem, 0.385rem + 3.08vw, 3rem);
    & p {
      margin-bottom: 2rem;
    }
    & h3 {
      color: var(--sub-color-blue);
      font-size: clamp(1.4rem, 1.338rem + 0.31vw, 1.6rem);
      margin-bottom: 1rem;
      width: fit-content;
    }
    & h4 {
      width: fit-content;
      border-bottom: 4px solid var(--accent-color);
      margin-bottom: 1rem;
    }
  }
  .bigger {
    color: var(--sub-color-red);
    font-size: clamp(1.2rem, 0.954rem + 1.23vw, 2rem);
  }
}
/* ------------------------------
page-sample.php
--------------------------------*/
#page-sample {
  .flex-box {
    justify-content: flex-start;
    gap: clamp(1rem, 0.385rem + 3.08vw, 3rem);
  }
  .tag {
    border: 2px solid var(--main-color);
    color: var(--main-color);
    width: fit-content;
    font-size: 0.8rem;
    padding: 0 0.3rem;
  }
  .container .item {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 2rem;
  }
  .sample-image {
    overflow: hidden;
    width: 100%;
    height: 300px;
    & img {
      object-fit: cover;
      transition: 0.2s ease-in;
      height: auto;
    }
  }
  .sample-image:hover img {
    scale: 1.1;
  }
  .container div:last-child {
    background-color: var(--base-color);
  }
}
/* ----------------------------------
page-flow.php
------------------------------------*/
#page-flow {
  .heading {
    display: flex;
    gap: 1rem;
    margin-bottom: clamp(0.2rem, -0.354rem + 2.77vw, 2rem);
  }
  .number {
    margin: 0;
  }
  & section {
    background-color: #fff;
    padding: clamp(1rem, 0.385rem + 3.08vw, 3rem);
    border-bottom: 10px dashed var(--base-color);
  }
  & section:last-child {
    border: none;
  }
  .text {
    padding: 0 clamp(1rem, 0.692rem + 1.54vw, 2rem);
  }
  .case {
    color: orangered;
  }
  .link {
    color: var(--accent-color);
  }
  .order-list,
  .lists {
    padding: clamp(1rem, 0.692rem + 1.54vw, 2rem);
    border: 4px dashed var(--accent-color);
    margin: clamp(1rem, 0.692rem + 1.54vw, 2rem);
    & li {
      margin-bottom: 1rem;
    }
  }
}
#diagram {
  .image {
    padding: 0 clamp(1rem, -2.385rem + 16.92vw, 12rem);
  }
}

/* ----------------------------------
page-contact.php
------------------------------------*/
#page-contact {
  border-radius: 50px;
  .container {
    background-color: #fff;
    padding: clamp(1rem, 5vw, 4rem) 1rem;
  }
  .item {
    margin-bottom: 2rem;
  }
  .wpcf7 form {
    padding: 0 clamp(0.1rem, -6.023rem + 30.62vw, 20rem);
  }
  .wpcf7 input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #333;
    font-size: 1rem;
  }
  .wpcf7 input[type="radio"] {
    margin-bottom: clamp(0.5rem, 1vw, 2rem);
    /* アクセシビリティのためにいるやつ */
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2em;
    outline: 1px solid transparent;
  }
  .wpcf7 input[type="radio"]:focus {
    outline: 2px solid #333;
  }
  .wpcf7 input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2em;
  }
  .wpcf7 textarea {
    width: 100%;
    height: 8rem;
    padding: 1rem;
    border: 1px solid #333;
    margin-bottom: 3rem;
    font-size: 1rem;
  }

  .wpcf7 input[type="submit"] {
    color: #fff;
    background-color: var(--sub-color-blue);
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 1px 3px 3px dimgray;
    transition: 0.3s;
  }
  .wpcf7 input[type="submit"]:focus,
  .wpcf7 input[type="submit"]:hover {
    background-color: #fff;
    color: var(--sub-color-blue);
    border: 1px solid var(--sub-color-blue);
  }
  .label {
    margin-bottom: 0.5rem;
  }

  .required,
  .any {
    background-color: orangered;
    font-size: 0.9rem;
    color: #fff;
    padding: 0 0.5rem;
    margin-left: 1rem;
  }
  .any {
    background-color: #6e6c6c;
  }
  .privacy {
    color: blue;
  }
  .button {
    background-color: transparent;
    width: 100%;
  }
  .consent {
    font-weight: normal;
    font-size: 0.9rem;
    color: orangered;
  }
}
/* ---------------------------------
home.php
----------------------------------*/
#home {
  .container {
    border-bottom: 3px dashed var(--accent-color);
    padding: clamp(1rem, 0.692rem + 1.54vw, 2rem);
  }
  .read-more {
    text-align: right;
    & a {
      color: var(--sub-color-blue);
      transition: 0.3s ease;
    }
  }
  .read-more a:hover {
    margin-right: 1rem;
  }
}
/* ---------------------------------
page.php
----------------------------------- */
#page {
  & h2 {
    margin: 2rem 0 1rem 0;
    border-bottom: 2px solid var(--accent-color);
  }
  & p {
    margin-bottom: 1rem;
  }
}
/* -----------------------------------
404.php
------------------------------------- */
#not-found {
  & h1 {
    font-size: clamp(1.2rem, 0.954rem + 1.23vw, 2rem);
    margin-bottom: 1rem;
  }
  .anime {
    font-size: clamp(1.5rem, -0.192rem + 8.46vw, 7rem);
    color: var(--main-color);
    opacity: 0.3;
    display: flex;
    width: 100%;
    overflow: hidden;
  }
  .anime .item {
    animation: loop-animation 7s linear infinite;
    white-space: nowrap;
  }
  & span {
    color: var(--accent-color);
    opacity: 0.4;
  }
}
@keyframes loop-animation {
  100% {
    transform: translateX(-100%);
  }
  0% {
    transform: translateX(0);
  }
}
/* --------------------------------------
single.php
--------------------------------------- */
#single-sample {
  .single-title {
    margin-bottom: 3rem;
  }
  .single-title::before {
    content: "■ ";
    color: var(--accent-color);
  }
  .image {
    margin-bottom: 2rem;
    & img {
      border: 1px solid lightgray;
      box-shadow: 8px 5px 10px dimgray;
    }
  }
  & a {
    color: var(--main-color);
  }
  .button a {
    color: #fff;
  }
  .button a:hover {
    color: var(--sub-color-blue);
  }
  & p {
    margin-bottom: 1rem;
  }
  .container {
    margin: 3rem 0;
  }
  .is-layout-flex {
    justify-content: space-between;
  }
  & ul {
    list-style: auto inside;
  }
  & h2 {
    border-bottom: 7px solid var(--accent-color);
    margin-bottom: 1rem;
  }
  & td {
    border: none;
    border-bottom: 4px dashed lightgray;
  }
  & td:last-child {
    text-align: right;
    padding-right: 2rem;
  }
  & td:last-child::after {
    content: " 円";
  }
}
#single {
  .single-title {
    /* font-size: clamp(1.25rem, 1.019rem + 1.15vw, 2rem); */
    font-size: 2rem;
    position: relative;
  }
  .single-title::after {
    content: "COLUMN";
    font-size: clamp(5rem, 2.846rem + 10.77vw, 12rem);

    position: absolute;
    color: #2a8bb51f;
    top: -10rem;
    right: 0;
  }
  .content {
    padding: clamp(0rem, -1.538rem + 7.69vw, 5rem)
      clamp(0rem, -0.615rem + 3.08vw, 2rem);
  }
  & h2 {
    border-bottom: 2px solid var(--accent-color);
    border-left: 8px solid var(--accent-color);
    padding-left: clamp(0.313rem, 0.063rem + 1.25vw, 1.125rem);
    margin: clamp(2rem, 1.385rem + 3.08vw, 4rem) 0;
    /* font-size: clamp(1.25rem, 1.173rem + 0.38vw, 1.5rem); */
    font-size: clamp(1rem, 0.692rem + 1.54vw, 2rem);
  }
  & p {
    margin-bottom: clamp(1rem, 0.692rem + 1.54vw, 2rem);
    font-weight: normal;
  }
  & ul {
    list-style: inside;
    line-height: 2rem;
    margin-bottom: 2rem;
    font-weight: normal;
  }
}