@charset "UTF-8";

/*reset css--------------------*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
improve,
nav,
section,
summary,
time,
mark,
audio,
video,
input,
textarea {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  word-break: break-all;
}

body {
  line-height: 1;
  font-family: "Noto Serif JP",sans-serif;
  color: #222;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
improve,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  background: transparent;
  font-size: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

/* change colours to suit your needs */

ins {/*文書を修正する際に、どの部分を追加したのかを示す場合に、該当箇所を<ins>～</ins>で囲んで使用する*/
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */

mark {/*<mark>周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します*/
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {/*<del>文書から削除された文字列の範囲を表す*/
  text-decoration: line-through;
}

abbr[title],
dfn[title] {/*このタグは略語や頭字語を表す*/
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */

hr {
  border: 0;
  border-top: 1px solid #cccccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

input,
select {/*<input>入力欄（フォーム入力）要素と<select>作成したフォームの中でメニュー（セレクトボックス）を作成するためのタグ*/
  vertical-align: middle;
}

html {
  overflow: auto;
}

body {
  overflow: hidden;
}

img {
  width: 100%;
}

/*reset css--------------------*/

/*base--------------------*/

a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

a:hover {
  opacity: 0.8;
}

html {
  -webkit-text-size-adjust: 100%;
}


/*margin-bottom*/
.mb10 {
	margin-bottom: 10px}
.mb20 {
	margin-bottom: 20px}
.mb30 {
	margin-bottom: 30px}
.mb40 {
	margin-bottom: 40px}
.mb60 {
	margin-bottom: 60px}
.mb80 {
	margin-bottom: 80px;}
.mb1em {
	margin-bottom: 1em;}
.mb2em {
	margin-bottom: 2em;}

/*margin-top*/
.mt10 {
	margin-top: 10px;}
.mt20 {
	margin-top: 20px;}
.mt30 {
	margin-top: 30px;}
.mt40 {
	margin-top: 40px;}
.mt60 {
	margin-top: 60px;}
.mt80 {
	margin-top: 80px;}
.mt1em {
	margin-top: 1em;}
.mt2em {
	margin-top: 2em;}

/*margin-right*/
.mr10 {
	margin-right: 10px;}
.mr20 {
	margin-right: 20px;}
.mr30 {
	margin-right: 30px;}

/*padding-bottom*/
.pb10 {
	padding-bottom: 10px;}
.pb20 {
	padding-bottom: 20px;}
.pb30 {
	padding-bottom: 30px;}
.pb40 {
	padding-bottom: 40px;}
.pb60 {
	padding-bottom: 60px;}
.pb80 {
	padding-bottom: 80px;}
.pb1em {
	padding-bottom: 1em;}
.pb2em {
	padding-bottom: 2em;}

/*position*/
.alignL {
	text-align: left;}
.alignC {
	text-align: center;}
.alignR {
	text-align: right;}

/*base--------------------*/

/*common--------------------*/

.contents{
  width: 64%;
  margin: 0 auto;
  padding: 8rem 0;
  line-height: 1.8;
}

.subtit{
  width: 24%;
  margin-bottom: 2rem;
}

.caution{
  color: #ff0000;
  font-family: "Noto Sans",sans-serif;
  font-size: .8rem;
}

.sp{
  display: none;
}

.pc{
  display: block;
}

.txt_sans{
  font-family: "Noto Sans",sans-serif;
}

.l_space{
  padding-left: 1em;
}

.center{
  text-align: center;
}

@media (max-width: 1280px) {/*タブレットで分岐*/
  .tab{
  display: inline-block;
}

.contents{
  width: 88%;
}

.subtit{
  width: 40%;
}

}

/*スマホの時のみ電話かかる　ここから*/
@media screen and (min-width: 768px){
a[href*="tel:"] {
    pointer-events: none; /*①アンカーのtelを無効化*/
    cursor: default; /*②アンカーのポインターをデフォルトにする*/
    text-decoration: none;
}
}
/*スマホの時のみ電話かかる　ここまで*/

@media (max-width: 767px) {

  .contents{
  width: 80%;
  /*padding: .5rem 0;*/
  padding: .5rem 0 1.8rem 0;
  line-height: 1.6;
}

.caution{
  font-size: .6rem;
  margin-top: .4rem;
}

.subtit{
  /*width: 56%;*/
  width: 64%;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.sp{
  display:block;
}

.pc{
  display: none;
}

.l_space{
  padding-left: 0;
}

}

/*00000000
下から上にフェードイン（テキスト）
00000000*/

/* ――― アニメーションCSS ――― */

        /* 1. 初期状態（アニメーションが始まる前）の設定 */
        .fade-up-text {
            /*font-size: 2rem;
            font-weight: 300;
            letter-spacing: 0.15em;
            color: #333;*/
            
            opacity: 0;               /* 最初は透明にする */
            transform: translateY(30px); /* 最初は少し下にずらしておく */
            transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 2s cubic-bezier(0.25, 1, 0.5, 1); 
            /* 2秒かけて滑らかに変化させる */
        }

        /* 2. JavaScriptによってクラス「is-visible」がついた時の設定（完了状態） */
        .fade-up-text.is-visible {
            opacity: 1;               /* 不透明度を1にして表示 */
            transform: translateY(0);    /* 元の（正しい）位置に戻す */
        }

/*common--------------------*/

/*----------------
header
----------------*/

header{
  /*width: 80%;*/
  width: 100%;
  /*width: 96%;*/
  margin: 0 auto;
}

.head_logo{
  /*width: 12%;*/
  width: 12%;
  padding: 16px 0 16px 24px;
}

/*PC用とSP用の画像が両方出てしまう対策　ここから*/

/* 画像を囲むコンテナ */
.mv {
    width: 100%;
    /*max-width: 1200px;*/ /* 必要に応じてサイズは調整 */
    margin: 0 auto;
    overflow: hidden;
}

/*PC用とSP用の画像が両方出てしまう対策　ここまで*/

/*00000000
ぼかしからくっきりフェードイン（MV）
00000000*/

/* 画像を囲むコンテナ（枠）の設定 */

        /* 画像自体の設定 */
        .blur-img {
            display: block;     /* 画像の下にできる謎の隙間を消す */
            width: 100%;        /* コンテナの幅に合わせる */
            height: auto;       /* 縦横比（アスペクト比）を維持 */
            
            /* アニメーション：1.5秒かけて、徐々に変化（ease-out）、最後に静止（forwards） */
            animation: blurToClear 1.5s ease-out forwards;
        }

        /* キーフレーム（アニメーションの具体的な動き） */
        @keyframes blurToClear {
            0% {
                filter: blur(15px); /* スタート時のぼかし具合 */
                transform: scale(1.05); /* ぼかしによる周囲の透過（白モヤ）を隠すために少し拡大 */
                opacity: 0;         /* 最初は透明からスタート（徐々に現れるように） */
            }
            100% {
                filter: blur(0px);  /* ぼかしを完全に無くす */
                transform: scale(1); /* 元のサイズ（100%）に戻す */
                opacity: 1;         /* 完全に表示 */
            }
        }

@media (max-width: 1280px) {/*タブレットで分岐*/
  .head_logo{
    width: 24%;
  }
}        

@media (max-width: 767px) {
  .head_logo{
    width:24%;
    padding: 8px 0 8px 16px;
  }
}

/*----------------
intro
----------------*/

.contents_intro{
  width: 64%;
  /*width: 100%;*//*20260706修正 動画を幅いっぱいにするために設定していたが、7/16不要となった*/
  margin: 0 auto 3rem auto;/*下のマージンは動画が設置されたら0に戻す*/
  padding: 2rem 0;
  line-height: 1.8;
}

.subtit_txt{
  font-size: 1.6rem;
  font-weight:500;
  margin: 40px auto 24px auto;
  text-align: center;
}

.movie{
  width: 100%;
   /*aspect-ratio: 16 / 9;*//*20260713修正*/
  /*margin: 56px 0;*//*20260713修正*/
  /*margin-top: 64px;*//*20260716修正*/
  margin: 0 auto 80px auto;/*20260716修正*/
}

.movie iframe{
  width: 100%;
  height: 100%;
}

.intro_txt{
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 1280px) {/*タブレットで分岐*/

  /*.movie{
    margin: 24px 0 0 0;
  }*//*20260716修正*/

    .movie{/*20260716追記*/
    width: 88%;
    margin: 0 auto 64px auto;
  }

}

@media (max-width: 767px) {

  .subtit_txt{
    /*font-size: 1.2rem;*/
    font-size: 1rem;
    margin:16px auto;
  }

  .movie{
    width: 100%;/*20260716追記*/
    /*margin: 24px 0;*//*20260716修正*/
  }

  .contents_intro{
    width: 80%;
    padding: .5rem 0 1.8rem 0;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .intro_txt{
  /*font-size: .8rem;*/
  font-size: .9rem;
  }

}

/*----------------
pickup
----------------*/

.pickup_contents{
  width: 64%;
  margin: 0 auto;
  line-height: 1.8;
}

.pickup_box_A{
  display: flex;
  align-items: center;
}

.pickup_box_B{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.pickup_txt_A{
  margin-right: 1.6rem;
  width: 52%;
}

.pickup_txt_B{
  margin-left: 1.6rem;
  width: 52%;
}

.pickup_img{
  width: 48%;
  flex-shrink: 0;/*文字量で画像のサイズが変わらないように*/
  object-fit: cover;/*画像が歪まないように*/
}

.pickup_bg_01{
  background-color: #edf4e1;
  padding: 4rem 0;
}

.pickup_bg_02{
  background-color: #f2eae7;
  padding: 4rem 0;
}

.pickup_bg_03{
  background-color: #dfebf2;
  padding: 4rem 0;
}

.subtit_box{
  line-height: 1.6;
  padding-bottom: 1rem;
  border-bottom:1px #222 solid;
  margin-bottom: 1.2rem;
}

.subtit_en{
  font-size: 1.8rem;
  font-weight:500;
}

.subtit_jp{
  font-size: 1.2rem;
  font-weight:500;
}

. pickup_ex_txt{
  font-size: 1rem;
}

@media (max-width: 1280px) {/*タブレットで分岐*/
  .pickup_contents{
    width: 88%;
  }
}

@media (max-width: 767px) {
  .pickup_bg_01, .pickup_bg_02, .pickup_bg_03{
    padding: 2rem 0;
  }
  .pickup_contents{
    width: 80%;
  }

.pickup_box_A, .pickup_box_B{
    flex-direction: column-reverse;
}

.pickup_txt_A{
  width: 100%;
}

.pickup_txt_B{
  margin-left: 0;
  width: 100%;
}

.subtit_box{
  padding-bottom: .6rem;
  margin: .2rem 0 .8rem 0;
  line-height: 1.6;
}

.subtit_en{
  font-size: 1.4rem;
}

.subtit_jp{
  font-size: 1rem;
}

.pickup_img{
  width: 100%;
}

.pickup_ex_txt{
  font-size: .9rem;
}

}

/*----------------
point
----------------*/

.point_bg{
  background-image: url(../images/point_bg.jpg);
  /*background-size: contain;*/
  background-size: cover;
  padding-bottom: 8rem;
  background-repeat: no-repeat;
}

.point_list{
  font-size: 1.8rem;
}

.point_list li{
  background-color: rgba(255, 255, 255, 0.5); 
  padding: 24px 0;
  text-align: center;
  margin-bottom: 24px;
  font-weight: 500;
}

@media (max-width: 1280px) {/*タブレットで分岐*/
  .point_bg{
    background-size: cover;
  }

  .point_list{
  font-size: 1.4rem;
}
}

@media (max-width: 767px) {
  .point_bg{
    background-size: cover;
    /*padding-bottom: 4rem;*/
    padding-bottom: 2rem;
  }

  .point_list{
    font-size: 1rem;
  }

  .point_list li{
    padding: 12px 0;
    margin-bottom: 16px;
  }

}

/*----------------
contact
----------------*/

.subtit_contact{
  display: block;
  width: 12%;
  text-align: center;
  margin: 0 auto;
  padding: 4rem 0 2rem 0;
}

.contact{
  background-image: url(../images/contact_bg.jpg);
  background-size: cover;
  padding-bottom: 4rem;
}

.contact_box{
  width: 56%;
  margin: 0 auto;
}

ul.contact_btn{
  display: flex;
}

ul.contact_btn li{
  margin-right: 2rem;
}

ul.contact_btn li:last-child{
  margin-right: 0;
}

@media (max-width: 1280px) {/*タブレットで分岐*/
  .subtit_contact{
      width: 24%;
  }

  .contact_box{
    width: 80%;
  }

}

@media (max-width: 767px) {
  .subtit_contact{
    padding: 1.6rem 0 1rem 0;
    /*width: 24%;*/
    width: 32%;
  }

  .contact{
    padding-bottom: 1.6rem;
    background-position: center;
    /*background-size: contain;
    background-repeat: no-repeat;*/
  }

  .contact_box{
  width: 80%;
}

  ul.contact_btn{
    flex-direction: column;/*20260716追記*/
}

  ul.contact_btn li{
  /*margin-right: 1rem;*//*20260716修正*/
  margin-right: 0;/*20260716追記*/
  margin-bottom: 1rem;/*20260716追記*/
}

ul.contact_btn li:last-child{
  /*margin-bottom: 0;*//*20260716追記*/
}

}

/*----------------
floor plan
----------------*/

.floorplan_box{
  display: flex;
  justify-content: space-between;
  font-family: "Noto Sans",sans-serif;
}

.floorplan_box_2{
  display: flex;
  font-family: "Noto Sans",sans-serif;
  /*20260618追記　以下均等に並べるための記述*/
  flex-wrap: wrap;        /* 3個ごとに自動で折り返す設定 */
  justify-content: flex-start; /* ★重要：2段目を左揃えにする */
  gap: 40px;              /* ★重要：アイテム同士の「横」と「縦」の余白（数値は自由に変更してください） */
}

.madori{
  width: 30%;
  /*20260618追記　以下均等に並べるための記述*/
  /* 3列等幅にするための計算式：
    (全体の100% - 横の余白2回分) / 3列
  */
  width: calc((100% - 40px * 2) / 3); 
  box-sizing: border-box; /* 枠線や内側余白で幅がズレるのを防ぐ */
}

.madori_img{
  /*20260618追記　以下均等に並べるための記述*/
  width: 100%;
  height: auto;
}

ul.floorplan_list{
  margin-bottom: 2rem;
}

ul.floorplan_list li{
  list-style-type:square;
  list-style-position: inside;
  line-height: 1.6;
}

ul.floorplan_list li::marker{
  color: #006bb4;
}

@media (max-width: 767px) {

  .floorplan_box{
    flex-direction: column;
  }

  .madori{
  width: 100%;
}

ul.floorplan_list{
  margin-bottom: 1.2rem;
  /*margin-bottom: 2.4rem;*/
}

.madori_img{
  border:#dfdfdf 1px solid;
}

}

/*----------------
plot map
----------------*/

.plotmap_base{
  background-color: #efefef;
}

.plotmap_img{
  background-color: #fff;
  padding: 4rem 0;
}

.plotmap_img img{
  /*width: 64%;*/
  width: 96%;/*20260626修正*/
  display: block;
  margin: 0 auto;
}

.plotmap_catch{
  background-color: #123479;
  color: #fff;
  padding: 8px 0;
  text-align: center;
  font-family: "Noto Sans",sans-serif;
}

ul.plotmap_genchi{
  display: flex;
  /*20260625追記　以下均等に並べるための記述*/
  flex-wrap: wrap;        /* 6個ごとに自動で折り返す設定 */
  justify-content: flex-start; /* ★重要：2段目を左揃えにする */
  gap: 8px;              /* ★重要：アイテム同士の「横」と「縦」の余白（数値は自由に変更してください） */
  width: 100%;
  /*max-width: 1200px;*/     /* 全体の最大幅（お好みで） */
  /*margin: 0 auto;*/
}

ul.plotmap_genchi li{
  width: 8%;
  /*margin-right: 8px;*/
  /*20260625追記　以下均等に並べるための記述*/
  /* 6列等幅にするための計算式：
    (全体の100% - 横の余白2回分) / 6列
  */
  width: calc((100% - 8px * 5) / 6); 
  box-sizing: border-box; /* 枠線や内側余白で幅がズレるのを防ぐ */
}

ul.plotmap_genchi li img{/*20260625追記*/
  width: 100%;
  height: auto;
}

ul.plotmap_genchi li:last-child{
  margin-right: 0;
}

.subtit_genchi{
  border-left: 5px solid #006bb4;
  margin: 2rem 0 1rem 0;
  font-weight: 600;
  padding-left:10px;
  font-size: 1.2rem;
}

@media (max-width: 767px) {
  .plotmap_img img{
  width: 80%;
  }

  .plotmap_img{
    padding:2rem 0;
  }

  .plotmap_base{
    padding-bottom: 1.8rem;
  }

  ul.plotmap_genchi{
    flex-direction: column;
  }

  ul.plotmap_genchi li{
    width: 100%;
    margin-bottom: .5rem;
  }

  .plotmap_catch{
    font-size: .8rem;
  }

}

/*----------------
access
----------------*/

.access_txt::before{
  content:"■ ";
  color:#006bb4;
}

.access_txt{
   font-family: "Noto Sans",sans-serif;
   margin-bottom: 1rem;
}

.map{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9のアスペクト比 */
  height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*----------------
footer
----------------*/

footer{
  font-family: "Noto Sans",sans-serif;
}

.footer_catch{
  background-color: #cae4f5;
  color: #006bb4;
  font-weight: 500;
  text-align: center;
  padding: 16px 0;
  font-size: 1.6rem;
}

.company_info{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:32px auto 48px auto;
  line-height: 1.6;

  align-items: stretch; /* ★コンテンツ間の線　縦の線を親要素の高さに合わせて伸縮させる */
}

.company_name{
  width: 24%;
  padding-top: 1rem;/*電話番号と位置を合わせる為*/
  /*border-right: solid 1px #222;*/
  text-align: right;
  width: 32%;
}

.company_tell{
  display: flex;
  /*width: 24%;*/
  /*width: 32%;*/
  width: 40%;
}

.company_tell::before{/*★コンテンツ間の線*/
  content: "";
  border-left: 1px solid #ccc; /* 縦線の太さと色 */
  margin: 0 4rem; /* 線の左右の余白 */
}

.footer_logo{
  /*width: 12%;*/
  /*width: 64%;*/
  width: 288px;
  /*padding: 16px 0 12px 0;*/
}

.store{
  /*font-size: 1.2rem;*/
  font-size: 20px;
  text-align: center;
  padding-top: 4px;
  display: inline-block;
}

.tell_icon{
  /*width: 2%;*/
  /*width: 12%;*/
  width: 48px;
  /*idth: 16%;*/
}

.tell{
  /*font-size: 1.5rem;*/
  font-size: 2.4rem;
  color: #006bb4;
  font-weight: 600;
}

.tell a{
  color: #006bb4;
}

.licence{
  /*font-size: .6rem;*/
  font-size: .8rem;
  text-align: center;
}

small{
  font-size: smaller;
  text-align: center;
  background-color: #123479;
  padding: 8px 0;
  color: #fff;
  display: block;
  margin-top: 16px;
}

@media (max-width: 1280px) {/*タブレットで分岐*/

  .footer_logo{
    width: 240px;
  }

  .company_name{
    width: 32%;
  }

  .company_tell{
    width: 48%;
  }

  .tell{
    font-size: 2rem;
  }

  .tell_icon{
    width: 40px;
  }

  .licence{
    line-height: 1.5;
    width: 88%;
    margin: 0 auto 1rem auto;
    text-align: left;
  }

  .company_info{
    margin: 24px auto 32px auto;
  }

}

@media (max-width: 767px) {

  .footer_catch{
    font-size: 1rem;
  }

  .company_info{
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  .company_name{
    width: 100%;
    text-align: center;
  }

  .company_tell{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
  }

  .company_tell::before{
    border-left: none;
    margin: 0;
  }

  .licence{
    font-size: .4rem;
    width: 80%;
    margin: 1rem auto;
    line-height: 1.6;
    text-align: left;
  }

  .footer_logo{
    padding-top: 1.2rem;
    width: 200px;
    /*width: 160px;*/
  }

  .store{
    font-size:16px;
  }

  .tell{
    font-size: 1.6rem;
  }

  .tell_icon{
    width: 32px;
  }
  
  small{
    font-size: 8px;
  }

}