html,
body {
letter-spacing: 0.05em;
font-family: "Noto Sans JP", "Source Sans Pro", sans-serif !important;
background: #fff !important;
}
.mt1 {
margin-top: 1px;
}
.mt2 {
margin-top: 2px;
}
.mt3 {
margin-top: 3px;
}
.mt4 {
margin-top: 4px;
}
.mt5 {
margin-top: 5px;
}
.mt6 {
margin-top: 6px;
}
.mt7 {
margin-top: 7px;
}
.mt8 {
margin-top: 8px;
}
.mt9 {
margin-top: 9px;
}
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mt20 {
margin-top: 20px;
}
.mt25 {
margin-top: 25px;
}
.mt30 {
margin-top: 30px;
}
.mt35 {
margin-top: 35px;
}
.mt40 {
margin-top: 40px;
}
.mt45 {
margin-top: 45px;
}
.mt50 {
margin-top: 50px;
}
.mt55 {
margin-top: 55px;
}
.mt60 {
margin-top: 60px;
}
.mt65 {
margin-top: 65px;
}
.mt70 {
margin-top: 70px;
}
.mt75 {
margin-top: 75px;
}
.mt80 {
margin-top: 80px;
}
.mt85 {
margin-top: 85px;
}
.mt90 {
margin-top: 90px;
}
.mt95 {
margin-top: 95px;
}
.mt100 {
margin-top: 100px;
}
.mt105 {
margin-top: 105px;
}
.mt110 {
margin-top: 110px;
}
.mt115 {
margin-top: 115px;
}
.mt120 {
margin-top: 120px;
}
.mt125 {
margin-top: 125px;
}
.mt130 {
margin-top: 130px;
}
.mt135 {
margin-top: 135px;
}
.mt140 {
margin-top: 140px;
}
.mt145 {
margin-top: 145px;
}
.mt150 {
margin-top: 150px;
}
.mt160 {
margin-top: 160px;
}
.mt170 {
margin-top: 170px;
}
.mt200 {
margin-top: 200px;
}
.mt-10 {
margin-top: -10px;
}
.mt-15 {
margin-top: -15px;
}
.mt-20 {
margin-top: -20px;
}
.mt-30 {
margin-top: -30px;
}
.mt-50 {
margin-top: -50px;
}
.mt-60 {
margin-top: -60px;
}
.mt-100 {
margin-top: -100px;
}
.mt-150 {
margin-top: -150px;
}
.mt-160 {
margin-top: -160px;
}
.mt-170 {
margin-top: -170px;
}
.mt-200 {
margin-top: -200px;
}
.mt-300 {
margin-top: -300px;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 1px;
}
.mb2 {
margin-bottom: 2px;
}
.mb3 {
margin-bottom: 3px;
}
.mb4 {
margin-bottom: 4px;
}
.mb5 {
margin-bottom: 5px;
}
.mb6 {
margin-bottom: 6px;
}
.mb7 {
margin-bottom: 7px;
}
.mb8 {
margin-bottom: 8px;
}
.mb9 {
margin-bottom: 9px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
.mb30 {
margin-bottom: 30px;
}
.mb35 {
margin-bottom: 35px;
}
.mb40 {
margin-bottom: 40px;
}
.mb45 {
margin-bottom: 45px;
}
.mb50 {
margin-bottom: 50px;
}
.mb55 {
margin-bottom: 55px;
}
.mb60 {
margin-bottom: 60px;
}
.mb65 {
margin-bottom: 65px;
}
.mb70 {
margin-bottom: 70px;
}
.mb75 {
margin-bottom: 75px;
}
.mb80 {
margin-bottom: 80px;
}
.mb85 {
margin-bottom: 85px;
}
.mb90 {
margin-bottom: 90px;
}
.mb95 {
margin-bottom: 95px;
}
.mb100 {
margin-bottom: 100px;
}
.mb105 {
margin-bottom: 105px;
}
.mb110 {
margin-bottom: 110px;
}
.mb115 {
margin-bottom: 115px;
}
.mb120 {
margin-bottom: 120px;
}
.mb125 {
margin-bottom: 125px;
}
.mb130 {
margin-bottom: 130px;
}
.mb135 {
margin-bottom: 135px;
}
.mb140 {
margin-bottom: 140px;
}
.mb145 {
margin-bottom: 145px;
}
.mb150 {
margin-bottom: 150px;
}
.mb-90 {
margin-bottom: -90px;
}
.ml-15 {
margin-left: -15px;
}
.ml1 {
margin-left: 1px;
}
.ml2 {
margin-left: 2px;
}
.ml3 {
margin-left: 3px;
}
.ml4 {
margin-left: 4px;
}
.ml5 {
margin-left: 5px;
}
.ml6 {
margin-left: 6px;
}
.ml7 {
margin-left: 7px;
}
.ml8 {
margin-left: 8px;
}
.ml9 {
margin-left: 9px;
}
.ml10 {
margin-left: 10px;
}
.ml15 {
margin-left: 15px;
}
.ml20 {
margin-left: 20px;
}
.ml25 {
margin-left: 25px;
}
.ml30 {
margin-left: 30px;
}
.ml35 {
margin-left: 35px;
}
.ml40 {
margin-left: 40px;
}
.ml45 {
margin-left: 45px;
}
.ml50 {
margin-left: 50px;
}
.ml55 {
margin-left: 55px;
}
.ml60 {
margin-left: 60px;
}
.ml65 {
margin-left: 65px;
}
.ml70 {
margin-left: 70px;
}
.ml75 {
margin-left: 75px;
}
.ml80 {
margin-left: 80px;
}
.ml85 {
margin-left: 85px;
}
.ml90 {
margin-left: 90px;
}
.ml95 {
margin-left: 95px;
}
.ml100 {
margin-left: 100px;
}
.ml105 {
margin-left: 105px;
}
.ml110 {
margin-left: 110px;
}
.ml115 {
margin-left: 115px;
}
.ml120 {
margin-left: 120px;
}
.ml125 {
margin-left: 125px;
}
.ml130 {
margin-left: 130px;
}
.ml135 {
margin-left: 135px;
}
.ml140 {
margin-left: 140px;
}
.ml145 {
margin-left: 145px;
}
.ml150 {
margin-left: 150px;
}
.mr1 {
margin-right: 1px;
}
.mr2 {
margin-right: 2px;
}
.mr3 {
margin-right: 3px;
}
.mr4 {
margin-right: 4px;
}
.mr5 {
margin-right: 5px;
}
.mr6 {
margin-right: 6px;
}
.mr7 {
margin-right: 7px;
}
.mr8 {
margin-right: 8px;
}
.mr9 {
margin-right: 9px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.mr20 {
margin-right: 20px;
}
.mr25 {
margin-right: 25px;
}
.mr30 {
margin-right: 30px;
}
.mr35 {
margin-right: 35px;
}
.mr40 {
margin-right: 40px;
}
.mr45 {
margin-right: 45px;
}
.mr50 {
margin-right: 50px;
}
.mr55 {
margin-right: 55px;
}
.mr60 {
margin-right: 60px;
}
.mr65 {
margin-right: 65px;
}
.mr70 {
margin-right: 70px;
}
.mr75 {
margin-right: 75px;
}
.mr80 {
margin-right: 80px;
}
.mr85 {
margin-right: 85px;
}
.mr90 {
margin-right: 90px;
}
.mr95 {
margin-right: 95px;
}
.mr100 {
margin-right: 100px;
}
.mr105 {
margin-right: 105px;
}
.mr110 {
margin-right: 110px;
}
.mr115 {
margin-right: 115px;
}
.mr120 {
margin-right: 120px;
}
.mr125 {
margin-right: 125px;
}
.mr130 {
margin-right: 130px;
}
.mr135 {
margin-right: 135px;
}
.mr140 {
margin-right: 140px;
}
.mr145 {
margin-right: 145px;
}
.mr150 {
margin-right: 150px;
}
.mr-15 {
margin-right: -15px;
}
.mr-30 {
margin-right: -30px;
}
.mr-45 {
margin-right: -45px;
}
.mr-60 {
margin-right: -60px;
}
.pt1 {
padding-top: 1px;
}
.pt2 {
padding-top: 2px;
}
.pt3 {
padding-top: 3px;
}
.pt4 {
padding-top: 4px;
}
.pt5 {
padding-top: 5px;
}
.pt6 {
padding-top: 6px;
}
.pt7 {
padding-top: 7px;
}
.pt8 {
padding-top: 8px;
}
.pt9 {
padding-top: 9px;
}
.pt10 {
padding-top: 10px;
}
.pt15 {
padding-top: 15px;
}
.pt20 {
padding-top: 20px;
}
.pt25 {
padding-top: 25px;
}
.pt30 {
padding-top: 30px;
}
.pt35 {
padding-top: 35px;
}
.pt40 {
padding-top: 40px;
}
.pt45 {
padding-top: 45px;
}
.pt50 {
padding-top: 50px;
}
.pt55 {
padding-top: 55px;
}
.pt60 {
padding-top: 60px;
}
.pt65 {
padding-top: 65px;
}
.pt70 {
padding-top: 70px;
}
.pt75 {
padding-top: 75px;
}
.pt80 {
padding-top: 80px;
}
.pt85 {
padding-top: 85px;
}
.pt90 {
padding-top: 90px;
}
.pt95 {
padding-top: 95px;
}
.pt100 {
padding-top: 100px;
}
.pt105 {
padding-top: 105px;
}
.pt110 {
padding-top: 110px;
}
.pt115 {
padding-top: 115px;
}
.pt120 {
padding-top: 120px;
}
.pt125 {
padding-top: 125px;
}
.pt130 {
padding-top: 130px;
}
.pt135 {
padding-top: 135px;
}
.pt140 {
padding-top: 140px;
}
.pt145 {
padding-top: 145px;
}
.pt150 {
padding-top: 150px;
}
.pt200 {
padding-top: 200px;
}
.pt240 {
padding-top: 240px;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 1px;
}
.pb2 {
padding-bottom: 2px;
}
.pb3 {
padding-bottom: 3px;
}
.pb4 {
padding-bottom: 4px;
}
.pb5 {
padding-bottom: 5px;
}
.pb6 {
padding-bottom: 6px;
}
.pb7 {
padding-bottom: 7px;
}
.pb8 {
padding-bottom: 8px;
}
.pb9 {
padding-bottom: 9px;
}
.pb10 {
padding-bottom: 10px;
}
.pb15 {
padding-bottom: 15px;
}
.pb20 {
padding-bottom: 20px;
}
.pb25 {
padding-bottom: 25px;
}
.pb30 {
padding-bottom: 30px;
}
.pb35 {
padding-bottom: 35px;
}
.pb40 {
padding-bottom: 40px;
}
.pb45 {
padding-bottom: 45px;
}
.pb50 {
padding-bottom: 50px;
}
.pb55 {
padding-bottom: 55px;
}
.pb60 {
padding-bottom: 60px;
}
.pb65 {
padding-bottom: 65px;
}
.pb70 {
padding-bottom: 70px;
}
.pb75 {
padding-bottom: 75px;
}
.pb80 {
padding-bottom: 80px;
}
.pb85 {
padding-bottom: 85px;
}
.pb90 {
padding-bottom: 90px;
}
.pb95 {
padding-bottom: 95px;
}
.pb100 {
padding-bottom: 100px;
}
.pb105 {
padding-bottom: 105px;
}
.pb110 {
padding-bottom: 110px;
}
.pb115 {
padding-bottom: 115px;
}
.pb120 {
padding-bottom: 120px;
}
.pb125 {
padding-bottom: 125px;
}
.pb130 {
padding-bottom: 130px;
}
.pb135 {
padding-bottom: 135px;
}
.pb140 {
padding-bottom: 140px;
}
.pb145 {
padding-bottom: 145px;
}
.pb150 {
padding-bottom: 150px;
}
.pb200 {
padding-bottom: 200px;
}
.pb250 {
padding-bottom: 250px;
}
.pb300 {
padding-bottom: 300px;
}
.pl1 {
padding-left: 1px;
}
.pl2 {
padding-left: 2px;
}
.pl3 {
padding-left: 3px;
}
.pl4 {
padding-left: 4px;
}
.pl5 {
padding-left: 5px;
}
.pl6 {
padding-left: 6px;
}
.pl7 {
padding-left: 7px;
}
.pl8 {
padding-left: 8px;
}
.pl9 {
padding-left: 9px;
}
.pl10 {
padding-left: 10px;
}
.pl15 {
padding-left: 15px;
}
.pl20 {
padding-left: 20px;
}
.pl25 {
padding-left: 25px;
}
.pl30 {
padding-left: 30px;
}
.pl35 {
padding-left: 35px;
}
.pl40 {
padding-left: 40px;
}
.pl45 {
padding-left: 45px;
}
.pl50 {
padding-left: 50px;
}
.pl55 {
padding-left: 55px;
}
.pl60 {
padding-left: 60px;
}
.pl65 {
padding-left: 65px;
}
.pl70 {
padding-left: 70px;
}
.pl75 {
padding-left: 75px;
}
.pl80 {
padding-left: 80px;
}
.pl85 {
padding-left: 85px;
}
.pl90 {
padding-left: 90px;
}
.pl95 {
padding-left: 95px;
}
.pl100 {
padding-left: 100px;
}
.pl105 {
padding-left: 105px;
}
.pl110 {
padding-left: 110px;
}
.pl115 {
padding-left: 115px;
}
.pl120 {
padding-left: 120px;
}
.pl125 {
padding-left: 125px;
}
.pl130 {
padding-left: 130px;
}
.pl135 {
padding-left: 135px;
}
.pl140 {
padding-left: 140px;
}
.pl145 {
padding-left: 145px;
}
.pl150 {
padding-left: 150px;
}
.pr1 {
padding-right: 1px;
}
.pr2 {
padding-right: 2px;
}
.pr3 {
padding-right: 3px;
}
.pr4 {
padding-right: 4px;
}
.pr5 {
padding-right: 5px;
}
.pr6 {
padding-right: 6px;
}
.pr7 {
padding-right: 7px;
}
.pr8 {
padding-right: 8px;
}
.pr9 {
padding-right: 9px;
}
.pr10 {
padding-right: 10px;
}
.pr15 {
padding-right: 15px;
}
.pr20 {
padding-right: 20px;
}
.pr25 {
padding-right: 25px;
}
.pr30 {
padding-right: 30px;
}
.pr35 {
padding-right: 35px;
}
.pr40 {
padding-right: 40px;
}
.pr45 {
padding-right: 45px;
}
.pr50 {
padding-right: 50px;
}
.pr55 {
padding-right: 55px;
}
.pr60 {
padding-right: 60px;
}
.pr65 {
padding-right: 65px;
}
.pr70 {
padding-right: 70px;
}
.pr75 {
padding-right: 75px;
}
.pr80 {
padding-right: 80px;
}
.pr85 {
padding-right: 85px;
}
.pr90 {
padding-right: 90px;
}
.pr95 {
padding-right: 95px;
}
.pr100 {
padding-right: 100px;
}
.pr105 {
padding-right: 105px;
}
.pr110 {
padding-right: 110px;
}
.pr115 {
padding-right: 115px;
}
.pr120 {
padding-right: 120px;
}
.pr125 {
padding-right: 125px;
}
.pr130 {
padding-right: 130px;
}
.pr135 {
padding-right: 135px;
}
.pr140 {
padding-right: 140px;
}
.pr145 {
padding-right: 145px;
}
.pr150 {
padding-right: 150px;
}
.p0 {
padding: 0;
}
.z1 {
z-index: 1;
}
.z2 {
z-index: 2;
}
.fs11 {
font-size: 11px;
}
.fs12 {
font-size: 12px;
}
.fs13 {
font-size: 13px;
}
.fs14 {
font-size: 14px;
}
.fs15 {
font-size: 15px;
}
.fs16 {
font-size: 16px;
}
.fs17 {
font-size: 17px;
}
.fs18 {
font-size: 18px;
}
.fs19 {
font-size: 19px;
}
.fs20 {
font-size: 20px;
}
.fs21 {
font-size: 21px;
}
.fs22 {
font-size: 22px;
}
.fs23 {
font-size: 23px;
}
.fs24 {
font-size: 24px;
}
.fs25 {
font-size: 25px;
}
.fs26 {
font-size: 26px;
}
.fs27 {
font-size: 27px;
}
.fs28 {
font-size: 28px;
}
.fs29 {
font-size: 29px;
}
.fs30 {
font-size: 30px;
}
.fs32 {
font-size: 32px;
}
.fs34 {
font-size: 34px;
}
.fs36 {
font-size: 36px;
}
.fs38 {
font-size: 38px;
}
.fs40 {
font-size: 40px;
}
.fs42 {
font-size: 42px;
}
.fs44 {
font-size: 44px;
}
.fs46 {
font-size: 46px;
}
.fs48 {
font-size: 48px;
}
.fs50 {
font-size: 50px;
}
.fs60 {
font-size: 60px;
}
.fs64 {
font-size: 64px;
}
.fs70 {
font-size: 70px;
}
.fs80 {
font-size: 80px;
}
.fs90 {
font-size: 90px;
}
.fs100 {
font-size: 100px;
}
.fs110 {
font-size: 110px;
}
.fs120 {
font-size: 120px;
}
.fs130 {
font-size: 130px;
}
.fsxs {
font-size: 0.618rem;
}
.fss {
font-size: 0.809rem;
}
.fss2 {
font-size: 0.9rem;
}
.fsms {
font-size: 1.15rem;
}
.fsm {
font-size: 1.309rem;
}
.fsl {
font-size: 1.618rem;
}
.fsxl {
font-size: 2.118rem;
}
.fsxxl {
font-size: 2.618rem;
}
.fs3l {
font-size: 3.427rem;
}
.fs4l {
font-size: 4.236rem;
}
.fs5l {
font-size: 6.85rem;
}
.fsn {
font-size: 1rem;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.block {
display: block;
}
.rounded-5 {
border-radius: 0.5rem;
}
.badge {
border-radius: 0;
}
.btn {
border-radius: 0.66rem;
}
.z9999 {
position: relative;
z-index: 9999;
}
.ls0 {
letter-spacing: 0;
}
.ls1 {
letter-spacing: 1px;
}
.ls2 {
letter-spacing: 2px;
}
.ls3 {
letter-spacing: 3px;
}
.ls05 {
letter-spacing: 0.5px;
}
.ls10 {
letter-spacing: 0.01em;
}
.ls20 {
letter-spacing: 0.02em;
}
.ls30 {
letter-spacing: 0.03em;
}
.ls40 {
letter-spacing: 0.04em;
}
.ls50 {
letter-spacing: 0.05em;
}
.ls60 {
letter-spacing: 0.06em;
}
.ls70 {
letter-spacing: 0.07em;
}
.ls80 {
letter-spacing: 0.08em;
}
.ls90 {
letter-spacing: 0.09em;
}
.ls100 {
letter-spacing: 0.1em;
}
.ls150 {
letter-spacing: 0.15em;
}
.ls180 {
letter-spacing: 0.18em;
}
.ls200 {
letter-spacing: 0.2em;
}
.ls300 {
letter-spacing: 0.3em;
}
.ls400 {
letter-spacing: 0.4em;
}
.ls500 {
letter-spacing: 0.5em;
}
.lh1 {
line-height: 1;
}
.lh11 {
line-height: 1.1;
}
.lh12 {
line-height: 1.2;
}
.lh14 {
line-height: 1.4;
}
.lh15 {
line-height: 1.5;
}
.lh17 {
line-height: 1.7;
}
.lh18 {
line-height: 1.77;
}
.lh2 {
line-height: 2;
}
.lh3 {
line-height: 3;
}
.lh24 {
line-height: 2.4;
}
.lh4 {
line-height: 4;
}
.b {
font-weight: bold;
}
.n {
font-weight: normal;
}
.sb {
-webkit-font-smoothing: auto;
}
.light {
color: #999;
}
.dark {
color: #666;
}
.section-bottom {
position: relative;
}
.bg {
background-position: center center;
background-size: cover;
}
.bg-fix {
background-attachment: fixed;
}
.vh100 {
height: 100vh;
}
a {
color: inherit;
}
.text-green {
color: #00ad83;
}
.text-blue {
color: #0096b9;
}
.mask {
position: relative;
}
.mask::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.mask-white::before {
background: rgba(255, 255, 255, 0.35);
}
.mask-dark::before {
background: rgba(0, 0, 0, 0.35);
}
.mask-grade-02::before {
background: rgb(0, 173, 131);
background: linear-gradient(337deg, rgba(0, 173, 131, 0.7) 0%, rgba(252, 206, 66, 0.3) 100%);
}
.step-number {
background: #00ad83;
color: #fff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50px;
line-height: 1.3;
padding: 0.6rem;
font-size: 0.8rem;
}
.stores-notification {
font-size: 14px;
}
.card-store {
border-radius: 1rem;
border: none;
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
}
.card-store .card-img-top {
border-radius: 1rem 1rem 0 0;
height: 200px;
object-fit: cover;
background-image: linear-gradient(0deg, #74ebd580, #acb6e580);
}
.card-store .card-body {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.card-store .card-text {
position: relative;
flex-grow: 1;
overflow: hidden;
height: 140px;
}
.card-store .card-text::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 32px;
background: linear-gradient(0, white, transparent);
left: 0;
right: 0;
bottom: 0;
}
.card-store-icon {
border-radius: 50%;
width: 86px;
height: 86px;
padding: 3px;
background: #fff;
position: absolute;
top: -40px;
}
.card-store-icon img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-store .card-title,
.card-store .card-owner {
margin-left: 80px;
}
.card-store .card-title {
margin-bottom: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.card-regular {
background: #f0f0f0;
padding: 16px;
border-radius: 4px;
}
.card-regular-title {
margin-bottom: 8px;
font-size: 10px;
line-height: 16px;
}
.card-regular-schedules {
list-style: none;
font-size: 12px;
line-height: 16px;
}
.card-store .card-owner {
font-size: 10px;
position: relative;
top: -4px;
}
.hero-img {
background: url(/toppage/img/keyv03.jpg);
background-size: cover;
background-position: right center;
height: 100%;
width: 100%;
min-height: 320px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 24px;
}
}
@media (min-width: 769px) {
.hero {
height: 100vh;
max-height: min(50vw, 1024px);
}
.store-row {
min-height: 34vw;
margin-top: 5rem;
}
.store-row-01 {
min-height: 44vw;
}
.store-row-02 {
margin-top: -6vw;
min-height: 45vw;
}
.store-row-03 {
margin-top: 3rem;
}
}
.bg-grade-01 {
background: rgb(227, 96, 72);
background: linear-gradient(337deg, rgba(227, 96, 72, 0.3) 0%, rgba(252, 206, 66, 0.3) 100%);
}
.bg-grade-01- {
background: rgb(227, 96, 72);
background: linear-gradient(337deg, rgba(224, 92, 247, 1) 0%, rgba(255, 226, 86, 1) 100%);
}
.bg-grade-02 {
background: rgb(0, 173, 131);
background: linear-gradient(337deg, rgba(0, 173, 131, 1) 0%, rgba(252, 206, 66, 0.5) 100%);
}
.bg-grade-lively {
background: rgb(227, 96, 72);
background: linear-gradient(
337deg,
rgba(227, 96, 72, 1) 0%,
rgba(255, 255, 255, 1) 12%,
rgba(170, 109, 171, 1) 24%,
rgba(255, 255, 255, 1) 36%,
rgba(0, 150, 185, 1) 48%,
rgba(255, 255, 255, 1) 60%,
rgba(0, 173, 131, 1) 72%,
rgba(255, 255, 255, 1) 84%,
rgba(252, 206, 66, 1) 100%
);
}
.bg-grey {
background: #4d4d4d;
}
.bg-yellow {
background: #fcce42;
}
.bg-green {
background: #00ad83;
}
.bg-red {
background: #e36048;
}
.bg-blue {
background: #0096b9;
}
.bg-violet {
background: #aa6dab;
}
.midashi-01 {
position: relative;
font-size: 1.2rem;
}
.midashi-01:after {
content: "";
height: 5px;
display: block;
background: #fcce42;
width: 60px;
margin: auto;
margin-top: 0.8rem;
}
.btn-lively {
color: #fff;
background-color: #00ad83;
border-color: #00ad83;
}
.btn-lively:hover,
.btn-blue:hover {
color: #fff;
}
.btn-blue {
color: #fff;
background-color: #0096b9;
border-color: #0096b9;
}
.navbar-brand {
margin-left: 40px;
}
.navbar-brand-img {
height: 30px;
}
#g-nav {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top: 0;
left: -120%;
width: 67%;
height: 100vh; /*ナビの高さ*/
/*動き*/
transition: all 0.6s;
}
/*アク�?��ブクラスがつ�?��ら位置�?0に*/
#g-nav.panelactive {
left: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた�?�合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh; /*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
/*ナビゲーション天地中央�?��*/
position: absolute;
z-index: 999;
top: 70px;
}
/*リスト�?レイアウト設�?*/
#g-nav li {
list-style: none;
}
#g-nav li a {
color: #333;
text-decoration: none;
padding: 10px;
display: block;
letter-spacing: 0.1em;
}
.openbtn {
position: fixed;
cursor: pointer;
width: 50px;
height: 50px;
z-index: 9999;
left: -2px;
top: 5px;
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #666;
}
.rightbtn .btn {
font-size: 0.6rem;
}
.openbtn span:nth-of-type(1) {
top: 15px;
width: 45%;
}
.openbtn span:nth-of-type(2) {
top: 23px;
width: 35%;
}
.openbtn span:nth-of-type(3) {
top: 31px;
width: 20%;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-135deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(135deg);
width: 30%;
}
.navbar::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 15px;
right: 0;
z-index: -2;
background: #fcce42;
}
.navbar::before {
content: "";
display: block;
position: absolute;
top: 3px;
left: 5px;
right: 5px;
bottom: 3px;
background: #fff;
z-index: -1;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(41, 34, 34, 0.2);
}
@media (min-width: 768px) {
.navbar-brand {
margin-left: 60px;
}
.navbar-brand > img {
height: 36px;
}
.openbtn {
left: 12px;
}
.rightbtn .btn {
font-size: 0.8rem;
}
.rightbtn {
right: 18px;
}
}
.navbar-brand-img {
height: 30px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}