* {
margin:0;
padding:0
}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav,section {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
html {
font-size:62.5%
}
body {
/* 背景 */
background:#f7f7f7;
/* 文字色 */
color:#3f3f3f;
font-family:'Didact Gothic',Meiryo,メイリオ, sans-serif;
/* 文字の大きさ */
font-size:16px;
letter-spacing:0.4pt;
letter-height:1.8em;
overflow-wrap:break-word;
overflow-y:scroll;
margin:20px auto;
word-wrap:break-word
}
a {
color:#726ca3;
text-decoration:none
}
a:hover {
color:#ffffff;
}
a img {
border-style:none
}
/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper {
background:#ffffff;
border:#e1d9d7 solid 5px;
padding:10px;
margin:10px auto;
/* 全体の幅・大きさはここで変更(※1) */
width:418px
}
/*
(※1)
(116*メニューの1列の数)+70 でぴったりになります
(例)
116*メニュー1列5個+70＝650
width:650px
*/
/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
header{
padding:5px;
text-align:left;
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
.menu {
background-image:url(http://pic.prepics-cdn.com/1fcae5cb0d3f7/52993586_480x347.jpeg);
border:#e1d9d7 5px solid;
color:#fdf2d3;
padding:10px
}
.menu ul {
list-style-type:none
}
.menu li {
border:3px solid #fdf2d3;
font-family: 'Hammersmith One', sans-serif;
display:inline-block;
letter-spacing:2px;
font-size:40px;
font-weight:700;
line-height:50px;
margin:5px;
text-align:center;
vertical-align:top;
	background-color: transparent;
}

.menu li a {
color:#fdf2d3;
display:block;
height:100px;
width:100px
}
.menu li a:hover {
background-color: rgba(255, 255, 255, .2);
}
.menu li.pagetitle {
border:none
}
li span {
display: block;
font-size:.4em;
line-height:25px
}
/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents {
margin:10px 0;
text-align:left
}
#contents a {
color:#726ca3;
}
/*--------------------------------------------------------
下(フッター)
--------------------------------------------------------*/
footer {
border-top:#fdf2d3 solid 2px;
margin-top:20px;
padding:5px 0;
text-align:right
}
.pagetop {
float:left
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1 {
font-family: 'Rammetto One', cursive;
font-size:3em;
font-weight:700;
margin-bottom:20px;
text-align:left;
color:#726ca3;
letter-spacing:3px;
}
h2 {
background:url(image/back01.png);
border:4px solid #8c8673;
font-size:1.2em;
font-weight:700;
margin:1em 0;
padding:2px;
}
h3 {
border-left:8px solid #ffd9f5;
font-size:1.1em;
font-weight:700;
margin:1em 0;
padding-left:1em;
}
.co01 {
color:#e1d9d7
}
.co02 {
color:#8c8673
}
.ln01 {
border-left:8px solid #fdf2d3;
margin:5px 0;
padding:3px
}
.ln02 {
border-left:8px solid #8c8673;
margin:5px 0;
padding:3px
}
.navi {
border:1px solid #8c8673;
margin:10px 0;
padding:3px;
text-align:center
}
.pos {
border:3px solid #f2a8b1;
margin:5px 0;
padding:3px;
}
.title {
font-family: 'Hammersmith One', sans-serif;
color:#fff;
font-size:1.8em;
font-weight:700;
padding:30px 10px 0;
text-align:right
}
.txt {
border-left:1px solid #8c8673;
margin:1em;
padding:0 0 0 1em
}
dt {
clear:both;
float:left;
margin:0 0 5px;
width:16em
}
dd {
color:#8c8673;
background-color:#e1d9d7;
margin:0 0 5px 16em
}
em {
font-weight:700
}
input,textarea {
background-color:#fff;
border:1px solid #8c8673;
color:#8c8673;
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
font-size:1em;
margin:3px 0;
width:200px
}
textarea {
height:50px
}
img.frame {
border:6px solid #fff;
border-radius:3px;
box-shadow:4px 4px 5px #8c8673
}
.middle {
vertical-align:middle
}
.line01{
background:url() no-repeat 0 1%;
border-bottom:#e1d9d7 solid 2px;
font-weight:700;
font-family: 'Hammersmith One', sans-serif;
color:#726ca3;
letter-spacing:2px;
}
/*--------------------------------------------------------
回り込み解除
--------------------------------------------------------*/
.cf:before,.cf:after {
content:" ";
display:table
}
.cf:after {
clear:both
}
/*--------------------------------------------------------
スマホ、タブレット用
横幅480pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 480px) {
body {
font-size:1.4em;
margin:10px;
}
#wrapper {
width:100%
}
dt {
float:none;
margin:0 0 5px;
width:auto
}
dd {
color:#8c8673;
background-color:#f8f8ec;
margin-left:2em
}
.line01{
line-height:25px;
}
.menu {
text-align:center
}
.menu li {
font-size:30px;
letter-spacing:1px;
line-height:30px;
}
.menu li a {
height:70px;
width:70px
}
.menu li.pagetitle {
line-height:60px
}
li span {
line-height:20px
}
}