@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: Lucida Grande,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:36px;
text-align:left;
color:#333;
min-width:1080px;
background: url("../images/bg.jpg") fixed;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{ margin:0 auto; text-align:center;}

p{ line-height:1.5em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
p{ line-height: 1.5em;}
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

/*ヘッダー*/
h1{ background: #df352d; color: #fff; text-align: center; font-size: 18px; padding: 0.5em;}
#header{ background: url("../images/catch_bg.jpg") center center no-repeat;}
#catch{ width: 1080px; height: 600px; margin: auto; position: relative;}
#catch h2{ position: absolute; left: 0; right: 0; top: 30px; width: 1020px; margin: auto; background: #008ae3; color: #fff; font-size: 54px; line-height: 1.25em; letter-spacing: 0.05em; border: 10px double #fff; padding: 0.25em; text-align: center; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#catch h2 strong{ color: #faf078;}
#catch .catch_ico{ position: absolute; width: 180px; left: 30px; bottom: -3px;}
#catch #catch_txt{ position: absolute; right: 60px; bottom: 10px; width: 540px;}
@media screen and (max-width:767px){
h1{ font-size:3vw; padding: 0.5em;}
#header{ background:none;}
#catch{ width:100%; height:auto; position: relative;}
#catch h2{ top:3vw; width:94%; font-size:6.6vw; letter-spacing: 0.1em; border:1.5vw double #fff; padding: 0.25em;}
#catch .catch_ico{ width:30vw; left:auto; bottom:auto; right: 3vw; top: 36vw;}
#catch #catch_smp2{ position: relative;}
#catch #catch_txt{ left:0; right:0; bottom:auto; top: -21vw; width:90%; margin: auto;}
}

/*フッター*/
#footer{ box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
p.copyright{ text-align:center; margin:0; padding:1em; background:#df352d; color:#fff; font-size:16px; letter-spacing:0.1em;}
@media screen and (max-width:767px){
p.copyright{ font-size:2.4vw; letter-spacing:0; padding: 1em 0;}
}

/*メイン*/
#content{ width: 1080px; background: #fff; margin: auto; padding: 60px 0; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
section{ width:100%; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:960px;}
@media screen and (max-width:767px){
#content{ width: 100%; padding: 6% 0;}
.maincontent { padding:0; margin:0 auto; width:94%;}
}

#lead{ border: 16px double #df352d; background: #fff; padding: 30px 15px; text-align: center; position: relative; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#lead strong{ text-align: center; font-size: 60px; letter-spacing: 0.05em; line-height: 1.25em; color: #df352d;}
#lead figure{ margin: 30px auto;}
#lead span.ico01{ position: absolute; left: 30px; bottom: 30px;}
#lead span.ico02{ position: absolute; right: 30px; bottom: 30px;}
@media screen and (max-width:767px){
#lead{ border:2vw double #df352d; padding:3%;}
#lead strong{ font-size:7.5vw; letter-spacing: 0.1em;}
#lead figure{ margin:3% auto;}
#lead figure img{ height: 9vw;}
#lead span.ico01{ position: absolute; left:3vw; bottom:15vw; width: 20vw;}
#lead span.ico02{ position: absolute; right:3vw; bottom:13.5vw; width: 20vw;}
}

p.lead2{ text-align: center; font-weight: bold; line-height: 1.25em; margin: 30px auto 0}
#flag{ margin: -60px auto 60px;}
@media screen and (max-width:767px){
p.lead2{ font-size:5vw; margin:4.5% auto 0}
#flag{ margin: -4.5vw auto 6%;}
}

#present_tit{ text-align: center; margin: 60px auto;}
#present_tit p{ text-align: center; line-height: 1.5em; margin-bottom:0.25em;}
#present_tit p.step{ display: block; background: #df352d; color: #fff; font-size: 1.33em; padding: 0.33em; font-weight: bold;}
#present_tit .bg_y{ font-size: 1.33em; line-height: 1.25em;}
@media screen and (max-width:767px){
#present_tit{ margin:6% auto;}
#present_tit p{ font-size:5vw}
#present_tit p.step{ line-height: 1.25em;}
}

#present{ border: 30px solid #fcebea; background: #fff; padding: 15px; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#present dl{ display: table; table-layout: fixed; width: 100%;}
#present dl dt{ display: table-cell; vertical-align: middle; width: 390px;}
#present dl dd{ display: table-cell; vertical-align: middle; padding-left: 15px; position: relative;}
#present dl dd span.ico03{ position: absolute; right: 30px; bottom: 45px; width: 80px;}
#present dl dd ul{ letter-spacing: -1em; text-align: center;}
#present dl dd ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 15px;}
#present dl dd ul li.qr img{ border: 1px dotted #333; width: 120px;}
#present dl dd ul li.btn img{ box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px; width: 240px; border-radius: 4px;}
#present dl dd p{ font-size: 16px; display: inline-block; margin-top: 30px;}
@media screen and (max-width:767px){
#present{ border:3vw solid #fcebea; padding:3%;}
#present dl{ display:block;}
#present dl dt{ display:block; width: 100%; text-align: center;}
#present dl dt img{ width: 100%;}
#present dl dd{ display:block; padding:3% 0 0;}
#present dl dd span.ico03{ right:0vw; bottom:16vw; width:8vw;}
#present dl dd ul li{ margin:0 3vw;}
#present dl dd ul li.qr img{ width:20vw;}
#present dl dd ul li.btn img{ width:45vw; border-radius:1vw;}
#present dl dd p{ font-size:3.5vw; margin:9% auto 0;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}