@import url('https://fonts.googleapis.com/css?family=Alegreya|Norican');

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}

body{
font-family:"Alegreya","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#274a78;
background:#e9e4d4;
margin:0;
padding:0;text-align:center;}

@media screen and (min-width:801px){
.wrp{
width:800px;
margin:0 auto;}

.width{margin:30px;}

.act{
position:relative;
display:block;
margin:30px 17px;}

.text{
padding:30px;
border:solid 2px #e9e4d4;
box-shadow:0 0 0 5px #fff;}

.text img{
max-width:200px;
max-height:200px;}
}

@media screen and (max-width: 800px){
.wrp{
max-width:600px;
margin:0 auto;}

.width{margin:20px;}

.text{padding:30px 15px 20px;}

.text img{
max-width:150px;
max-height:150px;}

.act{
margin:30px auto;
display:inline-block;}
}

.width{
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
width:150px;
background:rgba(255,255,255,.5);
padding:0;
position: relative;}

.act img{
max-width:150px;
max-height:150px;}

.change{
text-align:center;
margin:20px;
padding:15px;}

.top{margin:30px 20px;}

.text{
background:#fff;
color:#554738;
line-height:200%;
font-size:13px;
margin:50px 5px 20px;
text-align:left;}

.text p{
line-height:150%;
border:solid 2px #e9e4d4;
color:#888;
margin:20px;
padding:10px;
font-size:10px;
}

.text img{
display:block;
margin:0px auto 50px;
border:solid 3px #fff;
box-shadow:0 0 0 1px #554738;}

.ft{
text-align:center;
margin:10px;}

.ft a{
text-transform:uppercase;
color:#274a78;
background:#e9e4d4;
margin:0 5px;
padding:2px 5px;
border-radius:5px;
display:inline-block;
width:50px;}

.ft a:hover{
border:none;
background:none;}

.con{margin:10px;}

.title{
font-size:15px;
color:#554738;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:10px 0;
padding:3px 5px;
border:solid 1px #554738;
background:rgba(255,255,255,.5);
display:inline-block;}

.title:hover{
border:solid 1px #554738;
background:#fff;}

header{
background:url(##背景画像URL##);
background-size:50px;
margin:0;
padding:20px;}

footer{
background-size:50px;
padding:15px;
margin:0;}

footer a{background:#e9e4d4;}

h1{
font-size:30px;
font-family:Norican ,はんなり明朝, sans-serif;
font-weight:normal;
color:#274a78;
margin:30px 20px 0;
line-height:100%;
display:inline-block;}

h1 p{
font-size:12px;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:0;
padding:0;
display:inline-block;}

h2{
font-size:15px;
color:#554738;
font-weight:normal;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:10px 0;
padding:3px 5px;
border:solid 1px #554738;
background:rgba(255,255,255,.5);
display:inline-block;}

h3{
font-size:24px;
color:#274a78;
font-weight:normal;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:0;
padding:3px 5px;
text-align:center;}

a{
color:#94846a;
text-decoration:none;
padding:0 3px;}

a:hover{border-bottom:solid 1px #698aab;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Alegreya Sans","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:none;
color:#554738;
border:solid 1px #554738;
margin:5px 10px;
padding:2px 5px;}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #274a78;
background:#274a78;
color:#e9e4d4;
}

