@charset "UTF-8";

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ 2カラム
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.row-2 {
  /* display: table; */
  table-layout: fixed;
  padding: 0 10px;
  margin-top: 15px;
}

.row-item {
  display: table-cell;
}

.row-2 .headline {
  font-size: 18px;
  line-height: 1em;
  font-weight: 600;
  margin: 8px 0 6px 0;
}

.inner {
  padding: 10px;
  font-size: 12px;
  line-height: 1.3;
  padding-bottom: 0;
  padding-top:0;
}

.fw600 {
  font-weight: 600;
}

.ta-right {
  text-align: right;
}

.list-notice li {
  text-indent: -1em;
  margin-left: 1em;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameA
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameA {
  /* width: 50%;
  padding-right: 15px; */
  position: relative;
}

.headline .small {
  font-size: .65em;
  vertical-align: middle;
}

/*====================================================================================
classNameA__title
====================================================================================*/
/*------------------------------------------
タイトル
------------------------------------------*/
.classNameA__title {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin:0 0 5px 0;
}

.classNameA__title > * {
  display: table-cell;
}

/*------------------------------------------
時間
------------------------------------------*/
.classNameA__time {
  color: #fff;
  width: 40px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1em;
  background-color: #2383d7;
  vertical-align: middle;
  border-radius: 4px;
}

/*====================================================================================
classNameA__top
====================================================================================*/
.classNameA__top {
  width: 100%;
  display: table;
  table-layout: fixed;
}

.classNameA__top > * {
  display: table-cell;
}

/*====================================================================================
classNameA__middle
====================================================================================*/
.classNameA__middle * {
  text-align: right;
  line-height: 1.4em;
}

/*------------------------------------------
天気アイコン
------------------------------------------*/
.classNameA__weather {
  width : 55px;
  height: 34px;
}

.classNameA__weather img {
  width: 100%;
}

/*------------------------------------------
気温
------------------------------------------*/
.classNameA__temp {
  font-weight: 600;
  font-size: 34px;
  vertical-align: middle;
  text-align: right;
}

/*====================================================================================
classNameA__bottom
====================================================================================*/
.classNameA__bottom * {
  color: #8c8c8c; 
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2em;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameB
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameB {
  width: 55%;
}

/*====================================================================================
タイトルエリア
====================================================================================*/
.classNameB__title {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin-bottom: 10px;
}

.classNameB__title > * {
  display: table-cell;
}

/*------------------------------------------
アロー
------------------------------------------*/
.classNameB__arrow {
  width: 20px;
  margin-right:15px;
}

.classNameB__arrow span {
  width: 20px;
  height: 20px;
  display: block;
  border: 1px solid #003586;
  border-radius: 20px;
  position: relative;
}

.classNameB__arrow span:after {
  content: "";
  display: block;
  width : 5px;
  height: 5px;
  border-left: 2px solid #003586;
  border-bottom: 2px solid #003586;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
  margin-left: -1px;
}

/*====================================================================================
コンテンツエリア
====================================================================================*/
/*------------------------------------------
コンテンツ
------------------------------------------*/
.classNameB__content {
  display: table;
  table-layout: fixed;
}

/*------------------------------------------
アイテム
------------------------------------------*/
.classNameB__item {
  width: 50%;
  display: table-cell;
}

.classNameB__item:first-child {padding-right: 2.5px;}
.classNameB__item:last-child  {padding-left : 2.5px;}

/*------------------------------------------
画像
------------------------------------------*/
.classNameB__images {
  width: 100%;
  padding-top: 100%;
  position: relative;
  background-color: #eee;
}

.classNameB__images img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

/*------------------------------------------
テキスト
------------------------------------------*/
.classNameB__text {
  color: #8c8c8c;
  line-height: 1.2em;
  font-size: 12px;
}


/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameC
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameC {
  width: 100%;
  display: table;
  table-layout: fixed;
  padding: 0px 15px;
  margin-bottom: 5px;
}

.classNameC > * {
  display: table-cell;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameD
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameD {
  width: 170px;
  padding: 5px 0;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 100px;
}

.classNameD__icon {
  width: 13px;
  display: inline-block;
}


/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameE
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.row-2.classNameE {
  padding: 0;
  margin-top: 5px;
}

.row-2.classNameE > *:first-child{border-right: 1px solid #fff;}
.row-2.classNameE > *:last-child{border-left: 1px solid #fff;}

.classNameE__item {
  width: 100%;
}

.classNameE__title {
  font-weight: 600;
  border-left: 4px solid #000;
  line-height: 1em;
  padding-left: 5px;
}

.classNameE__switch {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin-bottom: 10px;
}

.classNameE__switch__item {
  display: table-cell;
  color: #fff;
  text-align: center;
  line-height: 1em;
  padding: 7.5px 0;
  background-color: #000;
  margin-bottom: 15px;
}

.classNameE__switch__item[data-type="off"] {background-color: #95ccfa;}
.classNameE__switch__item[data-type="on"]  {background-color: #33a1ff;}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameG
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameG {
  display: table;
  table-layout: fixed;
  margin: 18px 0 0;
}

.classNameG__item {
  width: 70px;
  display: table-cell;
  padding: 0 5px;
}
.classNameG__content {
  width : 70px;
  height: 70px;
  background-color: #eee;
  border: 3px solid #ccc;
  border-radius: 100px;
}

.classNameG__content * {
  text-align: center;
}

/*====================================================================================
タイトル
====================================================================================*/
.classNameG__title {
  font-size: 13px;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  margin: 9px 0 3px 0;
}

/*====================================================================================
数字
====================================================================================*/
.classNameG__num {
  font-weight: 600;
  line-height: 1em;
  font-size: 20px;
  color:black;
}

.classNameG__unit {
  display: block;
  font-size: 12px;
  font-weight: 300;
  line-height: 1em;
  color:black;
}

/*====================================================================================
テキスト
====================================================================================*/
.classNameG__text {
  font-size: 12px;
  text-align: center;
}

/*====================================================================================
緑
====================================================================================*/
.classNameG__content.green {background-color: #f6ffeb; border-color: #69c700;}
.classNameG__content.green .classNameG__title {color: #69c700;}

.classNameG__content.blue {background-color: #ebecff; border-color: #32a1ff;}
.classNameG__content.blue .classNameG__title {color: #32a1ff;}

.classNameG__content.red {background-color: #ffebeb; border-color: #ff7070;}
.classNameG__content.red .classNameG__title {color: #ff7070;}


/*====================================================================================
黄色
====================================================================================*/
.classNameG__content.yellow {background-color: #fffad2; border-color: #ffa800;}
.classNameG__content.yellow .classNameG__title {color: #ffa800;}


/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ classNameH
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.classNameH {
  display: table;
  table-layout: fixed;
  width:100%;
  margin: 9px auto 0;
}

.classNameE__title + .classNameH {
  margin-top: 5px;
}

.classNameH + .classNameE__title {
  margin-top: 15px;  
}

.classNameH > * {
  display: table-cell;
  vertical-align: middle;
  line-height: 1em;
}

.classNameH__title {
  font-size: 10px;
  width: 35%;
  text-align: center;
}

.classNameH__blink {
  font-size: 0;
  line-height: 1em;
  padding: 0 4px;
  width:50%;
}

.classNameH__blink > * {
  display: inline-block;
  margin: 0 .5px;
}

.classNameH__blink > * {
  width: 4px;
  height: 4px;
  background-color: #eee;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.classNameH__blink.green  .on, .classNameH__notice.green  {background-color: #7ace16; border-color: #60c500;}
.classNameH__blink.yellow .on, .classNameH__notice.yellow {background-color: #ffbb04; border-color: #ffb000;}
.classNameH__blink.orange .on, .classNameH__notice.orange {background-color: #FF7E00; border-color: #FF7000;}
.classNameH__blink.red    .on, .classNameH__notice.red    {background-color: #ff624b; border-color: #ff381b;}
.classNameH__blink.purple .on, .classNameH__notice.purple {background-color: rgb(143, 63, 151); border-color: rgb(143, 30, 80);}
.classNameH__blink.maroon .on, .classNameH__notice.maroon {background-color: #7E0023; border-color: #720010;}
.classNameH__blink.blue   .on, .classNameH__notice.blue   {background-color: #32a1ff; border-color: #325088;}

.classNameH__notice {
  font-size: 10px;
  text-align: center;
  width:40%;
  background-color: #888; border-color: #333;
  border-radius: 10px;
  padding: 2px;
  font-weight: bold;
  color: white;
}