*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit}
a{text-decoration:none;outline:none}
a img{border-style:none}
ul,li{list-style-type:none}
html{
min-height:100%;
position:relative;
font-size:62.5%
}
body{
background:#fff url(image/heartcheck.png);
background-size: cover;
color:#311818;/* 文字色 */
font-size:1.2em;/* 文字の大きさ */
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
letter-spacing:.1em;
line-height:1.5;
text-align:center;
overflow-y:scroll;
overflow-wrap:break-word;
word-wrap:break-word
}
a {
color:#f19d9e
}
a:hover {
color:#311818
}
#contents a:hover{
text-decoration:underline
}
/*header*/

header{
background:url(image/back02.gif) repeat-x 50% 100%;
color:#fff;
position:relative;
min-height:80px;
width:100%;
min-width:1000px; /* #contentsのwidthと同じ数値 */
z-index:30
}
#header-inner{
padding:10px
}
/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents{
position:relative;
margin:0 auto;
width:1000px; /* 全体の幅・大きさはここで変更 */
}
#main{
background-color:#BC8585;
border-radius:5px;
margin:10px auto;
padding:10px;
position:relative;
z-index:10
}

/*--------------------------------------------------------
下
--------------------------------------------------------*/
footer{
background:url(image/back03.gif) repeat-x 50% 0;
color:#fff;
position:absolute;
bottom:0;left:0;
width:100%;
min-width:1000px; /* #contentsのwidthと同じ数値 */
}
.footer-inner{
padding:10px;
text-align:center
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
font-size:1.5em;
font-weight:700;
line-height:1;
padding:10px 0;
text-align:center;
width:100%
}
nav li{
display:inline-block; /* 横並び */
position:relative; /* サブメニュー表示位置の基準 */
height:2em;line-height:2em; /* メニュー高さ */
}
nav li a,nav li span{
color:#f19d9e;
display:inline-block;
padding:0 5px
}
nav li a:hover,nav li span:hover{
color:#fff;
transition:.6s
}
/* サブメニュー */
.sub-menu{
background:#f19d9e;
position:absolute;
width:200px; /* サブメニュー幅 */
z-index:30
}
.sub-menu li{
display:block; /* 横並びをリセット */
visibility:hidden; /* 隠す */
overflow:hidden; /* 隠す */
height:0; /* 隠す */
width:100%
}
.sub-menu li a{
color:#311818;
display:block
}
.sub-menu li a:hover{
background:#311818
}
nav li:hover .sub-menu li{
visibility:visible;
overflow:visible;
height:2em;line-height:2em; /* サブメニュー高さ */
transition: .5s
}
#open{display:none}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
  height: 500px;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
}


/* Right column */
.rightcolumn {
  float: right;
  width: 25%;
  padding-left: 20px;
}
/* image styling for article preview images*/
.previewimg {
  width:1000px;
  height:100px;
  overflow: hidden;
  border-radius: 10px;

}

/* Add a card effect for articles */
.card {
  background-color: #BC8585;
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}




/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}