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

#columnList ul{
	overflow: hidden;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -50px;
	margin-top: -60px;
}
#columnList ul li{
	width: 50%;
	padding-left: 50px;
	margin-top: 60px;
	float: left;
}
#columnList ul li a{
	display: block;
	text-decoration: none;
	color: #111111;
	position: relative;
}
#columnList ul li a:hover{
	color: #e73b4a;
}
#columnList ul li figure{
	height: 250px;
	position: relative;
	overflow: hidden;
}
#columnList ul li figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
#columnList ul li a:hover figure img{
	transform: scale(1.1);
}
#columnList ul li p.title{
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	margin-top: 15px;
}
#columnList ul li p.cate{
	position: absolute;
	top: 220px;
	right: 0;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 30px;
	background-color: #111111;
	color: #ffffff;
	text-align: center;
	padding: 0 15px;
}
/*#columnArea .cate.search{
	background-color: #a89955;
}
#columnArea .cate.building{
	background-color: #557ea8;
}
#columnArea .cate.cost{
	background-color: #a85555;
}*/
#columnList ul li p.excerpt{
	margin-top: 10px;
}

@media screen and (max-width: 999px){
#columnList ul{
	margin-left: 0;
	margin-top: 0;
}
#columnList ul li{
	width: 100%;
	padding-left: 0;
	float: none;
}
#columnList ul li:first-child{
	margin-top: 0;
}
}/*media*/





#columnMain{
	width: 800px;
	margin: 0 auto;
}
#columnImage img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#columnMain h2{
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.5;
	margin-top: 40px;
	font-weight: bold;
}
#postMeta{
	overflow: hidden;
	margin-top: 30px;
}
#postMeta p.cate{
	float: left;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 20px;
	background-color: #111111;
	color: #ffffff;
	text-align: center;
	padding: 0 10px;
}
#postMeta p.date{
	float: left;
	margin-left: 10px;
	line-height: 20px;
}
#columnContent{
	margin-top: 60px;
}
#columnContent h3{
	margin-top: 60px;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.6;
	font-weight: bold;
	color: #ffffff;
	background-color: #111111;
	padding: 10px;
}
#columnContent h4{
	margin-top: 40px;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	border-top: 1px solid #111111;
	border-bottom: 1px solid #111111;
	font-weight: bold;
	padding: 10px;
}
#columnContent h5{
	border-left: 3px solid #111111;
	padding-left: 7px;
	margin-top: 30px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
#columnContent p{
	margin-top: 20px;
}

@media screen and (max-width: 999px){
#columnMain{
	width: 100%;
}
}/*media*/





.column-aruarubox{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.column-aruarubox:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.column-aruarubox p {
    margin: 0; 
    padding: 0;
}

/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-left2 , .talking-left3 , .talking-right , .talking-right2  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し（Aさん）---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:lightblue;   /*枠線の色*/
      background:lightblue;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightblue;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightblue;
      top: 15px;
      left: -19px;
}

/*---左の吹き出し（妻左）---*/
.talking-left2 {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:lightpink;   /*枠線の色*/
      background:lightpink;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left2:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left2:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;
      top: 15px;
      left: -19px;
}

/*---左の吹き出し（夫婦）---*/
.talking-left3 {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:thistle;   /*枠線の色*/
      background:thistle;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left3:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid thistle;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left3:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid thistle;
      top: 15px;
      left: -19px;
}

/*---右の吹き出し（妻）---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:lightpink;    /*枠線の色*/
      background:lightpink;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid lightpink;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid lightpink;
      top: 15px;
      right: -19px;
}

/*---右の吹き出し（同僚・営業）---*/
.talking-right2 {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:khaki;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right2:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right2:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;
      top: 15px;
      right: -19px;
}