@charset "utf-8";
/* ------------------------------------------------------------
style.css
------------------------------------------------------------ */
/* reset
------------------------------------------------------------ */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
font-size:62.5%;
}
body {
margin:0;
padding:0;
font-size:1.6rem;
line-height:1.8
color: #333;
font-family: "M PLUS 1p", sans-serif;
font-weight: 400;
font-style: normal;
background:#fff;
-webkit-backface-visibility: hidden;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#f8f8f8;
z-index: 9999;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .8s ease;
transition: opacity .8s ease;
}
body.fadeout::after {
opacity: 1;
}
*, *::before, *::after {
box-sizing: border-box;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,address { margin:0px; padding:0px; list-style-type:none; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
img { vertical-align:middle; border:none; }
em { font-style:normal; }
a,button,area { outline:0; border:none; }
/* margin top
------------------------------------------------------------ */
.mt0 { margin-top:0px!important; }
.mt5 { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }
.mt35 { margin-top:35px!important; }
.mt40 { margin-top:40px!important; }
.mt45 { margin-top:45px!important; }
.mt50 { margin-top:50px!important; }
.mt55 { margin-top:55px!important; }
.mt60 { margin-top:60px!important; }
.mt65 { margin-top:65px!important; }
.mt70 { margin-top:70px!important; }
.mt75 { margin-top:75px!important; }
.mt80 { margin-top:80px!important; }
.mt85 { margin-top:85px!important; }
.mt90 { margin-top:90px!important; }
.mt95 { margin-top:95px!important; }
.mt100 { margin-top:100px!important; }
.mt1em { margin-top:1em!important; }
.mt2em { margin-top:2em!important; }
@media print, screen and (min-width: 769px) {
.mt0pc { margin-top:0px!important; }
.mt5pc { margin-top:5px!important; }
.mt10pc { margin-top:10px!important; }
.mt15pc { margin-top:15px!important; }
.mt20pc { margin-top:20px!important; }
.mt25pc { margin-top:25px!important; }
.mt30pc { margin-top:30px!important; }
.mt35pc { margin-top:35px!important; }
.mt40pc { margin-top:40px!important; }
.mt45pc { margin-top:45px!important; }
.mt50pc { margin-top:50px!important; }
.mt55pc { margin-top:55px!important; }
.mt60pc { margin-top:60px!important; }
.mt65pc { margin-top:65px!important; }
.mt70pc { margin-top:70px!important; }
.mt75pc { margin-top:75px!important; }
.mt80pc { margin-top:80px!important; }
.mt85pc { margin-top:85px!important; }
.mt90pc { margin-top:90px!important; }
.mt95pc { margin-top:95px!important; }
.mt100pc { margin-top:100px!important; }
}
@media (max-width: 768px) {
.mt0sp { margin-top:0px!important; }
.mt5sp { margin-top:5px!important; }
.mt10sp { margin-top:10px!important; }
.mt15sp { margin-top:15px!important; }
.mt20sp { margin-top:20px!important; }
.mt25sp { margin-top:25px!important; }
.mt30sp { margin-top:30px!important; }
.mt35sp { margin-top:35px!important; }
.mt40sp { margin-top:40px!important; }
.mt45sp { margin-top:45px!important; }
.mt50sp { margin-top:50px!important; }
.mt55sp { margin-top:55px!important; }
.mt60sp { margin-top:60px!important; }
.mt65sp { margin-top:65px!important; }
.mt70sp { margin-top:70px!important; }
.mt75sp { margin-top:75px!important; }
.mt80sp { margin-top:80px!important; }
.mt85sp { margin-top:85px!important; }
.mt90sp { margin-top:90px!important; }
.mt95sp { margin-top:95px!important; }
.mt100sp { margin-top:100px!important; }
}
/* nagative margin
------------------------------------------------------------ */
.nmt5 { margin-top:-5px!important; }
.nmt10 { margin-top:-10px!important; }
.nmt15 { margin-top:-15px!important; }
.nmt20 { margin-top:-20px!important; }
.nmt25 { margin-top:-25px!important; }
.nmt30 { margin-top:-30px!important; }
.nmt35 { margin-top:-35px!important; }
.nmt40 { margin-top:-40px!important; }
.nmt45 { margin-top:-45px!important; }
.nmt50 { margin-top:-50px!important; }
.nmt55 { margin-top:-55px!important; }
.nmt60 { margin-top:-60px!important; }
.nmt65 { margin-top:-65px!important; }
.nmt70 { margin-top:-70px!important; }
.nmt75 { margin-top:-75px!important; }
.nmt80 { margin-top:-80px!important; }
.nmt85 { margin-top:-85px!important; }
.nmt90 { margin-top:-90px!important; }
.nmt95 { margin-top:-95px!important; }
.nmt100 { margin-top:-100px!important; }
@media print, screen and (min-width: 769px) {
.nmt5pc { margin-top:-5px!important; }
.nmt10pc { margin-top:-10px!important; }
.nmt15pc { margin-top:-15px!important; }
.nmt20pc { margin-top:-20px!important; }
.nmt25pc { margin-top:-25px!important; }
.nmt30pc { margin-top:-30px!important; }
.nmt35pc { margin-top:-35px!important; }
.nmt40pc { margin-top:-40px!important; }
.nmt45pc { margin-top:-45px!important; }
.nmt50pc { margin-top:-50px!important; }
.nmt55pc { margin-top:-55px!important; }
.nmt60pc { margin-top:-60px!important; }
.nmt65pc { margin-top:-65px!important; }
.nmt70pc { margin-top:-70px!important; }
.nmt75pc { margin-top:-75px!important; }
.nmt80pc { margin-top:-80px!important; }
.nmt85pc { margin-top:-85px!important; }
.nmt90pc { margin-top:-90px!important; }
.nmt95pc { margin-top:-95px!important; }
.nmt100pc { margin-top:-100px!important; }
}
@media (max-width: 768px) {
.nmt5sp { margin-top:-5px!important; }
.nmt10sp { margin-top:-10px!important; }
.nmt15sp { margin-top:-15px!important; }
.nmt20sp { margin-top:-20px!important; }
.nmt25sp { margin-top:-25px!important; }
.nmt30sp { margin-top:-30px!important; }
.nmt35sp { margin-top:-35px!important; }
.nmt40sp { margin-top:-40px!important; }
.nmt45sp { margin-top:-45px!important; }
.nmt50sp { margin-top:-50px!important; }
.nmt55sp { margin-top:-55px!important; }
.nmt60sp { margin-top:-60px!important; }
.nmt65sp { margin-top:-65px!important; }
.nmt70sp { margin-top:-70px!important; }
.nmt75sp { margin-top:-75px!important; }
.nmt80sp { margin-top:-80px!important; }
.nmt85sp { margin-top:-85px!important; }
.nmt90sp { margin-top:-90px!important; }
.nmt95sp { margin-top:-95px!important; }
.nmt100sp { margin-top:-100px!important; }
}
/* margin bottom
------------------------------------------------------------ */
.mb0 { margin-bottom:0px!important; }
.mb5 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }
.mb35 { margin-bottom:35px!important; }
.mb40 { margin-bottom:40px!important; }
.mb45 { margin-bottom:45px!important; }
.mb50 { margin-bottom:50px!important; }
.mb55 { margin-bottom:55px!important; }
.mb60 { margin-bottom:60px!important; }
.mb65 { margin-bottom:65px!important; }
.mb70 { margin-bottom:70px!important; }
.mb75 { margin-bottom:75px!important; }
.mb80 { margin-bottom:80px!important; }
.mb85 { margin-bottom:85px!important; }
.mb90 { margin-bottom:90px!important; }
.mb95 { margin-bottom:95px!important; }
.mb100 { margin-bottom:100px!important; }
.mb1em { margin-bottom:1em!important; }
.mb2em { margin-bottom:2em!important; }
@media print, screen and (min-width: 769px) {
.mb0pc { margin-bottom:0px!important; }
.mb5pc { margin-bottom:5px!important; }
.mb10pc { margin-bottom:10px!important; }
.mb15pc { margin-bottom:15px!important; }
.mb20pc { margin-bottom:20px!important; }
.mb25pc { margin-bottom:25px!important; }
.mb30pc { margin-bottom:30px!important; }
.mb35pc { margin-bottom:35px!important; }
.mb40pc { margin-bottom:40px!important; }
.mb45pc { margin-bottom:45px!important; }
.mb50pc { margin-bottom:50px!important; }
.mb55pc { margin-bottom:55px!important; }
.mb60pc { margin-bottom:60px!important; }
.mb65pc { margin-bottom:65px!important; }
.mb70pc { margin-bottom:70px!important; }
.mb75pc { margin-bottom:75px!important; }
.mb80pc { margin-bottom:80px!important; }
.mb85pc { margin-bottom:85px!important; }
.mb90pc { margin-bottom:90px!important; }
.mb95pc { margin-bottom:95px!important; }
.mb100pc { margin-bottom:100px!important; }
}
@media (max-width: 768px) {
.mb0sp { margin-bottom:0px!important; }
.mb5sp { margin-bottom:5px!important; }
.mb10sp { margin-bottom:10px!important; }
.mb15sp { margin-bottom:15px!important; }
.mb20sp { margin-bottom:20px!important; }
.mb25sp { margin-bottom:25px!important; }
.mb30sp { margin-bottom:30px!important; }
.mb35sp { margin-bottom:35px!important; }
.mb40sp { margin-bottom:40px!important; }
.mb45sp { margin-bottom:45px!important; }
.mb50sp { margin-bottom:50px!important; }
.mb55sp { margin-bottom:55px!important; }
.mb60sp { margin-bottom:60px!important; }
.mb65sp { margin-bottom:65px!important; }
.mb70sp { margin-bottom:70px!important; }
.mb75sp { margin-bottom:75px!important; }
.mb80sp { margin-bottom:80px!important; }
.mb85sp { margin-bottom:85px!important; }
.mb90sp { margin-bottom:90px!important; }
.mb95sp { margin-bottom:95px!important; }
.mb100sp { margin-bottom:100px!important; }
}
/* margin right
------------------------------------------------------------ */
.mr0 { margin-right:0px!important; }
.mr5 { margin-right:5px!important; }
.mr10 { margin-right:10px!important; }
.mr15 { margin-right:15px!important; }
.mr20 { margin-right:20px!important; }
.mr25 { margin-right:25px!important; }
.mr30 { margin-right:30px!important; }
.mr35 { margin-right:35px!important; }
.mr40 { margin-right:40px!important; }
.mr45 { margin-right:45px!important; }
.mr50 { margin-right:50px!important; }
.mr55 { margin-right:55px!important; }
.mr60 { margin-right:60px!important; }
.mr65 { margin-right:65px!important; }
.mr70 { margin-right:70px!important; }
.mr75 { margin-right:75px!important; }
.mr80 { margin-right:80px!important; }
.mr85 { margin-right:85px!important; }
.mr90 { margin-right:90px!important; }
.mr95 { margin-right:95px!important; }
.mr100 { margin-right:100px!important; }
.mr1em { margin-right:1em!important; }
.mr1-5em { margin-right:1.5em!important; }
.mr2em { margin-right:2em!important; }
@media print, screen and (min-width: 769px) {
.mr0pc { margin-right:0px!important; }
.mr5pc { margin-right:5px!important; }
.mr10pc { margin-right:10px!important; }
.mr15pc { margin-right:15px!important; }
.mr20pc { margin-right:20px!important; }
.mr25pc { margin-right:25px!important; }
.mr30pc { margin-right:30px!important; }
.mr35pc { margin-right:35px!important; }
.mr40pc { margin-right:40px!important; }
.mr45pc { margin-right:45px!important; }
.mr50pc { margin-right:50px!important; }
}
@media (max-width: 768px) {
.mr0sp { margin-right:0px!important; }
.mr5sp { margin-right:5px!important; }
.mr10sp { margin-right:10px!important; }
.mr15sp { margin-right:15px!important; }
.mr20sp { margin-right:20px!important; }
.mr25sp { margin-right:25px!important; }
.mr30sp { margin-right:30px!important; }
.mr35sp { margin-right:35px!important; }
.mr40sp { margin-right:40px!important; }
.mr45sp { margin-right:45px!important; }
.mr50sp { margin-right:50px!important; }
}
/* margin left
------------------------------------------------------------ */
.ml0 { margin-left:0px!important; }
.ml5 { margin-left:5px!important; }
.ml10 { margin-left:10px!important; }
.ml15 { margin-left:15px!important; }
.ml20 { margin-left:20px!important; }
.ml25 { margin-left:25px!important; }
.ml30 { margin-left:30px!important; }
.ml35 { margin-left:35px!important; }
.ml40 { margin-left:40px!important; }
.ml45 { margin-left:45px!important; }
.ml50 { margin-left:50px!important; }
.ml55 { margin-left:55px!important; }
.ml60 { margin-left:60px!important; }
.ml65 { margin-left:65px!important; }
.ml70 { margin-left:70px!important; }
.ml75 { margin-left:75px!important; }
.ml80 { margin-left:80px!important; }
.ml85 { margin-left:85px!important; }
.ml90 { margin-left:90px!important; }
.ml95 { margin-left:95px!important; }
.ml100 { margin-left:100px!important; }
@media print, screen and (min-width: 769px) {
.ml0pc { margin-left:0px!important; }
.ml5pc { margin-left:5px!important; }
.ml10pc { margin-left:10px!important; }
.ml15pc { margin-left:15px!important; }
.ml20pc { margin-left:20px!important; }
.ml25pc { margin-left:25px!important; }
.ml30pc { margin-left:30px!important; }
.ml35pc { margin-left:35px!important; }
.ml40pc { margin-left:40px!important; }
.ml45pc { margin-left:45px!important; }
.ml50pc { margin-left:50px!important; }
}
@media (max-width: 768px) {
.ml0sp { margin-left:0px!important; }
.ml5sp { margin-left:5px!important; }
.ml10sp { margin-left:10px!important; }
.ml15sp { margin-left:15px!important; }
.ml20sp { margin-left:20px!important; }
.ml25sp { margin-left:25px!important; }
.ml30sp { margin-left:30px!important; }
.ml35sp { margin-left:35px!important; }
.ml40sp { margin-left:40px!important; }
.ml45sp { margin-left:45px!important; }
.ml50sp { margin-left:50px!important; }
}
/* margin all
------------------------------------------------------------ */
.ma0 { margin:0px!important; }
.ma5 { margin:5px!important; }
.ma10 { margin:10px!important; }
.ma15 { margin:15px!important; }
.ma20 { margin:20px!important; }
.ma25 { margin:25px!important; }
.ma30 { margin:30px!important; }
.ma35 { margin:35px!important; }
.ma40 { margin:40px!important; }
.ma45 { margin:45px!important; }
.ma50 { margin:50px!important; }
/* padding top
------------------------------------------------------------ */
.pt0 { padding-top:0px!important; }
.pt5 { padding-top:5px!important; }
.pt10 { padding-top:10px!important; }
.pt15 { padding-top:15px!important; }
.pt20 { padding-top:20px!important; }
.pt25 { padding-top:25px!important; }
.pt30 { padding-top:30px!important; }
.pt35 { padding-top:35px!important; }
.pt40 { padding-top:40px!important; }
.pt45 { padding-top:45px!important; }
.pt50 { padding-top:50px!important; }
.pt55 { padding-top:55px!important; }
.pt60 { padding-top:60px!important; }
.pt65 { padding-top:65px!important; }
.pt70 { padding-top:70px!important; }
.pt75 { padding-top:75px!important; }
.pt80 { padding-top:80px!important; }
.pt85 { padding-top:85px!important; }
.pt90 { padding-top:90px!important; }
.pt95 { padding-top:95px!important; }
.pt100 { padding-top:100px!important; }
@media print, screen and (min-width: 769px) {
.pt10pc { padding-top:10px!important; }
.pt20pc { padding-top:20px!important; }
.pt30pc { padding-top:30px!important; }
.pt40pc { padding-top:40px!important; }
.pt50pc { padding-top:50px!important; }
}
@media (max-width: 768px) {
.pt10sp { padding-top:10px!important; }
.pt20sp { padding-top:20px!important; }
.pt30sp { padding-top:30px!important; }
.pt40sp { padding-top:40px!important; }
.pt50sp { padding-top:50px!important; }
}
/* padding bottom
------------------------------------------------------------ */
.pb0 { padding-bottom:0px!important; }
.pb5 { padding-bottom:5px!important; }
.pb10 { padding-bottom:10px!important; }
.pb15 { padding-bottom:15px!important; }
.pb20 { padding-bottom:20px!important; }
.pb25 { padding-bottom:25px!important; }
.pb30 { padding-bottom:30px!important; }
.pb35 { padding-bottom:35px!important; }
.pb40 { padding-bottom:40px!important; }
.pb45 { padding-bottom:45px!important; }
.pb50 { padding-bottom:50px!important; }
.pb55 { padding-bottom:55px!important; }
.pb60 { padding-bottom:60px!important; }
.pb65 { padding-bottom:65px!important; }
.pb70 { padding-bottom:70px!important; }
.pb75 { padding-bottom:75px!important; }
.pb80 { padding-bottom:80px!important; }
.pb85 { padding-bottom:85px!important; }
.pb90 { padding-bottom:90px!important; }
.pb95 { padding-bottom:95px!important; }
.pb100 { padding-bottom:100px!important; }
@media print, screen and (min-width: 769px) {
.pb10pc { padding-bottom:10px!important; }
.pb20pc { padding-bottom:20px!important; }
.pb30pc { padding-bottom:30px!important; }
.pb40pc { padding-bottom:40px!important; }
.pb50pc { padding-bottom:50px!important; }
}
@media (max-width: 768px) {
.pb10sp { padding-bottom:10px!important; }
.pb20sp { padding-bottom:20px!important; }
.pb30sp { padding-bottom:30px!important; }
.pb40sp { padding-bottom:40px!important; }
.pb50sp { padding-bottom:50px!important; }
}
/* padding right
------------------------------------------------------------ */
.pr0 { padding-right:0px!important; }
.pr5 { padding-right:5px!important; }
.pr10 { padding-right:10px!important; }
.pr15 { padding-right:15px!important; }
.pr20 { padding-right:20px!important; }
.pr25 { padding-right:25px!important; }
.pr30 { padding-right:30px!important; }
.pr35 { padding-right:35px!important; }
.pr40 { padding-right:40px!important; }
.pr45 { padding-right:45px!important; }
.pr50 { padding-right:50px!important; }
.pr55 { padding-right:55px!important; }
.pr60 { padding-right:60px!important; }
.pr65 { padding-right:65px!important; }
.pr70 { padding-right:70px!important; }
.pr75 { padding-right:75px!important; }
.pr80 { padding-right:80px!important; }
.pr85 { padding-right:85px!important; }
.pr90 { padding-right:90px!important; }
.pr95 { padding-right:95px!important; }
.pr100 { padding-right:100px!important; }
/* padding left
------------------------------------------------------------ */
.pl0 { padding-left:0px!important; }
.pl5 { padding-left:5px!important; }
.pl10 { padding-left:10px!important; }
.pl15 { padding-left:15px!important; }
.pl20 { padding-left:20px!important; }
.pl25 { padding-left:25px!important; }
.pl30 { padding-left:30px!important; }
.pl35 { padding-left:35px!important; }
.pl40 { padding-left:40px!important; }
.pl45 { padding-left:45px!important; }
.pl50 { padding-left:50px!important; }
.pl55 { padding-left:55px!important; }
.pl60 { padding-left:60px!important; }
.pl65 { padding-left:65px!important; }
.pl70 { padding-left:70px!important; }
.pl75 { padding-left:75px!important; }
.pl80 { padding-left:80px!important; }
.pl85 { padding-left:85px!important; }
.pl90 { padding-left:90px!important; }
.pl95 { padding-left:95px!important; }
.pl100 { padding-left:100px!important; }
/* padding all
------------------------------------------------------------ */
.pa0 { padding:0px!important; }
.pa5 { padding:5px!important; }
.pa10 { padding:10px!important; }
.pa15 { padding:15px!important; }
.pa20 { padding:20px!important; }
.pa25 { padding:25px!important; }
.pa30 { padding:30px!important; }
.pa35 { padding:35px!important; }
.pa40 { padding:40px!important; }
.pa45 { padding:45px!important; }
.pa50 { padding:50px!important; }
/* layout style
------------------------------------------------------------ */
.alignL { text-align: left!important; }
.alignC { text-align: center!important; }
.alignR { text-align: right!important; }
@media print, screen and (min-width: 769px) {
.alignLpc { text-align: left!important; }
.alignCpc { text-align: center!important; }
.alignRpc { text-align: right!important; }
}
@media (max-width: 768px) {
.alignLsp { text-align: left!important; }
.alignCsp { text-align: center!important; }
.alignRsp { text-align: right!important; }
}
/* font style
------------------------------------------------------------ */
.fsU1 { font-size:1.07em;}
.fsU2 { font-size:1.14em;}
.fsU3 { font-size:1.21em;}
.fsD1 { font-size:0.93em!important;}
.fsD2 { font-size:0.86em!important;}
.fsD3 { font-size:0.79em!important;}
.bold { font-weight: bold; }
.fcWhite { color:#fff!important; }
.fcBlack { color:#333!important; }
.fcRed { color:#aa1c2c!important; }
/* ima style
------------------------------------------------------------ */
img{ width:100%; height:auto; }
/* link
------------------------------------------------------------ */
a {
color:#ca0000;
outline: none;
cursor:pointer;
transition:all 0.5s ease;
}
a img{
outline: none;
}
a:hover {
text-decoration:none;
}
.ov:hover {
opacity:0.6;
}
/* hr
------------------------------------------------------------ */
hr {
background:#333;
border:none;
height:2px;
}
@media (max-width: 539px){
hr {
margin:1.5em 0;
}
}
@media (min-width: 540px) and (max-width: 768px){
hr {
margin:2.0em 0;
}
}
@media print, screen and (min-width: 769px){
hr {
margin:2.5em 0;
}
}
/* block
------------------------------------------------------------ */
.di-ib { display:inline-block; }
.di-b { display:block; }
.brSp,
.brTab,
.brPc,
.brPc1000 {
display: none;
}
@media (max-width: 539px){
.brSp {display: block;}
}
@media (min-width: 540px) and (max-width: 768px){
.brTab {display: block;}
}
@media print, screen and (min-width: 769px) and (max-width: 999px) {
.brPc {display: block;}
}
@media print, screen and (min-width: 1100px) {
.brPc1100 {display: block;}
}
/* list
------------------------------------------------------------ */
.list {
padding:0;
}
.list li {
margin-bottom:5px;
padding-left:1.2em;
text-align:left;
position:relative;
box-sizing:border-box;
}
.list li::before {
display:block;
position:absolute;
top:0;
left:0;
}
.list.coution li::before {
content:"※";
}
.list.coution li::before {
content:"・";
}
.list.circle li::before {
content:"●";
}
.list.circle.red li::before {
color:#aa1c2c;
}
.list li.nomark::before {
display:none;
}
/* common
------------------------------------------------------------ */
.wrap {
width:100%;
}
@media (max-width: 539px){
}
@media (min-width: 540px) and (max-width: 768px){
.wrap {
min-width:768px;
}
}
@media print, screen and (min-width: 769px) {
.wrap {
min-width:1100px;
}
}
/* header
------------------------------------------------------------ */
header {
width:100%;
background:#fff;
}
header .inner {
display:-webkit-box;
display:flex;
-webkit-box-pack: space-between;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
width:100%;
max-width:1100px;
margin:0 auto;
padding:1.8% 5%;
}
header .inner .logo_repark{
max-width:200px;
}
header .inner .logo_mfr{
max-width:228px;
}
@media (max-width: 539px){
header .inner .logo_repark{
width:33%;
}
header .inner .logo_mfr{
width:37.5%;
}
}
@media (min-width: 540px){
header .inner .logo_repark{
width:25%;
}
header .inner .logo_mfr{
width:28%;
}
}
@media print, screen and (min-width: 1000px) {
header .inner .logo_repark{
width:22.23%;
}
header .inner .logo_mfr{
width:25.34%;
}
header .inner {
padding-top:18px;
padding-bottom:17px;
}
}
/* mainimg
------------------------------------------------------------ */
#mainimg {
width:100%;
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
position:relative;
}
#mainimg .inner {
width:100%;
max-width:1100px;
margin:0 auto;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-60%) translateX(-50%);
-webkit- transform: translateY(-60%) translateX(-50%);
}
#mainimg .inner p {
color:#fff;
font-weight:500;
text-shadow: 1px 1px 3em #000, 0 0 1.5em #000, 0 0 0.75em #333;
}
#mainimg .inner p:nth-child(1) {
letter-spacing:0.30em;
text-indent:0.15em;
}
#mainimg .inner p:nth-child(2) {
letter-spacing:0.34em;
text-indent:0.17em;
}
@media (max-width: 539px){
#mainimg {
height:420px;
background-position:30% 50%;
}
#mainimg .inner {
padding:0 15px;
}
#mainimg .inner p {
font-size:1.8rem;
}
}
@media (min-width: 540px) and (max-width: 768px){
#mainimg {
height:540px;
}
#mainimg .inner {
padding:0 25px;
}
#mainimg .inner p {
font-size:2.4rem;
}
}
@media print, screen and (min-width: 769px){
#mainimg {
height:680px;
}
#mainimg .inner {
padding:0 50px;
}
#mainimg .inner p {
font-size:3.0rem;
}
}
/* mainArea
------------------------------------------------------------ */
.mainArea {
width:100%;
}
/* heading
------------------------------------------------------------ */
h2.heading {
padding:0.8em 0;
line-height:1;
letter-spacing:0.3em;
text-align:center;
color:#FFF;
background:#297789;
}
h3.subheading {
padding:0.8em 0;
line-height:1;
letter-spacing:0.15em;
text-align:center;
color:#FFF;
background:#333333;
}
@media (max-width: 539px){
h2.heading {
font-size:2.8rem;
letter-spacing:0.15em;
}
h3.subheading {
font-size:2.0rem;
}
}
@media (min-width: 540px) and (max-width: 768px){
h2.heading {
font-size:3.2rem;
}
h3.subheading {
font-size:2.4rem;
}
}
@media print, screen and (min-width: 769px){
h2.heading {
font-size:3.6rem;
}
h3.subheading {
font-size:2.8rem;
}
}
/* title
------------------------------------------------------------ */
#title {
width:100%;
margin:0 auto;
position:relative;
z-index:2;
}
#title .inner {
width:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
}
#title .logo {
width:60%;
margin:0 auto;
padding:0;
}
#title h1 {
padding:1.5em 0 2em;
font-weight:normal;
text-align:center;
}
#title h1 p{
line-height:1.5;
letter-spacing:0.28em;
font-weight:400;
}
@media (max-width: 539px){
#title {
margin-top:-60px;
padding:0 15px;
}
#title .inner {
padding:30px 3% 0;
}
#title .logo {
max-width:180px;
}
#title h1 p:nth-child(1) {
font-size:2.4rem;
}
#title h1 p:nth-child(2) {
font-size:3.2rem;
}
}
@media (min-width: 540px) and (max-width: 768px){
#title {
margin-top:-80px;
padding:0 25px;
}
#title .inner {
padding:50px 4% 0;
}
#title .logo {
max-width:250px;
}
#title h1 p:nth-child(1) {
font-size:4.2rem;
}
#title h1 p:nth-child(2) {
font-size:5.2rem;
}
}
@media print, screen and (min-width: 769px){
#title {
max-width:1100px;
margin-top:-100px;
padding:0 50px;
}
#title .inner {
padding:70px 5% 0;
}
#title .logo {
max-width:300px;
}
#title h1 {
padding:2em 0 3.5em;
}
#title h1 p:nth-child(1) {
font-size:5.4rem;
}
#title h1 p:nth-child(2) {
font-size:6.4rem;
}
}
/* guide
------------------------------------------------------------ */
#guide {
width:100%;
}
/* lead
------------------------------------------------------------ */
#lead {
max-width:1100px;
margin:0 auto;
}
#lead .photoBox {
width:100%;
display:-webkit-box;
display:flex;
-webkit-box-pack: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#lead .photoBox div{
overflow:hidden;
position:relative;
}
#lead .photoBox div{
padding-top:40%;
}
#lead .photoBox div p{
width:100%;
height:100%;
margin:auto;
overflow:hidden;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:#333;
}
#lead .photoBox div p img{
width: 100%;
height:100%;
object-fit: cover;
}
#lead .catchcopy {
line-height:1.6;
text-align:center;
}
#lead .pointlist {
padding:0 1em;
}
#lead .pointlist li {
margin-top:0.5em;
padding-left:1em;
text-indent:-1em;
letter-spacing:0.05em;
}
#lead .pointlist li .di-ib{
text-indent:0;
}
@media (max-width: 539px){
#lead {
padding:0 15px;
}
#lead .photoBox {
margin:10px 0 30px;
}
#lead .photoBox div{
width:100%;
padding-top:60%;
}
#lead .photoBox div:nth-child(2){
margin-top:10px;
}
#lead .catchcopy {
font-size:2.0rem;
letter-spacing:0.20em;
}
#lead .inner {
padding:0 0 50px;
}
#lead .pointlist li {
font-size:1.8rem;
}
}
@media (min-width: 540px){
#lead {
padding:0 25px;
}
#lead .photoBox {
margin:20px 0 40px;
}
#lead .photoBox div:nth-child(1){
width:60%;
}
#lead .photoBox div:nth-child(2){
width:38%;
}
#lead .catchcopy {
font-size:3.2rem;
letter-spacing:0.20em;
}
#lead .inner {
padding:0 4% 60px;
}
#lead .pointlist li {
font-size:2.4rem;
}
}
@media print, screen and (min-width: 769px){
#lead {
padding:0 50px;
}
#lead .photoBox {
margin:20px 0 50px;
}
#lead .catchcopy {
font-size:3.6rem;
letter-spacing:0.28em;
}
#lead .inner {
padding:0 8% 80px;
}
#lead .pointlist li {
font-size:2.8rem;
letter-spacing:0.1em;
}
}
/* price
------------------------------------------------------------ */
#price {
max-width:1100px;
margin:0 auto;
}
#price .priceList {
display:-webkit-box;
display:flex;
-webkit-box-pack: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:100%;
padding:40px 5% 80px;
}
#price .priceList li {
display:-webkit-box;
display:flex;
-webkit-box-pack: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:47.3%;
}
#price .priceList li img {
max-width:425px;
}
@media (max-width: 539px){
#price {
padding:0 15px;
}
#price .priceList {
padding:5px 0 50px;
}
#price .priceList li {
width:90%;
margin:15px auto 0;
}
}
@media (min-width: 540px) and (max-width: 768px){
#price {
padding:0 25px;
}
#price .priceList {
padding:30px 4% 60px;
}
}
@media print, screen and (min-width: 769px){
#price {
padding:0 50px;
}
#price .priceList {
padding:40px 5% 80px;
}
}
/* howto
------------------------------------------------------------ */
#howto .inner {
max-width:1100px;
margin:0 auto;
}
#howto .howtoList {
margin:20px 0 50px;
position:relative;
}
#howto .howtoList .swiper-slide {
background:#297789;
text-align:center;
color:#fff;
border-radius:20px;
position:relative;
}
#howto .howtoList .swiper-slide:before {
display:block;
content:"";
margin:0 auto;
border:6px solid #eee;
border-radius:50vh;
background:#fff;
color:#297789;
font-weight:700;
text-align:center;
position:absolute;
left:0;
right:0;
z-index:2;
}
#howto .howtoList .step1:before {
content:"1";
}
#howto .howtoList .step2:before {
content:"2";
}
#howto .howtoList .step3:before {
content:"3";
}
#howto .howtoList .step4:before {
content:"4";
}
#howto .howtoList .step5:before {
content:"5";
}
#howto .howtoList .step6:before {
content:"6";
}
#howto .howtoList .step7:before {
content:"7";
}
#howto .reserveBtn {
display:block;
width:80%;
max-width:290px;
margin:0 auto;
background:#fff;
font-size:2.0rem;
line-height:64px;
font-weight:500;
color:#297789;
text-align:center;
text-decoration:none;
border-radius:50vh;
}
#howto .howtoList .swiper-slide .image {
width:100%;
display:-webkit-box;
display:flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height:364px;
text-align:center;
}
#howto .howtoList .swiper-slide img {
width:auto;
height:364px;
}
#howto .howtoList .swiper-slide .text {
padding:1em;
text-align:left;
}
#howto .howtoList .swiper-slide .coutionTxt {
margin-top:0.5em;
padding-left:1em;
text-indent:-1em;
}
@media (max-width: 539px){
#howto .inner {
padding:0 15px;
}
#howto .howtoList {
margin:10px 0 40px;
padding:30px 0;
}
#howto .howtoList .swiper-slide {
width:90%;
max-width:320px;
height:510px;
margin:0 20px;
padding:35px 0 0;
}
#howto .howtoList .swiper-slide:before {
width:54px;
height:54px;
font-size:2.4rem;
line-height:42px;
top:-27px;
}
#howto .reserveBtn {
font-size:1.6rem;
line-height:48px;
}
#howto .howtoList .swiper-slide .image,
#howto .howtoList .swiper-slide img {
height:320px;
}
#howto .howtoList .swiper-slide .text {
font-size:1.5rem;
}
#howto .howtoList .swiper-slide .coutionTxt {
font-size:1.3rem;
}
}
@media (min-width: 540px) and (max-width: 768px){
#howto .inner {
padding:0 25px;
}
#howto .howtoList {
padding:40px 0;
}
#howto .howtoList .swiper-slide {
width:340px;
height:580px;
margin:0 25px;
padding:40px 0 0;
}
#howto .howtoList .swiper-slide:before {
width:64px;
height:64px;
font-size:2.8rem;
line-height:52px;
top:-32px;
}
#howto .reserveBtn {
font-size:1.8rem;
line-height:54px;
}
#howto .howtoList .swiper-slide .text {
font-size:1.6rem;
}
#howto .howtoList .swiper-slide .coutionTxt {
font-size:1.4rem;
}
}
@media print, screen and (min-width: 769px){
#howto .inner {
padding:0 50px;
}
#howto .howtoList {
padding:50px 0;
}
#howto .howtoList .swiper-slide {
width:360px;
height:600px;
margin:0 35px;
padding:50px 0 0;
}
#howto .howtoList .swiper-slide:before {
width:72px;
height:72px;
font-size:3.2rem;
line-height:60px;
top:-36px;
}
#howto .reserveBtn {
font-size:2.0rem;
line-height:64px;
}
#howto .howtoList .swiper-slide .text {
font-size:1.8rem;
}
#howto .howtoList .swiper-slide .coutionTxt {
font-size:1.6rem;
}
}
/*== コントローラ ==*/
.swiper-cont {
width:100%;
max-width:1250px;
margin:0 auto;
position:absolute;
top:0;
left:0;
right:0;
}
.swiper-button-prev,
.swiper-button-next {
display: grid;
place-content: center;
margin: auto 0;
cursor: pointer;
transition:all 0.5s ease;
position: absolute;
top:0;
bottom:0;
z-index:100;
}
.swiper-button-prev::before,
.swiper-button-next::before {
background-color:rgba(51,51,51,0.8);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border-radius: 50%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
border: solid #fff;
}
.swiper-button-prev::after {
transform: rotate(-135deg);
}
.swiper-button-next::after {
transform: rotate(45deg);
}
.swiper-button-disabled {
pointer-events: none;
opacity: 0.2;
transition:all 0.5s ease;
}
.swiper-button-disabled::after {
border-color:#730420;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
opacity:0.6;
}
@media screen and (max-width: 539px) {
.swiper-cont {
max-width:360px;
height:570px;
}
.swiper-button-prev,
.swiper-button-next {
width: 40px;
height: 40px;
}
.swiper-button-prev {
left:5px;
}
.swiper-button-next {
right:5px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
width: 11px;
height: 11px;
border-width: 2px 2px 0 0;
}
.swiper-button-prev::after {
margin-left: 0.3rem;
}
.swiper-button-next::after {
margin-right: 0.3rem;
}
}
@media (min-width: 540px) and (max-width: 768px){
.swiper-cont {
height:660px;
}
.swiper-button-prev,
.swiper-button-next {
width: 50px;
height: 50px;
}
.swiper-button-prev {
left:24px;
}
.swiper-button-next {
right:24px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
width: 13px;
height: 13px;
border-width: 2px 2px 0 0;
}
.swiper-button-prev::after {
margin-left: 0.6rem;
}
.swiper-button-next::after {
margin-right: 0.6rem;
}
}
@media screen and (min-width: 769px) {
.swiper-cont {
height:700px;
}
.swiper-button-prev,
.swiper-button-next {
width: 60px;
height: 60px;
}
.swiper-button-prev {
left:36px;
}
.swiper-button-next {
right:36px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
width: 19px;
height: 19px;
border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
margin-left: 0.8rem;
}
.swiper-button-next::after {
margin-right: 0.8rem;
}
}
/*== ページネーション ==*/
.swiper-pagination {
width:100%;
display:-webkit-box;
display:flex;
-webkit-box-pack: center;
justify-content: center;
margin: 0 auto;
text-align: center;
position:absolute;
bottom:10px;
}
.swiper-pagination-bullet {
width: 20px;
height: 8px;
margin:0 2px;
cursor: pointer;
transition: var(--transition);
vertical-align: top;
background-color: #e6e6e6;
border-radius:50vh;
transition:width 0.5s ease;
}
.swiper-pagination-bullet-active {
width: 40px;
background-color: #297789;
}
/* time
------------------------------------------------------------ */
#time {
max-width:1100px;
margin:0 auto;
padding:0 50px;
}
#time .inner {
text-align:center;
}
#time .time {
margin:0 0 0.25em;
font-weight:700;
letter-spacing:0.05em;
}
#time .time em {
font-size:1.12em;
font-weight:700;
}
#time .subTxt {
font-weight:500;
letter-spacing:0.05em;
}
@media (max-width: 539px){
#time {
padding:0 15px;
}
#time .time {
margin:0 0 0.25em;
font-size:2.8rem;
}
#time .inner {
padding:20px 3% 50px;
}
#time .subTxt {
font-size:1.4rem;
text-align:left;
}
}
@media (min-width: 540px) and (max-width: 768px){
#time {
padding:0 25px;
}
#time .inner {
padding:30px 4% 60px;
}
#time .time {
margin:0 0 0.25em;
font-size:4.2rem;
}
}
@media print, screen and (min-width: 769px){
#time {
padding:0 50px;
}
#time .inner {
padding:40px 8% 80px;
}
#time .time {
margin:0 0 0.25em;
font-size:4.8rem;
}
}
/* access
------------------------------------------------------------ */
#access {
max-width:1100px;
margin:0 auto;
}
#access .add {
text-align:center;
color:#fff;
background:#297789;
}
#access .add .address {
font-weight:500;
letter-spacing:0.05em;
text-align:center;
}
#access .add .coution {
margin-top:5px;
font-weight:500;
letter-spacing:0.1em;
}
#access .route {
margin:15px 0 0;
}
#access .route li {
min-height:64px;
padding:10px 5%;
font-size:2.6rem;
font-weight:500;
letter-spacing:0.05em;
background-size: 8px 1px;
background-image: linear-gradient(to right, #000000 4px, transparent 4px);
background-repeat: repeat-x;
background-position: left bottom;
position:relative;
}
#access .route li:last-child {
background: none;
}
#access .route li .fsS{
margin-bottom:8px;
font-size:0.72em;
}
#access .route li.g::before {
background:url(/parking_user/img/access_icon_g.png) no-repeat 0 0;
}
#access .route li.h::before {
background:url(/parking_user/img/access_icon_h.png) no-repeat 0 0;
}
#access .route li.gn::before {
background:url(/parking_user/img/access_icon_g.png) no-repeat 0 0;
}
#access .route li.gn::after {
background:url(/parking_user/img/access_icon_n.png) no-repeat 0 0;
}
#access .route li.mc::before {
background:url(/parking_user/img/access_icon_m.png) no-repeat 0 0;
}
#access .route li.mc::after {
background:url(/parking_user/img/access_icon_c.png) no-repeat 0 0;
}
#access .route li.g::before,
#access .route li.h::before,
#access .route li.gn::before,
#access .route li.gn::after,
#access .route li.mc::before,
#access .route li.mc::after {
display:block;
content:"";
width:44px;
height:44px;
margin:auto 0;
background-size:100% auto;
position:absolute;
top:0;
bottom:0;
}
@media (max-width: 539px){
#access {
padding:0 15px;
}
#access .inner {
padding:15px 0 50px;
}
#access .add {
padding:12px;
}
#access .add .address {
font-size:1.8rem;
}
#access .add .coution {
font-size:1.4rem;
}
#access .route li {
min-height:64px;
padding:10px 1.5%;
font-size:1.6rem;
}
#access .route li.icon {
padding-left:calc(1.5% + 90px);
}
#access .route li.g::before,
#access .route li.h::before,
#access .route li.gn::before,
#access .route li.gn::after,
#access .route li.mc::before,
#access .route li.mc::after {
width:36px;
height:36px;
}
#access .route li.g::before,
#access .route li.h::before,
#access .route li.gn::before,
#access .route li.mc::before {
left:1.5%;
}
#access .route li.gn::after,
#access .route li.mc::after {
left:calc(1.5% + 40px);
}
}
@media (min-width: 540px) and (max-width: 768px){
#access {
padding:0 25px;
}
#access .inner {
padding:20px 4% 60px;
}
#access .add {
padding:14px;
}
#access .add .address {
font-size:2.4rem;
}
#access .add .coution {
font-size:1.6rem;
}
#access .route li {
min-height:64px;
padding:10px 3%;
font-size:2.2rem;
}
#access .route li.icon {
padding-left:calc(3% + 115px);
}
#access .route li.g::before,
#access .route li.h::before,
#access .route li.gn::before,
#access .route li.mc::before {
left:3%;
}
#access .route li.gn::after,
#access .route li.mc::after {
left:calc(3% + 48px);
}
}
@media print, screen and (min-width: 769px){
#access {
padding:0 50px;
}
#access .inner {
padding:30px 5% 80px;
}
#access .add {
padding:18px;
}
#access .add .address {
font-size:2.8rem;
}
#access .add .coution {
font-size:1.8rem;
}
#access .route li {
min-height:64px;
padding:10px 5%;
font-size:2.6rem;
}
#access .route li.icon {
padding-left:calc(5% + 115px);
}
#access .route li.g::before,
#access .route li.h::before,
#access .route li.gn::before,
#access .route li.mc::before {
left:5%;
}
#access .route li.gn::after,
#access .route li.mc::after {
left:calc(5% + 48px);
}
}
/* contact
------------------------------------------------------------ */
#contact {
max-width:1100px;
margin:0 auto;
padding:0 50px;
}
#contact .inner {
padding:40px 5% 80px;
text-align:center;
}
#contact .txt {
font-weight:500;
letter-spacing:0.05em;
}
#contact .tel {
font-weight:700;
letter-spacing:0;
}
#contact .tel a{
min-height:63px;
padding-left:73px;
color:#333;
text-decoration:none;
background:url(/parking_user/img/icon_tel.png) no-repeat top 50% left 0% ;
background-size:63px auto;
transition:opacity 0.5s ease;
}
#contact .tel a:hover{
opacity:0.6;
}
@media (max-width: 539px){
#contact {
padding:0 15px;
}
#contact .inner {
padding:20px 1.5% 50px;
}
#contact .txt {
font-size:2.0rem;
}
#contact .tel {
font-size:3.2rem;
}
#contact .tel a{
min-height:40px;
padding-left:45px;
background-size:40px auto;
}
}
@media (min-width: 540px) and (max-width: 768px){
#contact {
padding:0 25px;
}
#contact .inner {
padding:30px 4% 60px;
}
#contact .txt {
font-size:3.2rem;
}
#contact .tel {
font-size:5.4rem;
}
}
@media print, screen and (min-width: 769px){
#contact {
padding:0 50px;
}
#contact .inner {
padding:40px 8% 80px;
}
#contact .txt {
font-size:3.6rem;
}
#contact .tel {
font-size:6.0rem;
}
}
/* footer
------------------------------------------------------------ */
footer {
max-width:1100px;
margin:0 auto;
padding:0 50px 60px;
}
footer .linklist {
padding:30px 0 ;
border-top:1px solid #333;
text-align:center;
}
footer .linklist li {
display:inline-block;
padding:0.5em;
}
footer .linklist li a {
display:inline-block;
padding-left:22px;
font-size:1.4rem;
font-weight:500;
background:url(/parking_user/img/icon_blank.png) no-repeat top 50% left 0%;
background-size:15px auto;
text-decoration:none;
color:#333;
transition:color 0.5s ease;
}
footer .linklist li a:hover {
color:#ff3300;
}
footer .copyright {
margin:0;
text-align:center;
}
@media (max-width: 539px){
footer {
padding:0 15px 40px;
}
footer .copyright {
font-size:0.86em;
}
footer .linklist li {
padding:0.25em;
}
footer .linklist li a {
display:inline-block;
padding-left:22px;
font-size:1.3rem;
font-weight:500;
background:url(/parking_user/img/icon_blank.png) no-repeat top 50% left 0%;
background-size:15px auto;
text-decoration:none;
color:#333;
transition:color 0.5s ease;
}
}
@media (min-width: 540px) and (max-width: 768px){
footer {
padding:0 40px 50px;
}
}
@media print, screen and (min-width: 769px){
footer {
padding:0 50px 60px;
}
}