@charset "utf-8";
/* CSS Document */

/* コラムページ共通　2カラム設定
---------------------------------------------------- */
main{
	background-color: #EEE;
}

/* pcColBox */
.pcColBox {
    width: 90%;
    margin: auto;
    padding-bottom: 48px;
}
@media screen and (min-width: 48em) {
.pcColBox {
    display: flex;
    justify-content: space-between;
    max-width: 75em;
    padding-bottom: 64px;

}
}
@media screen and (min-width: 48em) and (max-width: 64em) {
.pcColBox {
    width: 95%;
} 
}

.pcColBox .colMain {
    width: 100%;
}
@media screen and (min-width: 48em) {
.pcColBox .colMain {
    flex: 1;
}
} 

.pcColBox .colSide {
     margin-top: 48px;
}

@media screen and (min-width: 48em) {
.pcColBox .colSide {
     width: 288px;
     margin-top: 20px;
     margin-left: 64px;
} 
}

@media screen and (min-width: 48em) and (max-width: 75em) {
.pcColBox .colSide {
      margin-left: 24px;
} 
}

.pcColBox .colSide .fixBox {
     display: none;
}

@media screen and (min-width: 48em) {
.pcColBox .colSide .fixBox {
     position: sticky;
     transition: all 0.3s 0s ease;
     top: 90px; 
}
}

.pcColBox .colSide section + section {
     margin-top: 32px;
}
.pcColBox .colSide a {
     display: block;
     transition: all 0.3s 0s ease;
}
.pcColBox .colSide a:not([disabled]):hover {
     opacity: .7; 
}

 .pcColBox .colSide img {
     width: 100%; 
}
  @media screen and (min-width: 48em) {
.pcColBox .colSide img {
     width: auto;
     max-width: 100%; 
} 
}
.pcColBox .colSide section h3 {
      margin-bottom: 16px;
      padding: 8px 0;
      border-top: 3px solid #007CBB;
      border-bottom: 1px solid #ccc;
      font-size: 22px;
      font-weight: bold;}
.pcColBox .colSide section h3::before {
      display: inline-block;
      content: '';
      width: 40px;
      height: 40px;
      margin-right: 8px;
      background-size: contain;
      vertical-align: text-bottom;
}

.pcColBox .colSide section.side-top5 h3::before {
      content: url("/web/jp/real-estate/img/column/icon_side_top5.svg");
}

 @media screen and (min-width: 64em) {
.pcColBox .colSide section h3::before {
      width: 40px;
      height: 40px;
}
}

.pcColBox .colSide .list-top5 li,
.pcColBox .colSide .list-seminar li  {
      border-bottom: 1px dotted #ccc; 
}
.pcColBox .colSide .list-top5 li a,
.pcColBox .colSide .list-seminar li a {
       display: flex;
       align-items: flex-start;
       padding: 15px 0;
       font-size: 14px;
}
.pcColBox .colSide .list-top5 li figure,
.pcColBox .colSide .list-seminar li figure {
      flex-shrink: 0;
      position: relative;
      width: 32.5581395349%;
      margin-right: 5.3156146179%;
}
.pcColBox .colSide .list-top5 li figure:before {
      display: block;
      background-color: #007CBB;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      width: 22px;
      height: 22px;
      padding: 2px;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      box-sizing: border-box;
}
 .pcColBox .colSide .list-top5 li:nth-child(1) figure:before {
      content: "1";
}
.pcColBox .colSide .list-top5 li:nth-child(2) figure:before {
      content: "2";
}
.pcColBox .colSide .list-top5 li:nth-child(3) figure:before {
      content: "3";
}
.pcColBox .colSide .list-top5 li:nth-child(4) figure:before {
      content: "4";
}
.pcColBox .colSide .list-top5 li:nth-child(5) figure:before {
      content: "5";
}
.pcColBox .colSide .list-top5 li p,
.pcColBox .colSide .list-seminar li p {
      width: 100%;
      line-height: 1.4; 
}

.comm-top .colSide section.side-category {
      display: none;
}
.pcColBox .colSide section.side-category .list-category li {
      margin-bottom: 8px;}
.pcColBox .colSide section.side-category .list-category li a {
      display: inline-block;
      background-color: #fff;
      border: 1px solid #152768;
      color: #152768;
      line-height: 1.0;
      padding: 10px 8px 8px;
      transition: all 0.3s 0s ease;
}
.pcColBox .colSide section.side-category .list-category li a svg {
      margin-right: 8px;
      vertical-align: middle;
}
.pcColBox .colSide section.side-category .list-category li a svg path,
.pcColBox .colSide section.side-category .list-category li a svg line,
.pcColBox .colSide section.side-category .list-category li a svg circle,
.pcColBox .colSide section.side-category .list-category li a svg rect.rect-stroke {
      stroke: #152768;
}
.comm-column .pcColBox .colSide section.side-category .list-category li a.side-category-column,
.comm-interview .pcColBox .colSide section.side-category .list-category li a.side-category-interview,
.comm-article .pcColBox .colSide section.side-category .list-category li a.side-category-article,
.comm-future .pcColBox .colSide section.side-category .list-category li a.side-category-future,
.pcColBox .colSide section.side-category .list-category li a:hover {
      background-color: #152768;
      color: #fff;
      opacity: 1.0;}
.comm-column .pcColBox .colSide section.side-category .list-category li a.side-category-column svg path,
.comm-column .pcColBox .colSide section.side-category .list-category li a.side-category-column svg line,
.comm-interview .pcColBox .colSide section.side-category .list-category li a.side-category-interview svg path,
.comm-interview .pcColBox .colSide section.side-category .list-category li a.side-category-interview svg line,
.comm-article .pcColBox .colSide section.side-category .list-category li a.side-category-article svg path,
.comm-article .pcColBox .colSide section.side-category .list-category li a.side-category-article svg line,
.comm-article .pcColBox .colSide section.side-category .list-category li a.side-category-article svg rect.rect-stroke,
.comm-future .pcColBox .colSide section.side-category .list-category li a.side-category-future svg circle,
.comm-future .pcColBox .colSide section.side-category .list-category li a.side-category-future svg line,
 .pcColBox .colSide section.side-category .list-category li a:hover svg path,
.pcColBox .colSide section.side-category .list-category li a:hover svg line,
.pcColBox .colSide section.side-category .list-category li a:hover svg circle,
.pcColBox .colSide section.side-category .list-category li a:hover svg rect.rect-stroke {
      stroke: #fff;
}
.pcColBox .colSide section.side-category .list-category li a:hover {
      opacity: 1.0;
}


/* コラムページ共通　記事内CTAエリア
---------------------------------------------------- */
.column_cta_outer {
	margin:40px 0 40px;
	border: solid 3px #2caaea;
}

.column_cta01_heading {
	font-size:18px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    background: #2caaea;
    padding: 8px 15px;
    margin-bottom: 0 !important;
}

.column_cta_lead{
	font-size:16px;
}

.column_cta_inner{
	padding: 20px 25px;
	
}

.column_cta_flex {
    display: flex;
    align-items: center;

}

.column_cta_img {
    margin: 0 auto;
    width: 46%;
    height: auto;
}

.column_cta_right {
    width: 54%;
    padding-left: 20px;
}

.column_cta-list {
    margin: 10px 0 !important;
}


.column_cta-list dt {
	color:#007CBB;
    font-size: 20px;
	font-weight: bold;
    margin-top: 0px;
}

.column_cta-list dd {
	position: relative;
	font-size: 18px;
    padding-left: 25px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.column_cta-list dd:before {
    content: url(/web/jp/real-estate/img/column/column-cta-check.png);
    display: inline-block;
    vertical-align: middle;
    transform: scale(0.25);
    position: absolute;
    top: -25px;
    left: -28px;
}

.column_cta01_catch {
    color: #007CBB;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px !important;
}

.column_cta-list sup{
	color:#007CBB;
	font-size: 12px;
}

.sup-list li {
    color: #007CBB;
    font-size: 13px;
    text-indent: -1.8em;
    padding-left: 1.5em;
    line-height: 1.5;
	margin-bottom: 5px;
	margin: 25px auto 5px
}

.btn-wrap{
	margin-top: -20px;
}

a.column_cta_button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 65%;
    margin: 0 auto;
    padding: 10px 0;
	font-size: 16px;
    font-weight: bold;
    background: #ff7800;
    color: #ffffff !important;
    border-radius: 100vh;
    position: relative;
    transition: 0.5s;
	text-decoration: none !important;
}


a.column_cta_button::before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-right: 10px;
}

a.column_cta_button:hover{
	opacity: .7
}


@media screen and (max-width:768px) {
.column_cta_flex{
    flex-direction: column;
	margin: 10px auto 0;
}

.column_cta_right {
        width: 100%;
        padding-left: 0;
}
	
.column_cta_img {
    margin: 0 auto;
    width: 96%;
}
	
a.column_cta_button {
        width: 100%;
}

.btn-wrap {
        margin-top: -25px;
}
}

@media screen and (max-width:480px) {
.column_cta_inner {
    padding: 10px 20px;
}
	
.column_cta-list dd {
    font-size: 16px;
}
	
.column_cta-list dd:before {
    transform: scale(0.2);
    top: -26px;
    left: -26px;
}
	
.btn-wrap {
        margin-top: -10px;
 }
}