<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/* CSS Document */


body{
	font-family: 'Lato',"Noto Sans JP";
	height: 100vh;/* fadeのための数値*/
	background-color: #EDEDED;
}


/* =========================================================
不動産賃貸管理ページ
========================================================= */
.pitat_box {
    background-color: #F4F4F4;
    padding: 24px;
    border: 3px solid #6EB92B;
}
.pitat_box .title {
    font-size: 1.4rem;
    color: #424242;
    padding: 6px;
    display: block;
    margin-bottom: 14px;
}
.pitat_box img {
    width: 100%;
    max-width: 260px;
} 
.pitat_box .txtarea {
    margin-left: 16px;
    text-align: left;
} 
.pitat_box .btn_small{
    background-color: #6EB92B;
}

@media screen and (max-width: 960px) {
.pitat_box img {
    width: 80%;
    max-width:  80%;
} 
}
/* =========================================================
事業内容PAGE
========================================================= */
/* Swiper */
.swiper-container {
	position: relative;
    width: 100%;
    height: auto;
    }
.swiper-container img {
    width: 100%;
    }
.swiper-pagination {/* スライダーバーを下に固定する*/
    position: relative !important;
    margin-top: -10px !important;
}

.detail_box {
    position: relative;
    width: 100%;
    padding: 80px 30px 20px 30px;
}
.detail_box_namber {
    font-family: 'Poppins', sans-serif;
    font-size: 8rem;
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
}
.detail_box_title {
    display: inline-block;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: 10px 20px 10px 20px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 500px;
    z-index: 100;
}
.detail_box .col2 {
    display: flex;
}
.detail_box_txtarea {
    width: 55%;
    margin-right: 5%;
    text-align: left;
}
.detail_box_imgarea {
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
    width: 40%;
}
.detail_box_imgarea img {
    width: 80%;
}
/* ==幅広レイアウト==== */
.detail_box_wide {
    position: relative;
    width: 100%;
    padding: 0px 0px 20px 0px;
}
.detail_box_wide_imgarea {
    width: 100%;
    text-align: left;
}
.detail_box_wide_txtarea {
    padding: 20px 30px 20px 30px;
    text-align: left;
}
.detail_box_small_area {
    text-align: left;
    margin:  40px 0px 0px 0px;
    padding: 40px 0px 0px 0px;
    border-top: 1px solid #B9B9B9;
}
.detail_box_small_area_title {
    padding: 8px 20px 10px 20px;
    margin:  0px 0px 20px 0px;
    text-align: left;
    display: inline-block;
    background-color: #1D1D1D;
    color: #FFFFFF;
    font-size: 0.8rem;
}
.detail_box_small_area_url {
    font-size: 0.86rem;
    letter-spacing: 0rem;
}
/* ==不動産企画・開発 PAGE(ブルー)==== */
.detail_color_blue {
    color: #4e85a2;
}
.detail_box_bg_blue {
    background-color: #f6f8f6;
}
.detail_box_nam_bg_blue {
    color: #709cb1;
}
.detail_box_title_bg_blue {
    background-color: #4e85a2;
}
/* ==不動産売買 PAGE(イエロー)==== */
.detail_color_yellow {
    color: #e1bf00;
}
.detail_box_bg_yellow {
    background-color: #fbfaf3;
}
.detail_box_nam_bg_yellow {
    color: #e1bf00;
}
.detail_box_title_bg_yellow {
    background-color: #e1bf00;
}
/* ==不動産賃貸管理 PAGE(パープル)==== */
.detail_color_purple {
    color: #9c5a8e;
}
.detail_box_bg_purple {
    background-color: #f3f0f4;
}
.detail_box_nam_bg_purple {
    color: #ceb0b4;
}
.detail_box_title_bg_purple {
    background-color: #9c5a8e;
}
/* ==不動産利活用 PAGE(ボルド)==== */
.detail_color_Bordeaux {
    color: #b76265;
}
.detail_box_bg_Bordeaux {
    background-color: #ece6e7;
}
.detail_box_nam_bg_Bordeaux {
    color: #b58e7b;
}
.detail_box_title_bg_Bordeaux {
    background-color: #b76265;
}
@media screen and (max-width: 960px) {
.detail_box {
    padding: 40px 5% 20px 5%;
    margin-top: 60px;
}
.detail_box_namber {
    font-size: 3rem;
    top: -100px;
    left: 50%;
}
.detail_box_title {
    font-size: 1.1rem;
    line-height: 1.8rem;
    padding: 10px 20px 10px 20px;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 90%;
}
.detail_box .col2 {
    flex-direction: column-reverse;/* ==レスポンシブで上下を入れ替える= */
}
.detail_box_txtarea {
    width: 100%;
    margin-right: 0%;
    text-align: left;
}
.detail_box_imgarea {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.detail_box_imgarea img {
    width: 85%;
    margin: 20px auto 20px auto;
}
}









/* =========================================================
============================================================
============================================================
  Base-kits
============================================================
============================================================
========================================================= */

.sp {/* PCレイアウトでSPを消す*/
    display: none;
}
.pc {/* SPレイアウトでPCを表示*/
    display: block;
}
@media screen and (max-width: 960px) {
.sp {/* PCレイアウトでSPを消す*/
  display: block;
}
.pc {/* SPレイアウトでPCを表示*/
    display: none;
 }
}

.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.parent {/* 上下センター*/
    display: flex;
    lign-items: center;
}
.col {/* 横並び*/
    display: inline-flex;
    line-height: 2.0rem;
}
.d_block {
    display: block;
}
@media screen and (max-width: 960px) {
.col{/* 横並びを解除*/
    display: block;
 }
}
.col_between {/* 横並び*/
    display: inline-flex;
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 960px) {
.col_between {/* 横並びを解除*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
 }
}

.m_t_1 {
	margin-top: 1rem;
}
.m_t_2 {
	margin-top: 2rem;
}
.m_t_3 {
	margin-top: 3rem;
}
.m_b_1 {
	margin-bottom: 1rem;
}
.m_b_2 {
	margin-bottom: 2rem;
}
.m_b_3 {
	margin-bottom: 3rem;
}
.m_b_80 {
	margin-bottom: 80px;
}
.m_b_100 {
	margin-bottom: 100px;
}
@media screen and (max-width: 960px) {
.m_b_80 {
	margin-bottom: 20px;
}
}
/* =========================================================
============================================================
============================================================
 Fonts
============================================================
============================================================
========================================================= */


a {
	color: #025ABA;
	text-decoration: underline;
	font-weight: normal;
	transition:.3s;
}
a:visited {
	color: #666;
}
a:hover {
	color: #039;
	font-weight: normal;
	text-decoration: none;
	transition:.3s;
}
p{
	margin-bottom: 0.5rem;
	}
.txt_size_sss {/* 極小小の文字サイズ */
	font-size: 0.6rem;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	padding-top: 1rem;
	padding-left: 0.4rem;
}
.txt_size_ss {/* 極小の文字サイズ */
	font-size: 0.70rem;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	padding-top: 1rem;
	padding-left: 0.4rem;

}
.txt_size_s {/* 小の文字サイズ */
	font-size: 0.8rem;
	line-height: 1.8rem;
	letter-spacing: 0.2rem;
	padding-top: 1rem;
	padding-left: 0.4rem;

}
.txt_size_m {/* 中の文字サイズ */
	font-size: 0.96rem;
	line-height: 2.0rem;
	letter-spacing: 0.2rem;
	padding-top: 0.8rem;
	padding-left: 0.4rem;
	
}
.txt_size_l {/* 大の文字サイズ */
	font-size: 1.05rem;
	line-height: 2.4rem;
	letter-spacing: 0.3rem;
	padding-top: 0.8rem;
	padding-left: 0.4rem;
}
.txt_size_ll {/* 大の文字サイズ */
	font-size: 1.3rem;
	line-height: 2.8rem;
	letter-spacing: 0.3rem;
	padding-top: 0.8rem;
	padding-left: 0.4rem;
	font-weight: bold;
}
.txt_size_big {/* 大の文字サイズ */
	font-family: "Noto Sans JP";
	font-weight: 400;
	font-size: 2.0rem;
	color: #7D7B7B;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}

.mi {/* 冒頭にスペース */
	text-indent: 1rem;
}
.mt {/* 2行目からスペース */
	line-height: 1.8rem;
	text-indent: -1rem;
	padding-left: 1rem;
}
.txt_red {
	color: #D85745;
}
.txt_orange {
	color: #D4A751;
}
.txt_blue {
	color: #4C92AB;
}
.txt_white {color: #FFFFFF;
}
.txt_gray {
	color: #707070;
}

/* TOPPAGE */

h1{}
#top_mission h2 {
	font-size: 0.8rem;
	color: #FFFFFF;
	margin-bottom: 2rem;
}
#top_mission h2 .en {
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
}
#top_mission h3{
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	color: #FFFFFF;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
#top_vision h2{
	font-size: 0.8rem;
	color: #FFFFFF;
	margin-bottom: 2rem;
}
#top_vision h2 .en {
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
}
#top_vision h3{
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	color: #FFFFFF;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
#top_service h2{
	font-size: 0.8rem;
	color: #7D7B7B;
	margin-bottom: 2rem;
}
#top_service h2 .en {
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
}
#top_service h3{
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	color: #7D7B7B;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
#top_companyprofile h2{
	font-size: 0.8rem;
	color: #7D7B7B;
	margin-bottom: 2rem;
}
#top_companyprofile h2 .en {
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
}
#top_companyprofile h3{
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	color: #7D7B7B;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
h4{
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	letter-spacing: 0.3rem;
	color: #FFFFFF;
	}
	
/* PAGES */
#pages h2{	/* ページタイトル */
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 2.0rem;
	color: #FFFFFF;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
#pages h2 .en {	/* ページタイトルEN */
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
}
#pages h3{	/* ページタイトル */
	font-family: "Noto Sans JP";
	font-weight: 100;
	font-size: 1.8rem;
	color: #707070;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.2rem;
}
#pages h3 .en{	/* ページタイトル */
	font-family: 'Lato', sans-serif;
	font-size: 0.8rem;
	line-height: 0.4rem;
	font-weight: 300;
}
@media(max-width:768px) {

#top_mission h2{
	font-size: 0.8rem;
	text-align: center;
}
#top_mission h3{
	font-size: 1.45rem;
	text-align: center;
}
#top_vision h3{
	font-size: 1.48rem;
}
/* PAGES */
#pages h2{	/* ページタイトル */
	font-size: 1.6rem;
	color: #FFFFFF;
	line-height: 3rem;
	margin-bottom: 2rem;
	letter-spacing: 0.3rem;
}
#pages h2 .en {	/* ページタイトルEN */
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    font-weight: 100;
    line-height: 0rem;
    margin-top: 22px;
}
}
/* =========================================================
============================================================
============================================================
  Openning
============================================================
============================================================
========================================================= */
.img{
	width: 100%;
	height: 100vh;
	display:block;
	margin:0 auto;

}

.shutter{
	width: 100%;
	height: 100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	background-color:#fff;
	z-index:99999;
	-webkit-animation: byeShutter  2.5s forwards;
	animation: byeShutter 2.5s forwards;
}
.logo {
	position: absolute;
	width: 120px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-animation: logo 0.8s forwards;
	animation: logo 0.8s forwards;
	animation-delay: 0.2s;
}
.video_wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: -100;
	background-color: #1D1D1D;
}

.video_wrapper &gt; video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
	background-color: #1D1D1D;
}

.kv_title {
	display: inline-flex;
	width: 560px;
	height: 160px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.kv_title img{
	height: 160px;
	margin-left: 1rem;
	margin-right: 1rem;
}
.video_txt {
	position: absolute;
	text-align: center;
	color: #FFFFFF;
	letter-spacing: 0.2rem;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
@media(max-width:768px) {
.video_txt {
	width: 90%;
}
.kv_title {
	width: 100%;
	justify-content: center;
}
.kv_title img{
	height: 110px;
}
}

@keyframes byeShutter {
70% {
	opacity: 1;
}
100% {
  display: none;
  opacity: 0;
  z-index: -1;
}
}
@keyframes logo {
0% {
  opacity: 1;
}
  
50% {
  transform: rotate(0deg);     
}
  100% {
  transform: scale(0.8);
  }
}


/* =========================================================
============================================================
============================================================
背景色が伸びて出現
============================================================
============================================================

/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFF;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/* =========================================================
============================================================
============================================================
  Button
============================================================
============================================================

========================================================= */
/*btn-xsmall */
.btn_xsmall {
    line-height: 45px;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-align: center;
    position: relative;
    letter-spacing: 0.15em;
    width: 180px;
    font-weight: bold;
    margin-top: 30px;
    font-size: 0.8rem;
    font-weight: 100;
    background-color: #191919;
}
.btn_xsmall a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #FEFEFE;
}
.btn_xsmall a:hover {
	color: #000;
	background-color: #fff;
}

/*btn-small-white */
.btn_small {
	line-height: 45px;
	-webkit-transition: all .3s;
	transition: all .3s;
	text-align: center;
	font-size: 20px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 0.15em;
	width: 250px;
	font-weight: bold;
	margin-top: 30px;
	font-size: 1.0rem;
	font-size: 1.0rem;
	font-weight: 200;
}
.btn_small a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #FEFEFE;
}
.btn_small a:hover {
	color: #000;
	background-color: #fff;
}
.btn_small:after{
    content: "";
	width: 25px;
	height: 12px;
	background-image: url(../img/link_arrow_white.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 15px;
	top: 48%;
	transform: translateY(-50%);
	transition: all 0.3s;			
}
.btn_small:hover:after{
	right: 10px;
	background-image: url(../img/link_arrow_black.svg);
}

/*btn-small-black */
.btn_small-black {
    line-height: 45px;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-align: center;
    font-size: 20px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.15em;
    width: 250px;
    font-weight: bold;
    margin-top: 30px;
    font-size: 1.0rem;
    font-size: 1.0rem;
    font-weight: 200;
    background-color: #393838;
}
.btn_small-black a{
	display: block;
	text-decoration: none;
	color: #FEFEFE;
	border: 1px solid #393838;
}
.btn_small-black a:hover {
	color: #000;
	background-color: #fff;
}
.btn_small-black:after{
    content: "";
	width: 25px;
	height: 12px;
	background-image: url(../img/link_arrow_white.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 20px;
	top: 48%;
	transform: translateY(-50%);
	transition: all 0.3s;	
}
.btn_small-black:hover:after{
    right: 10px;
	background-image: url(../img/link_arrow_black.svg);
}

/* =========================================================
============================================================
============================================================
  Layout
============================================================
============================================================
========================================================= */


/*COMMON */


.inner{
	width: 80%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.page_inner{
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #FFFFFF;
}
.page_marks {
  height: 32px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.page_marks01 {
	background-image: url(../img/page_innner01.svg);
	height: 24px;
	width: 24px;
	margin: 8px 8px 8px 8px;
	padding: 8px 8px 8px 8px;
	background-size: 24px 24px;
}
.page_marks02 {
	background-image: url(../img/page_innner02.svg);
	height: 24px;
	width: 24px;
	margin: 8px 8px 8px 8px;
	padding: 8px 16px 8px 8px;
	background-size: 24px 24px;
}
.page_marks03 {
	background-image: url(../img/page_innner03.svg);
	height: 24px;
	width: 24px;
	margin: 0px 8px 8px 8px;
	padding: 8px 8px 8px 8px;
	background-size: 24px 24px;
}
.page_marks04 {
	background-image: url(../img/page_innner04.svg);
	height: 24px;
	width: 24px;
	margin: 0px 8px 0px 8px;
	padding: 8px 16px 8px 8px;
	background-size: 24px 24px;
}
/*４隅に「を加える 
.box_base {
	position: relative;
	background-color: #B0B0B0;
	min-height: 370px;

}
.box_outline {
	position: absolute;
	 --x-gradient: linear-gradient(90deg, #FFF 0 20px, transparent 0 calc(100% - 20px), #FFF calc(100% - 20px));
	 --y-gradient: linear-gradient(#FFF 0 20px, transparent 0 calc(100% - 20px), #FFF calc(100% - 20px));
	margin: 0.5rem;
	padding: 1rem;
	background-image: 
	var(--x-gradient),
	var(--y-gradient),
	var(--x-gradient),
	var(--y-gradient);
	background-repeat: no-repeat;
	background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%;
	background-position: top, right, bottom, left;
	width: 98%;
	min-height: 355px;
}*/
.box_inner {
	padding-top: 3rem;
	padding-bottom: 3rem;
}


/* Contact-area */
#contact_area {
	width: 100%;
	background-color: #15303C;
	background-image: url(../img/contactarea-back.jpg);
	background-size: cover;
	color: #FFF;
}

#contact_area .contact_textbox {
	background-color: rgba(255,255,255,0.40);
	text-align: center;
	color: rgba(255,255,255,1.00);
	border: 1px solid #FFFFFF;
	padding: 3rem;
	margin-bottom: 4rem;
}

#contact_area h2 .en {
	font-family: 'Lato', sans-serif;
	font-size: 1.0rem;
	font-weight: 200;
}
#contact_area h2{
	font-size: 1.6rem;
	font-weight: normal;
	margin-bottom: 2rem;
}
#contact_area h3{
	font-size: 1.1rem;
	font-weight: normal;
	color: #FFFFFF;
	margin-top: 2rem;
}
#contact_area .contact_area_tel {
	font-family: 'Lato', sans-serif;
	font-size: 2.0rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
}
#contact_area .contact_area_tel a {
	text-decoration: none;
	color: #FFFFFF;
}
/* Foote= */
footer {
	background-color: #888888;
	color: #CACACA;
	padding-bottom: 70px;
}
footer .left_box{
}
footer .inner{

}
footer .sns_box{
	display: flex;
	align-items: flex-end;
}
footer .sns_box img{
	height: 24px;
}
footer .sns_box img:hover{
	opacity: 0.1;
}
footer hr{
	height: 1px;
	background-color: #CACACA;
	border: none;
	margin-top: 10px;
}



@media(max-width:768px) {
.inner{
	width: 90%;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
}
/* =========================================================
============================================================
============================================================
  Pages
============================================================
============================================================
========================================================= */

/*NEWS */
#top_news{
	background-color: #DCDCDC;
	width: 100%;
}
#top_news .area {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	padding-bottom: 2rem;
	padding-top: 2rem;
}
#top_news .area p{
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
	font-weight: 100;
	padding-top: 1rem;
	margin-right: 2rem;
	min-width: 100px;
}
#top_news .area li{
	list-style-type: none;
	padding: 1rem;
	background-color: #FFFFFF;
	font-size: 0.8rem;
	min-width: 500px;
	max-width: 800px;
	width: 100%;
}
#top_news .area li{
	list-style-type: none;
	padding: 1rem;
	background-color: #FFFFFF;
	font-size: 0.8rem;
}
#top_mission{
	width: 100%;
	background-image: url(../img/top_mission_back.jpg);
	background-size: cover;
}
#top_mission .txt_box{
	width: 60%;
	max-width: 600px;
	background-color: rgba(43,43,43,0.8);
	padding: 2rem;
}
#top_vision{
	width: 100%;
	background-color: #000;
}
#top_vision .inner{
	background-image: url(../img/vision-photo.jpg);
	background-size: 400px 300px;
	background-repeat: no-repeat;
	background-position: 0% center;
	}
#top_vision .text_area{
	width: 60%;
	max-width: 600px;
	margin-right: 0;
	margin-left: auto;
	display: block;
				}
#top_vision .txt_box{
	background-color: rgba(43,43,43,0.8);
	padding: 2rem;

}
#top_service{}
#top_service .text_area{
	width: 60%;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	text-align: center;
				}
				
.top_service_box_title{
	color: #FFFFFF;
	font-size: 1.4rem;
	margin-bottom: 3rem;
}
.top_service_box_text{
	color: #FFFFFF;
	font-size: 0.9rem;
	margin-left: 3rem;
	margin-right: 3rem;
	line-height: 2.2rem;
}
.top_service_01{
	background-image: url(../img/top_service_01.jpg);
	background-size: cover;
	background-position: center 0%;
}
.top_service_02{
	background-image: url(../img/top_service_02.jpg);
	background-size: cover;
	background-position: center 0%;
}
.top_service_03{
	background-image: url(../img/top_service_03.jpg);
	background-size: cover;
	background-position: center 0%;
}
.top_service_04{
	background-image: url(../img/top_service_04.jpg);
	background-size: cover;
	background-position: center 0%;
}

@media(max-width:768px) {
#top_news .area {
	display: block;
	width: 80%;
	padding-top: 1rem;
}
#top_news .area li{
	min-width: 100%;
	max-width: 100%;
	width: 100%;
}
#top_mission .txt_box{
	width: 100%;
	padding: 2rem;
}
#top_vision .inner{
	background-image: url(../img/vision-photo.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center 220px;
	}
#top_vision .text_area {
	width: 100%;
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
	display: block;
				}
#top_vision .txt_box {
	padding: 2rem;
	margin-top: 120px;
}
#top_service .text_area {
	width: 80%;
}

}

/* =========================================================
コンテンツ
========================================================= */
.pagetitle{
	padding-top: 100px;
	padding-bottom: 100px;
	text-align: center;
}

.pagetitle_inner {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 150px;
	max-width: 700px;
}
.pagetitle_inner::before {
	content: " ";
	background-image: url(../img/page_title_left.svg);
	background-size: auto 150px;
	background-position: 0px;
	padding: 60px;
 }
.pagetitle_inner::after {
	content: " ";
	background-image: url(../img/page_title_right.svg);
	background-size: auto 150px;
	background-position: 70px 0px;
	padding: 60px;
 }
#pagetitle_area h2 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
 }

.pagetitle_companyprofile {
	background-image: url(../img/page_title_companyprofile.jpg);
	background-position: center center;
}
.pagetitle_service {
	background-image: url(../img/page_title_service.jpg);
	background-position: center center;
}
.pagetitle_development {
	background-image: url(../img/page_title_development.jpg);
	background-position: center center;
}
.pagetitle_sale {
	background-image: url(../img/page_title_sale.jpg);
	background-position: center center;
}
.pagetitle_management {
	background-image: url(../img/page_title_management.jpg);
	background-position: center center;
}
.pagetitle_utilization {
	background-image: url(../img/page_title_utilization.jpg);
	background-position: center center;
}
.pagetitle_inquiry {
	background-image: url(../img/page_title_inquiry.jpg);
	background-position: center center;
}
.page_innner {
	background-color: #FFFFFF;
	width: 100%;
	max-width: 1040px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	text-align: center;
}

.page_back {
	background-image: url(../img/page_back.png);
	background-position: center center;
	background-size: 50% auto;
}

@media(max-width:768px) {
.pagetitle{
	padding-top: 20px;
	padding-bottom: 20px;
}
.page_innner {
	width: 100%;
}
.pagetitle_inner {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	height: 120px;
	max-width: 90%;
}
.pagetitle_inner::before {
	content: " ";
	background-image: url(../img/page_title_left.svg);
	background-size: auto 80px;
	background-position: 0px;
	padding: 20px;
 }
.pagetitle_inner::after {
	content: " ";
	background-image: url(../img/page_title_right.svg);
	background-size: auto 80px;
	background-position: 0px 22px;
	padding: 20px;
 }
}


/* =========================================================
会社案内
========================================================= */
.message_box {
	display: flex;
	flex-direction: row-reverse; /* 横並び逆順 */
}
.message_left {
	width: 60%;
	margin-right: 40px;
	text-align: left;
}
.message_right {
	width: 40%;
}
.message_right img {
	width: 100%;
}
.message_txt {
	font-size: 0.88rem;
	line-height: 1.8rem;
	letter-spacing: 0.05rem;
	padding-top: 1rem;
	padding-left: 0rem;
}
.companyprofile .col2 {
	color: #707070;
	display: flex;
	justify-content: space-between;
}
.companyprofile .col {
	width: 400px;
	display: block;
}
.companyprofile .tr {
	font-size: 1.0rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0;
	border-bottom: solid 1px #D5D5D5;
}
.companyprofile .th {
  font-weight: bold;
  width: 25%;
}
.companyprofile .td {
  width: 70%;
  font-weight: 300;	
  text-align: left;
}

iframe {
  width: 100%;
  aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}

@media(max-width:976px) {
.companyprofile .col2 {
  display: block;
  justify-content: space-between;
}
.message_box {
	display: block;
	gap: 20px; /* 余白 */
}
.message_left {
	width: 100%;
	margin-right: 0px;
}
.message_right {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.message_right img {
	width: 100%;
}
.companyprofile .col {
	width: 100%;
	display: block;
}
.companyprofile .tr {
	font-size: 1.0rem;
	display: block;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: solid 1px #D5D5D5;
}
.companyprofile .th {
	width: 100%;
	text-align: left;
}
.companyprofile .td {
	width: 100%;
	font-weight: 300;	
	text-align: left;
}
}


/* =========================================================
事業のご紹介
========================================================= */


.business_main img {
	width: 624px;
	margin-top: 80px;
	margin-bottom: 80px;
}
.business_service {
	display: flex;
	margin-bottom: 40px;
}
.business_service .img_box {
	width: 416px;
}
.business_service .img_box img {
	width: 330px;
	padding-right: 32px;
}
.business_service .txt {
    width: 416px;
    font-family: "Noto Sans JP";
    font-weight: 300;
    text-align: left;
    font-size: 1.18rem;
    color: #707070;
    letter-spacing: 0.1rem;
    margin-left: 20px;
}
.business_service_01 {border-right: 2px solid #9C5A8E;}
.business_service_02 {border-right: 2px solid #C2A552;}
.business_service_03 {border-right: 2px solid #6C9154;}
.business_service_04 {border-right: 2px solid #4E85A2;}

@media(max-width:976px) {
.business_main img {
	width: 95%;
}
.business_service {
	display: block;
	margin-bottom: 40px;
}
.business_service .img_box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.business_service .img_box img {
	width: 60%;
	padding-right: 0px;
}
.business_service .txt {
    width: 80%;
    text-align: center;
    font-size: 1.0rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}
.business_service_01 {border-right: 0px;border-bottom: 2px solid #9C5A8E;}
.business_service_02 {border-right: 0px;border-bottom: 2px solid #C2A552;}
.business_service_03 {border-right: 0px;border-bottom: 2px solid #6C9154;}
.business_service_04 {border-right: 0px;border-bottom: 2px solid #4E85A2;}
}

/* =========================================================
その他のビジネスバナー
========================================================= */

.f_banner .container {
	width: 100%;
	position: relative;
	background-color: #f4f4f4;
	margin: 0px;
	padding-top: 40px;
	padding-right: 0px;
	padding-bottom: 40px;
	padding-left: 0px;
}
.f_banner_b {
	max-width: 960px;
 	width: 90%;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.o_banner {
	float: left;
	width: 360px;
	overflow: hidden;
}
.o_banner.hid {display: none;}
.col3 .o_banner {
	float: left;
	width: 30%;
	overflow: hidden;
}
.o_banner_i img {
	margin: 0px;
	padding: 0px;
	width: 100%;
	vertical-align: bottom;
	-moz-transition: -moz-transform 0.3s linear;
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;
}
a:hover &gt; .o_banner_i img{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.o_banner_in {
	float: left;
	width: 300px;
	background-size: 140px;
	height: 90px;
	position: relative;
	background-color: #FFFFFF;
}
.o_banner_in:before {
	content:'';
	display: block;
	position: absolute;
	left: 50%;
	top:0;
	transform: translate(-50%,-100%);
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 10px solid transparent;
	border-bottom: 10px solid #FFF;
}
.col4 .o_banner_in {
	float: left;
	width: 100%;
}
.o_banner:last-child {
	margin-right: 0px;
}
.o_banner_in p {
	display: inline-block;
	text-align: center;
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 0 50%;
	padding-top: 32px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	letter-spacing: 3px;
	transform: translate(-50%,0);	
	white-space: nowrap;
	color:#666666;
}
.o_banner_in p:before {
	position: absolute;
	margin: auto;
	content: "";
	vertical-align: middle;
	bottom:10px;
	right: -1.0rem;
	width: 10px;
	height: 10px;
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: right .3s;
}
a:hover .o_banner_in p:before {right: -1.3rem;}
.o_banner_in h3:after {border: none!important;}
.o_banner_in .sub_t {
	width: 100%;
	text-align: center;
	font-size: 9px;
	line-height: 1.2;
	color: #666666;
	position: absolute;
	top: 10px;
	left:50%;
	transform: translate(-50%,0);
	margin-bottom: 0!important;
}

#business_service_etc .col3 {
	display: flex;
	justify-content: space-between;
	width: 100%;

}
#business_service_etc .col {
	width: 25%;
	position: relative;
	height: 100px;
	text-align: center;
	overflow: hidden;
	color: #FFFFFF;
}
#business_service_etc .col a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#business_service_etc .service02 {
 width: 100%;
	background-image: url(../img/top_service_02.jpg);
	background-size: cover;
	  transition-duration: .5s;
}
#business_service_etc .service02:hover {
	background-image: url(../img/top_service_02.jpg);
	transform: scale(1.2);
}

@media(max-width:1040px) {
.f_banner_b {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	flex-wrap: wrap;
	justify-content: space-between;
}
.o_banner.hid {display: none;}
.col3 .o_banner {
	float: none;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#business_service_etc .col3 {
    display: block;
    justify-content: space-between;
    width: 100%;
}
.o_banner_i {
	display: none;
}
.o_banner_in {
    float: left;
    width: 100%;
    height: 90px;
    position: relative;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #DFDFDF;
}
}</pre></body></html>