@charset "UTF-8";

#heading {
  padding-top:70px;
  margin-bottom:10px;
}
#heading > h1 {
  text-align:right;
  color: #7a7a7a; /* 追加：見出しの色をグレーに */
}
#heading > h1 br {
  display:none;
}

/*-------------------------------------
  main-img
-------------------------------------*/
#top-wrapper {
  width:100%;
  height:auto;
  position:relative;
}
#top-wrapper::after {
  display:block;
  content:'';
  width:100%;
  height:calc(100% + 150px);
  position:absolute;
  top:-150px;
  left:0;
  /* 背景パターンの色味が強い場合は、不透明度を下げるか消す */
  background:url('../img/common/bg1.png');
  background-repeat:repeat;
  opacity:.3; /* 元の0.15から少し薄くして上品に */
}

#main-img {
  width:100%;
  height:auto;
  padding-bottom:50px;
  position:relative;
  z-index:1;
  box-sizing:border-box;
}
.swiper-container {
  width:70%;
  height:80vh;
  margin:0 0 0 auto!important;
  position:relative;
  z-index:1;
}
.slide-img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.slide-img picture,
.slide-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 4s linear 0s 1 normal both;
}
@keyframes zoomUp {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.slideno2 picture,
.slideno2 img {
  object-position:bottom center;
}
.swiper-pagination {
  z-index: 4;
}

.main-title {
  width:30%;
  height:auto;
  position:absolute;
  top:45%;
  left:5%;
  transform:translate(0,-50%);
  box-sizing:border-box;
  z-index:2;
}
.main-title-lead {
  width:100%;
  height:auto;
  margin-bottom:30px;
}
.wrap {
  /*width:100%;
  height:auto;
  margin:10px 0 20px 0;
  padding-left:7.5%;
  box-sizing:border-box;*/
  width:100%;
  height:auto;
  margin:10px 0 20px 0;
  padding-left:7.5%;
  box-sizing:border-box;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 行と行の隙間を少し広げて抜け感を出す */
}

/* メインタイトルのサブテキスト（大阪本町の〜） */
.main-title h2 {
  font-size:1.4rem;
  color:#7a7a7a; /* ゴールド/ブラウンからグレーへ */
}
.text {
  margin:0;
  white-space:nowrap;
  opacity:0;
}

/* --- 1行目：YOKOHAMA SAKURAGICHO --- */
.text-2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.3em; /* 文字間隔を広めに */
  color: #7a7a7a; /* ミディアムグレー */
}

/* --- 2行目：HAIR REMOVAL SALON --- */
.text-1 {
  font-family: 'Cinzel', sans-serif;
  font-weight: 300; /* ★重要：太字ではなく「極細」にするのが今風 */
  font-size: 3.5rem !important; /* 思い切り大きくする */
  letter-spacing: 0.1em;
  line-height: 0.4;
  color: #4a4a4a;
}

/* --- 3行目：日本語（桜木町の〜） --- */
.text-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* 細め */
  font-size: 1.4rem; /* ★重要：日本語は小さくする */
  letter-spacing: 0.5em; /* ★重要：文字間隔を劇的に広げる */
  color: #7a7a7a; /* くすみピンクをアクセントに */
  margin-left: 5px; /* 全体のバランス微調整 */
}

/* 一文字ずつのアニメーション用（既存のまま） */
.text-move {
  opacity: 0;
  display: inline-block;
  transform: scale(1.25) translate(8px, 4px);
}
.text-move:nth-child(1) { transition: opacity 1.2s ease 0.1s, transform 1.2s ease 0.2s; }
.text-move:nth-child(2) { transition: opacity 1.2s ease 0.2s, transform 1.2s ease 0.25s; }
.text-move:nth-child(3) { transition: opacity 1.2s ease 0.25s, transform 1.2s ease 0.3s; }
.text-move:nth-child(4) { transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.35s; }
.text-move:nth-child(5) { transition: opacity 1.2s ease 0.35s, transform 1.2s ease 0.4s; }
.text-move:nth-child(6) { transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.45s; }
.text-move:nth-child(7) { transition: opacity 1.2s ease 0.45s, transform 1.2s ease 0.5s; }
.text-move:nth-child(8) { transition: opacity 1.2s ease 0.5s, transform 1.2s ease 0.55s; }
.text-move:nth-child(9) { transition: opacity 1.2s ease 0.55s, transform 1.2s ease 0.6s; }
.text-move:nth-child(10) { transition: opacity 1.2s ease 0.6s, transform 1.2s ease 0.65s; }
.text-move:nth-child(11) { transition: opacity 1.2s ease 0.65s, transform 1.2s ease 0.7s; }
.text-move:nth-child(12) { transition: opacity 1.2s ease 0.7s, transform 1.2s ease 0.75s; }
.text-move:nth-child(13) { transition: opacity 1.2s ease 0.75s, transform 1.2s ease 0.8s; }
.text-move:nth-child(14) { transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.85s; }
.text-move:nth-child(15) { transition: opacity 1.2s ease 0.85s, transform 1.2s ease 0.9s; }
.text-move:nth-child(16) { transition: opacity 1.2s ease 0.9s, transform 1.2s ease 0.95s; }
.text-move:nth-child(17) { transition: opacity 1.2s ease 1s, transform 1.2s ease 1.05s; }
.text-move:nth-child(18) { transition: opacity 1.2s ease 1.05s, transform 1.2s ease 1.1s; }
.text-move:nth-child(19) { transition: opacity 1.2s ease 1.1s, transform 1.2s ease 1.15s; }
.text-move:nth-child(20) { transition: opacity 1.2s ease 1.15s, transform 1.2s ease 1.2s; }
.text-move:nth-child(21) { transition: opacity 1.2s ease 1.2s, transform 1.2s ease 1.25s; }
.text-move:nth-child(22) { transition: opacity 1.2s ease 1.25s, transform 1.2s ease 1.3s; }
.text-move:nth-child(23) { transition: opacity 1.2s ease 1.3s, transform 1.2s ease 1.35s; }

.text.active { opacity: 1; }
.text.active .text-move {
  opacity: 1;
  transform: scale(1) translate(0);
}
/* --- PC向け（基本スタイル） --- */
.main-title-feature {
  display: flex; /* 横一列に並べる場合 */
  justify-content: left; /* 中央揃え（お好みで） */
  gap: 20px; /* 画像間の余白（PC時） */
}

.main-title-feature img {
  max-width: 100%;
  height: auto;
}

/* --- スマホ向け（画面幅679px以下の場合） --- */
@media (max-width: 679px) {
  .main-title-feature {
    display: grid; /* グリッドレイアウトに変更 */
    grid-template-columns: repeat(2, 1fr); /* 均等に2列に配置 */
    gap: 10px; /* 画像間の上下左右の余白（SP時・お好みで調整） */
  }

  .main-title-feature img {
    width: 100%; /* グリッドの枠いっぱいに広げる */
  }
}
/*
.main-title-feature {
  width:90%;
  height:auto;
  display:flex;
  gap: 12px;
}
.main-title-feature > img {
  width:40%;
}*/
.main-title-bg {
  width:20%;
  height:100%;
  position:absolute;
  top:50%;
  left:2.5%;
  transform:translate(0,-50%);
  opacity:.1; /* 少し薄く */
}
.main-title-bg img {
  width:auto;
  height:100%;
}

/*-------------------------------------
  concept
-------------------------------------*/
#concept {
  width:100%;
  height:auto;
  padding:150px 0 100px 0;
  position:relative;
  z-index:1;
}
.concept {
  width:90%;
  height:auto;
  max-width:1280px;
  margin:0 auto;
}
.concept-cols {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.concept-img {
  width:45%;
  height:auto;
  position:relative;
}
.concept-inner {
  width:50%;
  height:auto;
}
.concept-title {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column-reverse;
  line-height:1.4;
  margin-bottom:30px;
}
/* CONCEPTなどの英字見出し */
.concept-title > span {
  font-size:6rem;
  font-family: "Montserrat", serif;
  letter-spacing:.05em;
  color:#d4c4c2; /* くすみピンク */
}
.concept-title > h2 {
  font-size:1.2rem;
  font-weight:normal;
  color:#7a7a7a; /* グレー */
  display:flex;
  align-items:center;
}
.concept-title > h2::after {
  display:block;
  content:'';
  flex:1;
  border-top:1px solid #ccc; /* 線の色を薄いグレーに */
  margin-left:10px;
}
.concept-title > h2 br {
  display:none;
}
.concept-lead {
  font-size:2.8rem;
  margin-bottom:30px;
  font-weight:bold;
  color: #4a4a4a;
}
.concept-lead br:nth-of-type(1),
.concept-lead br:nth-of-type(3) {
  display:none;
}
.concept-text {
  width:100%;
  margin-bottom:50px;
  font-size:1.6rem;
  text-align:justify;
  color: #4a4a4a;
}
.concept-text > p:not(:last-child) {
  margin-bottom:14px;
}
.concept-link {
  width:100%;
  height:auto;
}
.concept-link a {
  width:320px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  /* サロンの特徴へのリンクボタン（シックなグレー） */
  background: #5c5c5c;
  color:#fff;
  border-radius:8px;
  transition: opacity 0.3s;
}
.concept-link a:hover {
  opacity: 0.8;
}

/* プロフィール欄の装飾 */
.concept-profile {
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向を中央揃えに */
  justify-content: flex-end; /* 全体を右側に寄せる */
  gap: 15px; /* テキストと画像の間隔 */
}

/* 以前の text-align: right; はここに適用 */
.profile-text {
  text-align: right;
}

/* --- 正円アイコンの装飾 --- */
.profile-icon {
  width: 66px; /* アイコンのサイズ（お好みで調整してください） */
  height: 66px; /* サイズ */
  border-radius: 50%; /* 正円にする */
  object-fit: cover; /* 画像を歪ませずに枠内に収める */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ほんのり影をつけて立体感を（お好みで） */
  flex-shrink: 0; /* ←★ここを追加！絶対に縮ませないという命令です */
}

/* 以前の名前と経歴のスタイルはそのまま維持 */
.profile-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.profile-career {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
}

/*-------------------------------------
  menu
-------------------------------------*/
#menu {
  width:100%;
  height:auto;
  padding:100px 0;
  position:relative;
  background:#fff;
}
.menu {
  width:90%;
  height:auto;
  max-width:1440px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.menu-title {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column-reverse;
  line-height:1.4;
  margin-bottom:50px;
  position:relative;
}
.menu-title-bg {
  width:25%;
  height:auto;
  position:absolute;
  top:40%;
  left:22.5%;
  transform:translate(0, -50%);
  animation:rotation1 45s linear infinite alternate;
  z-index:1;
  opacity:.2; /* 少し薄く */
}
@keyframes rotation1 {
  0% { transform:translate(-50%, -50%) rotate(0); }
  100% { transform:translate(-50%, -50%) rotate(-360deg); }
}
.menu-title > span {
  font-size:6rem;
  font-family: "Montserrat", serif;
  letter-spacing:.05em;
  color:#d4c4c2; /* くすみピンク */
  position:relative;
  z-index:1;
}
.menu-title > h2 {
  font-size:1.2rem;
  font-weight:normal;
  color:#7a7a7a;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1;
}

.menu-cols {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:60px;
  position:relative;
  z-index:1;
}
.menu-category {
  width:48%;
  margin-bottom: 40px;
  height:auto;
  display:flex;
  flex-direction:column;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05); /* 影を柔らかいグレーに */
  border-radius: 8px; /* 少し丸みをつける */
  overflow: hidden;
}
/*.menu-category:nth-of-type(n+4) {
  margin-top:50px;
}*/
/*.menu-eyecatch {
  width:100%;
  height:auto;
  position:relative;
  background:#eee;
}
.menu-eyecatch::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:70%;
}
.menu-eyecatch > img {
  position:absolute;
  top:0;left:0;
  height:100%;
  object-fit:cover;
}*/
.menu-eyecatch {
  width: 100%;
  height: auto;
  position: relative;
  background: #fafafa; /* #eee(ねずみ色)から、少し明るく上品なクリアグレーに変更 */
  border-radius: 4px 4px 0 0; /* カードの上の角を少し丸めて柔らかさを出す */
}
.menu-eyecatch::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 50%; /* 70%だと縦に長すぎるため、50%にしてスタイリッシュな横長枠に */
}
.menu-eyecatch > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 追加：幅も100%に指定 */
  height: 100%;
  object-fit: contain; /* ★重要: cover(はみ出して埋める) から contain(切れないように収める) に変更 */
  padding: 30px; /* ★重要: SVGが枠のギリギリまで来ないよう、内側にたっぷりと余白をとる */
  box-sizing: border-box; /* paddingを含めてサイズを計算させる */
}
.menu-category-inner {
  width:100%;
  height:auto;
  padding:0 20px 40px 20px;
  box-sizing:border-box;
  background:#fff;
  display:flex;
  flex-direction:column;
  flex:1;
}
.menu-category-title {
  width:100%;
  height:auto;
  padding:25px 0 15px 0;
  line-height:1.6;
  text-align:center;
}
.menu-category-title > h3 {
  font-size:2rem;
  color: #4a4a4a;
}
.menu-category-title > p {
  color:#7a7a7a; /* 英字サブタイトルをグレーに */
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
}
.menu-category-text {
  width:100%;
  height:auto;
  margin-bottom:20px;
  color: #4a4a4a;
}
.menu-category-price {
  width:100%;
  height:auto;
  display:flex;
  align-items:baseline;
  justify-content:center;
  font-size:1.6rem;
  line-height:1;
  margin-top:auto;
  color: #5c5c5c;
}
.menu-category-price-time {
  margin-right:10px;
}
.menu-category-price-time > span {
  font-size:2.4rem;
  margin-right:3px;
  font-weight:bold;
  letter-spacing:-.01em;
  font-family: 'Montserrat', sans-serif;
}
.menu-category-price-main > span {
  font-size:4rem;
  margin-right:3px;
  font-weight:bold;
  letter-spacing:-.01em;
  font-family: 'Montserrat', sans-serif;
}

.menu-link {
  width:60%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.menu-link > a {
  width:49%;
  height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:1.6rem;
  border-radius:8px;
  transition: opacity 0.3s;
}
.menu-link > a:hover {
  opacity: 0.8;
}
.menu-link > a:nth-of-type(1) {
  background: #5c5c5c; /* メニュー詳細へ */
}
.menu-link > a:nth-of-type(2) {
  background: #d4c4c2; /* 男性用メニューへ */
}

/*-------------------------------------
  content (お知らせ＆口コミ)
-------------------------------------*/
#content {
  width:100%;
  height:auto;
  padding:100px 0;
  background: #fafafa; /* 背景をわずかに色付けて区切る */
}
.content {
  width:90%;
  max-width:1440px;
  height:auto;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}

/* --- お知らせ --- */
#news {
  width:60%;
  height:auto;
  background:#fff; /* 中の背景を白に */
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:50px;
  box-sizing:border-box;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.03); /* 軽い影 */
  border-radius: 8px;
}
.news-title {
  width:20%;
  height:auto;
  box-sizing:border-box;
  display:flex;
  flex-direction:column-reverse;
  line-height:1.2;
}
.news-title > span {
  font-size:4rem;
  font-family: "Montserrat", serif;
  color:#d4c4c2;
}
.news-title > h2 {
  font-size: 1.2rem;
  font-weight:normal;
  color:#7a7a7a;
}
#news-listWrap {
  width:75%;
  height:auto;
}
#news-list {
  width:100%;
  height:auto;
}
.news-article {
  width:100%;
  height:auto;
  padding:10px 0;
  margin-bottom:5px;
  box-sizing:border-box;
  position:relative;
}
.news-article-link {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
}
.news-article-link > a {
  display:block;
  width:100%;
  height:100%;
}
.news-article-taxonomy {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  font-size:1.2rem;
  border-bottom:1px solid #eee; /* 線を薄く */
  padding-bottom:5px;
}
.news-date {
  width:80px;
  color: #7a7a7a;
  font-family: 'Montserrat', sans-serif;
}
.news-cat {
  padding:0 14px;
  background:#d4c4c2; /* カテゴリタグをくすみピンクに */
  color:#fff;
  border-radius: 4px;
}
.news-article-title {
  width:100%;
  height:auto;
  padding:5px 0 15px 0;
}
.news-article-title > h3 {
  font-size:1.4rem;
  font-weight:normal;
  color: #4a4a4a;
}
.news-link {
  width:100%;
  max-width:240px;
  height:48px;
  margin-top:20px;
  margin-left:auto;
}
.news-link a {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  background: #5c5c5c;
  border-radius:8px;
  color:#fff;
  transition: opacity 0.3s;
}
.news-link a:hover {
  opacity: 0.8;
}

/* --- 口コミ --- */
#review {
  width:39%;
  height:455px; /* 高さはJavaScript等で調整が必要かもしれません */
  padding:30px; /* 余白を少し広げる */
  box-sizing: border-box;
  border: none; /* ボーダーを消す */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.03); /* お知らせと同じ影 */
  border-radius: 8px;
  overflow-y: auto; /* scrollからautoへ */
  background: #fff;
}
/* スクロールバーの装飾（Webkitブラウザ用） */
#review::-webkit-scrollbar { width: 6px; }
#review::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
#review::-webkit-scrollbar-thumb { background: #d4c4c2; border-radius: 4px; }

.review-title {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column-reverse;
  line-height:1.4;
  margin-bottom:30px;
}
.review-title > span {
  font-size:4rem;
  font-family:"Montserrat", serif;
  font-weight:normal;
  color:#d4c4c2;
}
.review-title > h2 {
  font-size: 1.2rem;
  font-weight:normal;
  color:#7a7a7a;
}
.review {
  width:100%;
  height:auto;
}
.review-category {
  width:100%;
  height:auto;
  margin-bottom:30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #eee; /* アイテムごとの区切り */
}
.review-category:last-child {
  border-bottom: none;
}
.review-category-top {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding-bottom:10px;
}
.review-category-top-img {
  width:30%;
  min-width:100px;
}
.review-category-top-img img {
  width:100%;
}
.review-category-top-inner {
  width:60%;
  height:auto;
  white-space:nowrap;
}
.review-category-top-inner p {
  font-size:1.1rem;
  color: #7a7a7a;
}
.review-category-top-inner h3 {
  font-size:1.2rem;
  font-weight:bold;
  color: #4a4a4a;
  margin-top: 4px;
}
.review-tab {
  font-size:0.9rem;
  padding:2px 6px;
  margin-right:5px;
  border:1px solid #d4c4c2;
  color: #d4c4c2;
  border-radius: 2px;
}
.review-category-top-date {
  width:20%;
  height:auto;
  font-size:1rem;
  color: #7a7a7a;
}
.review-category-top-date-hyouka {
  width:100%;
  height:auto;
  display:flex;
}
.review-category-top-date img {
  display:block;
  width:14px;
  height:auto;
  margin-left:2px;
}
.review-category-comment {
  width:100%;
  height:auto;
  padding-top:10px;
}
.review-category-comment p {
  font-size:1.3rem;
  color: #4a4a4a;
  line-height: 1.6;
}

/* =========================================================================
   Media Queries (レスポンシブ調整)
   ========================================================================= */

@media screen and (max-width:1280px) {
  /*---#concept---*/
  .concept-title > span { font-size:4.8rem; }
  .concept-lead { font-size:2.4rem; }
}

@media screen and (max-width:1024px) {
  /*---main-img---*/
  #main-img { padding-bottom:0; }
  .swiper-container { width:85%; position:relative; }
  .swiper-container::after {
    display:block; content:''; width:60%; height:100%; position:absolute;
    top:0;left:0; background:linear-gradient(to right,rgba(250,250,250,.9),rgba(250,250,250,0)); z-index:1;
  }
  .main-title { width:40%; }
  .text-1,.text-2 { color:#7a7a7a; } /* ゴールド系からグレーへ */
  
  /*---#concept---*/
  .concept { width:65%; }
  .concept-cols { flex-direction:column-reverse; }
  .concept-inner { width:100%; margin-bottom:100px; }
  .concept-img { width:100vw; margin:0 calc(50% - 50vw); }
  
  /*---#menu---*/
  .menu-title-bg { left:36.5%; }
  .menu-category { width:48%; }
  .menu-category:nth-of-type(n+3) { margin-top:60px; }
  .menu-link { width:80%; }
  
  /*---#content---*/
  #content { padding-top:0; }
  .content { flex-direction:column; }
  #news,#review { width:100%; }
  #news { margin-bottom:50px; }
}

@media screen and (max-width:896px) {
  /*---concept---*/
  .concept { width:75%; }
  /*---news---*/
  #news { flex-direction:column; padding: 40px 30px; }
  .news-title { width:100%; margin-bottom:30px; }
  #news-listWrap { width:100%; }
}

@media screen and (max-width:786px) {
  /*---concept---*/
  .concept { width:80%; }
  /*---menu---*/
  .menu-title-bg { left:48.5%; }
}

@media screen and (max-width:680px) {
  #heading {
    position:absolute; top:70px; padding-top:0; margin-bottom:0;
    color:#7a7a7a; z-index:2;
  }
  /*---main-img---*/
  #main-img { padding-bottom:0; }
  .swiper-container { width:100%; height:100vh; }
  .main-title {
    width:90%; transform:translate(-50%,-50%); left:50%; top:52.5%;
  }
  .main-title-lead { width:65%; margin-bottom:20px; }
  .wrap { padding-left:2.5%; }
  .main-title-feature { width:50%; margin-left:2.5%; }
  
  /*---concept---*/
  #concept { padding:100px 0 0 0; }
  .concept { width:85%; }
  
  /*---menu---*/
  #menu { padding:100px 0 80px 0; }
  .menu { width:85%; }
  .menu-title-bg { width:42%; }
  .menu-category { width:100%; }
  .menu-category:nth-of-type(n+2) { margin-top:50px; }
  .menu-link { width:100%; }
}

@media screen and (max-width:480px) {
  #heading > h1 br { display:block; }
  #heading > h1 > span { display:none; }
  
  /*---#main-img---*/
  .main-title { top:initial; bottom:15%; transform:translate(-50%,0); }
  .swiper-container::after {
    display:block; content:''; width:100%; height:70%; position:absolute;
    top:initial;bottom:0;left:0;
    /* 背景が白い場合はグラデーションも白系に */
    background:linear-gradient(to top,rgba(250,250,250,.9),rgba(250,250,250,0)); z-index:1;
  }
  .slideno1 picture, .slideno1 img, .slideno3 picture, .slideno3 img {
    width:100%; height:100%; object-fit:cover; object-position:top center;
  }
  .main-title h2 { text-align:center; }
  .text-2, .text-ja { text-align:center; }
  .text-1 {
    text-align:center;
    font-size: 5vw !important; /* 画面幅に合わせて自動で縮小する魔法の単位 */
    white-space: nowrap !important; /* 絶対に改行させないという強い意志 */
  }
  .main-title-lead { width:95%; }
  .main-title-feature { width:95%; }
  
  /*---concept---*/
  #concept { padding:80px 0 0 0; }
  .concept-title > span { font-size:4.6rem; }
  .concept-title > h2 { line-height:1.6; }
  .concept-title > h2 br { display:block; }
  .concept-lead { font-size:2rem; }
  .concept-lead br:nth-of-type(1), .concept-lead br:nth-of-type(3) { display:block; }
  .concept-text { font-size:1.4rem; }
  .concept-inner { margin-bottom:80px; }
  
  /*---menu---*/
  #menu { padding:80px 0 80px 0; }
  .menu { width:90%; }
  .menu-title { margin-bottom:40px; }
  .menu-title > span { font-size:4.6rem; }
  .menu-title-bg { width:65%; left:74.5%; }
  .menu-link { width:95%; flex-direction:column; margin:0 auto; }
  .menu-link > a { width:100%; }
  .menu-link > a:nth-of-type(n+2) { margin-top:10px; }
  
  /*---content---*/
  #news { padding:30px 20px; }
  .review-category-top { flex-wrap:wrap; justify-content:space-between; }
  .review-category-top-inner { width:85%; }
  .review-category-top-date { width:100%; display:flex; align-items:baseline; margin-top:5px; }
  .review-category-top-date-hyouka { width:auto; }
}