/*
Theme Name: 自分で作るテーマ
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Playfair+Display+SC:400,700,900);abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:98%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:1.0625rem;font-family:-apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif;}p{margin:1rem auto;line-height:1.5}a{color:#000}a:focus{color:#959595}body{background-color:#fff}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}small{font-size:0.8rem}sub,sup{font-size:0.8rem;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}strong{font-weight:bold}strong.red{color:#e00909;font-weight:normal}i{font-weight:normal;font-style:italic}input[type=email],input[type=text],input[type=url]{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e0e3e4;padding:0.5rem}textarea{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e0e3e4;padding:0.5rem}p{margin:5px auto}.wp-caption{}.wp-caption-text{}.sticky{}.gallery-caption{}.bypostauthor{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{}main .navigation{padding:20px;text-align: center;}#sub{padding:20px}#sub .widget{padding:20px}
/*# sourceMappingURL=style.css.map */
/* IE8〜11はメイリオ */
@media screen\0 {
  body {
    font-family: 'Segoe UI', /* Windowsの欧文 */
                 Meiryo,     /* メイリオ */
                 sans-serif;
  }
}

/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}
img{
	image-rendering: -webkit-optimize-contrast;
}

:root {
  --header_bg:#cde1fc;
  --header_nav_li_color: #ffffff;
  --header_color:#ffffff;
  --logo_color: #ffffff;
  --bg_pink:#fceeef;
  --bg_blue: #eff5ff;
  --a_color:#7e7e7e;
  --item_btn:#7398cc;
  --body_color:#7e7e7e;
  --body_bg:#ffffff;
  --footer_bg:#cde1fc;
  --footer_color1:#ffffff;
  --footer_color2:#ffffff;
  --line_pink:#ffa7ab;
  --line_blue: #7398cc;
  --sns_btn:#cedffb;
  --blog_bg: #fff5f6;
  --blog_title:#7398cc;
}

@media only screen and (min-width: 768px){
	.sp{
		display:none!important;
	}
}
@media only screen and (max-width: 767px){
	.pc{
		display:none!important;
	}
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:100%;
  margin:0 auto;
}

.slider img {
  width:100vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
スライダーのためのcss ここまで
===================================*/

body {
margin: 0;
font-family: Arial, sans-serif;
  background-color: var(--body_bg);
  color: var(--body_color);
  font-family: 'PT Serif', serif;
  width: 100%;
}

main {
  padding-top: 120px;
}

a {
  color: var(--a_color);
  text-decoration: none;
  transition: transform .3s;
}

a:hover {
  opacity: 0.6;
}

.center {
  text-align: center;
}

.campaign_center {
	display: flex; /* フレックスボックスで整列 */
  flex-direction: column; /* 子要素を縦方向に並べる */
  align-items: center; /* 水平方向で中央揃え */
  list-style: none; /* liの箇条書きマーカーを削除 */
  padding: 0; /* 余白をリセット */
  margin: 0; /* 余白をリセット */
}

.bg_pink {
  background-color: var(--bg_pink);
  padding: 0.5em 1em;
}

.bg_blue {
  background-color: var(--bg_blue);
  padding: 0.5em 1em;
}

.header {
  position: fixed;
  background-color: var(--header_bg);
  padding-bottom: 0.5em;
  text-align: center;
  width: 100%;
  z-index: 999;
}

.header nav{
  background-color: var(--header_ul_color);
}


footer {
  background-color: var(--footer_bg);
  text-align: center;
  padding: 1em;
  justify-content: space-between;
}

.footer_nav {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer_nav a strong {
  color:  var(--footer_color1);
}

footer ul li {
  padding: 0.5em;
}
.footer_nav li span.menu-item-description {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.5em;
  color: var(--header_nav_span_color);
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: var(--logo_color);
  display: block;
}

.header_nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}
  
.header_nav li {
  padding: 0.2em 1em;
  box-sizing: border-box;
  text-align: center;
}

.header_nav li strong{
  display: block;
  text-align: center;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--header_nav_li_color);
}

.header_nav li span.menu-item-description,
.footer_nav li span.menu-item-description{
  display: block;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--header_nav_span_color);
  margin-top: 0.5em;
}

.header_nav a,
a {
  transition: .3s;
  text-decoration: none;
}

.header_nav a:hover,
a:hover {
  opacity: 0.6;
}

.title {
  text-align: center;
  margin: 1em 0 0.5em 0;
  font-size: 1.5em;
}

.title span {
  font-size: 0.7em;
  display: block;
  margin-top: 0.5em;
}

.shop_info {
  width: 60%;
  line-height: 1.3em;
}

.shop_info {
  margin: auto;
  text-align: left;
}

.shop_info table {
  margin: 1em auto;
  width: 80%;
}

.studio a ,
.line img {
  width: 50%;
}

.shop_info table th,
.shop_info table td {
  padding: 0.5em 0;
  font-weight: normal;
}

.price {
  width: 100%;
  line-height: 1.3em;
  margin: auto;
  text-align: left;
}

.price table {
  margin: 1em auto;
  width: 50%;
}

.price table th,
.price table td {
  padding: 0.5em 0;
  font-weight: normal;
}
.shop_img {
  width: 90%;
  text-align: center;
  margin: auto;
}

.shop_img img {
  width: 25%;
  margin: 0.5em;
}

.map {
  text-align: center;
}

.result-title {
  margin: 1em;
  font-size: 1.8em;
}

.gallery {
  width: 60%;
  margin: 1em auto;
  justify-content: center;
}
  
.gallery img {
  width: 100%;
  padding: 0.5em;
}

.gallery p {
  font-size: 1.3em;
  margin: 0.5em 0;
}

.shop_info {
  width: 60%;
  margin: auto;
  text-align: left;
}
  
.shop_info table {
  margin: 1em auto;
  width: 100%;
}

.shop_info table th,
.shop_info table td {
  padding: 0.5em 0;
}

  
.shop_img {
  width: 90%;
  text-align: center;
  margin: auto;
}
  
.shop_img img {
  width: 25%;
  margin: 0.5em;
}
  
.map {
  text-align: center;
  width: 80%;
  height: 400px;
  margin: 2em auto;
}
  
.result-title {
  margin: 1em;
  font-size: 1.8em;
}
  
.pro {
  width: 90%;
  display: flex;
  margin: auto;
  justify-content: center;
}

.pro img {
  width: 30%;
}

.item {
  display: inline-block;
  width: 30%;
  margin: 0.5em;
}

.campaign_item {
  display: inline-block;
  width: 40%;
  margin: 0.5em;
}

.campaign_item img,
.item img,
.room img,
.studio img,
iframe {
  width: 100%;
}

.sns, .sns2 {
  display: flex;
  justify-content: center;
}

.sns a {
  margin: 1em;
  justify-content: center;
  align-items: center;
  padding: 1em 0.5em;
  border: 1px solid var(--sns_btn);
  box-shadow: 5px 5px   var(--sns_btn);
  background-color: #fff;
}

.sns2 a {
  margin: 1em;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: 1px solid  var(--sns_btn);
  box-shadow: 5px 5px   var(--sns_btn);
  width: 300px;
  background-color: #fff;
}

.sns_a {
  display: flex;
  width: 300px;
}

.room {
  width: 25%;
  padding: 0.5em;
}

.room_p {
  text-align: center;
}

.studio {
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
  margin: auto;
}

.icon_wrap {
  margin-right: 1em;
}

.contents {
  max-width: 1100px;
  width: 100%;
  margin: 1em auto;
  padding: 1em;
}

.menu-btn {
  display: none;
}

.title2 {
  text-align: left;
  border-bottom: 3px solid var(--line_blue);
  padding: 0.5em;
  line-height: 1.3;
}

.title3 {
  text-align: left;
  padding: 0.5em;
}

.li_p {
  padding: 0.5em;
}

.guide {
  padding-right: 1em;
  color: var(--line_blue);
}

.frame {
  border: 2px solid var(--line_blue);
  padding: 1em;
  margin-top: 2em;
}

.line {
  width: 50%;
  justify-content: center;
  margin: 1em auto;
}


h2 {
  font-size: 1.2em;
}

.price table th,
.price table td {
  padding: 0.5em;
  border-bottom: 1px solid var(--line_blue);
}

.logo img {
	width: 100px;
}

.madori img {
	width:50%;
}

.mb {
	margin-bottom: -30px;
}

.list_blog {
  width: 100%;
}

.list_blog img {
  width: 100%;
  margin: auto;
  display: block;
}

.blog_title {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--blog_title);
}

.list {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  justify-content: start;
}

.blog1 {
  width: 30%;
  background-color: var(--blog_bg);
  box-sizing: border-box;
  padding: 0.5em 1em;
  margin-right: 5%;
  margin-bottom: 1em;
}

.blog1:nth-child(3n) {
  margin-right: 0;
}

.single_title {
  font-size: 1.5em;
  margin-left: 0.5em;
}

.single_sentence {
  margin: 0.5em 1em;
}

.left {
  text-align: left;
}

.item_category {
  margin-top: 30px;
}

.item_category span {
  color: var(--item_btn);
}

.item_category a {
  margin: 1em;
}

.studio_kagu {
	display:block;
}

.red{
  color: red;
}


@media screen and (min-width: 761px) {
  .header_nav {
      list-style: none;
      justify-content: center;
      display: flex;
	  margin-top: -15px;
	  position: relative;
	  z-index: 100;
  }
}

@media screen and (max-width: 760px) {
  .logo {
    margin-bottom: 0;
    font-size: 0.7em;
    }

  header{
    text-align: right;
  }
  
  main {
    padding-top: 70px;
  }

  .title {
    font-size: 1.5em;
  }

  .sns a {
    margin: 0.5em;
    width: 30%;
    display: block;
  }
  
  h2 {
    font-size: 1em;
  }

  .sns_center{
    text-align: center;
  }

  .sns {
    display: flex;
  }

  .item img {
      width: 50%;
  }

  .item,
  .shop_info {
      width: 90%;
  }

  .map {
      width: 100%;
      height: 300px;
  }

  .pro {
      display: inline-block;
  }

  .room,
  .gallery img {
      width: 45%;
  }

  .room img,
  .studio a {
      width: 100%;
  }

  .line img {
      width: 100%;
  }
  
  .studio {
      padding: 0;
  }
	.shop_info table td {
 		text-align: left;
		margin-left:1em;
	}

    /* Nav items */
    .menu {
      list-style: none;
      position: absolute;
      width: 100%;
      height: calc(100vh - 69px);
	  overflow:scroll;
      top: 0;
      left: 0;
      margin-top: 69px;
      padding: 0 0 10px 0;
      clear: both;
      background: var(--header_bg);
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
      transform: scale(1, 0);
      transform-origin: top;
    }
    
    /* Hamburger menu button */
    .menu-btn:checked ~ .menu {
      transform: scale(1, 1);
      transform-origin: top;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    /* Hamburger menbu text */
    .menu a {
      text-decoration: none;
      font-weight: 500;
      letter-spacing: 2px;
      font-size: 16px;
      text-transform: capitalize;
      color: var(--body_color);
      opacity: 0;
      transition: 0.5s;
    }
    
    .menu li {
      border-top: 1px solid var(--line_blue);
      padding: 15px 0;
      margin: 0 54px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .menu-btn:checked ~ .menu a,
    .menu-btn:checked ~ .menu li {
      opacity: 1;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
    }
    
    .menu-btn {
      display: none;
    }
    
    .menu-icon {
      display: inline-block;
      position: relative;
      cursor: pointer;
      padding: 24px 14px;
      -webkit-tap-highlight-color: var(--body_color);
    }
    
    .navicon {
      background: var(--line_blue);
      display: block;
      height: 3px;
      width: 26px;
      position: relative;
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    .navicon:before,
    .navicon:after {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      background: var(--line_blue);
      transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    
    .navicon:before {
      top: 9px;
    }
    
    .navicon:after {
      bottom: 9px;
    }
    
    /* Hamburger Menu Animation Start */
    .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
    .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
    .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
      top: 0;
    }
    .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      bottom: 0;
    }
    
    .menu-btn:checked ~ .menu-icon .navicon {
      background: rgba(0, 0, 0, 0);
      transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    /* Hamburger Menu Animation End */
    
    /* Navbar Container */
    .navtext-container {
      width: 100%;
      height: 52px;
      position: absolute;
      box-sizing: border-box;
      display: flex;
      /* justify-content: center; */
      align-items: center;
      left: 0;
      padding-left: 1.5em;
    }
    
    /* Navbar Text */
    .navtext {
      position: absolute;
      text-transform: uppercase;
      color: var(--body_color);
      letter-spacing: 4px;
      font-size: 20px;
    }
  
    .header_nav li span.menu-item-description,
    .item p{
        font-size: 0.8em;
    }

    .header_nav li strong {
        font-size: 1em;
    }

    .header {
        padding: 0.5em;
        text-align: right;
    }

    .contents {
        padding: 0.5em;
    }

    .h50 {
        height: 50vh;
    }

    iframe {
        height: 250px;
    }

    .gallery {
        margin: 1em auto;
        padding: 1em;
        justify-content: center;
        width: 100%;
    }
    .center{
        flex-wrap: wrap;
        justify-content: center;
    }
    .item{
        width: 49%;
        margin: 0.5em 0;
        margin-right: 2%;
    }
    .item:nth-child(even){
        margin-right: 0;
    }
    .item img{
        width: 100%;
        padding: 0;
    }

    .item_li {
      display: flex;
    }

    .shop_info {
      font-size: 1em;
    }

    .gallery p {
      font-size: 1.2em;
      margin: 0.5em 0;
    }

    .shop_info th {
      width: 25%; 
    }

    .shop_info table th,
    .shop_info table td {
      display: block;
    }
    
    .price table,
    .madori img{
      width: 100%;
    }
    
    .price table th,
    .price table td {
      padding: 0.5em;
      border-bottom: 1px solid var(--line_blue);
    }
	
    .logo img {
      width: 50px;
    }

    .footer_nav {
      display: block;
    }

    .footer_nav li span.menu-item-description {
      display: none;
    }

    .list {
      display: block;
    }

    .blog1 {
      width: 100%;
    }

    .single_title {
      font-size: 1.3em;
    }

    .icon_wrap {
      margin-right: 0;
    }

    .sns_p {
      font-size: 0.8em;
    }
	
	.mobile_left {
		text-align:left;
		padding:0 0.5em;
	}
	
	.campaign_item {
		width: 80%;
	  }
}

/* ============================
   🎀 共通カードスタイル（SNS / STUDIO / MAP）
============================ */
.contents.bg_blue,
.contents .bg_blue {
  background-color: var(--bg_blue, #eff5ff);
  border-radius: 20px;
  padding: 2em 1em;
  margin: 2em auto;
  box-shadow: 0 6px 14px rgba(135, 206, 250, 0.3);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* 共通タイトル */
.contents.bg_blue .title,
.contents .bg_blue .title {
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 1em;
}

/* ============================
   ✦ STUDIO 専用（キラキラあり）
============================ */
.contents .bg_blue:has(> .studio)::before,
.contents .bg_blue:has(> .studio)::after {
  content: "✦";
  position: absolute;
  font-size: 44px;
  color: rgba(92, 160, 224, 0.18);
  z-index: 0;
  pointer-events: none;
}
.contents .bg_blue:has(> .studio)::before { top: 20px; left: 25px; }
.contents .bg_blue:has(> .studio)::after  { bottom: 20px; right: 25px; }

/* STUDIO グリッド */
.contents .bg_blue .studio {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  justify-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .contents .bg_blue .studio {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

/* STUDIO カード */
.contents .bg_blue .room {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(135,206,250,0.25);
  overflow: hidden;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
  width: 90% !important;
  max-width: 460px !important;
  position: relative;
  z-index: 1;
}
.contents .bg_blue .room:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(135,206,250,0.35);
}
.contents .bg_blue .room img {
  display: block;
  width: 92% !important;
  margin: 12px auto 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(135,206,250,0.2);
}
.contents .bg_blue .room_p {
  font-size: 1em;
  font-weight: bold;
  color: #2a5fa8;
  padding: 0.8em;
  line-height: 1.4;
}
.contents .bg_blue .room_p span {
  display: block;
  font-size: 0.85em;
  color: #5ca0e0;
  margin-top: 0.3em;
}

/* ============================
   🎀 SNS 専用（あなたのコードベース）
============================ */
.contents.sns_section .sns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.contents.sns_section .sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.2em;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--sns_btn, #cedffb);
  box-shadow: 4px 4px 0 var(--sns_btn, #cedffb);
  transition: transform .2s ease, box-shadow .2s ease;
}
.contents.sns_section .sns a:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--sns_btn, #cedffb);
  opacity: 0.9;
}

.contents.sns_section .icon_wrap {
  margin-right: 0.6em;
}

.contents.sns_section .sns_p {
  font-size: 0.85em;
  color: #5ca0e0;
  margin-left: 0.5em;
}

/* ============================
   🎀 MAP 専用（キラキラなし）
============================ */
.contents .bg_blue.center iframe,
.contents.bg_blue.center iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(92,160,224,0.25);
}
@media (max-width: 767px) {
  .contents .bg_blue.center iframe,
  .contents.bg_blue.center iframe {
    height: 300px;
  }
}

/* ============================
   🎀 SNSボタン STUDIO風カードに変更
============================ */
.contents.sns_section .sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #e0eaf9;
  box-shadow: 0 4px 12px rgba(135,206,250,0.25); /* ← ふわっとした影 */
  transition: transform .3s ease, box-shadow .3s ease;
}

.contents.sns_section .sns a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(135,206,250,0.35); /* ← ホバー時も柔らかく */
  opacity: 0.95;
}

/* アイコンとテキスト */
.contents.sns_section .icon_wrap {
  margin-right: 0.6em;
  color: #2a5fa8;
}

.contents.sns_section .sns_p {
  font-size: 0.85em;
  color: #5ca0e0;
  margin-left: 0.5em;
}

/* ============================
   🎀 SNSボタン（モバイル2つ横並びで縦改行）
============================ */
@media (max-width: 767px) {
  /* SNS全体：横並びを維持 */
  .contents.sns_section .sns {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;  /* 折り返さず2つ並ぶ */
    gap: 10px;
  }

  /* 各ボタン */
  .contents.sns_section .sns a {
    flex-direction: column;   /* 中身を縦並び */
    align-items: center;
    justify-content: center;
    padding: 1em;
    width: 48%;               /* 横に2つ収まるよう調整 */
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(135,206,250,0.25);
  }

  /* アイコンとサービス名 */
  .contents.sns_section .icon_wrap {
    margin: 0 0 0.4em 0;
    text-align: center;
  }
  .contents.sns_section .icon_wrap p {
    margin: 0.3em 0 0;
    font-size: 1em;
    font-weight: bold;
    color: #2a5fa8;
  }

  /* 「こちらから」を2行目に */
  .contents.sns_section .sns_p {
    display: block;   /* 強制改行 */
    margin: 0.3em 0 0;
    font-size: 0.85em;
    color: #5ca0e0;
    text-align: center;
  }
}

/* ============================
   🎀 スタジオ一覧 隙間リセット版
============================ */
.contents.studio_list .studio {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .contents.studio_list .studio {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (min-width: 1024px) {
  .contents.studio_list .studio {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

/* カード */
.contents.studio_list .studio .room {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(135,206,250,0.2);
  overflow: hidden;
  text-align: center;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;   /* ← 25%固定を上書き */
}

/* 画像 */
.contents.studio_list .studio .room img {
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
  border-radius: 6px 6px 0 0;
}

/* タイトル */
.contents.studio_list .studio .room_p {
  font-size: 0.95em;
  font-weight: bold;
  color: #2a5fa8;
  padding: 0.6em;
  margin: 0;
  line-height: 1.4;
}

/* ============================
   🎀 スタジオ一覧 隙間リセット版（PC2列）
============================ */
.contents.studio_list .studio {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .contents.studio_list .studio {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (min-width: 1024px) {
  .contents.studio_list .studio {
    grid-template-columns: repeat(2, 1fr) !important; /* PCでも2列 */
    gap: 12px !important;
  }
}

/* カード */
.contents.studio_list .studio .room {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(135,206,250,0.2);
  overflow: hidden;
  text-align: center;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;   /* ← 25%固定を上書き */
}

/* 画像 */
.contents.studio_list .studio .room img {
  display: block;
  width: 100% !important;
  height: auto;
  margin: 0 !important;
  border-radius: 6px 6px 0 0;
}

/* タイトル */
.contents.studio_list .studio .room_p {
  font-size: 0.95em;
  font-weight: bold;
  color: #2a5fa8;
  padding: 0.6em;
  margin: 0;
  line-height: 1.4;
}

/* ============================
   STUDIO 専用 ✦ キラキラ
============================ */
.contents.bg_blue.studio_wrap::before,
.contents.bg_blue.studio_wrap::after {
  content: "✦";
  position: absolute;
  font-size: 44px;
  color: rgba(92, 160, 224, 0.18);
  z-index: 0;
  pointer-events: none;
}
.contents.bg_blue.studio_wrap::before { top: 20px; left: 25px; }
.contents.bg_blue.studio_wrap::after  { bottom: 20px; right: 25px; }

/* ============================
   🎀 STUDIO 2列 & キラキラ安定版
============================ */
.contents.bg_blue.studio_wrap {
  position: relative;
  overflow: hidden;
  padding: 2em 1em 5em; /* 下余白でキラキラが隠れない */
}

.contents.bg_blue.studio_wrap::before,
.contents.bg_blue.studio_wrap::after {
  content: "✦";
  position: absolute;
  font-size: 44px;
  color: rgba(92, 160, 224, 0.18);
  pointer-events: none;
  line-height: 1;
}
.contents.bg_blue.studio_wrap::before { top: 20px; left: 25px; }
.contents.bg_blue.studio_wrap::after  { bottom: 20px; right: 25px; }

/* STUDIO グリッド */
.contents.bg_blue.studio_wrap .studio {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
@media (min-width: 768px) {
  .contents.bg_blue.studio_wrap .studio {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* STUDIO カード */
.contents.bg_blue.studio_wrap .room {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(135,206,250,0.25);
  overflow: hidden;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
  width: 100% !important; /* ← 古い width:25% を打ち消す */
}
.contents.bg_blue.studio_wrap .room:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(135,206,250,0.35);
}
.contents.bg_blue.studio_wrap .room img {
  display: block;
  width: 92% !important;
  margin: 12px auto 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(135,206,250,0.2);
}
.contents.bg_blue.studio_wrap .room_p {
  font-size: 1em;
  font-weight: bold;
  color: #2a5fa8;
  padding: 0.8em;
}

@media (max-width: 767px) {
  /* キラキラを前面に出す */
  .bg_blue.studio_wrap::before,
  .bg_blue.studio_wrap::after {
    z-index: 10 !important;
  }

  /* 各roomカードを少し下のレイヤーに */
  .bg_blue.studio_wrap .room {
    position: relative;
    z-index: 1 !important;
  }

  /* STUDIOコンテナ全体の下余白も確保 */
  .bg_blue.studio_wrap {
    padding-bottom: 6em !important;
  }
}

/* ============================
   💎 PRICE（料金表ページ）最終版
   ┗ 料金表テーブル：青背景
     補足テーブル：背景なし
============================ */

.contents .price {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 14px rgba(135,206,250,0.25);
  padding: 2.5em 1.5em;
  margin: 2em auto;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* タイトル（中央寄せ・シンプル） */
.contents .price h2 {
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  color: #2a5fa8;
  margin-bottom: 1em;
  position: relative;
  letter-spacing: 0.03em;
}

/* ─────────────────────────────
   金額テーブル（最初の table のみ）
───────────────────────────── */
.contents .price table:first-of-type {
  width: 90%;
  margin: 0 auto 1.5em;
  border-collapse: collapse;
  text-align: center;
  background: #f8fbff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(135,206,250,0.15);
}

/* ヘッダー */
.contents .price table:first-of-type th {
  background: var(--line_blue, #7398cc);
  color: #fff;
  font-weight: normal;
  padding: 0.8em;
  font-size: 1em;
}

/* 通常セル */
.contents .price table:first-of-type td {
  padding: 0.7em;
  border-bottom: 1px solid #d0e3fa;
  font-size: 0.95em;
  color: #333;
}

/* 最後の行のボーダーなし */
.contents .price table:first-of-type tr:last-child td {
  border-bottom: none;
}

/* ─────────────────────────────
   補足テーブル（2つ目以降の table）
───────────────────────────── */
.contents .price table:not(:first-of-type) {
  width: 90%;
  margin: 0 auto;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

/* 補足文テキスト */
.contents .price p.li_p {
  font-size: 0.9em;
  line-height: 1.6;
  color: #555;
  padding: 1em 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  text-align: left;
}

/* ✦ キラキラ */
.contents .price::before,
.contents .price::after {
  content: "✦";
  position: absolute;
  font-size: 44px;
  color: rgba(92, 160, 224, 0.18);
  z-index: 0;
  pointer-events: none;
}
.contents .price::before {
  top: 20px;
  left: 25px;
}
.contents .price::after {
  bottom: 25px;
  right: 30px;
}

/* モバイル調整 */
@media (max-width: 767px) {
  .contents .price {
    padding: 1.5em 1em;
  }

  .contents .price h2 {
    font-size: 1.3em;
    margin-bottom: 0.8em;
  }

  .contents .price table:first-of-type {
    width: 100%;
  }

  .contents .price table:first-of-type th,
  .contents .price table:first-of-type td {
    font-size: 0.9em;
    padding: 0.6em;
  }

  .contents .price p.li_p {
    font-size: 0.85em;
    line-height: 1.5;
  }
}

/* ============================
   GUIDEページ
============================ */
.contents.guide {
  background: #fff;
  padding: 2.5em 1.5em;
  margin: 2em auto;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* ページタイトル */
.contents.guide h1.title {
  text-align: center;
  font-size: 1.7em;
  font-weight: bold;
  color: #2a5fa8;
  letter-spacing: 0.05em;
  margin-bottom: 1.2em;
  position: relative;
}

/* STEP見出し */
.contents.guide .title2,
.contents.rental .title2 {
  font-size: 1.1em;
  font-weight: bold;
  color: #2a5fa8;
  background: #f3f8ff;
  border-right: 3px solid var(--line_blue, #7398cc);
  border-radius: 10px;
  padding: 0.8em 1em;
  margin: 1em 0 0.8em;
  display: flex;
  align-items: center;
}

/* STEP番号 */
.contents.guide .guide {
  display: inline-block;
  color: #5ca0e0;
  font-weight: bold;
  margin-right: 0.6em;
  font-size: 1em;
  white-space: nowrap;
}

/* 通常テキスト */
.contents.guide .li_p {
  font-size: 0.95em;
  color: #555;
  line-height: 1.8;
  margin: 0.5em 0 1.2em;
}
/* 囲みフレーム（支払い・キャンセル） */
.contents.guide .frame {
  background: #f8fbff;
  border-radius: 15px;
  border: 2px solid var(--line_blue, #7398cc);
  box-shadow: 0 4px 12px rgba(135,206,250,0.2);
  padding: 2em 1.5em;
  margin-top: 3em;
  position: relative;
}

/* フレーム見出し */
.contents.guide .frame h2:first-of-type {
  border-bottom: none !important;
  padding-bottom: 0;
  margin-bottom: 0.6em;
}

/* フレーム本文 */
.contents.guide .frame p.li_p {
  background: #fff;
  border-radius: 10px;
  padding: 1em;
  line-height: 1.7;
  color: #444;
  margin: 0.8em 0;
  box-shadow: 0 2px 6px rgba(135,206,250,0.1);
}

/* 予約ボタン */
.contents.guide .sns_a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2em 1em;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #e0eaf9;
  box-shadow: 0 4px 12px rgba(135,206,250,0.25);
  transition: transform .3s ease, box-shadow .3s ease;
  width: 280px;
  margin: 1.5em auto 0;
  font-weight: bold;
  color: #2a5fa8;
}
.contents.guide .sns_a:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(135,206,250,0.35);
  opacity: 0.95;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .contents.guide {
    padding: 1.5em 1em;
  }
  .contents.guide h1.title {
    font-size: 1.4em;
  }
  .contents.guide .title2 {
    font-size: 1em;
    padding: 0.7em 0.9em;
  }
  .contents.guide .li_p {
    font-size: 0.9em;
  }
  .contents.guide .frame {
    padding: 1.5em 1em;
  }
}
/* ============================
 💙 ATTENTIONページ（FAQと統一）
============================ */


/* 各セクション */
.contents.attention > div {
  border-bottom: 1px dashed #cbdff7;
  padding: 1.8em 0;
}

.contents.attention > div:last-child {
  border-bottom: none;
}

/* タイトル */
.contents.attention .title2 {
  font-size: 1.1em;
  font-weight: 600;
  color: #2a5fa8;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 0.7em;
  border: none;
  box-shadow: none;
}

/* 注意マーク（※など） */
.contents.attention .title2 .guide {
  font-weight: 700;
  font-size: 1.1em;
  color: #6ea8e7;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  position: relative;
  top: 1px;
}

/* 本文 */
.contents.attention .li_p {
  font-size: 0.95em;
  color: #333;
  line-height: 1.9;
  margin: 0;
  padding-left: 1.8em;
  position: relative;
}

/* 左ラインで整える */
.contents.attention .li_p::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 3px;
  height: calc(100% - 0.6em);
  background: linear-gradient(180deg, #b8d4f7, #e1eeff);
  border-radius: 2px;
  opacity: 0.8;
}

/* hoverでふんわり */
.contents.attention > div:hover {
  background: #f9fbff;
  transition: background 0.3s ease;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .contents.attention {
    padding: 1.6em 1.3em;
  }
  .contents.attention .title2 {
    font-size: 1em;
  }
  .contents.attention .li_p {
    font-size: 0.9em;
    padding-left: 1.4em;
  }
}

/* ============================
 💙 FAQページ（attentionと統一）
============================ */

.contents.faq,
.contents.attention {
  max-width: 900px;
  margin: 3em auto;
  padding: 2em 2.5em;
  background: #fff;
}

/* 各Qブロック */
.contents.faq > div {
  border-bottom: 1px dashed #cbdff7;
  padding: 1.5em 0;
}

.contents.faq > div:last-child {
  border-bottom: none;
}

/* タイトル（Q） */
.contents.faq .title2 {
  font-size: 1.05em;
  font-weight: 600;
  color: #2a5fa8;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 0.5em;
  border: none;
  box-shadow: none;
}

/* Qマーク（シンプルかわいいver） */
.contents.faq .title2 .guide {
  font-weight: 700;
  font-size: 1.1em;
  color: #6ea8e7;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  position: relative;
  top: 1px;
}

/* 回答文 */
.contents.faq .li_p {
  font-size: 0.95em;
  color: #333;
  line-height: 1.9;
  margin: 0;
  padding-left: 1.8em;
  position: relative;
}

/* 回答テキストに左ラインを軽く */
.contents.faq .li_p::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 3px;
  height: calc(100% - 0.6em);
  background: linear-gradient(180deg, #b8d4f7, #e1eeff);
  border-radius: 2px;
  opacity: 0.8;
}

/* hover時ふんわり */
.contents.faq > div:hover {
  background: #f9fbff;
  transition: background 0.3s ease;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .contents.faq {
    padding: 1.5em 1.2em;
  }
  .contents.faq .title2 {
    font-size: 1em;
  }
  .contents.faq .li_p {
    font-size: 0.9em;
    padding-left: 1.4em;
  }
}

/* ============================
 💙 STUDIO詳細ページ専用（.studio-cont 配下だけ）
============================ */

/* 共通コンテナ（カード風） */
.studio-cont .contents {
  max-width: 900px;
  margin: 3em auto;
  padding: 2.3em 2.5em;
  background: #fff;
  border: 2px solid #b3d0f7;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(173, 206, 255, 0.25);
  transition: background 0.3s ease;
}
.studio-cont .contents:hover {
  background: #f9fbff;
}

/* 上部テキストブロック */
.studio-cont .services.center {
  text-align: center;
  background: #f8fbff;
  border: 2px solid #b3d0f7;
  border-radius: 18px;
  padding: 2.5em 2em;
  max-width: 900px;
  margin: 2.5em auto 3em;
  box-shadow: 0 8px 20px rgba(173, 206, 255, 0.25);
}
.studio-cont .services.center .pro { font-size: 1.05em; line-height: 1.9; }
.studio-cont .services.center .mobile_left { text-align: left; }

/* タイトル（影なし指定） */
.studio-cont .title2 {
  font-size: 1.1em;
  font-weight: 600;
  color: #2a5fa8;
  margin-bottom: 1em;
  border: none;
  box-shadow: none;   /* ← 影なし */
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* 間取り・家具 */
.studio-cont ul.madori {
  display: flex;
  flex-direction: column;   /* 縦に1枚ずつ並べる */
  align-items: center;      /* 中央寄せ */
  gap: 28px;                /* 画像の間隔を少し広めに */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}
.studio-cont ul.madori img {
  display: block;
  width: 100%;
  max-width: 720px;         /* 横幅を制限してバランスよく */
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(173, 206, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 家具画像と説明 */
.studio-cont .studio_kagu { text-align: center; margin-top: 1.5em; }
.studio-cont .studio_kagu img {
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(173, 206, 255, 0.3);
  margin-bottom: 0.8em;
}
.studio-cont .studio_kagu p { font-size: 0.95em; color: #444; line-height: 1.7; }

/* 本文 */
.studio-cont .contents p { color: #333; font-size: 0.95em; line-height: 1.9; }

/* 💙 スタジオ紹介（画像2列：PC） */
.studio-cont ul.center {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  justify-items: center;
  padding: 0;
  list-style: none;
}
.studio-cont ul.center li.item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.studio-cont ul.madori img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(173, 206, 255, 0.45);
}
.studio-cont ul.center li.item img {
  width: 100%;
  height: auto;
  display: block;
}

/* モバイルでの調整 */
@media (max-width: 767px) {
  .studio-cont ul.madori img {
    max-width: 100%;
    border-radius: 10px;
  }
}

/* ============================
 💙 STUDIO詳細ページ 上部セクション ✦キラキラ改良版
============================ */
.studio-cont .services.center {
  position: relative;
  background: #f8fbff;
  border: 2px solid #b3d0f7;
  border-radius: 18px;
  padding: 2.5em 2em;
  max-width: 900px;
  margin: 2.5em auto 3em;
  box-shadow: 0 8px 20px rgba(173, 206, 255, 0.25);
  overflow: hidden;
}

/* ✦キラキラ装飾 */
.studio-cont .services.center::before,
.studio-cont .services.center::after {
  content: "✦";
  position: absolute;
  font-size: 56px;
  color: rgba(92, 160, 224, 0.3); /* ←少し濃く */
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.studio-cont .services.center::before {
  top: 15px;
  left: 25px;
}

.studio-cont .services.center::after {
  bottom: 15px;
  right: 25px;
}

/* テキストは最前面 */
.studio-cont .services.center .pro {
  position: relative;
  z-index: 2;
  font-size: 1.05em;
  line-height: 1.9;
  color: #333;
}
.studio-cont .services.center .mobile_left {
  text-align: left;
}

/* 💡 モバイル対応（かぶり防止・位置調整） */
@media (max-width: 767px) {
  .studio-cont .services.center {
    padding: 2em 1.2em 2.5em;
  }
  .studio-cont .services.center::before,
  .studio-cont .services.center::after {
    font-size: 40px;
    color: rgba(92, 160, 224, 0.35);
    opacity: 0.85;
  }
  .studio-cont .services.center::before {
    top: -10px;
    left: 10px;
  }
  .studio-cont .services.center::after {
    bottom: -10px;
    right: 10px;
  }
  .studio-cont .services.center .pro {
    font-size: 0.95em;
    line-height: 1.8;
  }
}

@media (max-width: 767px) {
  .studio-cont .services.center {
    padding: 2.3em 1.5em 3em;
    overflow: hidden; /* 枠内でキラキラを収める */
  }

  /* ✦ 枠の内側にふんわり配置 */
  .studio-cont .services.center::before,
  .studio-cont .services.center::after {
    font-size: 38px;
    color: rgba(92, 160, 224, 0.4); /* 少し濃くして見やすく */
    opacity: 0.95;
    position: absolute;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  /* 左上のキラキラ */
  .studio-cont .services.center::before {
    top: 8px;   /* 枠内 */
    left: 12px;
  }

  /* 右下のキラキラ */
  .studio-cont .services.center::after {
    bottom: 10px; /* 枠内 */
    right: 12px;
  }

  /* テキスト（上に配置してかぶらないように） */
  .studio-cont .services.center .pro {
    position: relative;
    z-index: 2;
    font-size: 0.95em;
    line-height: 1.8;
    color: #333;
  }
}
/* ============================
 💙 STUDIO詳細ページ 写真ギャラリー
============================ */
.studio-cont .contents ul.center {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-items: center;
  margin: 1em auto;
  padding: 0;
  list-style: none;
}

/* 各アイテム */
.studio-cont .contents ul.center .item {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(135, 206, 250, 0.2);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.studio-cont .contents ul.center .item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(135, 206, 250, 0.3);
}

.studio-cont .contents ul.center .item img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* 📱モバイルでは2列 */
@media (max-width: 767px) {
  .studio-cont .contents ul.center {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* 💻PCでは3列 */
@media (min-width: 768px) {
  .studio-cont .contents ul.center {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ====== studio-cont：間取り図・家具サイズは常に1枚表示 ====== */
.studio-cont .studio-madori ul.madori {
  display: block !important;   /* どんなgrid / flex指定も無効化 */
  list-style: none;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 900px;            /* 任意：横幅の上限 */
}
.studio-cont .studio-madori ul.madori > li {
  display: block !important;   /* inline-blockやgrid子指定を無効化 */
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}
.studio-cont .studio-madori ul.madori > li img {
  display: block !important;
  width: 100% !important;      /* 50%指定などを無効化 */
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* （保険）他のページの3列指定などを食らっても .studio-madori では無効に */
.studio-cont .studio-madori ul.madori.center { 
  display: block !important;
}

/* ====== studio-cont：スタジオ紹介はPCで3列、SPで2列 ====== */
.studio-cont .studio-gallery ul.center {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 1024px) {
  .studio-cont .studio-gallery ul.center {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 既存の .item { width:30% } を打ち消し */
.studio-cont .studio-gallery .item {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}
.studio-cont .studio-gallery .item img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 10px;
}

/* 💙 rental.php の画像一覧を自然に整列（gridなし） */
.rental .item_li {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; 
  gap: 0; /* gapは使わずmarginで制御 */
  list-style: none;
  padding: 0;
  margin: 0 auto 2em;
}

/* 各アイテム */
.rental .item_li .item {
  width: 32%; /* 3列（100% ÷ 3 - 少し余白） */
  margin-bottom: 20px;
  text-align: center;
}

/* 📱モバイルは2列 */
@media (max-width: 767px) {
  .rental .item_li .item {
    width: 48%; /* 2列（100% ÷ 2 - 少し余白） */
    margin-bottom: 15px;
  }
}

/* 📸 画像だけ角丸 */
.rental .item_li .item img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(150, 180, 255, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rental .item_li .item img:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(135, 206, 250, 0.25);
}

/* 写真下のテキスト */
.rental .item_li .item p {
  font-size: 0.9em;
  color: #333;
  margin: 0.6em 0 0.8em;
  line-height: 1.4;
}

/* ============================
 💙 TOPページ：RENTAL ITEM セクション
============================ */
.contents .item_li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 2em auto;
}

/* 各アイテム（PCは3列） */
.contents .item_li .item {
  width: 30%;
  text-align: center;
}

/* 📱モバイルは2列 */
@media (max-width: 767px) {
  .contents .item_li .item {
    width: 46%;
  }
}

/* 📸 画像だけ角丸・影付きでかわいく */
.contents .item_li .item img {
  width: 100%;
  height: auto;
  border-radius: 14px; /* ←角丸 */
  box-shadow: 0 3px 10px rgba(150, 180, 255, 0.15);
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーでふんわり浮く */
.contents .item_li .item img:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(135, 206, 250, 0.25);
}

/* タイトル（写真下） */
.contents .item_li .item p.name {
  font-size: 0.9em;
  color: #333;
  margin: 0.6em 0 0.8em;
  line-height: 1.4;
}

/* SEE MOREリンクも統一感 */
.contents .center a[href*="rental"] {
  display: inline-block;
  background: linear-gradient(180deg, #f8fbff 0%, #e9f3ff 100%);
  border: 2px solid var(--line_blue, #7398cc);
  border-radius: 12px;
  padding: 0.7em 1.5em;
  font-weight: bold;
  color: #2a5fa8;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(135,206,250,0.25);
  transition: all 0.3s ease;
  margin-top: 1.5em;
}
.contents .center a[href*="rental"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(135,206,250,0.35);
}