body{
    margin: 0;
  font-size : 16px;
  line-height : 1.5em;
  font-family : "AR Pゴシック体M";
  

  color : gray;
  background-color : rgb(255, 206, 157);
}

a{
  text-decoration : none;
  
  color : silver;
  font-weight : bold;
  font-family : AR新藝体E;
}


a:hover{
  color : orange;
}


/* ====================================
main-box1 aリンク傾く
==================================== */

.main-box1 a {
  display: inline-block;
  transition: .3s;
}
.main-box1 a:hover {
  transform: rotate(5deg);
}


/* ====================================
main-box1 aリンク傾く終わり
==================================== */

#pack{
  max-width: 600px;
  margin : auto;
  padding-top : 0px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 0px;
}

#header,#main,#footer,img {
    width: 100%;
  height : auto;
}

#header h1{
  
  height : auto;
  margin-top : -3px;
  padding-top : 10px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
  color : white;
  background-color : rgb(128, 128, 0);
  font-size : 1.5em;
  font-weight : bolder;
  
}
#main{
    margin: 0;
  padding-top : 0px;
  padding-left : 0px;
  padding-right : 0px;
  padding-bottom : 0px;
}
#footer{
    margin: 0;
  background-color : rgb(119, 0, 0);
  text-align : center;
  font-size : 13px;
  padding-top : 5px;
  padding-bottom : 5px;
}

#footer a{
  color : white;
}




.main-box1{
	-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
  padding-top : 10px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;border-width : 5px;border-style : solid;border-color : rgb(128, 128, 0);
  background-color : rgb(255, 255, 242);
}

.main-box2{
	-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
  padding-top : 10px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;border-width : 5px;border-style : solid;border-color : rgb(128, 128, 0);
  background-color : rgb(255, 255, 242);
}

.main-box1 p{
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
}

.main-box2 p{
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
}

.main-box1 img{
  padding-top : 3px;
  padding-left : 3px;
  padding-right : 3px;
  padding-bottom : 3px;
  margin-top : 3px;
  margin-left : 3px;
  margin-right : 6px;
  margin-bottom : 3px;
  width : 32%;
  height : auto;
  float : left;
border-width : 1px;border-style : solid;border-color : silver;
}

.main-box2 img{
  padding-top : 3px;
  padding-left : 3px;
  padding-right : 3px;
  padding-bottom : 3px;
  margin-top : 3px;
  margin-left : 6px;
  margin-right : 3px;
  margin-bottom : 3px;
  width : 32%;
  height : auto;
  float : right;
border-width : 1px;border-style : solid;border-color : gray;
}


/* ====================================
ハートアニメーションを使った見出しデザイン3
==================================== */


.main-box1 h2 {
position: relative;
color: #333333;
text-shadow: 0 0 2px white;
}
.main-box1 h2:before {
content: "";
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: -15px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}


/* ====================================
ハートアニメーションを使った見出しデザイン3終わり
==================================== */


/* ====================================
ハートマークの見出しデザイン2
==================================== */

.main-box2 h3{
	position: relative;
padding: 10px;
padding-left:2em;
}

.main-box2 h3::before{
content: "◇";
color: #FF9100;
font-size:1.8em;
position: absolute;
left: 0;
top: -0.05em;
}

.main-box2 h3::after{
content: "◇";
font-size:1.1em;
position: absolute;
left: 0.6em;
top: 0.6em;
color: #325A8C;
}

/* ====================================
ハートマークの見出しデザイン2 終わり
==================================== */


/* ====================================
ボタン 赤
==================================== */

.btn{
    width:100%;
    height:50px;
    line-height:50px;
}
.btn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#CD0000;
    text-align:center;
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    transition: all 0.6s ease;
}
.btn a:hover{
    background:#FFC4C4;
    color:#FF0000;
    margin-left:0px;
    margin-top:0px;
    box-shadow:none;
}


/* ====================================
ボタン 赤　終わり
==================================== */


.center{
  text-align : center;
}