@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2024.1.28
Last Updated: 2024.4.22
*/


/* import
------------------------------------------------------------ */
@import "https://w-shiya.com/release/css/ampersand-2024.css";
@import "https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap";
@import "https://use.typekit.net/ytq1gii.css";


/* set
------------------------------------------------------------ */
body {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
letter-spacing: .03em;
line-height: 1.6;
position: relative;
}
body.home {
background: #1e1210 url("images/bg.png") repeat-y top/100% auto;
}


/* common
------------------------------------------------------------ */
/* font */
.URW { /* URW Antiqua Regular */
font-family: urw-antiqua, serif;
font-weight: 400;
}

/* style */
.sdw_wht {
text-shadow: 0 0 5px rgba(255,255,255,1);
}
.sdw_brn {
text-shadow: 0 0 5px rgba(30,18,16,1);
}

/* color */
.gld {
color: #a28e7b;
}

/* hover */
.marker {
position: relative;
z-index: 1;
}
.marker::after {
content: "";
background: rgba(35,24,21,.7);
width: 0;
height: 40%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
transition: all .3s;
}	
.marker:hover::after {
width: 100%;
}
.c-container a {
color: #a28e7b;
text-decoration: underline;
}
.c-container a:hover {
text-decoration: none;
}

/* background */
.bg {
background: #1e1210;
}
.bg_gld {
background: #a28e7b;
}

/* title */
h2 em.URW {
font-size: 4.5rem;
font-style: normal;
letter-spacing: .05em;
min-width: 330px;
margin-bottom: .2em;
padding-bottom: .2em;
display: inline-block;
border-bottom: 1px solid #1e1210;
}
h2.wht em.URW {
border-bottom: 1px solid #FFF;
}
h2 strong {
color: #a28e7b;
font-size: 2.5rem;
font-weight: 400;
letter-spacing: .1em;
display: block;
}

/* .more */
.more a {
background: rgba(35,24,21,1);
display: inline-block;
color: #FFF;
white-space: nowrap;
padding: 1.5em 2em;
border: 1px solid #1e1210;
border-radius: 5px;
}
.more a:hover {
background: rgba(35,24,21,0);
color: #1e1210;
}
.more.wht a {
background: rgba(35,24,21,.7);
border: 1px solid #FFF;
}
.more.wht a:hover {
background: rgba(35,24,21,1);
color: #FFF;
}
.icon {
display: inline-block;
position: relative;
}
.icon a {
padding-left: 60px;
position: relative;
}
.more.icon a {
padding-left: calc(60px + 1.5em);
}
.icon a::before {
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.more.icon a::before {
left: 1.5em;
}
.icon.mail a::before {
background: url("images/icon_mail.png") no-repeat center/contain;
}
.icon.phone a::before {
background: url("images/icon_phone.png") no-repeat center/contain;
}

/* form set */
.grecaptcha-badge { visibility: hidden; }
input[type="checkbox"] + span::before,
input[type="radio"] + span::before {
border: 1px solid #000;
}
input[type="checkbox"]:checked + span::after,
input[type="radio"]:checked + span::after {
top: -4px;
}
input[type="radio"]:checked + span::after {
top: 6.5px;
left: 4.5px;
}
input[type="checkbox"] + span,
input[type="radio"] + span {
padding: 0 0 0 30px;
}
.snow-monkey-form input[type="checkbox"], input[type="radio"] {
display: none !important;
}
.smf-button-control__control {
background: #1e1210 !important;
font-family: "Zen Old Mincho", serif;
color: #FFF !important;
font-size: 1.8rem !important;
letter-spacing: .05em;
margin-top: 1em;
padding: .8em 2em !important;
border: none !important;
border-radius: 0 !important;
transition: background .3s ease !important;
}
.smf-button-control__control[data-action="back"] {
background: transparent !important;
color: #333 !important;
text-decoration: underline !important;
}
.smf-button-control__control:not([data-action="back"]):hover,
.smf-button-control__control:not([data-action="back"]):focus {
background: #a28e7b !important;
}
input {
width: auto !important;
}


/* overwrite
------------------------------------------------------------ */
body:not(.home) #main_contents {
margin-top: 60px;
padding-bottom: 5em;
}
.post-type-archive-project #archive_catchphrase .headline {
font-family: urw-antiqua, serif;
font-weight: 400;
font-size: 4.5rem !important;
font-style: normal;
letter-spacing: .05em;
min-width: 330px;
margin-bottom: .2em;
padding-bottom: .2em;
display: inline-block;
border-bottom: 1px solid #1e1210;
}
.post-type-archive-project #archive_catchphrase .desc {
color: #a28e7b;
font-size: 2.5rem !important;
letter-spacing: .1em;
line-height: 1.6;
text-align: center;
}
.post-type-archive-project #main_col {
text-align: center;
}
@media screen and (min-width: 834px) {
.post-type-archive-project #project_catgory_sort {
margin: 0 auto 50px;
display: inline-block;
}
}
#tcd-pb-wrap button:before {
display: none;
}


/* header
------------------------------------------------------------ */
header {
color: #FFF;
width: 100%;
height: 60px;
padding-left: 5%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 12;
}
header:before {
content: "";
background: #a28e7b;
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
transition: .5s;
opacity: 0;
z-index: -1;
}
header.active::before {
opacity: 1;
}
body:not(.home) header {
background: #a28e7b;
}
header h1 img {
max-height: 40px;
}
header h1 a {
display: inline-block;
}
header h1 a:hover {
color: #FFF;
}
header h1 a span {
margin-left: 1em;
}

@media screen and (max-width: 1170px) {
header h1 span {
display: none;
}
}

header nav {
clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
height: 60px;
padding: 0 5%;
display: flex;
align-items: center;
}
header nav a {
display: block;
padding: 1em 1.3em;
position: relative;
}
header nav a:hover {
color: #FFF;
}
header nav a::before {
content: "";
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: .3s;
z-index: -1;
}
header nav a:hover::before {
width: 30px;
background: #c07323;
height: 30px;
box-shadow: 0 0 0 0 rgba(192,115,35,.5);
animation: HdrNav 1s infinite;
}
@keyframes HdrNav {
70% {
box-shadow: 0 0 0 20px rgba(192,115,35,0);
}
100% {
box-shadow: 0 0 0 0 rgba(192,115,35,0);
}
}

#shutter,
#triple {
display: none;
}

/* .line */
header .line {
width: 70px;
height: 70px;
position: fixed;
top: 80px;
right: -5px;
z-index: 2;
}
header .line a {
background: #FFF;
padding: 10px;
display: block;
border-radius: 20px 0 0 20px;
box-shadow: 0 0 10px rgba(0,0,0,.16);
}
header .line a:hover {
background: rgba(255,255,255,.7);
}


/* footer
------------------------------------------------------------ */
footer {
position: relative;
}
footer::before,
footer::after {
content: "";
background: #2a211f;
clip-path: polygon(0 0, 0 100%, 100% 0);
width: 16vw;
height: 16vw;
position: absolute;
top: -1px;
left: 0;
z-index: 1;
}
footer::after {
background: #1e1210;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
top: auto;
left: auto;
right: 0;
bottom: 0;
z-index: 0;
}
footer article.bg_wht section {
z-index: 1;
}
footer h1 img {
max-height: 40px;
}
footer article.wht {
background: #2a211f;
height: 70px;
padding-top: 1em;
}
footer nav a {
display: block;
padding: 0 1.3em;
position: relative;
}
footer nav a:hover {
color: #a28e7b;
}
footer nav li:not(:first-child) {
border-left: 1px solid #FFF;
}
footer article.wht p.f14 {
position: absolute;
right: 2%;
bottom: .5em;
z-index: 1;
}

/* #pagetop */
#pagetop {
right: 2%;
bottom: 4%;
}
#pagetop a {
background: #c07323;
font-size: 1.2rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-indent: inherit;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(192,115,35,.5);
animation: PageTop 1.3s infinite;
}
#pagetop a::before {
display: none;
}
#pagetop a:hover {
animation: none;
}
@keyframes PageTop {
0% {
transform: scale(.9);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 25px rgba(192,115,35,0);
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 rgba(192,115,35,0);
}
}


/* main
------------------------------------------------------------ */
/* #main */
#main::after {
content: "";
background: #1e1210;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
width: 16vw;
height: 16vw;
position: absolute;
right: 0;
bottom: -1px;
z-index: 1;
}
#main li p {
position: absolute;
bottom: 5%;
left: 5%;
}
#main li p {
animation: fadeIn 3s forwards;
opacity: 0;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

/* #about */
#about::before {
content: "";
background: url("images/about.png") no-repeat center/contain;
width: 735px;
height: 515px;
position: absolute;
top: 2em;
right: 50%;
}
#about::after {
content: "";
background: url("images/bg_01.png") no-repeat top right/contain;
width: 480px;
max-width: 48%;
height: 635px;
position: absolute;
top: 35%;
right: 0;
}
#about div.zidx1 {
max-width: 600px;
margin-left: auto;
}
#about div.zidx1 p {
padding: 2em 4em 0 0;
}

/* #point */
.diamonds {
margin: -60px auto -100px;
padding-bottom: 225px;
overflow: hidden;
}
.diamonds .item a {
background: #a28e7b;
width: 450px;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
.diamonds .item a::before {
content: "";
background: rgba(30,18,16,.7);
mix-blend-mode: multiply;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.diamonds .item a:hover::before {
background: rgba(30,18,16,.5);
}
.diamonds .item a p {
z-index: 1;
}
.diamonds .item.blank {
background: transparent;
margin-top: -540px;
}
.diamonds .item.point a::before {
background: rgba(30,18,16,0);
}
.diamonds .item.point a:hover::before {
background: rgba(30,18,16,.7);
mix-blend-mode: multiply;
}
.diamonds .item.point_01 a {
background: url("images/point_01.png") no-repeat center/cover;
}
.diamonds .item.point_02 a {
background: url("images/point_02.png") no-repeat center/cover;
}
.diamonds .item.point_03 a {
background: url("images/point_03.png") no-repeat center/cover;
}

@media screen and (max-width: 980px) {
.diamonds {
margin: -100px auto -130px;
}
.diamonds .item a {
width: 350px;
height: 350px;
}
.diamonds .f39 {font-size: 3.3rem;}
.diamonds .f36 {font-size: 3rem;}
.diamonds .f34 {font-size: 2.6rem;}
.diamonds .f26 {font-size: 2.3rem;}
}

@media screen and (max-width: 760px) {
.diamonds {
margin: 0 auto 2em;
padding-bottom: 0;
display: flex;
flex-wrap: wrap;
}
.diamonds li {
flex-basis: 50%;
}
.diamonds .item a {
width: 100%;
height: 100%;
padding: 2em;
}
.diamonds .item a::before {
display: none;
}
.diamonds .item.blank {
display: none;
}
.diamonds .item.point_01 a,
.diamonds .item.point_02 a,
.diamonds .item.point_03 a {
background-color: rgba(30,18,16,.6);
background-blend-mode: multiply;
}
}

@media screen and (max-width: 570px) {
.diamonds li {
flex-basis: 100%;
min-height: 230px;
}
}

/* #voice */
#voice article {
display: flex;
justify-content: space-between;
max-width: 92%;
margin-left: auto;
}
#voice #VoiceTxt {
flex-basis: 24%;
width: 24%;
min-width: 300px;
margin-right: 3%;
padding-bottom: 100px;
}
#voice #VoiceTxt h3 {
margin-bottom: .5em;
padding-bottom: .3em;
border-bottom: 1px solid #FFF;
}
#voice #VoiceTxt ul.flex {
position: absolute;
left: 0;
bottom: 0;
}
#voice #VoiceTxt ul.flex li {
margin-left: 10px;
cursor: pointer;
}
#voice #VoiceTxt ul.flex li:hover {
background: rgba(255,255,255,.3);
}
#voice #VoicePho {
flex-basis: 73%;
width: 73%;
}
#voice #VoicePho li img {
height: 470px;
object-fit: cover;
}
#voice #VoicePho li a:hover {
opacity: .7;
}

/* #area */
#area::before {
content: "";
background: url("images/bg_02.png") no-repeat top left/contain;
width: 415px;
max-width: 41.5%;
height: 570px;
position: absolute;
top: -5%;
left: 0;
}
#area::after {
content: "";
background: url("images/bg_03.png") no-repeat top right/contain;
width: 385px;
max-width: 38.5%;
height: 540px;
position: absolute;
right: 0;
bottom: -5%;
}
#area figure > div {
flex-basis: 58%;
}
#area figcaption {
flex-basis: 38%;
}
#area h3 + p {
max-width: 230px;
}

/* #line */
#line figure a {
display: flex;
flex-wrap: wrap;
}
#line figure a:hover {
opacity: .7;
}
#line figure div {
flex-basis: 42%;
}
#line figure div img {
height: 100%;
object-fit: cover;
}
#line figure figcaption {
background: #FFF;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), calc(100% - 7vw) 100%, 0 100%);
flex-basis: 58%;
padding: 2em;
}
#line figure figcaption:hover {
color: #000;
}
#line figure h3 {
line-height: normal;
padding-left: calc(60px + 1em);
position: relative;
}
#line figure h3::before {
content: "";
background: url("images/icon_line.png") no-repeat center/contain;
width: 60px;
height: 60px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

/* #contact */
#contact {
background: url("images/contact_bg.png") no-repeat center/cover;
padding-bottom: 1em;
}
#contact h2 {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), calc(100% - 5vw) 100%, 0 100%);
width: 400px;
max-width: 70%;
padding: .5em 1em 1em;
margin: 0 auto;
}
#contact h2 em.URW {
font-size: 4.1rem;
}
#contact h2 strong {
font-size: 2.3rem;
}
#contact ul {
margin-top: 14em;
}
#contact ul li {
margin-bottom: 2em;
}
#contact .phone a {
font-size: 4.2rem;
line-height: 1.4;
letter-spacing: .1em;
white-space: nowrap;
display: inline-block;
}
#contact a {
color: #FFF;
}





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

/* common
------------------------------------------------------------ */
/* font */
.lh20 {line-height: 1.7;}
.lh22 {line-height: 1.9;}
.lh25 {line-height: 2.2;}
.ls01 {letter-spacing: .03em;}
.ls15 {letter-spacing: .05em;}

/* header
------------------------------------------------------------ */
header.active::before {
box-shadow: 0 3px 3px rgba(0,0,0,.1);
}
header h1 img {
max-height: 30px;
}
header h1 span {
display: inline;
}
header nav {
display: none;
}
header nav a::before {
left: 1.3em;
transform: translateY(-50%);
}

/* .active */
header nav.active {
display: block;
background: none;
clip-path: none;
height: auto;
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
animation: fadeIn 1s .5s forwards;
opacity: 0;
z-index: 4;
}
header nav.active ul {
display: block;
font-size: 1.8rem;
}

/* #shutter */
#shutter {
display: block;
}
#shutter {
background: #a28e7b;
width: 100%;
height: 100svh;
position: fixed;
top: -100svh;
right: 0;
z-index: 3;
transition: all .6s;
}
#shutter.active {
top: 0;
}

/* Triple Menu */
#triple {
display: block;
background: #1e1210;
width: 50px;
height: 50px;
padding: 15px 0 0;
border-radius: 50vh;
top: 5px;
right: 5px;
}
#triple span {
background: #FFF;
width: 5px;
height: 5px;
margin: 0 auto 3px;
border-radius: 50vh;
}
#triple.open {
padding-top: 18px;
}
#triple.open span {
width: 22px;
height: 3px;
border-radius: 100vh;
}
#triple.open span:nth-child(1) {
transform: translateY(6px) rotate(-45deg);
}
#triple.open span:nth-child(3) {
transform: translateY(-6px) rotate(45deg);
}

/* .line */
header .line {
width: 40px;
height: 40px;
top: 10px;
right: 70px;
opacity: 1 !important;
transform: none !important;
}
header .line a {
background: none;
padding: 0;
box-shadow: none;
}
header .line::before {
content: "";
background: #FFF;
width: 30px;
height: 30px;
border-radius: 50vh;
position: absolute;
top: 5px;
left: 5px;
z-index: -1;
}

/* footer
------------------------------------------------------------ */
footer article.bg_wht section {
padding-bottom: 5em;
}
footer article.bg_wht section > div:first-child {
flex-basis: 56%;
padding-left: 2em;
}
footer article.bg_wht section > div:last-child {
flex-basis: 40%;
}
footer figure div {
width: 70%;
margin-bottom: .5em;
}
footer nav a {
font-size: 1.4rem;
padding: 0 1em;
}

/* main
------------------------------------------------------------ */
/* #main */
#main li p {
font-size: 2.3rem;
}

/* #about */
#about::before {
mix-blend-mode: difference;
opacity: .5;
}
#about::after {
mix-blend-mode: soft-light;
}
#about div.zidx1 {
margin: 0 auto;
}
#about div.zidx1 p {
padding: 2em 0 0 0;
}

/* #area */
#area::before,
#area::after {
mix-blend-mode: soft-light;
}

/* #voice */
#voice #VoicePho li img {
height: 400px;
}

/* #line */
#line figure figcaption {
padding: 1em;
}

/* #contact */
#contact ul {
margin-top: 5em;
}

}


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

/* set
------------------------------------------------------------ */
body {
letter-spacing: 0;
}

/* common
------------------------------------------------------------ */
.smp_br_none br {
display: none;
}

/* layout */
main {
margin-top: 60px;
}

/* title */
h2 em.URW {
font-size: 3rem;
min-width: auto;
}
h2 strong {
font-size: 2rem;
letter-spacing: .03em;
}

/* .more */
.icon a {
padding-left: 40px;
position: relative;
}
.more.icon a {
padding-left: calc(40px + 1.5em);
}
.icon a::before {
width: 35px;
height: 35px;
}

/* overwrite
------------------------------------------------------------ */
body:not(.home) #main_contents {
padding-bottom: 3em;
}
.post-type-archive-project #archive_catchphrase .headline {
font-size: 3rem !important;
min-width: auto;
}
.post-type-archive-project #archive_catchphrase .desc {
font-size: 2rem !important;
letter-spacing: .03em;
}

/* header
------------------------------------------------------------ */
header {
background: #a28e7b;
box-shadow: 0 3px 3px rgba(0,0,0,.1);
}
header::before {
display: none;
}
header h1 span {
display: none;
}

/* footer
------------------------------------------------------------ */
footer article.bg_wht section > div:first-child {
margin-bottom: 1em;
padding-left: 0;
}
footer article.wht {
height: auto;
padding: .5em 5%;
}
footer nav {
display: none;
}
footer article.wht p.f14 {
text-align: center;
position: static;
}

/* main
------------------------------------------------------------ */
/* #main */
#main li p {
font-size: 1.8rem;
}

/* #about */
#about::before {
display: none;
}
#about section {
padding: 3em 0 !important;
}
#about div.zidx1 h2 {
font-size: 2rem;
}

/* #voice */
#voice {
padding-bottom: 0 !important;
}
#voice article {
flex-direction: column-reverse;
}
#voice #VoiceTxt {
flex-basis: 92%;
width: 92%;
min-width: auto;
margin-right: 8%;
padding-bottom: 60px;
}
#voice #VoiceTxt ul.flex li {
width: 50px;
}
#voice #VoicePho {
flex-basis: 100%;
width: 100%;
margin-bottom: 1em;
}

/* #area */
#area section {
padding: 3em 0 !important;
}
#area .mb70 {
margin-bottom: 2em !important;
}
#area h3 + p {
max-width: 100%;
}

/* #line */
#line {
padding-top: 0 !important;
}
#line figure a {
display: block;
}
#line figure h3 {
font-size: 1.4rem;
padding-left: calc(40px + 1em);
}
#line figure h3::before {
width: 40px;
height: 40px;
}

/* #contact */
#contact h2 {
padding: .5em;
}
#contact h2 em.URW {
font-size: 3rem;
}
#contact h2 strong {
font-size: 2rem;
}
#contact .phone a {
font-size: 3.2rem;
letter-spacing: .05em;
}
#contact .phone small {
font-size: 1.3rem;
}
#contact .more {
font-size: 1.4rem;
}

}