@charset "UTF-8";
/* CSS Document */
html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html, body { height:100%; background-color:#fff; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
.clearfix{ clear:both;}

.tophead{ background-image:url(../img/head.jpg); background-position:center top; height:44px;}
.bigbg{ background-image:url(../img/bg.jpg); background-position:center top; background-size:cover;}
.main{ background-image:url(../img/main.png); background-position:center top; height:60vh; background-size:cover; position:relative;}
.main h1{ text-indent:-9999px;}
.main .logo20th{ position:absolute; right:1%; top:0;}
.wrapper{ width:90%; max-width:800px; margin:0 auto; padding-bottom: 5%; text-align:center;}
.wrapper h4{ font-size:400%; color:#bf4f79; line-height:1.2;}
.wrapper h4 span{ font-size:68%;}
.wrapper h5{ font-size: 120%; color: #555; font-weight: 400; padding:3% 0;}
.wrapper img.read{ width:100%;}
.btns{ width:100%; borer-top:solid 1px #ccc; border-bottom:solid 1px #ccc; }
.btns .box{ width:43.92%; float:left; text-align:center; padding:3%;}
.btns .box.left{ border-right:solid 1px #ccc; background-image:url(../img/bg_suelle.jpg);}
.btns .box.right{ background-image:url(../img/bg_lydie.jpg);}
.btns .box img.logo{ width:87%; padding-bottom:4%; max-width:500px;}
.btns .left h4{ padding-bottom:3%; font-size:130%;}
.btns .right h4{ padding-bottom:3%; font-size:130%;}
.subbox{ width: 90%; max-width: 500px; margin: 8% auto 0;}
.subbox_inner{ width:50%; display:inline-block; text-align:center;}
.subbox_inner img{ width:98%;}

.spec{ border-bottom:solid 1px #ccc; padding-top:5%; background-image:url(../img/bg.jpg); background-position:center top; background-size:cover;}
.spec h3{ float:left; width:6em;}
.spec .spec_inner{ width:90%; max-width:900px; margin:0 auto 40px; border-bottom: solid 1px #999;}
.spec .last{ border-bottom:none;}
.spec dl{ line-height:1.5; padding-bottom:40px; display:table; padding-left:10%;}
.spec dt{ float: left; width: 8em; display: block; font-weight:600;}
.spec dd{ display: table; padding-bottom:7px; font-weight:400;}
.spec dd span{ color: #ab2b2b;}
.spec dd span.notice{ color: #666666; font-size: 75%;}

.footer{ text-align:center; font-size:80%; padding:50px 0 30px; width:90%; margin:0 auto; line-height:1.5;}
.footer img{ padding:4px 4px 15px;}
.footer a{ color:#333; text-decoration:none;}
.footer a:hover{ color:#C00;}

.attention {
    padding: 0.5em 1em;
    margin: 2em 2em;
    font-weight: bold;
    color: #e01f1f;/*文字色*/
    background: #FFF;
    border: solid 3px #e01f1f;/*線*/
    border-radius: 10px;/*角の丸み*/
}

.attention h3 {
    line-height: 3em;
}

.attention p {
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 760px) {
.hidesp{ display:none;}
.wrapper h4{ font-size:10vw;}
.wrapper h5{ font-size: 4.1vw; padding: 4% 0;}
.btns .box{ width:100%; display:inline-block; text-align:center; padding:10% 0%;}
.btns .box.left{ border-right:none; border-bottom:solid 1px #ccc;}
.spec h3{ float:none; display:block; border-bottom:solid 1px #ccc; margin:0 auto 20px; padding-bottom:15px; width:100%;}
.spec .spec_inner{ border-bottom:none; margin-bottom:0;}
.spec dl{ padding-left:0%;}
.spec dl img{ width:50%;}
.spec dt{ float:none; font-size:90%;}
.spec dd{ font-size:80%; padding-bottom:10px;}
.footer span{ font-size:70%; text-align:left;}
}
@media screen and (min-width: 1800px) {
.main{ height:; background-size:contain; background-repeat:no-repeat;}
}
@media screen and (max-width: 640px) {
.main .logo20th{ right: 1%; top: -18px;}
.main .logo20th img{ width:17vw;}
}