@charset "utf-8";
/* =========================================================
   スマートモデューロ ページ専用CSS（/smart-modulo/）
   ※このページでのみ読み込み。既存ページには影響しません。
   ========================================================= */
.smartmodulo{
  --SM_BG:#f5f5f5;
  --SM_BLUE:#1382c1;
  --SM_RED:#822521;
  --SM_ORANGE:#fbb03b;
  --SM_ORANGE_DARK:#c9862a;
  --SM_LINE:#393939;
}
.smartmodulo img{ max-width:100%; }

/* 全幅（画面いっぱい）にする共通処理 */
.sm-page,
.sm-points{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- メインビジュアル ---------- */
.sm-mv{ width:100%; overflow:hidden; }
.sm-mv img{ width:100%; height:100%; object-fit:cover; }
@media screen and (min-width:768px){
  .sm-mv{ height:min(57vw, 82vh); }
  .sm-mv img{ object-position:50% 40%; }
}

/* ---------- ページ全体（グレー背景） ---------- */
.sm-page{
  background:var(--SM_BG);
  padding-bottom:100px;
  font-size:15px;
  line-height:1.8;
}

/* ---------- イントロ ---------- */
.sm-intro{ padding:64px 0 50px; }
.sm-intro__card{
  position:relative;
  background:#fff;
  max-width:846px;
  margin:0 auto;
}
.smartmodulo .sm-intro__title{
  position:static;
  transform:none;
  border:none;
  color:var(--MAIN_BLACK);
  font-weight:bold;
  text-align:left;
  letter-spacing:.02em;
  line-height:1.6;
  margin:0;
  padding:0;
}
.sm-intro__text{ text-align:center; font-size:14px; line-height:2; }
@media screen and (min-width:768px){
  .sm-intro__card{ padding:44px 40px 60px 212px; width:calc(100% - 40px); }
  .sm-intro__img{ position:absolute; top:40px; left:-65px; width:232px; }
  .smartmodulo .sm-intro__title{ font-size:clamp(19px,2.2vw,24px); margin-bottom:40px; }
  .sm-intro__text{ margin-left:-172px; font-size:13px; }
}
@media screen and (min-width:768px) and (max-width:1000px){
  .sm-intro__img{ left:-20px; width:200px; }
  .sm-intro__card{ padding-left:200px; }
  .sm-intro__text{ margin-left:-150px; text-align:left; }
}
@media screen and (max-width:767px){
  .sm-intro{ padding:40px 0 30px; }
  .sm-intro__card{ width:92%; padding:0 20px 30px; }
  .sm-intro__img{ margin:0 -20px 24px; }
  .smartmodulo .sm-intro__title{ font-size:18px; margin-bottom:20px; }
  .sm-intro__text{ text-align:left; }
}

/* タブレット幅では手動改行を外して自然に折り返す */
@media screen and (min-width:768px) and (max-width:1100px){
  .sm-intro__text br,
  .sm-panel__text br,
  .sm-association__text br{ display:none; }
  .sm-association__text{ max-width:90%; }
}

/* ---------- POINT（黒背景） ---------- */
.sm-points{
  background:#000;
  padding:90px 0;
}
.sm-points__row{
  /* 左右のカードを同じ高さにし、右カードだけ73px下にずらす */
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:73px auto 73px;
  max-width:722px;
  margin:0 auto;
}
.sm-point{
  background:#fff;
  display:flex;
  flex-direction:column;
}
.sm-point--left{ grid-column:1; grid-row:1 / 3; }
.sm-point--right{ grid-column:2; grid-row:2 / 4; }
.sm-point__text{ padding:40px 28px 36px; flex:1; }
.sm-point__title{
  font-size:18px;
  line-height:1.6;
  font-weight:normal;
  margin-bottom:22px;
  color:var(--MAIN_BLACK);
}
.sm-point__text p{ font-size:14px; line-height:1.8; }
.sm-point__img{ position:relative; margin:0; }
.sm-point__label{
  position:absolute;
  background:var(--SM_BLUE);
  color:#fff;
  font-size:19px;
  letter-spacing:.04em;
  line-height:55px;
  width:129px;
  text-align:center;
  z-index:1;
}
.sm-point--left .sm-point__label{ top:0; left:0; }
.sm-point--right .sm-point__label{ bottom:0; right:0; }
.sm-points__deco{
  max-width:1080px;
  margin:6px auto 4px;
  padding:0 2%;
}
/* デザイン通り、左カードの画像は下端、右カードの画像は上端に配置 */
@media screen and (min-width:768px) and (max-width:820px){
  .sm-points__row{ width:94%; }
}
@media screen and (max-width:767px){
  .sm-points{ padding:50px 0; }
  .sm-points__row{ display:flex; flex-direction:column; width:88%; gap:30px; }
  .sm-point{ width:100%; }
  /* スマホは「画像→テキスト」の順にそろえる */
  .sm-point--left .sm-point__img{ order:-1; }
  .sm-point__text{ padding:24px 20px 26px; }
  .sm-point__title{ font-size:18px; margin-bottom:14px; }
  .sm-point__label{ font-size:15px; line-height:40px; width:104px; }
  .sm-point--right .sm-point__label{ top:0; left:0; bottom:auto; right:auto; }
  .sm-points__deco{ margin:30px auto; }
}

/* ---------- 背景写真パネル（平時／被災地） ---------- */
.sm-panel{
  position:relative;
  width:calc(100% - 36px);
  max-width:1300px;
  margin:0 auto;
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
}
.sm-panel--heiji{
  background-image:url('../images/smart-modulo/bg_heiji.jpg');
  margin-top:62px;
  padding:33px 0 58px;
}
.sm-panel--hisai{
  background-image:url('../images/smart-modulo/bg_hisai.jpg');
  margin-top:90px;
  padding:0 0 45px;
}
.sm-panel__title{
  display:inline-block;
  background:var(--GREEN);
  color:#fff;
  font-weight:bold;
  font-size:26px;
  letter-spacing:.06em;
  line-height:53px;
  padding:0 30px;
  min-width:237px;
}
.sm-panel__text{ font-size:14px; line-height:1.8; margin:20px auto 40px !important; width:90%; }
.sm-panel--hisai .sm-panel__text{ margin-top:22px !important; }

.sm-photolist{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px 32px;
  max-width:846px;
  width:90%;
  margin:0 auto;
}
.sm-photolist li{ position:relative; }
.sm-photolist__cap{
  position:absolute;
  top:0; left:0;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:bold;
  line-height:1.3;
  padding:3px 6px;
  text-align:left;
  max-width:100%;
}
@media screen and (max-width:767px){
  .sm-panel{ width:100%; }
  .sm-panel__title{ font-size:20px; line-height:44px; min-width:200px; }
  .sm-panel__text{ text-align:left; }
  .sm-photolist{ grid-template-columns:repeat(2,1fr); gap:12px; width:92%; }
  .sm-photolist__cap{ font-size:10px; }
}

/* ---------- リボン見出し（下向き矢印形） ---------- */
.sm-ribbon{
  display:block;
  width:243px;
  height:79px;
  margin:0 auto;
  padding-top:6px;
  color:#fff;
  font-weight:bold;
  font-size:28px;
  letter-spacing:.08em;
  text-align:center;
  line-height:40px;
  clip-path:polygon(0 0,100% 0,100% 61%,50% 100%,0 61%);
  position:relative;
  z-index:2;
}
.sm-ribbon--red{ background:var(--SM_RED); }
.sm-ribbon--black{ background:#000; font-weight:normal; }

/* ---------- 万が一の時 ---------- */
.sm-emergency{ margin-top:-19px; }
.sm-emergency__list{
  display:flex;
  justify-content:center;
  gap:50px;
  max-width:789px;
  width:90%;
  margin:58px auto 0;
}
.sm-emergency__item{ flex:1; }
.sm-emergency__text{ margin-top:28px !important; font-size:14px; line-height:1.8; }
.sm-panel--hisai .sm-ribbon{ position:relative; top:-31px; margin-bottom:-31px; }
@media screen and (max-width:767px){
  .sm-ribbon{ width:200px; height:66px; font-size:22px; line-height:34px; padding-top:4px; }
  .sm-emergency__list{ flex-direction:column; gap:30px; width:92%; margin-top:36px; }
  .sm-emergency__text{ margin-top:14px !important; }
  .sm-panel--hisai{ margin-top:70px; }
  .sm-panel--hisai .sm-ribbon{ top:-26px; margin-bottom:-26px; }
}

/* ---------- 協会ロゴ ---------- */
.sm-association{ margin-top:150px; text-align:center; }
.sm-association__logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:58px;
}
.sm-association__logos .jmha{ width:355px; }
.sm-association__logos .naramokken{ width:216px; }
.sm-association__text{
  display:inline-block;
  text-align:left;
  font-size:14px;
  line-height:1.8;
  margin-top:60px !important;
}
@media screen and (max-width:767px){
  .sm-association{ margin-top:80px; width:92%; margin-left:auto; margin-right:auto; }
  .sm-association__logos{ gap:6%; }
  .sm-association__logos .jmha{ width:55%; }
  .sm-association__logos .naramokken{ width:33%; }
  .sm-association__text{ margin-top:36px !important; }
}

/* ---------- ラインナップ ---------- */
.sm-lineup{
  max-width:812px;
  width:calc(100% - 100px);
  margin:130px auto 0;
}
.sm-box{
  position:relative;
  background:#fff;
  border:1px solid var(--SM_LINE);
  padding:77px 0 60px;
}
.sm-box--renketsu{ margin-top:45px; padding-top:70px; }
.sm-box--renketsu .sm-ribbon{
  position:absolute;
  top:-64px;
  left:50%;
  transform:translateX(-50%);
}
.sm-box__lead{
  width:fit-content;
  max-width:88%;
  margin:0 auto !important;
  font-size:18px;
  line-height:1.65;
}
.sm-models{
  display:flex;
  justify-content:center;
  gap:76px;
  margin:36px auto 0;
  width:88%;
}
.sm-model{ flex:1; max-width:292px; text-align:center; display:flex; flex-direction:column; }
.sm-model__illust{ flex:1; display:flex; align-items:flex-end; justify-content:center; }
.sm-model__illust img{ width:auto; max-width:100%; max-height:215px; }
.sm-box--renketsu .sm-model__illust img{ max-height:250px; }
.sm-model__name{ font-size:22px; margin-top:28px; line-height:1.4; }
.sm-model__size{ font-size:12px; margin-top:4px !important; }
.sm-model__case{ position:relative; margin-top:52px !important; }
.sm-box--renketsu .sm-model__case{ margin-top:80px !important; }
.sm-model__case span{
  position:absolute;
  top:4px; left:6px;
  font-size:12px;
  color:#222;
  text-shadow:0 0 3px rgba(255,255,255,.9);
}

/* オレンジのラベル見出し */
.sm-label{
  position:absolute;
  top:-51px;
  left:-50px;
  background:var(--SM_ORANGE);
  border:1px solid var(--SM_LINE);
  color:#fff;
  font-weight:bold;
  font-size:28px;
  letter-spacing:.04em;
  line-height:83px;
  padding:0 34px;
  min-width:348px;
  text-align:left;
}
.sm-label::after{
  content:"";
  position:absolute;
  left:-1px;
  bottom:-16px;
  width:50px;
  height:15px;
  background:var(--SM_ORANGE_DARK);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
@media screen and (max-width:767px){
  .sm-lineup{ width:88%; margin-top:100px; }
  .sm-box{ padding:56px 0 36px; }
  .sm-label{ font-size:19px; line-height:52px; min-width:0; padding:0 20px; left:-14px; top:-30px; }
  .sm-label::after{ width:14px; height:10px; bottom:-11px; }
  .sm-box__lead{ font-size:15px; }
  .sm-box__lead br{ display:none; }
  .sm-models{ flex-direction:column; gap:44px; }
  .sm-model{ max-width:none; }
  .sm-model__illust img{ max-height:none; width:85%; }
  .sm-model__name{ font-size:19px; margin-top:14px; }
  .sm-model__case,.sm-box--renketsu .sm-model__case{ margin-top:18px !important; }
  .sm-box--renketsu{ margin-top:40px; padding-top:56px; }
  .sm-box--renketsu .sm-ribbon{ top:-54px; }
}

/* ---------- FAQ ---------- */
.sm-faq{
  position:relative;
  max-width:856px;
  width:calc(100% - 80px);
  margin:150px auto 0;
  padding-top:34px;
}
.sm-faq .sm-label{ top:-51px; left:-5px; min-width:380px; }
.sm-faq__list dt{
  font-size:19px;
  padding:0 25px;
  margin:50px 0 10px;
}
.sm-faq__list dd{
  background:#fff;
  font-size:18px;
  line-height:1.75;
  padding:22px 25px;
}
@media screen and (max-width:767px){
  .sm-faq{ width:92%; margin-top:100px; padding-top:10px; }
  .sm-faq .sm-label{ min-width:0; left:-4px; top:-30px; }
  .sm-faq__list dt{ font-size:16px; padding:0 4px; margin:34px 0 8px; font-weight:bold; }
  .sm-faq__list dd{ font-size:15px; padding:16px 18px; }
}

/* ---------- 大きい画面での拡大 ----------
   デザイン（幅1080px）と同じ比率で見えるよう、
   画面幅に応じてコンテンツ全体を段階的に拡大します */
@media screen and (min-width:1200px){ .smartmodulo{ --SMZ:1.08; } }
@media screen and (min-width:1300px){ .smartmodulo{ --SMZ:1.17; } }
@media screen and (min-width:1400px){ .smartmodulo{ --SMZ:1.26; } }
@media screen and (min-width:1500px){ .smartmodulo{ --SMZ:1.35; } }
@media screen and (min-width:1600px){ .smartmodulo{ --SMZ:1.43; } }
@media screen and (min-width:1750px){ .smartmodulo{ --SMZ:1.5; } }
@media screen and (min-width:1200px){
  .sm-intro,
  .sm-points__row,
  .sm-points__deco,
  .sm-panel,
  .sm-emergency,
  .sm-association,
  .sm-lineup,
  .sm-faq{
    zoom:var(--SMZ);
  }
}