@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif+JP:wght@400;500;600&display=swap');

/*====================================================================

  リセット

====================================================================*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, 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,menu, nav, section, summary,time, mark, audio, video {
    margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	background:transparent;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content:'';content:none;
}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {line-height: 150%;}
body {line-height:150%;}
img {vertical-align: bottom;max-width: 100%;height: auto;display: block;margin: 0 auto;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
caption, th, td {font-weight: normal;}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="reset"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="reset"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*====================================================================

  設定

====================================================================*/
html,body {
	color:#111;
    font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	-webkit-text-size-adjust: 100%;
	background: #FFFFFF;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

a:link {color:#C10D23; text-decoration:none;}
a:visited {color:#C10D23; text-decoration:none;}
a:hover {color:#C10D23; text-decoration:none;}

a:hover img {
	opacity: 0.8 ;
	filter: alpha(opacity=80) ;	
	-ms-filter: "alpha(opacity=80)";
	}

a img {
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}

a {-webkit-transition: 0.4s ;transition: 0.4s ;}
p {line-height:200%;}

body {animation: fadein 1s forwards;}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

.nowrap {white-space: nowrap;}

/* ==================================================================================================================

 共通CSS

================================================================================================================== */

html {font-size: 62.5%;}
body {font-size: 2.1rem;}

/*-------------------------------------------
 common
-------------------------------------------*/
.container {margin: 0 auto;}

section .container {max-width: 680px; padding: 10vh 20px;}

.bg_be {
    background: #f5f5e6;
}
.section_title {
    color: #b50005;
    font-size: 3.8rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1em;
}

/*-------------------------------------------
 header
-------------------------------------------*/
header {
	background: #FFF;
}
.header_logo {
    margin: 0.8em;
}
.header_logo img {
    max-width: 210px;
    width: 40%;
}

/*-------------------------------------------
 hero 人と未来をつなぐ不動産パートナー 
-------------------------------------------*/
#hero {
    background: url("../img/hero_bg.jpg") 50% 20%; 
    background-size: cover;
    position: relative;
    height: 90vh;
}
#hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(180deg, transparent 0 50%, #FFF 100%);
    width: 100%;
    height: 50vh;
    z-index: 1;
}
.catch {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: 100%;
    padding: 0 20px;
}
.catch_text {
    font-size: clamp(4.5rem, -0.9375rem + 4vw, 5.5rem);
    font-weight: 600;
    color: #FFF;
    letter-spacing: 0.5em;
    text-align: center;
    text-shadow: 0 0 5px rgba(4, 97, 233, 1.0);
    margin-bottom: 0.5em;
}
.catch_logo {
    max-width: 423px;
    width: 60%;
}
@media screen and (max-width: 768px) {
    .catch_text {
        font-size: 6.5vw;
        margin-bottom: 1em;
    }
}

/*-------------------------------------------
 社名とロゴマークに込めた想い
-------------------------------------------*/
#story {overflow-x: hidden;}

.name_list {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    margin: 1.0em 0;
}
.name_list li {
    list-style: none;
    font-size: 2.4rem;
    margin: 0.8em 0;
}
.name_list li .name {
    font-size: 3.0rem;
    margin-left: 0.5em;
}
.name_list li .name_red {
    color: #b50005;
}
.story_mark_wrap {
    position: relative;
    z-index: 0;
}
.story_mark_wrap::after {
    position: absolute;
    display: block;
    content: "";
    background: #FFF;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    top: 52%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: -1;
}
.story_mark_img {margin: 3em 0;}

@media screen and (max-width: 768px) {
    .story_mark_wrap::after {
        width: 110vw;
        height: 110vw;
        top: 48%;
    }
}

/*-------------------------------------------
 会社概要
-------------------------------------------*/
.company_table {
    border-top: 1px solid #969696;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}
.company_table dt {
    width: 7em;
    padding: 0.6em 0.8em;
    border-bottom: 1px solid #969696;
    color: #b50005;
    font-weight: 600;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.company_table dd {
    width: calc(100% - 7em);
    padding: 0.6em 0.8em;
    border-bottom: 1px solid #969696;
}
.btn_link {
    display: inline-block;
}
.btn_link a {
    background: #0064ff;
    color: #FFF;
    font-weight: 500;
    border-radius: 0.25em;
    padding: 0.2em 0.5em;
}
@media screen and (max-width: 768px) {
    .btn_link {margin: 0.5em 0;}
}

/*-------------------------------------------
 沿革
-------------------------------------------*/
#history .container {padding-top: 0;}

.history_list {
    border-top: 1px solid #969696;
}
.history_list li {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    border-bottom: 1px solid #969696;
    width: 100%;
}
.history_list time {
    width: 7em;
    color: #666;
    padding: 0.6em 0.8em;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.history_list .detail {
    width: calc(100% - 7em);
    padding: 0.6em 0.8em;
}

/*-------------------------------------------
 管理物件情報
-------------------------------------------*/
#property {}

#property .container {max-width: 900px;}

.property_item {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 2.5em;
}
.property_img {
    width: 35%;
}
.property_detail {
    width: 65%;
    padding-left: 2.5em;
}
.property_title {
    font-size: 2.8rem;
    font-weight: 600;
    border-bottom: 1px solid #969696;
    padding: 0 0 0.5em 0;
}
.property_address,
.property_contact {
    border-bottom: 1px solid #969696;
    line-height: 150%;
    padding: 0.5em 1.0em;
}
@media screen and (max-width: 768px) {
    .property_list {max-width: 400px; margin: 0 auto;}
    .property_img {width: 100%; margin-bottom: 1em;}
    .property_detail {width: 100%; padding-left: 0;}
    .property_title {text-align: center;}    
}

/*-------------------------------------------
 footer
-------------------------------------------*/
footer .container {max-width: 740px; padding: 8vh 20px 10vh 20px;}

.company_item {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.company_logo {
    width: 25%;
}
.company_detail {
    width: 75%;
    padding-left: 2.5em;
}
.company_name {
    font-size: 2.8rem;
    font-weight: 600;
    border-bottom: 1px solid #969696;
    padding: 0 0 0.5em 0;
    line-height: 150%;
}
.company_address,
.company_tel,
.company_fax {
    border-bottom: 1px solid #969696;
    line-height: 150%;
    padding: 0.5em 1.0em;
}
.copyright {
    display: block;
    width: 100%;
    padding: 0.5em;
    font-size: 80%;
    color: #FFF;
    background: #b50005;
    text-align: center;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
    .company_item {max-width: 400px; margin: 0 auto;}
    .company_logo {width: 30%; max-width: 160px; margin:0 auto 2em auto;}
    .company_detail {width: 100%; padding-left: 0;}
    .company_name {text-align: center}
}

/* ==================================================================================================================

768px以上 

================================================================================================================== */
@media screen and (min-width: 769px) {
    .pc_none {display: none;}
}
/* ==================================================================================================================

768px以下 

================================================================================================================== */

@media screen and (max-width: 768px) {
	html {font-size: 52.0%;}
    .sp_none {display: none;}
}
/* ==================================================================================================================

420px以下 

================================================================================================================== */

@media screen and (max-width: 420px) {
	html {font-size: 44.0%;}
}