@charset "utf-8";
body{ position:relative; z-index:0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size:16px; }
p,dl,h1,h2,h3,h4,h5,h6,li{ line-height:1.4; letter-spacing:2px; }
a{ transition: opacity 0.5s; }
.bg-common { position:relative; z-index:1; box-sizing:border-box; width:100%; height:100vh; padding:40px; overflow-y:scroll; }
.bg-common:before { content:''; position:fixed; top:0; left:0; z-index:-2; width:100%; height:100%; background:url(../images/top-bg.jpg) no-repeat center center; background-size:cover; background-attachment:fixed; }
.bg-common:after { content:''; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0)); }
.title-large { font-size:42px; margin:0 0 40px; letter-spacing:2px; }
.cap-middle { display:inline; font-size:18px; color:#444; letter-spacing:2px; line-height:2; }
.headline-center{ font-size:32px; font-weight:bold; color:#FFF; text-align:center; text-shadow:0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585,0px 0px 2px #e58585; }
.headline-underline{ font-size:21px; text-align:center; padding:0 0 10px; border-bottom:2px solid #e58585; }
.headline-bold{ font-size:28px; letter-spacing:2px; text-align:left; font-weight:bold; color:#e58585; text-shadow:0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff; }
.headline-bold:before{ content:url(../images/icon.png); height:21px; margin:0 10px 0 0; }
.list-num{ list-style-type:decimal; list-style-position:inside; }
.list-num li{ margin:20px 0 0; }
.list-num-small{ list-style-type:lower-roman; margin:20px 0 0 20px; }
.table{ display:flex; justify-content:flex-start; }
.table dt{ background:#e58585; color:#FFF; width:30%; padding:20px; border-bottom:1px solid #FFF; }
.table dd{ background:rgba(255,255,255,0.8); width:70%; padding:20px; border-bottom:1px solid #e58585; }
.table:last-of-type dt{ border-bottom:none; }
.table:last-of-type dd{ border-bottom:none; }
.mail{ padding:20px; background:rgba(255,255,255,0.8); font-size:18px; text-decoration:underline; text-decoration-color:#e58585; }
.text-cancel{ text-decoration:line-through; font-size:12px; }
.line-right{ position:relative; display:flex; justify-content:flex-start; align-items:flex-start; }
.line-right:before{ content:url(../images/line-pig.png); width:100px; }
.line-right p{ position:relative; width:100%; max-width:700px; padding:15px; margin:20px 0 0 20px; background:rgba(255,255,255,1); border:2px solid #e58585; border-radius:10px; }
.line-right p:before{ position:absolute; top:10px; left:-8px; display:block; content:''; width:10px; height:10px; transform:rotate(45deg) skew(-20deg,-20deg); background:rgba(255,255,255,1); border-bottom:2px solid #e58585; border-left:2px solid #e58585; border-radius:3px; }
.ex-image{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; padding:30px 0 0 20px; }
.ex-image img{ width:100%; max-width:335px; margin:0 20px 0 0; }
.ex-table{ max-width:900px; }
.ex-table img{ width:100%; }
.menu { margin:40px 0 0; }
.menu-button { position:relative; display:block; width:360px; padding:25px 0; margin:30px 0 0; text-align:center; font-size:21px; color:#FFF; letter-spacing:1px; background:linear-gradient(#e58585 0%, #db9191 100%); text-decoration:none; border-radius:50px; cursor:pointer; /*box-shadow:1px 1px 3px rgba(0,0,0,0.3);*/ }
.menu-button:after { content:url(../images/tail.png); position:absolute; right:-23px; top:0px; transition:0.2s; }
.menu-button:hover:after{ transform:rotate(30deg); }
.menu .router-link-exact-active { display:none; }
.footer { float:right; margin:60px 0 0; /*position:absolute; z-index:10; right:0; bottom:1%; padding:2px 10px;*/ }
.footer-link { margin:0 20px 0 0; color:#444; font-size:14px; text-decoration:underline; text-decoration-color:#e58585; }
@media only screen and (max-width:480px){
  .bg-common { padding:10px 20px; }
  .title-large img{ width:100%; max-width:550px; }
  .menu-button { width:80%; margin:30px auto 0; }
  .ex-image{ justify-content:center; }
  .ex-image img{ margin:20px 0 0; }
  .ex-table{ max-width:460px; }
}

/*Vue transition*/
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter, .fade-leave-to { opacity: 0; }
.menu-enter-active, .menu-leave-active { transition: opacity 0.5s; }
.menu-enter, .menu-leave-to { opacity: 0; }