/* Background pattern from subtlepatterns.com */

*{margin:0; padding:0;
border:none; outline:none; border-radius:0;
font-weight:400;}

*:before, *:after{position:absolute; content:"";}

body, mark, input, textarea{font-family:'Caudex',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",Meiryo,"メイリオ", serif;
font-size:12px;
color:#444;}

h2, main{position:relative;}

footer, h3, input, textarea{background:#fff;}

body{padding-bottom:25px;
width:100%;
background:#fff;
letter-spacing:.125em; line-height:1.9; text-align:center;
word-break:break-all;
font-feature-settings:"palt";
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

hr{
    height: 0;
    margin:60px 0;
    padding: 0;
    border: 0;
}

.hr-0{margin:100px 0;
border:none;
height:1em;
text-align:center;
}

.hr-0::before{
  position: absolute;
  content: '\f3a5';
  color: #FE99C1;
  font-size: 35px;
  font-family: "Font Awesome 5 Free";
　font-weight: 900;
  margin-left: -20px;
  margin-top: -30px;
 animation: anime6 3s alternate infinite;
}

@keyframes anime6{
  0% {color:#FEBBE2;}
  25% {color:#FCDAB2;}
  50% {color:#AAEEDA;}
  75% {color:#BCE8FD;}
  100% {color:#FEBBE2;}
}

/* 枠 ここから */
html:before, html:after, body:before, body:after, mark, #dia, footer, nav a,
input, textarea {background:url("#背景画像URLの独自タグ#");}

html:before, html:after, body:before, body:after{position:fixed;
z-index:9999;}
html:before, html:after{width:100vw; height:12px;}
html:before{top:0;}
html:after{bottom:0;}
 
body:before, body:after{width:12px; height:100vh; top:0;}
body:before{left:0;}
body:after{right:0;}

#dia, footer{position:fixed; z-index:9999; transform:rotate(45deg);}

#dia{top:-57px; left:0; right:0;
margin:0 auto;
width:102px; height:102px;}

footer{position:fixed; z-index:9999; transform:rotate(45deg);}

footer{bottom:-22px; left:0; right:-22px;
margin-left:auto;
width:70px; height:70px;}

footer a{display:block;
bottom:22px; right:22px;
color:#444;}

#icon{display:block;
position:fixed; z-index:10000;
bottom:13px; right:13px;
width:20px; height:20px;}
/* 枠 ここまで */

a{text-decoration:none;}

a:hover{opacity:.45;}

header{
text-align:center;
margin:50px auto 10px;}

#title{
font-family:"Allerta Stencil", 小夏, sans-serif;
line-height:150%;
font-size:18px;
color:#820041;
position:relative;
margin:20px 30px 30px;
padding:15px;
width:300px;
text-align:center;
background-image:url(3rdbg.jpg);
z-index:0;
border-radius: 20px 20px 20px 20px;
display:inline-block;
}

#title:before{
content: "";
position: absolute;
bottom: -8px; left: 50%;
margin-left: -9px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 9px 9px 0 9px;
border-color: #f6f6f6 transparent transparent transparent;
z-index: 0;
}

#title:after {
content: "";
position: absolute;
bottom: -10px; left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #f6f6f6 transparent transparent transparent;
z-index: -1;
}


h2{margin:0 auto 3em auto;padding-top:70px;
font-family:"Cormorant Garamond","Sawarabi Mincho",serif;
font-size:25px;
text-align:center;}

h2:after{bottom:0; left:0; right:0;
margin:0 auto;
width:1em; height:1px;
background:#444;}

h3{display:inline-block;
margin-bottom:.9em; padding:.2em .7em .2em .85em;
font-size:10px;}

mark{padding:.25em .3em .15em .4em;}


::selection{color:#fff; background:rgba(210,88,122,.85);}
::-moz-selection{color:#fff; background:rgba(210,88,122,.85);}

main{display:-webkit-flex; display:flex;
-webkit-flex-wrap:wrap; flex-wrap:wrap;
 -webkit-justify-content:left; justify-content:left;
margin:0 auto;}

nav a, li p a{display:inline-block; color:#444;}

nav{text-align:center; font-size:14px;}

nav a{margin-bottom:.9em;}

li{list-style-type:none;
margin:0 20px 30px 20px;
width:200px; height:100px;
font-size:11px; text-align:left;}

li img{display:block;}

li p{margin-top:.9em;padding:.3em 0 .3em 1.25em;
width:200px;
border-left:#ccc double 3px;
line-height:1;}

li p span{display:inline-block; margin-top:.75em;
color:#999; font-size:10px;}

article{margin:0 auto; padding:20px 14% 20px 14%;
max-width:640px;
font-family:Meiryo,Osaka,"MS ゴシック", serif;
font-size:1rem; text-align:justify;}

article h2{margin-bottom:4em; padding-top:60px;
font-size:20px; letter-spacing:.2em;}

article h2:after{bottom:-1.5em;}

#afterwords{margin:8em 0;
padding:2.5em 0;
color:#aaa;
font-size:11.5px;
border-top:#ccc double 3px; border-bottom:#ccc double 3px;}



select,input[type],textarea{
font-family: 'Josefin Sans',"メイリオ", sans-serif;
font-size:11px;
margin:10px 0;
padding:5px;
width:50%;
height:30px;
color:#434343;
background:#fff;
border:double #bbb 1px;
border-radius:8px;
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:60px;
}

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

select{width:auto;}

#formWrap {
	width:100%;
	margin:9em 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:50%;
	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;
}
}

@media (max-width:479px){main{max-width:240px;}}

@media (min-width:480px)  and (max-width:719px){main{max-width:480px;}}

@media (min-width:720px) {main{max-width:720px;}}