@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ==================================

  『商品ラインナップ』 PC Style

================================== */
.pc { display: inherit !important; }
.sp { display: none !important; }

p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.contents-area { z-index: 5; }

.link-next {
  font-size: 14px;
  letter-spacing: 0.1em;
  display: inline-block;
  float: right;
  transition: all .3s;
}
.link-next:hover { opacity: 0.7; }
.link-next::before {
  content: "＞";
  display: inline-block;
  transform: scale(0.5,1.0);
}

/* Slick Slider
---------------------------------- */
/*.slick-slider.slick-initialized { display: block !important; }*/

/* ----------------------------------

  Main Visual

---------------------------------- */
.main-visual ul, .main-visual ul li { overflow: hidden; }
.main-visual ul li img {
  width: 100%;
  height: auto;
  display: block;
}
.mv01, .mv02, .mv03 { height: auto; }
.main-visual #background_video{ width:101%; margin-left:-1px; }
.sec-header .swiper{ margin-right:-1px; }

/* F1
---------------------------------- */
.main-visual.f1 {
  width: 125%;
  margin: 0 0 0 -12.5%;
  overflow: hidden;
}
.main-visual.f1 ul {
  display: flex;
  align-items: stretch;
}
.main-visual.f1 ul li {
  position: relative;
  width: 25%;
  height: 0;
  padding: 0 0 calc(495 / 371 * 100% * (25 / 125));
  margin: 0 2px;
  /*
  padding: 0 2px calc(495 / 371 * 100% * .25) 2px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  */
  overflow: hidden;
}
.main-visual.f1 ul li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  /*
  padding: 0 0 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  */
  overflow: hidden;
  display: block;
}
/*
.main-visual.f1 ul li#mvs01 span:first-of-type { background-image: url(../images_top/mv/lineup_mv_slide_exterior03a.jpg); }
.main-visual.f1 ul li#mvs01 span:last-of-type { background-image: url(../images_top/mv/lineup_mv_slide_interior03a.jpg); }
.main-visual.f1 ul li#mvs02 span:first-of-type { background-image: url(../images_top/mv/lineup_mv_slide_exterior01a.jpg); }
.main-visual.f1 ul li#mvs02 span:last-of-type { background-image: url(../images_top/mv/lineup_mv_slide_interior01a.jpg); }
.main-visual.f1 ul li#mvs03 span:first-of-type { background-image: url(../images_top/mv/lineup_mv_slide_exterior02.jpg); }
.main-visual.f1 ul li#mvs03 span:last-of-type { background-image: url(../images_top/mv/lineup_mv_slide_interior02.jpg); }
.main-visual.f1 ul li#mvs04 span:first-of-type { background-image: url(../images_top/mv/lineup_mv_slide_exterior01b.jpg); }
.main-visual.f1 ul li#mvs04 span:last-of-type { background-image: url(../images_top/mv/lineup_mv_slide_interior01b.jpg); }
.main-visual.f1 ul li#mvs05 span:first-of-type { background-image: url(../images_top/mv/lineup_mv_slide_exterior03b.jpg); }
.main-visual.f1 ul li#mvs05 span:last-of-type { background-image: url(../images_top/mv/lineup_mv_slide_interior03b.jpg); }
*/
.main-visual.f1 ul li span img {
  height: 100%;
  display: block;
  animation: zoomOut 8.0s infinite ease 0s alternate both;
}

/* F2
---------------------------------- */
.main-visual.f2 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main-visual.f2 .contents-area .inner {
  position: relative;
  height: 100%;
}
.main-visual.f2 h2 {
  position: absolute;
  right: 10px;
}
.main-visual.f2 h2 img {
  width: 100%;
  height: auto;
}
.main-visual.f2 .slick-slider { padding: 0; }
.main-visual.f2 .swiper { width: 100%; }
.main-visual.f2 .swiper-wrapper {}
.main-visual.f2 .swiper-slide figure {
  max-width: initial;
  height: auto;
}
.main-visual.f2 .swiper-slide.swiper-slide-active figure img,
.main-visual.f2 .swiper-slide.swiper-slide-duplicate-active figure img,
.main-visual.f2 .swiper-slide.swiper-slide-prev figure img {
  animation: zoomIn 10s ease 0s normal both;
}
.main-visual.f2 .swiper-slide figure img {
  width: 100%;
  height: auto;
}

/* Animation
---------------------------------- */
@keyframes zoomOut {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes UpDown {
  0% { transform: translateY(0); }
  /*
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(5px); }
  */
  100% { transform: translateY(-10px); }
}

@keyframes lineAnimate01 {
  0% { left: -50%; }
  100% { left: 150%; }
}
@keyframes lineAnimate02 {
  0% { right: -50%; }
  100% { right: 150%; }
}

.zoom-out { animation: zoomOut 10s linear 0s normal both; }


/* ----------------------------------

  Section

---------------------------------- */
section {
  position: relative;
  width: 100%;
}
section .inner::after {
  content: "";
  clear: both;
  display: block;
}

/* Breadcrumb
---------------------------------- */
#bread ul {
  position: relative;
  z-index: 2;
  top: initial;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  color: #000000;
  text-shadow: none;
}
#bread li { color: #000000; }
#bread li.txt_w a {
  margin-right: 5px;
  color: #000000;
}

/* Intro
---------------------------------- */
.intro {
  padding: 80px 0 120px;
  text-align: center;
}
.intro .heading { color: #0b7bbd; }
.intro p {
  text-align: center;
  line-height: calc(30 / 14);
}
.heading {
    font-size: 38px;
    text-align: center;
    letter-spacing: 0.05em;
    margin: 0 0 30px;
}

/* syouhin select
---------------------------------- */
.syouhin-select h3{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 34px;
    letter-spacing: 0.075em;
    text-align: center;
    margin-bottom: 20px;
    color: #555;
}
.syouhin-select .mv{
    text-align: center;
    width: 100%;
    margin: auto;
}
.syouhin-select .mv img{
    width: 100%;
    margin: auto;
}
.syouhin-select p.lead{
    text-align: left;
    padding: 30px 0;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.05em;
}
.syouhin-select .inner{
    width: 1200px;
}

/* ============================================================
   syouhin-select メイン画像のマウスオーバーエフェクト（ズームイン）
============================================================ */
.syouhin-select .mv a {
    display: block;
    overflow: hidden; 
}

.syouhin-select .mv a img {
    transition: transform 0.6s ease;
    transform: scale(1);
}

/* 親要素（aタグ）の半透明化を強制キャンセル */
.syouhin-select .mv a:hover {
    opacity: 1 !important; 
}

/* ★追加・変更：画像（img）自体の半透明化を強制キャンセルしつつズーム */
.syouhin-select .mv a:hover img {
    transform: scale(1.05);
    opacity: 1 !important;       /* ベースCSSの透明度変更を無効化 */
    filter: none !important;     /* ベースCSSのフィルター（明るさ変更など）を無効化 */
}
.select-wrap{
    display: flex;
    justify-content: space-between;
    align-content: top;
}
.select-wrap .select-box{
    width: 48%;
}

/* Recommend Accordion
---------------------------------- */
.recommend-accordion {
    width: 100%;
    margin: 100px auto 100px;
}

/* トグルボタン */
.accordion-toggle {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.1em;
    transition: background-color 0.3s;
}
.accordion-toggle:hover {
    background-color: #f9f9f9;
}
/* アコーディオンが開いているときのボタンスタイル */
.accordion-toggle.is-open {
    border-bottom-color: transparent;
}
.accordion-toggle .icon {
    position: absolute;
    right: 25%; 
    font-size: 32px;
    font-weight: 300;
    /* ↓ここから追加↓ */
    width: 40px;             /* アイコンエリアの幅を固定 */
    text-align: center;      /* エリア内で文字を中央揃え */
    transform: translateX(50%); /* 要素の中央を25%の位置（支点）に合わせる */
}

/* アコーディオンの中身（開閉アニメーション設定） */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-top: none;
    background-color: #fff;
}
.accordion-content.is-open {
    grid-template-rows: 1fr;
}
.accordion-inner {
    min-height: 0;
    padding: 0 40px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.accordion-content.is-open .accordion-inner {
    opacity: 1;
    padding-bottom: 40px;
}
/* グループの最初に上部の余白を設定 */
.recommend-group:first-of-type {
    margin-top: 40px;
}

/* グループの最後に下部の余白を設定 */
.recommend-group:last-of-type {
    margin-bottom: 40px; /* 以前の margin-bottom: 0; があれば40pxに上書きしてください */
}
/* おすすめ項目のレイアウト */
.recommend-group {
    margin-bottom: 70px;
}
.recommend-group:last-of-type {
    margin-bottom: 0;
}
.recommend-group h4 {
    text-align: center;
    font-size: 20px;
    padding-bottom: 30px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #555;
}
.recommend-group ul {
    display: flex;
    justify-content: space-between;
}
/* おすすめ項目の枠（li）の修正 */
.recommend-group li {
    width: 32%;
    border: 1px solid #e0e0e0; /* 指示書に合わせて色を調整してもOKです */
    border-radius: 8px; /* 角丸を少し大きめにするときれいです */
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; /* ★重要：枠からはみ出た部分（画像の角）を切り取る */
    display: flex;
    flex-direction: column; /* テキストと画像を縦に並べる設定 */
}

/* テキスト（p）の修正 */
.recommend-group li p {
    font-size: 15px;
    padding: 20px 20px; /* liから削除した余白をこちらに設定 */
    line-height: 1.6;
    min-height: 4.5em; /* 文字数が違っても高さを揃えるための記述（既存のまま） */
    display: flex;
    align-items: center;
    justify-content: center;
        font-weight: 400;
    margin: 0;
}

/* 画像（img）の修正 */
.recommend-group li img {
    width: 100%;
    height: auto;
    display: block; /* 画像の下にできる不要な隙間をなくす */
    margin-top: auto; /* テキストの高さが異なっても、画像を一番下に押し下げる */
    /* border-radiusの記述があれば削除してください（親のoverflowで丸くなるため） */
}


/* Section Header
---------------------------------- */
.sec-header {
  display: flex;
  align-items: flex-start;
  /*
  background: url(../images_top/century/wave.png) no-repeat left 30px;
  background-size: auto;
  */
  margin: 0 0 110px;
  flex-direction: row-reverse;
}
.sec-header > div:last-of-type {
  position: relative;
  width: calc(710 / 1500 * 100%);
  padding: 60px 60px 0 calc((100% - 1200px) / 2);
}
.sec-header > div:last-of-type dl {
  position: relative;
  z-index: 1;
}
.sec-header > div:last-of-type dl dt {
  /*
  font-size: 30px;
  letter-spacing: 0.05em;
  */
  margin: 0 0 60px;
}
.sec-header > div:last-of-type dl dd p { line-height: calc(30 / 14); }


/* Product LineUp
---------------------------------- */
.product-lineup {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 20px; /* Modified 202401 */
}
.product-item {
  position: relative;
  width: calc((100% - 120px) / 3);
  margin: 0 0 80px;
}
.product-item figure { /* margin: 0 0 5px; */ }
.product-item figure a {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 calc(413 / 670 * 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  cursor: pointer;
  pointer-events: inherit;
  display: block;
}
.product-item figure a::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: all 0.6s ease;
  opacity: 0;
}
.product-item figure a:hover::before { opacity: 1; }
.product-item figure img {
  width: 100%;
  height: auto;
}
.product-item.new::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  background: url(../images_top/century/new.png) no-repeat 0 0;
  background-size: cover;
}

.ssbox .product-lineup {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 0 20px;
}
.ssbox .product-item{
  position: relative;
  width: 1200px;
  margin: 0 0 80px;
}
.ssbox  dl dd p br.sp{ display:none; }
/* smartstyle2025 left to right moving */
.ssbox .product-item figure a {
    background-repeat: no-repeat;
    background-size: initial;
    padding: 0 0 calc(413 / 670 * 24.8%);
    position: relative; /* ::before要素の基準位置とするために追加 */
    overflow: hidden; /* ホバー時にbefore要素がはみ出すのを防ぐ */
}
.ssbox .product-item figure a::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: -0.8%; /* 初期位置を左に10%ずらす */
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 1.2s ease;
    opacity: 0;
    transform: translateX(0%); /* 初期状態では移動しない */
}
.ssbox .product-item figure a:hover::before {
    opacity: 1;
    transform: translateX(0.8%); /* ホバー時に右へ10%移動して元の位置に戻る */
}


.product-item dl dt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: calc(30 / 20);
  /*
  letter-spacing: 0.075em;
  */
  margin: 30px 0;
}
.product-item dl dt a, .product-item dl dd p a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s;
}
.product-item dl dt a:hover,
.product-item dl dd p a:hover { opacity: 0.7; }
.product-item dl dt img { display: none; }
.product-item dl dt small { font-size: calc(15 / 20 * 1em); }
.product-item dl dd p { line-height: calc(22 / 14); }
.product-item dl dd:last-of-type { margin: 20px 0 0; }

.custom-style h3,
.smart-style h3{
    text-align: center;
    font-size: 28px;
    padding: 20px 0 50px;
    color: #555;
}

.tag {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #a5a5a5;
  transition: all 0.3s;
  margin: 0 1em 0 0;
}
.tag:not(:last-of-type)::after { content: none; }
.tag::before { content: "#"; }
.tag:hover { color: rgba(165,165,165,0.7) }

/* Slider Styles
---------------------------------- */
.sec-header .slick-slider { padding: 0; }
.sec-header .swiper { width: calc(790 / 1500 * 100%); }
.sec-header .swiper-wrapper { overflow: hidden; }
.sec-header .swiper-slide figure { overflow: hidden; }
.sec-header .swiper-slide.swiper-slide-active figure img,
.sec-header .swiper-slide.swiper-slide-duplicate-active figure img,
.sec-header .swiper-slide.swiper-slide-prev figure img {
  animation: zoomIn 12s infinite ease 0s normal both;
}
.sec-header .swiper-slide figure img {
  width: 100%;
  height: auto;
}

/* 自由設計の商品
------------------------------------ */
.product-item .op01 a { background-image: url(../images_top/other-products/marge.jpg); }
.product-item .op01 a::before { background-image: url(../images_top/other-products/marge_2.jpg); }
.product-item .ci03 a { background-image: url(../images_top/century/lineup_century_img067.jpg); }
.product-item .ci03 a::before { background-image: url(../images_top/century/lineup_century_img067_2.jpg); }
.product-item .ci05 a { background-image: url(../images_top/century/lineup_century_img050.jpg); }
.product-item .ci05 a::before { background-image: url(../images_top/century/lineup_century_img050_2.jpg); }


/* 企画住宅の商品 Smart Style */
.product-item .ss01 a { background-image: url(../images_top/smart-style/lineup_smart-style_img091.jpg); }
.product-item .ss02 a { background-image: url(../images_top/smart-style/lineup_smart-style_img092.jpg); }
.product-item .ss01 a::before { background-image: url(../images_top/smart-style/lineup_smart-style_img091_2.jpg); }
.product-item .ss02 a::before { background-image: url(../images_top/smart-style/lineup_smart-style_img092_2.jpg); }



/* Smart Style
---------------------------------- */
.smart-style { margin: 100px 0 160px; }
.smart-style .sec-header > div:last-of-type dl dt img { width: 323px; }
.smart-style .product-item:first-of-type dl dt img { width: 224px; }
.smart-style .product-item:nth-of-type(2) dl dt img { width: 161px; }
.smart-style .product-item:nth-of-type(3) dl dt img { width: 243px; }
.smart-style .product-item:nth-of-type(4) dl dt img { width: 159px; }
.smart-style .product-item:nth-of-type(5) dl dt img { width: 161px; }
.smart-style .product-item:last-of-type dl dt img { width: 158px; }