/* common */
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
*{margin:20px 0px; padding:0;
color:#222;
border:none; box-sizing:border-box;
font-family:'Mukta',"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
list-style-type:none;}

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

img{max-width:100%;}

br{margin:0px;}

div.icon{
width: 60px;
text-align: center;
margin : 0 auto
}

body{width:100%;
background-image:url("pict/bg.png");
font-size:13.5px;
line-height:2.1;
text-align:justify; word-break: break-word;
}

/* end common */

/* headline&link&mark */
h1{margin-bottom:3px;
color:#222;
font-size:14px;
font-family: 'Hina Mincho', serif; }
h1 a{
color:#222;
text-decoration:none;
font-family: 'Hina Mincho', serif;
}
h2{margin-bottom:0px;
color:#aaa;
font-size:13px; text-align:center;font-weight:400;}

h3{margin:0 auto 15px auto; padding-bottom:10px;
width:70%; max-width:280px;
border-bottom:#222 solid 1px;
font-size:11px;}

a{text-decoration:none; color:#aaa;}
a:hover {filter: blur(2px);}
mark{background:#eef2f5;}

/* end headline&link&mark */

/* block */
main{max-width:640px;
margin:0 auto; padding:40px 35px 50px 35px;
background:#fff;
box-shadow:rgba(0,0,0,.06) 0px 0px 30px 0px;
border-radius:10px;}

@media (min-width:540px){main{padding:40px 60px 50px 60px;}}
#image{margin:0 auto 20px auto;
height:230px;
background-image:url("pict/block.jpg");
background-position:center center;
background-size:cover;
border-radius:8px;}

nav{position:relative;
margin:-50px auto 40px auto; padding:10px 15px;
width:80%; max-width:280px;
color:#aaa; background:#fff;
box-shadow:rgba(0,0,0,.09) 0px 0px 15px 0px;
border-radius:5px;
font-size:10.5px; text-align:center;}

aside{font-size:10.5px; text-align:center;}

.arrow{display:block;
width:10px; height:10px;
margin:40px auto 50px auto;
border-bottom:solid 1px #aaa;
border-left:solid 1px #aaa;
-ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
/* end block */

/* animation */
.shutter{
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  background-color:#fff;
  z-index:99;
  -webkit-animation: byeShutter 3.8s forwards;
  animation: byeShutter 3.8s forwards;
}
.logo {
  position: absolute;
  width: 70px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: logo 1s forwards;
  animation: logo 1s forwards;
  animation-delay: 0.2s;
}
@keyframes byeShutter {
60% {
  opacity: 1;
}
100% {
  display: none;
  opacity: 0;
  z-index: -1;
}
}
@keyframes logo {
0% {
  opacity: 1;
}
  
50% {
  transform: rotate(0deg);     
}
  100% {
  transform: scale(1.0);
  }
}
/* animation */