@charset 'utf-8';
/* ================================================
 初期設定
 文字色・アイコン・配置などの汎用スタイル
================================================ */
.section3 {
  margin-top: 40px;
  margin-bottom: 80px;
}
.section4 {
  margin-top: 30px;
  margin-bottom: 60px;
}
.section5 {
  margin-top: 20px;
  margin-bottom: 40px;
}
.section6 {
  margin-top: 10px;
  margin-bottom: 20px;
}

/* ------------------------------------------------
 * 汎用スタイル
 */
[hidden],
.hidden {
  display: none;
}
@media screen and (min-width: 980px) { /* PCで非表示 */
  .mb, .pc-none { display: none; }
}
@media screen and (max-width: 979px) { /* モバイルで非表示 */
  .pc, .mb-none { display: none; }
  .hidden_mb { display: none; }
  .mbr-parent br { display: none; }
}
.block {
  display: block !important;
}

.like-a {
  color: #11C;
  text-decoration: none;
  cursor: pointer;
}
.like-a:active {
  text-decoration: underline;
}
.like-a:hover img {
  opacity: .75;
}

/* ------------------------------------------------
 * ClaerFix 
 */
.clearfix:after { /* for:Modern Browser */
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clear {
  clear: both;
  height: 1px;
}
@media screen and (min-width: 980px) {
  .pc-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
@media screen and (max-width: 979px) {
  .mb-clearfix:after { /* for:Modern Browser */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/* ------------------------------------------------
 * テキスト関連
 */
.b { font-weight: bold; }
.p { margin: 0 0 .5em; }
.small { font-size: 90%; }

/* align */
.txt-center { text-align: center; }
.txt-left {   text-align: left; }
.txt-right {  text-align: right; }

@media screen and (min-width: 980px) {
  .pc-txt-center { text-align: center; }
  .pc-txt-left {   text-align: left; }
  .pc-txt-right {  text-align: right; }
}
@media screen and (max-width: 979px) {
  .mb-txt-center { text-align: center; }
  .mb-txt-left {   text-align: left; }
  .mb-txt-right {  text-align: right; }
}

/* vertical */
.vertical-top {    vertical-align: top; }
.vertical-middle { vertical-align: middle; }
.vertical-bottom { vertical-align: bottom; }

.bgwhite { background: #FFF; }
.opacity { opacity: .6; }
.nowrap { white-space: nowrap; }

/* サイズ */
.per70 {  font-size: 70%; }
.per80 {  font-size: 80%; }
.per90 {  font-size: 90%; }
.per100 { font-size: 100%; }
.per110 { font-size: 110%; }
.per120 { font-size: 120%; }
.line-h0 { line-height: 0; }
.line-h10 { line-height: 1; } 
.line-h12 { line-height: 1.2; }
.line-h14 { line-height: 1.4; }
.line-h16 { line-height: 1.6; }
.line-h18 { line-height: 1.8; }
.line-h20 { line-height: 2; }
.fs10 {font-size: 10px;}
.fs11 {font-size: 11px;}
.fs12 {font-size: 12px;}
.fs13 {font-size: 13px;}
.fs14 {font-size: 14px;}
.fs15 {font-size: 15px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs25 {font-size: 25px;}
.fs30 {font-size: 30px;}

.big, .bigger, .biggest {
  font-weight: bold;
}
.big, p.big {
  font-size: 16px; 
  line-height: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.bigger, p.bigger {
  font-size: 20px; 
  line-height: 25px;
  margin-top: 20px;
  margin-bottom: 20px;
}  
.biggest, p.biggest {    
  font-size: 24px; 
  line-height: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.badge, .tag {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding-left: .5em;
  padding-right: .5em;
  text-align: center;
  font-weight: bold;
}
.badge {
  border-radius: 50%;
}
/* 字下げ */
p.txt-indent,
.txt-indent p {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
p.txt-indent > *,
.txt-indent p > * {
  text-indent: initial;
}
/* テキスト画像 */
img.text {
  height: 1em;
  vertical-align: middle;
}

/* ------------------------------------------------
 * リンク
 */
.big-link {
  text-align: center;
  margin: 1em;
  font-size: 125%;
}
.link-icon,
.link-icon2,
.link-pdf,
.link-mail {
  background-repeat: no-repeat;

}
.link-icon {
  background-image: url(https://www.binchoutan.com/top/images/link-icon.gif);
  background-position: left center;
  background-size: 1em;
  padding-left: 1.5em;
  margin-left: .5em;
}
.link-icon2 {
  background-image: url(https://www.binchoutan.com/images/common/rdelta.png);
  background-position: .25em center;
  background-size: .75em;
  padding-left: 1.5em;
  margin-left: .5em;
}
.link-pdf {
  background-image: url(https://www.binchoutan.com/housyanou/images/icon_p.jpg);
  background-position: left center;
  background-size: contain;
  line-height: 32px;
  padding-left: 32px;
  display: inline-block;
}
.link-mail {
  background-image: url(https://www.binchoutan.com/images/common/icon_mail.png);
  background-position: left center;
  background-size: 1.5em;
  line-height: 32px;
  padding-left: 2em;
  display: inline-block;
  margin-left: .5em;
}
.link-arrow::after {
  content: "\25B6\25B6";
  font-size: 80%;
  margin-left: .5em;
}
.link-arrow-back::before {
  content: "\25C0\25C0";
  font-size: 80%;
  margin-right: .5em;
}
[class*=bg-icon] {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.25em;
}
[class*=bg-icon].-top {
  background-position: left top;
}
.bg-icon:not(.-right) {
  padding-left: 1.5em;
  margin-left: .25em;
}
.bg-icon-10 {
  background-size: 1em;
}
.bg-icon-10:not(.-right) {
  margin-left: .2em;
}
.bg-icon-15 {
  background-size: 1.5em;
}
.bg-icon-15:not(.-right) {
  padding-left: 1.8em;
  margin-left: .3em;
}
.bg-icon-20 {
  background-size: 2em;
}
.bg-icon-20:not(.-right) {
  padding-left: 2.4em;
  margin-left: .4em;
}
[class*=bg-icon].-right {
  background-position: right center;
}
.bg-icon.-right {
  padding-right: 1.5em;
  margin-right: .25em;
}
.bg-icon-10.-right {
  padding-right: 1.2em;
  margin-right: .2em;
}
.bg-icon-15.-right {
  padding-right: 1.8em;
  margin-right: .3em;
}
.bg-icon-20.-right {
  padding-right: 2.4em;
  margin-right: .4em;
}
[class*=bg-icon].-next {
  background-image: url(https://www.binchoutan.com/images/common/rarr.png);
}
[class*=bg-icon].-prev {
  background-image: url(https://www.binchoutan.com/images/common/larr.png);
}

/* ------------------------------------------------
 * ボタン
 */
.button {
  color: inherit;
  /*font-weight: bold;*/
  line-height: 1.25;
  padding: .5em 1em;
  display: inline-block;
  border: 1px solid #AAA;
  border-radius: .2em;
  text-align: center;
  cursor:pointer;
}
.button input[type="button"] {
  border: 0;
  cursor: pointer;  
}
.button:hover {
  opacity: .7;
  text-decoration: none;
}
.button.-border {
  border-color: #333;
}
.button.-thin {
  border-width: 2px;
}
.button.-narrow {
  padding: .5em;
}
.button.-narrow-l {
  padding-left: .5em;
}
.button.-narrow-r {
  padding-right: .5em;
}
.button.-wide {
  padding: 1em 2em;
}
.button.-wide-h {
  padding: .5em 2em;
}
.button.-shadow {
  box-shadow: 1px 1px 1px rgba(0,0,0,.15);
}
.button.-flat-shadow {
  border-width: 0 .2em .2em 0;
  border-style: solid;
  border-color: #CCC;
}
.button .bg-icon {
  margin: 0;
  padding-top: .125em;
  padding-bottom: .125em;
}
.button .bg-icon-15 {
  padding-top: .25em;
  padding-bottom: .25em;
}
.button .bg-icon-20 {
  padding-top: .5em;
  padding-bottom: .5em;
}
.button.-g-white {
  background-image: linear-gradient(to bottom, #FFF 0%, #F9F7F4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#FFF', endColorstr='#F9F7F4', GradientType=0 );
}
.button.-g-red {
  text-shadow: 0 0 .25em rgba(0,0,0,.25);
  color: #FFF;
  background-image: linear-gradient(to bottom, #e57270 0%, #e71f19 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#e57270', endColorstr='#e71f19',GradientType=0 );
}
.button.-g-orange {
  background-image: linear-gradient(to bottom, #ffe299 0%, #ffcc33 100%);
  background-image: -webkit-linear-gradient(to bottom, #ffe299 0%, #ffcc33 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#ffe299', endColorstr='#ffcc33',GradientType=0 );
}
.button.-g-dorange {
    background: -webkit-linear-gradient(top, #ffaa6d 0%,#ff8832 100%);
    background: linear-gradient(to bottom, #ffaa6d 0%,#ff8832 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaa6d', endColorstr='#ff8832',GradientType=0 );
}
.button.-g-yellow {
  background-image: linear-gradient(to bottom, #fff0c5 0%, #ffeaaa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#fff0c5', endColorstr='#ffeaaa', GradientType=0 );
}
.button.-g-green {
  text-shadow: 0 0 .25em rgba(0,0,0,.25);
  color: #FFF;
  background-image: linear-gradient(to bottom, #9accb0 0%, #78b995 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#9accb0', endColorstr='#78b995', GradientType=0 );
}
.button.-g-blue {
  text-shadow: 0 0 .25em rgba(0,0,0,.25);
  color: #FFF;
  background-image: linear-gradient(to bottom, #72b9f7 0%, #2192f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#72b9f7', endColorstr='#2192f3', GradientType=0 );
}
.button.-g-gray {
  color: #000;
  background-image: linear-gradient(to bottom, #ffffff 0%, #e4e3e3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#72b9f7', endColorstr='#e4e3e3', GradientType=0 );
}

/* ------------------------------------------------
 * リスト／定義リスト
 */
.list-icon {
  background: url(https://www.binchoutan.com/images/common/rdelta.png) no-repeat left center;
  background-size: .75em;
  padding-left: 1em;
}
ul.-non-style, 
ol.-non-style,
ul.box-parent,
ol.box-parent,
ul.li-border,
ul.-waffle,
ul.li-icon {
  list-style-type: none;
  padding-left: 0;
}
ul.-disc li, li.-disc { list-style-type: disc; }
ul.-circle li, li.-circle { list-style-type: circle; }
ul.-square li, li.-square { list-style-type: square; }
ol.-decimal li, li.-decimal { list-style-type: decimal; }
ol.-decimal-leading-zero li, li.-decimal-leading-zero { list-style-type: decimal-leading-zero; }
ol.-lower-alpha li, li.-lower-alpha { list-style-type: lower-alpha; }
ol.-upper-alpha li, li.-upper-alpha { list-style-type: upper-alpha; }
li.-non-style,
li.box {
  list-style-type: none;
}
.li-border:not(.box-parent) > li:not(:last-child) {
  border-bottom: 1px solid #AAA;
}
.li-border:not(.box-parent) > li,
.-waffle:not(.box-parent) > li {
  margin: 0;
  padding: 5px 10px;
}
.li-border:not(.box-parent).-wide > li,
.-waffle:not(.box-parent).-wide > li {
  padding: 10px 20px;
}
.li-border.-dashed > li:not(:last-child),
.dl-border.-dashed > dt {
  border-style: dashed;
}
.li-border.-dotted > li:not(:last-child),
.dl-border.-dotted > dt {
  border-style: dotted;
}
.li-border.-white > li,
.dl-border.-white > dt {
  border-color: #FFF;
}
.dl,
.dl-border,
dl.box,
.dl-icon {
  margin: 10px auto;
}
.dl > dt,
.dl-border > dt,
.dl-icon > dt {
  margin-bottom: .5em;
}
.dl > dt:not(:first-child),
.dl-border > dt:not(:first-child),
dl.box > dt:not(:first-child),
.dl-icon > dt:not(:first-child) {
  margin-top: .75em;
}
.dl > dd,
.dl-border > dd,
.dl-icon > dd {
  margin: .5em 0;
}
.dd-small > dd {
  font-size: 90%;
}
.dt-large > dt {
  font-size: 110%;
}
.dt-bold > dt {
  font-size: 110%;
}
dl.box {
  padding: 0;
}
.dl-border > dt {
  border-bottom: 1px solid #AAA;
  padding-bottom: .25em;
}
.dt-rev > dt {
  background: rgba(0,0,0,.75);
  color: #FFF;
}
.li-icon > li,
.dl-icon > dt,
.dl-icon > dd { 
  background-repeat: no-repeat;
  background-position: left top;
}
.li-icon.-icon-small > li { 
  background-position: left .25em;
  background-size: 1em;
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.5em;
}
.li-icon > li,
.dl-icon.-icon-small > dt,
.dl-icon.-icon-small > dd { 
  background-size: 1.5em;
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 2em;
}
.li-icon.-icon-large > li,
.dl-icon > dt,
.dl-icon > dd { 
  background-size: 2em;
  line-height: 1.5;
  padding-top: .25em;
  padding-bottom: .25em;
  padding-left: 2.75em;
}
.dl-icon.-icon-large > dt,
.dl-icon.-icon-large > dd { 
  background-size: 2.5em;
  line-height: 1.5;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 3.25em;
}
/* ------------------------------------------------
 * 表１
 */
.tbl-style,
.tbl-style1 {
  table-layout: fixed;
  border-collapse: collapse;
  /*font-size: 14px;*/
}
@media screen and (max-width: 979px) {
 .tbl-style,
 .tbl-style1{
   width: 100%;
 }
}
.tbl-style th,
.tbl-style td,
.tbl-style1 th,
.tbl-style1 td {
  border: 1px solid #CCC;
  padding: 5px 10px;
}
.tbl-style0 th,
.tbl-style0 td {
  padding: 5px 10px;
}
.tbl-style0.-border tr:not(:last-child) > th,
.tbl-style0.-border tr:not(:last-child) > td {  
  border-bottom: 1px solid #CCC;
}
.-col1-left tr > :nth-child(1),
.-col2-left tr > :nth-child(2),
.-col3-left tr > :nth-child(3),
.-col4-left tr > :nth-child(4),
.-col5-left tr > :nth-child(5),
.-col6-left tr > :nth-child(6),
.-col7-left tr > :nth-child(7),
.-col8-left tr > :nth-child(8),
.-col9-left tr > :nth-child(9),
.-col10-left tr > :nth-child(10) {
  text-align: left;
}
.-col1-center tr > :nth-child(1),
.-col2-center tr > :nth-child(2),
.-col3-center tr > :nth-child(3),
.-col4-center tr > :nth-child(4),
.-col5-center tr > :nth-child(5),
.-col6-center tr > :nth-child(6),
.-col7-center tr > :nth-child(7),
.-col8-center tr > :nth-child(8),
.-col9-center tr > :nth-child(9),
.-col10-center tr > :nth-child(10) {
  text-align: center;
}
.-col1-right tr > :nth-child(1),
.-col2-right tr > :nth-child(2),
.-col3-right tr > :nth-child(3),
.-col4-right tr > :nth-child(4),
.-col5-right tr > :nth-child(5),
.-col6-right tr > :nth-child(6),
.-col7-right tr > :nth-child(7),
.-col8-right tr > :nth-child(8),
.-col9-right tr > :nth-child(9),
.-col10-right tr > :nth-child(10) {
  text-align: right;
}
@media screen and (max-width: 979px) {
  /* 2セルの場合 */
  .tbl-style2 td {
    display: block;
    width: auto;
  }
}

/* ------------------------------------------------
 * 配置  
 */
/* テーブル配置 */
.table {
  display: table;
  margin-bottom: 1.25em;
}
.table .tr {
  display: table-row;
}
.table .th,
.table .td {
  display: table-cell;
  vertical-align:top;
}
.table .td:not(:last-child) {
  padding-right:1em;
}
@media screen and (max-width: 979px) {
  .table .tr {
    display: block;
  }
  .table .th,
  .table .td {
    width: auto;
    /*display: list-item;*/
    text-align:center;
  }
  .table .td {
    margin-bottom:1em;
  }
}

/* ------------------------
 * display 
 */
.inline-block { 
  display: inline-block; 
}
.inline-parent > * {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.inline-parent.-vertical-top > * {
  vertical-align: top;    
}
@media screen and (min-width: 980px) {
  .pc-inline-block { 
    display: inline-block; 
  }
  .pc-inline-parent > * {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .pc-inline-parent.-vertical-top > * {
    vertical-align: top;    
  }
}
@media screen and (max-width: 979px) {
  .mb-inline-block { 
    display: inline-block; 
  }
  .mb-inline-parent > * {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mb-inline-parent.-vertical-top > * {
    vertical-align: top;    
  }
}
.flex {
  display: flex;
  /*justify-content: space-around;*/
}
.flex.-middle {
  align-items: center;
}
.flex.-wrap {
  flex-wrap: wrap;
}
.flex.-even > * {
  flex: 1 1;
}
.flex.-w100 > * { flex-basis: 100px; }
.flex.-w150 > * { flex-basis: 150px; }
.flex.-w200 > * { flex-basis: 200px; }
.flex.-w300 > * { flex-basis: 300px; }

/* ------------------------------------------------
 * 囲み
 */
.box,
.box-parent > * {
  margin: 10px 0;
}
.box,
.box-parent > *,
dl.box > * {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.box > :first-child,
.box-parent > * > :first-child,
.box > .box-parent > :first-child,
dl.box > * > :first-child, {
  margin-top: 0;
}
.box > :last-child,
.box-parent > * > :last-child,
.box > .box-parent:not([class*=col-]):not([class*=tile-]) > :last-child,
dl.box > * > :last-child, {
  margin-bottom: 0;
}

/* ------------------------
 * narrow
 */
.box.-narrow,
.box-parent.-narrow > * {
  padding: 7.5px;
}
.box.-narrowest,
.box-parent.-narrowest > * {
  padding: 5px;
}
/* ------------------------
 * wide
 */
.box.-wide,
.box-parent.-wide > * {
  padding: 15px;
}
.box.-widest,
.box-parent.-widest > * {
  padding: 20px;
}
/* ------------------------
 * margin
 */
.box-parent.-margin0 > * {
  margin: 0 0 1px;
}
.box-parent.-border.-margin0 > * {
  margin: -1px 0 0;
}
.box.-bottom0,
.box-parent.-bottom0 > * {
  padding-bottom: 0;
}
/* ------------------------
 * border
 */
.box.-border,
.box.-border-red,
.box-parent.-border > *,
.box-parent.-border-red > * {
  border-width: 1px;
  border-style: solid;
}
.box.-border:not(.-square),
.box.-border-red:not(.-square),
.box-parent.-border:not(.-square):not(.-margin0) > *,
.box-parent.-border-red:not(.-square):not(.-margin0) > * {
  border-radius: 4px;
}
.box.-border,
.box-parent.-border > *,
.box.-border {
  border-color: #AAA;
}
.box.-dashed,
.box-parent.-dashed > * {
  border-style: dashed;  
}
.box.-dotted,
.box-parent.-dotted > * {
  border-style: dotted;  
}
.box.-border.-thin,
.box.-border-red.-thin,
.box-parent.-border.-thin > *,
.box-parent.-border-red.-thin > * {
  border-width: 2px;
}
.box.-border.-thinnest,
.box.-border-red.-thinnest,
.box-parent.-border.-thinnest > *,
.box-parent.-border-red.-thinnest > * {
  border-width: 3px;
}
.box.-note,
.box-parent.-note > * {
  border-left-width: 5px;
  border-style: solid;
}
.box.-note.-thin,
.box-parent.-note.-thin > * {
  border-left-width: 10px;
}
.box.-note.-thinnest,
.box-parent.-note.-thinnest > * {
  border-left-width: 20px;
}
/* ------------------------
 * shadow
 */
.box.-shadow,
.box-parent.-shadow > * {
  box-shadow: 2px 2px 2px rgba(0,0,0,.15);
}
.box.-shadow-inset,
.box-parent.-shadow-inset > * {
  box-shadow: inset 2px 2px 2px rgba(0,0,0,.15);
}
/* ------------------------
 * transparent
 */
.box-parent > .-transparent {
  background-color: transparent !important;
  border: none !important;
}
/* ------------------------
 * quote
 */
.box.-quote {
  padding-left: 50px;
  padding-right: 50px;
}
.box.-quote::before,
.box.-quote::after {
  font-family: serif;
  font-size: 80px;
  position: absolute;
}
.box.-quote::before {
  content: "\201C";/*-- “ --*/
  line-height: 80px;
  left: 5px;
  top: 5px;  
}
.box.-quote::after {
  content: "\201D";/*-- ” --*/
  line-height: 0;
  right: 5px;
  bottom: 5px;  
}

/* ------------------------------------------------
 * COLOR
 */
/* ------------------------
 * gray
 */
.gray,
.tbl-style th,
.tbl-style0 th,
.-waffle.-gray:not(.-even) > :nth-child(odd),
.-waffle.-gray.-even > :nth-child(even),
.-gray.-quote::before,
.-gray.-quote::after {   
  color: #888;
  color: #666;
}
.button.-gray,
.bg-gray,
.box.-gray,
.box-parent.-gray > *,
.box.-gray > dt,
.-waffle.-bg-gray:not(.-even) > :nth-child(odd),
.-waffle.-bg-gray.-even > :nth-child(even),
.-waffle > tbody > tr:nth-child(even) > *,
.-waffle > tr:nth-child(even) > * { 
  background-color: #EEE; 
}
.button.-gray,
.box.-gray.-border,
.box.-gray.-note,
.box-parent.-gray > * { 
  border-color: #CCC; 
}
-gray.-rev .color,
-gray.-rev dt,
.badge.-gray,
.tag.-gray,
.tbl-style > thead th { 
  background-color: #888; color: #FFF; 
  background-color: #AAA;
}

/* ------------------------
 * color
 */
.color,
.-color b,
.-color .color,
.-color dt,
.-color th,
.-waffle.-color:not(.-even) > :nth-child(odd),
.-waffle.-color.-even > :nth-child(even),
.-color.-quote::before,
.-color.-quote::after { 
  color: #af8a74; 
  color: #736e6e;
}
.bg-color,
.box:not(dl).-color,
.box-parent.-color > *,
.box.-color > dt,
.-waffle.-bg-color:not(.-even) > :nth-child(odd),
.-waffle.-bg-color.-even > :nth-child(even),
.-waffle.-color > tbody > tr:nth-child(even) > *,
.-waffle.-color > tr:nth-child(even) > * { 
  background-color: #f8f4f1; 
  
}
.box.-color.-border, 
.box.-color.-note,
.box-parent.-color > * { 
  border-color: #d8cdc5; 
}
.-color.-rev .color,
.-color.-rev dt,
.badge.-color,
.tag.-color,
.-color > thead th { 
  background-color: #af8a74; color: #FFF; 
  background-color: #989494;
}

/* ------------------------
 * red
 */
.red {
  color: #dc2b2b; 
}
.-red b,
.-red .color,
.-red dt,
.-red th,
.-waffle.-red:not(.-even) > :nth-child(odd),
.-waffle.-red.-even > :nth-child(even),
.-red.-quote::before,
.-red.-quote::after { 
  color: #bf4444; 
}
.bg-red,
.box:not(dl).-red,
.box-parent.-red > *,
.box.-red > dt,
.-waffle.-bg-red:not(.-even) > :nth-child(odd),
.-waffle.-bg-red.-even > :nth-child(even),
.-waffle.-red > tbody > tr:nth-child(even) > *,
.-waffle.-red > tr:nth-child(even) > * { 
  background-color: #f7e7e7; 
}
.box.-border-red,
.box-parent.-border-red > * {
  border-color: #dc2b2b; 
}
.box.-red.-border, 
.box.-red.-note,
.box-parent.-red > * { 
  border-color: #cc8989; 
}
.-red.-rev .color,
.-red.-rev dt,
.badge.-red,
.tag.-red,
.-red > thead th { 
  background-color: #bf4444; color: #FFF; 
}

/* ------------------------
 * green
 */
.green,
.-green b,
.-green .color,
.-green dt,
.-green th,
.-waffle.-green:not(.-even) > :nth-child(odd),
.-waffle.-green.-even > :nth-child(even),
.-green.-quote::before,
.-green.-quote::after { 
  color: #288451; 
  color: #3b9e67; 
}
.bg-green,
.box:not(dl).-green,
.box-parent.-green > *,
.box.-green > dt,
.-waffle.-bg-green:not(.-even) > :nth-child(odd),
.-waffle.-bg-green.-even > :nth-child(even),
.-waffle.-green > tbody > tr:nth-child(even) > *,
.-waffle.-green > tr:nth-child(even) > * { 
  background-color: #e2efe8; 
}
.box.-border-green,
.box-parent.-border-green > * {
  border-color: #b0c5ba; 
}
.box.-green.-border,
.box.-green.-note,
.box-parent.-green > * { 
  border-color: #b0c5ba; 
}
.-green.-rev .color,
.-green.-rev dt,
.badge.-green,
.tag.-green,
.-green > thead th { 
  background-color: #288451; color: #FFF; 
}


/* ------------------------
 * orange
 */
.orange,
.-orange b,
.-orange .color,
.-orange dt,
.-orange th,
.-waffle.-orange:not(.-even) > :nth-child(odd),
.-waffle.-orange.-even > :nth-child(even),
.-orange.-quote::before,
.-orange.-quote::after { 
  color: #bb8c00; 
  color: #968759;
}
.bg-orange,
.box:not(dl).-orange,
.box-parent.-orange > *,
.box.-orange > dt,
.-waffle.-bg-orange:not(.-even) > :nth-child(odd),
.-waffle.-bg-orange.-even > :nth-child(even),
.-waffle.-orange > tbody > tr:nth-child(even) > *,
.-waffle.-orange > tr:nth-child(even) > * { 
  background-color: #fff2cc;
}
.box.-border-orange,
.box-parent.-border-orange > * {
  border-color: #dccfa8; 
}
.box.-orange.-border,
.box.-orange.-note,
.box-parent.-orange > * { 
  border-color: #dccfa8; 
}
.-orange.-rev .color,
.-orange.-rev dt,
.badge.-orange,
.tag.-orange,
.-orange > thead th { 
  background-color: #a07d15; color: #FFF; 
  background-color: #b5ab8c;
}

/* ------------------------
 * blue
 */
.blue,
.-blue b,
.-blue .color,
.-blue dt,
.-blue th,
.-waffle.-blue:not(.-even) > :nth-child(odd),
.-waffle.-blue.-even > :nth-child(even),
.-blue.-quote::before,
.-blue.-quote::after { 
  color: #1672c1; 
  color: #2192f3;
  color: #2e80c7;
}
.bg-blue,
.box:not(dl).-blue,
.box-parent.-blue > *,
.box.-blue > dt,
.-waffle.-bg-blue:not(.-even) > :nth-child(odd),
.-waffle.-bg-blue.-even > :nth-child(even),
.-waffle.-blue > tbody > tr:nth-child(even) > *,
.-waffle.-blue > tr:nth-child(even) > * { 
  background-color: #e8f3fd; 
}
.box.-border-blue,
.box-parent.-border-blue > * {
  border-color: #a3c1dc; 
}
.box.-blue.-border,
.box.-blue.-note,
.box-parent.-blue > * { 
  border-color: #a3c1dc; 
}
.-blue.-rev .color,
.-blue.-rev dt,
.badge.-blue,
.tag.-blue,
.-blue > thead th { 
  background-color: #1672c1; 
  background-color: #2192f3;
  color: #FFF; 
}

/* ------------------------
 * white
 */
.white,
.-waffle.-white:not(.-even) > :nth-child(odd),
.-waffle.-white.-even > :nth-child(even),
.-white.-quote::before,
.-white.-quote::after {  
  color: #FFF; 
}
.button.-white,
.bg-white,
.box:not(dl).-white,
.box-parent.-white > *,
.-waffle.-bg-white:not(.-even) > :nth-child(odd),
.-waffle.-bg-white.-even > :nth-child(even) { 
  background-color: #FFF; 
}
.button.-white,
.box.-white.-border,
.box.-white.-note,
.box-parent.-white > * { 
  border-color: #AAA; 
}

/* ------------------------
 * danger
 */
.color-danger,
.box.-danger.-note,
.box-parent.-danger.-note > * { 
  color: #dc2b2b; 
}
.button.-red,
.bg-danger,
.badge.-danger,
.tag.-danger,
.box:not(dl).-danger,
.box-parent.-danger > *,
.box.-danger > dt,
.-waffle.-bg-danger:not(.-even) > :nth-child(odd),
.-waffle.-bg-danger.-even > :nth-child(even) { 
  background-color: #dc2b2b; 
  color: #FFF; 
}
.box.-danger.-note,
.box-parent.-danger.-note > * { 
  border-color: #dc2b2b; 
  background-color: inherit; 
}
.button.-red.-flat-shadow {
  border-color: #e89f9f; 
}

/* ------------------------
 * warning
 */
.color-warning { 
  color: #FC3; 
}
.button.-orange,
.bg-warning,
.box.-warning,
.badge.-warning,
.tag.-warning,
.box-parent.-warning > *,
.box:not(dl).-warning > dt,
.-waffle.-bg-warning:not(.-even) > :nth-child(odd),
.-waffle.-bg-warning.-even > :nth-child(even) { 
  background-color: #FC3; 
}
.box.-warning.-note,
.box-parent.-warning.-note > * { 
  border-color: #FC3; 
  background-color: inherit; 
}
.button.-orange.-flat-shadow {
  border-color: #d6aa28; 
}

/* ------------------------
 * success
 */
.color-success,
.box.-success.-note,
.box-parent.-success.-note > * { 
  color: #58bb84; 
}
.button.-green,
.bg-success,
.badge.-success,
.tag.-success,
.box:not(dl).-success,
.box-parent.-success > *,
.box.-success > dt,
.-waffle.-bg-success:not(.-even) > :nth-child(odd),
.-waffle.-bg-success.-even > :nth-child(even) { 
  background-color: #58bb84; 
  color: #FFF; 
}
.box.-success.-note,
.box-parent.-success.-note > * { 
  border-color: #58bb84; 
  background-color: inherit; 
}
.button.-green.-flat-shadow {
  border-color: #b5dcc6; 
}

/* ------------------------
 * info
 */
.color-info,
.box.-info.-note,
.box-parent.-info.-note > * {
  color: #2192f3; 
}
.button.-blue,
.bg-info,
.badge.-info,
.tag.-info,
.box:not(dl).-info,
.box-parent.-info > *,
.box.-info > dt,
.-waffle.-bg-info:not(.-even) > li:nth-child(odd),
.-waffle.-bg-info.-even > li:nth-child(even) { 
  background-color: #2192f3; 
  color: #FFF; 
}
.box.-info.-note,
.box-parent.-info.-note > * { 
  border-color: #2192f3; 
  background-color: inherit; 
}
.button.-blue.-flat-shadow {
  border-color: #b4d0e8; 
}

/* ------------------------------------------------
 * 画像配置　回りこみ 
 */
.comment-parent > *,
.commentl,
.commentr,
.photol,
.photor {
  margin-bottom: 10px;
}
.photol > .box,
.photor > .box {
  margin-top: 0;
}
.comment-parent > * > :first-child p.txt,
.commentl > :first-child p.txt,
.commentr > :first-child p.txt,
.photor p.txt,
.photol p.txt {
  opacity: .75;
  font-size: 12px;
  line-height: 1.25;
  margin-bottom: 0;
}
@media screen and (min-width: 980px) {
  .comment-parent > * > :first-child,
  .commentl > :first-child,
  .photol {
    float: left;
    padding-right: 10px;
  }
  .commentr > :first-child,
  .photor {
    float: right;
    padding-left: 10px;
  }
}
@media screen and (max-width: 979px) {
  /* スマホでフロートさせたくない時に使います */
  .comment-parent:not(.-pc):not(.-right) > * > :first-child,
  .commentl:not(.-pc) > :first-child,
  .photol:not(.-pc):not(.-non-float) {
    float: left;
    padding-right: 10px;
  }
  .comment-parent.-right:not(.-pc) > * > :first-child,
  .commentr:not(.-pc) > :first-child,
  .photor:not(.-pc):not(.-non-float) {
    float: right;
    padding-left: 10px;
  }
  .comment-parent.-pc > * > :first-child,
  .commentl.-pc > :first-child,
  .commentr.-pc > :first-child,
  .photol.-pc,
  .photor.-pc,
  .photol.-non-float,
  .photor.-non-float {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .comment-
  .non-float {
    float: none !important;
  }
}
.comment-parent > ::after,
.commentl::after,
.commentr::after {
  content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.comment-parent > * > :first-child,
.commentl > :first-child {
  box-sizing: border-box;
}
.comment-parent.-right > * > :first-child,
.commentr > :first-child {
  box-sizing: border-box;
}

.comment-parent > * > :last-child,
.commentl > :last-child,
.commentr > :last-child,
.non-text-wrap {
  overflow: hidden;
}
@media screen and (max-width: 979px) { 
 .non-text-wrap.-apply-mb {
   overflow:initial;
 }
}
.comment-parent.-icon-left > * > :first-child {
  text-align: left;
}
.comment-parent.-icon-right > * > :first-child {
  text-align: right;
}
.comment-parent.-icon-center > * > :first-child {
  text-align: center;
}

/* ------------------------------------------------
 * 幅
 */
.tile.-w50 > *, .w50 { max-width: 50px; flex-basis: 50px; }
.tile.-w60 > *, .w60 { max-width: 60px; flex-basis: 60px; }
.tile.-w70 > *, .w70 { max-width: 70px; flex-basis: 70px; }
.tile.-w80 > *, .w80 { max-width: 80px; flex-basis: 80px; }
.tile.-w90 > *, .w90 { max-width: 90px; flex-basis: 90px; }
.tile.-w100 > *, .w100 { max-width: 100px; flex-basis: 100px; }
.tile.-w120 > *, .w120 { max-width: 120px; flex-basis: 120px; }
.tile.-w150 > *, .w150 { max-width: 150px; flex-basis: 150px; }
.tile.-w200 > *, .w200 { max-width: 200px; flex-basis: 200px; }
.tile.-w250 > *, .w250 { max-width: 250px; flex-basis: 250px; }
.tile.-w300 > *, .w300 { max-width: 300px; flex-basis: 300px; }
.tile.-w350 > *, .w350 { max-width: 350px; flex-basis: 350px; }
.w400 { max-width: 400px; flex-basis: 400px; }
.w450 { max-width: 450px; flex-basis: 450px; }
.w500 { max-width: 500px; flex-basis: 500px; }
.w550 { max-width: 550px; flex-basis: 550px; }
.w600 { max-width: 600px; flex-basis: 600px; }
.w650 { max-width: 650px; flex-basis: 650px; }
.w700 { max-width: 700px; flex-basis: 700px; }
.w-100per { width: 100%; flex-basis: 100%; }
.w-90per { width: 90%; flex-basis: 90%; }
.w-80per { width: 80%; flex-basis: 80%; }
.w-70per { width: 70%; flex-basis: 70%; }
.w-60per { width: 60%; flex-basis: 60%; }
.w-50per { width: 50%; flex-basis: 50%; }
.w-40per { width: 40%; flex-basis: 40%; }
.w-33per { width: 33.33%; flex-basis: 33%.33; }
.w-30per { width: 30%; flex-basis: 30%; }
.comment-parent.-w-25per > * > :first-child, .w-25per { width: 25%; flex-basis: 25%; }
.comment-parent.-w-20per > * > :first-child, .w-20per { width: 20%; flex-basis: 20%; }
.comment-parent.-w-15per > * > :first-child, .w-15per { width: 15%; flex-basis: 15%; }
.comment-parent.-w-10per > * > :first-child, .w-10per { width: 10%; flex-basis: 10%; }
.comment-parent.-w-5per > * > :first-child, .w-5per { width: 5%; flex-basis: 5%; }
.comment-parent.-w-25per.-rev-margin > * > :last-child { margin-left: 25%; margin-right: 25%; }
.comment-parent.-w-20per.-rev-margin > * > :last-child { margin-left: 20%; margin-right: 20%; }
.comment-parent.-w-15per.-rev-margin > * > :last-child { margin-left: 15%; margin-right: 15%; }
.comment-parent.-w-10per.-rev-margin > * > :last-child { margin-left: 10%; margin-right: 10%; }
.comment-parent.-w-5per.-rev-margin > * > :last-child { margin-left: 5%; margin-right: 5%; }
.w-50 { width: 50px; flex-basis: 50px; }
.w-60 { width: 60px; flex-basis: 60px; }
.w-70 { width: 70px; flex-basis: 70px; }
.w-80 { width: 80px; flex-basis: 80px; }
.w-90 { width: 90px; flex-basis: 90px; }
.w-100 { width: 100px; flex-basis: 100px; }
.w-120 { width: 120px; flex-basis: 120px; }
.w-150 { width: 150px; flex-basis: 150px; }
.w-200 { width: 200px; flex-basis: 200px; }
.w-250 { width: 250px; flex-basis: 250px; }
.w-300 { width: 300px; flex-basis: 300px; }
.w-350 { width: 350px; flex-basis: 350px; }
.w-400 { width: 400px; flex-basis: 400px; }
.w-450 { width: 450px; flex-basis: 450px; }
.w-500 { width: 500px; flex-basis: 500px; }
.w-550 { width: 550px; flex-basis: 550px; }
.w-600 { width: 600px; flex-basis: 600px; }
.w-650 { width: 650px; flex-basis: 650px; }
.w-700 { width: 700px; flex-basis: 700px; }
@media screen and (min-width: 980px) {
  .pc-w-50 { width: 50px; flex-basis: 50px; }
  .pc-w-60 { width: 60px; flex-basis: 60px; }
  .pc-w-70 { width: 70px; flex-basis: 70px; }
  .pc-w-80 { width: 80px; flex-basis: 80px; }
  .pc-w-90 { width: 90px; flex-basis: 90px; }
  .pc-w-100 { width: 100px; flex-basis: 100px; }
  .pc-w-120 { width: 120px; flex-basis: 120px; }
  .pc-w-150 { width: 150px; flex-basis: 150px; }
  .pc-w-200 { width: 200px; flex-basis: 200px; }
  .pc-w-250 { width: 250px; flex-basis: 250px; }
  .pc-w-300 { width: 300px; flex-basis: 300px; }
  .pc-w-350 { width: 350px; flex-basis: 350px; }
  .pc-w-400 { width: 400px; flex-basis: 400px; }
  .pc-w-450 { width: 450px; flex-basis: 450px; }
  .pc-w-500 { width: 500px; flex-basis: 500px; }
  .pc-w-550 { width: 550px; flex-basis: 550px; }
  .pc-w-600 { width: 600px; flex-basis: 600px; }
  .pc-w-650 { width: 650px; flex-basis: 650px; }
  .pc-w-700 { width: 700px; flex-basis: 700px; }
  .pc-w-100per { width: 100%; flex-basis: 100%; }
  .pc-w-90per { width: 90%; flex-basis: 90%; }
  .pc-w-80per { width: 80%; flex-basis: 80%; }
  .pc-w-70per { width: 70%; flex-basis: 70%; }
  .pc-w-60per { width: 60%; flex-basis: 60%; }
  .pc-w-50per { width: 50%; flex-basis: 50%; }
  .pc-w-40per { width: 40%; flex-basis: 40%; }
  .pc-w-33per { width: 33.33%; flex-basis: 33%.33; }
  .pc-w-30per { width: 30%; flex-basis: 30%; }
  .pc-w-25per { width: 25%; flex-basis: 25%; }
  .pc-w-20per { width: 20%; flex-basis: 20%; }
  .pc-w-15per { width: 15%; flex-basis: 15%; }
  .pc-w-10per { width: 10%; flex-basis: 10%; }
  .pc-w-5per { width: 5%; flex-basis: 5%; }
}
@media screen and (max-width: 979px) {
  .mb-w-50 { width: 50px; flex-basis: 50px; }
  .mb-w-60 { width: 60px; flex-basis: 60px; }
  .mb-w-70 { width: 70px; flex-basis: 70px; }
  .mb-w-80 { width: 80px; flex-basis: 80px; }
  .mb-w-90 { width: 90px; flex-basis: 90px; }
  .mb-w-100 { width: 100px; flex-basis: 100px; }
  .mb-w-120 { width: 120px; flex-basis: 120px; }
  .mb-w-150 { width: 150px; flex-basis: 150px; }
  .mb-w-200 { width: 200px; flex-basis: 200px; }
  .mb-w-250 { width: 250px; flex-basis: 250px; }
  .mb-w-300 { width: 300px; flex-basis: 300px; }
  .mb-w-350 { width: 350px; flex-basis: 350px; }
  .mb-w-400 { width: 400px; flex-basis: 400px; }
  .mb-w-450 { width: 450px; flex-basis: 450px; }
  .mb-w-500 { width: 500px; flex-basis: 500px; }
  .mb-w-550 { width: 550px; flex-basis: 550px; }
  .mb-w-600 { width: 600px; flex-basis: 600px; }
  .mb-w-650 { width: 650px; flex-basis: 650px; }
  .mb-w-700 { width: 700px; flex-basis: 700px; }
  .mb-w-100per { width: 100%; flex-basis: 100%; }
  .mb-w-90per { width: 90%; flex-basis: 90%; }
  .mb-w-80per { width: 80%; flex-basis: 80%; }
  .mb-w-70per { width: 70%; flex-basis: 70%; }
  .mb-w-60per { width: 60%; flex-basis: 60%; }
  .mb-w-50per { width: 50%; flex-basis: 50%; }
  .mb-w-40per { width: 40%; flex-basis: 40%; }
  .mb-w-33per { width: 33.33%; flex-basis: 33%.33; }
  .mb-w-30per { width: 30%; flex-basis: 30%; }
  .mb-w-25per { width: 25%; flex-basis: 25%; }
  .mb-w-20per { width: 20%; flex-basis: 20%; }
  .mb-w-15per { width: 15%; flex-basis: 15%; }
  .mb-w-10per { width: 10%; flex-basis: 10%; }
  .mb-w-5per { width: 5%; flex-basis: 5%; }
}
.box-center {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------
 * グリッド
 */
.tile,
.tile-2,
.tile-3,
.tile-4,
.tile-5,
.tile-6 {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
}
[class*=tile].-nowrap {
  flex-wrap: nowrap;
  justify-content: space-between;
}
[class*=tile].-nowrap > * {
  flex-shrink: 1;
}
[class*=tile].-middle {
  align-items: center;
}
[class*=tile] > .-middle {
  align-self: center;
}
ul[class*=tile] {
  padding-left: 0;
  list-style-type: none;
}
[class*=tile] img {
  max-width: 100%;
}

.tile > *,
.tile-2 > *,
.tile-3 > *,
.tile-4 > *,
.tile-5 > *,
.tile-6 > * {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  box-sizing: border-box;
  word-break: break-word;
}
.tile > *,
.tile-2 > *,
.tile-3 > *,
.tile-4 > *,
.tile-5 > *,
.tile-6 > * {
  margin-bottom: 15px;
}
.tile.-around > * {
  margin-left: 7.5px;
  margin-right: 7.5px;
}
[class*=tile].-margin0 > * {
  margin: 0;
}
@media screen and (min-width: 980px) {
  .tile-2 > * { flex-basis: 49%; max-width: 49%; }
  .tile-3 > * { flex-basis: 32%; max-width: 32%; }
  .tile-4 > * { flex-basis: 23.5%; max-width: 23.5%; }
  .tile-5 > * { flex-basis: 18.4%; max-width: 18.4%; }
  .tile-6 > * { flex-basis: 15%; max-width: 15%; }

  .tile-2 > :not(:nth-child(2n)),
  .tile-3 > :not(:nth-child(3n)),
  .tile-4 > :not(:nth-child(4n)),
  .tile-5 > :not(:nth-child(5n)),
  .tile-6 > :not(:nth-child(6n)) {
    margin-right: 2%;
  }
  .tile-2.-margin0 > * { flex-basis: 50%; max-width: 50%; margin-right: 0; }
  .tile-3.-margin0 > * { flex-basis: 33.33%; max-width: 33.33%; margin-right: 0; }
  .tile-4.-margin0 > * { flex-basis: 25%; max-width: 25%; margin-right: 0; }
  .tile-5.-margin0 > * { flex-basis: 20%; max-width: 20%; margin-right: 0; }
  .tile-6.-margin0 > * { flex-basis: 16.66%; max-width: 16.66%; margin-right: 0; }
  [class*=tile].-padding {
    padding: 15px 15px 0;
  }
  .tile-2.-border > :not(:nth-child(2n-1)),
  .tile-3.-border > :not(:nth-child(3n-2)),
  .tile-4.-border > :not(:nth-child(4n-3)),
  .tile-5.-border > :not(:nth-child(5n-4)),
  .tile-6.-border > :not(:nth-child(6n-5)) {
    margin-left: -1px;
  }
  .tile-2.-border > :not(:nth-child(n+3)),
  .tile-3.-border > :not(:nth-child(n+4)),
  .tile-4.-border > :not(:nth-child(n+5)),
  .tile-5.-border > :not(:nth-child(n+6)),
  .tile-6.-border > :not(:nth-child(n+7)) {
    margin-top: -1px;
  }
}
@media screen and (max-width: 979px) {
  .tile-2 > *,
  .tile-3 > * { flex-basis: 100%; max-width: 100%; }
  .tile-4 > *,
  .tile-5 > * { flex-basis: 49%; max-width: 49%; }
  .tile-6 > * { flex-basis: 32%; max-width: 32%; }

  .tile-4 > :not(:nth-child(2n)),
  .tile-5 > :not(:nth-child(2n)),
  .tile-6 > :not(:nth-child(3n)) {
    margin-right: 2%;
  }
  .tile-4.-margin0 > *,
  .tile-5.-margin0 > * { flex-basis: 50%; max-width: 50%; margin-right: 0; }
  .tile-6.-margin0 > * { flex-basis: 33.33%; max-width: 33.33%; margin-right: 0; }
  [class*=tile].-padding {
    padding: 7.5px 7.5px 0;
  }
  .tile > *,
  .tile-2 > *,
  .tile-3 > *,
  .tile-4 > *,
  .tile-5 > *,
  .tile-6 > * {
    margin-bottom: 7.5px;
  }
  .tile-4.-border > :not(:nth-child(2n-1)),
  .tile-5.-border > :not(:nth-child(2n-1)),
  .tile-6.-border > :not(:nth-child(3n-2)) {
    margin-left: -1px;
  }
  .tile-4.-border > :not(:nth-child(n+3)),
  .tile-5.-border > :not(:nth-child(n+3)),
  .tile-6.-border > :not(:nth-child(n+4)) {
    margin-top: -1px;
  }
  .tile.-around > * {
    margin-left: 3.75px;
    margin-right: 3.75px;
  }
  
  .tile-2.-apply-mb > * { flex-basis: 49%; max-width: 49%; }
  .tile-3.-apply-mb > * { flex-basis: 32%; max-width: 32%; }
  .tile-2.-apply-mb > :not(:nth-child(2n)),
  .tile-3.-apply-mb > :not(:nth-child(3n)) {
    margin-right: 2%;
  }
  .tile-2.-apply-mb.-margin0 > * { flex-basis: 50%; max-width: 50%; margin-right: 0; }
  .tile-3.-apply-mb.-margin0 > * { flex-basis: 33.33%; max-width: 33.33%; margin-right: 0; }
  [class*=tile].-apply-mb.-padding {
    padding: 15px 15px 0;
  }
  .tile-2.-apply-mb.-border > :not(:nth-child(2n-1)),
  .tile-3.-apply-mb.-border > :not(:nth-child(3n-2)) {
    margin-left: -1px;
  }
  .tile-2.-apply-mb.-border > :not(:nth-child(n+3)),
  .tile-3.-apply-mb.-border > :not(:nth-child(n+4)) {
    margin-top: -1px;
  }
}
.tile {
  justify-content: space-between;
}
.tile.-around {
  justify-content: space-around;
}
.tile.-center {
  justify-content: center;
}

/* ------------------------------------------------
 * margin
 */
.margin { margin: 10px; }
.margin-l { margin-left: 10px; }
.margin-r { margin-right: 10px; }
.margin-t { margin-top: 10px; }
.margin-b { margin-bottom: 10px; }
.margin-h { margin-left: 10px; margin-right: 10px; }
.margin-v { margin-top: 10px; margin-bottom: 10px; }
.margin-20 { margin: 20px; }
.margin-l-20 { margin-left: 20px; }
.margin-r-20 { margin-right: 20px; }
.margin-t-20 { margin-top: 20px; }
.margin-b-20 { margin-bottom: 20px; }
.margin-h-20 { margin-left: 20px; margin-right: 20px; }
.margin-v-20 { margin-top: 20px; margin-bottom: 20px; }
.margin-5 { margin: 5px; }
.margin-l-5 { margin-left: 5px; }
.margin-r-5 { margin-right: 5px; }
.margin-t-5 { margin-top: 5px; }
.margin-b-5 { margin-bottom: 5px; }
.margin-h-5 { margin-left: 5px; margin-right: 5px; }
.margin-v-5 { margin-top: 5px; margin-bottom: 5px; }
.margin0 { margin: 0; }

/* ------------------------
 * padding
 */
.padding { padding: 10px; }
.padding-l { padding-left: 10px; }
.padding-r { padding-right: 10px; }
.padding-t { padding-top: 10px; }
.padding-b { padding-bottom: 10px; }
.padding-h { padding-left: 10px; padding-right: 10px; }
.padding-v { padding-top: 10px; padding-bottom: 10px; }
.padding-5 { padding: 5px; }
.padding-l-5 { padding-left: 5px; }
.padding-r-5 { padding-right: 5px; }
.padding-t-5 { padding-top: 5px; }
.padding-b-5 { padding-bottom: 5px; }
.padding-h-5 { padding-left: 5px; padding-right: 5px; }
.padding-v-5 { padding-top: 5px; padding-bottom: 5px; }
.padding-20 { padding: 20px; }
.padding-l-20 { padding-left: 20px; }
.padding-r-20 { padding-right: 20px; }
.padding-t-20 { padding-top: 20px; }
.padding-b-20 { padding-bottom: 20px; }
.padding-h-20 { padding-left: 20px; padding-right: 20px; }
.padding-v-20 { padding-top: 20px; padding-bottom: 20px; }
.padding0 { padding: 0; }


/* ------------------------
 * 画像系（写真のような感じにします） 
 */
.img-shadow {
  border: 6px solid #fff;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px #9e9e9e;
}

/* ------------------------------------------------
 * 開閉系　雑誌掲載情報・イベント情報・放射線測定結果
 */
.js-toggle-trigger,
.js-toggle-container > dt {
  cursor: pointer;
}
.js-toggle-trigger.-stripe {
  background-image: linear-gradient(
	  -45deg,
	  #f8f4f1 25%,
	  #FFF 25%,
	  #FFF 50%,
	  #f8f4f1 50%,
	  #f8f4f1 75%,
	  #FFF 75%,
	  #FFF
  );
  background-size: 15px 15px;
  background-attachment: fixed;
}
[data-js-toggle-type=height] .js-toggle-content {
  overflow-y: hidden;
}
.js-toggle-container .js-toggle-open::before {
  content: "\25BC"; /* ▼ */
}
.js-toggle-container .js-toggle-close::before {
  content: "\25B2"; /* ▲ */
}

/* ------------------------------------------------
 * 開閉メニュー 
 */
.minimize {
  border: 1px solid #CCC;
  border-radius: .75em;
  padding: .2em .5em;
  margin: .75em 0;
}
.minimize dt,
.minimize .btn {
  color: #06C;
  cursor: pointer;
  font-weight: bold;
  margin: .5em 0;
}
.minimize dd,
.minimize .list {
  margin: .5em 0;
  display: none;
}

/* ------------------------------------------------
 * POPUP IMAGE
 */
img.popup_image {
  cursor: url(https://www.binchoutan.com/common/src/popup_image/magnifying.png), url(https://www.binchoutan.com/common/src/popup_image/magnifying.cur), auto;
}
img.popup_image:hover {
  opacity: .75;
}
#popup {
  position: fixed;
  z-index: 9999;
  width: 0;
  height: 0;
}
#popup #popup_content {
  position: absolute;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: #FFF;
  border-radius: .5em;
  box-shadow: .25em .25em .5em .25em #666;
  cursor: url(https://www.binchoutan.com/common/src/popup_image/magnifying2.png), url(https://www.binchoutan.com/common/src/popup_image/magnifying2.cur), auto;
}
#popup #popup_content img {
  width: 100%;
  height: 100%;
}
#popup #popup_content img.closer {
  position: absolute;
  top: .5em;
  right: .5em;
  opacity: 0;
  width: auto;
  height: auto;
}
/* テキストでも拡大できる */
.popup_image_trigger {
  cursor: pointer;
  font-size: 12px;
  line-height: 2;
  color: #666;
}
.popup_image_trigger span {
  background: url(https://www.binchoutan.com/common/src/popup_image/magnifying.png) no-repeat left center;
  background-size: 18px;
  padding-left: 1.75em;
  display: inline-block;
  text-decoration: underline;
}

/* ------------------------------------------------
 * エラーページ
 */
.error .error-msg {
  margin-bottom: 3em;
}

/* ------------------------------------------------
 * 
 */
.spacing-5 > *{ margin-bottom: 5px; }
.spacing-10 > * { margin-bottom: 10px; }
.spacing-15 > * { margin-bottom: 15px; }
.spacing-20 > * { margin-bottom: 20px; }
.spacing-25 > * { margin-bottom: 25px; }
.spacing-30 > * { margin-bottom: 30px; }
.spacing-40 > * { margin-bottom: 40px; }
.spacing-50 > * { margin-bottom: 50px; }
[class*=spacing-] > :first-child {
  margin-top: 0;
}
[class*=spacing-] > :last-child {
  margin-bottom: 0;
}