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


.clear-both { clear: both; }
.bold { font-weight: bold; }

.markerUnder {
  background: linear-gradient(transparent 80%, #ff7ebe 0%);
  /*background: linear-gradient(transparent 80%, #a0def0 0%);*/
  display: inline;
  padding: 0 1px 0;
}

sup { font-size: 0.7em;vertical-align: top; }



/* ~~~ TOPの「建築開口部協会からのお知らせ」の表示件数を10件に制御（11件目以降を消去し忘れても非表示に制御） ~~~ */
.toptopic.top .toptopic-topic:nth-of-type(n + 11) { display: none; }



/* ~~~ □見出しh3の下のコンテンツの左側に1文字分の余白をあける ~~~ */

.header02 + *:not(.arrow):not(.arrow2):not(.list-disk-grn-dot):not(.list-noneline):not(.qa):not(.fp-cas):not(.soshikizu):not(.header02):not(.header02-wrap):not(.dtw140):not(.dtw280):not(.dtw140-yuryo):not(.calc-conditions-w730-1):not(.calc-conditions-w730-2):not(.calc-conditions-w730-3) { padding-left: 1rem; }
.header02 + *:not(h4) + .long-section { padding-left: 1rem; }
.header02 + .photo + .long-section { padding-left: 1rem; }
.header02 + .long-section { padding-left: 1rem; }
.header02 + .long-section + *:not(h3):not(.dtw140) { padding-left: 1rem; }
/*.header02 + .seminar-flow + .long-section { margin-left: 1rem; }*/
.header02 + p + .arrow2 { margin-left: 1rem; }
.header02 + .arrow + p { margin-left: 1rem; }
.header02 + .arrow2 { margin-left: 1rem; }
.header02-wrap { margin-left: 1rem; }

/*@media screen and (min-width:751px){
  .header02 + *:not(.arrow):not(.arrow2):not(.list-disk-grn-dot):not(.list-noneline):not(.qa):not(.fp-cas) { padding-left: 1rem; }
  .header02 + *:not(h4) + .long-section { padding-left: 1rem; }
  .header02 + .photo + .long-section { padding-left: 1rem; }
  .header02 + .long-section { padding-left: 1rem; }
  .header02 + .long-section + *:not(h3) { padding-left: 1rem; }
  .header02 + .seminar-flow + .long-section { margin-left: 1rem; }
  .header02 + p + .arrow2 { margin-left: 1rem; }
  .header02 + .arrow + p { margin-left: 1rem; }
  .header02 + .arrow2 { margin-left: 1rem; }
  .header02-wrap { margin-left: 1rem; }
}*/

/* CSS矢印 */
p + .arrow,
.header02-wrap + .arrow { margin-top: 7px; }
.arrow { margin-left: 10px; }



/* ~~~ 画像などの横並び .item-flex 共通化候補 ~~~ */
.item-flex { display: flex;flex-wrap: wrap;justify-content:center; }



/* ~~~ ページ幅いっぱいの写真や図 共通化候補 ~~~ */
.photo { margin: 10px 0 30px;text-align: center; }

@media screen and (max-width:750px){
  .photo img { width: 100%;height: auto; }
}



/* ~~~ 750px以下のでbrを消去 共通化候補 ~~~ */
.sp-nonebr { display: block; }

@media screen and (max-width:750px) {
  .sp-nonebr { display: none; }
}


/* ~~~ 画像拡大のリンクボタン() ~~~ */
img.expand { width: 100%;height: auto; }
p.expand { margin-top: 15px; }
p.sp-expand { display: none; }

@media screen and (max-width:750px) {
  p.expand { display: none; }
  p.sp-expand { display: block;margin-top: 15px; }
}



/* ~~~ 長い文章の段落の余白 共通化候補 ~~~ */
.long-section { margin-bottom: 20px; }
.long-section p { margin-bottom: 0.5em; }



/* ~~~ 罫線なし。特徴や項目列強など 共通化候補 ~~~ */
.list-noneline li {
  position: relative;
  padding: 4px 8px 2px 24px;
}

.list-noneline li ul li {
  /*position: relative;*/
  padding: 4px 8px 2px 20px;
}


/* list-typeと色 */
.list-circle-green1 li::after { 
  display: block;
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0.5em;
  width: 10px;
  height: 10px;
  background-color: #c8d381;
  border-radius: 100%;
}

.list-circle-green2 li::after { 
  display: block;
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0.5em;
  width: 10px;
  height: 10px;
  background-color: #70ac42;
  border-radius: 100%;
}

.list-cicle-gray1 li::after { 
  display: block;
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0.5em;
  width: 10px;
  height: 10px;
  background-color: #a9a9a9;
  border-radius: 100%;
}

.list-cicle-gray1 li ul li::after { 
  display: block;
  content: '';
  position: absolute;
  top: 0.8em;
  left: 0.2em;
  width: 10px;
  height: 4px;
  background-color: #a9a9a9;
  border-radius: 0;
}



/* ~~~ list-type の（1）（2）･･･ の設定共通化候補 ~~~ */
.decimal-kakko { margin-left: -7px; }
.decimal-kakko li { position: relative;padding-left: 40px;counter-increment: cnt; }
.decimal-kakko li::after { content: "（" counter(cnt) "）";position: absolute;top: 0em;left: 0em; }


/* ~~~ 見出し先頭の丸 ~~~ */
.maru::before {
    display: inline-block;
    content: '';
    position: relative;
    margin-right: 4px;
    top: 0.1em;
    left: 0em;
    width: 14px;
    height: 14px;
    background-color: #404040;
    border-radius: 100%;
}



/* ~~~ ページ内リンクの<a nema=""> が hover されないようにする設定 共通化候補 ~~~ */
a.noevents { pointer-events: none; }



/* ~~~ テーブルの行のhover ~~~ */
.row-hover tr:hover { background-color: #e6f2f5; }



/* ~~~ スマホ用　図の拡大リンク ~~~ */
.sp-enlage { display: none; }

@media screen and (max-width:750px){
  .sp-enlage { display: block;margin-bottom: 10px; }
}



/* ~~~ aリンクのボタン化 ~~~ */
.link-btn {
  clear:both;
  width: 100%;
  margin-top: 10px;
}

.link-btn a {
  font-size: 120%;
  display: inline-flex;
  margin: 10px 0;
  padding: 5px 20px 3px;
  width: auto;
  text-align: center;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  /*white-space: nowrap;*/
}

.link-btn-blue { background: #8a9cdf; }
.link-btn-red { background: #d88d8a; }
.link-btn-yellow-green { background: #70ac42; }



/* ~~~ dlで表 ~~~ */
dl.tbl { display: flex;flex-wrap: wrap;border-bottom: 1px solid #c9c9c9; }
.tbl dt,
.tbl dd {
  padding: 6px 8px 2px;
  border-top: 1px solid #c9c9c9;
  box-sizing: border-box;
}
.tbl dt { background: #f5f5f5; }

dl.dtw100 dt { width: 100px; }
dl.dtw100 dd { width: calc(100% - 100px); }

@media screen and (max-width:750px) {
  dl.tbl { display: block;width: 100%; }
  dl.dtw100 dt { display: block;width: 100%; }
  dl.dtw100 dd { display: block;width: 100%;border: none; }
  dl.dtw140 dt { display: block;width: 100%; }
  dl.dtw140 dd { display: block;width: 100%;border: none; }
}

dl.dtw140 dt { width: 140px; }
dl.dtw140 dd { width: calc(100% - 140px); }

/*dl.dtw240 dt { width: 240px; }
dl.dtw240 dd { width: calc(100% - 240px); }*/



/* ~~~ スマホ用メニューのサブメニュー表示時のcss（採用決定時にはsp.cssに移動） ~~~ */
li.sp-submenu-open a { cursor: default;}
.submenu li a { cursor: pointer; }

#rwdMenuWrap .submenu li a { background: rgba(236,242,225,0.4); }
#rwdMenuWrap .submenu li:first-child { border-top: 1px solid #aaa; }
#rwdMenuWrap .submenu li:last-child { border-bottom: none; }

#rwdMenuWrap li a.open-submenu:after {
  content: '';
  margin-top: -4px;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  color: #888;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2em;
  display: block;
  position: absolute;
  border-top: none;
  border-bottom: 2px solid #b0b0b0;
  border-right: 2px solid #b0b0b0;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* ~~~ TOPお知らせ メールレター受信確認のお願い など(index.html)~~~ */

.top-message {
  width: 100%;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

/*@media screen and (max-width:580px) {
  .top-message { width: 100%;margin: 0;text-align: left; }
}*/

.mail-notes {
  width: 700px;
  margin: 0 100px;
  box-sizing: border-box;
}

@media screen and (max-width:750px) {
  .mail-notes { width: 100%;margin: 0; }
}



/* ~~~ 関連リンク(index.html)~~~ */
.related-links { margin: 20px 0 40px;padding: 10px 34px; }
.related-links ul { display: flex;flex-wrap: wrap; }
.related-links ul li { margin-right: 60px;margin-bottom: 30px; }
.related-links ul li:last-child { margin-right: 0; }
.related-links ul li img:hover { opacity: 0.8; }

@media screen and (max-width:500px) {
  .related-links { padding: 10px 0; }
  .related-links ul li { width: 100%;margin-right: 0;text-align: center; }
}



/* ~~~ new ~~~ */
.new-article {
  display: inline-block;
  margin-left: 5px;
  padding: 0 8px;
  background: #e4007f;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  vertical-align: middle;
}



/* ~~~ YouTube動画埋め込み ~~~ */
.movie { width: 100%;text-align: center; }

@media screen and (max-width:750px){
  .movie { position: relative;padding-top: 56.25%; }
  .movie iframe { position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
}