@charset "utf-8";
@import 'column-list.css';
@import 'breadcrumbs-ellipsis.css';

/**
 * お役立ち情報CSS
 *
 * @author Tsue Shogo
 * @version
 *	1.0.0	2018/10/23(火) 13:00	新規作成
 *	1.0.1	2018/11/02(金) 10:22	No315-316:タグリンク追加
 *	1.0.2	2018/11/02(金) 10:42	No317,320,321,322 サイズ調整
 *	1.0.3	2018/11/06(火) 10:04	No317:リテイク修正
 *	1.0.4	2018/11/06(火) 10:24	No326:マージン調整
 *	1.0.5	2018/11/06(火) 10:37	No327:非表示設定
 *	1.0.6	2018/11/06(火) 10:43	No325:
 *	1.0.7	2018/11/09(金) 11:47	No329:ul, liスタイル追加
 *	1.0.8	2018/11/09(金) 15:13	No328:figure内imgのトリミング追加
 *	1.1.1	2019/01/10(木) 12:29	IE11表示崩れ対策
 */

/**
 * 外部CSS競合解決
 */
@media screen and (max-width: 767px) {
  #header + .main {
    max-width: 100vw;
    width: 100vw;
  }
}
#contents {
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  #contents {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  #footer-contact {
    display: none;
  }
}
span.SPblock {
  display: inline;
}
@media screen and (min-width: 1200px) {
  span.SPblock {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  span.SPblock {
  }
}
@media screen and (max-width: 767px) {
  span.SPblock {
    display: block;
  }
}
/**
 * パンくず
 */
#breadcrumbs {
}
@media screen and (min-width: 1200px) {
  #breadcrumbs {
    margin: 4px auto 0;
    padding: 0;
    height: 35px;
    line-height: 35px;
    font-size: 1.7rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #breadcrumbs {
    margin: 4px auto 0;
    padding: 0;
    min-height: 35px;
    line-height: 35px;
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 767px) {
  #breadcrumbs {
  }
}
/**
 * 最上部タイトル
 */
.columnTitle {
  text-align: center;
  font-weight: bold;
  background-color: #423e39;
  color: #ffffff;
  margin: 0;
}
.isbody-column .main .column_detail_title {
  margin: 0;
  padding: 20px 0 20px !important;
}

.isbody-column .main .mainTitle {
  margin: 0;
  padding: 20px 0 40px;
}

.main .title_area h1 {
  background-color: #075eac;
  color: #fff;
  font-size: 3rem;
  width: 1000px;
  font-weight: bold;
  padding: 0;
  margin: 0 auto;
  padding-top: 5px;
  transition: all 0.3s ease;
}
.main .mainTitle {
  margin: 0;
  padding: 18px 0 14px;
}
@media screen and (min-width: 1200px) {
  .columnTitle {
    height: 100px;
    line-height: 100px;
    font-size: 3.5rem;
    margin: 0 0 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .columnTitle {
    height: calc(100vw / 1200 * 100);
    line-height: calc(100vw / 1200 * 100);
    font-size: 3.5rem;
    margin: 0 0 calc(100vw / 1200 * 30);
  }
}
@media screen and (max-width: 767px) {
  .columnTitle {
    height: calc(100vw / 1200 * 150);
    line-height: calc(100vw / 1200 * 150);
    font-size: 2.3rem;
    margin: 0 0 15px;
  }
  .is-column.is-detail .columnTitle {
    display: none;
  }
  .sp-hidden {
    display: none;
  }

  .isbody-column .main .title_area h1 {
    font-size: 1.65rem;
    width: auto;
  }
}
/**
 * コンテンツ内部
 */
.contents-inner.has-side {
}
@media screen and (min-width: 1200px) {
  .contents-inner.has-side {
    padding: calc((100% - 240px - 840px) / 3); /* 240px:サイド幅, 840px:メイン幅, 3:間隔数 */
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .contents-inner.has-side {
    padding: calc((100vw / 1200 * (1200 - 240 - 840)) / 3); /* 240px:サイド幅, 840px:メイン幅, 3:間隔数 */
  }
}
@media screen and (max-width: 767px) {
  .contents-inner.has-side {
    margin: 0;
  }
}
/**
 * サイド
 */
.contents-inner.has-side #side {
}
@media screen and (min-width: 1200px) {
  .contents-inner.has-side #side {
    width: 230px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .contents-inner.has-side #side {
    width: calc(100vw / 1200 * 230);
  }
}
@media screen and (max-width: 767px) {
  .contents-inner.has-side #side {
  }
}
/**
 * サイド タイトル
 */
.contents-inner.has-side #side .nav-title {
  font-weight: bold;
}
@media screen and (min-width: 1200px) {
  .contents-inner.has-side #side .nav-title {
    font-size: 1.8rem;
    padding-bottom: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .contents-inner.has-side #side .nav-title {
    font-size: 1.8rem;
    padding-bottom: calc(16 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .contents-inner.has-side #side .nav-title {
    font-size: 1.8rem;
    padding-left: 15px;
    padding-bottom: 15px;
  }
}
/**
 * サイド リストボックス
 */
#side .list.is-side {
}
@media screen and (min-width: 1200px) {
  #side .list.is-side {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #side .list.is-side {
  }
}
@media screen and (max-width: 767px) {
  #side .list.is-side {
    margin: 0;
  }
}
/**
 * サイド リストボックス カテゴリーメニューエリア
 */
#side .list.is-side .cate-nav {
}
@media screen and (min-width: 1200px) {
  #side .list.is-side .cate-nav {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #side .list.is-side .cate-nav {
  }
}
@media screen and (max-width: 767px) {
  #side .list.is-side .cate-nav {
  }
}
/**
 * サイド リストボックス カテゴリーメニューエリア リストエリア
 */
#side .list.is-side .cate-nav ul {
  padding: 0;
  border-top: 2px solid #423e39;
  border-bottom: 2px solid #423e39;
}
@media screen and (min-width: 1200px) {
  #side .list.is-side .cate-nav ul {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #side .list.is-side .cate-nav ul {
  }
}
@media screen and (max-width: 767px) {
  #side .list.is-side .cate-nav ul {
  }
}
/**
 * サイド リストボックス カテゴリーメニューエリア リスト
 */
#side .list.is-side .cate-nav ul li {
  border-bottom: 1px dashed #828181;
  margin: 0;
}
#side .list.is-side .cate-nav ul li:last-child {
  border-bottom: none;
}
@media screen and (min-width: 1200px) {
  #side .list.is-side .cate-nav ul li {
    height: 61px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #side .list.is-side .cate-nav ul li {
    height: calc(100vw / 1200 * 60 + 1px);
  }
}
@media screen and (max-width: 767px) {
  #side .list.is-side .cate-nav ul li {
  }
  #side .list.is-side .cate-nav ul li:first-child {
    /*border-top: 1px dashed #828181;*/
  }
}
/**
 * サイド リストボックス カテゴリーメニューエリア リスト リンク
 */
#side .list.is-side .cate-nav ul li a {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: bold;
  text-align: left;
  position: relative;
  color: #696868;
}
#side .list.is-side .cate-nav ul li a:before {
  content: '';
  display: block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
#side .list.is-side .cate-nav ul li a.cat-toilet:before {
  background-image: url('../images/common/icon_category_toilet.png');
}
#side .list.is-side .cate-nav ul li a.cat-bathroom:before {
  background-image: url('../images/common/icon_category_bathroom.png');
}
#side .list.is-side .cate-nav ul li a.cat-kitchen:before {
  background-image: url('../images/common/icon_category_kitchen.png');
}
#side .list.is-side .cate-nav ul li a.cat-washroom:before {
  background-image: url('../images/common/icon_category_washroom.png');
}
#side .list.is-side .cate-nav ul li a.cat-interior:before {
  background-image: url('../images/common/icon_category_interior.png');
}
#side .list.is-side .cate-nav ul li a.cat-exterior:before {
  background-image: url('../images/common/icon_category_exterior.png');
}
#side .list.is-side .cate-nav ul li a.cat-waterheater:before {
  background-image: url('../images/common/icon_category_waterheater.png');
}
#side .list.is-side .cate-nav ul li a.cat-waterworks:before {
  background-image: url('../images/common/icon_category_waterworks.png');
}
#side .list.is-side .cate-nav ul li a.cat-electricity:before {
  background-image: url('../images/common/icon_category_electricity.png');
}
.isbody-toilet a.cat-toilet,
.isbody-bathroom a.cat-bathroom,
.isbody-kitchen a.cat-kitchen,
.isbody-washroom a.cat-washroom,
.isbody-interior a.cat-interior,
.isbody-exterior a.cat-exterior,
.isbody-waterheater a.cat-waterheater,
.isbody-waterworks a.cat-waterworks,
.isbody-waterworks a.cat-electricity {
  background-color: #e6e6e6;
}
@media screen and (min-width: 1200px) {
  #side .list.is-side .cate-nav ul li a:before {
    width: 50px;
    height: 50px;
    left: 3px;
    top: 5px;
  }
  #side .list.is-side .cate-nav ul li a {
    height: 60px;
    line-height: 60px;
    font-size: 1.8rem;
    padding-left: 59px;
  }
  #side .is-side-link {
    padding-top: 15px;
  }
  #side .is-side-link .is-side-link-inner {
    height: 60px;
    line-height: 30px;
    font-size: 1.8rem;
    padding-left: 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  #side .list.is-side .cate-nav ul li a:before {
    width: calc(100vw / 1200 * 50);
    height: calc(100vw / 1200 * 50);
    left: calc(100vw / 1200 * 3);
    top: calc(100vw / 1200 * 5);
  }
  #side .list.is-side .cate-nav ul li a {
    height: calc(100vw / 1200 * 60);
    line-height: calc(100vw / 1200 * 60);
    font-size: 1.8rem;
    padding-left: calc(100vw / 1200 * 59);
  }
  #side .is-side-link {
    padding-top: 15px;
  }
  #side .is-side-link .is-side-link-inner {
    height: calc(100vw / 1200 * 60);
    line-height: calc(100vw / 1200 * 30);
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  #side .list.is-side .cate-nav ul li a:before {
    width: 50px;
    height: 50px;
    left: 3px;
    top: 5px;
  }
  #side .list.is-side .cate-nav ul li a {
    height: 60px;
    line-height: 60px;
    font-size: 1.8rem;
    padding-left: 59px;
  }
  #side .is-side-link {
    padding-top: 30px;
  }
  #side .is-side-link .is-side-link-inner {
    height: 60px;
    line-height: 30px;
    font-size: 1.8rem;
    padding-left: 15px;
  }
}
/**
 * コンテンツヘッダ
 */
#contents-header {
  width: 100%;
  letter-spacing: -0.4em;
}
@media screen and (min-width: 1200px) {
  #contents-header {
    padding: 40px 150px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header {
    padding: calc(40 * 100vw / 1200) calc(150 * 100vw / 1200) 0;
  }
}
@media screen and (max-width: 767px) {
  #contents-header {
  }
}
/**
 * コンテンツヘッダ 画像
 */
#contents-header figure {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
#contents-header figure .imgtrimwrap {
  width: 100%;
}
#contents-header figure img {
}
@media screen and (min-width: 1200px) {
  #contents-header figure {
    width: 240px;
    margin-right: 30px;
  }
  #contents-header figure img {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header figure {
    width: calc(240 * 100vw / 1200);
    margin-right: calc(30 * 100vw / 1200);
  }
  #contents-header figure img {
  }
}
@media screen and (max-width: 767px) {
  #contents-header figure {
  }
  #contents-header figure img {
  }
  #contents.is-detail #contents-header figure {
    margin: 0;
  }
  #contents.is-detail #contents-header figure img {
  }
}
/**
 * コンテンツヘッダ 内部
 */
#contents-header .contents-header-inner {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
@media screen and (min-width: 1200px) {
  #contents-header .contents-header-inner {
    width: calc(100% - 240px - 30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header .contents-header-inner {
    width: calc(100% - 240px - 30px);
  }
}
@media screen and (max-width: 767px) {
  #contents-header .contents-header-inner {
    margin: 0 15px;
  }
}
/**
 * コンテンツヘッダ 内部 タイトル(h1)
 */
#contents-header .contents-header-inner h1 {
  font-weight: bold;
}
@media screen and (min-width: 1200px) {
  #contents-header .contents-header-inner h1 {
    font-size: 3rem;
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header .contents-header-inner h1 {
    font-size: 3rem;
    margin-bottom: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  #contents-header .contents-header-inner h1 {
    font-size: 2rem;
    margin: 20px 0;
  }
}
/**
 * コンテンツヘッダ 内部 ディスクリプション
 */
#contents-header .contents-header-inner .description {
}
@media screen and (min-width: 1200px) {
  #contents-header .contents-header-inner .description {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header .contents-header-inner .description {
  }
}
@media screen and (max-width: 767px) {
  #contents-header .contents-header-inner .description {
    font-size: 4.1vw;
    line-height: 1.6em;
  }
}
/**
 * コンテンツヘッダ 内部 タグエリア
 */
#contents-header .contents-header-inner .tag_area {
  /*
	border-top: 1px dashed #828181;
	border-bottom: 1px dashed #828181;
	*/
}
#contents-header .contents-header-inner .tag_area ul {
}
#contents-header .contents-header-inner .tag_area ul li {
  display: inline-block;
}
#contents-header .contents-header-inner .tag_area ul li a,
#contents-header .contents-header-inner .tag_area ul li span {
  border: 2px solid #ccc;
  color: #323232;
  display: inline-block;
}
#contents-header .contents-header-inner .tag_area ul li a:hover {
  opacity: 0.8;
  text-decoration: none;
}
#contents-header .contents-header-inner .tag_area ul li .cat-toilet {
  border: 2px solid #0c88ed;
  background-color: #0c88ed;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-bathroom {
  border: 2px solid #f56133;
  background-color: #f56133;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-kitchen {
  border: 2px solid #fa9519;
  background-color: #fa9519;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-washroom {
  border: 2px solid #0cbced;
  background-color: #0cbced;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-interior {
  border: 2px solid #a67232;
  background-color: #a67232;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-exterior {
  border: 2px solid #27d9b5;
  background-color: #27d9b5;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-waterworks {
  border: 2px solid #0c88ed;
  background-color: #0c88ed;
  color: #ffffff;
}
#contents-header .contents-header-inner .tag_area ul li .cat-electricity {
  border: 2px solid #999999;
  background-color: #999999;
  color: #ffffff;
}
@media screen and (min-width: 1200px) {
  #contents-header .contents-header-inner .tag_area {
    margin: 0;
  }
  #contents-header .contents-header-inner .tag_area ul {
    margin: 0;
  }
  #contents-header .contents-header-inner .tag_area ul li {
  }
  #contents-header .contents-header-inner .tag_area ul li a,
  #contents-header .contents-header-inner .tag_area ul li span {
    height: 24px;
    line-height: calc(24px - 2px);
    border-radius: 12px;
    font-size: 1.6rem;
    padding: 0 2.3rem;
    margin: 0 12px 12px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents-header .contents-header-inner .tag_area {
    margin: 0;
  }
  #contents-header .contents-header-inner .tag_area ul {
    margin: 0;
  }
  #contents-header .contents-header-inner .tag_area ul li {
  }
  #contents-header .contents-header-inner .tag_area ul li a,
  #contents-header .contents-header-inner .tag_area ul li span {
    height: calc(100vw / 1200 * 24);
    line-height: calc(100vw / 1200 * 24 - 2px);
    border-radius: calc(100vw / 1200 * 12);
    font-size: 1.6rem;
    padding: 0 2.3rem;
    margin: 0 calc(100vw / 1200 * 12) calc(100vw / 1200 * 12) 0;
  }
}
@media screen and (max-width: 767px) {
  #contents-header .contents-header-inner .tag_area {
    margin: 0;
    padding: 0 0 15px;
  }
  #contents-header .contents-header-inner .tag_area ul {
  }
  #contents-header .contents-header-inner .tag_area ul li {
  }
  #contents-header .contents-header-inner .tag_area ul li a,
  #contents-header .contents-header-inner .tag_area ul li span {
    height: 24px;
    line-height: calc(24px - 2px);
    border-radius: 12px;
    font-size: 1.2rem;
    padding: 0 1rem;
    margin: 0 10px 10px 0;
  }
}
/**
 * メイン
 */
.contents-inner.has-side main#main {
  flex: none;
  padding: 0;
}
@media screen and (min-width: 1200px) {
  .contents-inner.has-side main#main {
    width: 850px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .contents-inner.has-side main#main {
    width: calc(100vw / 1200 * 850);
  }
}
@media screen and (max-width: 767px) {
  .contents-inner.has-side main#main {
  }
}
/**
 * 記事詳細
 */
#main h1 {
  font-weight: bold;
  color: #323232;
}
#column-content h2 {
  font-weight: bold;
  color: #423e39;
  border-bottom: 2px solid #423e39;
}
#column-content h3 {
  color: #423e39;
}
#column-content h3.number {
  position: relative;
}
#column-content h3.number span {
  position: absolute;
  display: block;
  background-color: #0c88ed;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  left: 0;
  top: 0;
}
#column-content h4 {
  color: #423e39;
  padding: 15px;
  background: #e4f2ff;
}
#column-content p {
  color: #423e39;
  line-height: 1.6em;
  word-wrap: break-word;
}
#column-content figure {
  overflow: hidden;
}
#column-content figure img {
  width: 100%;
}
#column-content ul {
  list-style-type: disc;
  list-style-position: inside;
}
#column-content ul li {
}
#column-content ul li:last-child {
}

#column-content ul.image-before-after {
  list-style: none;
  overflow: hidden;
  margin: -2em 0 1em 0;
  text-align: center;
}
#column-content ul.image-before-after li:first-child {
  float: left;
  background-color: #000;
  color: #fff;
  line-height: 1em;
  width: 49.9%;
  padding: 20px 0 15px 0;
}
#column-content ul.image-before-after li:last-child {
  float: right;
  background: #000;
  color: #fff;
  line-height: 1em;
  padding: 20px 0 15px 0;
  width: 49.9%;
}

#column-content dl {
  margin: 0 0 1.5em 0;
  padding: 0;
}
#column-content dl dt {
  margin: 1.5em 0 0.7em 0;
  border-bottom: 1px solid #423e39;
  padding-bottom: 0.3em;
}
#column-content dl.no_bdr dt {
  border-bottom: 0px;
}
#column-content dl.no_bdr dd {
  border-bottom: 0px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #999;
}
#column-content dl dd {
  margin: 0;
}

#column-content dl dd dl,
#column-content dl.dl-pattern1,
#column-content dl.dl-pattern2 {
  margin: 1.5em 0;
  background-color: #f6f6f6;
  padding: 0.9em;
}
#column-content dl dd dl dt,
#column-content dl.dl-pattern1 dt,
#column-content dl.dl-pattern2 dt {
  border-bottom: 1px solid #423e39;
  padding-bottom: 0.3em;
  line-height: 1em;
}
#column-content dl dd dl dt {
  margin: 1.3em 0 0.7em 0;
}
#column-content dl dd dl dt:first-child {
  margin: 0.4em 0 0.7em 0;
}
#column-content dl.dl-pattern1 dt,
#column-content dl.dl-pattern2 dt {
  margin: 0 0 0.7em 0;
}

#column-content dl dd dl dd,
#column-content dl.dl-pattern1 dd,
#column-content dl.dl-pattern2 dd {
  margin: 0;
  line-height: 1.8em;
}

@media screen and (min-width: 1200px) {
  #main h1 {
    font-size: 3rem;
    margin: 0 0 33px;
  }
  #column-content h2 {
    font-size: 2.5rem;
    padding: 0 0 11px;
    margin: 57px 0 32px;
  }
  #column-content h3 {
    font-size: 2rem;
    margin: 34px 0 16px;
  }
  #column-content h3.number {
    font-size: 2rem;
    margin: 37px 0 22px;
    line-height: 30px;
    padding-left: calc(30px + 10px);
  }
  #column-content h3.number span {
    font-size: 1.7rem;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  #column-content h4 {
    font-size: 2rem;
    margin: 30px 0 12px;
    font-weight: bold;
  }
  #column-content p {
    font-size: 2rem;
  }
  #column-content p.caption_source {
    font-size: 1.4rem;
    padding-left: 5px;
  }
  #column-content p.caption_source2 {
    font-size: 1.5rem;
    padding-left: 2px;
  }
  #column-content .postscript {
    border: 2px dashed #2d59ce;
    border-radius: 12px;
    background: #e8fdfa;
    padding: 0.8em 1.2em 1em;
  }
  #column-content .postscript span {
    font-size: 80%;
  }
  #column-content figure {
    margin: 0 0 32px;
    max-height: 420px;
    float: left;
  }
  #column-content figure img {
  }
  #column-content ul {
    margin: 1.5em 0;
    clear: both;
  }
  #column-content ul li {
    padding: 0 0 0.5em 1em;
    font-size: 18px;
    text-indent: -1em;
  }
  #column-content ul li:last-child {
    padding-bottom: 0;
  }
  #column-content ul.style-type-none {
    margin: 1.5em 0;
    list-style-type: none;
  }
  #column-content ul.style-type-none li {
    padding: 0;
    text-indent: 0em;
  }
  #column-content ul.style-type-none li p {
    padding: 0 0 0 3px;
  }

  #column-content ol {
    margin: 1.5em 0;
    padding: 0 0 0 1.5em;
    background: #efefef;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    clear: both;
  }
  #column-content .column-space1 ol {
    margin-bottom: 0 !important;
    margin-top: 0.5em !important;
  }
  #column-content ol li {
    padding: 0 0 0.7em 0em;
    margin: 0 0 0 2em;
  }
  #column-content ol li small {
    font-size: 16px;
  }
  #column-content dl dt {
    font-size: 2rem;
  }
  #column-content dl dd {
    font-size: 2rem;
  }
  #column-content dl dd dl dt,
  #column-content dl.dl-pattern1 dt,
  #column-content dl dd dl dd,
  #column-content dl.dl-pattern1 dd {
    font-size: 1.6rem;
  }
  #column-content dl.dl-pattern2 dt,
  #column-content dl.dl-pattern2 dd {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #main h1 {
    font-size: 3rem;
    margin: 0 0 calc(100vw / 1200 * 33);
  }
  #column-content h2 {
    font-size: 2.5rem;
    padding: 0 0 calc(100vw / 1200 * 10);
    margin: calc(100vw / 1200 * 57) 0 calc(100vw / 1200 * 32);
  }
  #column-content h3 {
    font-size: 2rem;
    margin: calc(100vw / 1200 * 34) 0 calc(100vw / 1200 * 16);
  }
  #column-content h3.number {
    font-size: 2rem;
    margin: calc(100vw / 1200 * 37) 0 calc(100vw / 1200 * 22);
    line-height: calc(100vw / 1200 * 35);
    padding-left: calc((30 + 10) * 100vw / 1200);
  }
  #column-content h3.number span {
    font-size: 1.5rem;
    border-radius: calc(100vw / 1200 * 15);
    width: calc(100vw / 1200 * 30);
    height: calc(100vw / 1200 * 30);
    line-height: calc(100vw / 1200 * 30);
  }
  #column-content h4 {
    font-size: 1.8rem;
    margin: calc(100vw / 1200 * 30) 0 calc(100vw / 1200 * 12);
  }
  #column-content p {
    font-size: 2rem;
  }
  #column-content p.caption_source {
    font-size: 1.4rem;
    padding-left: 5px;
  }
  #column-content p.caption_source2 {
    font-size: 1.5rem;
    padding-left: 2px;
  }
  #column-content .postscript {
    border: 2px dashed #2d59ce;
    border-radius: 12px;
    background: #e8fdfa;
    padding: 0.8em 1.2em 1em;
  }
  #column-content figure {
    margin: 0 0 calc(100vw / 1200 * 32);
    max-height: calc(100vw / 1200 * 420);
  }
  #column-content figure img {
  }
  #column-content ul {
    margin: 1.5em 0;
  }
  #column-content ul li {
    padding: 0 0 0.5em 0.4em;
    font-size: 18px;
  }
  #column-content ul li:last-child {
    padding-bottom: 0;
  }
  #column-content ul.style-type-none {
    margin: 1.5em 0;
    list-style-type: none;
  }
  #column-content ul.style-type-none li {
    padding: 0;
    text-indent: 0em;
  }
  #column-content ul.style-type-none li p {
    padding: 0 0 0 3px;
  }
  #column-content ol {
    margin: 1.5em 0;
    padding: 0 0 0 1.5em;
  }
  #column-content .column-space1 ol {
    margin-bottom: 0 !important;
    margin-top: 0.5em !important;
  }
  #column-content ol li {
    padding: 0 0 0.5em 0;
    font-size: 18px;
  }
  #column-content ol li small {
    font-size: 16px;
  }
  #column-content dl dt {
    font-size: 2rem;
  }
  #column-content dl dd {
    font-size: 2rem;
  }
  #column-content dl dd dl dt,
  #column-content dl.dl-pattern1 dt,
  #column-content dl dd dl dd,
  #column-content dl.dl-pattern1 dd {
    font-size: 1.6rem;
  }
  #column-content dl.dl-pattern2 dt,
  #column-content dl.dl-pattern2 dd {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  #main h1 {
    margin: 0 15px 15px;
  }
  #column-content {
    margin: 0 15px;
    font-size: 4.1vw;
    letter-spacing: 0.5px;
    line-height: 1.6em;
    word-break: break-word;
  }
  #column-content h2 {
    margin: 30px 0 15px;
  }
  #column-content h3 {
    margin: 30px 0 15px;
  }
  #column-content h3.number {
    line-height: 30px;
    padding-left: calc(30px + 10px);
  }
  #column-content h3.number span {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  #column-content p {
    font-size: 4.1vw;
    overflow-wrap: break-word;
  }
  #column-content p.caption_source,
  #column-content p.caption_source2 {
    font-size: 1.25rem;
    padding-left: 0;
  }
  #column-content .postscript {
    border: 2px dashed #2d59ce;
    border-radius: 12px;
    background: #e8fdfa;
    padding: 0.8em 1.2em 1em;
  }
  #column-content figure {
    max-height: calc((100vw - 30px) / 850 * 420);
  }
  #column-content figure img {
  }
  #column-content ul {
    margin: 1.5em 0;
  }
  #column-content ul li {
    padding: 0 0 0.5em 0.4em;
  }
  #column-content ul li:last-child {
    padding-bottom: 0;
  }
  #column-content ul.image-before-after {
    margin: -1em 0 1em 0;
  }
  #column-content ul.style-type-none {
    margin: 1.5em 0;
    list-style-type: none;
  }
  #column-content ul.style-type-none li {
    padding: 0;
    text-indent: 0em;
  }
  #column-content ul.style-type-none li p {
    padding: 0 0 0 3px;
  }
  #column-content ol {
    margin: 1.5em 0;
    padding: 0 0 0 1.5em;
  }
  #column-content .column-space1 ol {
    margin-bottom: 0 !important;
    margin-top: 0.5em !important;
  }
  #column-content ol li {
    padding: 0 0 0.5em 0;
  }
  #column-content ol li small {
    font-size: 90%;
  }
}
#column-content > *:first-child {
  margin-top: 0;
}
#column-content .stepsA,
#column-content .stepsB {
  /* 連番カウンター名の定義 */
  counter-reset: chapter;
}
#column-content .stepsB > h3,
#column-content .stepsA > h4 {
  counter-reset: sub-chapter;
}
#column-content .stepsB > h3::before,
#column-content .stepsA > h4::before {
  counter-increment: chapter;
  content: counter(chapter) '. ';
}

/**
 * 記事詳細 SNSエリア
 */
#contents .sns_area {
}
#contents .sns_area ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
}
#contents .sns_area ul li {
}
#contents .sns_area ul li a {
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -300vw;
  overflow: hidden;
}
#contents .sns_area ul li a:hover {
  opacity: 0.8;
}
#contents .sns_area ul li a.twitter {
  background-image: url('../images/common/icon_sns_twitter.png');
}
#contents .sns_area ul li a.facebook {
  background-image: url('../images/common/icon_sns_facebook.png');
}
#contents .sns_area ul li a.hatena {
  background-image: url('../images/common/icon_sns_hatena.png');
}
@media screen and (min-width: 1200px) {
  #contents .sns_area {
    margin: 25px 0;
  }
  #contents .sns_area ul {
    width: 400px;
    margin: 75px auto 54px;
  }
  #contents .sns_area ul li {
  }
  #contents .sns_area ul li.line_li {
    display: none;
  }
  #contents .sns_area ul li a {
    width: 120px;
    height: 40px;
  }
  #contents .sns_area ul li a.twitter {
  }
  #contents .sns_area ul li a.facebook {
  }
  #contents .sns_area ul li a.hatena {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .sns_area {
    margin: calc(100vw / 1200 * 25) 0;
  }
  #contents .sns_area ul {
    width: 400px;
    margin: calc(100vw / 1200 * 75) auto calc(100vw / 1200 * 54);
  }
  #contents .sns_area ul li {
  }
  #contents .sns_area ul li.line_li {
    display: none;
  }
  #contents .sns_area ul li a {
    width: 120px;
    height: 40px;
  }
  #contents .sns_area ul li a.twitter {
  }
  #contents .sns_area ul li a.facebook {
  }
  #contents .sns_area ul li a.hatena {
  }
}
@media screen and (max-width: 767px) {
  #contents .sns_area {
    margin: 25px 15px;
  }
  #contents .sns_area ul {
    width: calc(100vw - 30px);
    max-width: 260px;
    margin: 0 auto;
  }
  #contents .sns_area ul li {
  }
  #contents .sns_area ul li a {
    width: calc((100vw - 30px) / 260 * 40); /* 30px=15px*2=両サイドマージン, 260=ul, 40=アイコン1 */
    height: calc((100vw - 30px) / 260 * 40);
    max-width: 40px;
    max-height: 40px;
  }
  #contents .sns_area ul li a.twitter {
    background-image: url('../images/common/icon_sns_twitter_sp.png');
  }
  #contents .sns_area ul li a.facebook {
    background-image: url('../images/common/icon_sns_facebook_sp.png');
  }
  #contents .sns_area ul li a.line {
    background-image: url('../images/common/icon_sns_line_sp.png');
  }
  #contents .sns_area ul li a.hatena {
    background-image: url('../images/common/icon_sns_hatena_sp.png');
  }
  #contents .sns_area ul li .hatena-bookmark-button-frame {
    width: calc((100vw - 30px) / 260 * 40); /* 30px=15px*2=両サイドマージン, 260=ul, 40=アイコン1 */
    height: calc((100vw - 30px) / 260 * 40);
    max-width: 40px;
    max-height: 40px;
  }
}
/**
 * ヘッダー部分の記事情報エリア
 */
#contents .article_info {
  position: relative;
  background-color: #efefef;
}
#contents .article_info:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 24px;
  left: 20px;
  width: 44px;
  height: 63px;
  background-image: url('../images/common/icon_writer.png');

  background-size: contain;
}
@media screen and (min-width: 1200px) {
  #contents .article_info {
    margin: 40px auto 0;
    /* margin: 40px 150px 0; */
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .article_info {
    margin: 40px auto 0;
    /* margin: calc(15 * 100vw / 1200) calc(150 * 100vw / 1200) 0; */
  }
}
@media screen and (max-width: 767px) {
  #contents .article_info {
    margin: 20px 0;
    width: calc(100vw - 30px);
  }
  #contents .article_info:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 18px;
    width: 40px;
    height: 56px;
    background-image: url('../images/common/icon_writer.png');
    background-size: contain;
  }
}
#contents .writer_name {
  margin: 0;
}
@media screen and (min-width: 768px) {
  #contents .writer_name {
    padding: 20px 80px 3px;
  }
}
@media screen and (max-width: 767px) {
  #contents .writer_name {
    margin: 0px 73px;
    padding: 15px 0 3px;
    width: calc(100vw - 30px);
  }
}
#contents .release_date {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #contents .release_date {
    padding: 0 80px 10px;
  }
  #contents .release_date.single {
    padding: 0 80px 33px;
  }
}
@media screen and (max-width: 767px) {
  #contents .release_date {
    margin: 0px 73px;
    padding-bottom: 10px;
    width: calc(100vw - 30px);
  }
  #contents .release_date.single {
    padding-bottom: 29px;
  }
}

/**
 * ヘッダー部分のSNSエリア
 */
#contents .sns_area_header {
}
#contents .sns_area_header ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
}
#contents .sns_area_header ul li {
}
#contents .sns_area_header ul li a {
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -300vw;
  overflow: hidden;
}
#contents .sns_area_header ul li a:hover {
  opacity: 0.8;
}
#contents .sns_area_header ul li a.twitter {
  background-image: url('../images/common/icon_sns_twitter.png');
}
#contents .sns_area_header ul li a.facebook {
  background-image: url('../images/common/icon_sns_facebook.png');
}
#contents .sns_area_header ul li a.hatena {
  background-image: url('../images/common/icon_sns_hatena.png');
}
@media screen and (min-width: 1200px) {
  #contents .sns_area_header {
    margin: 25px 0;
  }
  #contents .sns_area_header ul {
    width: 400px;
    margin: 75px 160px 54px auto;
  }
  #contents .sns_area_header ul li {
  }
  #contents .sns_area_header ul li.line_li {
    display: none;
  }
  #contents .sns_area_header ul li a {
    width: 120px;
    height: 40px;
  }
  #contents .sns_area_header ul li a.twitter {
  }
  #contents .sns_area_header ul li a.facebook {
  }
  #contents .sns_area_header ul li a.hatena {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .sns_area_header {
    margin: calc(100vw / 1200 * 25) 0;
  }
  #contents .sns_area_header ul {
    width: 400px;
    margin: calc(100vw / 1200 * 75) calc(100vw / 1200 * 160) calc(100vw / 1200 * 54) auto;
  }
  #contents .sns_area_header ul li {
  }
  #contents .sns_area_header ul li.line_li {
    display: none;
  }
  #contents .sns_area_header ul li a {
    width: 120px;
    height: 40px;
  }
  #contents .sns_area_header ul li a.twitter {
  }
  #contents .sns_area_header ul li a.facebook {
  }
  #contents .sns_area_header ul li a.hatena {
  }
}
@media screen and (max-width: 767px) {
  #contents .sns_area_header {
    margin: 25px 15px;
  }
  #contents .sns_area_header ul {
    width: calc(100vw - 30px);
    max-width: 220px;
    margin: 0 0 0 auto;
  }
  #contents .sns_area_header ul li {
  }
  #contents .sns_area_header ul li a {
    width: calc((100vw - 30px) / 260 * 40); /* 30px=15px*2=両サイドマージン, 260=ul, 40=アイコン1 */
    height: calc((100vw - 30px) / 260 * 40);
    max-width: 40px;
    max-height: 40px;
  }
  #contents .sns_area_header ul li a.twitter {
    background-image: url('../images/common/icon_sns_twitter_sp.png');
  }
  #contents .sns_area_header ul li a.facebook {
    background-image: url('../images/common/icon_sns_facebook_sp.png');
  }
  #contents .sns_area_header ul li a.line {
    background-image: url('../images/common/icon_sns_line_sp.png');
  }
  #contents .sns_area_header ul li a.hatena {
    background-image: url('../images/common/icon_sns_hatena_sp.png');
  }
  #contents .sns_area_header ul li .hatena-bookmark-button-frame {
    width: calc((100vw - 30px) / 260 * 40); /* 30px=15px*2=両サイドマージン, 260=ul, 40=アイコン1 */
    height: calc((100vw - 30px) / 260 * 40);
    max-width: 40px;
    max-height: 40px;
  }
}
/**
 * ヘッダー部分のCTAエリア（※特定記事のみGTMで挿入する）
 */
@media screen and (min-width: 1200px) {
  #contents .gtm_cta {
    margin: 40px 45px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .gtm_cta {
    margin: calc(15 * 100vw / 1200) calc(45 * 100vw / 1200) 0;
  }
}
@media screen and (max-width: 767px) {
  #contents .gtm_cta {
    margin: 0px auto;
    width: 100%;
    padding: 0 10px 30px;
  }
}

/**
 * 記事詳細 CVエリア
 */
.cv_area {
  background-color: #f2f7fa;
}
@media screen and (min-width: 1200px) {
  .cv_area {
    margin-bottom: 57px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area {
    margin-bottom: calc(57 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area {
    margin-bottom: 30px;
  }
}
/**
 * 記事詳細 CVエリア section
 */
.cv_area section.cv02 {
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 {
    padding: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 {
    padding: calc(30 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 {
    padding: 15px;
  }
}
/**
 * 記事詳細 CVエリア section タイトル(h2)
 */
.cv_area section.cv02 h2 {
  font-weight: bold;
  color: #0c88ed;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 h2 {
    font-size: 3rem;
    margin: 3px 0 8px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 h2 {
    font-size: calc(30 * 100vw / 1200);
    margin: calc(3 * 100vw / 1200) 0 calc(8 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 h2 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
  }
}
/**
 * 記事詳細 CVエリア section サブタイトル
 */
.cv_area section.cv02 .sub_title {
  background-color: #0c88ed;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .sub_title {
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .sub_title {
    height: calc(35 * 100vw / 1200);
    line-height: calc(35 * 100vw / 1200);
    font-size: calc(20 * 100vw / 1200);
    margin-bottom: calc(20 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .sub_title {
    font-size: 2rem;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 0;
    width: 100vw;
    margin-left: -15px;
  }
}
/**
 * 記事詳細 CVエリア section ボタンエリア
 */
.cv_area section.cv02 .buttons_area {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .buttons_area {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .buttons_area {
    margin-bottom: calc(20 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .buttons_area {
    flex-wrap: wrap;
  }
}
/**
 * 記事詳細 CVエリア section ボタンエリア li
 */
.cv_area section.cv02 .buttons_area li {
  display: inline-block;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .buttons_area li {
    width: calc((790px - 30px) / 2);
    height: calc((790px - 30px) / 2 * 106 / 380);
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .buttons_area li {
    width: calc(((790 - 30) * 100vw / 1200) / 2);
    height: calc(((790 - 30) * 100vw / 1200) / 2 * 106 / 380);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .buttons_area li {
    width: calc(100vw - 30px);
    height: calc((100vw - 30px) * 106 / 380);
    margin-bottom: 15px;
  }
}
/**
 * 記事詳細 CVエリア section ボタンエリア li a
 */
.cv_area section.cv02 .buttons_area li a {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 1px;
  overflow: hidden;
  outline: none;
  text-indent: -300vw;
  cursor: pointer;
}
.cv_area section.cv02 .buttons_area li a:hover {
  opacity: 0.8;
}
.cv_area section.cv02 .buttons_area li a.tel {
  background-image: url('../images/common/cv02_tel_380x106.png');
}
.cv_area section.cv02 .buttons_area li a.contact {
  background-image: url('../images/common/cv02_contact_380x106.png');
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .buttons_area li a {
    width: calc((790px - 30px) / 2);
    height: calc((790px - 30px) / 2 * 106 / 380);
  }
  .cv_area section.cv02 .buttons_area li a.tel {
  }
  .cv_area section.cv02 .buttons_area li a.contact {
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .buttons_area li a {
    width: calc(((790 - 30) * 100vw / 1200) / 2);
    height: calc(((790 - 30) * 100vw / 1200) / 2 * 106 / 380);
  }
  .cv_area section.cv02 .buttons_area li a.tel {
  }
  .cv_area section.cv02 .buttons_area li a.contact {
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .buttons_area li a {
    width: calc(100vw - 30px);
    height: calc((100vw - 30px) * 106 / 380);
  }
  .cv_area section.cv02 .buttons_area li a.tel {
  }
  .cv_area section.cv02 .buttons_area li a.contact {
  }
}
/**
 * 記事詳細 CVエリア section 説明文エリア
 */
.cv_area section.cv02 .description_area {
  background-color: #ffffff;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .description_area {
    padding: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .description_area {
    padding: calc(20 * 100vw / 1200);
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .description_area {
    padding: 15px;
  }
}
/**
 * 記事詳細 CVエリア section 説明文エリア 説明文
 */
.cv_area section.cv02 .description_area .description {
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .description_area .description {
    margin-bottom: 15px;
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .description_area .description {
    margin-bottom: calc(15 * 100vw / 1200);
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .description_area .description {
    margin-bottom: 15px;
    font-size: 1.3rem;
  }
}
/**
 * 記事詳細 CVエリア section 説明文エリア ボタン
 */
.cv_area section.cv02 .description_area a {
  display: block;
  font-weight: bold;
  color: #ffffff;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../images/common/btn_02_cyangreen_300x66.png');
  text-align: center;
  cursor: pointer;
}
.cv_area section.cv02 .description_area a:hover {
  opacity: 0.8;
  text-decoration: none;
}
@media screen and (min-width: 1200px) {
  .cv_area section.cv02 .description_area a {
    width: 300px;
    height: 66px;
    line-height: 60px;
    font-size: 2rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .cv_area section.cv02 .description_area a {
    width: calc(300 / 1200 * 100vw);
    height: calc(66 / 1200 * 100vw);
    line-height: calc(60 / 1200 * 100vw);
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .cv_area section.cv02 .description_area a {
    width: 300px;
    height: 66px;
    line-height: 60px;
    font-size: 2rem;
  }
}
/**
 * 記事詳細 関連記事
 */

#main .relative_columns {
  padding-top: 4em;
}
#main .relative_columns h2 {
  font-weight: normal;
  border-bottom: 1px solid #423e39;
  color: #423e39;
}
@media screen and (min-width: 1200px) {
  #main .relative_columns {
  }
  #main .relative_columns h2 {
    font-size: 1.8rem;
    padding-bottom: 8px;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #main .relative_columns {
  }
  #main .relative_columns h2 {
    font-size: 1.8rem;
    padding-bottom: calc(100vw / 1200 * 8);
    margin-bottom: calc(100vw / 1200 * 30);
  }
}
@media screen and (max-width: 767px) {
  #main .relative_columns {
  }
  #main .relative_columns h2 {
    padding: 0 0 0 0;
    margin-left: 15px;
  }
}

/**
 * 記事詳細 2カラム(画像+テキスト)
 */
#column-content .column_flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#column-content .column_img {
  width: 45%;
}
#column-content .column_text {
  width: 55%;
}

#column-content .column_img,
#column-content .column_text {
  margin-left: 20px;
}
#column-content .column_img:first-child,
#column-content .column_text:first-child {
  margin-left: 0px;
}

#column-content .column_text_border {
  margin: 0 20px;
  padding: 15px;
  border: 1px solid #999;
}

#column-content .column_flex_after {
  padding-top: 34px;
}

@media screen and (max-width: 768px) {
  #column-content .column_flex {
    display: block;
    max-width: 100%;
    margin: 0 auto;
  }
  #column-content .column_flex .column_img img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  #column-content .column_img {
    width: 100%;
    margin-bottom: 10px;
  }
  #column-content .column_text {
    width: 100%;
  }
  #column-content .column_img,
  #column-content .column_text {
    margin-left: 0px;
  }
  #column-content .column_text_border {
    margin: 0;
  }
  .column_img:first-child,
  .column_text:first-child {
    margin-left: 0px;
  }
  #column-content .column_flex_after {
    padding-top: 0px;
  }
}

#column-content .column_note {
  font-size: 16px;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) and (max-width: 1119px) {
  #column-content .column_note {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  #column-content .column_note {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/**
 * 記事詳細 2カラム(画像+画像 中央余白40px)
 */
@media screen and (min-width: 1200px) {
  #column-content .column_flex .two_column {
    width: 405px;
  } /* (850px-40px)/2 = 405px */
}
@media screen and (max-width: 1199px) and (min-width: 768px) {
  #column-content .column_flex .two_column {
    width: calc(100vw / 1200 * 405);
  } /* (850px-40px)/2 = 405px */
}
@media screen and (max-width: 768px) {
  #column-content .column_flex .two_column {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  #column-content .column_flex .two_column img {
    width: 100%;
    display: block;
    margin: 40px auto 0;
  }
}
/*2カラム内　画像サイズ*/
@media screen and (min-width: 1200px) {
  #column-content .column_flex .two_column figure {
    margin: 0 0 20px; /*32px→20px*/
    max-height: none; /*420pxの制限を解除する*/
  }
  #column-content .column_flex .two_column figure img {
    margin-top: 0; /*自動縦中央寄せを解除する*/
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #column-content .column_flex .two_column figure {
    margin: 0 0 calc(100vw / 1200 * 20);
    max-height: none;
  }
  #column-content .column_flex .two_column figure img {
    margin-top: 0;
  }
}
@media screen and (max-width: 767px) {
  #column-content .column_flex .two_column figure {
    max-height: none;
  }
  #column-content .column_flex .two_column figure img {
    margin-top: 0;
  }
}

/*ラベル　次世代住宅ポイント制度で使用*/
#column-content .rabel_kaji {
  background-color: #ffa200;
  color: #fff;
  padding: 0 10px;
} /*家事ラク*/
#column-content .rabel_eco {
  background-color: #40b77b;
  color: #fff;
  padding: 0 10px;
} /*エコ*/
#column-content .rabel_barrier {
  background-color: #2b8ee1;
  color: #fff;
  padding: 0 10px;
} /*バリアフリー*/

/*リスト内　外部リンクアイコン位置調整*/
#column-content ul li i.fas {
  text-indent: 0rem;
}

/*h2内spanの文字サイズを指定（PCのみ）*/
@media screen and (min-width: 1200px) {
  #column-content h2 span.PCfs20 {
    font-size: 20px;
    font-size: 2rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #column-content h2 span.PCfs20 {
  }
}
@media screen and (max-width: 767px) {
  #column-content h2 span.PCfs20 {
  }
}

/**
 * 記事詳細 表・スペース
 */

.column-bold {
  font-family: 'UD新ゴ DB', 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W6', HiraKakuProN-W6;
}

.column-space1 {
  background-color: #f6f6f6;
  margin: 2em 0 0 0 !important;
  padding: 1em !important;
}
.column-space1 h3 {
  margin: 0 !important;
  padding: 0 0 0.5em 0;
  font-size: 1.8rem !important;
}
.column-space1 p {
  margin: 0;
  font-size: 1.8rem !important;
}

.column-space2 {
  background-color: #f6f6f6;
  margin: 2em 0 !important;
  padding: 1em !important;
}

.column-space2 dt {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.8rem !important;
}
.column-space2 dd blockquote {
  margin: 0 !important;
}
.column-space2 dd cite {
  display: inline-block !important;
  margin: 1em 0 0 0 !important;
  font-style: normal !important;
  font-size: 1.6rem !important;
}

.column-space1 .column-space3,
.column-space2 dd .column-space3 {
  margin: 0 !important;
  padding: 0 !important;
}

.column-space1 .column-space3 dt,
.column-space2 dd .column-space3 dt {
  margin: 1em 0 0 !important;
  padding: 0 0 0.4em 0 !important;
  border-bottom: 1px solid #423e39 !important;
  font-size: 1.8rem !important;
}

.column-space1 .column-space3 dd,
.column-space2 dd .column-space3 dd {
  margin: 0.5em 0 0 0 !important;
  font-size: 1.8rem !important;
}

.column-space4 dt span {
  background-color: #007eca !important;
  margin: 0 0 0 1em !important;
  padding: 0 0.3em !important;
  color: #ffffff !important;
}

.column-mb {
  margin: 0 0 2em 0 !important;
}

.column-pt {
  padding-top: 15px;
}

.column-dl-btn {
  text-align: center;
  padding: 15px 0;
}

ol.bt-sp-no {
  margin: 1.5em 0 0 !important;
}
ul.list-alignment {
  padding: 0 0 0.5em 1em !important;
  text-indent: -1em !important;
}

small.column-small {
  font-size: 90% !important;
}

@media screen and (max-width: 767px) {
  .column-space1 h3,
  .column-space1 p,
  .column-space2 dt,
  .column-space1 .column-space3 dt,
  .column-space1 .column-space3 dd,
  .column-space2 dd .column-space3 dt,
  .column-space2 dd .column-space3 dd {
    font-size: 1.4rem !important;
  }
  .column-space2 dd cite {
    font-size: 1.2rem !important;
  }
}

/**
 * 記事詳細 比較表
 */

table.column-table1 {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  table: fixed;
}
table.column-table1 caption {
  caption-side: top;
  color: #423e39;
  text-align: center;
  font-family: 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ W3 JIS2004', 'Hiragino Kaku Gothic W3 JIS2004';
}

table.column-table1 tr {
  background-color: #fafafa;
  padding: 0.35em;
  border-bottom: 2px solid #fff;
}
table.column-table1 th,
table.column-table1 td {
  padding: 1em 10px 1em 1em;
  border-right: 2px solid #fff;
}
table.column-table1 tbody th {
  background: #075eac;
  color: #fff;
  font-family: 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ W3 JIS2004', 'Hiragino Kaku Gothic W3 JIS2004';
  font-weight: bold;
}
.column-td1,
.column-td3 {
  font-size: 0.85em;
  color: #423e39;
}
.column-td2,
.column-td4 {
  color: #075eac;
  font-weight: bold;
}
.column-td3,
.column-td4 {
  background: #e1eefa;
}
.column-td4 {
  font-family: 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W6', 'HiraKakuProN-W6', 'ヒラギノ角ゴ W3 JIS2004', 'Hiragino Kaku Gothic W3 JIS2004';
}
@media screen and (max-width: 767px) {
  table.column-table1 {
    border: 0;
    width: 100%;
  }
  table.column-table1 caption {
    background-color: #075eac;
    color: #fff;
    padding: 10px;
    margin-bottom: 7px;
  }

  table.column-table1 th {
    background-color: #075eac;
    display: block;
    border-right: none;
  }
  table.column-table1 tr {
    display: block;
    margin-bottom: 7px;
  }
  table.column-table1 tr.column-table-th {
    display: none;
  }
  table.column-table1 td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: 0.8em;
    text-align: right;
    position: relative;
    padding: 0.625em 0.625em 0.625em 4em;
    border-right: none;
  }

  table.column-table1 td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #075eac;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', HelveticaNeue, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN W3', HiraKakuProN-W3, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3 JIS2004', 'Hiragino Kaku Gothic W3 JIS2004', 'Segoe UI', '游ゴシック体', YuGothic, 'Yu Gothic M', '游ゴシック Medium', 'Yu Gothic Medium', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  }
  table.column-table1 td:last-child {
    border-bottom: 0;
  }
  table.column-table1 tbody th {
    color: #fff;
  }
  table.column-table1 td.column-td3 {
    display: none;
  }
}

table.column-table2 {
  border-collapse: collapse;
  width: 800px;
  margin-bottom: 5px;
}

table.column-table2 th {
  border: 1px solid #999;
  background-color: #ddd;
  padding: 3px 3px 3px 5px;
}

table.column-table2 th.products {
  width: 30%;
}

table.column-table2 th.series {
  width: 35%;
}

table.column-table2 th.item {
  width: 35%;
}

table.column-table2 tr {
  border: 1px solid #999;
}

table.column-table2 td {
  border: 1px solid #999;
  padding: 3px 3px 3px 5px;
}

@media screen and (max-width: 767px) {
  table.column-table2 {
    width: 100%;
  }
}

/**
 * column7483
 */

@media screen and (min-width: 1200px) {
  .column7483_mb50 {
    margin-bottom: 50px !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .column7483_mb50 {
    margin-bottom: 50px !important;
  }
}
@media screen and (max-width: 767px) {
  .column7483_mb50 {
    margin-bottom: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .column7483_mb40 {
    margin-top: 40px !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .column7483_mb40 {
    margin-top: 40px !important;
  }
}
@media screen and (max-width: 767px) {
  .column7483_mb40 {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .column7483_mtb30sp {
    margin-top: 0 !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .column7483_mtb30sp {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  .column7483_mtb30sp {
    margin: 30px 0 40px !important;
  }
}

#column-content .column-notes {
  background-color: #f6f6f6 !important;
  padding: 0.9em 0.9em 0.3em !important;
  margin-top: 2em !important;
}

#column-content .column-notes p {
  border-block-color: #f6f6f6 !important;
  font-size: 1em !important;
}

.column-space5 h4 {
  margin: 20px 0 0 !important;
  padding: 0 0 0.5em 0;
  font-size: 1.8rem !important;
}
.column-space5 p {
  margin: 0;
  font-size: 1.8rem !important;
}

#column-content .before-after {
  overflow: hidden;
}

#column-content .before-after .before,
#column-content .before-after .after {
  width: 49.6%;
}
#column-content .before-after .before {
  float: left;
}
#column-content .before-after .after {
  float: right;
}

#column-content .before-after .before .image-before-after,
#column-content .before-after .after .image-before-after {
  border: none;
  margin: 0;
  padding: 0;
}
#column-content .before-after .before .before-after-label,
#column-content .before-after .after .before-after-label {
  background-color: #000;
  color: #fff;
  line-height: 1em;
  padding: 20px 0 15px 0;
  text-align: center;
}
#column-content .before-after .before dd dl,
#column-content .before-after .after dd dl {
  margin: 0;
}

@media screen and (max-width: 767px) {
  #column-content .before-after .before,
  #column-content .before-after .after {
    width: 100%;
    float: none;
  }
  #column-content .before-after .before .before-after-label,
  #column-content .before-after .after .before-after-label {
    font-size: 18px;

    font-size: 1.8rem;
  }
}

/* =======================================================================================================
 2021.09.17 追加CSS
================================= =====================================================================*/
.is-column .breadcrumbs_dummy {
  display: none;
}
.is-column .main .title_area h1 {
  margin: 0;
}
.isbody-column .sec01 {
  background: #e4f2ff;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-top: -20px;
}
.isbody-column .detail_new .sec01 {
  background: none;
}
.isbody-column .sec01 .flex_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 20px;
}
.isbody-column .sec01 .flex_box .left_box {
  width: 700px;
  padding-top: 20px;
}
.isbody-column .sec01 .flex_box .left_box p {
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
}
.isbody-column .sec01 .flex_box .right_box {
  width: 25%;
}
.isbody-column .sec01 .flex_box .right_box p {
  margin-bottom: 0;
}

.isbody-column .cv-area {
  position: relative;
  background-image: url(../images/column/cv-bg-pc.png);
  background-repeat: no-repeat;
  width: 980px;
  height: 204px;
  display: flex;
  margin: 10px auto 10px;
  background-size: 980px 204px;
}
.isbody-column .cv-area .btn-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30px;
  position: absolute;
  bottom: 0px;
}
.isbody-column .cv-area .btn-box a {
  margin: 1%;
}
.isbody-column .cv-area img {
  height: auto;
  width: auto;
  margin: 0 auto 0vmin;
  padding-bottom: 0.5vw;
}
.is-column.inner {
  width: 980px;
  margin: auto;
}
.isbody-column .totop.inner {
  width: 1200px;
  margin: auto;
}
.isbody-column .sec01 {
  background: #e4f2ff;
  padding-top: 10px;
  padding-bottom: 0px;
  margin-top: -20px;
}
.isbody-column .sec01 .inner {
  max-width: 980px;
  margin: 0 auto;
}
.isbody-column .sec01 .flex_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 20px;
}
.isbody-column .sec01 .flex_box .left_box {
  width: 1100px;
  padding-top: 20px;
  padding-bottom: 40px;
}
.isbody-column .sec01 .flex_box .left_box p {
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
}
.isbody-column .sec01 .flex_box .right_box {
  width: 25%;
}
.isbody-column .sec01 .flex_box .right_box p {
  margin-bottom: 0;
}
.is-column .contents-inner.has-side main#main {
  width: 730px;
}
.is-column .main .mainTitle {
  margin: 0;
  padding: 20px 0 40px;
}
.is-column .contents_box {
  background: #f5f8fa;
  border: 1px solid #005eae;
  width: 980px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}
.is-column .contents_box .title {
  color: #005eae;
  font-size: 28px;
  border-bottom: 1px solid #005eae;
  padding-bottom: 10px;
  font-weight: 600;
  margin-bottom: 20px;
}
.is-column .contents_box .title span {
  font-size: 24px;
  color: #005eae;
  display: block;
  font-weight: 600;
}
.is-column .contents_box .txt {
  margin-bottom: 15px;
  line-height: 1.8;
}
.is-column .contents_box .img {
  text-align: center;
}
.is-column .service {
  margin-top: 50px;
}
#contents.is-column {
  margin-top: 60px;
}

.isbody-column .cv-area--footer {
  margin-top: 50px;
}

@media screen and (max-width: 767px) {
  .isbody-column .inner {
    width: auto;
    margin: auto;
  }
  .isbody-column .sec01 {
    padding-top: 3vmin;
    padding-bottom: 7vmin;
    margin-bottom: 5vmin;
    position: relative;
  }
  .isbody-column .sec01 .flex_box {
    width: 94%;
    margin: auto;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .isbody-column .sec01 .flex_box .left_box {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .isbody-column .sec01 .flex_box .left_box p {
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
  }
  .isbody-column .sec01 .flex_box .right_box {
    width: 30%;
  }
  .is-column .contents-inner.has-side main#main {
    width: 100%;
  }
  .isbody-column .contents_box {
    width: 90%;
    margin-top: 10vmin;
    margin-bottom: 5vmin;
  }
  .isbody-column .cv-area {
    background-image: url(../images/column/cv-bg-sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 70vw;
    position: relative;
    margin: auto;
    margin-bottom: 5vw;
    padding-top: 0;
  }
  .isbody-column .cv-area img {
    padding-bottom: 2.5vw;
  }
  .isbody-column .cv-area .btn-box {
    display: block !important;
    width: 89% !important;
    padding: 0 0;
    position: absolute;
    bottom: 5vmin;
    left: 4.5vmin;
  }
  .is-column .contents_box .title {
    font-size: 5vmin;
  }
  .is-column .contents_box .title span {
    font-size: 4vmin;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .is-column .inner {
    width: auto;
    margin: auto;
    max-width: 96%;
  }
  .is-column .totop.inner {
    width: auto;
    margin: auto;
    max-width: 96%;
  }
  .isbody-column .sec01 {
    position: relative;
    padding-top: 5vmin;
    padding-bottom: 5vmin;
    margin-top: -20px;
    margin-bottom: 5vmin;
  }
  .isbody-column .sec01 .flex_box {
    width: auto;
  }
  .isbody-column .sec01 .flex_box .left_box {
    width: 95%;
  }
  .isbody-column .sec01 .flex_box .right_box {
    width: 25%;
  }
  .is-column .cv-area {
    background-image: url(../images/column/cv-bg-pc.png);
    margin-bottom: 10px;
    background-size: 100%;
    margin-top: 20px;
    width: 96%;
  }
  .is-column .contents-inner.has-side main#main {
    width: calc(100vw / 1200 * 850);
  }
  .is-column .contents_box {
    width: 98%;
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  .isbody-column .sec01 .flex_box .right_box {
    width: 25%;
  }
  .isbody-column .sec01 .flex_box .left_box {
    width: 95%;
  }
}

@media screen and (min-width: 768px) and (max-width: 800px) {
  .isbody-column .cv-area .btn-box {
    bottom: 8vmin;
  }
}
@media screen and (min-width: 801px) and (max-width: 850px) {
  .isbody-column .cv-area .btn-box {
    bottom: 6vmin;
  }
}
@media screen and (min-width: 851px) and (max-width: 900px) {
  .isbody-column .cv-area .btn-box {
    bottom: 5vmin;
  }
}
@media screen and (min-width: 901px) and (max-width: 950px) {
  .isbody-column .cv-area .btn-box {
    bottom: 4vmin;
  }
}
@media screen and (min-width: 951px) and (max-width: 1000px) {
  .isbody-column .cv-area .btn-box {
    bottom: 3vmin;
  }
}

.pc {
  display: block;
}
.sp {
  display: none;
}

/* =======================================================================================================
 記事詳細　追加CSS
================================= =====================================================================*/

#contents.is-detail.inner {
  width: 980px;
  margin: auto;
}
#contents.is-detail .sec01 {
  margin-top: 40px;
  margin-bottom: 50px;
}
#contents.is-detail .sec01 .flex_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 980px;
  margin: auto;
}
#contents.is-detail .sec01 .flex_box .left_box {
  width: 470px;
  padding-top: 0;
}
#contents.is-detail .sec01 .flex_box .right_box {
  width: 475px;
}
#contents.is-detail .sec01 .flex_box .right_box h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}
#contents.is-detail .sec01 .flex_box .right_box p.txt {
  font-size: 18px;
  line-height: 1.8;
}
.detail_new .contents-inner.has-side {
  padding: 0;
}
.detail_new .contents-inner.has-side main#main {
  width: 100%;
  margin: auto;
}
.detail_new #column-content h2 {
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  border: none;
  border-left: 8px solid #fae92c;
  padding: 15px;
  background-color: #003664;
  margin-bottom: 30px;
  clear: both;
}
.detail_new #column-content h3 {
  font-size: 20px;
  color: #005eae;
  border-bottom: 1px solid #005eae;
  padding-bottom: 15px;
  margin-bottom: 20px;
  clear: both;
  font-weight: 600;
}
.detail_new .img_flex {
  margin-bottom: 30px;
  display: block;
  margin-top: 30px;
}

/**
 * コンテンツヘッダ 内部 タグエリア
 */

#contents.is-detail .tag_area ul {
}
#contents.is-detail .tag_area ul li {
  display: inline-block;
}
#contents.is-detail .tag_area ul li a,
#contents.is-detail .tag_area ul li span {
  border: 2px solid #ccc;
  color: #323232;
  display: inline-block;
}
#contents.is-detail .tag_area ul li a:hover {
  opacity: 0.8;
  text-decoration: none;
}
#contents.is-detail .tag_area ul li .cat-toilet {
  border: 2px solid #0c88ed;
  background-color: #0c88ed;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-bathroom {
  border: 2px solid #f56133;
  background-color: #f56133;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-kitchen {
  border: 2px solid #fa9519;
  background-color: #fa9519;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-washroom {
  border: 2px solid #0cbced;
  background-color: #0cbced;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-interior {
  border: 2px solid #a67232;
  background-color: #a67232;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-exterior {
  border: 2px solid #27d9b5;
  background-color: #27d9b5;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-waterworks {
  border: 2px solid #0c88ed;
  background-color: #0c88ed;
  color: #ffffff;
}
#contents.is-detail .tag_area ul li .cat-electricity {
  border: 2px solid #999999;
  background-color: #999999;
  color: #ffffff;
}

#contents.is-detail .tag_area ul li .cat-waterheater {
  border: 2px solid #ff7608;
  background-color: #ff7608;
  color: #ffffff;
}

@media screen and (min-width: 1200px) {
  #contents.is-detail .tag_area {
    margin-top: 40px;
  }
  #contents.is-detail .tag_area ul {
    margin: 0;
  }
  #contents.is-detail .tag_area ul li {
  }
  #contents.is-detail .tag_area ul li a,
  #contents.is-detail .tag_area ul li span {
    height: 24px;
    line-height: calc(24px - 2px);
    border-radius: 12px;
    font-size: 1.6rem;
    padding: 0 2.3rem;
    margin: 0 12px 12px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #contents.is-detail .tag_area {
    margin: 0;
  }
  #contents.is-detail .tag_area ul {
    margin: 0;
  }
  #contents.is-detail .tag_area ul li {
  }
  #contents.is-detail .tag_area ul li a,
  #contents.is-detail .tag_area ul li span {
    height: calc(100vw / 1200 * 24);
    line-height: calc(100vw / 1200 * 24 - 2px);
    border-radius: calc(100vw / 1200 * 12);
    font-size: 1.6rem;
    padding: 0 2.3rem;
    margin: 0 calc(100vw / 1200 * 12) calc(100vw / 1200 * 12) 0;
  }
}
@media screen and (max-width: 767px) {
  #contents.is-detail.inner {
    width: 100%;
  }
  #contents.is-detail .tag_area {
    margin: 0;
    padding: 0 0 15px;
  }
  #contents.is-detail .tag_area ul {
  }
  #contents.is-detail .tag_area ul li {
  }
  #contents.is-detail .tag_area ul li a,
  #contents.is-detail .tag_area ul li span {
    height: 24px;
    line-height: calc(24px - 2px);
    border-radius: 12px;
    font-size: 1.2rem;
    padding: 0 1rem;
    margin: 0 10px 10px 0;
  }
  .detail_new .img_flex {
    width: auto;
    float: none;
    margin-bottom: 30px;
    margin-right: 0px;
  }
  .detail_new #column-content h2 {
    font-size: 2rem;
  }
}

#contents.is-detail .inner {
  width: 980px;
  margin: auto;
}
#contents.is-detail section .inner p {
  line-height: 1.8;
}
#contents.is-detail .c-blueLabel {
  padding: 15px;
  background-color: #003664;
  margin-bottom: 30px;
}
#contents.is-detail section {
  margin-bottom: 80px;
}
#contents.is-detail .c-blueLabel-item {
  padding-left: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  border-left: 8px solid #fae92c;
}
#contents.is-detail .sec02 h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
  position: relative;
  border: none;
  margin-top: 0;
  color: #000;
  padding: 0;
  background: none;
}
#contents.is-detail .sec02 h2::after {
  content: '';
  position: absolute;
  border-top: 2px solid #005eae;
  width: 920px;
  top: 10px;
  right: 0;
}
#contents.is-detail .sec02 .page_link {
  width: 92%;
  margin: auto;
}
#contents.is-detail .sec02 .page_link ol,
.sec02 .page_link ol li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: no-repeat;
}
#contents.is-detail .sec02 .page_link ol li {
  margin-bottom: 15px;
}
#contents.is-detail .sec02 .page_link ol li::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-right: 25px;
  width: 12px;
  height: 12px;
  border: 2px solid;
  border-color: transparent transparent #018de2 #018de2;
  transform: rotate(-45deg);
}
#contents.is-detail .sec02 .page_link ol li a {
  text-decoration: underline;
  color: #333333;
  font-size: 18px;
}

#contents.is-detail .sec03 .flex_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 50px;
}
#contents.is-detail .sec03 .flex_box .left_box {
  width: 470px;
}
#contents.is-detail .sec03 .flex_box .right_box {
  width: 475px;
}
#contents.is-detail .sec03 .flex_box .right_box p.txt {
  font-size: 18px;
  line-height: 1.8;
}
#contents.is-detail .point {
  margin-bottom: 30px;
}
#contents.is-detail .point .title {
  font-size: 20px;
  color: #005eae;
  border-bottom: 1px solid #005eae;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
#contents.is-detail .point .title::before {
  content: '1';
  background: #4897db;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
}
#contents.is-detail .point.point02 .title::before {
  content: '2';
  background: #4897db;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
}
#contents.is-detail .point.point03 .title::before {
  content: '3';
  background: #4897db;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
}
#contents.is-detail section p.txt:nth-of-type(1) {
  margin-bottom: 30px;
}
#contents.is-detail .bg-gray {
  background: #efefef;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
}
#contents.is-detail .bg-gray li {
  margin-bottom: 10px;
}
#contents.is-detail .txt_link {
  display: block;
  color: #005eae;
}
#contents.is-detail .txt_link::before {
  content: '>';
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  color: #005eae;
}
#contents.is-detail .bg-gray.writing {
  padding-top: 15px;
  padding-bottom: 15px;
}
#contents.is-detail .bg-gray.writing .flex_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
#contents.is-detail .bg-gray.writing .flex_box .left_box {
  margin-right: 20px;
}
#contents.is-detail .bg-gray.writing .flex_box p {
  margin: 0;
}
#main .relative_columns h2 {
  margin-bottom: 30px;
  color: #423e39;
  border-left: 5px solid #005eae;
  padding-left: 10px;
  font-weight: 700;
  line-height: 1.8;
  border-bottom: none;
  font-size: 2rem;
  padding-bottom: 0;
}
#column-list {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  flex-wrap: wrap;
}
.is-column.is-detail #column-list li {
  width: calc((100% - 20px) / 2);
  margin: 0 0 40px;
}
#column-list li a {
  text-decoration: none;
  width: 100%;
}
#column-list li dl {
  width: 100%;
}
#column-list li dl dt {
  margin-bottom: 5px;
  width: 100%;
}
#column-list li dl dt figure {
  margin: 0;
  width: 100%;
}
#column-list li dl dt figure figcaption {
  margin: 10px 0 0;
  font-size: 1.8rem;
  color: #323232;
}
#column-list li dl dd.tag {
  margin: 0;
}
#column-list li dl dd.tag .tag {
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  padding: 0 2.3rem;
  font-size: 1.5rem;
  margin-right: 10px;
  text-decoration: none;
  display: inline-block;
}
#column-list li dl dd.tag .tag.cat-toilet {
  background-color: #0c88ed;
  color: #ffffff;
}
#contents .sns_area {
  margin: 25px 0;
}
#contents .sns_area ul {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  width: 400px;
  margin: 75px auto 54px;
}
#contents .sns_area ul li a.twitter {
  background-image: url(https://www.qracian.co.jp/wp-content/themes/qracian/images/common/icon_sns_twitter.png);
}
#contents .sns_area ul li a.facebook {
  background-image: url(https://www.qracian.co.jp/wp-content/themes/qracian/images/common/icon_sns_facebook.png);
}
#contents .sns_area ul li.line_li {
  display: none;
}
#contents .sns_area ul li a {
  width: 120px;
  height: 40px;
  display: inline-block;
  border: none;
  cursor: pointer;
  outline: none;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -300vw;
  overflow: hidden;
}
#contents .sns_area ul {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#contents .sns_area ul li {
  margin-right: 30px;
}
#contents .sns_area ul li:last-child {
  margin-right: 0vmin;
}
/*.is-column .cv-area {
    background-image: url(../img/cv-bg-pc.png);
    height: 204px;
    background-size: 980px 204px;
    margin-top: 20px;
}
.is-column .cv-area .btn-box {
    bottom: 10px;
}*/

@media screen and (max-width: 767px) {
  #contents.is-detail .sec01 .flex_box {
    width: 94%;
    margin: auto;
    padding-top: 3vmin;
  }
  #contents.is-detail .sec01 .flex_box .left_box {
    width: auto;
    margin-bottom: 5vmin;
  }
  #contents.is-detail .sec01 .flex_box .left_box h1 {
    font-size: 5vmin;
    margin-bottom: 5vmin;
    line-height: 1.5;
    font-weight: 700;
  }
  #contents.is-detail .sec01 .flex_box .right_box {
    width: auto;
  }
  #contents.is-detail .sec01 {
    margin-top: 0vmin;
    margin-bottom: 5vmin;
    padding-bottom: 0;
  }
  #contents.is-detail .inner {
    width: auto;
    margin: auto;
  }
  #contents.is-detail .sec02 h2 {
    margin-bottom: 15px;
  }
  #contents.is-detail .sec02 h2::after {
    width: 70vmin;
  }
  #contents.is-detail .sec02 .page_link {
    width: auto;
    margin: auto;
  }
  #contents.is-detail .sec02 .page_link ol li a {
    font-size: 1.8rem;
    /* font-size: 12px; */
  }
  #contents.is-detail .sec02 .page_link ol li {
    margin-bottom: 0px;
  }
  #contents.is-detail .sec01 .flex_box .right_box p.txt {
    font-size: 1.8rem;
    /* font-size: 12px; */
  }
  #contents.is-detail .sec03 .flex_box .right_box p.txt {
    font-size: 12px;
  }
  #contents.is-detail section .inner p {
    font-size: 12px;
  }
  #contents.is-detail .bg-gray li {
    font-size: 12px;
  }
  #contents.is-detail .txt_link {
    font-size: 12px;
  }
  #contents.is-detail section {
    margin-bottom: 8vmin;
  }
  #contents.is-detail .sec02 {
    margin-top: 0vmin;
  }
  #contents.is-detail .sec03 .flex_box {
    margin-bottom: 5vmin;
  }
  #contents.is-detail .bg-gray {
    padding-top: 5vmin;
    padding-bottom: 5vmin;
    padding-left: 3vmin;
    padding-right: 3vmin;
  }

  .is-column.is-detail #column-list li {
    width: 100%;
    margin: 0 0 40px;
  }

  #contents .sns_area ul {
    width: 90%;
    margin: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;

    -ms-flex-pack: center;
    justify-content: center;
  }
  #contents .sns_area ul li {
    margin-right: 5vmin;
  }
  #contents .sns_area ul li:last-child {
    margin-right: 0vmin;
  }
  #contents.is-detail .sec03 .flex_box .left_box {
    width: auto;
  }
  #contents.is-detail .sec03 .flex_box .right_box {
    width: auto;
    margin-top: 5vmin;
  }
  #contents.is-detail .bg-gray ol {
    padding-left: 5vmin;
  }
  #contents.is-detail .c-blueLabel-item {
    font-size: 5vmin;
  }
  #contents.is-detail .sec02 .page_link ol li::before {
    margin-right: 15px;
  }
}

.isbody-column.isbody-detail .title_area + .sec01 {
  display: none;
}

/* =======================================================================================================
 コラムCTA変更用（2024/04/18）
================================= =====================================================================*/

.isbody-column .finished_reading {
  margin-bottom: 0;
}

.isbody-column .cv-area02 {
  position: relative;
  background-color: #e4f2ff;
  width: 980px;
  height: 204px;
  margin: 10px auto 10px;
  padding: 15px 10px;
  text-align: center;
}
.isbody-column .cv-area02 .btn-box02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
.isbody-column .cv-area02 .btn-box02 .new_cta_freecall_pc {
  grid-area: 2 / 1 / 3 / 3;
}
.isbody-column .cv-area02 .btn-box02 a {
  margin: 1%;
}
.isbody-column .cv-area02 img {
  height: auto;
  width: auto;
  margin: 0 auto 0vmin;
  padding-bottom: 0.5vw;
}
.isbody-column .cv-area02 img.new_cta_service_btn_pc {
  max-width: 450px;
}
.isbody-column .cv-area02 img.new_cta_freecall_btn_pc {
  max-width: 934px;
}

@media screen and (max-width: 767px) {
  .isbody-column .cv-area02 {
    width: 100%;
    height: 61vw;
    position: relative;
    margin: auto;
    margin-bottom: 5vw;
    padding: 10px;
  }
  .isbody-column .cv-area02 img {
    padding-bottom: 2.5vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .is-column .cv-area02 {
    margin-bottom: 10px;
    margin-top: 20px;
    width: 96%;
  }
}

#column-content {
  .column-comment {
    margin-top: 3em;
    padding: 1em;
    background-color: #1268b7;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 1em;
    .title {
      width: 100%;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      border-bottom: 1px solid #fff;
      padding-bottom: 15px;
    }
    .profile {
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      dt {
        border: none;
        margin: 6px 0;
        padding: 0;
        background-color: #fff;
        color: #1268b7;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16%;
        height: 28px;
        flex-grow: 1;
      }
      dd {
        margin: 6px 0;
        margin-left: 8px;
        font-size: 14px;
        color: #fff;
        width: calc(84% - 8px);
      }
    }
    .comment {
      width: 100%;
      padding: 1em;
      background-color: #fff;
      border-radius: 4px;
      font-size: 16px;
    }
  }
  @media (768px <= width) {
    .column-comment {
      align-items: flex-start;
      .pic {
        width: 20%;
      }
      .profile {
        width: 60%;
        dt {
          border: none;
          margin: 4px 0;
          padding: 0;
          background-color: #fff;
          color: #1268b7;
          font-size: 12px;
          padding: 4px 0;
          text-align: center;
          width: 16%;
          height: 24px;
        }
        dd {
          font-size: 16px;
        }
      }
      .comment {
        font-size: 16px;
      }
    }
  }
}