/* ========== COMMON ========== */
/* ========== ABOUT ========== */
.child {
  background-color: var(--color05);
}
.child .area {
    align-items: center;
}
.child .area .box01 {
    width: 48%;
    display: flex;
    justify-content: center;
}
.child .area .box01 .txt-box {}
.child .area .box01 .txt-box .ttl{}
.child .area .box01 .txt-box .lead {
    margin-top: -22px;
}
.child .area .box02 {
    width: 48%;
}
.child .area .box02 .img-box{}
.child .area .box02 .img-box img{}
.child .catch {
    display: flex;
    justify-content: center;
    padding: 85px 0;
}
.child .catch .ttl {
    text-align: center;
    line-height: 2;
}
.child .catch .ttl span{
  color: var(--color03);
}
.child .catch .ttl ruby {}
.child .catch .ttl ruby rt {
    font-weight: 700;
}
.child-top {}
.child-top .area {
    justify-content: center;
    height: 585px;
    justify-content: space-between;
}
.child-top .area .box01 {
    justify-content: left;
    width: 30%;
}
.child-top .area .box01 .txt-box{}
.child-top .area .box01 .txt-box .ttl{}
.child-top .area .box01 .txt-box .lead{}
.child-top .area .box02{
        width: 65%;
}
.child-top .area .box02 .img-box{}
.child-top .area .box02 .img-box img{}
/* history */
.about-top {}
.about-top .area {}
.about-top .area .box01 {
}
.about-top .area .box01 .txt-box{}
.about-top .area .box01 .txt-box .ttl{}
.about-top .area .box01 .txt-box .lead{}
.about-top .area .box02 {

}
.about-top .area .box02 .img-box{}
.about-top .area .box02 .img-box img{}
.history {
    border-top: 1px solid #000;
}
.history .area {}
.history table {
    border-collapse: separate;
    border-spacing: 0 0px;
    margin: 0 auto;
}
.history td {
  vertical-align: top;
  white-space: nowrap;
}
.history th {
    vertical-align: middle;
    padding: 4px 30px 30px 8px;
    white-space: nowrap;
}
.history td.col-line {
  width: 20px;
  text-align: center;
  color: #000;
  padding: 4px 8px;
}
.history td.col-value {
    word-break: break-word;
  padding: 4px 8px 4px 30px;

}
/* access */
.access {
    border-top: 1px solid #000;
    padding-top: clamp(4.688rem, 2.679rem + 6.7vw, 9.375rem);
}

.access .area .box {}
.access .area .box01 {
    justify-content: flex-start;
    width: 40%;
}
.access .area .box01 .ttl {}
.access .area .box02 {
    width: 60%;
}
.access .area .box02 .mao_area {}

/* ========== WORKS ========== */
.works-top {}
.works_detail {}
.works-top .catch {
    flex-direction: column;
}
.works-top .catch .ttl span {
    background-color: var(--color03);
    color: #fff;
    padding: 10px 15px;
    border-radius: 50%;
    margin: 0 15px;
}
.works-top .catch .ex {
    display: inline-block;
    text-align: center;
    padding-top: 20px;
}
.works-tab {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

@media (max-width: 830px) {
  .works-tab {
    flex-direction: column;
  }
}

.tab-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
  width: 30%;
}

.tab-menu li {
  background: transparent;
  padding: 0px 15px;
  margin-bottom: 10px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color01);
  font-size: clamp(0.75rem, 0.643rem + 0.36vw, 1rem);
}

.tab-menu .number02 {
  font-size: clamp(1rem, 0.571rem + 1.43vw, 2rem);
}

.works-detail-text .number03 {
  font-size: clamp(2.625rem, 2.464rem + 0.54vw, 3rem);
  font-weight: var(--fw-medium);
}

.tab-menu li.active {
  background: #3c372b;
  color: white;
}

.tab-content {
  flex: 1;
  width: 60%;
}

.tab-pane {
  display: none;
  transition: .3s ease-in-out;
}

.tab-pane.active {
  display: block;
}

/* 画像表示用 */
.works-image {
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
}

.works-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color01);
  border-radius: var(--radius);
}

.works-detail-text .ttl {
  display: flex;
  align-items: center;
  gap: 16px;
}

.works-detail-text p {
  padding-top: 18px;
}

.green {
  color: var(--color03);
}

@media (max-width: 830px) {
  .tab-menu,
  .tab-content {
    width: 100%;
  }

  .works-image {
    padding: 24px 0;
  }
}

.svg-wrap {
width: 100%;
overflow: hidden;
}

.svg-wrap svg {
height: auto;
display: block;
}

.svg-wrap svg * {
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    transition: stroke-dashoffset 3s ease;
    display: inline-block;
}
.svg-wrap.animate svg * {
stroke-dashoffset: 0;
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
/* works */
.works-top {}
.works-top .area {
}
.works-top .area .box01 {
}
.works-top .area .box01 .ttl-box{}
.works-top .area .box01 .ttl-box .ttl{}
.works-top .area .box01 .ttl-box .lead{}
.works-top .area .box02{}
.works-top .area .box02 .img-box{}
.works-top .area .box02 .img-box img{}
.works-top {
    border-bottom: 1px solid #000;
}
.works-top .catch .ttl{}
.products {}
.products .area {
    background-color: var(--color03);
    border-radius: var(--radius);
    padding: 80px;
    color: #fff;
    align-items: self-start;
    height: 100%;
    justify-content: space-between;
    border: 1px solid var(--color04);
}
.products .area .box{}
.products .area .box01 {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start;
    width: 40%;
    padding-right: 45px;
}
.products .area .box01 .ttl-box {}
.products .area .box01 .ttl-box .sub {}
.products .area .box01 .ttl-box .ttl {}
.products .area .box01 .ex {
    margin-top: 25px;
    width: 100%;
    margin-bottom: 25px;
}
.products .area .box01 .button {
    margin-left: auto;
}
.products .area .box01 a {}
.products .area .box01 a p {
width: 135px;
}
.products .area .box01 a .draw-line {
    width: 135px;
}
.products .area .box02 {
    width: 55%;
}
.products .area .box02 .img-box {}
.products .area .box02 .img-box img {
    border-radius: var(--radius);
    object-fit: cover;
}
/* ========== CONTACT ========== */
.contact {}
.contact-top {
    height: 600px;
}
.contact-top .area {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}
.contact-top .box {}
.contact-top .box01 {}
.contact-top .box01 .txt-box {}
.contact-top .box01 .txt-box .ttl {}
.contact-top .box01 .txt-box .lead {}
.contact-top .box02 {
}
.contact-top .area .box02 {
    position: relative;
    height: 100%;
}
.contact-top .area .box02 .img-box {
    position: absolute; */
    z-index: 0;
    inset: 50% auto auto 85%;
    translate: -50% -50%;
    width: 100%;
}
.contact-top .box02 .img-box img {
    width: 400px;
}
.form-section {
    position: relative;
}
.form-section .area {
    align-items: start;
    padding-bottom: 80px;
    justify-content: flex-start;
}
.form-section .area .box {}
.form-section .area .box01 {
    justify-content: flex-start;
}
.form-section .area .box01 p {}
.form-section .area .box02 {
}

.form-section .area .box02 .contact_form01 {}
.cform.contact-form {
    width: 100%;
}
.cform.contact-form p {
    font-weight: var(--fw-medium);
    margin-bottom: 4px;
}
.cform.contact-form tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}
.cform.contact-form th {
    display: flex;
    gap: 5px;
    font-weight: var(--fw-bold);
}
.cform.contact-form th span {
    color: var(--color03);
}
.cform.contact-form th > div {
}
.contact form .checkbox-area .check-area {
    flex-direction: row;
    justify-content: center;
}
.contact form .checkbox-area {
    margin-bottom: 30px;
}
.contact form .checkbox-area p span {}
.contact form .checkbox-area p a {}
.cform.contact-form td {
}

.cform.contact-form input,
.cform.contact-form textarea {
}

.cform.contact-form textarea {
}
.submit-area {
    display: flex;
    justify-content: center;
}

.submit-area .submit-btn {
}
/* ========== プライバシー ========== */

.privacy-top {
}
.privacy-top .area .box01 .txt-box .ttl {
    line-height: 1;
    margin-bottom: 25px;
}
.privacy-policy {
  margin: 0 auto;
  line-height: 1.8;
  padding-top: clamp(4.063rem, 2.297rem + 5.95vw, 7.5rem);
  padding-bottom: clamp(4.063rem, 2.297rem + 5.95vw, 7.5rem);
}

/* 見出し（大） */
.privacy-policy h1 {
  font-weight: bold;
  border-bottom: 3px solid #3e392d;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

/* 見出し（中） */
.privacy-policy h2 {
  font-size: 22px;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 15px;
  color: #3e392d;
  border-left: 4px solid #3e392d;
  padding-left: 10px;
}

/* 段落 */
.privacy-policy p {
  margin-bottom: 20px;
}

/* リスト */
.privacy-policy ul {
  padding-left: 1.5em;
  margin-bottom: 20px;
}
.privacy-policy ul li {
  list-style-type: disc;
  margin-bottom: 8px;
}

/* 更新日など補足 */
.privacy-policy .updated {
  font-size: 14px;
  color: #888;
  text-align: right;
  margin-top: 40px;
}


/* ========== PROJECTS ========== */
.post-projects .projects-top .area .box01 {
}

.post-projects .history .area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 35px;
}

.post-projects .card {
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.post-projects .card:hover {
  transform: translateY(-4px);
}

.post-projects .card .up {
  position: relative;
}

.post-projects .card .up .img_box img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 6/4;
    border-radius: 6px;
}

.post-projects .card .up .cate {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 8px;
}
.post-projects .card .down {
  padding: 10px 10px;
}
.post-projects .card .down .date {
}
.post-projects .card .down .ttl {
    line-height: 1;
    letter-spacing: 3px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* ページネーション装飾 */
.post-projects .pagination {
  margin-top: 3rem;
  text-align: center;
}

.post-projects .pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    padding: 5px 13px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.3s;
    line-height: inherit;
}

.post-projects .pagination .page-numbers:hover {
  background: #ccc;
}
.post-projects .pagination .page-numbers.current {
  background: var(--color03);
  color: #fff;
  font-weight: bold;
    padding: 7px 13px;
}
.post-projects .child-top .area .box01 {
}
.post-projects .child-top .area {
}
.post-projects .history {
    border-top: none;
    padding-top: clamp(3.125rem, 0.446rem + 10.2vw, 9.375rem);
    padding-bottom: clamp(2.188rem, 0.446rem + 6.63vw, 6.25rem);
}
/* single */
.single-contents {}
.single-contents .container {}
.single-contents .area {}
.single-contents .single-article {}

.single-article h1 {}

.single-article .meta {
    justify-content: space-between;
}
.single-article .meta .date {}
.single-article .meta .cate {
    padding: 0px 5px;
    font-size: 12px;
}

.single-article .content {
    margin-top: 50px;
}
.back-to-archive {
    margin: 25px auto;
    display: flex;
    justify-content: center;
}
.back-to-archive .back-btn {
    background-color: var(--color04);
    color: #fff;
    padding: 3px 0px;
    border-radius: 30px;
    width: 185px;
    text-align: center;
}

/* 404 */
.error-content {
    padding: 65px 0;
}

/* ========== RESPONSIVE ========== */
/* コンテナ幅～1281px（広い条件を先に） */
@media screen and (min-width: 1024px) and (max-width: 1600px) {
}

/*  */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .post-projects .child-top .area {
    margin-top: 50px;
}
}

/* mac book air（1280px以下の広い範囲） */
@media screen and (max-width: 1280px) {}

/* タブレット共通 */
@media screen and (max-width: 1024px) {
    .access .area {
    flex-direction: column;
}
    .access .area .box02 {
    width: 100%;
    margin-top: 20px;
}
.contact-top {
    height: 400px;
}
.child-top .area {
    height: 100%;
}
.contact-top .box02 .img-box img {
    width: 100%;
}
.form-section .area {
    flex-direction: column;
}
.form-section .area .box01 {
    width: 100%;
}
.form-section .area .box02 {
    width: 100%;
    margin-top: 30px;
}
.child .catch {
    padding: 50px 0 20px;
}
.tab-menu {
    flex-direction: row;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tab-menu li {
    width: 40%;
    margin-bottom: 3px;
}
.tab-content {
    width: 100%;
}
.works-detail-text {
    margin-top: 20px;
}
.products .area {
    padding: 2rem;
}
.products .area .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.products .area .box .ttl-box{}
.products .area .box .ttl-box .sub{}
.products .area .box .ttl-box .ttl {
    text-align: center;
}
.products .area .box .img-box {
    width: 100%;
}
.products .area .box .img-box img {
    border-radius: var(--radius);
}
.products .area .box .ex{}
.products .area .box .button {
    margin: 0;
}
.products .area .box .button a{}
.products .area .box .button a p{}
}

/* タブレット横 */
@media screen and (min-width: 631px) and (max-width: 1366px) and (orientation: landscape) {}

/* タブレット縦 */
@media screen and (min-width: 631px) and (max-width: 1024px) and (orientation: portrait) {}

/* スマホ（最後） */
@media screen and (max-width: 630px) {
.child-top {}
.child-top .area {
    display: block;
    height: 245px;
}
.child-top .area .box01 {
    position: relative;
    z-index: 1;
    text-align: left;
    align-items: center;
    height: 100%;
}
.child-top .area .box01 .ttl {}
.child-top .area .box01 .lead {}
.child-top .area .box02 {
    position: absolute;
    inset: 50% auto auto 65%;
    translate: -50% -50%;
    width: 75%;
    z-index: -1;
}
.child-top .area .box02 img{}
.about-top .area {
}
.about-top .box01 {
}

.about-top .catch {
    display: flex;
    align-items: center;
    padding: 75px 0 0;
}
.about-top .catch .ttl {
    text-align: center;
}
.about-top .catch .ttl ruby rt {
    font-weight: 700;
    padding-bottom: 3px;
    letter-spacing: 2px;
}
.history th {
    padding: 15px 10px;
    border-top: 1px solid var(--color01);
}
.history td.col-value {
    word-break: inherit;
    white-space: inherit;
    padding: 15px 10px;
    border-top: 1px solid var(--color01);
    font-weight: var(--fw-regular);
}
.history tr:last-child th{
    border-bottom: 1px solid var(--color01);
}
.history tr:last-child td.col-value {
    border-bottom: 1px solid var(--color01);
}
.history td.col-line {
    display: none;
}
.history {
    border-top: none;
    padding-top: 25px;
}
.history tr {
}
.child .catch .ttl {
    text-align: left;
}
.child .catch {
    padding: 85px 0 40px;
}
.child.about .catch {
    padding: 40px 0 15px;
}
.access {
    border-top: none;
    padding-top: 40px;
}
.map-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-top {
    height: inherit;
}
.contact-top .area {
}
.contact-top .box01 {
}
.contact-top  .area .box02 {
    top: 17%;
    left: 40%;
    z-index: 1;
    width: 45%;
}
.contact-top .area .box02 .img-box {
    position: absolute;
    inset: inherit;
    translate: none;
}
.contact-top  .area .box02 .img-bpx img{
}
.cform.contact-form tr {
    margin-bottom: 18px;
}
.works-top .area {
}
.works-top .area .box02 {
}
.works-top {
    border-bottom: none;
}
.works-top .catch {
    display: flex;
    align-items: center;
    padding: 30px 0 0;
    border-bottom: none;
}
.works-top .catch .ttl {
    text-align: center;
}
.works-top .catch .ttl span {
    padding: 6px 6px;
    margin: 0 5px;
    line-height: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
    height: 30px;
    display: inline-block;
    width: 30px;
}
.tab-menu li {
    width: 100%;
}
.works-detail-text {
    margin-top: 0px;
}
.works_detail .line {
    height: 1px;
    background: #000;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
.tab-pane .sp-ttl {
    width: 100%;
    margin: 0;
}
.tab-pane .sp-ttl .number03 {
    font-size: clamp(2.625rem, 2.464rem + 0.54vw, 3rem);
    font-weight: var(--fw-medium);
    display: inline-block;
    transform: translateY(0.15em);
}
.works-tab {
    gap: 30px;
}
.products {
    padding-top: 28px;
}
.products .area {
    padding: 1rem;
}
.products .area .box .button a {
    width: 120px;
}
.contact-top .img-box {
}
.contact-top .img-box img {
}
.form-section .area .box01 p {
    text-align: center;
}
.works-top .area .box01 {
}
.form-section .area .box01 {
    width: 100%;
    justify-content: center;
}
.post-projects .card .down .ttl {
    font-size: 17px;
    line-height: 1.3;
}
.post-projects .history .area {
    gap: 30px;
    margin-top: 0px;
}
.post-projects .pagination .page-numbers {
    padding: 7px 13px;
}
.post-projects .child-top .area .box01 {
}
.post-projects .projects-top .area .box02 {
}
.post-projects .projects-top .area {
}
.post-projects .card .down {
    padding: 3px 5px;
}
.privacy-top .area .box01 {
    justify-content: left;
    width: 60%;
}
.privacy-policy {
    padding-top: 30px;
}
}