
/*
スマホ用
========================= */
@media screen and (max-width: 575px) {

body {
    font-size: 16px;
    min-width:auto;

   
}


.pc-only {
    display: none !important;
}
.sp-only {
    display:initial !important;
}

#pagetop {
    zoom:60%;
}

/* -------------------------------------
 ヘッダー（アニメーション分）
------------------------------------- */

#headerTop {
	padding-top:300px;

}

#mainVisual{
	position:absolute;
	top:0;
	left:0;
	height:300px;
	width:100%;
	margin-left:0;
}
#mainVisualInner1{
	height:300px;
	width:100%;
    background-position-y: bottom !important;
    background-size: auto 100px !important;

}
#mainVisualInner2{
	height:300px;
	width:100%;
    background-position-y: 150px !important;

}
#forecast_result{
	position:absolute;
    top:30%;
    right: 30px;
	width:auto;
    display: block;
	height:150px;
	padding:10px 20px;
    border:4px solid #20bbc2;
    border-radius: 5px;
    margin: 0;
    transform: scale(0.7);
    transform-origin: right top;
    background-color: rgba(255,255,255,0.9);
    padding-top:90px;
}


.main-temp {
    transform: translateY(-5px);
}
.city-name{
	top:144px;
	width:auto !important;
}
.weather-main{
    position:absolute;
	top:0;
	left:50%;
    transform: translateX(-50%);
	display:block;
	width:100px;
	height:100px;
    z-index: 0;
}

#mask{
	display: none;
}
#chara{
	bottom:-70px;
	left:0;
    zoom: 80%;

}
#wetherBg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:300px;
    
}

#wetherBg.fine{
	background-position: left 50px !important;
    background-size: 50% !important;
}
#wetherBg.cloud{
	background-position: 0 25px !important;
    background-size: 170% !important;
}
#wetherBg.rain{
	background-position: 0px 50px !important;
    background-size: 100% !important;
}
#wetherBg.snow{
	background-position: 0 0 !important;
    background-size: 150% !important;
}
.g{
	
	z-index:5;
	}
/* -------------------------------------
 ヘッダー（トップページ）
------------------------------------- */
.headerTopBack{
	width: 100%;
	height:540px;
	background:#fff;
	z-index:100;
	text-align:center;
	overflow : hidden;
}
#headerTop .inner{
	position:fixed;
    z-index: 100;
    top:0;
	width:100%;
	margin:0;
    padding: 0 15px;
    display: flex;
}
#headerTop .inner ul{
	position : relative;
	left : 38px;
	width : 725px;
	float : left;
}
#headerTop .inner ul li{
	float : left;
	margin-left : 10px;
}

#logo{
	float:none;
	margin-top:0px;
	width:220px;
}
#logo img{
	float:none;
	margin-top:0px;
	width:220px;
}
#wrap {
    display: block;
    width: calc(100% - 40px);
    padding:0 20px;
    padding-top:80px;
    margin:20px 0;
}

.home #wrap {
    
    padding-top:0;
}

/* -------------------------------------
 フッター
------------------------------------- */
footer {
	position : relative;
	padding : 20px 0;
	margin-bottom : 50px;
    text-align: center;
}
footer .logo{
	float : none;
}
footer p{
    padding-top:1em;
	position :relative;
	left : 0;
	top : 0;
	float : none;
	font-size : 13px;
	width : 100%;
}
footer ul{
	float : none;
    display: flex;
    justify-content: center;
	position :relative;
    gap:1em;
}
footer li{
	float : none;
}
footer li a{
    padding:1em 0;
    display: block;

}
footer #copyright{
	display : block;
	position : relative;
	top : 0;
	left : 0;
	width : 100%;
	margin-left : 0;
	text-align : center;
}

/* -------------------------------------
 ナビゲーション
------------------------------------- */
.nav-menu {
    display: block;
    cursor: pointer;
    background-color: #000;
    z-index: 30;
    position: absolute;
    right:45px;
    top:15px;
    height:55px;
    width:55px;
    border-radius: 100px;
}

.nav-active #headerTop .inner,
.nav-active #header .inner

{
	background-color: #fff;

}


.nav-active #gnav-sp {
    visibility:visible;
    top:80px;
}

#gnav-sp {
    visibility: hidden;
    background-color: #000;
    width:100vw;
    height:100vh;
    z-index: 200;
    position: fixed;
    top:100vh;
    left:0;
    transition: all 0.5s;

}

#gnav-sp ul {
    left:0 !important;
    float: none !important;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
}

#gnav-sp ul li {
    width: 100%;
    float: none !important;
    left:0 !important;
    margin-left:0 !important;
    border: none !important;

}
#gnav-sp ul li a {
    text-align: left;
    color:#fff;
    display: block;
    padding:1em 2em;
    border-bottom:1px solid rgba(255,255,255,0.2)
    
}
#gnav-sp ul li a span {
    color:#20bbc2;
    display: block;
    font-family: 'Droid Sans', sans-serif;

}


/*========= ハンバーガーメニュー ===============*/
.openbtn {
    position: absolute;
    z-index: 9999;
    width:30px;
    height:55px;

    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 2px;

    background-color: #fff;
    width: 100%;
}

.openbtn span:nth-of-type(1) {
    top: 16px;
}

.openbtn span:nth-of-type(2) {
    top: 26px;
}

.openbtn span:nth-of-type(3) {
    top: 36px;
}

.openbtn.active span:nth-of-type(1) {
    top: 21px;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 33px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}





/* -------------------------------------
 ヘッダー（コンテンツページ）
------------------------------------- */
#header{
	background:none;
	background-position: 0 15px; 
	padding-top: 0;
}
#header .inner{
	position:fixed;
	width:100%;
	margin: 0 auto;
	padding: 0 15px;
    z-index: 100;
}
#contentsTop {
    float : none;

    width: 100%;
    position : relative;
    text-align : left;
}



/* -------------------------------------
 TOP
------------------------------------- */
#contentsTop .inner01 {
    height:auto;
    margin-bottom:15px;
}
#contentsTop .inner01 h2 img {
    width: 100%;
    object-fit: contain;
}

.propetyCont{
    margin-top : 0px;
    width : 100%;
    margin-bottom : 20px;
    float : none;
}
.propetyCont ul{
    display : flex;
    flex-wrap: wrap;
    width: 100%;
    float: none;
    justify-content:flex-start;
    align-items: stretch;
    gap:20px 15px;

}

.propetyCont ul li{
    float: none;
    width: calc(50% - 7.5px);
    margin-right:0;
    padding-top: 0;
    height: auto;
}


.propetyCont ul li p {
    position: relative;
    top:inherit;
}

.propetyCont img{
    width: 100%;
}
.propetyCont .ico {
    width: auto;
    right:-15px;
    top:-15px;

}
#sidebar {
    width: 100%;
}

#sidebar img {
    width:100%;
}

#sidebar .newsblog {
    width: 100%;
    padding:10px;
}
#sidebar .newsblog h3  {
    text-align: center;
}
#sidebar .newsblog h3 img  {
    max-width: 220px;

}
#sidebar .newsblog ul {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
}
#sidebar .newsblog li {
    width: 100%;
    display: block;
}
#sidebar .newsblog li img {
    width: auto;
}


.topAbout {
    width: 100%;
    height: auto;
    background: url(../../asset/images_add/bg_top01_sp.png) no-repeat;
    border:3px solid #000;
    border-radius: 5px;
}
.topAbout p {
    position: relative;
    width: calc(100% - 120px);
    height:auto;
    padding:10px 10px 10px 110px;
    left:0;
    top:0;
}
.topAbout ul  {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    border-top:3px dotted #000;

}
.topAbout ul li  {
   width: 50%;
   border-right:3px dotted #000;

}

.topAbout ul li:last-child  {
    border-right:none;
}
.topAbout ul li a  {
    text-align: center;
    width: 100%;
    padding:15px 0;
 }
 .topAbout ul li a img  {

}

.topAbout ul li a.navi1, .contAbout ul li a.navi1,
.topAbout ul li a.navi2, .contAbout ul li a.navi2
 {
    position: relative;
    top:0;
    left:0;
}

/* -------------------------------------
 下層共通
------------------------------------- */
#sidebar {
    float: none;
}
#sidebar h1 {
    text-align: center;
    margin-bottom:3em

}
#sidebar h1 img {
    max-width: 140px;
    
}

.contAbout{
    position : relative;
    overflow : hidden;
    height : auto;
    width : 100%;
    background:url(../../asset/images_add/bg_common01_sp.png) no-repeat center top;
    text-align : center;
    border:4px solid #000;
    border-radius: 8px;
}
.contAbout ul {
    margin-top:250px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top:3px dotted #000;


}
.contAbout ul li {
    text-align: center;
    width:calc(50% - 3px);
    border-right:3px dotted #000;

}
.contAbout ul li:nth-of-type(even) {
    border-right:none;

}
.contAbout ul li a {
    width: 100%;
    display: block;
    padding:1em 0;
}
.contAbout ul li a.navi3 {
    left:0;
    width:100%;
    top:180px;
}
.contAbout ul li a.navi3 img {
    width:100%;
    max-width: 200px;
}

/* -------------------------------------
 ごあいさつ
------------------------------------- */
.greeting #contents {
    width: 100%;
    float: none;
}
.greeting #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}

.greeting .inner01 p,
.greeting .inner02 p,
.greeting .inner03 p
 {
    position: relative;
    width: 100%;
    float:none;
    left:0;
    top:0;
    text-align: left;

}

.greeting .inner01, .greeting .inner02, .greeting .inner03 {
    float:none;
    margin-bottom:30px;
    
}

.greeting .inner02 {
    text-align: center;
    float:none;
}
.greeting .inner02 img {
    float:none;
}

.greeting .inner04 {
    display: flex;
    flex-wrap: wrap;
    left:0;
    gap:15px 0;
    top:0;
    margin-bottom:30px;
    float: none;


}
.greeting .inner04 li {
    width: 100%;
    float:none;
    margin-right:0;

}

.greeting .inner04 li a img {
    width: 100%;

}


/* -------------------------------------
 会社案内
------------------------------------- */

.company #contents {
    width: 100%;
    float: none;
    padding-bottom:400px;
}

.company #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}
.company .inner01 table {
    width: 100%;
    float:none;
}

.company .inner01 table th {
    width: 100%;
    display: block;
    color:#20bbc2;

}
.company .inner01 table td {
    width: 100%;
    display: block;

}
.company #contents {
    
}
.map {
    bottom:662px;
}


/* -------------------------------------
 スタッフ紹介
------------------------------------- */

.staff #contents {
    width: 100%;
    float: none;
}

.staff #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}
.staff .inner01 {
    text-align: center;
    float:none;
}
.staff .hito {
    float:none;
}
.staff .inner01 table.prof {
    float: none;
    width: 100%;
}
.staff .inner01 table.prof th {
  width: 159px;
}
.staff .inner01 table.prof td {
    width: auto;
 

}

.staff .inner01 .myranking {
    margin:1em 0 1em -100px;
}



.staff .inner04 {
    display: flex;
    flex-wrap: wrap;
    left:0;
    gap:15px 0;
    top:0;
    margin-bottom:30px;
    float: none;


}
.staff .inner04 li {
    width: 100%;
    float:none;
    margin-right:0;

}

.staff .inner04 li a img {
    width: 100%;

}



/* -------------------------------------
 物件情報：一覧
------------------------------------- */

.propety {
    width: 100%;
    float: none;
}

.propety #contents {
    float: none;
    width: 100%;
    left:0;
}

#filters {
    visibility: visible;
    position: fixed;
    right:-242px;
    top:100px;
    transition: all 0.5s;
    border: 3px solid #20bbc2;
    border-right: none;
    z-index: 100;
    background-color: #fff;
    padding:10px;
}

#filters #fileters_btn {
    display: block;
    padding-top:15px;
    text-align: center;
    color:#fff;
    background-color: #20bbc2 ;
    border-radius: 100px 0 0 100px;
    width:70px;
    height:calc(80px - 20px);
    position: absolute;
    left:-70px;
    top:-3px;
    text-decoration: none;
}

#filters.active {
    visibility: visible;
    right:0;
}

.propetyCont > div {

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;

}

.propetyCont .element-item {
    float: none;
    margin-right: 15px;
    width:calc(50% - 15px);
}
.propetyCont .element-item:nth-of-type(even) {
    margin-right:0;
}
.propetyCont .element-item p {
    position: relative;
    top:0;
    left:0;
    margin:0;
}

.propetyCont img.photo{
    width : 100%;
    height : 126px;
    max-width: 100%;
    max-height: none;
    object-fit: cover;
    
}
.propetyCont .element-item img.syosai {
    width: 100%;
}

/* -------------------------------------
 物件情報：詳細
------------------------------------- */
.propetySyosai #sidebar {
    text-align: center;
    margin-bottom:3em

}
.propetySyosai #sidebar img {
    max-width: 140px;

}

.propetySyosai #sidebar a  {
    display: block;
    width: 100%;
    display: none;

}

.propetySyosai #sidebar a img  {
    width: 100%;
    max-width: 200px;
}

.propetySyosai {
    width: 100%;
    float: none;
}

.propetySyosai #contents {
    float: none;
    width: 100%;
    left:0;
}

.propetySyosai1 h1 {
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.propetySyosai2, .propetySyosai3_2, .propetySyosai4 {
    float:none;


}
#mainImg_fig {
    float: none;
    width:100%;
}
#mainImg img {
    width: 100%;
    max-height:none;
    max-width: none;
}
#thumb {
}

#thumblist {
    float: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    margin:0;
}
#thumblist li {
    float: none;
    width:calc(20% - 10px);
    margin:0;
}

#thumblist li img {
    float: none;
}


.propetySyosai3_2 {
    width: 100%;
}

.fancybox-content {
    overflow: scroll !important;

}
.fancybox-content img  {
    min-width: 500px;
    height: auto;
}
.propetySyosai4 * {
    float:none !important;
}
.propetySyosai4 .lft,
.propetySyosai4 .lft2 {
    float:none;
    width: 100%;
}
.propetySyosai4 .inner {
    width: 100%;
}

.propetySyosai4 .inner3_2 {
    display: flex;
    flex-wrap: nowrap;
}

.propetySyosai4 .inner3_2 b{

}

.propetySyosai4 .inner3_2 b{
    
}

.propetySyosai .inner04 {
    float: none;
    display: flex;
    gap:10px 0;
    flex-wrap: wrap;
    left:0;
    justify-content: center;
}


.propetySyosai .inner04 li {
    margin-right:0;
}
#ra-tel {
    width:100% !important;
}

#ra-tel iframe {
    width:100% !important;


}
.propetySyosai4 .inner3 b, .propetySyosai4 .inner3_2 b {
    width: 70px;
}
.propetySyosai4 .inner2 {
    width: 100%;
    box-sizing: border-box;
    padding:10px;
}
.propetySyosai4 .inner3 p, .propetySyosai4 .inner3_2 p {
    width: auto;
}

.propetySyosai4 .inner5 {
    width: 100%;
}



/* -------------------------------------
 ニュースブログ：一覧
------------------------------------- */
.blog {
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse;
}


.blog #contents {
    width: 100%;
    float: none;
}
.blog #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}

.blog #sidebar {
    margin-bottom:15px;
}
.blogList li a {
    padding:0.5em 0 0 1em;
    display: block;
}
.blog #sidebar h2 {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #20bbc2 ;

}
.blog #sidebar h2::after {
    content: "▼";
    color:#20bbc2;
    margin-right:20px;
    transition: all 0.5s;

}

.blog #sidebar h2.active::after {
    content: "▼";
    rotate: 180deg;

}

.blog #sidebar h2.active + ul {
    display: block;
}

.blog #sidebar h2 img {
    padding:0;
}
.blog #sidebar  ul {
    display: none;
    transition: all 0.5s;
}

.blog #sidebar ul li {
    border-bottom:1px solid rgba(0,0,0,0.2);
    padding:1em 1em; 
    text-align: left;
}
.blog #sidebar ul li a {
 
}

/* -------------------------------------
 ニュースブログ：詳細
------------------------------------- */

.blog #sidebar   {
    text-align: center;

}
.blog #sidebar > img  {
    max-width: 140px;

}

.blogKiji h1 {
    line-height: 1.4;
    padding-left:80px;
    padding-top: 0.5em;
    text-indent:0;
    min-height: 50px;
}

.blogKiji .blogDate {
    line-height: 1.4;
    padding-top:0.7em;
}

.blognavi {
    display: flex;
    flex-wrap: wrap;
    gap:30px 10px;
}

.blognavi img {
}
.blognavi > * {
    position:relative !important;

}
.blognavi .next {
    width: calc(50% - 15px);
    text-align: right;
}

.blognavi .next {

}

.blognavi .back {
    width: 50%;
    text-align: left;

}
.blognavi .blogpage {
    width: 100%;
    top:0;
}




/* -------------------------------------
 ごあいさつ
------------------------------------- */
.contact #contents {
    width: 100%;
    float: none;
}

.contact #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}

.contact .inner01 {
    left:0;
}
.contact .inner01 * {
    float: none !important;

}

.contact .inner01 table th {
    display: inline-block;
    padding:10px 0 !important;
    width: auto;
    text-indent:0;

}

.contact .inner01 table td {
    display: block;
    padding-top: 0;
    padding-bottom:10px ;

}

.contact .inner01 table th.hissu {
    padding-right:70px !important;
    background:url(../../asset/images_add/ico_hissu_sp.svg) no-repeat  right center;
}

.contact table input
{
    font-size: 16px !important;
}
td input, td textarea {
    width: 100%;
    margin-bottom: 0.4em;
    box-sizing: border-box;
}

input[name="your-postcode"],
input[name="text-238"],
input[name="text-557"]
 {
    width:auto;
}



/* -------------------------------------
 相談フォーム
------------------------------------- */
.sell #contents {
    width: 100%;
    float: none;
}

.sell #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:44px;

}

.sell .inner01 {
    left:0;
}
.sell .inner01 * {
    float: none !important;

}

.sell .inner01 .sheetdl {
    padding-left:0;
}
.sell .inner01 .sheetdl a {
    display: block;
    padding-bottom:60px;

}
.sell .inner01  a {

}
.sell .inner01 .sheetdl img {
    float:none !important;
    width: 100%;
}
.sell .inner01 table th {
    display: block;
    padding:10px 0 !important;
    width: auto;
    text-indent:0;

}

.sell .inner01 table td {
    display: block;
    padding-top: 0;
    padding-bottom:10px ;

}

.sell .inner01 table th.hissu {
    background: none;
}

.sell table input
{
    font-size: 16px !important;
}
td input, td textarea {
    width: 100%;
    margin-bottom: 0.4em;
    box-sizing: border-box;
}


.sell table th.ot p {
    left:0;
}

.sell .inner01 p {
    padding-left: 0;
}

/* -------------------------------------
 プライバシーポリシー
------------------------------------- */
.privacy #contents {
    width: 100%;
    float: none;
}

.privacy #contents h2 img {
    width: 100%;
    object-fit: cover;
    height:60px;

}

}
