@charset "utf-8";

/*##################### 日記の書き方ポイントページ #####################*/
h2.columnAttenHead{
  background: #009fa8;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 10px 0 0;
  padding: 10px 15px 8px;
  width: calc(100% - 30px);
}

.diaryColumn{
  letter-spacing: 0.5px;
  padding-left: 0!important;
}

/*---------------------------------------
* コラムを１カラムにしたら消去してOK
*----------------------------------------*/
#main-contents.allColumn{
  float: unset;
  font-size: 15px;
  width: 960px;
}

/*---------------------------------------
* TOPバナー
*----------------------------------------*/
.diaryColumn h2.howtoAttenHead{
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  width: 960px;
}

#main-contents .howto_diary{
  color: #555;
  font-size: 15px;
  line-height: 1.5;
}

/*---------------------------------------
* 日記について
*----------------------------------------*/
.introduction{
  background-color: #fff;
  background-image: url(/diary_list/images/diary_howto/bg.jpg);
  border-radius: 10px;
  margin-top: 30px;
  padding: 25px;
  text-align: center;
}
.introduction_inner{
  align-items: center;
  display: flex;
}

.introduction .intro-left,
.introduction .intro-right{
  width: 150px;
}
.introduction .intro-right{
  align-self: flex-end;
}
.introduction .intro-center{
  padding: 0 10px;
}

.introduction h3{
  border-top: 2px dashed #ffb282;
  border-bottom: 2px dashed #ffb282;
  font-size: 25px;
  margin-bottom: 25px;
  padding: 5px 0 2px!important;
}

.introduction p{
  font-size: 18px;
  margin-bottom: 10px;
}
.introduction p:last-child{
  margin-bottom: 0;
}

/*---------------------------------------
* 各説明ブロック
*----------------------------------------*/
.main_block h4{
  background: #469cca;
  color: #fff;
  font-size: 25px;
  padding: 10px 20px;
}
.main_block h4 .fa{
  margin-right: 5px;
}
.main_block .block_inner{
  margin-top: 30px;
}
.main_block .block_inner .box_item .item_txt{
  margin: 0 15px 0 5px;
}
.main_block .main_box{
  background: #fff;
  padding: 15px;
}
.main_block .main_box .box_ttl{
  color: #30475f;
  font-size: 30px;
  margin: 0 25px;
}
.main_block .main_box .box_item{
  align-items: center;
  display: flex;
  margin: 25px 25px 40px;
}
.main_block .main_box .box_item .item_img{
  text-align: center;
  width: 28%;
}
.main_block .main_box .box_item .item_img img{
  width: 100%;
}

.main_block .main_box .box_item .item_txt{
  background: #fcfeff;
  border: 3px solid #b1dbf1;
  border-radius: 20px;
  margin: 0 0 0 10px;
  padding: 15px;
  width: calc(72% - 10px);
}
.main_block .main_box .item_txt .ttl{
  color: #712e24;
  font-size: 24px;
  margin: 0 0 5px;
}
.main_block .main_box .item_txt .desc{
  font-size: 16px;
  line-height: 1.6;
}

.main_block .block_inner-ng h4{
  background: #ed8086;
}
.main_block .block_inner-ng .main_box .box_item{
  flex-direction: row-reverse;
}
.main_block .block_inner-ng .main_box .box_item .item_txt{
  background: #fffcfc;
  border: 3px solid #f2b0c1;
  margin-right: 10px;
}

.main_block .block_inner-attn h4{
  background: #eea445;
}
.main_block .block_inner-attn .main_box .box_item .item_txt{
  background: #fffdfb;
  border: 3px solid #ffc58d;
}



/* 一番下の細かい説明ブロック */
.main_block .main_box .postscript{
  border-top: 2px dashed #ab7a62;
  margin-bottom: 15px;
  padding: 25px 10px 0 10px;
}

.main_block .main_box .postscript .item_img{
  text-align: center;
}

.main_block .main_box .postscript .item_img img{
  display: block;
  margin: 0 auto;
}

.main_block .main_box .postscript ul{
  font-size: 18px;
  margin: 10px 0;
}

.main_block .main_box .postscript li:before{
  color: #d84545;
  content: "\f00d";
  font-family: FontAwesome;
  margin-right: 5px;
}

.main_block .main_box .postscript .attention .fa{
  margin-right: 5px;
}

.main_block .main_box .postscript .attention{
  color: #d50000;
  font-size: 24px;
}

.main_block .main_box .postscript .item_txt{
  border-top: 1px dotted #ccc;
  margin-top: 20px;
  padding-top: 20px;
}

.main_block .main_box .postscript .item_txt:first-of-type{
  border-top: none;
  padding-top: 0;
}

.main_block .main_box .postscript .item_txt .ttl{
  margin-bottom: 0.5rem;
}

.main_block .main_box .postscript .item_txt .desc{
  margin: 0 0.5rem 0 1.5rem;
}

.main_block .main_box .postscript .item_img{
  margin: 30px 0 20px;
}



/*##################### ネコ日記を書く前に #####################*/
.dc_top h2.columnAttenHead{
  background: no-repeat;
  border-bottom: 3px solid #ec6941;
  box-shadow: none;
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 15px;
  padding: 10px 10px 5px;
  width: 620px;
}
.dc_top .topTxt{
  background: #fff;
}
.dc_top .topTxt h3{
  padding: 5px 10px!important;
  background: #009fa8;
  color: #fff;
  font-size: 125%;
  margin-top: 20px;
}
.dc_top h4{
  display: none;
}
.dc_top .topTxt p{
  padding: 10px 15px;
  line-height: 1.7;
}

.dc_menu{
  background: #fff;
  font-size: .95rem;
  line-height: 1.8rem;
  letter-spacing: 0.5px;
}
.dc_menu .columnAttenWrap{
  margin-top: 20px;
  padding-top:10px;
}
.dc_menu .diaryAttenBlock{
  padding: 10px 15px;
  background: #fff;
}
.dc_menu .diaryAttenBlock h3{
  margin: 0 0 15px;
  padding: 5px 10px 3px 5px;
  border-bottom: 2px solid #f1a84a;
  color: #800;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
}
.dc_menu .diaryAttenBlock h3:first-of-type{
  padding-top: 0;
}
.dc_menu .diaryAttenBlock h3:before{
  font-family: FontAwesome;
  content: "\f1b0";
  margin-right: 8px;
}
.dc_menu .diaryAttenBlock .diaryAttenContent{
  padding: 0 10px;
}
.dc_menu .diaryAttenBlock p{
  line-height: 1.7;
}
.dc_menu .diaryAttenBlock ul{
  margin: 10px 0;
  font-size: 0.95rem;
}
.dc_menu .diaryAttenBlock ul li{
  line-height: 1.9;
}
.dc_menu .diaryAttenBlock ul i.fa{
  margin-right: 8px;
}
.dc_menu .diaryAttenBlock ul i.fa-heart{
  color: #ee8899;
}
.dc_menu .diaryAttenBlock ul i.fa-star{
  color: #f4ab01;
}
.dc_menu .diaryAttenBlock ul i.fa-info-circle,
.dc_menu .diaryAttenBlock ul i.fa-ban{
  color: #9b4913;
}n-right: 8px;
}