@import url('https://fonts.googleapis.com/css?family=Comfortaa|Flamenco|Life+Savers|Mountains+of+Christmas|Satisfy');
@font-face
{
font-family:"こころ明朝" ;
src: url('https://cdn.leafscape.be/kokoro/Kokoro_web.woff2')
     format("woff2");
}
@font-face
{
font-family: ロゴたいぷゴシック;
src: url('https://cdn.leafscape.be/logotype/logotype_web.woff2')
     format("woff2");
}
@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
     format("woff2");
}
*{margin:0; padding:0;}
body,input{font-family:'Flamenco',Meiryo,Osaka,"MS ゴシック",sans-serif; letter-spacing:1.2px;}
body{color:#222; background-color:#fefefe; font-size:13px;}
#wrap{margin:70px auto 10px; width:85%; max-width:500px; line-height:2.5;}
#wrap2{margin:40px auto 10px; width:85%; max-width:500px; line-height:1.8;}
h1{font-size:18px; text-align:center; color:#F6847D;}
h3{font-size:14px; color:#888; margin:-33px 0 0 5px;}
h3 span{font-family:"こころ明朝" ; background-color:#fff; padding:0 10px;}
.con{margin-top:30px; border:1px solid #eee; border-radius:10px; padding:15px 20px 10px;}
.page{padding:0 0 20px;}
.page h3{font-size:15px; color:#F6847D; margin:-16px 0 8px 15px;}
a{text-decoration:none; color:#444;}
a:hover{opacity:0.7;}
.box,.name{text-align:center;}
.box{margin:7px 0 20px; line-height:2;}
.box a{background:linear-gradient(transparent 65%,#eee 65%); padding:0 2px;}
.box input{display:none;}
label{display:inline-block;}
label:hover{opacity:0.5;}
.panel{transition:0.2s ease; height:0; overflow:hidden;}
.box input:checked + .panel{height:auto; padding:5px 0 0;}


.ttll{margin-right:5px;}
.ttll a{color:#000; padding:4px 3px 0 4px;}

.font1{color:#999; font-family:'Life Savers', "ロゴたいぷゴシック", cursive;}
.font1 a{background:url(img/lg.png) center;}
.font2{color:#999; font-family:'Life Savers', "ロゴたいぷゴシック", cursive;}
.font2 a{background:url(img/mmzk.png) center;}
.font3{color:#999; font-family:'Life Savers', "ロゴたいぷゴシック", cursive;}
.font3 a{background:url(img/akn.png) center;}
.font4{color:#999; font-family:'Life Savers', "ロゴたいぷゴシック", cursive;}
.font4 a{background:url(img/trk.png) center;}

#title{color:#888; background-color:#eee; margin-bottom:30px; padding:40px 0 15px 20px;}
#text{font-size:0.9rem; color:#666; padding:10px 30px; font-family:Meiryo,Osaka,"MS ゴシック",serif;}
#nav{text-align:center; margin-top:20px;}
#nav a{border:3px double #eee; border-radius:10px; padding:6px 12px; margin:5px; color:#F6847D;}

.af{margin:20px 0 10px; padding:10px 20px; color:#888; background-color:#eee; font-size:90%; text-align:right;}

p{font-family:'Life Savers',"ロゴたいぷゴシック"; font-size:90%; margin:0; color:#999;}


hr{
    height: 0;
    margin:70px auto;
    padding: 0;
    border: 0;
}

.hr-lg{
    height: 30px;
    width: 30px;
    background-image:url(img/lg.png);
    background-repeat:no-repeat;
    background-position:50% 0;
    border-radius: 50%;
}

.hr-mmzk{
    height: 30px;
    width: 30px;
    background-image:url(img/mmzk.png);
    background-repeat:no-repeat;
    background-position:50% 0;
    border-radius: 50%;
}

.hr-akn{
    height: 30px;
    width: 30px;
    background-image:url(img/akn.png);
    background-repeat:no-repeat;
    background-position:50% 0;
    border-radius: 50%;
}

.hr-trk{
    height: 30px;
    width: 30px;
    background-image:url(img/trk.png);
    background-repeat:no-repeat;
    background-position:50% 0;
    border-radius: 50%;
}


select,input[type],textarea{
font-family: 'Josefin Sans',"メイリオ", sans-serif;
font-size:85%;
margin:10px 0;
padding:5px;
width:50%;
height:30px;
color:#434343;
background:#fff;
border:1px solid #eee;
border-radius:10px;
letter-spacing:2.2px;
line-height:1.8;
box-shadow:none;
text-shadow:none;
outline:none;
vertical-align:middle;
}

input[type="submit"]{
cursor:pointer;
width:65px;
border:3px double #eee; color:#F6847D;
}

input[type="submit"]:hover{color:#aaa;}

select{width:auto;}

#formWrap {
	width:100%;
	margin:2em auto 0;
	color:#555;
	line-height:120%;
	font-size:90%;
	text-align:center;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}



/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:100%;
	margin:2em auto 0;

}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:auto;
	height:30px;
	padding:5px;
	font-size:90%;
	display:inline;
}
select{width:30%;}

input[type="submit"], input[type="reset"], input[type="button"] {
	width:auto;
	height:30px;
}
}