@charset "UTF-8";
/*---------------------------------------------------------
カラー 設定
---------------------------------------------------------*/
/*---------------------------------------------------------
フォントサイズ・line-height 設定
---------------------------------------------------------*/
/*---------------------------------------------------------
マックスサイズ 設定
---------------------------------------------------------*/
/*---------------------------------------------------------
ブレークポイント設定
---------------------------------------------------------*/
/*---------------------------------------------------------
transition 遷移時間
---------------------------------------------------------*/
/*---------------------------------------------------------
角R
---------------------------------------------------------*/
/*---------------------------------------------------------
遷移時間設定
---------------------------------------------------------*/
/*---------------------------------------------------------
ホバーエフェクト pc時のみ
---------------------------------------------------------*/
/*---------------------------------------------------------
余白をリセット
---------------------------------------------------------*/
/*---------------------------------------------------------
Reset box-model and set borders
---------------------------------------------------------*/
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0; }

/*---------------------------------------------------------
Document
---------------------------------------------------------*/
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }

/*---------------------------------------------------------
Sections
---------------------------------------------------------*/
body {
  margin: 0; }

main {
  display: block; }

/*---------------------------------------------------------
Vertical rhythm
---------------------------------------------------------*/
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0; }

/*---------------------------------------------------------
Headings
---------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0; }

/*---------------------------------------------------------
Lists (enumeration)
---------------------------------------------------------*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

/*---------------------------------------------------------
Lists (definition)
---------------------------------------------------------*/
dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

/*---------------------------------------------------------
Grouping content
---------------------------------------------------------*/
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace, monospace;
  font-size: inherit; }

address {
  font-style: inherit; }

/*---------------------------------------------------------
Text-level semantics
---------------------------------------------------------*/
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit; }

abbr[title] {
  text-decoration: underline dotted; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/*---------------------------------------------------------
Replaced content
---------------------------------------------------------*/
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom; }

/*---------------------------------------------------------
Forms
---------------------------------------------------------*/
button,
input,
optgroup,
select,
textarea {
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; }

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox; }

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; }

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default; }

:-moz-focusring {
  outline: auto; }

select:disabled {
  opacity: inherit; }

option {
  padding: 0; }

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0; }

legend {
  padding: 0; }

progress {
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

label[for] {
  cursor: pointer; }

/*---------------------------------------------------------
Interactive
---------------------------------------------------------*/
details {
  display: block; }

summary {
  display: list-item; }

[contenteditable]:focus {
  outline: auto; }

/*---------------------------------------------------------
Tables
---------------------------------------------------------*/
table {
  border-color: inherit;
  border: none; }

caption {
  text-align: left; }

td,
th {
  vertical-align: top;
  padding: 0; }

th {
  text-align: left;
  font-weight: bold; }

/*---------------------------------------------------------
html & body & main
---------------------------------------------------------*/
main {
  /*
  --------------------------------------------------*/
  /*---------------------------------------------------------
  aリンク・ボタン
  ---------------------------------------------------------*/ }
  main img {
    width: 100%; }
  main a {
    color: #68aa44;
    text-decoration: underline; }
    @media print, screen and (min-width: 768px) {
      main a {
        transition: all .3s ease-out; } }
    @media print, screen and (min-width: 768px) {
      main a:hover {
        opacity: .5 !important; } }
    @media screen and (max-width: 768px) {
      main a:hover {
        opacity: 1 !important; } }
    main a.disabled {
      opacity: .5;
      pointer-events: none;
      text-decoration: none; }
    main a[href^="tel:"] {
      color: #333; }
      @media print, screen and (min-width: 768px) {
        main a[href^="tel:"] {
          pointer-events: none;
          text-decoration: none; } }

/*---------------------------------------------------------
ヘッダー
---------------------------------------------------------*/
/*---------------------------------------------------------
ヘッダー　レイアウト
---------------------------------------------------------*/
header .header-fix-wrap {
  border-bottom: none !important;
  position: relative !important;
  background: transparent !important; }
  header .header-fix-wrap .HeaderBody {
    background: #fff !important;
    justify-content: center !important;
    max-width: 750px;
    width: 100%;
    margin: 0 auto; }

/*---------------------------------------------------------
コンテナ設定
---------------------------------------------------------*/
.contents-wrap {
  color: #333; }

/*---------------------------------------------------------
フッター
---------------------------------------------------------*/
/*---------------------------------------------------------
フッター
---------------------------------------------------------*/
footer {
  padding: 15px !important;
  max-width: 750px;
  width: 100%;
  margin: 0 auto; }

body {
  background-color: #ddd; }
  body .contents .contents-wrap {
    background-color: #fff;
    padding-bottom: 60px; }
    @media screen and (max-width: 768px) {
      body .contents .contents-wrap {
        padding-bottom: 30px; } }
  body .contents .menu-column {
    margin-top: 0 !important;
    max-width: 750px;
    width: 100%;
    margin: 0 auto; }

.dash {
  letter-spacing: -0.1em;
  /* フォントに合わせて調整してください */
  margin-right: 0.1em;
  /* 詰まった分、後ろに少し余白を作ると綺麗です */ }

.notes {
  font-size: min(3.5vw, 10px);
  display: block;
  text-align: right;
  width: 100%;
  margin: 5px auto 0 auto; }
  @media screen and (max-width: 768px) {
    .notes {
      width: 95%; } }

/*---------------------------------------------------------
アイキャッチ
---------------------------------------------------------*/
#eyecatch {
  margin-bottom: 90px; }
  @media screen and (max-width: 768px) {
    #eyecatch {
      margin-bottom: 40px; } }

/*---------------------------------------------------------
開催主旨
---------------------------------------------------------*/
.purpose {
  margin-bottom: 80px; }
  @media screen and (max-width: 768px) {
    .purpose {
      margin-bottom: 40px; } }
  .purpose p {
    font-size: 18px;
    line-height: 2.4;
    text-align: center; }

/*---------------------------------------------------------
開催情報
---------------------------------------------------------*/
.event_info {
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .event_info {
      margin-bottom: 40px; } }

/*---------------------------------------------------------
積水ハウス×積水ハウスグループについて
---------------------------------------------------------*/
.sekisui_info {
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .sekisui_info {
      margin-bottom: 40px; } }
  @media screen and (max-width: 768px) {
    .sekisui_info .contentMinInner {
      width: 100%; } }
  .sekisui_info ul li {
    margin-bottom: 20px; }
    @media screen and (max-width: 768px) {
      .sekisui_info ul li {
        margin-bottom: 40px; } }
    .sekisui_info ul li:last-child {
      margin-bottom: 0; }

/*---------------------------------------------------------
事前予約制セミナーイベント情報
---------------------------------------------------------*/
.seminar_info {
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .seminar_info {
      margin-bottom: 80px; } }
  @media screen and (max-width: 768px) {
    .seminar_info .contentMinInner {
      width: 100%; } }
  .seminar_info h3 {
    margin-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .seminar_info h3 {
        width: 90%;
        margin: 0 auto 40px auto; } }
  @media print, screen and (min-width: 768px) {
    .seminar_info ul li:nth-child(2) {
      margin-top: 10px; }
    .seminar_info ul li:nth-child(3) {
      margin-top: -60px; }
    .seminar_info ul li:nth-child(4) {
      margin-top: 10px; }
    .seminar_info ul li:nth-child(5) {
      margin-top: 10px; }
    .seminar_info ul li:nth-child(6) {
      margin-top: 10px; } }
  @media screen and (max-width: 768px) {
    .seminar_info ul li {
      margin-bottom: 40px; }
      .seminar_info ul li:nth-child(6) {
        margin-bottom: 10px !important; } }

/*---------------------------------------------------------
「わが家」を世界一幸せな場所にする
---------------------------------------------------------*/
.happy_place {
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    .happy_place {
      margin-bottom: 40px; } }
  @media screen and (max-width: 768px) {
    .happy_place .contentMinInner {
      width: 100%; } }
  @media print, screen and (min-width: 768px) {
    .happy_place ul {
      display: flex;
      justify-content: space-between; }
      .happy_place ul li {
        width: 440px;
        position: relative; }
        .happy_place ul li:nth-child(2) {
          width: 210px; }
        .happy_place ul li h2 {
          width: 78px; }
        .happy_place ul li h3 {
          position: absolute;
          top: 0;
          right: 5px;
          width: 445px; }
        .happy_place ul li p {
          padding: 40px 0 0 20px;
          font-size: 12px;
          line-height: 2.4; } }
  @media screen and (max-width: 768px) {
    .happy_place ul li {
      position: relative; }
      .happy_place ul li:first-child {
        width: 90%;
        margin: 0 auto 20px auto; }
      .happy_place ul li h2 {
        width: 85%;
        margin-left: 5%;
        margin-bottom: 5%; }
      .happy_place ul li h3 {
        position: absolute;
        top: 4%;
        left: 0;
        width: 100%;
        font-size: 0;
        line-height: 0; }
      .happy_place ul li p {
        padding: 40px 0 0 20px;
        line-height: 2.4;
        font-size: min(3.5vw, 19px) !important; } }

/*---------------------------------------------------------
事前予約はこちら
---------------------------------------------------------*/
.reservation {
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .reservation .contentMinInner {
      width: 100%; } }
  .reservation .reservation_inner {
    position: relative; }
    .reservation .reservation_inner .tel {
      display: block;
      position: absolute;
      top: 43.4%;
      left: 5%;
      width: 65.6%; }
      @media screen and (max-width: 768px) {
        .reservation .reservation_inner .tel {
          top: 40.4%;
          left: 7%;
          width: 88%; } }
    .reservation .reservation_inner .btn {
      display: block;
      position: absolute;
      bottom: 13%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%); }
      @media screen and (max-width: 768px) {
        .reservation .reservation_inner .btn {
          bottom: 10.5%;
          width: 78%; } }

/*---------------------------------------------------------
プレゼント
---------------------------------------------------------*/
.present {
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .present .contentMinInner {
      width: 100%; } }
  .present .title_h2 {
    margin: 0;
    font-size: 0;
    line-height: 0; }
    @media print, screen and (min-width: 768px) {
      .present .title_h2 {
        max-width: 175px; } }
    @media screen and (max-width: 768px) {
      .present .title_h2 {
        margin: 0 auto;
        width: 40%; } }
  @media screen and (max-width: 768px) {
    .present {
      margin-bottom: 60px; } }

/*---------------------------------------------------------
積水ハウス株式会社
---------------------------------------------------------*/
.company {
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .company {
      margin-bottom: 60px; } }
  @media print, screen and (min-width: 768px) {
    .company .title_h2 {
      max-width: 230px;
      margin: 0 auto 30px auto; } }
  @media screen and (max-width: 768px) {
    .company .title_h2 {
      width: 75%;
      margin: 0 auto 50px auto; } }
  .company ul li {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .company ul li {
        display: block;
        text-align: center; } }
    .company ul li span {
      display: block;
      line-height: 0;
      font-size: 0;
      margin-bottom: 15px; }
      @media print, screen and (min-width: 768px) {
        .company ul li span img {
          width: auto;
          height: 17px; } }
      @media screen and (max-width: 768px) {
        .company ul li span {
          margin: 0 auto 5% auto; }
          .company ul li span.c01 {
            width: 65%; }
          .company ul li span.c02 {
            width: 97%; }
          .company ul li span.c03 {
            width: 60%; }
          .company ul li span.c04 {
            width: 72%; }
          .company ul li span.c05 {
            width: 80%; }
          .company ul li span.c06 {
            width: 68%; } }

/*---------------------------------------------------------
イベントのお問い合わせ
---------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .event_inq .contentMinInner {
    width: 100%; } }
.event_inq .title_h2 {
  margin-bottom: 10px; }
.event_inq dl {
  position: relative;
  font-size: 0;
  line-height: 0; }
  .event_inq dl dt {
    position: absolute;
    bottom: 16%;
    left: 5%;
    width: 69.5%; }
    @media screen and (max-width: 768px) {
      .event_inq dl dt {
        bottom: 19%;
        left: 7%;
        width: 88.1%; } }

/*---------------------------------------------------------
コンポーネント 設定
---------------------------------------------------------*/
/*---------------------------------------------------------
タイトル 設定
---------------------------------------------------------*/
h2.title_h2 {
  color: #656261;
  text-align: center;
  font-size: 27px;
  line-height: 1.4;
  margin-bottom: 25px;
  font-weight: bold; }
  @media screen and (max-width: 768px) {
    h2.title_h2 {
      font-size: 20px;
      margin-bottom: 20px; } }

/*---------------------------------------------------------
lazyload 読み込み時のアニメーション
+ js/library/lazysizes.min.js
+ js/module/_lazyload.js
---------------------------------------------------------*/
img.lazyload {
  opacity: 0;
  transition: opacity 0.3s ease-in-out; }
img.loaded {
  opacity: 1; }

/*---------------------------------------------------------
ページトップへ戻るボタン
+ js/module/_scrollTop.js
---------------------------------------------------------*/
.pagetop {
  height: 45px;
  width: 45px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #656261;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  border-radius: 50%; }
  @media print, screen and (min-width: 768px) {
    .pagetop {
      transition: all .3s ease-out; } }
  @media print, screen and (min-width: 768px) {
    .pagetop:hover {
      opacity: .5 !important; } }
  @media screen and (max-width: 768px) {
    .pagetop:hover {
      opacity: 1 !important; } }
  @media screen and (max-width: 768px) {
    .pagetop {
      height: 35px;
      width: 35px;
      right: 10px;
      bottom: 10px; } }
  .pagetop::after {
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg); }

/*---------------------------------------------------------
コンテナサイズ 設定
---------------------------------------------------------*/
.contents-wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  width: 100%; }

.contentMinInner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  width: 90%; }

/*---------------------------------------------------------
限定表示 設定
---------------------------------------------------------*/
.pc {
  display: block; }
  @media screen and (max-width: 768px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp {
      display: block; } }

/*---------------------------------------------------------
イメージボックス
---------------------------------------------------------*/
.imgWrap {
  position: relative;
  display: block; }
  .imgWrap.fill {
    object-fit: fill; }
  .imgWrap.contain {
    object-fit: contain; }
  .imgWrap.cover {
    object-fit: cover; }
  .imgWrap.none {
    object-fit: none; }
  .imgWrap.scale-down {
    object-fit: scale-down; }

/*---------------------------------------------------------
要素 position 設定
---------------------------------------------------------*/
.posFix {
  position: fixed; }

.posRel {
  position: relative; }

.posAbs {
  position: absolute; }
  .posAbs.cross {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); }
  .posAbs.vertical {
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); }
  .posAbs.horizontal {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }

/*---------------------------------------------------------
長過ぎる文字列を省略して末尾を三点リーダー（…）にする
---------------------------------------------------------*/
.omitWrap {
  overflow: hidden;
  width: 100%; }
  .omitWrap p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3; }

/*---------------------------------------------------------
正方形・円形 設定
---------------------------------------------------------*/
.shapesWrap .square,
.shapesWrap .circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #656261; }
.shapesWrap .circle {
  border-radius: 50%; }

/*---------------------------------------------------------
リストタグリセット解除
----------------------------------------------------------*/
ul.list,
ol.list {
  padding-left: 1em !important; }

ul.list:has(li) {
  list-style: disc; }
  ul.list:has(li) ::marker {
    font-size: 0.75rem; }

ol.list:has(li) {
  list-style: auto; }