@charset "UTF-8";
a,
a:visited,
a:hover {text-decoration:none;color:inherit;}
body {font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif; line-height: 1.75;font-size: 1.5em;color: #000;position: static;}
ol, ul {  list-style: none;}
h1{font-size: 27px;text-align: left;letter-spacing: 0.2em;margin-bottom: 30px;}
h2{ font-size: 30px;text-align: center;letter-spacing: .1em;flex-direction: row;align-items: center; color:#7E3F3F; }
h2 span { width:100%; font-size:1rem; text-align:center; display:inline-block; }
.back_navy{background: #7E3F3F;}
.back_gray{background: #ECE6DC; background: linear-gradient(to bottom, #ECE6DC, #FFCA75);}
.text_white{color: white;}
.outimg{margin-top: 100px;}



/* header */
@keyframes fadeIn {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
* {margin: 0;padding: 0;box-sizing: border-box;}
header {left: 0;width: 100%;display: flex;justify-content: end;align-items: center;z-index: 10;padding: 20px 15px 0 0;transition: 0.5s;position: absolute;top: 0;}
.logo {color: #fff;text-decoration: none;font-size: 23px;letter-spacing: 1px;transition: 0.5s;}
ul {display: flex;justify-content: center;align-items: center;}
li {list-style: none;}
header ul li a{color: #000;}
header a {display: inline-block;margin-left: 12px;color: #fff;font-size: 14px;text-decoration: none;letter-spacing: 1.5px;transition: 0.5s;font-size: 15px;letter-spacing: 3px;margin: 0 25px;}
header a:hover{opacity: 0.5;}
header a span{text-align: center;font-weight: bold;letter-spacing: 8px;line-height: 23px;margin-top: -5px;}
header a span small{font-size: 11px;letter-spacing: 3px;font-weight: initial;}
.section-a {background: #000;}
.section-b {background: #fff;}
header a.logo{width: 160px;margin-left: 3vw;}
header.scroll-nav {padding: 10px 15px;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);padding: 10px 15px;background: rgba(255,255,255,0.9);}
.logo_black{display: none;}
.logo_white_sp{display: none;}
.logo_black_sp{display: none;}
header.scroll-nav .logo,header.scroll-nav ul li a {color: #3d3d3d;}/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
header.scroll-nav .logo_white{display: none;}
header.scroll-nav .logo_black{display: block;}
ul li a{color: #161616;}
.far{font-size: 20px;}
.circle {width: 60px;height: 60px;border-radius: 50%;position: relative; margin-top:70px; background:#BFA06B; }
.circle i{position: absolute;top: 20px;left: 20px;}

:after,
:before {
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
a,
body,
button,
dd,
div,
dl,
dt,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img,
li,
ol,
p,
small,
span,
table,
td,
th,
time,
tr,
ul {
  border:0;
  font-weight: normal;
}

/*ハンバーガー*/
.menu-btn{display: none;}
.menu{display: none;}





.image { width:100%; display:flex; flex-wrap:wrap; margin:0px 0 0 0; justify-content: space-between;}
.button {display: inline-block;width: 200px;text-align: center;text-decoration: none;outline: none;margin:0 0 30px 0;}
.button::before,
.button::after {position: absolute;z-index: -1;display: block;content: '';}
.button,
.button::before,
.button::after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s;}
.button {position: relative;z-index: 2;background-color: #fff;border: 2px solid #333;color: #333;overflow: hidden;padding:10px 0;}
.button:hover {color: #fff;}
.button::after {top: -100%;width: 100%;height: 100%;}
.button:hover::after {top: 0;background-color: #333;}
.button strong { width:100%; line-height:1.7em; font-family: gill-sans-nova, sans-serif; font-size:2rem; display:inline-block;}
.button small { width:100%; line-height:1.7em; display:inline-block;}
.button span { width:100%; display:inline-block;}
.js_inview.done{position: relative;}

@keyframes bggradient{
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}


/* 予告広告 */
.yokoku_wrap{position: absolute;z-index: 100;display: flex;flex-direction: row;width: 100vw;right: 0;left: 0;margin: 0 auto;align-items: center;justify-content: center;background: #C6C6C6;padding: 10px 0; justify-content: left; }
.yokoku_logo{width: 160px;}
.yokoku_logo img {display: none;}
.yokoku_chui{display: flex;flex-direction: row;align-items: center;}
.yokoku_text{font-size: 14px;letter-spacing: 1px;line-height: 16px;}
.yokoku_tytle{background: #45484A;color: white;padding: 5px 15px;margin: 0 1vw 0 3vw;height: 27px;display: flex;align-items: center; font-size: 16px;}


/* トップ */
#top .inner {max-width: 1100px;margin: auto;padding: 0 40px;padding: 60px 40px 0 40px;padding: 80px 0px 100px 0;}
.top_tytles{position: absolute;color: white;z-index: 105;top: 100px;text-align: center;top: 16vw;left: 0;right: 0;margin: 0 auto;}
.top_tytle2{font-size: 27px;letter-spacing: 5px;margin-top: 10px;}
.top_tytle_logo { left: 0;margin: 0 auto;position: absolute;right: 0;top: -3vh; font-size:35px; line-height:1.6em; }
.top_tytle_logo img{width: 100%;}
.top_wrap{position: relative;}
.top_tytle_concept {left: 0;margin: 0 auto;position: absolute;right: 0;top: -9vh;font-size: 20px;letter-spacing: .1em;}
.top_tytle_text{left: 0;margin: 0 auto;position: absolute;right: 0;top: 12vh;font-size: 60px;letter-spacing: 0.15em;font-weight: bold;}
.top_attention { top:27vh; position:absolute; left:0; margin:0 auto; right:0; font-size:1.8vw; letter-spacing:0.15em; letter-spacing:0.15em; border: 1px solid white; width:31vw; padding:3px; }


/* トップの文字を上から下に出現させる */
.fadeUp{animation-name:fadeUpAnime;animation-duration:1.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}
}
.fadeUpTrigger{opacity: 0;}
.slide-in {overflow: hidden;display: inline-block;}
.slide-in_inner {display: inline-block;}
.upAnime{opacity: 0;}
.slideAnimeDownUp {animation-name:slideTextY100;animation-duration:1.8s;animation-fill-mode:forwards;opacity: 0;}
@keyframes slideTextY100 {
from {transform: translateY(100%);opacity: 0;}
to {transform: translateY(0);opacity: 1;}
}
.slideAnimeUpDown {animation-name:slideTextY-100;animation-duration:1.8s;animation-fill-mode:forwards;opacity: 0;}
@keyframes slideTextY-100 {
from {transform: translateY(-100%);/* 要素を下の枠外に移動*/opacity: 0;}
to {transform: translateY(0);/* 要素を元の位置に移動*/opacity: 1;}
}


/*スクロールダウン*/
.scrolldown1{position:absolute;left:50%;bottom:-30px;height:50px;}
.scrolldown1 span{position: absolute;left:-25px;top: -15px;color: #fff;font-size: 1.2rem;letter-spacing: 0.05em;font-size: 12px;}
.scrolldown1::after{content: "";position: absolute;top: 0;width: 1px;height: 30px;background: #000;animation: pathmove 1.4s ease-in-out infinite;opacity:0;}
@keyframes pathmove{
	0%{height:0;top:0;opacity: 0;}
	30%{height:30px;opacity: 1;}
	100%{height:0;top:50px;opacity: 0;}
}

/* コンセプト */
.leaf_PC { position: absolute; z-index: 1; mix-blend-mode: multiply; opacity: 30%; display:block; margin-top:80px; }
.leaf_PC  img { width:100%; }
.leaf_SP { display:none; }
.concepts{text-align: center;}
.concept_tytle{font-size: 25px;margin-top: 40px;margin-bottom: 50px; letter-spacing: 3px; }
.concept_text{line-height: 35px;font-size: 16px;letter-spacing: .1em; font-weight: normal;}
.concept_wrap{width: 80%;margin: 0 auto;}
.con_img img{width: 100%;}
.con_img{width: 700px;margin: 0 auto;margin-top: 50px;}
.concept_perth {width: 60vw;margin: 0 auto;margin-top: -80px; position: relative;}
.concept_perth small{font-size: 12px;position: absolute;bottom: -10vh;left: 0;}
.concept_perth img{width: 100%;}
.cont_block .cont_block_request { background:#fff; }
#sec_design { margin-top:-20}

/* プラン */
.cont_plan { background: #fff; padding: 80px 0; }
.top_plan { background: #fff;}
.top_plan_name { display: block; position: relative; text-align: center; font-size:20px; margin-top:20px; }
#top #sec_design .cont_plan_back {
  background: #FBF1E1;
}

/* 物件概要 */
dl.outline{font-size: 16px;color: white;}
.outline_wrap { width:80%; margin:0 10%; }
.outline_wrap .outline { width:100%; display:flex; border-bottom:dotted 1px #ccc; padding:5px 0; }
.outline_wrap .outline dt { width:30%; }
.outline_wrap .outline dd { width:70%; }
.outline_wrap small { margin-top:20px; display:inline-block;}
.outline_wrap .en_ttl { width:100%; margin:0 0% 50px 0%;text-align: center;  }
.outline_title { font-size:17px; padding-top:100px; border-bottom: dotted 1px #ccc; }
.image { width:100%; }
.outline a {text-decoration: underline;}
.outline a:hover {text-decoration: none;}


/* フォーム */
.btn_wrap {display: flex;align-items: center;justify-content: space-between;margin-top: 100px;}
.btn_wrap > div {width: 48%;}
.btn_wrap a {display: block;background: #000;color: #fff;text-align: center;font-size: 2.4rem;font-weight: bold;padding: 10px;transition: .5s;border: 2px solid #000;}
.btn_wrap a:hover {opacity: .7;}
.btn_wrap a.cancel {background: none;color: #000;border: 2px solid;}


/* フッター */
#footer {padding: 20px 0;text-align: center;font-size: 1.3rem;background:#f3f3f1;}
#footer span {
width: 100%;
display: inline-block;
font-size: 14px;
display: flex;
width: 400px;
margin: 0 auto;
justify-content: center;
align-items: center;
}
#footer .logo { margin-bottom:20px; }
#footer .logo:hover{ opacity:50%; }
#footer small {font-size:1rem;line-height:1.7em;font-size: 12px;}
.contents {padding: 0;}
a.instagram{line-height: 0px;}


/* PC・SP */
.PC{display: block;}
.SP{display: none;}






@media screen and (max-width: 640px){
#top #sec_design .cont_block {padding-bottom: 0px; }
#top .contents{padding: 0;}
.SP{display: block;}
.PC{display: none;}

/* ヘッダー */
header a{margin-right: 0px;}

/* 予告広告 */
.yokoku_wrap{width: 100vw;margin-top: 0px;justify-content: center;}
.yokoku_text{font-size: 11px;line-height: 16px;letter-spacing: 0;margin-top: 5px;}
.yokoku_chui{display: block;width: 95vw;}
.yokoku_tytle{font-size: 13px; width: auto;margin-left: 0;height: initial;padding: 0px 15px;display: flex;align-items: center;}
.yokoku_sp{display: flex;flex-direction: row;margin-bottom: 10px;}
.yokoku_logo img{width: 100%; display: none;}
.yokoku_logo {width: 100px;margin-left: 10px;}

/* トップ */
.top_tytles{width: 90vw;margin: 0 auto;left: 0;right: 0;top: 45vw;}
.top_tytle1{letter-spacing: 1px;font-size: 13px;}
.top_tytle2 {font-size: 19px;letter-spacing: 5px;margin-top: 10px;}
.scrolldown1{bottom: -35px;}
.top_tytle_concept{top: -7vh;font-size: 17px;}
.top_tytle_logo {font-size:30px; left: 0;right: 0;margin: 0 auto;top: -4vw;}
.top_tytle_text{font-size: 40px;top: 13vh;}
.top_attention { width: 90%; font-size: 18px;}

/* スクロールダウン */
.scrolldown1 span{color: #000;}

/* コンセプト */
h1{font-size: 23px;letter-spacing: 0.1em;}
.leaf_PC { display:none;}
.leaf_SP { display:block; width:100%; height:100%; object-fit:cover; position: absolute; z-index: 1; mix-blend-mode: multiply; opacity: 30%; display: block;}
.leaf_SP img { width:100%; }
.concept_tytle{font-size: 18px;margin-top: 20px;top: -7vw;letter-spacing: 0.15em; font-weight:normal; }
.concept_text{line-height: 30px;}
.concept_text{font-size: 14px;}
.concept_text{text-align: justify;}
.concept_wrap {width: auto;margin: 0 auto;}
#top .inner{margin: 0px 5%;padding: 30px 0px; padding-bottom: 80px;}
.concept_perth {width: 90vw;margin: 0 auto;margin-top: -10px;margin-bottom: 90px;}
.concept_perth small {font-size: 10px;position: absolute;top: 250px;left: auto;width: 90vw;color: #000;}

/* プラン */
.cont_plan .top_concepts { width:90%; margin:0 auto; }
#top #sec_design .cont_plan { padding-bottom:80px; }
#top #sec_design .cont_plan_back { background:#FBF1E1; }
.top_plan { margin-top:40px; }

/* 物件概要 */
.outline_wrap { width:100%; margin:0; }
.outline_wrap .outline{font-size: 13px;}
.outline_wrap .en_ttl {margin: 0% 0% 20px 0%;top: -9vh;}

/* フォーム */
#top #sec_design .cont_block_request{padding: 20px 0px;}
.btn_wrap {display: block;margin-top: 50px;  }
.btn_wrap > div {width: 100%;  }
.btn_wrap > div + div {margin-top: 15px;}
.btn_wrap a {font-size: 1.8rem;  }


/* フッター */
#footer {padding: 50px 0;background: #f3f3f1;}
#footer span{width: 100%;}
#footer span.PC {display:none;}
#footer .logo img {width: 50%;}
.contents {padding: 80px 0;}
#footer {padding: 20px 0 50px 0;}
#willproduce{margin-top: 0px;}


    }


#willproduce .shirotsuchi {display: none;}
a[href^="https://www.wills.co.jp/nagoya"]:after,
a[href^="https://www.wills.co.jp/nagoya"]:after {
  margin: 13px 0 0 5px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
  color:#585656;
  font-size:14px;
  position: absolute;
}

@media screen and (max-width: 640px){
  a[href^="https://www.wills.co.jp/nagoya"]:after,
a[href^="https://www.wills.co.jp/nagoya"]:after {
  margin: 13px 0 0 5px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
  color:#585656;
  font-size:12px;
  position: absolute;
}
}

.outline a[href^="https://www.wills.co.jp/nagoya"]:after,
.outline a[href^="https://www.wills.co.jp/nagoya"]:after {
  margin: 8px 0 0 5px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
  color:#fff;
  font-size:12px
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
   margin:0 auto;
}

.slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
   text-align:center;
 margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
 margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;/*ドットボタンのサイズ*/
   height:8px;/*ドットボタンのサイズ*/
   display:block;
   border-radius:50%;
   background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
   background:#333;/*ドットボタンの現在地表示の色*/
}


/*========= レイアウトのためのCSS ===============*/

body{
 background:#eee;
}

h2,p {
   text-align:center;
   padding:20px;
}

ul{
 margin:0;
 padding: 0;
 list-style: none;
}

a{
 color: #333;
}

a:hover,
a:active{
 text-decoration: none;
}





/* 追加 */

.p-top-fv { background: #ECE6DC; padding-top:140px; }
.p-top-fv__img {
  border-radius: 0 1.5rem 1.5rem 0;
  overflow: hidden;
  width: 100%;
  height: 500px;
}
.p-top-fv__title { position:relative; z-index:2; color:#7E3F3F; font-size: max(9.5vw,100px);  }
.p-top-fv__title-under { text-align:left; color:#7E3F3F; font-size:max(2.5vw,16px); }
.top_copy_left{ position: absolute;
  top: 0;
  right: 6rem;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
text-align:inherit; padding-top: 0px;}
  .top_copy_left strong { font-size:64px; font-weight:inherit;  }
  .top_copy_right { position: absolute;
    top: 56%;
    translate: 0 -50%;
    left: calc(100% - 6.25rem);
    width: 340px;
    height: auto;
    translate: 0 2.5rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-top-fv__topic-body { padding:0; border-radius:0; font-weight:normal; padding-left:20px;  font-size:30px; }
  .p-top-fv__img-wrap { margin-top:-7rem;  aspect-ratio: 1022/550; }
  .topic-body-02 { margin-top:20px;  width:350px; }

  @media screen and (max-width: 767px) {
    .p-top-fv__img { height:100%; }

    .top_copy_left{
        padding-left: 1.875rem;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.7777777778;
        letter-spacing: 0.0488888889em;
        font-size: 16px;
        writing-mode: inherit;
        text-align:left;
        position:relative; 
        left:0; 
        padding-top: 30px;
      
  
    }
    .top_copy_left span { line-height: 1;}
    .top_copy_left strong  { font-weight:normal; font-size:40px; }
    .top_copy_right {
    position: absolute;
    top: 20%;
    translate: 0 -50%;
    left: calc(100% - 14.25rem);
    width: 245px;
    height: auto;
    translate: 0 2.5rem;
    padding-left: 20px;
    padding-right: 20px;
    
    }
    .topic-body-02 { width:230px; }

    .p-top-fv__title { font-size:54px; }
    .circle { margin-top:100px; }
    .p-top-fv__title-under { padding-bottom:0;margin-top: -20px; }
    .p-top-fv__img-wrap { margin-top:-3rem; aspect-ratio: 330/404; }

    /* 白いコピー */
    .p-top-fv__topic-body { font-size:20px; left:10%; }
  }


  @media screen and (max-width: 400px) {
    .top_copy_left{ top: 610px; z-index: 3; text-align: center; padding: 20px;  }
    .p-top-fv { padding-top:10px; padding-bottom: 95px; }
  }


@media screen and (max-width: 740px) {
  #footer strong a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 追加　ランドプラン用 */
.cont_landplan { padding-bottom:150px; }
.top_landplan { display:flex; gap:40px; margin-top: 40px;}
.top_landplan .top_plan { width:100%;}
.landplan_img { width: 100%;
  margin: 0 auto;
    margin-top: 0px;
  text-align: center;
  margin-top: 80px;
}
.landplan_img img { width: 100%;
  margin: 0 auto;
  text-align: center; height: auto; }

.top_landplan_name {width: 100%; line-height: 18px;
  display: inline-block;
  text-align: justify;
  margin-top: 20px;
font-size:14px;  justify-content: center;
display: grid;
margin: 20px auto;
}

@media screen and (max-width: 740px) {
  .top_landplan { display:block; }
  .landplan_img img { width: 100%; }
  .top_landplan_name {width: 100%; height:auto;  }

  .top_plan_name { font-size: 16px;
    margin-top: 20px;}
  .top_landplan_name { font-size:14px; }
  header a.pc { display:none;}
}