@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*h2タグ*/
.article h2{
	background-color:#fff;
	color:#ffffff;  /*文字の色*/
	border-left:10px solid #ffcc00;  /*見出し左線色・太さ*/
	border-right:2px solid #ffcc00;
	border-bottom:2px solid #ffcc00;
	border-top:2px solid #ffcc00;
	background-color:#ff3300;
	padding:10px;
	margin-top:60px /*見出しとその直前の文字の距離*/
}

/*h3タグ*/
.article h3{
	border:none;
	display:inline-block;
	color:#ff3300; /*文字の色*/
	border-top:1px solid #ff3300; /*見出し上線色・太さ*/
	border-bottom:1px solid #ff3300; /*見出し下線色・太さ*/
	margin-top:20px; /*見出しとその直前の文字の距離*/
	margin-bottom:0px; /*見出しとその直後の文字の距離*/
	background-color:#ffd5d3;
	width:100%;
}

.article h4 {
  border-top: 1px solid #cc0000;
  border-bottom: 1px solid #cc0000;
  background-color:#ffebef;
  color:#cc0000;
}

.article h5 {
  border-top: 1px solid #cc9999;
  border-bottom: 1px solid #cc9999;
  color:#cc9999;
}

.article h6 {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color:#000;
}

.blogcard-type .blogcard-label {
  display: block;
  margin:10px 0;
}

.site-name-text-link {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  display: none;
}
.site-name-text-link:hover {
  color: inherit;
}

.site-name-text {
  font-size: 1.1rem;
  position: absolute;
  top:0;
  transform: translate(-50%, 0);
  line-height:1.0em;
  
}
.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.alignleft {
  float: left;
  margin-right: 8px;

}

.alignright {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  min-width: 240px;
  list-style: none;
  padding: 0;
  background-color: #fafbfc;
  z-index: 99;
  text-align: center;
  }
 
 /* Button */
.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  background-color: #222222;
}

/* Button Text */
.slicknav_menu .slicknav_menutxt {
  color: #FFF;
  font-weight: bold;
  text-shadow: 0 1px 3px #000;
}

/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}

.slicknav_menu {
  background: #ff9900;
  padding: 5px;
}

.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
}

.slicknav_nav, .slicknav_nav ul {
  list-style: none;
  overflow: hidden;
}

.slicknav_nav ul {
  padding: 0;
  margin: 0 0 0 20px;
}

.slicknav_nav .slicknav_row {
  padding: 5px 10px;
  margin: 2px 5px;
}

.slicknav_nav a {
  padding: 5px 10px;
  margin: 2px 5px;
  text-decoration: none;
  color: #fff;
}

.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
  padding: 0;
  margin: 0;
}

.slicknav_nav .slicknav_row:hover {
  border-radius: 6px;
  background: #ff6600;
  color: #fff;
}

.slicknav_nav a:hover {
  border-radius: 6px;
  background: #ff6600;
  color: #fff;
}

.slicknav_nav .slicknav_txtnode {
  margin-left: 15px;
}

.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 12px;
  height: 44px;
}

.slicknav_nav .caption-wrap,
.slicknav_nav .item-label,
.slicknav_nav .item-description {
  display: inline;
}
.slicknav_nav .item-description {
  margin-left: 1em;
}

.slicknav_menu {
  display: none;
}

.navi-in > ul .sub-menu a {
  padding-left: 3px;
  padding-right: 3px;

}
.navi-in > ul .sub-menu ul {
  top: -60px;
  left: 60px;
  position: relative;

}
.navi-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 13px;
  transition: all 0.6s;

}
.navi-in a:hover {
  background-color: #ffb100;
  transition: all 0.6s;
  color: #ccc;
  text-decoration: none;
}
.navi-in a:hover > ul {
  display: block;
}

.sns-share-buttons ,.sns-buttons a:link{
	color:#ccc !important;
}

/*contactform7*/
.must{
	color: #fff;
	margin-right: 10px;
	padding: 4px 6px;
	background: #f1a239;
	border-radius: 10px;
	font-size:1.1rem;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 4px 6px;
	background: #fdd6ea;
	border-radius: 10px;
	font-size:1.1rem;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin: 10px 10px 0 0;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: #fee0a5;
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%;
	height: 80px;
	background: #f36130;
	color: #555;
	font-size: 24px;
	font-weight: 600;
	border-radius:10px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: #cc0000;
	font-weight: 600;
	font-size:1.2rem;
}

.notice-area-link {
  display: block;
  text-decoration: none;
  font-weight:bolder;
}
.notice-area-link:hover {
  opacity: 0.9;
  font-weight:bolder;
}

.notice-area {
  color: #fff;
  text-align: center;
  background-color: #4cae4c;
  padding: 0.4em;
  font-size: 1.0em;
  font-weight:bolder;
}

.author-description p{
	font-size:0.8rem;
}

#list {
	margin-top:10px;
}

.intro {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #000000;
  font-size:0.95rem;
  font-weight: normal;
  margin: 8px 0;
}

.flexarea {
  display: -webkit-box; 
  display: -moz-box;   
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-self:stretch;

}

.borderbox {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding:1.0rem;
	width:100%;
	margin:0.8rem 0;
	border:solid 1px #ccc;
}

.flexarea dt ,dd{
  font-size: 0.9rem;
  margin: 8px 0;
  color:#222;
  line-height:1.2rem;
}

.flexarea dd a:link{
color:#000000;
text-decoration:none;
}

.flexarea dd a:hover{
color:#ff0000;
text-decoration:none;
}

.entry-content p{
	line-height:1.4;
}

hr.style-one {
  border: 0;
  height: 1px;
  background: #000;
  background-image: -webkit-linear-gradient(left, #cfcfcf, #000, #cfcfcf);
  background-image: -moz-linear-gradient(left, #cfcfcf, #000, #cfcfcf);
  background-image: -ms-linear-gradient(left, #cfcfcf, #000, #cfcfcf);
  background-image: -o-linear-gradient(left, #cfcfcf, #000, #cfcfcf);
  width: 95%;
  margin: 0.5rem auto;
}

.clr{clear: both;}

.gold {
  color: #fabf14;
}
.silver {
  color: #999999;
}
.bronz {
  color: #964c07;
}

.fon10 {
  font-size: 76%;
}
.fon11 {
  font-size: 84%;
}
.fon12 {
  font-size: 92%;
}
.fon13 {
  font-size: 100%;
  color:#cc0000;
  font-weight:bold;
}
.fon14 {
  font-size: 108%;
	text-align:center;
	color:#000;
	font-weight:bold;
}
.fon16 {
  font-size: 123%;
}

.site-name-text-link {
  color: #333;
  text-decoration: none;
  font-weight: normal;
}
.site-name-text-link:hover {
  color: inherit;
}

.site-name-text {
  font-size: 28px;
  display:none;
}

.navi-in a:hover {
  background-color: #79b0d5;
  transition: all 0.7s;
  color: #333;
}

.ranking-item-description p {
  font-size: 0.8em;
}

a:link{color:#fefefe;}
a:visited {color:#999999;}
a:hover {color:#ff9900;}
a:active {color:#ff0000;}

#recolist dl {
	background-color:#fff8ee;
	padding:1.0rem 0 0 0;
	text-align:center;
	border-top:solid 5px;
	border-color:#fdbe6b;
}
#recolist dt {
	margin: 0 1.0rem;
	background-color:#efd9bd;
	text-align:left;
	padding:0 0.6rem 0 0.6rem;
	border-left:solid 10px;
	border-color:#ff8105;
}

#recolist dd {
	text-align:left;
	padding:0 0.8rem 0.2rem 0;
}

.scname{
	text-align:center;
	background-color:#fdbe6b;
	padding:1.5rem 0;
	position: relative;
    z-index: 1;

}
.scname a:link{
	text-decoration:none;
	font-size:1.2rem;
	position: absolute;
    top: 0.4rem;
    left: 0;
    width: 100%;
    z-index: 2; 
	}
.scname a:hover{
	background-color:#cc0000;
	position: absolute;
    top: 0.4rem;
    left: 0;
    width: 100%;
    z-index: 2; 
}

/*本文下カテゴリ*/
.cat-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #ff6600;
  border-radius: 2px;
  word-break: break-all;
  border: 1px solid #ff3300;
}
.cat-link:hover {
  opacity: 0.8;
  color: #fff;
  border: 1px solid #ff1100;
}

/************************************
** モバイルメニュー
************************************/
.navi-in > .menu-mobile {
  display: none;
}
.navi-in > .menu-mobile .sub-menu {
  display: none;
}

/************************************
** フッターメニュー
************************************/
.navi-footer-in > .menu-footer {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: center;
  margin: 0;
}
.navi-footer-in > .menu-footer li {
  width: 120px;
  border-left: 1px solid #ccc;
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 1px solid #ccc;
}
.navi-footer-in a {
  color: #fdfdfd !important;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: all 0.7s;
}
.navi-footer-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #000000 !important;
}

.navi-footer-in a:visited {
  color: #333;
}

.footer-widgets h3{
	color:#fff;
	font-weight:normal;
	font-size:1.0rem;
	text-align:center;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*800px以上---------------------------------------------------------------------------*/
@media screen and (min-width: 800px) {

	section h2 {
    font-size: 2.6rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    color: #ffffff;
    background: #000033;
    background-image: radial-gradient(#333366 20%, transparent 0),
    radial-gradient(#333366 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    border-bottom: solid 5px #000000;
    padding:0.6rem 0;
    margin:0;
}

  .flexarea h3 {
  position: relative;
  padding: 0.6em;
  background: #000000;
  color:#ffffff;
  margin:0.5rem 0 1.5rem;
  border-bottom: solid 5px #ccc;
  text-align:center;
}

.flexarea h3:after {
  position: absolute;
  content: '';
  top: 110%;
  left: 30px;
  border: 10px solid transparent;
  border-top: 15px solid #ccc;
  width: 0;
  height: 0;
}
  
.flexarea h3 a {
	color:#ffffff;
	text-decoration:none;
	opacity: 0.9;
}

.flexarea h3 a:hover {
	color:#ff9900;
	text-decoration:none;
	opacity: 1;
}

  .flexarea h2 {
    font-size: 1.3rem;
    margin: 0.8rem auto;
    color: #fff;
    font-family: fantasy;
    text-align: center;
  }
  

  .flexarea h4 {
    position: relative;
    padding: 0.6em 0.6em;
    background: -webkit-linear-gradient(to right, rgb(0, 104, 165), transparent);
    background: linear-gradient(to right, rgb(65, 173, 206), transparent);
    color: #ffffff;
    font-size: 1.0rem;
    margin :0.8rem 0;
    text-align:left;
  }
	a:link{color:#000;}
	a:visited {color:#000;}
	a:hover {color:#ff9900;}
	a:active {color:#ff0000;}
	
  .t_link a:link{
    transition: background-color 0.8s;
    color: #ffffff;
    border-radius: 8px;
    font-weight: bold;
    background-color: #ff6600;
    border: 2px solid #ffcccc;
    opacity: 0.8;
    padding: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
	margin-top:0.8rem;
  }

  .t_link a:hover {
    color: #ffff00;
    background: #b60303;
    border-radius: 8px;
    border: 2px solid #ff5555;
    opacity: 1;
    padding: 8px;
    margin-top:0.8rem;
  }
	
	.t_link a:visited {
    color: #ffffff;
    border: 2px solid #ffcccc;
  }
/*
  .sps img {
    margin: 0 2px auto;
    clear: right;
  }
*/

/*下半分のマーカー色（km）*/
.marker-under-yellow {
  background: linear-gradient(transparent 60%, #fabf14 90%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, #ff9999 90%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, #bbf5f9 90%);
}
	
  .banner a:hover{
	margin: 0 auto;
	background-color: transparent;
    opacity: 0.8;
  }

  section h4 {
    text-align: center;
  }

  section #comment p {
    width: auto;
    margin: 0.5rem 0 0.5rem;
    line-height: 1.5rem;
    font-size:0.95rem;
  }

  article .explain {
    width: 90%;
    margin-left: 30px;
  }

  .flexarea {
    display: flex;
    justify-content: space-around;
    margin: 0;
    background: #ffffff;
    
  }
  
  .boxcenter {
  width:100%;
    text-align: left;
    line-height: 1.6em;
    margin: 0;
    font-size: 0.9rem;
    background: #fcfcfc;
    border: #a7a7a7 1px solid;
    padding: 0 0.5rem;
    display: flex;
    justify-content: space-between;
  flex-direction: column;
  }

  .boxcenter h4 {
    position: relative;
    padding: 0.6em 0.6em;
    background: -webkit-linear-gradient(to right, rgb(255, 51, 0), transparent);
    background: linear-gradient(to right, rgb(255, 204, 204), transparent);
    color: #cc0000;
    font-size: 1.0rem;
    margin :0.8rem 0;
    text-align:left;
  }
  
  .boxr {
    text-align: left;
    line-height: 1.6em;
    margin: 0 0 0 1.2rem;
    font-size: 0.9rem;
    border: #a7a7a7 1px solid;
    background: #fcfcfc;
    padding: 0 0.5rem;
    width:100%;
    display: flex;
    justify-content: space-between;
  flex-direction: column;
  }

  .boxr img {
    /*float: left;
    margin-right: 1.2rem;*/
  }

  .boxl {
    width:100%;
    text-align: left;
    line-height: 1.6em;
    margin: 0;
    font-size: 0.9rem;
    background: #fcfcfc;
    border: #a7a7a7 1px solid;
    padding: 0 0.5rem;
    display: flex;

  }
  
  .boxl img {
    /*float: left;
    margin-right: 1.2rem;*/
  }

}

/*768px以下---------------------------------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 799px) {
	section h2 {
    font-size: 2.6rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    color: #ffffff;
    background: #000000;
    background-image: radial-gradient(#333366 20%, transparent 0),
    radial-gradient(#333366 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    border-bottom: solid 5px #0000ff;
    padding:0.9rem 0;
}

  .flexarea h3 {
   position: relative;
    font-size: 1.6rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
      "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    color: #ffffff;
    margin: 0 0 1.4rem 0;
    padding: 0.6rem 0 0.6rem;
    border-bottom: solid 5px #999;
    background:#000000;
  }

.flexarea h3:after {
  position: absolute;
  content: '';
  top: 109%;
  left: 5%;
  border: 15px solid transparent;
  border-top: 15px solid #999;
  width: 0;
  height: 0;
}

.flexarea h3 a {
	color:#ffffff;
	text-decoration:none;
	opacity: 0.9;
}

.flexarea h3 a:hover {
	color:#ff9900;
	text-decoration:none;
	opacity: 1;
}

  .flexarea h4 {
    position: relative;
    padding: 0.5em 0.5em;
    background: -webkit-linear-gradient(to right, rgb(1, 85, 163), transparent);
    background: linear-gradient(to right, rgb(12, 147, 180), transparent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    
  }

  section #comment p {
    width: auto;
    margin: 15px 0 15px;
    line-height: 1.5rem;
  }

	a:link{color:#000000;}
	a:visited {color:#000000;}
	a:hover {color:#ff9900;}
	a:active {color:#ff0000;}
	
  .t_link a:link {
    transition: background-color 0.5s;
    color: #ffffff;
    border-radius: 8px;
    font-weight: bold;
    background-color: #ff0000;
    border: 2px solid #ffcccc;
    opacity: 0.8;
    padding: 8px;
    display: block;
    text-align: center;
    margin-top: 1.0rem;
    text-decoration:none;
    font-size:1.1rem;
  }

  .t_link a:hover {
    color: #000;
    background: #fabf14;
    border-radius: 8px;
    border: 2px solid #ffcc00;
    opacity: 1;
    padding: 8px;
  }

  .sps img {
    margin: 0 auto;
    display: block;
    padding: 5px 0;
  }

 .gold {
    text-align: center;
    color: #ff8c00;
    background: -webkit-linear-gradient(0deg, #ffffff, #00aeff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:1.5rem;
  }

  .intro {
    font-size: 1.0rem;
    width: auto;
    text-align: left;
    line-height: 1.4em;
    color:#000000;
  }

  .banner {
    text-align: center;
    margin:0 auto;
	  opacity: 0.8;
  }
  
  .banner a:hover {
    background-color: transparent;
    opacity: 1;
  }

  .flexarea {
    flex-direction: column;
    font-size: 0.9rem;
  }

  .boxr {
    text-align: left;
    line-height: 1.6em;
    background-color: #f1f1f1;
    padding: 8px;
    margin: 0;
    font-size: 0.9rem;
    color: #000000;
  }
  
  .boxl {
    text-align: left;
    line-height: 1.6em;
    background-color: #fefefe;
    padding: 8px;
    color: #000000;
  }

/*下半分のマーカー色（km）*/
.marker-under-yellow {
  background: linear-gradient(transparent 90%, #fabf14 90%);
}

.marker-under-red {
  background: linear-gradient(transparent 90%, #ff151f 90%);
}

.marker-under-blue {
  background: linear-gradient(transparent 90%, #0f5d86 90%);
}

}

/*480px以下*/
@media screen and (max-width: 480px){

   .navi-footer-in > .menu-footer li.menu-item a {
    padding: 0;
    width: 100%;
    font-size:0.9em;
    line-height:1.6rem;
  }
	section h2 {
	font-size: 2.6rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
      "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    color: #fff;
    background: #000033;
    background-image: radial-gradient(#333366 20%, transparent 0),
      radial-gradient(#333366 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    border-bottom: solid 5px #0000ff;
}

.flexarea h3 {
  position: relative;
  padding: 0.6em;
  background: #000033;
  border-bottom: solid 5px #ff9702;
  color:#ffffff;
  text-align:center;
  margin:0 0 1.2rem;
}

.flexarea h3:after {
  position: absolute;
  content: '';
  top: 108%;
  left: 10%;
  border: 15px solid transparent;
  border-top: 15px solid #ff9702;
  width: 0;
  height: 0;
  
}

.flexarea h3 a {
	color:#ffffff;
	text-decoration:none;
	opacity: 0.9;
}

.flexarea h3 a:hover {
	color:#ff9900;
	text-decoration:none;
	opacity: 1;
}  
  .flexarea h4 {
  padding: 0.8em;/*文字周りの余白*/
  color: #ffffff;/*文字色*/
  background: #ff9702;/*背景色*/
  border-left: solid 5px #ff3904;/*左線（実線 太さ 色）*/
}

  section #comment p {
    width: auto;
    margin: 10px 15px 0;
    line-height: 1.3rem;
    font-size: 0.9rem;
  }

.navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
text-overflow: ellipsis;
}

	a:link{color:#000000;}
	a:visited {color:#000000;}
	a:hover {color:#ff9900;}
	a:active {color:#ff0000;}
	
  .t_link a:link {
    transition: background-color 0.8s;
    color: #000000 ;
    border-radius: 8px;
    font-weight: bold;
    background-color: #ff2a00;
    border: 2px solid #ffaf00;
    opacity: 0.8;
    padding: 8px;
    display: block;
    text-align: center;
    margin: 1rem 0.8rem 1rem;
    text-decoration:none;
  }

  .t_link a:hover {
    color: #fff;
    background: #000000;
    border-radius: 8px;
    border: 2px solid #27caff;
    opacity: 1;
    padding: 8px;
  }
	.t_link a:visited{
	color: #fff;
	border: 2px solid #fabf14;
	}
/*
  .idx img {
    margin: 0 auto;
    display: block;
    padding: 5px 0;
  }
*/
  .gold {
    text-align: center;
    color: #ff8c00;
    background: -webkit-linear-gradient(0deg, #ecff1a, #ff8c00, #ff0080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:1.5rem;
  }

  .intro {
    font-size: 0.9rem;
    width: auto;
    text-align: left;
    line-height: 1.2em;
    color:#000000;
    background-color: #fff4dd;
    padding:0.8rem;
  }

  .banner {
    text-align: center;
  }

  .banner a:hover {
    background-color: transparent;
    opacity: 1;
  }

  .flexarea {
    margin-bottom: 0px;
    flex-direction: column;
    font-size: 0.85rem;
  }
/*
  .box:nth-child(even) {
    flex-direction: column;
  }
*/
  .boxr {
    text-align: left;
    padding: 8px;
    margin: 0;
    line-height: 1.4em;
    color: #000000;
    background-color: #fff;
  }
  
  .boxr dd{
  text-align: left;
  line-height: 1.4em;
  color:#000;
  }
  
.boxl dt{
  text-align: left;
  line-height: 1.2em;
  color: #000;
  }
	
.boxl dd{
  text-align: left;
  line-height: 1.4em;
  color: #000;
  }
	
  /*
  .box:nth-child(even) .boxr {
    text-align: left;
  }
*/
  .boxl {
    text-align: left;
    padding: 8px;
    line-height: 1.4em;
    background-color: #fff;
    color: #000;
  }
}