@charset "UTF-8";
:root {
--ink: #3c3a34;
--beige: #faf7f2;
--beige: #f9f7f4;
--khaki: #cbb27e;
--brown: #3b3a35;
--red: #850000;
--bg_gr:#b0c2a7;
--bg_gr2:#c3d5c7;

--radius: 8px;
--shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
/*////Fonts////*/
.zen-old-mincho-regular {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}

.zen-old-mincho-semibold {
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
}

.zen-old-mincho-bold {
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
}


.noto-sans-jp-regular {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

.noto-sans-jp-light {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.noto-sans-jp-semibold {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
.noto-sans-jp-bold {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}




body,html{
background: #fff;
color: var(--ink);
}

h1,h2,h3,h4,h5{
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
}
a{
color: #3c3a34;
transition: 0.3s;
}
a:hover{
opacity: 0.7;
}
.br-sp {
display: none;
}
div,p{
position: relative;
}
@media (max-width: 768px) {
.br-sp {
display: block;
}
}

/*////// HAMBURGER ///////*/
#hamburger {
display: none;
}
.burger-btn{
display: block;
height:15px;
position: absolute;
border: none;
cursor: pointer;
top: 11px;
width: 30px;
left: 4px;
}
.burger-btn .bar{
width: 30px;
height: 1px;
display: block;
position: absolute;
left: 0;
background-color: #585858;
}
.burger-btn .bar_top{
top:0;
transition: 0.3s;
}
.burger-btn .bar_mid{
display: block;
top: 46%;
transition: 0.2s;
}
.burger-btn .bar_bottom{
bottom: 0;
transition: 0.3s;
}

/* MODAL open時 */
#hamburger.menuopen{
position: absolute;
right: 15px;
top: 13px;
}
#hamburger.menuopen .bar{
width: 30px;
height: 1px;  
display: block;
position: absolute;
}    
#hamburger.menuopen .bar_top{
top: 0;
transform: translate(0,7px) rotate(45deg);
}
#hamburger.menuopen .bar_mid{
opacity: 0;
}
#hamburger.menuopen .bar_bottom{
bottom: 0;
transform: translate(0,-7px) rotate(-45deg);
}

#hamburger_cl{
position: absolute;
width: 38px;
height: 36px;
border: none;
right: 15px;
top: 13px;
cursor: pointer;
}
#hamburger_cl .bar{
width: 30px;
height: 1px;  
display: block;
position: absolute;
}    
#hamburger_cl .bar_top{
top: 0;
transform: translate(0,7px) rotate(45deg);
}
#hamburger_cl .bar_bottom{
bottom: 0;
transform: translate(0,-7px) rotate(-45deg);
}


/*////HEADER////*/

#modalmenu{
display: none;
z-index: 50;
background: #fff;
  background: url("../img/noise_bg.gif");
width: 100%;
min-height: 100vh;
position: absolute;
top: 0;
padding:0 0 20px;
}
header#page_header {
width: 100%;
background: #fff;
height: 80px;
position: fixed;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
z-index: 100;
}
header#page_header a {
text-decoration: none;
}
.header_logo {
margin-left: 2.0%;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
font-size: 150%;
line-height: 80px;
}
header#page_header nav {
position: absolute;
right: 1%;
top: 24px;
text-align: right;
}
header#page_header nav li {
display: inline-block;
margin: 0 1.5em 0 0;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
header#page_header nav li.header_contact {
padding: 0 1em;
background: #3c3a34;
color: #fff;
border-radius: 6px;
font-size: 90%;
}
header#page_header nav li.header_contact a {
height: 2.4em;
color: #fff;
line-height: 2.4em;
text-decoration: none;
border-radius: 6px;
}
header#page_header nav li.header_contact:hover {
filter: brightness(1.06);
}

#contents{
padding-top: 80px;
}


@media screen and (max-width:870px){
header#page_header nav {
display: none;
}
.modalmenu_top{
background: #fff;
border-bottom: solid 1px rgba(0,0,0,0.05);
}
#modalmenu a{
text-decoration: none;
}
#hamburger{
display: block;
position: absolute;
width: 38px;
height: 36px;
border: none;
right: 15px;
top: 13px;
cursor: pointer;
z-index: 200;
}
.modal_contents{
padding-top: 40px;
width: 80%;
max-width: 320px;
margin: auto;
text-align: center;
}
.modal_menu li{
line-height:4;
border-bottom: solid 1px rgba(0,0,0,0.1);
}
.modal_contents a{
display: block;
text-decoration: none;
}
.modal_menu li.modal_contact{
line-height: 2.6;
margin-top: 2em;
background: #3c3a34;
color: #fff;
border-radius: 6px;
}
.modal_menu li.modal_contact a{
color: #fff;
}
header#page_header {
height: 60px;
}
.header_logo {
font-size: 130%;
line-height: 60px;
}
.modal_logo{
margin-left: 2.0%;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;
font-size: 130%;
line-height: 60px;
}
.modal_sns {
text-align: center;
margin-top: 3em;
}
.modal_sns li {
font-size: 24px;
display: inline-block;
margin: 0 0.5em 0 0;
}
.modal_sns li svg{
width: 24px;
}

#contents {
    padding-top: 60px;
}
}

/*////// HERO ///////*/
.hero {
position: relative;
width: 100%;
height: 70vh; /* SP/基本は 70vh */
min-height: 320px;
overflow: hidden;
display: grid;
align-content: center;
}
/* PC は「8:5が収まるなら auto 高・そうでなければ 70vh」に相当する高さ */
@media (min-width: 1024px) {
.hero {
height: min(70vh, 60.25vw);
} /* 60.25vw = 8:5 の高さ */
}
#slide{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero img.hero-bg {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
h1.maintitle{
z-index: 5;
font-feature-settings: "palt";
text-align: center;
color: #850000;
font-size: clamp(45px, 70px, 6vw);
line-height: 1.2;
margin-bottom: 35px;
}
p.hero_lead{
text-align: center;
color: #850000;
position: relative;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
font-size: clamp(1rem, 0.5vw + 1rem, 24px); 
z-index: 2;
}
h1.hero_title_sp{
display: none;
}
h1.hero_title_pc{
z-index: 5;
width: 80%;
max-width: 800px;
margin: auto;
}
h1.hero_title_pc svg {
  margin: 20px auto;
}

.glowing-svg {
-webkit-filter: drop-shadow(0px 0px 10px #000); 
filter: drop-shadow(0px 0px 10px #000); 
}

@media (max-width: 740px) {
h1.hero_title_pc{
display: none;
}
h1.hero_title_sp{
display: block;
z-index: 5;
width: 80%;
margin: auto;
}

}
@media (max-width: 500px) {
p.hero_lead{
font-size: 15px; 
}
}
.hero_button {
position: relative;
width: 90%;
max-width: 700px;
margin: 50px auto 0;
display: flex;
justify-content: center;
text-align: center;
z-index: 2;
}
.hero_button a {
height: 3em;
line-height: 2.8em;
font-weight: 600;
text-decoration: none;
border-radius: 10px;
}
.hero-works-button {
width: 12em;
background: #3c3a34;
border: solid 2px #3c3a34;
color: #fff;
margin: 0 0.5em 0 0;
}
.hero-works-button:hover {
filter: brightness(1.06);
}
.hero-contact-button {
width: 12em;
background: rgba(255,255,255,0.8);
color: #3c3a34;
border: solid 2px #3c3a34;
margin: 0 0 0 0.5em;
}
.hero-contact-button:hover {
background: #fff;
filter: brightness(1.06);
}

/*////// TOP LISTED ///////*/
section.listed{
width: 100%;
text-align: center;
/*
display: flex;
justify-content: center;
align-items: center; 
gap: 1em; 
width: fit-content; */
margin: 0 auto;
padding: 2% 0;
}
.listed_icon {
width: 28px;
flex-shrink: 0;  
}
.listed_icon img{
vertical-align: top;
}
section.listed p{
font-size: 75%;
}
.top_company_logo{
display: flex;
align-items: center;
justify-content: center; 
gap: 0.5em; 
text-align: left;
padding: 10px 0 0;
}
.top_company_logo p{
padding-bottom: 0;
font-size: 90%;
}
.top_company_logo p.logo{
width: 3em;
height: auto;
}

@media (max-width:740px){
.top_company_logo{
font-size: 13px;
}
}
@media screen and (max-width:600px){
section.listed{
width: 100%;
display: block;
padding: 20px 10%;
}
.listed_icon {
width: 28px;
margin: auto;
}
section.listed p{
font-size: 11px;
text-align: left;
}
}
@media (max-width:500px){
.top_company_logo p.logo{
width: 4em;
 height: auto;
}
}



/*//////PAGE-HERO ///////*/
.page_hero {
position: relative;
width: 100%;
display: grid;
align-content: center;
text-align: center;
padding: 60px 5%;
background: var(--bg_gr2);
}
.hero-eyebrow {
font-family: "Zen Old Mincho", serif;
font-style: normal;
font-size: 16px;
letter-spacing: .08em;
font-weight: 400;
position: relative;
}
.hero-title {
font-family: "Zen Old Mincho", serif;
font-style: normal;
margin: 0.25em  0 0.5em;
font-size: clamp(40px, 5.5vw, 56px);
line-height: 1.2;
font-weight: 500;
color: #850000;
}
p.hero-lead{
font-weight: 400;
font-size: 16px;
}
@media screen and (max-width:500px){
p.hero-lead{
font-size: 14px;
}
}


/*////// TOP REASON ///////*/
section.reason{
  --band: 36px;
  --accent: #E3B9B9;
 
  position: relative;
width: 100%;
background: var(--bg_gr2);
padding: 80px 5%;
text-align: center;
overflow: hidden;
}
.section_txt{
position: absolute;
pointer-events: none;
font-size: 180px; 
font-size: 18rem; 
text-align: center;
line-height: .7099;
color: #fff;
letter-spacing: -.01em;
top: 0;
left: 0;
right: 0;
margin: auto;
transform: scale(0.9, 1);
z-index: 0;
opacity: 0.2;
font-family: "Poppins", sans-serif;
font-weight: 100;
font-style: normal;
}
@media (max-width:1000px){
.section_txt{
font-size: 100px; 
font-size: 10rem; 
}
}

/* 左サイド帯 */
section.reason::before {/*
  content: "WHY CHOOSE US";
  position: absolute;
  inset: 0 auto 0 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: var(--band);
  height: 100%;
  background: var(--accent);

  color: #fff;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl; 
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;*/
}
.page-id-8 section.reason::before {
  content: none;
  }
@media (max-width: 780px){
  section.reason::before{/*
    content: "";   
    width: 100%; 
    height: 8px; 
    top: 0;
    left: 0;
    background: var(--accent);
    writing-mode: unset;
    display: block;*/
  }
}
.section-head {
position: relative;
font-family: "Zen Old Mincho", serif;
font-style: normal;
}
.section-eyebrow {
margin: 0 0 .25rem;
font-size: 16px;
letter-spacing: .08em;
font-weight: 400;
}
.has-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}
.has-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 3px;
    background-color: #850000;
}
.section-title {
margin: 0.5em  0 ;
font-size: clamp(36px, 4.5vw, 44px);
line-height: 1.2;
font-weight: 500;
color: #850000;
}
p.top_lead{
position: relative;
font-family: "Zen Old Mincho", serif;
font-style: normal;
font-weight: 400;
line-height: 1.75;
font-size: clamp(16px, 2.2vw, 18px);
}
p.top_lead.pb{
padding-bottom: 1.75em;
}
.top_reason_button {
position: relative;
width: 90%;
max-width: 700px;
margin: 30px auto ;
display: flex;
justify-content: center;
text-align: center;
font-size: 0.9rem;
}
.top_reason_button a {
height: 2.4em;
line-height: 2.4em;
font-weight: 400;
text-decoration: none;
text-align: center;
}
.top-link-button {
width: 8em;
background: none;
border: solid 1px var(--ink);
color: var(--ink);
margin: 0 0.5em 0 0;
border-radius: 10px;
}
.top-link-button:hover {
filter: brightness(1.06);
}
.top-contact-button {
position: relative;
width: 8em;
color: var(--ink);
margin: 0 0 0 0.5em;
}
.top-contact-button:hover {
filter: brightness(1.06);
}
.top-contact-button::after {
content: '';
width: 0.5em;
height: 0.5em;
border-top: solid 1px var(--ink);
border-right: solid 1px var(--ink);
position: absolute;
right: 0;
top: 36.5%;
transform: rotate(45deg);
}
.reason_info{
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1120px;
margin: auto;
}
.top_reason_lead{
width: 65%;
text-align: left;
}

.top_reason_lead{
width: fit-content;
margin: auto;
font-size: 110%;
}
.top_reason_lead .item {
display: flex;
align-items: center; 
gap: 0.5em; 
height: 4em;
}
.top_reason_lead .text h5{
font-size: clamp(16px,22px,24px);
font-weight: 400;
line-height: 1.5;
}
.top_reason_lead .text p{
font-size: 0.8rem;
}
.icon svg {
width: 2em; 
height:2em;
display: block; 
}

.top_reason_achievement{
width: 34%;
}
.top_reason_achievement_card{
background: #fff;
border-radius: 16px;
text-align: center;
padding: 25px 0;
border:solid 1px  var(--khaki);
}
.top_reason_achievement_card h4{
color: var(--khaki);
font-size: 54px;
font-weight: 400;
line-height: 1.1;
padding-bottom: 0.2em;
}
.top_reason_achievement_card h3{
font-size: 40px;
font-weight: 400;
line-height: 1.1;
padding-bottom: 0.5em;
}
.top_reason_achievement_card p{
font-size: 0.9rem;
}
.top_reason_pic_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px 0 0;
width: 100%;
max-width:1120px;
margin: auto;
}
.top_reason_pic{
width:32%;
border-radius: 8px;
overflow: hidden;
margin: 0 0;
margin-bottom: 2%;
}
.top_reason_pic img{
vertical-align: bottom;
}

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

.top_reason_achievement_card h4{
font-size: 42px;
font-weight: 400;
}
.top_reason_achievement_card h3{
font-size: 32px;
font-weight: 400;
}
}

@media screen and (max-width:870px){
.reason_info {
display: block;
width: 90%;
margin: auto;
}
.top_reason_achievement{
width: 100%;
max-width: 700px;
margin:40px  auto 0;
}
.top_reason_lead {
width: 100%;
text-align: center;
margin: auto;
}
.top_reason_lead .item {
display: block;
align-items: center;
height: auto;
margin-bottom: 15px;
}
.top_reason_lead .item .icon{
display: block;
margin: auto;
width: 40px;
padding-bottom: 0.25em;
}
.top_reason_lead .item .icon svg{
width: 100%;
height: 100%;
}
.top_reason_lead .text h5 {
padding-bottom: 0.5em;
}

.top_reason_pic_wrap{
width:90%;
}
.top_reason_pic{
width:48%;
margin-bottom: 4%;
}
}

@media screen and (max-width:670px){
.top_reason_pic_wrap{
flex-wrap: wrap;
}
.top_reason_pic{
width:100%;
margin: 0 0;
margin-bottom: 1em;
}
.top_reason_pic img{
vertical-align: bottom;
}
}

@media screen and (max-width:600px){
br.pc_only{
display: none;
}
section.reason{
padding: 50px 5%;
}
p.top_lead{
text-align: justify;
}
}

@media screen and (max-width:500px){
.top_reason_lead {
text-align: left;
}
}



/*////// TOP STORY ///////*/
section.story{
  --band: 36px;
  --accent: #e0eaec;
  
  position: relative;
width: 100%;
text-align: center;
padding: 80px 5%;
  overflow: hidden;
  background: url("../img/noise_bg.gif");
}

.section_txt.story_bg{
line-height: 0.7;
color: #f2f2ed;
writing-mode: vertical-rl;
text-orientation: sideways;
top: 50%;
left: -0.15em;
transform: translateY(-50%) rotate(180deg);
opacity: 0.8;
}
@media (max-width:1000px){
.section_txt.story_bg{
white-space: nowrap;
}
}

/* 左サイド帯 */
section.story::before {/*
  content: "SUCCESS STORIES";
  position: absolute;
  inset: 0 auto 0 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: var(--band);
  height: 100%;
  background: var(--accent);

  color: #96b1b8;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl; 
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;*/
}
.page-id-6 section.story::before {/*
  content: none;*/
  }
@media (max-width: 780px){
  section.story::before{/*
    content: "";   
    width: 100%; 
    height: 8px; 
    top: 0;
    left: 0;
    background: var(--accent);
    writing-mode: unset;
    display: block;*/
  }
}
.story_wrap{
width: 90%;
max-width: 1120px;
display: flex;
justify-content: space-between;
margin: 30px auto 0;
}
.story_card{
width: 32%;
background: var(--beige);
border-radius: 8px;
text-align: center;
padding: 25px 40px;
mix-blend-mode: multiply;
}
.story_card .icon{
margin: auto;
width: 2.2em;
height: 2.2em;
}
.story_card .icon svg{
width: 100%;
height: 100%;
}
.story_card h3{
font-weight: 400;
font-size: clamp(18px,28px,32px);
padding: 0.25em 0;
color: #850000;
}
.story_card p{
font-size: 0.8rem;
}

@media screen and (max-width:870px){
.story_wrap{
width: 100%;
flex-wrap: wrap;
}
.story_card{
width: 100%;
margin-bottom: 25px;
}
.story_card .icon{
margin: auto;
width: 40px;
height: 40px;
}
}
@media screen and (max-width:500px){
.story_card p {
text-align: justify;
}
}


/*////// TOP SERVICE ///////*/
section.service{
  --band: 36px;
  --accent: #E3B9B9;
  position: relative;
  width: 100%;
  background: var(--bg_gr2);
  padding: 80px 5%;
  text-align: center;
  overflow: hidden;
}
.page-id-6 section.service::before {
  content: none;
}

section.service.service-page{
  background: url("../img/noise_bg.gif");
}
.section_txt.service_page_bg{
color: #f2f2ed;
}
section.service.service-page .section_txt.service_bg {
    color: #f2f2ed;
    opacity: 0.8;
}
.service_wrap{
width: 90%;
max-width: 1120px;
display: flex;
justify-content: space-between;
margin: 30px auto 0;
}
.service_card{
width: 28%;
text-align: center;
}
.service_card .icon{
margin: auto;
width: 2.2em;
height: 2.2em;
}
.service_card .icon svg{
width: 100%;
height: 100%;
}
.service_card h3{
font-weight: 400;
font-size: clamp(18px,28px,32px);
padding: 0.25em 0;
color: #850000;
}
.service_card p{
font-size: 0.8rem;
}
.service_card ul{
width: fit-content;
margin: 20px auto 0;
}
.service_card li{
text-align: left;
font-size: 0.75rem;
}
.top_service_pic_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px 0 0;
width: 90%;
max-width: 1200px;
margin: auto;
}
.top_service_pic{
width:15%;
border-radius: 8px;
overflow: hidden;
margin: 0 0;
}
.top_service_pic img{
vertical-align: bottom;
}

@media screen and (max-width:870px){
.service_wrap{
flex-wrap: wrap;
}
.service_card{
width: 100%;
max-width: 400px;
margin: auto;
text-align: center;
margin-bottom: 40px;
}
.service_card .icon{
margin: auto;
width: 40px;
height: 40px;
}
.top_service_pic{
width:30%;
margin: 0 0;
margin-bottom: 5%;
}
}



/*////// TOP WORKS ///////*/
section.section-works{
padding: 80px 0;
background: url("../img/top_works_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
}

.section_txt.works_bg{
line-height: 0.7;
color: #f2f2ed;
writing-mode: vertical-rl;
text-orientation: sideways;
top: 50%;
left: -0.15em;
transform: translateY(-50%) rotate(180deg);
opacity: 0.8;
}
.section-works .section-head{
text-align: center;
}
.section-works p.top_lead{
text-align: center;
}
li{
list-style-type: none;
}
.carousel {
position: relative;
padding: 20px 0 80px;
/* 可読性UPのためのカスタムプロパティ（任意で調整可） */
--gap: 20px;
--pad: 16px;
}
.carousel .track {
display: flex;
gap: var(--gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--pad);
padding-inline: var(--pad);
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
.carousel .track::-webkit-scrollbar {
display: none;
}
.carousel .card {
/* アーカイブなどのデフォルト：可変幅 */
flex: 0 0 300px;
scroll-snap-align: start;
scroll-snap-stop: always;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.carousel .card img{
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 960px) {
.carousel .card {
flex-basis: 300px
}
}
/* 矢印 */
.carousel .nav {
position: absolute;
bottom: 18px;
width: 36px;
height: 36px;
border-radius: 5px;
background: #f7f7f7;
display: grid;
place-items: center;
padding: 0;
line-height: 0;
border: solid 1px rgba(0,0,0,0.2);
}
.carousel .nav.prev {
right: 60px;
}
.carousel .nav.next {
right: .5rem;
}
.carousel .nav svg {
width: 18px;
height: 18px;
display: block;
}
.carousel .nav:disabled svg {
opacity: 0.5;
}
/* ============ Indicators（ドット/進捗） ============ */
.carousel .dots {
display: flex;
gap: 4px;
align-items: center;
margin-top: 38px;
margin-left: 2rem;
width: 60%;
position: absolute;
}
.carousel .dots button {
width: 6px;
height: 6px;
border: 0;
border-radius: 999px;
background: #c9ccd3;
padding: 0;
margin: 0 3px;
}
/* スマホ時のドット */
.carousel .dots .dot {
width: 6px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: #e2e5ea;
display: inline-block;
vertical-align: middle;
margin: 0 3px;
}
.carousel .dots .dot[aria-current="true"] {
background: #707d9b;
transition: transform .2s ease;
}
.carousel .dots button[aria-current="true"] {
opacity: 1;
background: #8b94a6;
}
/* 多件数時の進捗バー＋分数 */
.carousel .dots .progress {
width: 80px;
height: 3px;
border-radius: 999px;
background: #e2e5ea;
overflow: hidden;
}
.carousel .dots .progress .fill {
height: 100%;
width: 0%;
background: #8b94a6;
}
.carousel .dots .counter {
font-size: 12px;
color: #8b94a6;
margin-left: 8px;
}
@media screen and (max-width:870px){
.section-works p.top_lead {
width: 90%;
margin: auto;
text-align: left;
}
}


/*////// FLOW ///////*/
.section-flow {
position: relative;
background: #fff;
padding: clamp(40px, 6vw, 80px) 0;
overflow: hidden;
/*
background: #f4f7f8;*/
  background: url("../img/noise_bg.gif");
}
.section_txt.process_bg{
color: #f2f2ed;
opacity: 0.8;
}


.page-id-10 .section-flow {
}
.section-flow h2{
margin-left: -0.2em;
}
.section-flow .top_reason_button{
position: relative;
width: 100%;
margin: 0;
display: flex;
justify-content: flex-start;
}

/* レイアウト */
.flow-grid {
width: min(1120px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr; /* SP */
gap: clamp(20px, 4vw, 40px);
}
@media (min-width: 1024px) {
.flow-grid {
grid-template-columns: 0.8fr 1fr;
align-items: start;
}
}
header.flow-head {
background: none;
border-bottom: none;
position: relative;
}

header.flow-head .flow-eyebrow {
margin: 0 0 .25rem;
font-size: 16px;
letter-spacing: .08em;
}
header.flow-head .flow-title {
margin: 0 0 .75rem;
font-size: clamp(30px, 4vw, 48px);
font-weight: 500;
}
header.flow-head .flow-lead {
margin: 0;
line-height: 1.9;
}
/* ===== ステップ（縦タイムライン） ===== */
.flow-steps {
position: relative;
list-style: none;
padding: 0;
margin: 0;
}
/* 各ステップ行 */
.flow-step {
display: grid;
grid-template-columns: 56px 1fr; /* 丸＋本文 */
gap: 16px;
align-items: start;
padding: clamp(14px, 2.5vw, 20px) 0;
}
.step-num {
width: 44px;
height: 44px;
border-radius: 999px;
border: 3px solid var(--ink);
font-weight: 700;
display: grid;
place-items: center;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.step-title {
margin: 0 0 6px;
font-weight: 400;
font-size: clamp(16px, 28px, 32px);
}
.step-text {
margin: 0;
line-height: 1.9;
}
/* 親の全長ラインは使わない */
.flow-steps::before {
content: none;
}
/* 円サイズや位置は変数にしておくと微調整しやすい */
.flow-steps {
--num: 44px; /* 丸数字の直径 */
--rail-x: 22px; /* レールのX位置（丸の中心） */
--gap: 24px; /* 丸の下に空ける余白 */
}
/* 各ステップの“下側だけ”にレールを引く（最後は引かない） */
.flow-step {
position: relative;
}
.flow-step:not(:last-child)::after {
content: "";
position: absolute;
left: var(--rail-x);
top: calc(var(--num) + var(--gap)); /* 丸の直下から */
bottom: 0; /* 行の終わりまで */
width: 0;
border-left: 2px solid #cfd5e0;
opacity: .9;
}
/* 既存の円・本文まわりはそのまま */
.flow-step {
display: grid;
grid-template-columns: 56px 1fr; /* 丸 + 本文 */
gap: 16px;
align-items: start;
padding: clamp(14px, 1.5vw, 15px) 0;
}
.step-num {
width: var(--num);
height: var(--num);
border-radius: 999px;
border: 3px solid var(--ink);
font-weight: 700;
display: grid;
place-items: center;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}


/*////// FAQs ///////*/
.section-faqs {
padding: clamp(40px, 6vw, 80px) 0;
background: var(--bg_gr2);
position: relative;
}
.section_txt.faqs_bg{
line-height: 0.7;
font-size: 160px;
font-size: 16rem;
color: #fff;
writing-mode: vertical-rl;
text-orientation: sideways;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(180deg) scale(1, 0.85);
}

@media (max-width:1000px){
.section_txt.faqs_bg{
font-size: 100px; 
font-size: 10rem; 
}
}
.faqs_wrap {
width: 90%;
max-width: 1120px;
margin:auto;
}
.faqs-title {  
font-size: clamp(20px, 2.4vw, 32px);
font-weight: 400;
margin: 0;
padding-bottom: 40px;
}
.faq_thread{
position: relative;
padding: 20px 0;
border-top: solid 1px rgba(0,0,0,0.1);
}
.faq_thread:last-child{
border-bottom: solid 1px rgba(0,0,0,0.1);
}


.faq_thread::after{
content: '';
width: 0.6em;
height: 0.6em;
border-top: solid 2px var(--ink);
border-right: solid 2px var(--ink);
position: absolute;
right: 0;
top: 36.5%;
transform: rotate(135deg);
transition: 0.3s;
}

.faq_thread.active::after{
transform: rotate(-45deg);
top: 24%;
}
.faq_thread h3{
cursor: pointer;
max-width: 90%;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
.faq_a {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
}
.faq_a> p {
padding-top: 1.5rem;
margin: 0px;
}


/*////// NEWS TOP ///////*/

section.section-news{
position: relative;
padding: clamp(40px, 6vw, 80px) 0;
overflow: hidden;
margin-bottom: 40px;
}
section.section-news .section-head{
width: 90%;
margin: 0 auto 30px;
position: relative;
}
section.section-news .section-head .section-title{
margin: 0.25em 0;
}
section.section-news .section-head p{
font-size: 0.9rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}
.news_btn_btm{
display: none;
}
section.section-news .section-head a.top-link-button{
height: 2.4em;
line-height: 2.2em;
font-weight: 400;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.9rem;
}
.news-head .news-lead {
margin: 0;
line-height: 1.9;
}
.carousel.section-news {
--gap: 24px;
--pad: 16px;
}
.carousel.section-news .track {
gap: var(--gap);
padding-inline: var(--pad);
margin-bottom: 30px;
}
/* 基本：3枚 */
.carousel.section-news .card {
flex: 0 0 30%;
scroll-snap-align: start;
background: #fff;
border-radius: 8px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.075);
padding: 10px 20px 20px;
}

.carousel.section-news .card h5{
font-size: clamp(16px,22px,24px);
font-weight: 400;
padding: 0.5em 0;
}
.carousel.section-news .card p{
font-size: 0.8rem;
}
.carousel.section-news .card p.category{
display: inline-block;
padding: 0 0.5em;
border: solid 1px rgba(0,0,0,0.3);
background: #f7f7f7;
font-size: 0.65rem;
border-radius: 3px;
font-weight: 600;
line-height: 1.8em;
}
.excerpt{
padding-bottom: 20px;
}
.carousel.section-news .card a{
text-decoration: none;
}
.carousel.section-news .dots {
margin-top: 10px;
}

/* 740px以下：1枚 */
@media (max-width: 740px) {
.carousel.section-news .card {
flex-basis: 100%;
}
}
@media screen and (max-width:600px){
section.section-news {
padding-bottom: 90px;
}
.carousel.section-news .nav {
bottom: 60px;
}
section.section-news .section-head a.top-link-button{
display: none;
}
.news_btn_btm{
display: block;
}
.news_btn_btm a.top-link-button{
height: 2.4em;
line-height: 2.2em;
font-weight: 400;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.9rem;
}
}

/*////// CTA ///////*/
.section-cta {
position: relative;
background: var(--brown);
width: 100%;
padding: clamp(40px, 6vw, 80px) 5%;
text-align: center;
}
.cta-head{
color: #fff;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
padding-bottom: 30px;
}
.cta-title{
margin: 0 0 20px  0 ;
font-size: clamp(30px, 4vw, 40px);
line-height: 1.2;
font-weight: 400;
}
.cta-eyebrow{
font-size: 12px;
letter-spacing: .08em;
}
p.cta_lead{
color: #fff;
}
.cta_card{
width: 100%;
max-width: 900px;
margin:40px auto 0;
background: #fff;
border-radius: 10px;
padding: 40px 20px;
display: grid;
grid-template-columns: 1fr 320px; 
gap: 40px;
align-items: center;
}

/* タイトル */
.cta_card_title {
font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
line-height: 1.3;
margin: 0 0 16px;
font-weight: 400;
}

/* 箇条書き（チェックアイコン） */
.cta_card_list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
width: fit-content;
margin: auto;
}
.cta_card_list li {
position: relative;
padding-left: 1.6em;
text-align: left;
}
.cta_card_list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.05em;
font-weight: 700;
color: #d8bf8b; /* 画像のベージュ寄り */
}

/* 右側ボタン群 */
.cta_actions {
display: grid;
gap: 20px;
justify-items: stretch;
padding: 0 30px;
}
.cta_actions .btn {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 56px;
padding: 12px 20px;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
}

/* 塗りボタン */
.btn-primary {
background: var(--khaki);
color: #fff;
}
.btn-primary:hover { filter: brightness(0.95); }

/* アウトラインボタン */
.btn-outline {
background: #fff;
color: var(--ink);
border: 1.5px solid var(--ink);
}
.btn-outline:hover {
background:var(--ink);
color: #fff;
}

/* SPで縦積み */
@media (max-width: 768px) {
.cta_card {
grid-template-columns: 1fr;
padding: 28px;
gap: 24px;
}
}
@media screen and (max-width:600px){
p.cta_lead {
text-align: left;
}
}

/*////// FOOTER ///////*/
footer{
padding: 80px 0;
}
footer a{
text-decoration: none;
}
.footer_wrap{
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
}
.footer_info{
width: 20%;
}
.footer_logo{
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
font-size: 140%;
line-height: 1.5;
padding-bottom: 20px;
}
.footer_info p{
font-size: 0.8rem;
margin-bottom: 20px;
}
.footer_sns li {
font-size: 22px;
display: inline-block;
margin: 0 0.5em 0 0;
}
.footer_sns li svg{
width: 22px;
}
nav.sitemap{
width:80%;
font-size:0.9rem;
padding-top: 5px;
}
.sitemap-cols {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px 30px;
grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
justify-content: end;
align-items: start; 
}

.sitemap-cols .col { display: grid; gap: 5px; }

.sitemap-cols .head {
font-weight: 600;
text-decoration: none;
display: inline-block;
}

.sitemap-cols .sub {
list-style: none;
margin: 0;
padding: 0;
display: grid;
opacity: .9;
line-height: 1.7;
}

.sitemap-cols .sub a { text-decoration: none; }

footer .copyright{
width: 90%;
margin: auto;
border-top: solid 1px rgba(0,0,0,0.2);
padding-top: 15px;
margin-top: 50px;
font-family: Arial, Helvetica, "sans-serif";
position: relative;
display: flex;
justify-content: space-between;
}
footer .copyright a{
text-align: right;
font-size: 0.80rem;
text-decoration: underline;
}

@media screen and (max-width:1050px){
footer {
padding: 50px 0;
}
.footer_wrap {
display: block; 
}
.footer_info {
width: 100%;
padding-bottom: 30px
}
nav.sitemap {
width: 100%;
}
.sitemap-cols {
justify-content: start;
}
.sitemap-cols .col {
padding-bottom: 25px;
}
}
@media (max-width: 600px) {
footer .copyright {
flex-wrap: wrap;         /* 折り返し */
justify-content: center; /* 全体センター */
}
footer .copyright small,
footer .copyright a {
text-align: center;
flex: 0 0 100%;
margin: 5px 0; 
}
}


/*////// PHILOSOPHY ///////*/


.section-noise{
  background: url("../img/noise_bg.gif");
}

section.philosophy{
width: 90%;
max-width: 900px;
margin:auto;
padding: clamp(30px, 4vw, 60px) 0;
text-align: left;

}
section.philosophy h2{
font-size: clamp(36px, 4.5vw, 44px);
line-height: 1.2;
font-weight: 500;
padding-bottom: 1em;
}
section.philosophy h3{
font-size:28px;
font-weight: 400;
line-height: 1.5;
padding-bottom: 1em;
}
section.philosophy p{
padding-bottom: 1.5em;
}
@media screen and (max-width:870px){
section.philosophy .top_reason_pic:nth-child(3){
display: none;
}
}

@media screen and (max-width:780px){
section.philosophy h3{
font-size:24px;
}
section.philosophy p{
font-size: 14px;
}
}


/*////// COMPANY ///////*/

section.company{
width: 100%;
text-align: center;
padding: clamp(40px, 5vw, 60px) 0;
}
.company_wrap{
width: 90%;
max-width: 900px;
margin: auto;
}
.company_wrap p{
padding-bottom: 1.5em;
}
@media screen and (max-width:780px){
.company_wrap p{
text-align: left;
font-size: 14px;
}
}


/*////// SERVICE ///////*/
section.field{
width: 100%;
background: var(--bg_gr2);
padding: 80px 5%;
position: relative;
}
.field_bg{
line-height: 0.7;
color: #f2f2ed;
writing-mode: vertical-rl;
text-orientation: sideways;
white-space: nowrap;
top: 50%;
left: -0.15em;
transform: translateY(-50%) rotate(180deg);
}
.field_wrap{
width: 100%;
max-width: 1120px;
margin: auto;
}
.field_work{
display: grid;
grid-template-columns: 1fr 1.25fr;
grid-template-areas: "text pic";
align-items: stretch;
gap: 40px;
width: 90%;
margin: auto;
padding: 40px 0 0;
}

/* 領域割り当て */
.field_text{ grid-area: text; display:flex; flex-direction:column; justify-content:center; }
.field_pic { grid-area: pic;  height: 380px; border-radius: 8px; overflow: hidden; }

/* 画像を確実にフィットさせる */
.field_pic > a{ display:block; height:100%; }
.field_pic img{ width:100%; height:100%; object-fit:cover; display:block; }


.field_work h3{
font-size: clamp(34px,3.6vw,40px);
font-weight: 400;
padding-bottom: 1em;
}

.field_work2{
grid-template-columns: 1.25fr 1fr;   /* 左を広く、右を狭く */
grid-template-areas: "pic text";     /* 並びを反転 */
}

.field_pic{ height: clamp(240px, 40vw, 380px); }
.field_pic img{
height:100%;
width:100%;
object-fit: cover;
}


a.field_link{
position: relative;
height: 2.4em;
line-height: 2.4em;
font-weight: 400;
text-decoration: none;
/*width:8em;*/
color: var(--ink);
display: inline-block;
margin-top: 30px;
}
a.field_link::after {
content: '';
width: 0.5em;
height: 0.5em;
border-top: solid 1px var(--ink);
border-right: solid 1px var(--ink);
position: absolute;
right: -1em;
top: 36.5%;
transform: rotate(45deg);
}

.field_work2 .field_text{
text-align: right;
}
.field_work2 a.field_link{
padding-right: 1.5em;
/*width:9em;*/
}
.field_work2 a.field_link::after {
right: 0.5em;
}

.section_txt.story_page_bg{
color: #f2f2ed;
opacity: 0.8;
}

.section_txt.process_page_bg{
color: #f2f2ed;
opacity: 0.8;
line-height: 0.7;
writing-mode: vertical-rl;
text-orientation: sideways;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(180deg) scale(1, 0.85);
}

/*
@media (max-width: 870px){
.field_work{
width: 100%;
grid-template-columns: 1fr;
grid-template-areas:
"pic"
"text";
gap: 24px;
}
.field_text {
}

.field_work h3{
padding-bottom: 0.5em;
}

a.field_link{
margin-top: 10px;
}
.field_work2 .field_text{
text-align: left;
}
.field_work2 a.field_link{
padding-right: 0;
width:8em;
}
}

*/


/* ========== スマホ（重ね表示） ========== */
@media (max-width: 870px){
  /* 行レイアウト → 重ねレイアウトへ */
  .field_work{
    display:block; 
    position:relative;
    width:100%;
    margin:auto;
    padding:0;
    overflow:hidden;
    border-radius: 8px;
	margin-top: 20px;
  }

  /* 写真はそのまま先頭に表示（高さは任意で調整） */
  .field_pic{
    height: clamp(220px, 40vw, 400px);
    border-radius: 0;
  }
  .field_pic > a{ display:block; height:100%; pointer-events:none; }
  .field_pic img{ width:100%; height:100%; object-fit:cover; opacity:.3; }

  /* 文字を上に重ねる */
  .field_text{
    position:absolute;
    inset: 16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#111;
    z-index:2;
  }
  
.field_work h3{
padding-bottom: 0.5em;
}

a.field_link{
margin-top: 15px;
}
  }


/*///////WORKS LIST///////////*/

.section-archive{
  background: url("../img/noise_bg.gif");
  overflow: hidden;
  position: relative;
}
.work-list{
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.work-list::after{
content: '';
display: block;
width: 33%;
}
.work-item{
width: 32%;
margin-bottom: 3%;
}
.work-item a{
text-decoration: none;
}
.work_pic{
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
}
.work_pic img{
width: 100%;
height: 100%;
object-fit: cover;
}
.work-item h3{
font-feature-settings: "palt";
letter-spacing: -0.025em;
font-size: 20px;
line-height: 1.2;
padding: 20px 0 5px;
}
.work-item p.subtitle{
padding-bottom: 15px;
}
.work-cat a{
text-align: center;
font-size: 80%;
display: inline-block;
height: 2.0em;
line-height: 2.0em;
font-weight: 400;
text-decoration: none;
border-radius: 5px;
margin: 0 0.5em 0 0;
width: 6em;
background: #f1f1ef;
border: solid 1px #54534f;
}
p.work_link{
font-size: 85%;
position: relative;
color: var(--ink);
margin: 15px 0;
width: 10em;
}
p.work_link a{
display: inline-block;
width: 10em;
}
p.work_link a:hover {
filter: brightness(1.06);
}
p.work_link a::after {
content: '';
width: 0.5em;
height: 0.5em;
border-top: solid 1px var(--ink);
border-right: solid 1px var(--ink);
position: absolute;
right: 0;
top: 36.5%;
transform: rotate(45deg);
}


.archive_button{
padding: 60px 0;
text-align: center;
}
.archive_button a{
display: inline-block;
height: 2.6em;
line-height: 2.4em;
font-weight: 400;
text-decoration: none;
border-radius: 10px;
margin: 0 0.5em;
}
.archive_button_on {
width: 6em;
background: #3c3a34;
border: solid 1px #3c3a34;
color: #fff;
margin: 0 0.5em 0 0;
}
.archive_button_off {
width: 6em;
background: rgba(255,255,255,0.5);
color: #3c3a34;
border: solid 1px #3c3a34;
margin: 0 0 0 0.5em;
}
.archive_button_off:hover {
background: #3c3a34;
color: #fff;
opacity: 1;
}
.single_button_off{
width: 12em;
background: rgba(255,255,255,0.5);
color: #3c3a34;
border: solid 1px #3c3a34;
margin: 0 0 0 0.5em;
}
.single_button_off:hover {
background: #3c3a34;
color: #fff;
opacity: 1;
}

.work_chap{
width: 90%;
max-width: 1120px;
padding: 80px 0;
margin: auto;
}
.work_chap h2{
font-size: clamp(36px, 4.5vw, 44px);
line-height: 1.2;
font-weight: 500;
padding-bottom: 1em;
}
.work_chap h3.work_chap_sub{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 120%;
padding-bottom: 1em;
}
.work_icons{
display: grid;
grid-template-columns: repeat(4, 1fr) ;
gap:30px;
margin: 40px 0;
}
.work_icon h4{
font-size: clamp(18px,2.2vw,24px);
font-weight: 400;
}
.work_icon .icon{
margin: auto;
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.work_icon .icon svg{
width: 100%;
height: 100%;
}


@media screen and (max-width:1200px){
.work-item{
width: 48%;
}
}
@media screen and (max-width:768px){
.work-item{
width: 100%;
}
}
@media screen and (max-width:600px){
.work_icons{
grid-template-columns: 1fr 1fr;
gap:30px;
margin: 40px 0 20px;
}
}


/*///////WORKS SINGLE///////////*/

.single_hero{
width: 100%;
height: 300px;
overflow: hidden;
}
.single_hero img{
height: 100%;
width: 100%;
object-fit: cover;
}
.single_head{
width: 90%;
max-width: 1120px;
margin: auto;
padding: clamp(40px, 5vw, 60px) 0 20px;
border-bottom: solid 4px var(--beige);
}
.single_head h1{
font-size: clamp(45px, 56px, 65px);
line-height: 1.2;
margin-bottom: 0.5em;
}
.single_head p.subtitle{
font-size: 110%;
padding-bottom: 1em;
}
.single_meta{
margin: 70px 0 10px;
display: grid;
grid-template-columns: repeat(4, 1fr) ;
gap:30px;
}
.single_meta div p{
font-size: 90%;
word-break: break-all;
}

.single_head .work-cat a{
font-size: 90%;
}
section.single_story{
padding: clamp(40px, 5vw, 60px) 0;
background: var(--bg_gr2);
}
.single_story_wrap{
width: 90%;
max-width: 1120px;
margin: auto;
}
.single_story_wrap h3{
font-weight: 400;
font-size: clamp(24px, 34px, 40px);
}
.single_story_wrap h4{
font-weight: 400;
font-size: clamp(18px,26px,30px);
margin-top: 30px;
padding-bottom: 0.5em;
}
.single_story_wrap h5{
font-weight: 400;
font-size: clamp(16px,22px,24px);
padding: 0.25em 0;
}
.single_story_wrap p{
padding-bottom: 1.5em;
}
section.single_voice{
padding: clamp(40px, 5vw, 60px) 0;
}
section.single_voice h2{
font-size: clamp(32px, 3.8vw, 40px);
font-weight: 400;
text-align: center;
padding-bottom: 50px;
}
.voice_wrap{
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-areas: "pic text";
align-items: stretch;
gap: 50px;
width: 90%;
max-width: 900px;
margin: auto;
margin-bottom: 50px;
}
.voice_avatar { grid-area: pic; }
.voice_text { grid-area: text; }
.voice_text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.voice_text h4{
font-size: clamp(18px,24px,28px);
padding-bottom: 20px;
font-weight: 400;
}
p.voice_name{
font-weight: 400;
font-size: 140%;
}
.voice_profile{
font-size: 95%;
text-align: justify;
padding-top: 1.5em;
}
.voice_interview{
width: 90%;
max-width: 900px;
margin: auto;
}
.voice_interview h5.voice_q{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
color: #850000;
font-size: 100%;
padding-bottom: 1em;
}
.voice_interview p.voice_a{
font-size: 100%;
padding-bottom: 2em;
}
section.work_single_pics{
padding: clamp(40px, 5vw, 60px) 0;
}
section.work_single_pics h2{
font-size: clamp(32px, 3.8vw, 40px);
font-weight: 400;
text-align: center;
padding-bottom: 50px;
}
.single_pics_wrap{
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
flex-wrap: wrap;
gap:6px;
}
.single_pics_box{
width: 32%;
border-radius: 5px;
overflow: hidden;
}
.single_pics_box img{
width: 100%;
height: 100%;
object-fit: cover;
}
section.category_list{
padding: clamp(40px, 5vw, 60px) 0;
}
section.category_list h2{
font-size: clamp(32px, 3.8vw, 40px);
font-weight: 400;
text-align: center;
padding-bottom: 50px;
}
.related-works_list{
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.related-works_list::after{
content: '';
display: block;
width: 33%;
}
@media screen and (max-width:870px){
.single_pics_box{
width: 48%;
}
}
@media screen and (max-width:600px){
.single_meta{
grid-template-columns: 1fr 1fr;
gap:30px;
}
.voice_wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "pic";
    gap: 24px;
}
.single_pics_box{
width: 100%;
}
}


/*///////PAGE GENERAL///////////*/

.page_area {
width: 100%;
max-width: 700px;
margin: auto;
}
.page_area h1{
font-feature-settings: "palt";
text-align: left;
color: #850000;
font-size: 36px;
line-height: 1.4;
margin-bottom: 35px;
}
.page_area p{
padding-bottom: 1.5em;
}


/*///////CONTACT///////////*/

.section-contact{
  position: relative;
width: 100%;
padding: 80px 5%;
  background: url("../img/noise_bg.gif");
  border-bottom: solid 1px rgba(0,0,0,0.1);
}
.wpcf7 form .contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  width: 90%;
  max-width: 800px;
  margin:80px auto 30px;
}
.wpcf7 form .contact-grid .contact_half{ grid-column: span 1; }
.wpcf7 form .contact-grid .contact_full{ grid-column: 1 / -1; }

@media (max-width: 768px){
  .wpcf7 form .contact-grid{ grid-template-columns: 1fr; }
  .wpcf7 form .contact-grid .contact_half{ grid-column: 1 / -1; }
}

/* ===== ラベル ===== */
.wpcf7 form .contact-grid .contact_half span.title,
.wpcf7 form .contact-grid .contact_full span.title{
  display:inline-block;
  font-size: 14px;
  line-height: 1.4;
  color:#333;
  margin: 2px 0 2px;
}
.wpcf7 form .contact-grid span.red{ 
color:#c33; 
font-weight: bold; 
  font-size: 20px;
}

/* ===== 共通の入力 ===== */
.wpcf7 form .contact-grid input[type="text"],
.wpcf7 form .contact-grid input[type="email"],
.wpcf7 form .contact-grid input[type="tel"],
.wpcf7 form .contact-grid textarea{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 4px;
  font-size: 16px;
  line-height: 1.6;
  border: none;
  border-bottom: 1px solid #aaa; 
  background: transparent;
  outline: none;
  transition: border-color .2s;
}
.wpcf7 form .contact-grid textarea{
  min-height: 140px;
  resize: vertical;
}

/* フォーカス時 */
.wpcf7 form .contact-grid input:focus,
.wpcf7 form .contact-grid textarea:focus{
  border-color: #000;
}

/* ===== チェックボックス（同意） ===== */
.wpcf7 form .contact-grid .acceptance{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 14px;
  color:#333;
}
.wpcf7 form .contact-grid .acceptance input[type="checkbox"]{
  width: 18px; height: 18px;
  margin: 0;
}

/* ===== 送信ボタン ===== */
.wpcf7 form .contact-grid .submit{ margin: 16px 0 0; }
.wpcf7 form .contact-grid .submit input[type="submit"]{
  width: 100%;
  border: none;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  background:#3a342b; 
  color:#fff;
  cursor: pointer;
  transition: opacity .2s, transform .05s;
}
.wpcf7 form .contact-grid .submit input[type="submit"]:hover{ opacity:0.9; }
.wpcf7 form .contact-grid .submit input[type="submit"]:active{ transform:translateY(1px); }

/* pタグ余白を消す */
.wpcf7 form .contact-grid p.submit{ 
margin: 20px auto 0;
width: 300px;
}




/*////// NEWS LIST ///////*/

section.news_list{
position: relative;
padding: clamp(40px, 6vw, 80px) 0;
overflow: hidden;
margin-bottom: 40px;
}
.news_wrap{
width: 90%;
max-width: 1120px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news_wrap::after{
content: '';
display: block;
width: 32%;
}
.news_wrap .card{
width: 32%;
background: #fff;
border-radius: 8px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.075);
padding: 10px 20px 20px;
margin-bottom: 3%;
}
.news_wrap .card h5{
font-size: clamp(16px,22px,24px);
font-weight: 400;
padding: 0.5em 0;
}
.news_wrap .card p{
font-size: 0.8rem;
}
.news_wrap .card p.category{
display: inline-block;
padding: 0 0.5em;
border: solid 1px rgba(0,0,0,0.3);
background: #f7f7f7;
font-size: 0.65rem;
border-radius: 3px;
font-weight: 600;
line-height: 1.8em;
}
.news_wrap .card a{
text-decoration: none;
}

/* 740px以下：1枚 */
@media (max-width: 740px) {
.news_wrap .card .card {
flex-basis: 100%;
}
}



/*////// NEWS SINGLE ///////*/

section.news_single{
position: relative;
padding: clamp(40px, 6vw, 80px) 0;
overflow: hidden;
margin-bottom: 40px;
}
.news_article{
width: 90%;
max-width: 900px;
margin: auto;
text-align: left;
}
.news_article h1{
    font-size: clamp(30px, 4vw, 40px);
font-weight: 400;
padding: 0.2em 0 0.1em 0;
}
.news_article p.category{
display: inline-block;
padding: 0 0.5em;
border: solid 1px rgba(0,0,0,0.3);
background: #f7f7f7;
font-size: 0.8rem;
border-radius: 3px;
font-weight: 600;
line-height: 1.8em;
}
.news_article p.date{
font-size: 95%;
padding-bottom: 40px;
}
.single_content p{
padding-bottom: 1.5em;
}

.pagenation{
font-size: 95%;
width: 100%;
margin-top: 80px;
padding-top: 1em;
border-top: solid 1px rgba(0,0,0,0.2);
display: flex;
justify-content: space-between;
}

@media (max-width: 740px) {
.pagenation{
display: block;
}
.prev_link{
margin-bottom: 0.5em;
}
}