body {
  font-family: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  font-weight: 400,700;
}
a :hover{
  opacity: .6;
  transition: .3s;
}
@media not all and (min-width: 1024px) {
    .l-header--sticky-sm {
        box-shadow:none;
    }
}
@media (max-width: 768px) {
.logo_image{
   width: 80%;
  margin-top: 12vh!important;
}
.service_image{
  width: 70%;
  margin: 0 auto 20px;
}
}
.works .c-entry__title {
  color: #000;
  font-size: 32px;
}
.grecaptcha-badge{
  display: none!important;
}
.c-entry__title{
  font-size: clamp(40px,4vw,48px);
}
.wpcf7-submit{
  border-radius: 30px!important;
    width: 200px;
    font-weight: bold;
}
/* フッター */
.l-footer{
display:flex;
justify-content:space-between;
border-top: 8px solid #000;
padding-right:0;
padding:0;
}
.recaptcha-message-02 p{
  text-align: center;
}
.recaptcha-message-02 a:hover{
text-decoration: none;
}
.recaptcha-message{
width: fit-content;
    margin: 0 0 0 auto;
    padding: 20px;
    border-radius: 8px;
    margin-top: 40px;
    background: #ebebeb;
}
.recaptcha-message p{
    font-size: 12px;
    text-align: right;
    vertical-align: middle;
}

.key-icon img{
  width: 20px;
  height: 20px;
}
.footer-container {
width: 100%;
display: flex
;
justify-content: space-between;
padding: 4vw;
}

/* 左側：ロゴ、SNS、コピーライト */
.footer-left {
display: flex;
flex-direction: column;
gap: 25px;
}

.footer-logo {
font-size: 18px;
font-weight: bold;
color: #000;
line-height: 1.3;
letter-spacing: 1px;
}

.footer-social {
display: flex;
}

.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000;
}

.instagram-icon {
width: 20px;
height: 20px;
fill: currentColor;
}

.copyright {
font-size: 11px;
color: #000;
font-weight: 500;
letter-spacing: 0.5px;
}

/* 右側：ナビゲーション */
.footer-right{
	width:100%;
}
.footer-nav-main ul {
display: flex;
flex-wrap: wrap;
justify-content: right;
text-align: right;
list-style: none;
}
.footer-nav-main ul li{
    margin-left: 32px;
}

.footer-nav-sub ul {
    display: flex;
flex-wrap: wrap;
    justify-content: right;
text-align: right;
list-style: none;
}


.footer-nav-main a{
width: 100%;
font-size: 14px;
font-weight: 500;
color: #000000;
font-weight: bold;
text-decoration: none;
letter-spacing: 1px;
display: block;
padding: 5px 0;
}
.footer-nav-sub a {
  width: 100%;
font-size: 14px;
font-weight: bold;
color: #808A92;
text-decoration: none;
letter-spacing: 1px;
display: block;
padding: 5px 0;
}


/* ページトップボタン */
.page-top {
width: 60px;
height: auto;
background-color: #000;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.page-top::before {
content: '';
width: 12px;
height: 12px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(-45deg);
margin-top: 2px;
}

/* レスポンシブ */
@media (max-width: 768px) {
footer {
padding: 30px 20px;
}

.footer-container {
flex-direction: column;
gap: 30px;
}
.footer-nav-main ul {
  flex-wrap: wrap;
padding: 0;
}
.footer-left {
order: 2;
}

.footer-nav {
order: 1;
grid-template-columns: repeat(2, 1fr);
gap: 10px 40px;
}

.footer-nav a:last-child {
grid-column: 1 / -1;
text-align: center;
}

.page-top {
top: 30px;
right: 20px;
}
}

@media (max-width: 480px) {
.footer-nav {
grid-template-columns: 1fr;
gap: 8px;
}
}
.footer-logo a{
  text-decoration: none;
}
/*一覧*/
.c-entry-summary__figure{
    border-radius: 8px;
    height: 280px;
    border: 4px solid #000000;
}
.c-entry-summary__figure img {
  width: 100%;
    max-width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 4px;
}
.c-entry-summary a{
  display: block;
}
.c-entry-summary__title{
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 750px){
  .c-entry-summary__figure{
    height: 180px;
}
.c-entry-summary__figure img {
    height: 180px;
}
}
/*Top*/
.top_title{
  margin-bottom: 64px;
}
.service_text{
  font-size: 20px;
  font-weight: bold;
}
.link_button a{
  font-weight: bold;
}
.link_button .wp-block-button__link{
  width: 200px!important;
}
@media (max-width: 750px){
  .top_title{
    margin-bottom: 32px;
  display: block!important;
}
.top_title--text{
  display: block!important;
}
.link_button .wp-block-button{
  text-align: center;
}
}
/*SERVICE*/
.price_box--title{
  display: flex;
  color: #6b59aa;
}
.price_box--title h3{
  font-size: 18px;
}
.price_box--title--detail{
  width: 40%;
}
.price_box--title--price{
  width: 60%;
}
@media (max-width: 750px){
  .price_box--title{
  flex-wrap: wrap;
}
  .price_box--title--detail{
  width: 100%;
}
.price_box--title h3{
  font-size: 16px;
}
.price_box--title--price{
  font-size: 16px;
  width: 100%;
}
}
/*Works カスタムフィールド*/
.works-detail{
    padding: 4rem;
    background: #EEECF5;
border-radius:8px;
margin-bottom:32px;
}
.works-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mockup-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* モックアップの最大幅 */
  margin: 0 auto;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.meta-row dt {
  min-width: 150px;
  font-weight: bold;
  font-size: 14px;
 color: #6b59aa;
  flex-shrink: 0;
}

.meta-row dd {
  margin: 0;
  flex: 1;
  font-size: 14px;
 color: #000;
}
.meta-row dd a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  word-break: break-word;
  overflow-wrap: break-word;
  justify-content: left;
  color: #6b59aa;
  white-space: normal;
}
.meta-row dd a::after{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-right: .1em;
  background-image: url("https://mayudama.design/wp-content/uploads/2025/06/open_in_new.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 750px){
.works-list{
  margin-top: 0;
}
.works-detail{
    padding: 2rem;
}
.works-meta{
  gap:24px;
}
.meta-row dt {
  width: 100%;
}
.meta-row dd {
 width: 100%;
}
}
.mockups{
position:relative;
}
/* デスクトップモックアップ */
.desktop {
  --max-width: 720px;
  --frame-thickness: 16px;
  --frame-color: #000;
  --screen-color: #000;
  --aspect-ratio: 16 / 9;
  --border-radius: 8px;
  --foot-width: 15%;
  --foot-height: 30px;
  
  margin: 10px auto;
  padding: 0 0 calc(var(--foot-height) + var(--frame-thickness));
  position: relative;
  width: 100%;
  max-width: var(--max-width);
}

.desktop-frame {
  position: relative;
  width: 100%;
  background-color: var(--frame-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  padding: var(--frame-thickness);
}

.desktop-frame .screen {
  background-color: var(--screen-color);
  border-radius: calc(var(--border-radius) - var(--frame-thickness));
  overflow: scroll;
  aspect-ratio: var(--aspect-ratio);
}

.desktop-frame .screen img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 足の縦部分 */
.desktop-frame::before {
  content: '';
  position: absolute;
  width: var(--foot-width);
  height: calc(var(--foot-height) + var(--frame-thickness));
  bottom: calc(-1 * var(--foot-height) + var(--frame-thickness) * -0.5);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--frame-color);
  z-index: 0;
}

/* 足の横部分 */
.desktop::after {
  content: '';
  position: absolute;
  width: 50%;
  height: var(--frame-thickness);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--frame-color);
  border-radius: calc(var(--border-radius) / 2);
  z-index: 1;
}

/* スマートフォンモックアップ */
.phone {
position: absolute;
    right: 0;
    bottom: -10px;
    --max-width: 140px;
  --frame-thickness: 8px;
  --frame-color: #222;
  --screen-color: #000;
  --aspect-ratio: 9 / 16.5;
  --border-radius: 12px;
  --notch-width: 35%;
  --notch-height: 10px;
  --home-button-size: 35px;
  --home-button-margin: 15px;
  margin: 10px 0;
  width: 100%;
  max-width: var(--max-width);
}

.phone-frame {
  position: relative;
  width: 100%;
  background-color: var(--frame-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  padding: var(--frame-thickness);
}

.phone-frame .screen {
  background-color: var(--screen-color);
  border-radius: calc(var(--border-radius) - var(--frame-thickness));
  overflow: scroll;
  aspect-ratio: var(--aspect-ratio);
  position: relative;
}

.phone-frame .screen img {
  width: 100%;
  height:auto;
  object-fit: cover;
}
@media (max-width: 750px){
  .phone {
position: inherit;
  margin: 10px auto;
}
}

/*news*/
.post-thumbnail{
width:280px;
}
.post-title{
margin-bottom:12px;
line-height: 1.4;
}
.post-title a:hover {
text-decoration: underline;
}
.post-categories{
margin-bottom:12px;
}
.post-date{
font-size:14px;
color:#808A92;
}
.post-title a{
font-size:18px;
text-decoration:none;
}
.category-item{
display: inline-flex;
align-items: center;
vertical-align: middle;
background-color: #000000;
color: #ffffff;
padding: 2px 12px 2px 13px;
font-size: 0.85em;
font-weight: bold;
margin-right: 4px;
border-radius: 30px;
}
.category-item::before{
content:"#";
font-weight:bold;
color: #ffffff;
font-size: 0.85em;
margin-right:4px;
}

.philosophy-title {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 44px;
font-weight: bold;
line-height: 1.6;
height: 60vh;
color: #000000;
position: absolute;
left: 20vw;
top: -180px;
}
.philosophy-text{
max-width: 500px;
margin-right: 0 !important;
}
.works-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.works-thumb{
border-radius:8px;
border:4px solid #000000;
}
.works-thumb img {
width: 100%;
max-width: 100%;
height: 280px;
object-fit: cover;
border-radius:4px;
}
.works-tags {
margin: 8px 0;
}
.works-tag {
display: inline-flex;
align-items: center;
vertical-align: middle;
background-color: #000000;
color: #ffffff;
padding: 2px 12px 2px 13px;
font-size: 0.85em;
font-weight: bold;
margin-right: 4px;
border-radius: 30px;
}
.works-tag::before{
content:"#";
font-weight:bold;
color: #ffffff;
font-size: 0.85em;
margin-right:4px;
}
.works-title {
font-size: 1.1em;
margin: 8px 0 4px;
}
.works-title a{
text-decoration: none;
}
.works-description {
font-size: 14px;
color: #808A92;
}
@media (max-width: 750px) {
.works-list {
grid-template-columns: 1fr;
}
.works-thumb img {
height: 180px;
}
.philosophy_wrapper{
  padding-bottom: 64px!important;
}
.philosophy-title {
font-size: 32px;
height: auto;
position: relative;
left: 0;
top: 0;
}
}
.wp-block-button__link{
border-radius: 30px!important;
}
.post-item{
display:flex;
align-items:center;
margin-bottom:24px;
}
.post-item:last-of-type{
margin-bottom:0;
}
.post-image-block{
margin-right:16px;
}
.post-thumbnail{
border-radius:8px;
border:4px solid #000000;
}
.post-thumbnail img{
border-radius:4px;
}
@media (max-width: 750px){
.post-item {
align-items: self-start;}
.post-thumbnail{
width:140px;
}
.post-title a{
font-size: 16px;
}
.category-item{
font-size: 12px;
}
}

/*ABOUT ME,SERVICE*/
.section_works-wrapper{
  padding-top: 64px;
  padding-bottom: 10vw;
  border-top:4px solid #000;
}
.section_works-inner{
  max-width: 1040px;
  margin: 0 auto;
}
.single_works_title{
  justify-content: space-between;
}
.section_works__title{
  font-size: var(--wp--preset--font-size--sm-5-xl) !important;
}

/*ABOUT ME*/
.about_name_box{
  font-weight: bold;
}
.about_name_image img{
  border-radius: 8px;
}
@media (max-width: 750px){
  .about_name_image{
    width: 70%;
  }
}