@charset "UTF-8";

@media print, screen and (max-width:1199px) {

#kvWrap {
position: relative;
width: 100vw;
padding-bottom: 60px;
}

#kv {
position: relative;
width: 96%;
z-index: 3;
margin: 0 0 0 auto;
padding-top: 80px;
}

#kv img {
width: 100%;
}

#kvWrap h1 {
position: relative;
width: 88%;
font-family: var(--font-oswald);
font-size: 1.6rem;
color:  var(--themeColor);
text-align: left;
margin: 0 auto;
margin-top: 30px;
z-index: 1;
}

#kvWrap h1 span {
font-family: var(--font-primary);
font-size: 2.6rem;
color:  var(--txtColor);
display: block;
line-height: 1.5;
}

#dotBg {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 80%;
height: 100%;
z-index: 0;
top: 0;
left: 80px;
}

#wrapAboutUs {
position: relative;
width: 100%;
margin: 0 auto;
padding: 50px 0 60px;
}

#aboutUsL {
width: 100%;
}

#aboutUsR {
width: 88%;
text-align: justify;
margin: 0 auto;
margin-top: -30px;
padding: 60px 30px 30px;
border: 1px solid var(--txtColor);
}

.commonTitle {
font-family: var(--font-oswald);
font-size: 1.4rem;
text-align: center;
color:  var(--themeColor);
margin-bottom: 20px;
line-height: 1.2;
}

.commonTitle span {
font-family: var(--font-primary);
font-size: 2.6rem;
display: block;
color: var(--txtColor);
margin-top: 5px;
}

.btn {
position: relative;
background-color: transparent;
font-family: var(--font-oswald);
width: 90px;
height: 32px;
font-size: 1.4rem;
text-align: left;
color: var(--txtColor);
cursor: pointer;
letter-spacing: .05em;
border: 0;
border-bottom: 1px solid var(--txtColor);
transition: .6s;
}

.btn::after {
position: absolute;
background-color: var(--txtColor);
width: 8px;
height: 1px;
content: "";
right: -1px;
bottom: 2px;
transform: rotate(45deg);
}

.wrapColor {
position: relative;
background-color: var(--themeSubColor);
width: 100%;
padding: 60px 0;
}

#wrapService {
position: relative;
width: 88%;
margin: 0 auto;
z-index: 1;
}

.service {
background-color: #fff;
width: 100%;
margin-bottom: 20px;
border: 1px solid var(--txtColor);
}

.service .inner {
width: 100%;
text-align: justify;
padding: 30px;
}

.commonSubTitle {
font-size: 2rem;
color: var(--themeColor);
margin-bottom: 20px;
padding: 0 0 2px 15px;
line-height: 1.5;
border-left: 1px solid var(--themeColor);
}

#serviceBg {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 85%;
height: 520px;
z-index: 0;
right: 0;
bottom: -60px;
}

#wrapCampaignInfo {
position: relative;
background-color: var(--themeColor);
width: 88%;
text-align: center;
color: #fff;
margin: 30px auto;
margin-top: 120px;
padding: 30px;
}

#wrapCampaignInfo h2,
#wrapCampaignInfo h2 span {
color: #fff;
}

#btnFlex {
margin-top: 30px;
}

.btnW {
position: relative;
background-color: #fff;
font-family: var(--font-oswald);
width: 100%;
height: 65px;
font-size: 1.6rem;
font-weight: 500;
text-align: center;
color: var(--themeColor);
margin-bottom: 10px;
padding-bottom: 3px;
cursor: pointer;
letter-spacing: .05em;
border: 2px solid #fff;
transition: .3s;
line-height: 1.2;
}

.btnW:hover {
background-color: var(--themeColor);
color: #fff;
}

.btnW::before,
.btnW::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid var(--themeColor);
border-right: 2px solid var(--themeColor);
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 20px;
}

.btnW::after {
right: 26px;
}

.btnW:hover::before,
.btnW:hover::after {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}

.wrapIsm {
position: relative;
width: 100%;
padding: 60px 0 115px;
}

#localWrap {
position: relative;
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-top: 45px;
padding: 25px;
border: 1px solid var(--txtColor);
z-index: 1;
}

.commonBgTopR {
position: absolute;
background-color: #f5f5f5;
background-size: 7px;
width: 85%;
height: 400px;
z-index: -1;
right: 0;
top: 0;
}

.commonBgBottomL {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 85%;
height: 300px;
z-index: 0;
left: 0;
bottom: 0;
}

.commonBgTopL {
position: absolute;
background-color: #f5f5f5;
background-size: 7px;
width: 85%;
height: 400px;
z-index: -1;
left: 0;
top: 0;
}

.commonBgBottomR {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 85%;
height: 300px;
z-index: 0;
right: 0;
bottom: 0;
}

#localL {
width: 100%;
margin-bottom: 20px;
}

#localR {
width: 100%;
text-align: justify
}

#wrapNews {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 60px 0;
}

#newsL {
width: 100%;
border-right: 1px solid var(--txtColor);
}

#newsR {
position: relative;
width: 100%;
}

#newsR a {
display: block;
margin-bottom: 20px;
}

#newsR h3 {
position: relative;
padding-right: 30px;
}

#newsR h3::before,
#newsR h3::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 1px solid var(--txtColor);
border-right: 1px solid var(--txtColor);
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 0;
}

#newsR h3::after {
right: 5px;
}

.btnW::after {
right: 26px;
}

.postDate {
font-family: var(--font-oswald);
color: #959595;
display: inline-block;
}

.categoryTag {
position: relative;
width: auto;
height: 22px;
font-size: 1.2rem;
color: #959595;
text-align: center;
margin-left: 10px;
padding: 0 5px;
display: inline-block;
border: 1px solid #959595;
line-height: 20px;
top: -1px;
}

#wrapRecruit {
background-color: #2e2e2e;
width: 100%;
}

#wrapRecruit img {
width: 100%;
}

#recruitWrap {
position: relative;
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-top: -30px;
padding: 30px;
z-index: 1;
}

#recruitWrap p {
text-align: justify;
}

/**/

#wrapTitle {
position: relative;
width: 88%;
margin: 0 auto;
margin-top: 80px;
}

#wrapTitle h1 {
font-family: var(--font-oswald);
font-size: 3.4rem;
text-align: left;
color: var(--themeColor);
line-height: 1.1;
}

#wrapTitle h1 span {
font-family: var(--font-primary);
font-size: 1.6rem;
display: block;
color: var(--txtColor);
margin-top: 10px;
}

#breadcrumb,
#breadcrumbCo {
width: 100%;
font-size: 1rem !important;
text-align: left;
margin-top: 30px;
margin-bottom: 40px;
padding-top: 20px;
border-top: 1px solid  var(--txtColor);
}

#breadcrumbCo {
margin-bottom: 30px;
padding: 0 0 20px;
border-top: 0;
border-bottom: 1px solid  var(--txtColor);
}

/**/

.wrapCo {
position: relative;
width: 88%;
text-align: justify;
margin: 0 auto;
padding-bottom: 30px;
}

#companyFlex {
margin: 30px auto;
}

#companyL {
width: 100%;
}

#companyR {
width: 88%;
text-align: justify;
margin: 0 auto;
margin-top: 15px;
padding: 30px;
border-left: 1px solid  var(--txtColor);
border-right: 1px solid  var(--txtColor);
border-bottom: 1px solid  var(--txtColor);
}

#companyR p {
margin-bottom: 0;
}

#messageWrap {
position: relative;
background-color: #fff;
width: 88%;
margin: 30px auto;
padding: 30px;
border: 1px solid var(--txtColor);
z-index: 1;
}

#messageWrap h3 {
font-size: 1.8rem;
margin-bottom: 30px;
line-height: 1.5;
}

#messageWrap p {
text-align: justify;
margin-bottom: 0;
}

#outline {
width: 88%;
text-align: left;
margin: 0 auto;
margin-bottom: -60px;
}

#outline dt {
float: left;
padding: 20px 0;
}

#outline dd {
padding: 20px 0 20px 80px;
border-bottom: 1px solid var(--txtColor);
}

/**/

.wrapBgCommon {
position: relative;
width:100%;
margin-bottom: 60px;
padding: 60px 0 80px;
}

.serviceWrap {
position: relative;
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-top: 30px;
padding-bottom: 30px;
border: 1px solid var(--txtColor);
z-index: 1;
}

.serviceFlex {
}

.serviceL {
width: 80%;
text-align: justify;
margin: 0 auto;
}

.serviceR {
width: 100%;
text-align: justify;
margin-bottom: 30px;
}

.serviceR .inner {
width: 88%;
margin: 0 auto;
}

.btnFlexCe {
}

.btnService {
position: relative;
background-color: var(--txtColor);
font-family: var(--font-primary);
width: 80%;
height: 44px;
font-size: 1.4rem;
text-align: center;
color: #fff;
margin-top: 10px;
padding-bottom: 3px;
cursor: pointer;
border: 1px solid var(--txtColor);
transition: .3s;
}

.btnService::before,
.btnService::after {
position: absolute;
width: 6px;
height: 6px;
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 20px;
}

.btnService::after {
right: 25px;
}

.serviceBgTopL {
position: absolute;
background-color: #f5f5f5;
background-size: 7px;
width: 75%;
height: 85%;
z-index: -1;
left: 0;
top: 0;
}

.serviceBgBottomR {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 85%;
height: 65%;
z-index: 0;
right: 0;
bottom: 0;
}

/**/

#pageNav {
width: 88%;
margin: 0 auto;
margin-bottom: 30px;
}

#pageNav ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#pageNav li {
position: relative;
background-color: var(--txtColor);
width: 49%;
height: 44px;
font-size: 1.2rem;
text-align: left;
margin-bottom: 5px;
padding: 0 12px;
line-height: 42px;
transition: .3s;
}

#pageNav li a {
height: 100%;
color: #fff;
display: block;
}

#pageNav li::before,
#pageNav li::after {
position: absolute;
width: 6px;
height: 6px;
margin: auto;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
content: "";
transform: rotate(45deg);
top: -8px;
bottom: 0;
right: 12px;
}

#pageNav li::after {
top: 1px;
}

/**/

#wrapHouseInfo {
position: relative;
width: 88%;
margin: 0 auto;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
z-index: 1;
}

.houseInfo {
background-color: #fff;
width: 585px;
margin-bottom: 30px;
border: 1px solid var(--txtColor);
}

.houseInfo .inner {
width: 100%;
text-align: justify;
padding: 30px;
}

.houseInfo .inner p {
margin-bottom: 0;
}

.houseInfoBg {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 85%;
height: 580px;
z-index: 0;
left: 0;
bottom: -112px;
}

.wrapTopPa {
width: 88%;
margin: 0 auto;
padding: 160px 0 50px;
}

.btnRedFlex {
width: 100%;
margin: 0 auto;
margin-top: 30px;
}

.btnRed {
position: relative;
background-color: var(--themeColor);
font-family: var(--font-oswald);
width: 100%;
height: 65px;
font-size: 1.6rem;
font-weight: 500;
text-align: center;
color: #fff;
margin-bottom: 10px;
padding-bottom: 3px;
cursor: pointer;
line-height: 1.5;
letter-spacing: .05em;
border: 2px solid var(--themeColor);
transition: .3s;
}

.btnRed::before,
.btnRed::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 20px;
}

.btnRed::after {
right: 26px;
}

.wrapContactJoyfit {
background-color: var(--themeColor);
width: 100%;
padding: 60px 0;
}

.wrapContactJoyfit .inner {
width: 88%;
color: #fff;
margin: 0 auto;
}

.wrapContactJoyfit .inner h2 {
color: #fff !important;
}

.wrapContactJoyfit .inner h2 span {
color: #fff !important;
}

.contactJoyfitL {
width: 100%;
margin-bottom: 30px;
border-bottom: 1px solid #fff;
}

.contactJoyfitR {
width: 100%;
text-align: center;
}

.contactJoyfitR .call a {
font-family: var(--font-oswald);
font-size: 4rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}

.contactJoyfitR .call img {
position: relative;
margin-right: 8px;
top: -10px;
}

.btnContactJoyfit {
position: relative;
background-color: #fff;
font-family: var(--font-oswald);
width: 100%;
height: 65px;
font-size: 1.6rem;
font-weight: 500;
text-align: center;
color: var(--themeColor);

padding-bottom: 3px;
cursor: pointer;
letter-spacing: .05em;
border: 2px solid #fff;
transition: .3s;
}

.btnContactJoyfit i {
margin-right: 5px;
}

.btnContactJoyfit::before,
.btnContactJoyfit::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid var(--themeColor);
border-right: 2px solid var(--themeColor);
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 15px;
}

.btnContactJoyfit::after {
right: 21px;
}

.wrap {
width: 88%;
margin: 0 auto;
padding: 60px 0;
}

.wrap2 {
width: 88%;
margin: 0 auto;
padding: 0 0 60px;
}

#firstTimeUsersImg {
width: 100%;
margin: 0 auto;
}

#firstTimeUsersFlex {
width: 100%;
margin: 0 auto;
}

#firstTimeUsersL {
position: relative;
width: 100%;
margin-top: 30px;
margin-bottom: 20px;
}

#firstTimeUsersL #beginner {
position: absolute;
width: 108px;
height: 108px;
z-index: 1;
left: -30px;
top: -30px;
}

#firstTimeUsersR {
width: 100%;
text-align: justify;
}

#maruttoTitle {
font-size:1.7rem;
text-align: center;
color: var(--themeColor);
line-height: 2.5;
}

#firstTimeUsersR p {
margin-bottom: 0;
}

#nationwideJoyfitTitle {
font-size: 2rem;
text-align: center;
color: var(--themeColor);
margin-top: 30px;
line-height: 1.4;
}

#nationwideJoyfitTitle span {
font-size: 4.2rem;
font-weight: 700;
display: block;
}

#nationwideJoyfit {
margin-top: 26px;
margin-bottom: 30px;
padding-top: 28px;
border-top: 1px solid var(--txtColor);
border-bottom: 1px solid var(--txtColor);
}

#nationwideJoyfit h4 {
font-size: 1.8rem;
text-align: center;
margin-bottom: 20px;
}

#nationwideJoyfitTitle2 {
font-size: 2rem;
text-align: center;
color: var(--themeColor);
margin-top: 30px;
margin-bottom: 30px;
line-height: 1.4;
}

#nationwideJoyfitTitle2 span {
font-size: 2.8rem;
font-weight: 700;
display: block;
}

.nationwideJoyfitTitle3 {
font-size: 2rem;
color: var(--themeColor);
margin-bottom: 5px;
}

.nationwideJoyfitTitle3 span {
position: relative;
font-family: var(--font-oswald);
font-size: 2.6rem;
margin-right: 5px;
top: 2px;
}

.btnServiceContact {
position: relative;
background-color: var(--txtColor);
font-family: var(--font-primary);
width: 88%;
height: 44px;
font-size: 1.4rem;
text-align: left;
color: #fff;
margin: 0 auto;
padding: 0 15px;
padding-bottom: 3px;
cursor: pointer;
border: 1px solid var(--txtColor);
transition: .3s;
}

.btnServiceContact::before,
.btnServiceContact::after {
position: absolute;
width: 6px;
height: 6px;
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 15px;
}

.btnServiceContact::after {
right: 20px;
}

#voiceFlex {
margin-top: 60px;
}

.voice {
position: relative;
width: 100%;
text-align: justify;
margin-bottom: 40px;
padding: 50px 30px 30px;
border: 1px solid var(--txtColor);
}

.voice:last-child {
margin-bottom: 0;
}

.voice p {
margin-bottom: 10px;
}

.voiceIcon {
position: absolute;
width: 70px;
margin: auto;
z-index: 1;
left: 0;
right: 0;
top: -35px;
}

.voiceR  {
text-align: right;
}

#priceLrFlex {
position: relative;
width: 88%;
margin: 0 auto;
margin-top: 30px;
z-index: 1;
}

.priceLr {
background-color: #fff;
width: 100%;
font-size: 1.5rem;
color: var(--themeColor);
margin-bottom: 20px;
padding: 25px 30px;
border: 1px solid var(--txtColor);
}

.priceLr h3 {
color: var(--txtColor);
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--txtColor);
}

.priceLr span {
position: relative;
font-size: 3rem;
top: 2px;
}

.wrapPrice {
position: relative;
background-color: #fff;
width: 88%;
text-align: left;
margin: 30px auto;
margin-bottom: 60px;
padding: 15px 30px;
border: 1px solid var(--txtColor);
z-index: 1;
}

.wrapPrice dl {
width: 100%;
}

.wrapPrice dt {
width: 100%;
font-size: 1.5rem;
padding: 20px 0 0;
}

.wrapPrice dd {
font-size: 1.2rem;
padding: 0 0 20px;
border-bottom: 1px solid var(--txtColor);
}

.wrapPrice dd:last-child {
border-bottom: 0;
}

.monthlyFee {
color: var(--themeColor);
margin-bottom: 5px;
line-height: 1.3;
}

.monthlyFee em {
font-size: 1.3rem;
}

.monthlyFee span  {
font-size: 1.8rem;
}

.wrapPriceBg {
position: absolute;
background: url("../img/dot.webp") repeat;
background-size: 7px;
width: 92%;
height: 580px;
z-index: 0;
left: 0;
bottom: -112px;
}

.wrapStoreInfo {
position: relative;
width: 100%;
margin: 0 auto;
margin-top: 30px;
padding: 20px 0 0;
}

.storeInfoPhoto {
position: relative;
width: 100%;
}

.storeInfoTxt {
width: 90%;
text-align: justify;
margin: 0 auto;
margin-top: -30px;
padding:  40px 30px 30px;
border: 1px solid var(--txtColor);
}

.storeInfoTxt dt {
padding: 15px 0 0;
}

.storeInfoTxt dd {
padding: 0 0 15px;
border-bottom: 1px solid var(--txtColor);
}

.storeInfoTxt dd:last-child {
border-bottom: 0;
}

.googleMap {
position: relative;
width: 100%;
height: 0;
margin: 10px auto;
padding-top: 80%;
}

.googleMap iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/**/

.trainingWrap {
position: relative;
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-bottom: 30px;
padding: 30px 30px 10px;
border: 1px solid var(--txtColor);
z-index: 1;
}

.trainingWrap h2 {
font-size: 2rem;
color: var(--themeColor);
}

.trainingFlex {
margin: 20px auto;
}

.trainingL {
width: 100%;
margin-bottom: 20px;
}

.trainingR {
width: 100%;
text-align: justify;
margin-bottom: 30px;
}

.trainingWrap h3 {
font-size: 1.8rem;
text-align: left;
color: var(--themeColor);
padding: 0 0 5px 10px;
border-left: 1px solid var(--themeColor);
line-height: 1;
}

.trainingFlow {
width: 100%;
text-align: justify;
margin-bottom: 20px;
}

.trainingFlow h4 {
font-size: 1.5rem;
color: var(--themeColor);
}

.trainingFlow h4 span {
font-family: var(--font-oswald);
font-size: 1.3rem;
margin-right: 7px;
}

.flowLine {
margin: 30px auto;
border-bottom: 1px solid var(--txtColor); 
}

.trainingLrFlex {
width: 100%;
display: flex;
justify-content: space-between;
}

.trainingLrPhoto {
position: relative;
width: 49.9%;
margin-bottom: 10px;
}

.trainingLrPhoto .before {
position: absolute;
background-color: var(--txtColor); 
font-family: var(--font-oswald);
width: 50px;
height: 18px;
font-size: 1.1rem;
color: #fff;
text-align: center;
letter-spacing: .05em;
left: 0;
bottom: 0;
}

.trainingLrPhoto .after {
position: absolute;
background-color: var(--themeColor); 
font-family: var(--font-oswald);
width: 56px;
height: 18px;
font-size: 1.1rem;
color: #fff;
text-align: center;
letter-spacing: .05em;
left: 0;
bottom: 0;
}

/**/

.wrapLocal {
position: relative;
width: 100%;
margin: 0 auto;
margin-bottom: 30px;
padding: 0;
}

.wrapLocal:last-child {
margin-bottom: 60px;
}

.localPhoto,
.localPhoto2 {
position: relative;
width: 100%;
z-index: 1;
}

.localTxt,
.localTxt2 {
width: 88%;
text-align: justify;
margin: 0 auto;
margin-top: -30px;
padding: 60px 30px 30px;
border: 1px solid var(--txtColor);
}

.localTxt p,
.localTxt2 p {
margin-bottom: 0;
}

/**/

#wrapNewsCo {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 0 0 30px;
}

#wrapNewsCo a {
display: block;
margin-bottom: 30px;
}

#wrapNewsCo h3 {
position: relative;
}

#wrapNewsCo h3::before,
#wrapNewsCo h3::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 1px solid var(--txtColor);
border-right: 1px solid var(--txtColor);
content: "";
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 0;
}

#wrapNewsCo h3::after {
right: 5px;
}

#wrapNewsPost {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 0 0 60px;
}

#wrapNewsPost h1 {
font-size: 2.2rem;
margin: 30px auto;
margin-top: 20px;
line-height: 1.5;
}

#wrapNewsPost img {
margin-bottom: 30px;
}

#wrapNewsPost h2 {
font-size: 2rem;
color: var(--themeColor);
margin: 30px auto;
padding: 0 0 3px 16px;
border-left: 1px solid var(--themeColor);
line-height: 1.4;
}

#wrapNewsPost h3 {
font-size: 1.8rem;
color: var(--themeColor);
margin: 30px auto;
padding: 0 0 3px 16px;
border-left: 1px solid var(--themeColor);
line-height: 1.4;
}

#wrapNewsPost h4 {
font-size: 1.6rem;
color: var(--themeColor);
margin: 30px auto;
padding: 0 0 3px 16px;
border-left: 1px solid var(--themeColor);
line-height: 1.4;
}

#wrapNewsPost ol {
list-style: decimal-leading-zero;
padding-inline-start: 26px;
margin-bottom: 30px;
}

#wrapNewsPost ul {
list-style: disc;
padding-inline-start: 20px;
margin-bottom: 30px;
}

blockquote {
position: relative;
margin: 32px 0;
padding: 30px;
border: 1px solid var(--themeColor);
}

blockquote:before {
position: absolute;
font-family: 'FontAwesome';
content:'\f10d';
font-size: 1.4rem;
color: var(--themeColor);
top: 10px;
left: 20px;
}

blockquote:after {
position: absolute;
font-family: 'FontAwesome';
content:'\f10e';
font-size: 1.4rem;
color: var(--themeColor);
right: 20px;
bottom: 10px;
}

blockquote cite {
display: block;
font-size: 1.2rem;
text-align: right;
padding-right: 20px;
}

#prevNextWrap {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}

.btnBackToList {
background-color: var(--txtColor);
font-family: var(--font-primary);
width: 120px;
height: 60px;
font-size: 1.3rem;
font-weight: 500;
color: #fff;
cursor: pointer;
padding-bottom: 3px;
border: 1px solid var(--txtColor);
}

.btnPrevWrap,
.btnNextWrap {
width: 30px;
margin: 0 30px;
}

.btnPrev,
.btnNext {
position: relative;
background: transparent;
font-size: 0;
text-align: left;
color: var(--txtColor);
text-indent: -1000px;
border: none;
cursor: pointer;
}

.btnPrev {
text-align: right;
}

.btnPrev::before,
.btnPrev::after {
position: absolute;
width: 8px;
height: 8px;
content: "";
margin: auto;
border-top: 1px solid var(--txtColor);
border-left: 1px solid var(--txtColor);
transform: rotate(-45deg);
left: 17px;
top: 0;
bottom: 0;
}

.btnPrev::after {
left: 13px;
}

.btnNext::before,
.btnNext::after {
position: absolute;
width: 8px;
height: 8px;
content: "";
margin: auto;
border-top: 1px solid var(--txtColor);
border-right: 1px solid var(--txtColor);
transform: rotate(45deg);
right: 17px;
top: 0;
bottom: 0;
}

.btnNext::after {
right: 13px;
}

/**/

.wrap1024 {
width: 88%;
text-align: justify;
margin: 0 auto;
padding-bottom: 120px;
}

.contactForm dt {
margin-top: 20px;
margin-bottom: 10px;
}

.contactForm dd {
margin-bottom: 20px;
}

.contactForm .required,
.contactForm .any {
position: relative;
background-color: #c11731;
width: 40px;
height: 20px;
font-size: 1.1rem;
text-align: center;
color: #fff;
display: inline-block;
margin-right: 10px;
line-height: 19px;
top: -.03em;
}

.contactForm .any {
background-color: var(--txtColor);
color: #fff;
}

.contactForm .input {
font-family: var(--font-primary);
width: 100%;
height: 54px;
font-size: 1.6rem;
padding: 0 15px;
border: 1px solid var(--txtColor);
}

.contactForm textarea {
font-family: var(--font-primary);
width: 100%;
height: 200px;
font-size: 1.6rem;
padding: 15px;
border: 1px solid var(--txtColor);
}

.radioWrap {
width: 100%;
margin-bottom: 15px;
}

.radioWrap label {
display: block;
}

input[type="radio"] {
position: relative;
background-color: #fff;
width: 20px;
height: 20px;
margin-left: 0;
margin-right: 0;
border: 1px solid #d0d0d0;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
top: .7em;
}

input[type="radio"]:checked:before {
position: absolute;
background: var(--txtColor);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
content: '';
}

.wpcf7-list-item-label {
padding-right: 10px;
}

.wpcf7-submitWrap p {
text-align: center;
margin-bottom: 0;
}

span.wpcf7-list-item {
margin-left: 0px;
margin-right: 10px;
}

.checkWrap input[type="checkbox"] {
margin: 0;
padding: 0;
background: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: none;
flex-wrap: wrap;
border: none;
}

.checkWrap {
display: flex;
justify-content: center;
}

.checkWrap a {
color: var(--themeColor);
text-decoration: underline;
}

.checkWrap label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}

.checkWrap label::before,
.checkWrap label:has(:checked)::after {
content: "";
}

.checkWrap label::before {
position: relative;
background-color: #fff;
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 3px;
border: 1px solid #d8ddd8;
top: 1px;
}

.checkWrap label:has(:checked)::before {
background-color: var(--pointColor);
}

.checkWrap label:has(:checked)::after {
position: absolute;
top: 2px;
left: 6px;
transform: rotate(45deg);
width: 8px;
height: 12px;
border: solid var(--txtColor);
border-width: 0 2px 2px 0;
}

.submitWrap {
text-align: center;
margin: 20px auto;
margin-bottom: 0;
}

.btnSubmit {
background-color: var(--txtColor);
font-family: var(--font-primary);
width: 140px;
height: 50px;
font-size: 1.6rem;
color: #fff;
cursor: pointer;
padding-bottom: 3px;
border: 1px solid var(--txtColor);
transition: .3s;
}

.btnSubmit:hover {
background-color: #fff;
color:var(--txtColor);
}

/**/

.privacy {
margin-top: 0px;
}

.privacy h2 {
margin-top: 30px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--txtColor);
}

.privacy ul {
list-style: disc;
padding-inline-start: 17px;
margin-bottom: 23px;
}

/**/

footer {
position: relative;
background-color: #2e2e2e;
width: 100%;
text-align: left;
color: #fff;
margin: 0 auto;
padding: 60px 0;
border-bottom: 5px solid var(--themeColor);
}

#footerWrap {
width: 88%;
margin: 0 auto;
}

#footerL {
width: 100%;
font-size: 1.4rem;
margin-bottom: 30px;
}

#footerLogo {
width: 120px;
margin-bottom: 20px;
}

#telBusinessFlex {
margin-bottom: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}

#telBusinessFlex #business {
font-size: 1.1rem;
line-height: 1.5;
}

.copyright {
font-family: var(--font-oswald);
margin-top: 40px;
}

#footerR {
width: 100%;
}

#footerR nav {
line-height: 1.5;
}

#footerR nav ul li {
position: relative;
display: table;
margin-bottom: 15px;
}

#footerR nav ul li a {
color: #fff;
}

#footerR nav ul li a:hover {
opacity: .7;
}

#footerR nav ul li ul {
margin: 10px 0;
}

#footerR nav ul li ul li {
position: relative;
margin-bottom: 10px;
padding-left: 22px;
}

#footerR nav ul li ul li::before {
position: absolute;
background-color: #fff;
width: 15px;
height: 1px;
content: "";
left: 0;
bottom: 5px;
}

#pagetop {
position: fixed;
background-color: #fff;
width: 50px;
height: 50px;
display: block;
transition: all .5s;
cursor: pointer;
border: 1px solid var(--themeColor);
z-index: 100;
right: 10px;
bottom: -60px;
}

#pagetop::before,
#pagetop::after {
position: absolute;
width: 8px;
height: 8px;
margin: auto;
border-top: 1px solid var(--themeColor);
border-right: 1px solid var(--themeColor);
content: "";
transform: rotate(-45deg);
top: 5px;
bottom: 0;
right: 0;
left: 0;
}

#pagetop::after {
top: -5px;
}

.orderBox { 
display: flex;
flex-direction: column;
}

.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }

}