@charset "UTF-8";
/*----------------------------------------------------------
  CT SERIES（新デザイン）専用CSS ／ SP（780px以下）
  対象HTML : /ct-series-new.html
  PC用CSS  : /css/ct-series-new.css

  Figma : TOSEI共有 (1) node-id=4240-4837（SP）
          ※SPデザインはMV部分のみ。それ以降はPCデザインを
            1カラムに落とし込んでいます。
-------------------------------------------------------------*/

@media screen and (max-width: 780px) {

.ctn .pc {
  display: none;
}
.ctn .sp {
  display: inline;
}

.ctn-inner {
  width: auto;
  margin: 0 30px;
}


/* =キービジュアル
   デザイン実寸 375×656px を基準にしています
-------------------------------------------------------------*/
.ctn-mv {
  height: auto;
  background: #4A7FD4 url(/img/ct-series-new/mv_sp_bg.jpg) no-repeat center top;
  background-size: cover;
}
.ctn-mv-inner {
  width: auto;
  height: auto;
  padding: 20px 30px 46px;
}
.ctn-mv-inner p {
  position: static;
}

.ctn-mv-logo {
  margin: 0 0 0 -10px;   /* ロゴのみ左20px。他は左30px */
}
.ctn-mv-logo img {
  width: 76px;
}

.ctn-mv-title {
  position: static;
  margin: 54px 0 0;      /* ロゴ下端36px → NEWバッジ上端90px */
  font-size: 28px;
}

.ctn-mv-lead {
  margin: 26px 0 0;
  font-size: 20px;
  line-height: 30px;
}

.ctn-mv-badge {
  margin: 14px 0 0;
}

/* 機種写真（SPのみ表示）
   中央揃え＋固定gap。左右-8pxで、実寸375pxのとき写真が
   デザインどおり左右約30pxの位置に収まる */
.ctn-mv-machines {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin: 20px -8px 0;
  padding: 0;
}
.ctn-mv-machines li {
  flex: 0 1 auto;
  text-align: center;
  list-style: none;
}
.ctn-mv-machines li:nth-child(1) { width: 83px; }
.ctn-mv-machines li:nth-child(2) { width: 110px; }
.ctn-mv-machines li:nth-child(3) { width: 91px; }
/* 幅基準にして、375px未満の端末では比率を保ったまま縮小させる */
.ctn-mv-machines img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.ctn-mv-machines span {
  display: block;
  margin-top: 11px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}


/* =業界シェアNo.1
-------------------------------------------------------------*/
.ctn-share {
  width: auto;
  margin: 40px 30px;
}


/* =見出しバンド
-------------------------------------------------------------*/
.ctn-band-gray {
  height: 62px;
  font-size: 20px;
}
.ctn-band {
  height: 62px;
  padding: 0 20px;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
}
.ctn-h3 {
  font-size: 18px;
  line-height: 1.5;
}


/* =CTシリーズ ラインアップ
-------------------------------------------------------------*/
.ctn-lineup-inner {
  display: block;
  width: auto;
  margin: 0 20px;
  padding-top: 30px;
}
.ctn-lineup-group {
  width: auto;
}
.ctn-lineup-group + .ctn-lineup-group {
  margin-top: 40px;
}
.ctn-lineup-list {
  padding: 0 0 24px;
}
.ctn-lineup-list > li {
  width: 25%;
}
.ctn-lineup-name {
  font-size: 13px;
  line-height: 15px;
  white-space: normal;
}
.ctn-lineup-cap,
.ctn-lineup-note {
  white-space: normal;
}
.ctn-lineup-tax {
  width: 56px;
  font-size: 11px;
}
.ctn-lineup-nanoe img {
  width: 42px;
  height: 42px;
}

/* 画面幅が狭い機種では写真とテキストを一段小さくする */
@media screen and (max-width: 420px) {
  .ctn-lineup-list > li:nth-child(1) figure img { height: 96px; }
  .ctn-lineup-list > li:nth-child(2) figure img { height: 104px; }
  .ctn-lineup-list > li:nth-child(3) figure img { height: 109px; }
  .ctn-lineup-list > li:nth-child(4) figure img { height: 108px; }
  .ctn-lineup-group {
    padding-top: 172px;
  }
  .ctn-lineup-name {
    font-size: 12px;
  }
  .ctn-lineup-cap {
    font-size: 11px;
  }
}


/* =動画／バナー
-------------------------------------------------------------*/
.ctn-movie,
.ctn-online {
  width: auto;
  margin: 30px 30px 0;
}


/* =バナースライダー
-------------------------------------------------------------*/
.ctn-bnr {
  width: auto;
  margin: 30px 40px 0;
}
.ctn-bnr .slick-prev {
  left: -26px;
}
.ctn-bnr .slick-next {
  right: -26px;
}


/* =新設計モデル
-------------------------------------------------------------*/
.ctn-design {
  margin-top: 30px;
}
.ctn-design .ctn-inner {
  padding-top: 24px;
}
.ctn-design-row {
  display: block;
  margin-top: 20px;
}
.ctn-design-txt,
.ctn-design-img {
  width: auto;
}
.ctn-design-img {
  margin-top: 20px;
}
.ctn-design-block2 {
  margin-top: 40px;
  padding-bottom: 30px;
}
.ctn-design-block2 p {
  margin-top: 20px;
}


/* =ドア設計
-------------------------------------------------------------*/
.ctn-door-list {
  display: block;
  width: auto;
  margin: 24px 30px 0;
  padding-bottom: 30px;
}
.ctn-door-list > li {
  width: auto;
  min-height: 0;
  padding: 24px 24px 30px;
}
.ctn-door-list > li + li {
  margin-top: 20px;
}
.ctn-door-ttl {
  margin-top: 20px;
  font-size: 20px;
  line-height: 30px;
}
.ctn-door-txt {
  text-align: center;
}


/* =便利機能
-------------------------------------------------------------*/
.ctn-func .ctn-inner {
  padding-top: 24px;
}
.ctn-func-img {
  width: auto;
  margin-top: 20px;
}
.ctn-func-list {
  display: block;
  margin-top: 24px;
}
.ctn-func-list > div {
  width: auto;
}
.ctn-func-list > div + div {
  margin-top: 20px;
}


/* =ナノイー
-------------------------------------------------------------*/
.ctn-nanoe {
  margin-top: 30px;
}
.ctn-nanoe .ctn-inner {
  padding-top: 24px;
}
.ctn-nanoe-img {
  margin-top: 24px;
}


/* =関連コンテンツ
-------------------------------------------------------------*/
.ctn-bnr-btm {
  margin-top: 30px;
}
.ctn-relation {
  margin-top: 40px;
  padding-bottom: 40px;
}
.ctn-relation-ttl {
  font-size: 20px;
}
.ctn-relation-list {
  display: block;
  width: auto;
  margin: 24px 30px 0;
}
.ctn-relation-list > li {
  width: auto;
}
.ctn-relation-list > li + li {
  margin-top: 16px;
}

}
/* SPここまで */