@charset "utf-8";

/*----------------------------------------------------------------------------
   Home
------------------------------------------------------------------------------*/
/* 共通部分 */
#home h2 {
  display: flex;
  align-items: center;
  margin: 0 0 1em 0;
  color: #9dc319;
  font-size: 36px;  
  line-height: 1.4;
  
  &::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background-color: #bbb;
    margin-top: 4px;
    margin-left: 24px;
  }
}
@media (max-width:640px) {
  #home h2 {
    display: block;
    font-size: 30px; 

    &::after {
      display: none;
    }
  }
}


/* header（トップページ用） */
header {
  width:100%;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  
  .hd_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    
    .hd_logo {
      width: 400px;
      height: 72px;
      margin: 0;
    }
    
    .hd_info {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      
      address {
        display: none;
        font-style: normal;
        line-height: 1.4;
      }
      
      .open {
        margin-right: 1em;
        padding-right: 1em;
        border-right: 1px dashed #9dc319;
        text-align: right;
        
        .note {
          color: #666;
        }
      }
      
      .tel {
        display: flex;
        align-items: center;
        color: inherit;
        line-height: 1.2;
        letter-spacing: 0;
        transition: 0.3s;
        
        &:hover {
          color: #9dc319;
          text-decoration: none;
        }
        
        .material-symbols-outlined {
          color: #9dc319;
          font-size: 44px;
          margin-right: 8px;
        }
      }
    }
  }
  @media (max-width:1340px) {
    .hd_container {
      .hd_info {
        width: 510px;
        flex-wrap: wrap;

        .open {
          margin-bottom: 8px;
          margin-right: 0;
          padding-right: 0;
          border-right: none;
          text-align: right;
        }
      }
    }
  }
  @media (max-width:1000px) {
    .hd_container {
      display: block;
      padding: 24px 18px 12px;
      
      .hd_logo {
        margin: 0 auto 18px;
      }
      
      .hd_info {
        width: 100%;
        max-width: 530px;
        margin: 0 auto;
        justify-content: center;

        address {
          order: 1;
          display: block;
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }

        .open {
          order: 3;
          width: 100%;
          text-align: center;
          padding: 1em;
          background-color: #f9fceb;
          box-sizing: border-box;
          margin: 18px 0 0;

          .note {
            color: #666;
          }
        }

        .tel {
          order: 2;
          margin-top: 12px;
        }
      }
    }
  }
  @media (max-width:540px) {
    .hd_container {
    
      .hd_logo {
        width: 280px;
        height: 51px;
      }      
      
      .hd_info {
        width: 100%;

        address {
          width: 21em;
          text-align: left;
        }

        .open {
          order: 3;
          width: 100%;
          text-align: center;
          margin: 12px 0 0;

          .note {
            color: #666;
          }
        }

        .tel {
          font-size: 32px;

          .material-symbols-outlined {
            font-size: 34px;
          }
        }
      }
    }
  }
  @media (max-width:425px) {
    .hd_container {
      
      .hd_info {

        address {
          font-size: 16px;
        }

        .open {
          font-size: 16px;

          .note {
            font-size: 14px;
          }
        }
      }
    }
  }
}

/* mainvisual */
#mainvisual {
  width: 100%;
  height: 650px;
  padding: 48px 24px 0;
  box-sizing: border-box;
  background: url("../image/home/mainvisual_bg.jpg") no-repeat bottom center;
  
  .catch {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 968px;
    margin:0 auto;
    
    .catch01 {
      width: 46.7%;
      max-width: 452px;
    }
    .catch02 {
      width: 53.3%;
      max-width: 515px;
    }
  }
  
  .shopplate {
    display: block;
    max-width: 574px;
    margin: 42px auto 0;
  }
}
@media (max-width:600px) {
  #mainvisual {
    height: auto;
    padding: 48px 24px 160px;
    
    .catch {
      max-height: 515px;
      flex-wrap: wrap;

      .catch01 {
        width: 87.77%;
      }
      .catch02 {
        width: 100%;
      }
    }
  }
}

/* inforamtion/calender */
.info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 84px;
  padding: 84px 0;
}
@media (max-width:1248px) {
  .info-container {
    gap: 48px;
  }
}
@media (max-width:1000px) {
  .info-container {
    background-image: url("../image/home/info_bg.png");
    background-position: right 0 bottom 24px;
    background-repeat: no-repeat;
    background-size: 50%; 
  }
}
@media (max-width:580px) {
  .info-container {
    background: none;
  }
}

#topNews {
  width: calc(100% - 634px);
  
  .news-item {
    border-top: 1px dashed #bbb;
    
    &:last-child {
      border-bottom: 1px dashed #bbb;
    }
    
    a,
    .nolink {
      display: block;
      width: 100%;
      padding: 1em 0;
    }
  }
}
@media (max-width:1248px) {
  #topNews {
    width: calc(100% - 598px);
  }
}
@media (max-width:1000px) {
  #topNews {
    width: 100%;
  }
}

#calendar {
  width: 550px;
  
  .calender-contents {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 550px;
    
    table {
      width:260px;
      text-align: center;
      border: 1px solid #ccc;
      border-collapse:collapse;
    
      th {
        border: 1px solid #ccc;
        padding: 4px 0;
        background:#efefef;
      }
    
      td {
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 4px 0;
        
        &.open {
          background-color: #fff;
        }
        
        &.close {
          background:#ffdfdf;
        }
        
        .today {
        }
      }
    }
    
    .fc-red { color: #E33449; }
    .fc-blue { color: #008ece; }  
  }    
  @media (max-width:500px) {
    .calender-contents {
      flex-wrap: wrap;
      max-width: 260px;
      margin: 0 auto;
    }
  }
  
  .note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: .75em auto 0;
    font-size: 87.5%;
    
    .closebox {
      display: inline-block;
      width: 30px;
      height: 24px;
      box-sizing: border-box;
      background-color: #ffdfdf;
      border:1px solid #888888;
      margin-right: .5em;
    }
  }
  @media (max-width:500px) {
    .note {
      max-width: 260px;
    }
  }
}
@media (max-width:1000px) {
  #calendar {
    width: 100%;
  }
}


/* pickup */
#pickup {
  background-color: #f9fceb;
  
  #rent {
    padding: 84px 0;
    border-bottom: 1px solid #9dc319;
  }
  #sale {
    padding: 84px 0;
  }
  
  .estlist {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
      
    a {
      display: block;
      width: calc(25% - 18px);
      color: inherit;
      transition: 0.3s all;

      &:hover {
        text-decoration: none;
        opacity: 0.8;
      }

      .thumnail {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 12px;

        .thum {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .detail {
        margin-top: 12px;

        .shubetsumei {
          display: inline-block;
          font-weight: 700;
          padding: 0.1em 0.75em;
          margin-bottom: 0.5em;
          background-color: #feae39;
          color: #fff;
          border-radius: 6px;
        }

        .price {
          span {
            font-weight: 700;
            color: #ea2016;
          }
        }

        .madori {            
          span {
            color: #2244c1;
          }
        }

        .comment {
          margin-top: .25em;
          line-height: 1.4;
        }
      }
    }
    @media (max-width:1000px) {
      a {
        width: calc(33.33% - 16px);
      }
    }
    @media (max-width:640px) {
      a {
        width: calc(50% - 12px);
      }
    }
    @media (max-width:375px) {
      a {
        width: 100%;
      }
    }
  }
  
  .pist_link {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 24px;
  }
  @media (max-width:640px) {  
    .pist_link {
      flex-wrap: wrap;
      
      .btn01 {
        width: 100%;
        max-width: 360px;
      }
    }
  }
}


/*----------------------------------------------------------------------------
   company
------------------------------------------------------------------------------*/
#company .contents {
	padding: 0 0 60px;
}
#company .contents .table-content {
	margin-bottom: 20px;
}
#company .comphoto {
	width: 100%;
	max-width: 1020px;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
	margin: 0 auto 40px;
}
#company .comphoto .cpbox {
	width: 500px;
	margin-right: 20px;	
	line-height: 1;
}
#company .comphoto .cpbox:last-child {
	margin-right: 0;
}
#company .comphoto .cpbox .photo02 {
	display: block;
	margin-bottom: 20px;
}
@media screen and (max-width:860px) {	
	#company .comphoto .cpbox .photo02 {
		margin-bottom: 10px;
	}
}


/*----------------------------------------------------------------------------
   loan
------------------------------------------------------------------------------*/
#loan .contents {
	padding: 0 0 60px;
}

#loan h2 {
	margin-top: 40px;
}
#loan h3 {
	font-size:125.0%;
	margin: 0 0 0.25em;
}
#loan .error {
	color: #E70B0F;
}
#loan .hosoku {
	color: #666;
	font-size: 0.9rem;
	margin-top: 0.5em;
}

/* table-content */
@media screen and (max-width:900px) {
	#loan .table-content .calc th,
	#loan .table-content .calc td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
}

/* submit */
#loan .submit {
	width: 100%;
	box-sizing: border-box;
	margin-top: 40px;
}
#loan .submit button {
    display: inline-block;
	width: calc(50% - 11px);
    height: 60px;
    border: none;
    color: #fff;
    font-size: 125.0%;
    font-weight: 700;
    transition: 0.3s;
	box-sizing: border-box;
}
#loan .submit .clearbtn {
    background-color: #666666;
	margin-right: 14px;
}
#loan .submit .clearbtn:hover {
    background-color: #888888;
}
#loan .submit .calcbtn {
    background-color: #008ece;
}
#loan .submit .calcbtn:hover {
    background-color: #199EDB;
}
@media screen and (max-width:640px) {
	#loan .submit button {
    	font-size: 100.0%;
		width: calc(50% - 12px);
		height: 80px;
	}
}

/* link */
#loan .link {
	width: 50%;
	text-align: left;
}
#loan .link li::before {
	content: "・";
}


/*----------------------------------------------------------------------------
   privacy
------------------------------------------------------------------------------*/
#privacy .contents {
	padding: 0 0 60px;
}
#privacy h3 {
	color: #008ece;
	font-size: 125.0%;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

#privacy ol {
	margin: 0;
}
#privacy ol li {
	margin: 0;
	padding: 0;
}


/*----------------------------------------------------------------------------
   estinquiry・contact・tenant
------------------------------------------------------------------------------*/
#estinquiry .contents,
#contact .contents,
#tenant .contents {
	padding: 0 0 60px;
}
#estinquiry .contents table,
#contact .contents table,
#tenant .contents table {
	margin-top: 1em;
}