footer{
font-family: 'Cinzel Decorative', cursive;
}
a {
  text-decoration: none;
 color:#FDDEA5
}

html {
	min-height: 100%;
}

body{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#89c3ed+0,ff5c5c+100 */
background: #89c3ed; /* Old browsers */
background: -moz-linear-gradient(top,  #89c3ed 0%, #ff5c5c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #89c3ed 0%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #89c3ed 0%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89c3ed', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */

background-repeat: no-repeat;
}
section.contents {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    padding: 3px;
    min-width: 16%;
}

.top{
margin-top:1em;
width:100%;
text-align:center;
font-family: 'Emilys Candy', cursive;
}

.yazirusi{
    margin-top:1em;
    width: 100%;
    text-align: center;
    color: #EAF4FB;
    font-size: 20px;
    font-family: Recursive, sans-serif;
}

.fld{
width:100%;
text-align:center;
margin:0 auto;
}


.box{
border:3px solid;
border-color:#84A2D4;
width:70px;
height:70px;
border-radius:50%;
background-color:#EAF4FC;
position:relative;
overflow: hidden;
}

.box_content{
text-align:justify;
vertical-align:middle;
}

.box_content_text{
position:absolute;
top:0;
left:0;
}

.box_day{
background-color: #FDEFF2;
    border: dashed 2px #DEB068;
    padding: 0.2em 0.5em;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    left: -22px;
    font-size: 10px;
    color: #A86F4C;
    font-family: 'Fredericka the Great', cursive;
    z-index: 2;
}

.matome{
width:100px;
hight:100px;
position:relative;
}

.daimei{
    margin:0.5em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #C1E4E9;
    border-bottom: solid 2px #C1E4E9;
}
.daimei:before, .daimei:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #ABCED8;
}
.daimei:before {left: 10px;}
.daimei:after {right: 10px;}
.daimei p {
    margin: 0; 
    padding: 0;
font-family: 'Poiret One', cursive;
font-size:30px;
text-align:center;
}

.backBtn-grid{
font-family: 'Recursive', sans-serif;

}

.backBtn{
}.page{
  margin        : auto;                 /* サンプル用 中央寄せ  */
  box-sizing    : border-box;           /* 罫線も含む長さ       */
  padding       : 28px;                 /* 文字の位置合わせ     */
  font-size     : 30px;                 /* 文字サイズ           */
  text-align    : center;               /* 文字位置             */
  color         : #7f4600;              /* 文字色               */

  background    : rgba(42, 64, 115, 0.2);              /* BOXの背景色          */
  border-top    : 5px outset #f8f4e6;   /* 枠線の指定（上）     */
  border-left   : 9px outset #f8f4e6;   /* 枠線の指定（左）     */
  border-radius : 68px;                  /* 角丸の指定           */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width:50vw;
}

.page_day{
width: 50%;
    text-align: right;
    font-size: 12px;
    margin-bottom: 36px;
   font-family: 'Sofia', cursive;
}

.page_title{
width: 50%;
    font-size: 20px;
    text-align: left;
font-family: 'M PLUS 1p', sans-serif;
}

.page_pic{
width: 100%;
    margin-bottom: 24px;
    padding-top: 12px;
}

.page_text{
    width: 100%;
    text-align: left;
    font-size: 13px;
    padding: 2px;
font-family: 'Noto Serif JP', serif;
}

.page_center{
    height: 1px;
    border-width: 0px 0 0 0;
    /* background-image: -webkit-linear-gradient(left, transparent 0%,#008899 50%,transparent 100%); */
    background-image: linear-gradient(10deg, transparent 0%,#DBD0E6 50%,transparent 100%);
    width: 50vw;
    position: absolute;
    top: 70px;
    left: 0px;
    overflow: visible;

}

.page_center::after{
      position: absolute;
    top: -0.7em;
    left: 41%;
    display: inline-block;
    content: "\25C7\25C8\2600\FF65\263E\25C8\25C7";
    background: none;
    color: #EAF4FC;
    font-size: 0.2em;
}

.page_center::before{
    position: absolute;
    top: -1.1em;
    left: 40.9%;
    display: inline-block;
    content: "\a0\25C7\3000\3000\25C7";
    background: none;
    color: #EAF4FC;
    font-size: 0.1em;
}
