/*
背景etc
*/

body{
margin-right: auto;
margin-left : auto;
background: #FFFFFF 0% 0% no-repeat padding-box;
}

@media screen and (max-width: 768px){
body{
margin-right: auto;
margin-left : auto;
background: #FFFFFF 0% 0% no-repeat padding-box;
}
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
共通系（フォント指定、改行系）
*/

/*游ゴシック体をmac/winどちらでも反映されるように指定、念の為游ゴシックがない人のために角ゴシック指定*/
body{
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color:#333333;
}

/*スマホの時、規定のところで文字が折り返しになるように*/
.br_sp{
  display: inline;
}

@media screen and (max-width: 768px){
.br_sp{
  display: grid;
}
}

a:hover{
  opacity: 0.5;
  transition: .3s;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
ファーストビュー
*/

.logo{
  position: absolute;
  width: 20.5vw;
  left: 6.5vw;
  top: 3vw;
  z-index: 20;  /*画像の重ね順：.scrollが上になるように*/
}

h1{
  position: absolute;
  z-index: 20;  /*画像の重ね順：.scrollが上になるように*/
}

.relative{
  position: relative;
  height: 58vw;
}

.fv_img1{
  display: inline;
  position: absolute;
  width:100%;
  top:8vw;
  z-index: 10;  /*画像の重ね順：.scrollが上になるように*/
}

.fv_img1_sp, .fv_img2_sp{
    display:none;
}

.fv_img2{
  position: absolute;
  width: 43vw;
  top: 41vw;
  right: 5vw;
  z-index: 10; /*画像の重ね順：.scrollが上になるように*/
}



.fv_img3{
  width: 29vw;
  margin-left: 70vw;
  position: absolute;
  z-index: 11;
  margin-top: 3vw;
}

.mask_title2{
  margin-left: 75.5vw;
  position: absolute;
  z-index: 12;
  font-weight: normal;
  font-size: 1.8vw;
  line-height: 2vw;
  margin-top: 7vw;
}

.mask_textbox2{
  position: absolute;
  z-index: 13;
}

.mask_text2{
  margin-left: 73vw;
  font-size: 4vw;
  font-weight: bold;
  line-height: 4vw;
  margin-top: 11.6vw;
}

.mask_subtext2{
  margin-left: 79vw;
  font-size: 1.5vw;
  font-weight: bold;
}

.mask_img2{
  width: 9vw;
  margin-left: 89vw;
  margin-top: -11vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
ファーストビュー下のテキストゾーン
*/

.fvtext_container{
  display:flex;
}

.scroll{
  height: 17vw;
  margin-top: -0.9vw;
  margin-left: 3vw;
  z-index: 20;  /*画像の重ね順：.fv_img1が下になるように*/
}

.fvtext{
  font-size: 1.6vw;
  font-weight: bold;
  text-align: center;
  margin-left:23vw;
  margin-top:6vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
こんな方におすすめです
*/

/*タイトル*/
.recommend_container1{
  display:flex;
  margin-top:8vw;
  line-height: 2vw; /*装飾と文字の間隔調整*/
}

.accent_b{
  height:3vw;
  margin-left: 33vw;
}

.recommend_text{
  font-size: 2.8vw;
  margin-left: -0.8vw;
}

/*アイコン*/
.recommend_container2{
  display:flex;
  margin:auto;
  margin-top:3vw;
}

.recommend_img1{
  width:22vw;
  margin-left:12vw;
}

.recommend_img2{
  width:22vw;
  margin-left:5.5vw;
}

.recommend_img3{
  width:22vw;
  margin-left:5.5vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
住まいづくりをお急ぎの方
*/

 /*pcとspの切り替え*/
.click_pc{
  display: inline;
}

.click_sp{
  display: none;
}

@media screen and (max-width: 768px){
.click_pc{
  display: none;
}
.click_sp{
  display: inline;
}
}

/*背景・タイトル*/
.click_box{
  width: 100%;
  height: 52vw;
  background: #FFA683;
  margin-top: 9vw;
}

.click_title{
  font-size: 2.5vw;
  color:#FFFFFF;
  text-align: center;
  padding-top: 3vw;
}

/*詳細*/
.click_container1{
  display:flex;
  text-align: center;
}

.click_container2{
  display: grid;
  margin-left: 10vw;
  height: 0vw;
}

.click_container3{
  display: grid;
  margin-left: 8.5vw;
  margin-left: 11.5vw;
}

.click_text1{
  font-size: 2.2vw;
  color:#FFFFFF;
  margin-top: 4vw;
}

.click_text2{
  font-size: 2.2vw;
  color:#FFFFFF;
}

.click_img{
  width: 26.8vw;
  margin-left: 2vw;
  margin-top: 3vw;
}

.click_img2{
  width: 26.8vw;
  margin-bottom: 3vw;
}

.click_icon{
  width:10vw;
  margin:auto;
  margin-top:-1vw;
}

.line{
  border-left: solid 2px #FFFFFF; /*borderで横線、border-leftで縦線*/
  height: 32vw;
  margin-left: 9.3vw;
  margin-top: 2.8vw;
}

/*　　　　 　   　　end　　　　　　　   　*/

/*
QUOカードペイプレゼント
*/

/*pcとspの切り替え*/
.present_img{
 display: inline;
}

.present_img2{
 display: none;
}

/*吹き出し関係*/
.present_img{
  width: 24.5vw;
  margin-left: 71vw;
  position: absolute;
  margin-top: -7vw;
}

.present_title{
  margin-left: 75.5vw;
  position: absolute;
  font-weight: normal;
  font-size: 1.5vw;
  line-height: 1.7vw;
  margin-top: -6.5vw;
  text-align: center;
}

.present_textbox{
  position: absolute;
}

.present_text{
  margin-left: 73.5vw;
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 3.5vw;
  margin-top: 1.3vw;
  margin-bottom: 0.5vw;
}

.present_subtext{
  margin-left: 79.5vw;
  font-size: 1.2vw;
  font-weight: bold;
}

.mask_img3{
  width: 7vw;
  margin-left: 87.5vw;
  margin-top: -9.5vw;
}

.text_red{
  color: red;
  font-weight: bold;
  font-size:2.5vw;
  line-height: 4vw;
}


/*バナー本体*/
.mask_box02{
  width: 100%;
  height: 32.5vw;
  background-color: #FFFEA2;
}

.accent_b3{
  height: 3vw;
  margin-left: 20.5vw;
}

.mask_titlebox02{
  padding-top: 4.1vw;
  display: flex;
}

.mask_title02{
  font-size: 2.8vw;
  line-height: 2vw;
}

.mask_text02{
  /*font-size: 4.8vw;
  font-weight: bold;
  line-height: 7vw;*/
  margin-left: 23.5vw;
  margin-top: 3vw;
}
.mask_text02 img{
  width: 55vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
マスクプレゼント
*/

/*pcとspの切り替え*/
/*.mask_pc{
 display: inline;
}

.mask_sp{
 display: none;
}

@media screen and (max-width: 768px){
.mask_pc{
 display: none;
}
.mask_sp{
 display: inline;
}
}


.mask_box{
  width: 100%;
  height: 25vw;
  background-color: #FFFEA2;
}

.accent_b2{
  height: 3vw;
  margin-left: 20vw;
}

.mask_titlebox{
  padding-top: 4vw;
  display: flex;
}

.mask_title{
  font-size: 2.8vw;
  line-height: 2vw;
}

.mask_textbox{
  display: flex;
}

.mask_img{
  width: 20vw;
  margin-left: 10vw;
}

.mask_text{
  font-size: 4.8vw;
  font-weight: bold;
}

.mask_subtext{
  font-size: 1.7vw;
  line-height: 2vw;
  margin-top: 2vw;
  font-weight: bold;
  margin-left: 1.5vw;
}*/

/*　　　　 　   　　end　　　　　　　   　*/

/*
おうちでもできる住まいづくり
*/

/*タイトル*/
.intro_title{
  font-size: 2.9vw;
  text-align: center;
  margin-top: 10vw;
}

.line2{
  border: solid 2px #333333; /*borderで横線、border-leftで縦線*/
  width:18vw;
  margin: -2vw auto;
}

/*背景・見出し*/
.intro_box{
  width: 90%;
  height: 47.5vw;
  background: #F4F6F5;
  margin: 6.5vw auto;
}

.intro_container{
  display:flex;
  padding-top: 2vw;
}

.intro_num{
  width: 9vw;
  height: 11vw;
  margin-left: -1vw;
}

.intro_index1{
  font-size: 3vw;
  margin-left: 17vw;
  padding-top: 3vw;
}

.intro_index2{
  font-size: 3vw;
  margin-left: 23.7vw;
  padding-top: 3vw;
}

/*詳細*/
.intro_container1{
  display:flex;
  margin-left: 8vw;
  margin-top: 1vw;
}

.intro_container2{
  display:grid;
}

.intro_img1{
  background: url(intro_vr.png) no-repeat;
  background-size: contain;
  padding-top: 27vw;
  margin-right: 4.5vw;
  width:93vw;
}

.intro_img2{
  background: url(intro_plan.png) no-repeat;
  background-size: contain;
  padding-top: 27vw;
  margin-right: 4.5vw;
  width:123vw;
}

.intro_img3{
  background: url(intro_zoom.png) no-repeat;
  background-size: contain;
  padding-top: 27vw;
  margin-right: 4.5vw;
  width:93vw;
}


.intro_sub{
  font-size: 2vw;
  margin-top: 5vw;
  font-weight: bold;
}

.intro_text{
  font-size: 1.5vw;
  margin-right:7vw;
}

.banner_position{
  text-align: center;
}

.banner1{
  width:31vw;
  margin-top:-2.5vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
web商談できます
*/

.notice_container{
  display: flex;
  padding-top: 5vw;
  line-height: 0vw; /*装飾と文字の間隔調整*/
}

.notice_box{
  width: 100%;
  height: 35vw;
  background: #4CA3C9;
  margin-top: 9vw;
}

.accent_w{
  height:3vw;
  margin-left: 33vw;
}

.notice_title{
  font-size: 4vw;
  color:#FFFFFF;
}

.notice_text{
  font-size: 1.8vw;
  color:#FFFFFF;
  text-align: center;
  margin: 3vw auto;
  line-height: 3.2vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
ご相談の流れ
*/

.flow_title{
  font-size: 2.9vw;
  text-align: center;
  margin-top: 10vw;
}

.flow_container1{
  display:flex;
  margin-left: 6vw;
  margin-top:7vw;
}

.flow_container2{
  display: grid;
  width:18vw;
}

.flow_img{
  width: 9.5vw;
  margin: 4vw auto;
  margin-bottom:6.5vw;
}

.flow_figure{
  width: 4vw;
  height: 5vw;
  margin:12vw 1vw;
}

.flow_index{
  font-size: 2vw;
  margin:auto;
}

.flow_text1{
  font-size: 1.4vw;
  height: 0vw;
  margin-top:-4vw;
}

.flow_text2{
  font-size: 1.4vw;
  height: 0vw;
  margin-top:-4vw;
}

.flow_text3{
  font-size: 1.4vw;
  height: 0vw;
  margin-top:-5vw;
}

.flow_text4{
  font-size: 1.4vw;
  height: 0vw;
  margin-top:-5vw;
}

.banner2{
  width: 31vw;
  margin-top: 10vw;
}

/*　　　　 　   　　end　　　　　　　   　*/


/*
その他のご相談・お問い合わせはこちら
*/

.other_title{
  font-size:2.2vw;
  text-align: center;
  margin-top:8vw;
}

.other_container{
  display:flex;
  margin-left: 18vw;
  margin-top:2.5vw;
}

.other_img1{
  width:28vw;
}

.other_img2{
  width:28vw;
  margin-left:8vw;
}

/*　　　　 　   　　end　　　　　　　   　*/



/*
フッター
*/

.fotter_logo{
  width: 20.5vw;
  margin-top:9vw;
}

.fotter_copy{
  font-size: 1.2vw;
  text-align: center;
  margin-top:2vw;
  margin-bottom:10vw;
}

/*　　　　 　   　　end　　　　　　　   　*/