@charset "utf-8";
/*
Template: 
Theme Name: 
*/

/*----------------------------------------------------
	main
----------------------------------------------------*/

main {
    clear: both;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    height: auto !important;
    overflow: hidden;
}

main:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}


/*----------------------------------------------------
	メイン画像
----------------------------------------------------*/

#main_img {
    width: 100%;
    height: 750px;
    overflow: hidden;
    margin: 80px auto 0;
    background: url(/wp-content/uploads/main1.webp) no-repeat center bottom;
    background-size: cover;
    position: relative;
}

#main_img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background-image: radial-gradient(#000 10%, transparent 50%);
    background-size: 3px 3px;
}

#img_area {
    height: 750px;
}

#main_img p {
    font-size: 3.5rem;
    font-weight: var(--font-weight-base);
    text-decoration: none;
    letter-spacing: 1px;
    text-align: right;
    color: #fff;
    margin: 0;
    position: absolute;
    bottom: 9%;
    right: 5%;
    z-index: 100;
}

#main_img h1.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


@media screen and (max-width: 1260px) {

#main_img {
    height: 700px;
    margin-top: 60px;
}

#img_area {
    height: 700px;
}

#main_img p {
    font-size: 2.8rem;
    bottom: 7%;
    right: 6%;
}

#main_img p span {
    display: block;
}

}


@media screen and (max-width: 768px) {

#main_img {
    height: 500px;
    background-size: cover;
}

#img_area {
    height: 500px;
}

#main_img p {
    font-size: 2.1rem;
    bottom: 8%;
}

}


/*----------------------------------------------------
	サブページ・タイトル画像
----------------------------------------------------*/

#main_img-sub {
    width: 100%;
    height: 250px;
    background: url(/wp-content/uploads/main1.webp) no-repeat center bottom;
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    background-size: cover;
}

#main_img-sub::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background-image: radial-gradient(#000 10%, transparent 50%);
    background-size: 3px 3px;
}

#img_area-sub {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#img_area-sub h1,
#img_area-sub p {
    font-size: 3.6rem;
    font-weight: var(--font-weight-base);
    line-height: 1;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    z-index: 10;
    position: relative;
}

#img_area-sub h1 .sub_title,
#img_area-sub p .sub_title {
    font-size: 1.7rem;
}


@media screen and (max-width: 1260px) {

#main_img-sub {
    height: 200px;
    margin-top: 60px;
    background: url(/wp-content/uploads/main_sub_bg.webp) no-repeat center bottom;
    background-size: cover;
}

#img_area-sub {
    height: 200px;
}

}


@media screen and (max-width: 768px) {

#main_img-sub,
#img_area-sub {
    height: 150px;
}

#img_area-sub h1,
#img_area-sub p {
    clear: both;
    width: 100%;
    height: auto;
    font-size: 2.6rem;
}

#img_area-sub h1 .sub_title,
#img_area-sub p .sub_title {
    font-size: 1.4rem;
}

}


/*----------------------------------------------------
	h2・h3・h4
----------------------------------------------------*/

h2 {
    font-size: 3.0rem;
    font-weight: var(--font-weight-base);
    line-height: 1.5;
    margin-bottom: 30px;
    position: relative;
}

h2.h2_top {
    font-size: 3.4rem;
    font-weight: var(--font-weight-base);
    line-height: 1.6;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
}

h3 {
    margin: 0 0 20px;
    font-size: 2.7rem;
    font-weight: var(--font-weight-base);
    line-height: 1.5;
}


@media screen and (max-width: 768px) {

h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

h2.h2_top {
    font-size: 2.6rem;
    line-height: 2;
    margin-bottom: 30px;
}

h3 {
    font-size: 2.2rem;
    line-height: 1.5;
}

}


/*----------------------------------------------------
    トップページ
----------------------------------------------------*/

#top_concept {
    position: relative;
}

.concept_lr {
    width: 100%;
    padding-bottom: 100px;
    margin: 30px 0 40px;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}

.concept_lr img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.concept_l {
    width: 55%;
}

.concept_r {
    width: 60%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.concept_img_lr {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    gap: 30px;
}

.concept_img_l {
    width: 48%;
}

.concept_img_r {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
}

#top_concept h2 {
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: normal;
    line-height: var(--line-height-base);
    text-align: center;
    margin-bottom: 15px;
}

p.project-examples {
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    margin-bottom: 30px;
    margin-top: -15px;
    text-align: center;
}


@media screen and (max-width: 980px) {

.concept_lr {
    width: 100%;
    height: auto;
    margin: 10px auto 30px;
    padding-bottom: 0;
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 20px;
}

.concept_l {
    width: 100%;
}

.concept_r {
    width: 100%;
    position: static;
}

.concept_img_lr {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    gap: 20px;
}

.concept_img_l {
    width: 49%;
}

.concept_img_r {
    gap: 20px;
}

}


/*----------------------------------------------------
    事業内容
----------------------------------------------------*/

#services_area {
    width: 100%;
    background: url(/wp-content/uploads/services_bg.webp)no-repeat bottom;
    background-size: cover;
    position: relative;
}

#services_area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background: rgb(165 165 165 / 80%);
    transition: all ease 2s;
}

.services_box {
    width: 85%;
    margin: 25px auto 30px;
    padding: 70px 70px 60px 80px;
    background: #fff;
    position: relative;
    z-index: 10;
}

#services_area h3 {
    font-size: clamp(2.0rem, 3vw, 3.0rem);
    font-weight: var(--font-weight-base);
    line-height: 1.7;
    margin: 0 0 30px;
    text-align: center;
    position: relative;
}

#services_area li.di {
    margin-bottom: 20px;
    font-weight: var(--font-weight-base);
}

#services_area li.di span.sub {
    font-weight: normal;
}


@media screen and (max-width: 768px) {

.services_box {
    padding: 55px 40px 45px 45px;
}

}


/*----------------------------------------------------
	ご挨拶
--------------------------------------------------- */

#greeting_area {
    width: 100%;
    background: url(/wp-content/uploads/greeting_top.webp)no-repeat bottom;
    background-size: cover;
    position: relative;
}

#greeting_area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background: rgb(165 165 165 / 80%);
    transition: all ease 2s;
}


/*----------------------------------------------------
	サイトマップ
--------------------------------------------------- */

#menu-sitemap-navi {
    margin-bottom: 30px;
}

#menu-sitemap-navi li {
    border-bottom: 1px solid var(--border-color);
}

#menu-sitemap-navi li a {
    font-size: 1.6rem;
    text-align: left;
    line-height: 1;
    list-style-type: none;
    color: var(--font-color-base);
    padding: 15px 5px 15px 15px;
    font-weight: var(--font-weight-base);
    display: block;
    text-decoration: none;
    position: relative;
}

#menu-sitemap-navi li ul.sub-menu {
    margin-left: 18px;
    padding: 5px 0 5px 0;
    margin-bottom: 0;
    position: relative;
    top: -7px;
}

#menu-sitemap-navi li ul.sub-menu li {
    border-bottom: none;
}

#menu-sitemap-navi li ul.sub-menu li a {
    padding: 8px 5px 8px 20px;
}

#menu-sitemap-navi li ul.sub-menu li a::before {
    content: "";
    display: block;
    width: 8px;
    height: 2px;
    background: #c7c7c7;
    position: absolute;
    left: 0;
    top: 13px;
}

#menu-sitemap-navi li a:hover {
    text-decoration: none;
    color: var(--secondary-color);
}


/* -----------------------------------------------------------
	タグ
----------------------------------------------------------- */

.tag.tag_cat {
    width: 100px;
    height: 26px;
    color: #fff;
    font-style: normal;
    font-size: 1.4rem;
    background: var(--secondary-color);
    line-height: 1;
    margin: 0 0 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
}

.tag.tag_cat::before {
    content: "";
    position: absolute;
    background: var(--secondary-color);
    margin: 1px;
    border: 1px #fff solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -5;
}


@media screen and (max-width: 768px) {

.tag.tag_cat {
    width: 100px;
    height: 23px;
    font-size: 1.3rem;
    margin: 0 0 0 10px;
}

}


/*----------------------------------------------------
    トップページ・お知らせ
----------------------------------------------------*/

#top_info_area {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}

#top_info_area li {
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
    border-bottom: none;
}

#top_info_area li.list_none_top_info {
	font-size: 1.5rem;
    font-weight: var(--font-weight-base);
    padding: 10px 0;
}

#top_info_area li.list_none_top_info .tag.tag_cat {
    margin: 0 20px 0 0;
}


/* -----------------------------------------------------------
	お知らせ
----------------------------------------------------------- */

li.info-top {
    border-bottom: 1px solid var(--border-color);
    clear: both;
    overflow: hidden;
}

li.info-top a {
    width: 100%;
    display: inline-flex;
    text-decoration: none;
    padding: 10px 0;
    align-items: center;
}

li.info-top a:hover {
    text-decoration: none;
}

li.info-top a .title:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

ul.info {
	margin-bottom: 30px;
}

p.date {
    width: 205px;
    color: var(--font-color-gray);
    margin-bottom: 0;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
}

.title {
    width: calc(100% - 205px);
    font-size: 1.7rem;
    font-weight: var(--font-weight-base);
    margin-bottom: 0;
}


@media screen and (max-width: 768px) {

li.info-top a {
    text-decoration: none;
    padding: 10px 0;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

p.date {
    margin: 5px 0 2px;
}

.title {
    width: 100%;
}

}


/* -----------------------------------------------------------
	製作事例
----------------------------------------------------------- */

#list {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 30px auto;
}

#list ul {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 3%;
}

#list li {
    flex: 0 0 calc((100% - 3% * 2) / 3);
    height: auto;
    overflow: hidden;
}

#list_inner {
    overflow: hidden;
    min-height: 100%;
}

#list_inner a,
#list_inner a:hover {
    text-decoration: none;
}

#list_inner h2 {
    font-size: clamp(1.7rem, 3vw, 1.9rem);
    font-weight: var(--font-weight-base);
    line-height: 1.8;
    margin-bottom: 0;
    text-align: center;
}

.list_image {
    line-height: 0;
    overflow: hidden;
    margin-bottom: 15px;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    position: relative;
}

#list li img,
#list li img.ofi {
    overflow: hidden;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

#list li img {
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
    will-change: transform;
}

#list li img:hover {
    transform: scale(1.1);
}

.list_none {
	font-size: 1.5rem !important;
    width: 98% !important;
    height: auto !important;
    margin: 40px auto 30px !important;
    display: block !important;
    text-align: center !important;
}

.list_none_top_blog {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 auto 20px !important;
    margin-right: 3% !important;
    display: block !important;
    text-align: center !important;
}


@media screen and (max-width: 1024px) {

#list ul {
    gap: 30px 5%;
}

#list li {
    flex: 0 0 calc((100% - 5%) / 2);
    height: auto;
    overflow: hidden;
}

}


@media screen and (max-width: 768px) {

#list {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#list ul {
    width: 100%;
    height: auto;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 40px 0;
}

#list li {
    width: 100%;
    height: auto;
}

#list_inner {
    margin-bottom: 0;
}

#list_inner p {
    margin-bottom: 0;
}

.list_image {
    overflow: hidden;
    text-align: center;
    margin: 0 auto 15px;
    vertical-align: middle;
}
	
.list_none {
    margin: 20px auto !important;
}

.list_none_top_blog {
    margin: 0 auto 30px !important;
}

}


/* -----------------------------------------------------------
	個別記事
----------------------------------------------------------- */

#article h1.single_title {
    font-size: clamp(2.4rem, 2vw, 3.0rem);
    font-weight: var(--font-weight-base);
    line-height: 1.5;
    margin-bottom: 30px;
    margin-bottom: 5px;
    font-weight: var(--font-weight-base);
    position: relative;
}

#article h1.single_title_bb {
    font-size: clamp(2.4rem, 2vw, 3.0rem);
    font-weight: var(--font-weight-base);
    line-height: 1.5;
    margin-bottom: 40px;
    padding: 0 0 30px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

#article h2,
#article h3 {
    margin: 40px 0 20px;
}

.single_date {
    font-size: 1.3rem;
    color: var(--font-color-gray);
    margin-bottom: 40px;
    padding: 0 0 20px 5px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}


/* -----------------------------------------------------------
	個別記事ページャー
----------------------------------------------------------- */

.pager {
    clear: both;
    text-align: center;
}

.pager .fa-solid {
    padding: 0 5px !important;
}

.pager .next a {
    width: auto;
    height: 40px;
    clear: both;
    font-size: 1.4rem;
    padding: 13px 20px;
    background: var(--primary-color);
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
}

.pager .previous a {
    width: auto;
    height: 40px;
    clear: both;
    font-size: 1.4rem;
    padding: 13px 20px;
    background: var(--primary-color);
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
}

.pager .more {
    clear: both;
    width: auto;
    height: 40px;
    font-size: 1.4rem;
    background: var(--primary-color);
    color: #fff;
    padding: 13px 20px;
    margin: 10px 5px;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
}

.pager .next a:hover,
.pager .previous a:hover,
.pager .more:hover {
    text-decoration: none;
    opacity: 0.7;
}


/* -----------------------------------------------------------
	ページネーション
----------------------------------------------------------- */

.pagination {
    clear: both;
    list-style-type: none;
    padding-left: 0;
    margin: 50px 0 30px;
}
 
.pagination,
.pagination li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
 
.pagination a {
    font-weight: 300;
    padding-top: 1px;
    text-decoration: none;
    border: 1px solid #fff;
    border-left-width: 0;
    min-width: 36px;
    min-height: 35px;
    background: var(--primary-color);
    color: #fff;
}
 
.pagination li:not([class*="current"]) a:hover {
    opacity: 0.7;
}
 
.pagination li:first-of-type a {
    border-left-width: 1px;
}
 
.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
 
.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
 
.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }
 
.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }
 
.pagination li.current a {
    background: var(--secondary-color);
    cursor: default;
    pointer-events: none;
}


/* -----------------------------------------------------------
	アーカイブ（年ごとブロック＋月リンク）
----------------------------------------------------------- */

#archive {
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 0 auto 30px;
}

#archive h2 {
    margin: 10px 0 40px;
    font-size: 3.4rem;
    font-weight: var(--font-weight-base);
    line-height: 1;
    text-align: center;
}

#archive h2 .sub_title {
    font-size: 1.9rem;
}

/* 年ごとのブロック */
.archive-years {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.archive-year__heading {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* 月リンク（横並びで折り返し） */
.archive-month-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    list-style: none;
}

.archive-month-list li {
    margin: 0;
}

.archive-month-list li a {
    font-size: 1.3rem;
    color: var(--font-color-base);
    text-decoration: none;
    letter-spacing: 0.1px;
}

.archive-month-list li a::before {
    content: "\f073";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 4px;
    font-size: 1.2rem;
}

.archive-month-list li a:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.archive-none {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0;
}

/* 「すべてのアーカイブを見る」ボタン */
.archive-more {
    margin: 40px 0 0;
    text-align: center;
}

.archive-toggle {
    padding: 4px 12px;
    font-size: 1.3rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: #fff;
    cursor: pointer;
}

.archive-toggle:hover {
    color: var(--secondary-color);
}


@media screen and (max-width: 768px) {

#archive h2 {
    font-size: 2.6rem;
    line-height: 1.1;
}


#archive h2 .sub_title {
    font-size: 1.4rem;
}

}