:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;         /* 洗練された黒 */
--color-muted: #888888;        /* グレイ系補助色 */
--color-accent-red: #dc0000;   /* イチゴの赤（甘酸っぱい感じ） */
--color-accent-green: #28b463; /* ヘタのような深めの緑 */
}


*, *::before, *::after {
  box-sizing: border-box;
}
html {
font-size: 16px;
}

/* 基本のマージン・パディング調整 */
body, h1, h2, h3, h4, h5, h6, p, figure {
margin: 0;
padding: 0;
}

/* リストのデフォルトスタイルを削除 */
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}

/* 画像の余白を消して、レスポンシブ対応 */
img {
max-width: 100%;
height: auto;
display: block;
}

/* ボタンの標準スタイルを調整 */
button {
background: none;
border: none;
cursor: pointer;
}

/* フォーム要素のリセット */
input, textarea, select {
font: inherit;
border: none;
outline: none;
}

/* aタグのデフォルト装飾を削除 */
a {
text-decoration: none;
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
a:hover,
a img:hover {
transition: .3s;
}
}

@media (min-width:601px) {
a[href^="tel:"] {
pointer-events: none;
color: inherit;
}
}


body {
font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "sans-serif";
overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
background: #fafafa;
overflow-x: hidden;
font-size: clamp(15px, 1.2vw, 18px);
}
body {font-size: clamp(1rem, 4vw, 1rem); /* 画面のサイズに応じて動き、最小1rem、最大2rem */}
h1 {font-size: clamp(2rem, 6vw, 3rem);}
h2 {font-size: clamp(1.5rem, 5vw, 2rem);}
h3 {font-size: clamp(1.375rem, 6vw, 1.5rem);}
h4 {font-size: clamp(1.25rem, 5vw, 1.5rem);}
h5 {font-size: clamp(1.125rem, 6vw, 1.25rem);}
h6 {font-size: clamp(1.125rem, 5vw, 1.25rem);}
p {font-size: clamp(0.937rem, 3vw, 1rem);}

@media (max-width: 834px) {
body {font-size: clamp(1rem, 5vw, 1rem); /* タブレット用 */}
}
@media (max-width: 600px) {
body {font-size: clamp(1rem, 6vw, 1.2rem); /* スマホ用 */}
}
h1{
margin: 0 auto 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
line-height: 1;
letter-spacing: 1em;
}

body{
animation: name 1s ease-in 0.1s both;
transform-origin: center top;
}
@keyframes name{
0%{ opacity: 0; }
100%{ opacity: 1; }
}

a{color: var(--color-accent-red);}
a:hover{color: var(--color-accent-green);}

header.gm-navbar{
position: fixed;
top: 0;
width: 100%;
font-weight: 600;
}

.site{
padding-top: 100px;
}

.site-footer{
grid-column:1 / 3;
grid-row:3 / 4;
}
.text-center{text-align: center;}
.text-md-center{text-align: center;}
.text-end{text-align: right;}

.mb-1{margin-bottom: .5rem;}
.mb-2{margin-bottom: 1rem;}
.mb-3{margin-bottom: 1.5rem;}
.mb-4{margin-bottom: 2rem;}
.mb-5{margin-bottom: 2.5rem;}
.mb-6{margin-bottom: 3rem;}
.mb-7{margin-bottom: 3.5rem;}
.mb-8{margin-bottom: 4rem;}

.d-block{
display: block;
}
.mx-auto{
margin: 0 auto;
}
.container{
width: 1200px;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.vw-100{
width: calc(100vw - 1vw);
}
.text-center{
text-align: center;
}

.grid{
display:grid;
width: 100%;
box-sizing: border-box;
--gap-size: 30px; /* デフォルトのgap */
gap: var(--gap-size);
}
.gap-5 { --gap-size: 5px; }
.gap-10 { --gap-size: 10px; }
.gap-15 { --gap-size: 15px; }
.gap-20 { --gap-size: 20px; }
.gap-30 { --gap-size: 30px; }
.gap-60 { --gap-size: 60px; }
.gap-80 { --gap-size: 80px; }
.gap-90 { --gap-size: 90px; }

.grid-2{grid-template-columns: calc(50% - var(--gap-size) / 2) calc(50% - var(--gap-size) / 2);}
.grid-3{grid-template-columns: repeat(3, calc((100% - 2 * var(--gap-size)) / 3));}
.grid-4{grid-template-columns: repeat(4, calc((100% - 3 * var(--gap-size)) / 4));}
.grid-5{grid-template-columns: repeat(5, calc((100% - 4 * var(--gap-size)) / 5));}
.grid-1-2 {grid-template-columns: calc((100% - var(--gap-size)) * (1 / 3)) calc((100% - var(--gap-size)) * (2 / 3));}
.grid-2-1 {grid-template-columns: calc((100% - var(--gap-size)) * (2 / 3)) calc((100% - var(--gap-size)) * (1 / 3));}

.w-900{
max-width: 900px;
margin: 0 auto;
}
.w-800{
max-width: 800px;
margin: 0 auto;
}
.pc{display: block;}
.tablet{display: none;}
.sp{display: none;}

@media (max-width:1199px) {
.container{
width: 100%;
padding: 0 15px;
}
}
@media (max-width:834px) {
.container{
width: 100%;
padding: 0 15px;
}
.text-md-center{
text-align: left;
}
.pc{display: none;}
.tablet{display: block;}
.sp{display: none;}
}
@media (max-width:600px) {
.container{
width: 100%;
max-width: 100%;
}
.pc{display: none;}
.tablet{display: none;}
.sp{display: block;}
.grid-2{
grid-template-columns: 1fr;
}
.grid-3{
grid-template-columns: 1fr;
}
.grid-4{
grid-template-columns: 1fr;
}
.grid-1-2{
grid-template-columns: 1fr;
}
.grid-2-1{
grid-template-columns: 1fr;
}
}

.section{
padding: 4rem 0 0;
}





.center-center {
display: grid;
place-content: center;
gap: 1ch;
}


/********************************

	UTILITY

********************************/
.more{
position: relative;
text-align: center;
padding: 60px 0;
}
summary.more{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.more a,
summary.more {
position: relative;
display: inline-block;
padding: 1rem 2rem;
color: var(--color-accent-red);
background-color: rgb(255 255 255 /1);
border: 1px solid var(--color-accent-red);
}
.more a:hover,
summary.more:hover{
display: inline-block;
color: var(--color-accent-green);
background-color: #fff;
border: 1px solid var(--color-accent-green);;
}
.more a:hover::before,
summary.more:hover::before{
content: "";
position: absolute;
z-index: 2;
top: 50%;
display: block;
width: 20px;
height: 1px;
background-color: var(--color-accent-green);
animation: more 0.6s ease-in 0.1s both;
}
@keyframes more{
  0%{ right: 10px; opacity: 0; }
 50%{ right: 0; opacity: 1; }
100%{ right: -10px; opacity: 1; }
}
.br-sp{
display: none;
}
@media (max-width:600px) {
.br-sp{
display: block;
}
}


/********************************

	NAVIGATION

********************************/

.burger {
position: fixed;
top: 24px;
right: 20px;
width: 30px;
height: 30px; /* 少し高さに余裕を持たせた */
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
border-radius: 50px; /* 丸めて円矩形に */
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
z-index: 100;
box-sizing: content-box;
}

/* ドットの見た目そのまま */
.burger .dot {
width: 5px;
height: 5px;
background: black;
border-radius: 50%;
transition: transform 0.3s ease, opacity 0.3s ease;
}

/* open時に背景を表示 */
.burger.open {
background-color: rgba(0, 0, 0, 0.1); /* ほんのり黒背景、調整OK */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* ちょっと浮かせる */
backdrop-filter: blur(4px); /* 半透明感が出て高級っぽくなる */
}

.menu-overlay {
 position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 600px;
height: 100vh;
background: #fff;
background-color: rgb(255 255 255 /.85);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

/* 👇 最初は右に隠しておく */
transform: translateX(100%);
z-index: 90;
}

.menu-overlay a {
color: black;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 1.5rem;
margin: 20px 0;
opacity: 0;
}

.open .dot:nth-child(1) {
  transform: translateX(12.5px); /* 左側にスライド */
}

.open .dot:nth-child(3) {
  transform: translateX(-12.5px); /* 右側にスライド */
}

.open .dot:nth-child(2) {
  opacity: 0; /* 真ん中消す */
}

/********************************

	HEADER

********************************/
.site-id{
margin: 0;
padding: 30px 0;
display: grid;
place-content: center;
gap: 1ch;
background-color: #fff;
}


/********************************

	FOOTER

********************************/
footer{
position: relative;
z-index: 2;
margin: 4rem 0 0;
padding: 60px 0 90px;
background-color: #e8e8e8;
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
footer p br{
display: none;
}
@media (max-width:600px) {
footer p br{
display: block;
}
}

footer ul li{
position: relative;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.5rem;
font-weight: 700;
letter-spacing: .025em;
}
footer ul li:not(:first-child) {
padding-left: 2.5rem;
font-size: 2rem;
}
footer ul li a{
color: rgb(0 0 0 /.2);
}
footer ul li a.active {
color: rgb(0 0 0 /.9);
}
footer ul li:not(:first-child):before {
content: "";
position: absolute;
left: 10px;
top: 0;
display: block;
width: 20px;
height: 50%;
border-left: 1px solid rgb(0 0 0 /.25);
border-bottom: 1px solid rgb(0 0 0 /.25);
}
footer ul li:not(:last-child) {
margin-bottom: .75rem;
}

footer h3 {
font-weight: bold;
margin-bottom: 0.5em;
color: rgb(0 0 0 /.75);
}
footer .call a{
display: block;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.5rem;
color: #000;
}
footer .call span{
display: block;
margin: 0 0 1rem;
font-size: .875rem;
letter-spacing: .1em;
color: rgb(0 0 0 /.75);
}
footer address{
font-size: 1rem;
color: rgb(0 0 0 /.75) !important;
font-style: normal;
font-size: .875rem;
line-height: 1.75;
letter-spacing: .25em;
}



/********************************

	WORKS

********************************/
.works{
/*background: linear-gradient(45deg, #ffffff, #f0fbff, #d6f3ff, #bcecff, #a3e5ff);*/
}
.works::after{
position: fixed;
left: -150px;
top: 165px;
content: "WORKS";
color: rgb(0 0 0 /.05);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 120px;
line-height: 1;
transform: rotate(90deg);
}
.bg-rectangle {
position: absolute;
left: 0;
width: 100vw;
height: 90vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
background: linear-gradient(45deg, #ffffff, #f0fbff, #d6f3ff, #bcecff, #a3e5ff);
z-index: -1;
will-change: top;
pointer-events: none;
opacity: .5;
}

.image-frame.animate__animated {
margin: 0 auto 1.25rem;
width: 100%; /* 必要に応じて調整 */
height: auto;
border: 1px solid transparent;
position: relative;
overflow: hidden;
animation-name: showBorder;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.image-frame.animate__animated img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.05);
will-change: transform, opacity;
animation: fadeInImage 1s ease forwards;
}
/* 枠線の表示 */
@keyframes showBorder {
0% {border-color: transparent;}
100% {border-color: #d1d1d1; /* 枠線の色（例: 黒） */}
}
/* 画像のフェードイン */
@keyframes fadeInImage {
0% {opacity: 0;transform: scale(1.05);}
100% {opacity: 1;transform: scale(1);}
}
.grid .card:nth-of-type(1) .image-frame.animate__animated{animation-delay: 1s;}
.grid .card:nth-of-type(2) .image-frame.animate__animated{animation-delay: 2s;}
.grid .card:nth-of-type(3) .image-frame.animate__animated{animation-delay: 3s;}
.grid .card:nth-of-type(4) .image-frame.animate__animated{animation-delay: 1s;}
.grid .card:nth-of-type(5) .image-frame.animate__animated{animation-delay: 2s;}
.grid .card:nth-of-type(6) .image-frame.animate__animated{animation-delay: 3s;}
.grid .card:nth-of-type(7) .image-frame.animate__animated{animation-delay: 1s;}
.grid .card:nth-of-type(8) .image-frame.animate__animated{animation-delay: 2s;}
.grid .card:nth-of-type(9) .image-frame.animate__animated{animation-delay: 3s;}
.grid .card:nth-of-type(10) .image-frame.animate__animated{animation-delay: 1s;}
.grid .card:nth-of-type(11) .image-frame.animate__animated{animation-delay: 2s;}
.grid .card:nth-of-type(12) .image-frame.animate__animated{animation-delay: 3s;}
.grid .card:nth-of-type(13) .image-frame.animate__animated{animation-delay: 1s;}
.grid .card:nth-of-type(14) .image-frame.animate__animated{animation-delay: 2s;}
.grid .card:nth-of-type(15) .image-frame.animate__animated{animation-delay: 3s;}

.grid .card:nth-of-type(1) .image-frame.animate__animated img { animation-delay: 2s;}
.grid .card:nth-of-type(2) .image-frame.animate__animated img {  animation-delay: 3s;}
.grid .card:nth-of-type(3) .image-frame.animate__animated img {  animation-delay: 4s;}
.grid .card:nth-of-type(4) .image-frame.animate__animated img { animation-delay: 2s;}
.grid .card:nth-of-type(5) .image-frame.animate__animated img {  animation-delay: 3s;}
.grid .card:nth-of-type(6) .image-frame.animate__animated img {  animation-delay: 4s;}
.grid .card:nth-of-type(7) .image-frame.animate__animated img { animation-delay: 2s;}
.grid .card:nth-of-type(8) .image-frame.animate__animated img {  animation-delay: 3s;}
.grid .card:nth-of-type(9) .image-frame.animate__animated img {  animation-delay: 4s;}
.grid .card:nth-of-type(10) .image-frame.animate__animated img { animation-delay: 2s;}
.grid .card:nth-of-type(11) .image-frame.animate__animated img {  animation-delay: 3s;}
.grid .card:nth-of-type(12) .image-frame.animate__animated img {  animation-delay: 4s;}
.grid .card:nth-of-type(13) .image-frame.animate__animated img { animation-delay: 2s;}
.grid .card:nth-of-type(14) .image-frame.animate__animated img {  animation-delay: 3s;}
.grid .card:nth-of-type(15) .image-frame.animate__animated img {  animation-delay: 4s;}

.works .section .card{
position: relative;
z-index: 2;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}
.works .section .card a{
color: #000;
}
.works .section .card img{
margin: 0;
padding: 0;
}
.works .section .card .card-title{
margin: 0 auto 1.5rem;
padding: 0;
font-size: 1.25rem;
}
.works .section .card .card-title span{
position: relative;
top: -.1rem;
margin: 0 0 0 1rem;
padding: 0;
font-size: .937rem;
}
.works .section .card .card-title span.link-url{
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: .875rem;
font-weight: 700;
letter-spacing: .1em;
color: rgb(0 0 0 /.3);
mix-blend-mode: multiply;
}
.works .section .card .ul-tag{
margin: 0;
padding: 0;
font-size: .75rem;
letter-spacing: .25em;
}
.works .section .card .ul-tag li:not(:last-child) {
margin-bottom: .5rem;;
}


@media(max-width:600px){
.grid-3 {
  display: grid;
  grid-template-columns: 1fr; /* 初期状態：1カラム */
  gap: 1rem;
}

.grid-3:has(.card:nth-child(7)) {
  grid-template-columns: repeat(2, 1fr);
}

/* 最初の6つは常に2カラムぶち抜き（1カラム表示） */
.grid-3 .card:nth-child(-n+6) {
  grid-column: span 2;
}
}


/********************************

	FRONTPAGE

********************************/
.home{
background-color: #f9f9f9;
}
.section_portfolio{
padding-top: 15px;
}
.grid_front-portfolio{
display:grid;
grid-template-rows: repeat(3, 1fr);
gap: 60px 30px;
}
.grid_front-portfolio_wrap{
position: relative;
}

.grid_front-portfolio_wrap::before {
content: "";
position: absolute;
z-index: -1;
left: .5vw;
right: .5vw;
top: 15px;
margin: 0 auto;
display: block;
width: calc(100vw - 1vw);
height: 1px;
background-color: rgb(0 0 0 /.075);
animation: pastelFlow 60s ease infinite;
}
@keyframes pastelFlow {
  0% {top: 0;}
 50% {top: 100%;}
100% {top: 0;}
}


.grid_front-portfolio_wrap::after {
content: "";
position: absolute;
z-index: -3;
left: .5vw;
right: .5vw;
top: 15px;
margin: 0 auto;
display: block;
width: calc(100vw - 1vw);
height: calc(100% - 30px);
border: 1px solid rgb(0 0 0 /.075);
animation: pastelFlow2 30s ease infinite;
}
@keyframes pastelFlow2 {
  0% {transform: scale(1) }
 50% {transform: scale(.5) }
100% {transform: scale(1) }
}

_.grid_front-portfolio_wrap::after {
position: absolute;
left: .5vw;
right: .5vw;
top: 30px;
margin: 0 auto;
z-index: -3;
content: "";
background: linear-gradient(45deg, #ffffff, #fff2f2, #ffeaea, #ffe1e1, #ffd9d9);
background-size: 400% 400%;
animation: pastelFlow 15s ease infinite;
display: block;
width: calc(100vw - 1vw);
height: calc(100% - 60px);
margin: 0;
border-radius: 20px;
}
/*@keyframes pastelFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}*/

.grid_front-portfolio .card{
position: relative;
overflow: hidden;
transition: .3s ease-in-out;
}

.grid_front-portfolio .card{
position: relative;
overflow: hidden;
}
.grid_front-portfolio .card:hover{
transform: translateY(-1px);
background-color: rgb(255 255 255 /.95);
box-shadow: rgba(212, 127, 127, 0.2) 0px 8px 24px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;
}

.grid_front-portfolio .card h2 a,
.grid_front-portfolio .card p a{
color: #000;
}
.grid_front-portfolio .card h2 a:hover,
.grid_front-portfolio .card p a:hover{
color: var(--color-accent-green);
}

.grid_front-portfolio .card h2{
margin: 0 0 2rem;
padding: 0 1rem;
font-size: 1.25rem;
font-weight: 500;
}
.grid_front-portfolio .card h2 span{
margin-top: .5rem;
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: .15em;
font-size: .875rem;
color: rgb(0 0 0 /.4);
}
.grid_front-portfolio .card img{
display: block;
margin: 0 0 30px;
aspect-ratio: 1/1;
object-fit: cover;
width: 100%;
height: 370px;
overflow: hidden;
}

@media (max-width:800px) {
.grid_front-portfolio .card img{
    height: 200px;
    aspect-ratio: 1 / 1;
  }

  .card:first-child a img {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width:600px) {
.grid_front-portfolio .card img{
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .card:first-child a img {
    aspect-ratio: 1 / 1;
  }
}

.tomomien-okayama{
aspect-ratio: 16 / 9;
}
.link-url{
margin: 0;
padding: 0;
font-size: 16px;
}

.grid_front-portfolio .card ul{
display: flex;
flex-wrap: wrap;
gap: 0 .5em;
font-size: 0.85rem;
line-height: 1.6;
margin: 1rem 0 2rem;
padding: 0 1rem;
}
.grid_front-portfolio .card ul li {
margin-bottom: .5rem;
padding: 0.3em 0.6em;
font-size: .75rem;
border-radius: 999px;
white-space: nowrap;
}

@media(min-width:601px){
.grid_front-portfolio div:nth-of-type(1){grid-column:1 / 5;grid-row:1 / 2;}
.grid_front-portfolio div:nth-of-type(2){grid-column:5 / 7;grid-row:1 / 2;}

.grid_front-portfolio div:nth-of-type(3){grid-column:1 / 3;grid-row:2 / 3;}
.grid_front-portfolio div:nth-of-type(4){grid-column:3 / 5;grid-row:2 / 3;}
.grid_front-portfolio div:nth-of-type(5){grid-column:5 / 7;grid-row:2 / 3;}

.grid_front-portfolio div:nth-of-type(6){grid-column:1 / 4;grid-row:3 / 4;}
.grid_front-portfolio div:nth-of-type(7){grid-column:4 / 7;grid-row:3 / 4;}
}

@media(max-width:600px){
.grid_front-portfolio div:nth-of-type(1){grid-column:1 / 7;grid-row:1 / 2;}

.grid_front-portfolio div:nth-of-type(2){grid-column:1 / 4;grid-row:2 / 3;}
.grid_front-portfolio div:nth-of-type(3){grid-column:4 / 7;grid-row:2 / 3;}

.grid_front-portfolio div:nth-of-type(4){grid-column:1 / 4;grid-row:3 / 4;}
.grid_front-portfolio div:nth-of-type(5){grid-column:4 / 7;grid-row:3 / 4;}

.grid_front-portfolio div:nth-of-type(6){grid-column:1 / 7;grid-row:4 / 5;}
.grid_front-portfolio div:nth-of-type(7){grid-column:1 / 7;grid-row:5 / 6;}
}

.number-block {
position: absolute;
right: 15px;
top: 325px;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
width: 90px;
transition: .75s ease-out;
}
.grid_front-portfolio .card:hover .number-block{
transform: scale(1000%) rotate(60deg);
opacity: 0;
visibility: hidden;
}

.number {
display: block;
font-size: 5rem;
font-weight: 700;
color: rgb(0 0 0 /.1);
line-height: 1;
}
.label {
display: block;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.3;
text-transform: uppercase;
color: rgb(0 0 0 /.15);
margin-top: 0.3em;
letter-spacing: 0.05em;
}

dl,dt,dd{
margin: 0;
padding: 0;
}

.news{
background: #fff;
padding: 4rem;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.news dt,
.news dd{
padding: 1rem 1rem;
}
.news dt{
margin: 0;
width: 10rem;
}
.news dt span{
padding: .5rem 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: .75rem;
letter-spacing: .1em;
color: #fff;
background-color: rgb(0 0 0 /.5);
box-decoration-break: clone;
-webkit-box-decoration-break: clone; /* Safari対策 */
display: inline;
}
.news dd{
display: block;
margin: -.25rem 0 0;
letter-spacing: .1em;
width: calc(100% - 10rem);
}
.news dd a{
margin-top: .5rem;
display: inline-block;
padding: .25rem .5rem;
font-size: .875rem;
border: 1px solid var(--color-accent-red);
border-radius: 3px;
}
.news dd a:hover{
border: 1px solid var(--color-accent-green);
}
.section_intro p{
line-height: 2;
}

.tag {
display: inline-block;
padding: 0.4em 0.8em;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.4;
text-align: center;
color: #fff;
}
.tag-func   {background-color: #3A8DCC; /* 濃いブルー */}
.tag-design {background-color: #3E9748; /* 濃いグリーン */}
.tag-visual {background-color: #E26C00; /* 濃いオレンジ */}
.tag-struct {background-color: #6B6B6B; /* 濃いグレー */}
.tag-print  {background-color: #C03267; /* 濃いピンク */}

.tag-visual { background-color: #D9304E; color: #fff; }  /* 果肉赤 */
.tag-design { background-color: #F87D9D; color: #fff; }  /* 果汁ピンク */
.tag-func   { background-color: #3F915F; color: #fff; }  /* 葉グリーン */
.tag-struct { background-color: #A7D7A3; color: #333; }  /* 茎グリーン */
.tag-print  { background-color: #E3B664; color: #333; }  /* 種マスタード */


/********************************

	SERVICE

********************************/
.service{
background-color: #efefef;
background: linear-gradient(45deg, #ffffff, #fffbe5, #fff4cc, #ffecb3, #ffe59a);
}
.service::after{
position: fixed;
left: -168px;
top: 210px;
content: "SERVICE";
color: rgb(0 0 0 /.05);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 120px;
line-height: 1;
transform: rotate(90deg);
}
.section_service .grid .service-menu{
position: relative;
z-index: 2;
padding: 3rem 2rem;
background-color: rgb(255 255 255 /.75);
border: 1px solid rgb(0 0 0 /0.01);
border-radius: 0px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.section_service .grid h2{
margin: 0 0 1rem;
padding: 0;
font-size: 1.5rem;
}
.section_service .grid p:nth-of-type(1){
margin: 0 0 1.5rem;
padding: 0;
font-size: .937rem;
font-weight: 600;
}
.section_service .grid ul.ul_service{
margin: 0 0 1.5rem;
padding: 1rem;
font-size: .937rem;
font-weight: 500;
background-color: rgb(0 0 0 /.03);
border-radius: 3px;
}
.section_service .grid ul.ul_service li{
margin: 0;
padding: 0;
letter-spacing: .05em;
}
.section_service .grid ul.ul_service li::before {
content: '-';
display: inline-block;
width: 1em;
margin-right: .375em;
color: rgb(0 0 0 /.25);
}
.section_service .grid ul.ul_service li:not(:last-child) {
margin-bottom: .5rem;
}

.section_service .grid p:nth-of-type(2){
margin: 0 0 1.5rem;
padding: 0;
font-size: .875rem;
font-weight: 500;
}
.section_service .grid details p:nth-of-type(1),
.section_service .grid details p:nth-of-type(2){
margin: 0 0 1.5rem;
padding: 1rem;
font-size: .875rem;
line-height: 1.75;
font-weight: 500;
text-align: justify;
}
.service details {
margin: 0 0 0;
transition: 10s;
}
.service details[open] {
}

.service details[open]  p{
margin-bottom: 2rem;
background-color: #f0f0f0;
animation: details-open 0.6s ease-in 0.1s both;
}
@keyframes details-open{
0%{ bottom: -100px; opacity: 0; }
100%{ bottom: 0; opacity: 1; }
}
.service summary {
margin: 0 0 1rem;
cursor: pointer;
list-style: none;
}
.service summary {
background: url(images/arrow-right.svg) no-repeat left center;
background-position: 15px 15px;
}
.service .accordion-achievement[open] summary {
background-size: 15px 8.5px;
background-repeat: no-repeat;
background-image: url(images/arrow-down.svg);
}
.service .service summary::-webkit-details-marker {
  background: url(images/arrow-right.svg) no-repeat center/6px;
  color: transparent;
}

.service-box {
position: absolute;
right: 30px;
top: -30px;
z-index: 2;
width: 60px;
height: 60px;
background-color: var(--color-accent-red);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
border-radius: 50%;
overflow: hidden;
}
.service-box .label {
margin-bottom: .25rem;
font-size: 0.5rem;
letter-spacing: 0.1em;
font-weight: bold;
color: rgb(255 255 255 /.75);
}
.service-box .number {
font-size: 1.75rem;
font-weight: bold;
line-height: 1;
color: #fff;
}
.service-seminar{
margin: 0 0 4rem;
}
.service-seminar h2{
margin: 0 0 1rem;
}
.service-seminar p{
margin: 0 0 2rem;
}
.service-seminar details{
margin: 0 0 2rem;
}
.service-seminar summary{
margin: 0 0 1rem;
padding: .5rem .5rem .5rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
border-left: 4px solid rgb(0 0 0 /.15);
}

.section_service .grid ul.ul_seminar {
position: relative;
z-index: 2;
column-count: 4;
column-gap: 1.5rem;
padding: 1rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: rgb(255 255 255 /.5);
border-radius: 20px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.section_service .grid ul.ul_seminar li {
display: block;
padding: .5rem 1rem;
background-color: rgb(255 255 255 /.95);
border-radius: 100px;
break-inside: avoid;
margin-bottom: 0.6em;
line-height: 1.5;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.ul_seminar li span{
display: block;
margin: .5rem 0;
padding: .5rem;
font-size: .75rem;
background-color: rgb(0 0 0 /.05);
border-radius: 100px;
}
.ul_seminar li:last-child {
color: #888;
font-style: italic;
font-size: 0.9em;
}
.tbl_fee{
margin: 0 0 1rem;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
width: 100%;
}
.tbl_fee th,
.tbl_fee td{
padding: .75rem;
width: 50%;
border-bottom: 1px solid rgb(0 0 0 /.1);
}
.tbl_fee th{
text-align: left;
background-color: rgb(0 0 0 /.03);
}
.tbl_fee td{
text-align: right;
}
.tbl_fee td span{
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}

/********************************

	REVIEW

********************************/
.review{
position: relative;
/*background: linear-gradient(45deg, #ffffff, #e6f5f0, #c8eade, #a9dfcc, #8bd4ba);*/
background-color: #e6f5f0;
}
.review::after{
position: fixed;
left: -150px;
top: 185px;
content: "REVIEW";
color: rgb(0 0 0 /.05);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 120px;
line-height: 1;
transform: rotate(90deg);
}
.section_review-contents{}
.section_review-contents p.comment{
margin-bottom: 30px;
font-weight: 500;
line-height: 1.75;
letter-spacing: .1em;
text-align: justify;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.section_review-contents blockquote{
font-size: 16px;
line-height: 1.75;
letter-spacing: .02em;
text-align: justify;
color: #1c1c1c;
}

.client-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px;
max-width: 100%;
margin: auto;
}
.location {
text-align: center;
}
.location .jp {
font-size: 1.75rem;
font-weight: 600;
margin: 0;
color: #5c5c5c;
}
.location .en {
font-size: .75rem;
color: #555;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
margin: 5px 0 0;
text-transform: uppercase;
}
.divider {
width: 2px;
height: 100px;
background-color: #aaa;
margin: 0 20px;
}
.main-content .client {
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.main-content .client span{
display: inline-block;
margin: 0 0 0 .375em;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
.main-content .title {
margin: 5px 0 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: .05em;
}

.circle {
position: relative;
border: 1px solid black;
border-radius: 50%;
width: 64px;
height: 64px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #e6f5f0;
}
.circle p{
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 0.562rem;
line-height: 1.5;
}
.circle::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #e6f5f0;
bottom: 5px;
right: 5px;
border-radius: 50%;
z-index: 1;
}



/********************************

	COMPANY

********************************/
.company{
background: #f9f9f9;
}
.company::after{
position: fixed;
left: -208px;
top: 240px;
content: "COMPANY";
color: rgb(0 0 0 /.05);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 120px;
line-height: 1;
transform: rotate(90deg);
}
.dl_company-profile{}
.dl_company-profile,.dl_company-profile dt,.dl_company-profile dd{
margin: 0;
padding: 0;
}
.dl_company-profile{
position: relative;
margin: 0 0 1rem;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.dl_company-profile::before{
content: "";
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 60px;
height: 2px;
background-color: var(--color-accent-red);
}
.dl_company-profile dt{
background-color: rgb(0 0 0 /.025);
font-weight: bold;
}
.dl_company-profile dt,
.dl_company-profile dd{
padding: 10px 15px;
border-bottom: 1px solid rgb(0 0 0/.1);
}
.dl_company-profile dt{
font-size: .875rem;
width: 10em;
display: flex;
align-items: center;
}
.dl_company-profile dd{
font-size: 1rem;
width: calc(100% - 10em);
}

.achievements{
position: relative;
z-index: 2;
margin-bottom: 4rem;
background-color: rgb(255 255 255 /.75);
padding: 30px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.achievements h2{
font-size: 1.25rem;
font-weight: 500;
}
.company .achievements h3{
font-size: 1.125rem;
font-weight: 700;
}
.philosophy{
margin-bottom: 6rem;
}
.philosophy h2{
position: relative;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 1em;
writing-mode: vertical-rl;
}
.philosophy h2::after{
content: "";
position: absolute;
left: calc(50% - 30px);
top: -30px;
display: block;
width: 60px;
height: 2px;
background-color: var(--color-accent-green);
}
.philosophy p{
font-weight: 600;
line-height: 2;
letter-spacing: .2em;
}

.achievements h2,
.achievements div:nth-of-type(1){
border-right: 1px solid rgb(0 0 0 /.5);
}
.achievements div:nth-of-type(1){
padding-right: 60px;
}

.section_award{}
.section_award h3{
margin: 0 0 15px;
padding: 0;
font-size: 18px;
line-height: 1;
}
.section_award p{
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.75;
letter-spacing: .05em;
text-align: justify;
}

.greeting{}
.greeting h2{
margin: 0 0 30px;
padding: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: .2em;
}
.greeting p{
margin: 0 0 15px;
padding: 0;
font-size: 16px;
line-height: 1.75;
letter-spacing: .05em;
text-align: justify;
}
.greeting p.signature{
margin: 0 0 60px;
font-size: 18px;
font-weight: 600;
text-align: right;
letter-spacing: .1em;
}
.greeting p.signature span{
margin: 0 15px 0 0;
font-size: 16px;
font-weight: 500;
}
.greeting dl{
margin: 0;
padding: 10px 10px 20px;
border: 1px solid rgb(0 0 0 /.25);
}
.greeting dt{
margin: -25px 0 10px;
padding: 0;
font-size: 14px;
line-height: 1.75;
letter-spacing: .05em;
}
.greeting dt span{
display: inline-block;
margin: 0;
padding: 5px 10px;
background-color: #f9f9f9;
}
.greeting dd{
margin: 0;
padding: 0 15px;
font-size: 14px;
line-height: 1.75;
letter-spacing: .05em;
text-align: justify;
}
.greeting dd span{
display: block;
margin: 10px 0 0;
padding: 0;
}

/********************************

	CONTACT

********************************/
.contact{
background-color: #f6f6f6;
}
.contact::after{
position: fixed;
left: -196px;
top: 230px;
content: "CONTACT";
color: rgb(0 0 0 /.05);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 120px;
line-height: 1;
transform: rotate(90deg);
}
.contact hgroup{
margin-bottom: 30px;
}
.contact h2{
font-size: 1.5rem;
}
.address-group {}
.address-group h2{
margin: 0 0 1rem;
}
.address-group a{
display: block;
margin: 0 0 .5rem;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.5rem;
line-height: 1;
}
.address-group ul{}
.address-group ul li{
font-size: .875rem;
line-height: 1.5;
letter-spacing: .2em;
}
.address-group ul li span{
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.375rem;
line-height: 1;
}
.address-group ul li:not(:last-child) {
margin-bottom: 2rem;
}
.contact form table{
width: 100%;
}
.contact form{
margin: 0 0 90px;
padding: 30px;
background-color: #fff;
}
.contact form th,
.contact form td{
border-bottom: 1px solid #ccc;
}
.contact form th{
position: relative;
padding: 10px 30px 10px 10px;
font-size: .875rem;
text-align: left;
width: 1%;
white-space: nowrap;
}
.contact form td{
position: relative;
padding: 10px;
}
.contact form th span{
display: inline-block;
margin-left: 10px;
padding: .2rem;
position: absolute;
right: 0;
top: calc(50% - 8px);
font-size: 10px;
line-height: 1;
color: #fff;
background-color: var(--color-accent-green);
border-radius: 3px;
}
.contact input,
.contact textarea {
border: 1px solid #ccc;
transition: border-color 1s ease-in-out;
overflow-wrap: inherit;
}
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"]{
padding: 10px;
width: 100%;
border-radius: 4px;
}
.zip input[type="tel"]{
width: inherit;
}
.zip input[type="button"]{
cursor: pointer;
margin-left: .5rem;
padding: .5rem;
font-size: .937rem;
line-height: 1;
color: #fff;
background-color: var(--color-accent-green);
border: none;
border-radius: 4px;
}
.contact .submit{
margin: 0;
padding: 30px 0;
}
.contact input[type="submit"]{
cursor: pointer;
padding: 10px 0;
width: 100%;
border-radius: 4px;
color: #fff;
background-color: var(--color-accent-green);
transition: .3s;
}
.contact input[type="submit"]:hover{
background-color: var(--color-accent-red);
}
.contact input:focus,
.contact textarea:focus {
border-color: #007aff; /* ふわっとブルーに変化（Apple風） */
}
.contact textarea::placeholder {
transition: opacity 0.5s ease-in-out;
}
.contact textarea:focus::placeholder {
opacity: 0;
}

.autogrow {
padding: 10px 10px;
width: 100%;
min-height: 2.2em;
resize: none;
overflow: hidden;
line-height: 1.4; /* ← 高さ感を調整できる要素 */
font-size: 16px;  /* お好みで */
background-color: #f0f0f0;
border-radius: 4px;
}
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
.autogrow {
padding: 4px 10px;
field-sizing: content;
height: auto;
}
}

.dl_privacy-policy{
margin: 0 0 60px;
padding: 15px;
height: 300px;
overflow: auto;
border: 1px solid #d1d1d1;
}
.dl_privacy-policy dt{
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
.dl_privacy-policy dd{
margin: 0 0 2em 1em;
font-size: 14px;
line-height: 1.7;
text-align: justify;
letter-spacing: .01em;
color: #404040;
}
.dl_privacy-policy ol {
counter-reset: my-counter;
list-style: none;
padding-left: 2em;
}
.dl_privacy-policy ol li{
counter-increment: my-counter;
position: relative;
padding-left: 2em;
}
.dl_privacy-policy ol li::before {
content: '（' counter(my-counter) '）'; /* ←ここで前後のカッコを追加！ */
position: absolute;
left: 0;
}
.thanks-message{
font-weight: 600;
line-height: 2;
letter-spacing: .2em;
}
.strawberry{
display: block;
margin: 4rem auto 6rem;
}


@media(max-width:600px){
.section {
padding: 2rem 0 0;
}
.news{
padding: 1rem;
display: block;
}
.news dd{
width: 100%;
}
.image-frame.animate__animated {
animation-duration: .3s;
}
.grid .card:nth-of-type(1) .image-frame.animate__animated{animation-delay: .1s;}
.grid .card:nth-of-type(2) .image-frame.animate__animated{animation-delay: .2s;}
.grid .card:nth-of-type(3) .image-frame.animate__animated{animation-delay: .3s;}
.grid .card:nth-of-type(4) .image-frame.animate__animated{animation-delay: .1s;}
.grid .card:nth-of-type(5) .image-frame.animate__animated{animation-delay: .2s;}
.grid .card:nth-of-type(6) .image-frame.animate__animated{animation-delay: .3s;}
.grid .card:nth-of-type(7) .image-frame.animate__animated{animation-delay: .1s;}
.grid .card:nth-of-type(8) .image-frame.animate__animated{animation-delay: .2s;}
.grid .card:nth-of-type(9) .image-frame.animate__animated{animation-delay: .3s;}
.grid .card:nth-of-type(10) .image-frame.animate__animated{animation-delay: .1s;}
.grid .card:nth-of-type(11) .image-frame.animate__animated{animation-delay: .2s;}
.grid .card:nth-of-type(12) .image-frame.animate__animated{animation-delay: .3s;}
.grid .card:nth-of-type(13) .image-frame.animate__animated{animation-delay: .1s;}
.grid .card:nth-of-type(14) .image-frame.animate__animated{animation-delay: .2s;}
.grid .card:nth-of-type(15) .image-frame.animate__animated{animation-delay: .3s;}

.grid .card:nth-of-type(1) .image-frame.animate__animated img { animation-delay: .2s;}
.grid .card:nth-of-type(2) .image-frame.animate__animated img { animation-delay: .3s;}
.grid .card:nth-of-type(3) .image-frame.animate__animated img { animation-delay: .4s;}
.grid .card:nth-of-type(4) .image-frame.animate__animated img { animation-delay: .2s;}
.grid .card:nth-of-type(5) .image-frame.animate__animated img { animation-delay: .3s;}
.grid .card:nth-of-type(6) .image-frame.animate__animated img { animation-delay: .4s;}
.grid .card:nth-of-type(7) .image-frame.animate__animated img { animation-delay: .2s;}
.grid .card:nth-of-type(8) .image-frame.animate__animated img { animation-delay: .3s;}
.grid .card:nth-of-type(9) .image-frame.animate__animated img { animation-delay: .4s;}
.grid .card:nth-of-type(10) .image-frame.animate__animated img { animation-delay: .2s;}
.grid .card:nth-of-type(11) .image-frame.animate__animated img { animation-delay: .3s;}
.grid .card:nth-of-type(12) .image-frame.animate__animated img { animation-delay: .4s;}
.grid .card:nth-of-type(13) .image-frame.animate__animated img { animation-delay: .2s;}
.grid .card:nth-of-type(14) .image-frame.animate__animated img { animation-delay: .3s;}
.grid .card:nth-of-type(15) .image-frame.animate__animated img { animation-delay: .4s;}
.section_service .grid ul.ul_seminar {
position: relative;
column-count: 1;
}
.client-info {
padding: 20px;
}
.location .jp {
font-size: 1.25rem;
}
.circle {
position: relative;
border: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-radius: 0;
width: 64px;
height: 64px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background-color: #e6f5f0;
}
.dl_company-profile {
width: 90%;
margin: 0 auto;
display: block;
}
.dl_company-profile dt,
.dl_company-profile dd{
width: 100%;
}
.dl_company-profile dt{
border: none;
background-color: transparent;
}
.dl_company-profile dt{
font-weight: 500;
}
.dl_company-profile dd{
font-weight: 600;
}
.achievements h2, .achievements div:nth-of-type(1) {
border-right: none;
}
.achievements h2{
margin-bottom: 30px;
}
.achievements div:nth-of-type(1) {
padding-right: 0;
}
.philosophy h2 {
writing-mode: horizontal-tb;
}
.philosophy p {
letter-spacing: normal;
line-height: 2;
}

.contact .text-center.lead{
font-size: 1.125rem;
font-weight: 600;
text-align: left;
}
.address-group{
text-align: center;
}
.contact form th,
.contact form td{
display: block;
width: 100%;
}
.zip input[type="button"]{
margin-top: 10px;
}
.contact .grid.w-800 p{
padding: 0 1rem;
}
footer .grid.grid-2 h3,
footer .grid.grid-2 p,
footer .grid.grid-2 address{
text-align: center;
}
footer ul {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
}
footer ul li{
position: relative;
font-family: 'Roboto Condensed', sans-serif;
font-size: 2rem;
font-weight: 700;
letter-spacing: .025em;
width: 50%;
}
footer ul li:not(:first-child) {
padding-left: 0;
font-size: 2rem;
}
footer ul li a{
display: block;
padding: .5rem;
color: rgb(0 0 0 /.2);
}
footer ul li a.active {
color: rgb(0 0 0 /.9);
}
footer ul li:not(:first-child):before {
content: none;
}
footer ul li:not(:last-child) {
margin-bottom: 0;
}
}