@charset "UTF-8";

:root {
--header-height: 80px;
--header-height-sp: 54px;
}  body {
padding-top: var(--header-height);
color: #333;
font-family: "Noto Sans JP","游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
min-width: 1000px;
opacity: 0;
-webkit-transition: 2s ease-in;
transition: 2s ease-in;
-webkit-transition-property: opacity;
transition-property: opacity;
}
body.js-active {
opacity: 1;
}
.font-YuMincho {
font-family: "YuMincho",'Yu Mincho',serif;
font-weight: normal;
}
.font-Book-Antiqua {
font-family: 'Book Antiqua',"YuMincho",'Yu Mincho',serif;
font-weight: normal;
}
@media screen and (max-width: 767px) {
body {
min-width: inherit;
padding-top: var(--header-height-sp);
}
body.js-noscroll {
overflow: hidden;
}
}
@media screen and (min-width: 768px) {
.sp-only {
display: none !important;
}
a {
-webkit-transition: 0.2s;
transition: 0.2s;
}
a:hover {
opacity: 0.8;
}
img {
image-rendering: -webkit-optimize-contrast;
}
}
@media screen and (max-width: 767px) {
.pc-only {
display: none !important;
}
}
img {
display: block;
max-width: 100%;
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.secTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.secMainTtl {
font-size: 50px;
font-family: 'Book Antiqua',"YuMincho",'Yu Mincho',serif;
}
.secSubTtl {
margin-top: 10px;
font-size: 18px;
}
@media screen and (max-width: 767px) {
.secTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.secMainTtl {
font-size: 28px;
}
.secSubTtl {
margin-top: 6px;
font-size: 15px;
}
} .header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--header-height);
padding: 0 0 0 15px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
background-color: #fff;
-webkit-box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, 0.2);
}
.headerInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
}
.headerLogo {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.headerLogo__img {
height: 24px;
}
.headerNav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.headerNavList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.headerNavList__link {
padding: 10px 20px;
font-size: 16px;
}
@media screen and (max-width: 1200px) {
.headerNavList__link {
padding: 10px 15px;
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--header-height-sp);
padding: 0 0 0 10px;
}
.headerInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
}
.headerLogo__link {
display: block;
}
.headerLogo__img {
height: 38px;
}
.headerNav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.headerNavList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.headerNavList__link {
padding: 10px 20px;
font-size: 16px;
}
} .headerNavList__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 0 15px;
padding: 14px 25px 14px 28px;
background-color: #4fbbbb;
border-radius: 40px 0 0 40px;
}
.headerNavList__contact-icon {
margin: 0 15px 0 0;
width: 32px;
}
.headerNavList__contact-txt {
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 1200px) {
.headerNavList__contact-icon {
margin: 0 15px 0 0;
width: 26px;
}
.headerNavList__contact-txt {
color: #fff;
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.headerNavList__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0px 0px 0px 10px;
padding: 12px 15px 12px 20px;
background-color: #4fbbbb;
border-radius: 40px 0 0 40px;
}
.headerNavList__contact-icon {
margin: 0 8px 0 0;
width: 20px;
}
.headerNavList__contact-txt {
color: #fff;
font-size: 14px;
}
} @media screen and (max-width: 767px) {
.header-menuBtn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 45px;
height: 45px;
padding: 0 0 8px 0;
background-color: #358888;
position: relative;
}
.header-menuBtn::before {
display: block;
position: absolute;
bottom: 2px;
margin: auto;
color: #fff;
font-size: 9px;
text-align: center;
content: 'MENU';
}
.header-menuBtn.js-active span:nth-child(2) {
opacity: 0;
}
.header-menuBtn.js-active span:nth-child(1) {
width: 30px;
-webkit-transform: rotate(45deg) translateY(-4px) translateX(-1px);
transform: rotate(45deg) translateY(-4px) translateX(-1px);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.header-menuBtn.js-active span:nth-child(3) {
width: 30px;
-webkit-transform: rotate(-45deg) translateY(3px) translateX(0px);
transform: rotate(-45deg) translateY(3px) translateX(0px);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.header-menuBtn span {
display: block;
width: 25px;
height: 3px;
background-color: #fff;
border-radius: 10px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.header-menuBtn span + span {
margin-top: 5px;
}
} @media screen and (max-width: 767px) {
.headerNavSp {
position: fixed;
top: 0;
left: 0;
margin-top: var(--header-height-sp);
z-index: -10;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
-webkit-transition: 0.3s;
transition: 0.3s;
background-color: rgba(0, 0, 0, 0.5);
}
.headerNavSp.js-active {
opacity: 1;
visibility: visible;
z-index: 999;
}
.headerNavSpList {
width: 100%;
background-color: #358888;
padding: 0 15px;
}
.headerNavSpList__item + .headerNavSpList__item {
border-top: solid 1px #fff;
}
.headerNavSpList__link {
display: block;
padding: 12px 0;
color: #fff;
font-size: 16px;
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(1) .headerNavSpList__link {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(2) .headerNavSpList__link {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(3) .headerNavSpList__link {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(4) .headerNavSpList__link {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(5) .headerNavSpList__link {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(6) .headerNavSpList__link {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(7) .headerNavSpList__link {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.headerNavSp.js-active .headerNavSpList__item:nth-child(8) .headerNavSpList__link {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
} .fixedArea {
position: fixed;
bottom: 0;
left: 0;
z-index: 50;
width: 100%;
background-color: #358888;
-webkit-box-shadow: 0px -5px 11px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px -5px 11px 1px rgba(0, 0, 0, 0.2);
}
.fixedList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fixedList__item {
width: 33.333%;
}
.fixedList__item + .fixedList__item {
border-left: solid 1px #fff;
}
.fixedList__link {
display: block;
padding: 15px 5px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 14px;
} .fixedContactList {
position: fixed;
top: 100px;
right: 0;
z-index: 100;
}
.fixedContactList__item + .fixedContactList__item {
margin-top: 12px;
}
.fixedContactList__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
border: solid 3px #4fbbbb;
border-right: none;
border-radius: 10px 0px 0px 10px;
padding: 9px 3px 12px 3px;
}
.fixedContactList__storeName {
margin: 0px 0px 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
color: #4fbbbb;
}
.fixedContactList__num {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
color: #555555;
font-size: 20px;
letter-spacing: -0.05em;
font-weight: bold;
} .mvArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 800px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/img_mv.jpg) no-repeat top -50px center;
background-size: cover;
position: relative;
}
.mvMainTxt {
margin: 0 0 70px 0;
color: #fff;
font-size: 55px;
text-align: center;
text-shadow: 0px 1px 6px #000;
letter-spacing: 0.1em;
opacity: 0;
-webkit-transition: 0.8s;
transition: 0.8s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.mvMainTxt.js-active {
opacity: 1;
}
.mvBtmList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
position: absolute;
bottom: 100px;
}
.mvBtmList__item + .mvBtmList__item {
margin-left: 20px;
}
.mvBtmTxtBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/bg_mv-btmtxt.png) repeat top left;
}
.mvBtmTxt {
font-size: 30px;
color: #fff;
letter-spacing: 0.1em;
}
.mvBtmTxt strong {
font-size: 36px;
}
.mvBtmNote {
position: absolute;
width: 100%;
max-width: 1200px;
padding: 0 15px;
text-align: right;
bottom: -30px;
font-size: 14px;
}
@media screen and (max-width: 767px) {
.mvArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
height: 650px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/img_mv.jpg) no-repeat center top -50px;
background-size: cover;
position: relative;
padding: 0px 10px 80px;
}
.mvMainTxt {
margin: 0 0 5px 0;
color: #fff;
font-size: 26px;
text-align: left;
text-shadow: 0px 1px 6px #000;
letter-spacing: 0.1em;
}
.mvBtmList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
left: auto;
bottom: auto;
width: auto;
max-width: 500px;
margin: 0 auto;
}
.mvBtmList__item:nth-child(1) {
width: 150px;
margin: 0 8px 5px;
}
.mvBtmList__item:nth-child(2) {
width: 150px;
margin: 0 8px 5px;
}
.mvBtmList__item:nth-child(3) {
width: 150px;
margin: 0 8px 5px;
}
.mvBtmList__item:nth-child(4) {
width: 100%;
margin-top: 10px;
}
.mvBtmList__item:nth-child(4) img {
margin: 0 auto;
width: 300px;
}
.mvBtmList__item + .mvBtmList__item {
margin-left: 8px;
}
.mvBtmTxtBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/bg_mv-btmtxt.png) repeat top left;
padding: 10px 15px 10px;
}
.mvBtmTxt {
font-size: 14px;
color: #fff;
letter-spacing: 0.1em;
text-align: center;
}
.mvBtmTxt strong {
font-size: 20px;
}
.mvBtmNote {
position: absolute;
width: auto;
max-width: 1200px;
padding: 0 15px;
text-align: right;
right: 0;
bottom: -25px;
font-size: 12px;
}
} .inner.informationInner {
margin-top: 100px;
padding: 0 15px 20px;
}
.information {
padding: 70px 10px 0;
max-width: 600px;
margin: 0 auto;
}
.information li {
padding: 7px 0;
}
.information li a {
display: flex;
font-size: 18px;
position: relative;
align-items: center;
}
.information li a::after {
content: '';
border-bottom: 1px solid #777;
left: 0;
position: absolute;
width: 100%;
opacity: 0;
transition: 0.3s;
bottom: -7px;
}
.information li:hover a::after {
opacity: 1;
bottom: -5px;
}
.information .info_date {
width: 115px;
font-size: 16px;
}
.information h2 {
width: calc(100% - 115px);
}
@media screen and (max-width:580px) {
.information {
padding: 30px 10px 0;
}
.information li a {
font-size: 14px;
}
.information .info_date {
width: 94px;
}
.information h2 {
width: calc(100% - 94px);
}
} .eventArea {
background-color: #fafafa;
}
.campaignArea {
margin-top: 100px;
padding: 0 15px 100px;
}
.campaignArea .secTtl {
margin: 0 0 50px 0;
}
.newsEventBox {
background-color: #f9f9f9;
}
.newsEventBox-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.newsEventBox-inner > section {
width: 50%;
}
.eventArea {
padding: 70px 20px 70px;
}
.eventArea .secTtl {
margin: 0 0 40px 0;
}
.eventArea .secMainTtl {
font-size: 40px;
}
.eventArea .secSubTtl {
margin-top: 0;
font-size: 16px;
}
.campaign__ttl {
margin: 0 0 20px 0;
font-size: 20px;
}
.campaign__moreLink {
display: inline-block;
margin-top: 30px;
}
.campaignBlock__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.campaignBlock__item + .campaignBlock__item {
margin-top: 60px;
}
.campaign__imgBox {
margin-right: 30px;
position: relative;
width: 500px;
}
.campaign__imgBox::before {
content: "";
display: block;
padding-top: 70.9%; }
.campaign__img {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-object-fit: cover;
object-fit: cover;
}
.campaign__imgBadge {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 20px;
left: -20px;
z-index: 5;
background-color: #4fbbbb;
color: #fff;
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
}
.campaign__contBox {
width: 570px;
}
.campaign__crownTxt {
padding: 8px 10px 8px 40px;
font-size: 20px;
font-weight: bold;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/icon_crown.png) no-repeat center left;
background-size: 34px auto;
border-bottom: dashed 2px #e1e0df;
}
.campaign__campaignPrice {
padding: 5px 10px 5px 48px;
color: #f87480;
}
.campaign__campaignPrice span {
font-size: 30px;
font-weight: bold;
}
.campaign__dataLink {
display: block;
width: 100%;
max-width: 240px;
margin: 20px auto 0;
padding: 12px 12px;
font-size: 18px;
background-color: #f18824;
color: #fff;
text-align: center;
border-radius: 5px;
font-weight: bold;
}
.campaign__campaignLead {
margin-top: 10px;
font-size: 15px;
line-height: 1.6;
}
.campaign__moreLinkBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 50px;
}
.campaign__moreLink {
display: block;
margin: 0 auto 0;
padding: 15px 26px;
text-align: center;
border: solid 1px #000;
color: #000;
font-size: 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.campaign__moreLink:hover {
background-color: #000;
color: #fff;
}
@media screen and (max-width: 767px) {
.campaignArea {
margin-top: 50px;
padding: 0 15px 50px;
}
.campaignArea .secTtl {
margin: 0 0 50px 0;
}
.newsEventBox {
background-color: #f9f9f9;
}
.newsEventBox-inner {
display: block;
}
.newsEventBox-inner > section {
width: auto;
}
.campaignInner {
max-width: 1098px;
}
.campaignBlock__item {
display: block;
}
.campaignBlock__item + .campaignBlock__item {
margin-top: 70px;
}
.campaign__imgBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 0 20px 0;
position: relative;
width: auto;
}
.campaign__imgBadge {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: -30px;
left: 0;
right: 0;
margin: auto;
background-color: #4fbbbb;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 16px;
font-weight: bold;
}
.campaign__contBox {
width: auto;
}
.campaign__crownTxt {
padding: 10px 10px 10px 48px;
font-size: 18px;
font-weight: bold;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/icon_crown.png) no-repeat center left;
background-size: 36px 28px;
border-bottom: dashed 2px #e1e0df;
}
.campaign__campaignPrice {
padding: 5px 10px 5px 48px;
color: #f87480;
}
.campaign__campaignPrice span {
font-size: 24px;
font-weight: bold;
}
.campaign__campaignLead {
margin-top: 20px;
font-size: 14px;
}
}
.campaignArea .secTtl {
margin: 0;
}
.campaignCol {
display: flex;
justify-content: space-between;
}
.campaignCol .listBox {
width: 33.333%;
padding: 30px 10px;
}
.campaign__imgBox {
width: 100%;
}
.campaign__contBox {
width: 100%;
}
.storeLink a {
display: block;
width: 180px;
background-color: #4fbbbb;
color: #fff;
font-size: 20px;
padding: 10px;
text-align: center;
margin: 0 auto 40px;
}
.campaignCol .listBox > p {
text-align: center;
margin: 100px auto;
}
@media screen and (max-width:767px) {
.campaignCol {
display: block;
}
.campaignCol .listBox {
width: 100%;
}
}
.eventCol {
display: flex;
justify-content: space-between;
}
.eventCol .listBox {
width: 33.333%;
padding: 30px 10px;
}
@media screen and (max-width:767px) {
.eventCol {
display: block;
}
.eventCol .listBox {
width: 100%;
}
} .newsArea {
padding: 70px 20px 70px;
background-color: #fafafa;
}
.newsArea .secMainTtl {
font-size: 40px;
}
.newsArea .secSubTtl {
margin-top: 0;
font-size: 16px;
}
.news__ttl.secTtl {
margin: 0 0 40px 0;
}
.newsList__item {
border-bottom: solid 1px #cccccc;
}
.newsList__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 30px 10px 10px;
position: relative;
}
.newsList__link::before {
display: block;
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
border-top: 1px solid #333;
border-right: 1px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
}
.newsList__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #4fbbbb;
color: #fff;
font-size: 12px;
margin: 0 20px 0 0;
}
.newsList__ttl {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 15px;
}
@media screen and (max-width: 767px) {
.newsArea {
padding: 50px 15px 50px;
background-color: #fafafa;
}
.news__ttl.secTtl {
margin: 0 0 20px 0;
}
.newsList__item {
border-bottom: solid 1px #cccccc;
}
.newsList__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 30px 10px 10px;
position: relative;
}
.newsList__link::before {
display: block;
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
border-top: 1px solid #333;
border-right: 1px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
}
.newsList__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4fbbbb;
color: #fff;
font-size: 12px;
margin: 0 15px 0 0;
}
.newsList__ttl {
font-size: 15px;
}
} .userVoiceArea {
padding: 100px 15px 100px;
}
.userVoiceInner {
max-width: 1098px;
}
.userVoice__ttl {
margin: 0 0 30px 0;
}
@media screen and (max-width: 767px) {
.userVoiceArea {
padding: 50px 15px 50px;
}
.userVoiceInner {
max-width: 1098px;
}
} .userVoiceList__item + .userVoiceList__item {
margin-top: 80px;
}
.userVoiceList__userStatus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 15px 0;
}
.userVoiceList__userStatus-icon {
width: 26px;
margin: 0 10px 0 0;
}
.userVoiceList__userStatus-txt {
font-size: 24px;
}
.userVoiceList__ttl {
margin: 0 0 20px 0;
padding: 10px 10px;
font-size: 32px;
text-align: center;
position: relative;
}
.userVoiceList__ttl::before, .userVoiceList__ttl::after {
display: block;
position: absolute;
top: 0;
left: 0px;
width: 35px;
height: 35px;
margin: auto;
border-top: 1px solid #333;
border-left: 1px solid #333;
background: url();
content: '';
}
.userVoiceList__ttl::after {
top: auto;
left: auto;
right: 0;
bottom: 0;
border: none;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.userVoiceList__imgBox {
margin: 0 0 15px 0;
}
.userVoiceList__txt {
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.userVoiceList__item + .userVoiceList__item {
margin-top: 80px;
}
.userVoiceList__userStatus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 15px 0;
}
.userVoiceList__userStatus-icon {
width: 16px;
margin: 0 10px 0 0;
}
.userVoiceList__userStatus-txt {
font-size: 16px;
}
.userVoiceList__ttl {
margin: 0 0 20px 0;
padding: 10px 12px;
font-size: 18px;
text-align: center;
position: relative;
}
.userVoiceList__ttl::before, .userVoiceList__ttl::after {
display: block;
position: absolute;
top: 0;
left: 0px;
width: 25px;
height: 25px;
margin: auto;
border-top: 1px solid #333;
border-left: 1px solid #333;
background: url();
content: '';
}
.userVoiceList__ttl::after {
top: auto;
left: auto;
right: 0;
bottom: 0;
border: none;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.userVoiceList__imgBox {
margin: 0 0 15px 0;
}
.userVoiceList__txt {
font-size: 14px;
line-height: 1.8;
}
}
.userVoiceArea .userVoiceList {
padding-top: 40px;
}
.userVoiceArea .userVoiceList__item {
display: flex;
}
.userVoiceArea .userVoiceList li:nth-child(2n+1) {
flex-direction: row-reverse;
}
.userVoiceArea .userVoiceList .case-imgbox {
width: 40%;
}
.userVoiceArea .userVoiceList__item > div {
padding: 0 20px;
}
.userVoiceArea .userVoiceList .case-imgbox {
width: 40%;
}
.userVoiceArea .userVoiceList .case-detail {
width: 60%;
}
.userVoiceArea .userVoiceList__imgBox {
width: 100%;
height: 0;
padding-top: 120%;
position: relative;
margin: 0;
}
.userVoiceArea .userVoiceList__imgBox img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.userVoiceArea .case-linkbox {
text-align: center;
margin-top: 40px;
}
.userVoiceArea .case-linkbox a {
display: inline-block;
background-color: #4fbbbb;
padding: 10px 50px;
color: #fff;
}
.userVoice__moreLinkBox {
display: flex;
justify-content: center;
margin-top: 50px;
}
.userVoice__moreLink {
display: block;
margin: 0 auto 0;
padding: 15px 26px;
text-align: center;
border: solid 1px #000;
color: #000;
font-size: 20px;
transition: 0.3s;
}
.userVoice__moreLink:hover {
background-color: #000;
color: #fff;
}
@media screen and (max-width:767px) {
#userVoice {
padding: 50px 0 50px;
}
.userVoiceArea .userVoiceList__item > div {
padding: 0;
}
.userVoiceArea .userVoiceList .case-detail {
padding: 0 15px;
}
} .troubleArea {
padding: 0 15px;
background-color: #fdfdfd;
}
.troubleInner {
position: relative;
z-index: 10;
padding: 100px 0 100px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/img_trouble-01.png) no-repeat top left, url(//ubell-1150.jp/wp-content/themes/ub/assets/img/img_trouble-02.png) no-repeat top right;
}
.trouble__ttl {
position: relative;
}
.trouble__mainTtl {
position: relative;
z-index: 1;
font-size: 40px;
}
.trouble__subTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
margin: -30px 0 0px 0;
font-size: 140px;
color: #eeeeee;
}
.troubleList {
width: 100%;
max-width: 540px;
margin: 60px auto 0;
}
.troubleList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 12px 10px;
font-size: 20px;
border-radius: 30px;
background-color: #fff;
text-align: center;
-webkit-box-shadow: 0px 0px 6px -2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px -2px rgba(0, 0, 0, 0.2);
}
.troubleList__item + .troubleList__item {
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.troubleArea {
padding: 0;
background-color: #fdfdfd;
}
.troubleInner {
position: relative;
z-index: 10;
padding: 50px 60px 50px 15px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/img_trouble-01.png) no-repeat bottom -15px right -45px;
background-size: 180px;
}
.trouble__ttl {
position: relative;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.trouble__mainTtl {
position: relative;
z-index: 1;
font-size: 20px;
}
.trouble__subTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
margin: -10px 0 0px 0;
font-size: 50px;
font-weight: bold;
color: #eeeeee;
}
.troubleList {
width: 100%;
max-width: 540px;
margin: 50px auto 0 0;
padding-right: 28%;
}
.troubleList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 10px;
font-size: 13px;
border-radius: 30px;
background-color: #fff;
text-align: center;
-webkit-box-shadow: 0px 0px 6px -2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px -2px rgba(0, 0, 0, 0.2);
}
.troubleList__item + .troubleList__item {
margin-top: 20px;
}
} .reasonArea {
padding: 100px 15px 110px 50px;
}
.reasonInner {
position: relative;
}
.reason__ttl-bg {
position: absolute;
top: -100px;
left: -130px;
z-index: -1;
color: #edf9f8;
font-size: 200px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: 0em;
font-family: YuMincho, "Yu Mincho", serif;
}
.reason__ttl {
margin: 0 0 60px 0;
}
.reasonList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.reasonList__item + .reasonList__item {
margin-top: 50px;
}
.reasonList__imgBox {
margin: 0 30px 0 0;
}
.reasonList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.reasonList__ttl {
margin: 0 0 15px 0;
font-size: 30px;
}
.reasonList__ttl strong {
color: #f87480;
font-size: 40px;
}
.reasonList__txt {
font-size: 16px;
}
@media screen and (max-width: 767px) {
.reasonArea {
padding: 50px 15px 50px 15px;
}
.reasonInner {
position: relative;
}
.reason__ttl-bg {
position: absolute;
top: -100px;
left: -30px;
z-index: -1;
line-height: 1;
color: #edf9f8;
font-size: 100px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: 0em;
font-family: YuMincho, "Yu Mincho", serif;
}
.reason__ttl {
margin: 0 0 40px 0;
}
.reasonList__item {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.reasonList__item + .reasonList__item {
margin-top: 40px;
}
.reasonList__imgBox {
width: 90px;
margin: 0 10px 0 0;
}
.reasonList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.reasonList__ttl {
margin: 0 0 10px 0;
font-size: 18px;
}
.reasonList__ttl strong {
color: #f87480;
font-size: 20px;
}
.reasonList__txt {
font-size: 12px;
}
} .detailArea {
padding: 100px 15px 100px;
background-color: #fcfaf5;
}
.detail__ttl {
margin: 0 0 40px 0;
}
.detailList__item + .detailList__item {
margin-top: 50px;
}
.detailList__item.ar {
margin-top: 70px;
}
.detailList__ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 0;
}
.detailList__mainTtl {
display: block;
text-align: center;
font-size: 35px;
color: #033333;
position: relative;
z-index: 1;
font-weight: bold;
}
.detailList__subTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
text-align: center;
font-size: 140px;
color: #ffecec;
}
.detailList__item.ar .detailList__subTtl {
margin: -50px 0 0 0;
}
.detailList__imgBox {
max-width: 1000px;
width: 100%;
margin-inline: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 1;
}
.detailList__AR-note {
margin: 20px 0 0 0;
text-align: center;
}
@media screen and (max-width: 767px) {
.detailArea {
padding: 50px 15px 50px;
background-color: #fcfaf5;
}
.detail__ttl {
margin: 0 0 40px 0;
}
.detailList__item + .detailList__item {
margin-top: 50px;
}
.detailList__item.ar {
margin-top: 70px;
}
.detailList__ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 0;
width: 150px;
}
.detailList__mainTtl {
display: block;
text-align: center;
font-size: 25px;
color: #033333;
position: relative;
z-index: 1;
font-weight: bold;
}
.detailList__subTtl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
text-align: center;
font-size: 80px;
color: #ffecec;
}
.detailList__item.ar .detailList__subTtl {
margin: -50px 0 0 0;
}
.detailList__imgBox {
display: block;
z-index: 1;
}
.detailList__img + .detailList__img {
margin-top: 30px;
}
.detailList__AR-note {
margin: 20px 0 0 0;
text-align: center;
font-size: 12px;
}
} .appArea {
padding: 50px 15px 50px;
}
.app__ttl.secTtl {
margin: 0 0 50px 0;
}
@media screen and (max-width: 767px) {
.appArea {
padding: 50px 15px 50px;
}
.app__ttl.secTtl {
margin: 0 0 40px 0;
}
} .appAbout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 0 40px 0;
}
.appAbout__leftBox {
width: 503px;
}
.appAbout__ttl {
margin: 0 0 15px 0;
font-size: 34px;
color: #e86e89;
}
.appAbout__lead {
margin: 0 0 15px 0;
}
.appAboutNote__txt {
padding: 8px 10px;
background-color: #4fbbbb;
color: #fff;
text-align: center;
font-size: 20px;
}
.appAbout__logo {
margin: 0 20px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.appAbout__display {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
@media screen and (max-width: 767px) {
.appAbout {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 40px 0;
}
.appAbout__leftBox {
width: 100%;
margin: 0 0 20px 0;
}
.appAbout__ttl {
margin: 0 0 15px 0;
font-size: 23px;
color: #e86e89;
}
.appAbout__lead {
margin: 0 0 15px 0;
font-size: 15px;
}
.appAboutNote__txt {
padding: 8px 8px;
background-color: #4fbbbb;
color: #fff;
text-align: center;
font-size: 14px;
}
.appAbout__logo {
width: calc(30% - 10px);
margin: 0 10px 0 0;
}
.appAbout__display {
width: 70%;
}
} .appSystem {
padding: 40px 20px;
border: solid 6px #fce5e9;
border-radius: 10px;
}
.appSystem__ttl {
margin: 0 0 30px 0;
text-align: center;
font-size: 34px;
}
.appSystemList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.appSystemList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 25%;
padding: 0 24px;
}
.appSystemList__item + .appSystemList__item {
border-left: solid 2px #eeeeee;
}
.appSystemList__imgBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 15px 0;
height: 109px;
}
.appSystemList__ttl {
margin: 0 0 15px 0;
color: #e86e89;
font-size: 30px;
text-align: center;
}
@media screen and (max-width: 767px) {
.appSystem {
padding: 30px 20px;
border: solid 3px #fce5e9;
border-radius: 10px;
}
.appSystem__ttl {
margin: 0 0 20px 0;
text-align: center;
font-size: 20px;
}
.appSystemList {
display: block;
}
.appSystemList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
padding: 0 0;
}
.appSystemList__item + .appSystemList__item {
border-left: none;
border-top: solid 1px #eee;
margin-top: 15px;
padding-top: 15px;
}
.appSystemList__imgBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 15px 0 0;
width: 50px;
height: auto;
}
.appSystemList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.appSystemList__ttl {
margin: 0 0 8px 0;
color: #e86e89;
font-size: 16px;
text-align: left;
}
.appSystemList__txt {
font-size: 12px;
}
} .priceArea {
padding: 70px 15px 70px;
background-color: #edf9f8;
}
.price__ttl.secTtl {
margin: 0 0 50px 0;
}
.priceBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.priceTtlBox {
width: 170px;
height: 100%;
}
.priceTtlBox__txt01 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
padding: 10px;
font-size: 20px;
height: 193px;
}
.priceTtlBox__txt02 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
margin-top: 5px;
padding: 10px;
font-size: 20px;
height: 126px;
}
.priceTtlBox__txt03 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
margin-top: 5px;
padding: 10px;
font-size: 20px;
height: 60px;
}
.priceList {
width: 100%;
max-width: 500px;
}
.priceList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 12px 35px;
background-color: #fff;
}
.priceList__item + .priceList__item {
margin-top: 6px;
}
.priceList__ttl {
color: #278383;
font-size: 20px;
text-align: center;
width: 170px;
}
.priceList__price {
font-size: 24px;
font-weight: bold;
}
.price__note {
margin-top: 10px;
text-align: center;
}
@media screen and (max-width: 767px) {
.priceArea {
padding: 50px 15px 50px;
background-color: #edf9f8;
}
.price__ttl.secTtl {
margin: 0 0 30px 0;
}
.priceBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.priceTtlBox {
width: 130px;
height: 100%;
}
.priceTtlBox__txt01 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
padding: 10px;
font-size: 16px;
height: 151px;
font-weight: bold;
}
.priceTtlBox__txt02 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
margin-top: 6px;
padding: 10px;
font-size: 16px;
height: 118px;
font-weight: bold;
}
.priceTtlBox__txt03 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #4fbbbb;
color: #fff;
text-align: center;
margin-top: 6px;
padding: 10px;
font-size: 16px;
height: 45px;
font-weight: bold;
}
.priceList {
width: 100%;
max-width: 400px;
}
.priceList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 15px;
background-color: #fff;
}
.priceList__item + .priceList__item {
margin-top: 6px;
}
.priceList__ttl {
color: #278383;
font-size: 17px;
text-align: center;
width: 100px;
}
.priceList__price {
font-size: 20px;
font-weight: bold;
}
.price__note {
margin-top: 10px;
text-align: center;
font-size: 12px;
}
} .flowArea {
padding: 70px 15px 70px;
overflow: hidden;
}
.flow__ttl.secTtl {
margin: 0 0 50px 0;
}
@media screen and (max-width: 767px) {
.flowArea {
padding: 50px 15px 50px;
}
.flow__ttl.secTtl {
margin: 0 0 30px 0;
}
} .flowJoin {
margin: 0 0 80px 0;
}
.flowBlock__ttlBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 50px 0;
background: repeating-linear-gradient(0deg, #fff, #fff 4px, #b6dede 4px, #b6dede 7px);
}
.flowBlock__ttlTxt {
display: inline-block;
padding: 0 15px;
font-size: 34px;
background-color: #fff;
height: 32px;
line-height: 28px;
}
.flowJoin-txt01 {
margin: 0 0 20px 0;
font-size: 30px;
color: #4fbbbb;
text-align: center;
}
.flowJoin-txt02 {
margin: 0 0 18px 0;
font-size: 18px;
text-align: center;
}
.flowJoin-txt03 {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.flowJoin-txt04 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 35px;
padding: 30px 30px;
font-size: 18px;
border: 2px solid #4fbbbb;
border-radius: 4px;
}
.flowJoin-txt04 strong {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 40px;
font-size: 34px;
color: #448af5;
line-height: 1;
}
.flowJoin-txt04 span {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
}
@media screen and (max-width: 767px) {
.flowJoin {
margin: 0 0 50px 0;
}
.flowBlock__ttlBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 30px 0;
background: repeating-linear-gradient(0deg, #fff, #fff 2px, #b6dede 2px, #b6dede 4px);
}
.flowBlock__ttlTxt {
display: inline-block;
padding: 0px 15px;
font-size: 18px;
background-color: white;
height: 16px;
line-height: 13px;
}
.flowJoin-txt01 {
margin: 0 0 20px 0;
font-size: 16px;
color: #4fbbbb;
text-align: center;
}
.flowJoin-txt02 {
margin: 0 0 18px 0;
font-size: 14px;
}
.flowJoin-txt03 {
font-size: 14px;
font-weight: bold;
}
.flowJoin-txt04 {
display: block;
margin-top: 30px;
padding: 12px;
font-size: 14px;
text-align: left;
border: 2px solid #4fbbbb;
border-radius: 4px;
line-height: 1.8;
}
.flowJoin-txt04 strong {
text-align: center;
padding: 10px;
font-size: 22px;
color: #448af5;
line-height: 1;
}
} .flowFlow {
margin: 0 0 70px 0;
}
.flowFlowList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 30px 0 0;
}
.flowFlowList__item + .flowFlowList__item {
margin-top: 50px;
}
.flowFlowList__item:nth-child(2n-1) {
padding: 0 0 0 30px;
}
.flowFlowList__item:nth-child(2n-1) .flowFlowList__imgBox {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin: 0 0 0 30px;
}
.flowFlowList__item:nth-child(2n-1) .flowFlowList__cont {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.flowFlowList__num {
width: 76px;
margin: 0px 30px 0px 0px;
}
.flowFlowList__cont {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.flowFlowList__imgBox {
width: 350px;
margin: 0 30px 0 0;
overflow: hidden;
}
.flowFlowList__item:nth-child(2) .flowFlowList__img {
margin-left: -1px;
}
.flowFlowList__item:nth-child(5) .flowFlowList__img {
position: relative;
right: -1px;
}
.flowFlowList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flowFlowList__ttl {
margin: 0 0 5px 0;
font-size: 35px;
color: #4fbbbb;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.flowFlow {
margin: 0 0 50px 0;
}
.flowFlowList {
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.flowFlowList__item {
display: block;
padding: 0;
}
.flowFlowList__item + .flowFlowList__item {
margin-top: 50px;
}
.flowFlowList__item:nth-child(2n-1) {
padding: 0 0 0 0;
}
.flowFlowList__item:nth-child(2n-1) .flowFlowList__imgBox {
margin: 0 0 15px 0;
}
.flowFlowList__num {
width: 40px;
margin: 5px 15px 0px 0px;
}
.flowFlowList__cont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.flowFlowList__imgBox {
width: auto;
margin: 0 0 15px 0;
}
.flowFlowList__img {
margin: 0 auto;
}
.flowFlowList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40px;
}
.flowFlowList__ttl {
margin: 0 0 5px 0;
font-size: 20px;
color: #4fbbbb;
}
.flowFlowList__lead {
font-size: 14px;
}
} .flowLicense__txt01 {
margin: 0 0 30px 0;
color: #4fbbbb;
text-align: center;
font-size: 30px;
}
.flowLicense__txt02 {
padding: 0 30px;
font-size: 18px;
line-height: 1.7;
}
@media screen and (max-width: 767px) {
.flowLicense__txt01 {
margin: 0 0 30px 0;
color: #4fbbbb;
text-align: center;
font-size: 30px;
}
.flowLicense__txt02 {
padding: 0;
font-size: 14px;
line-height: 1.7;
}
} .performanceArea {
padding: 70px 15px 70px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/bg_performance.png) no-repeat top center;
background-size: cover;
}
.performance__ttl.secTtl {
margin: 0 0 50px 0;
}
@media screen and (max-width: 767px) {
.performanceArea {
padding: 50px 15px 50px;
background: url(//ubell-1150.jp/wp-content/themes/ub/assets/img/bg_performance-sp.png) no-repeat top center;
background-size: cover;
}
.performance__ttl.secTtl {
margin: 0 0 30px 0;
}
} .performanceAchieve {
width: 100%;
max-width: 1000px;
margin: 0 auto 50px;
}
.performanceAchieve__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 13px 40px;
border: solid 4px #4fbbbb;
border-radius: 100px;
background-color: #fff;
}
.performanceAchieve__item + .performanceAchieve__item {
margin-top: 20px;
}
.performanceAchieve__ttlBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.performanceAchieve__icon {
width: 56px;
margin: 0 30px 0 0;
}
.performanceAchieve__ttlTxt {
font-size: 38px;
font-weight: bold;
line-height: 1;
letter-spacing: 0.1em;
}
.performanceAchieve__numTxt {
font-size: 75px;
color: #4fbbbb;
font-weight: bold;
line-height: 1;
}
.performanceAchieve__numTxt-sm {
font-size: 38px;
color: #333;
font-weight: bold;
position: relative;
}
.performanceAchieve__numTxt-sm sup {
position: absolute;
top: -6px;
right: 5px;
font-size: 12px;
}
@media screen and (max-width: 767px) {
.performanceAchieve {
width: 100%;
max-width: 1000px;
margin: 0 auto 50px;
}
.performanceAchieve__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 15px;
border: solid 3px #4fbbbb;
border-radius: 100px;
background-color: #fff;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.performanceAchieve__item + .performanceAchieve__item {
margin-top: 15px;
}
.performanceAchieve__ttlBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.performanceAchieve__icon {
display: none;
width: 30px;
margin: 0 30px 0 0;
}
.performanceAchieve__ttlTxt {
font-size: 18px;
font-weight: bold;
line-height: 1;
letter-spacing: 0em;
}
.performanceAchieve__numTxt {
font-size: 32px;
color: #4fbbbb;
font-weight: bold;
line-height: 1;
}
.performanceAchieve__numTxt-sm {
font-size: 20px;
color: #333;
font-weight: bold;
position: relative;
}
.performanceAchieve__numTxt-sm sup {
position: absolute;
top: -6px;
right: -1px;
font-size: 9px;
}
} .performanceSuccess__ttl {
margin: 0 0 20px 0;
text-align: center;
font-size: 38px;
font-weight: bold;
position: relative;
letter-spacing: 0.1em;
}
.performanceSuccess__ttl sup {
font-size: 16px;
}
.performanceSuccessList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.performanceSuccessList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 320px;
height: 320px;
border-radius: 50%;
border: solid 4px #4fbbbb;
background-color: #fff;
}
.performanceSuccessList__year {
text-align: center;
font-size: 38px;
font-weight: bold;
line-height: 1.4;
}
.performanceSuccessList__num {
font-size: 65px;
font-weight: bold;
color: #4fbbbb;
}
.performanceSuccessList__num-sm {
font-size: 38px;
font-weight: bold;
}
.performanceBtmNote {
width: 100%;
max-width: 1000px;
margin: 0 auto;
margin-top: 20px;
text-align: right;
font-size: 14px;
}
@media screen and (max-width: 767px) {
.performanceSuccess__ttl {
margin: 0 0 20px 0;
text-align: center;
font-size: 20px;
font-weight: bold;
position: relative;
letter-spacing: 0.1em;
}
.performanceSuccess__ttl sup {
font-size: 12px;
}
.performanceSuccessList {
display: block;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.performanceSuccessList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 15px;
border: solid 3px #4fbbbb;
border-radius: 100px;
background-color: #fff;
width: 100%;
max-width: 400px;
height: auto;
margin: 0 auto;
}
.performanceSuccessList__item + .performanceSuccessList__item {
margin-top: 15px;
}
.performanceSuccessList__year {
font-size: 18px;
font-weight: bold;
line-height: 1;
letter-spacing: 0em;
}
.performanceSuccessList__num {
margin: 0px 0 3px 0px;
font-size: 32px;
color: #4fbbbb;
font-weight: bold;
line-height: 1;
}
.performanceSuccessList__num-sm {
font-size: 20px;
color: #333;
font-weight: bold;
position: relative;
}
.performanceBtmNote {
width: 100%;
max-width: 1000px;
margin: 0 auto;
margin-top: 20px;
text-align: right;
font-size: 10px;
}
} .experienceArea {
padding: 80px 15px 80px;
background-color: #fdf6f7;
}
.experience__ttl.secTtl {
margin: 0 0 40px 0;
}
@media screen and (max-width: 767px) {
.experienceArea {
padding: 50px 15px 50px;
background-color: #fdf6f7;
}
.experience__ttl.secTtl {
margin: 0 0 30px 0;
}
} .experienceList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 140px;
}
.experienceList__item {
width: 280px;
padding: 18px 12px 12px 12px;
background-color: #fff;
border: solid 3px #fdeaed;
border-radius: 10px;
position: relative;
}
.experienceList__item::before {
display: block;
position: absolute;
top: -109px;
right: 0;
left: 0;
z-index: 2;
width: 136px;
height: 106px;
margin: auto;
border: solid 3px #fdeaed;
border-bottom: none;
border-radius: 136px 136px 0 0;
background-color: #fff;
content: '';
}
.experienceList__icon {
position: absolute;
top: -87px;
right: 0px;
left: 0px;
z-index: 5;
margin: auto;
}
.experienceList__status {
margin: 0 0 7px 0;
text-align: center;
color: #ee9caa;
}
.experienceListInfo__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.experienceListInfo__item + .experienceListInfo__item {
margin-top: 8px;
}
.experienceListInfo__item dt {
width: 60%;
padding: 3px 6px;
background-color: #fdeaed;
text-align: center;
}
.experienceListInfo__item dd {
width: 40%;
text-align: center;
} .experienceList__item.men {
border-color: #d8f0ee;
}
.experienceList__item.men::before {
border-color: #d8f0ee;
}
.experienceList__item.men .experienceList__status {
color: #40a5a5;
}
.experienceList__item.men .experienceListInfo__item dt {
background-color: #d8f0ee;
}
@media screen and (max-width: 767px) {
.experienceList {
display: block;
margin-top: 0;
}
.experienceList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
padding: 12px 12px;
background-color: #fff;
border: solid 3px #fdeaed;
border-radius: 10px;
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.experienceList__item::before {
display: none;
}
.experienceList__item + .experienceList__item {
margin-top: 20px;
}
.experienceList__icon {
position: static;
margin: auto;
width: 60px;
margin: 0 15px 0 0;
}
.experienceList__txtBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.experienceList__status {
margin: 0 0 7px 0;
text-align: left;
color: #ee9caa;
font-size: 15px;
}
.experienceListInfo__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.experienceListInfo__item + .experienceListInfo__item {
margin-top: 8px;
}
.experienceListInfo__item dt {
width: 60%;
padding: 3px 6px;
background-color: #fdeaed;
text-align: center;
font-weight: bold;
}
.experienceListInfo__item dd {
width: 40%;
text-align: center;
font-weight: bold;
} .experienceList__item.men {
border-color: #d8f0ee;
}
.experienceList__item.men::before {
border-color: #d8f0ee;
}
.experienceList__item.men .experienceList__status {
color: #40a5a5;
}
.experienceList__item.men .experienceListInfo__item dt {
background-color: #d8f0ee;
}
} .storeArea {
padding: 80px 15px 80px;
}
.storeInner.inner {
max-width: 1180px;
}
.store__ttl.secTtl {
margin: 0 0 50px 0;
}
@media screen and (max-width: 767px) {
.storeArea {
padding: 50px 15px 50px;
}
.storeInner.inner {
max-width: 1180px;
}
.store__ttl.secTtl {
margin: 0 0 30px 0;
}
} .storeList__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.storeList__item + .storeList__item {
margin-top: 40px;
}
.storeList__imgBox {
margin-right: 30px;
}
@media screen and (min-width: 768px) {
.storeList__imgBox {
width: 45%;
}
}
.storeList__cont {
padding-top: 8px;
}
@media screen and (min-width: 768px) {
.storeList__cont {
width: 55%;
}
}
.storeList__storeName {
margin: 0 0 10px 0;
color: #4fbbbb;
font-size: 20px;
font-weight: bold;
}
.storeList__storeName strong {
font-size: 28px;
}
.storeListInfo {
margin: 0 0 20px 0;
}
.storeListInfo__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 7px 10px;
border-bottom: solid 1px #cccccc;
}
.storeListInfo__item:first-child {
border-top: solid 1px #cccccc;
}
.storeListInfo__item dt {
width: 120px;
font-weight: bold;
}
.storeListInfo__item dd {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: left;
}
.storeListLinks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.storeListLinks__map {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 280px;
margin: 0 10px 0 0;
padding: 10px 10px;
background-color: #4fbbbb;
border-radius: 30px;
}
.storeListLinks__mapIcon {
width: 24px;
margin: 0 5px 0 0;
}
.storeListLinks__mapTxt {
color: #fff;
font-size: 18px;
}
.storeListLinks__line {
margin: 0 10px 0 0;
}
.storeListLinks__lineIcon {
height: 44px;
}
.storeListLinks__instagramIcon {
height: 44px;
}
.storeOperationNote {
margin-top: 40px;
text-align: right;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.storeList__item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.storeList__item + .storeList__item {
margin-top: 50px;
}
.storeList__imgBox {
margin: 20px 0 0 0;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.storeList__cont {
padding-top: 8px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.storeList__storeName {
margin: 0 0 10px 0;
color: #4fbbbb;
font-size: 18px;
font-weight: bold;
}
.storeList__storeName strong {
font-size: 26px;
}
.storeListInfo {
margin: 0 0 20px 0;
}
.storeListInfo__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 7px 0;
border-bottom: solid 1px #cccccc;
font-size: 14px;
}
.storeListInfo__item:first-child {
border-top: solid 1px #cccccc;
}
.storeListInfo__item dt {
width: 110px;
}
.storeListInfo__item dd {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: left;
}
.storeListLinks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.storeListLinks__map {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 240px;
margin: 0 10px 0 0;
padding: 10px 10px;
background-color: #4fbbbb;
border-radius: 30px;
}
.storeListLinks__mapIcon {
width: 20px;
margin: 0 5px 0 0;
}
.storeListLinks__mapTxt {
color: #fff;
font-size: 16px;
}
.storeListLinks__line {
margin: 0 10px 0 0;
}
.storeListLinks__lineIcon {
height: 44px;
}
.storeListLinks__instagramIcon {
height: 44px;
}
.storeOperationNote {
margin-top: 40px;
text-align: left;
font-weight: bold;
font-size: 13px;
}
}
.connectionLinkBox {
padding: 50px 0 0;
}
.connectionLinkBox h3 {
text-align: center;
font-size: 20px;
}
.connectionLinkBox .col2 {
padding: 30px 0 0;
max-width: 780px;
display: flex;
margin: 0 auto;
align-items: center;
}
.connectionLinkBox .col2 div:first-child {
max-width: 356px;
}
@media screen and (min-width:768px) {
.connectionLinkBox .col2 div:last-child {
padding-left: 34px;
}
}
@media screen and (max-width:767px) {
.connectionLinkBox .col2 {
flex-direction: column-reverse;
gap: 12px;
}
}
.storeList__item .imgBox_inner {
position: relative;
width: 100%;
height: 0;
padding-top: 56%;
border-radius: 14px;
overflow: hidden;
}
.storeList__item .imgBox_inner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .contactArea {
padding: 80px 15px 80px;
background-color: #4fbbbb;
}
.contactInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.contact__ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 50px 0 0;
}
.contact__mainTtl {
display: block;
margin: 0 0 10px 0;
color: #fff;
font-size: 50px;
letter-spacing: 0em;
}
.contact__subTtl {
display: block;
color: #fff;
font-size: 18px;
}
.contactLinks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.contactLinks a {
background-color: #fff;
border-radius: 10px;
}
.contactLinks__consul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100px;
margin: 0 0 20px 0;
}
.contactLinks__consul-icon {
margin: 0 20px 0 0;
width: 72px;
}
.contactLinks__consul-txt {
font-size: 28px;
color: #e78596;
font-weight: bold;
letter-spacing: 0.1em;
}
.contactLinks__data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(50% - 10px);
height: 100px;
margin-right: 20px;
}
.contactLinks__data-icon {
width: 43px;
margin: 0 20px 0 0;
}
.contactLinks__data-txt {
font-size: 24px;
font-weight: bold;
letter-spacing: 0.1em;
}
.contactLinks__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(50% - 10px);
height: 100px;
}
.contactLinks__contact-icon {
width: 45px;
margin: 0 20px 0 0;
}
.contactLinks__contact-txt {
font-size: 24px;
font-weight: bold;
letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
.contactArea {
padding: 50px 15px 50px;
background-color: #4fbbbb;
}
.contactInner {
display: block;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.contact__ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 20px 0;
}
.contact__mainTtl {
display: block;
margin: 0 0 0px 0;
color: #fff;
font-size: 30px;
letter-spacing: 0em;
}
.contact__subTtl {
display: block;
color: #fff;
font-size: 16px;
}
.contactLinks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.contactLinks a {
background-color: #fff;
border-radius: 10px;
}
.contactLinks__consul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 60px;
margin: 0 0 12px 0;
}
.contactLinks__consul-icon {
margin: 0 10px 0 0;
width: 36px;
}
.contactLinks__consul-txt {
font-size: 16px;
color: #e78596;
font-weight: bold;
letter-spacing: 0.1em;
}
.contactLinks__data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(50% - 6px);
height: 60px;
margin-right: 12px;
}
.contactLinks__data-icon {
width: 22px;
margin: 0 10px 0 0;
}
.contactLinks__data-txt {
font-size: 16px;
font-weight: bold;
letter-spacing: 0.1em;
}
.contactLinks__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(50% - 6px);
height: 60px;
}
.contactLinks__contact-icon {
width: 22px;
margin: 0 10px 0 0;
}
.contactLinks__contact-txt {
font-size: 16px;
font-weight: bold;
letter-spacing: 0.1em;
}
} .footerArea {
padding: 40px 15px 0;
background-color: #80c9c8;
}
.footerInner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.footerCont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.footerLogo {
display: block;
}
.footerNavList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 20px 0 20px 0;
}
.footerNavList__item + .footerNavList__item {
margin-left: 30px;
}
.footerNavList__link {
color: #fff;
}
.footer__copy {
display: block;
text-align: center;
margin-top: 50px;
padding: 0 0 15px;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 767px) {
.footerArea {
padding: 0 0 0;
background-color: #80c9c8;
}
.footerInner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.footerCont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.footerLogo {
display: block;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-top: 20px;
}
.footerLogoImg {
margin: 0 auto;
}
.footerNavList {
display: block;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.footerNavList__item {
width: 100%;
padding: 10px 10px;
border-bottom: solid 1px #68afae;
}
.footerNavList__item + .footerNavList__item {
margin-left: 0px;
}
.footerNavList__link {
display: block;
color: #fff;
text-align: center;
font-weight: normal;
font-size: 15px;
}
.footer__copy {
display: block;
text-align: center;
margin-top: 20px;
padding: 0 0 15px;
color: #fff;
font-size: 12px;
}
} .BlogHead-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 193px 0 90px;
padding-bottom: 21px;
position: relative;
}
.BlogHead-wrap::before {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 4px;
background-color: #002ba6;
content: '';
}
.BlogHead_ttl {
display: block;
font-size: 70px;
}
.Blog {
padding: 80px 30px 88px;
position: relative;
z-index: 2;
}
.Blog_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
} .Article {
width: 800px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.Article_info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 10px 0;
}
.Article_date {
display: block;
margin: 0 34px 0 0;
font-size: 16px;
color: #777;
font-weight: bold;
letter-spacing: 0.1em;
}
.CatList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.CatList_ttl {
margin: 0 5px 0 0;
font-size: 16px;
color: #38adad;
position: relative;
}
.CatList_item + .CatList_item {
margin-left: 8px;
}
.CatList_link {
padding: 1px 12px;
border-radius: 20px;
font-size: 16px;
color: #fff;
background-color: #38adad;
}
.Article_ttl {
margin: 0 0 29px 0;
padding: 0 0 14px 0;
font-size: 26px;
border-bottom: solid 1px #ccc;
position: relative;
font-weight: bold;
}
.Article_thumb {
margin: 0 0 80px;
}
.Article_thumb img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.Article_cont {
padding-bottom: 30px;
border-bottom: solid 1px #ccc;
} .BackListBtn {
margin-top: 30px;
}
.BackListBtn_link {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
border: solid 1px #999;
position: relative;
}
.BackListBtn_link::before {
display: block;
position: absolute;
top: 0;
right: 0;
left: 2px;
bottom: 0;
width: 8px;
height: 8px;
margin: auto;
border-top: 1px solid #999;
border-right: 1px solid #999;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
content: '';
}
@media screen and (max-width: 767px) {
.BlogHead-wrap {
margin: 110px 0 50px;
padding-bottom: 12px;
}
.BlogHead-wrap::before {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 70px;
height: 2px;
background-color: #002ba6;
content: '';
}
.BlogHead_ttl {
display: block;
font-size: 30px;
}
.Blog {
padding: 50px 15px 88px;
position: relative;
z-index: 2;
}
.Blog_inner {
display: block;
} .Article {
width: auto;
}
.Article_info {
display: block;
margin: 0 0 8px;
}
.Article_date {
display: block;
margin: 0 0px 6px 0;
font-size: 14px;
color: #777;
font-weight: 700;
letter-spacing: .1em;
}
.CatList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.CatList_ttl {
margin: 0 5px 0 0;
font-size: 15px;
color: #38adad;
position: relative;
}
.CatList_item + .CatList_item {
margin-left: 8px;
}
.CatList_link {
padding: 1px 12px;
border-radius: 20px;
font-size: 14px;
color: #fff;
background-color: #38adad;
}
.Article_ttl {
margin: 0 0 29px;
padding: 0 0 10px;
font-size: 22px;
border-bottom: solid 1px #ccc;
}
.Article_thumb {
margin: 0 0 50px 0;
}
} .Sidebar {
width: 350px;
margin: 0 0 0 50px;
}
.Sidebar_item + .Sidebar_item {
margin-top: 70px;
}
.Sidebar_ttl {
font-size: 24px;
font-weight: 600;
color: #4fbbbb;
}
.SidebarList_item {
border-bottom: dashed 1px #ccc;
}
.SidebarList_link {
display: block;
padding: 15px 10px 15px 25px;
font-size: 16px;
position: relative;
}
.SidebarList_link::before {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
height: 0;
margin: auto;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #4fbbbb;
content: '';
}
@media screen and (max-width: 767px) {
.Sidebar {
width: auto;
margin: 100px 0 0 0;
}
.Sidebar_item + .Sidebar_item {
margin-top: 70px;
}
.Sidebar_ttl {
font-size: 20px;
}
.SidebarList_item {
border-bottom: dashed 1px #222;
}
.SidebarList_link {
display: block;
padding: 15px 10px 15px 25px;
font-size: 16px;
position: relative;
}
} .Article_cont {     }
.Article_cont > *:first-child {
margin-top: 0;
}
.Article_cont > *:last-child {
margin-bottom: 0;
}
.Article_cont h2 {
position: relative;
border: none;
font-size: 28px;
padding: 15px;
margin-top: 90px;
margin-bottom: 30px;
border-radius: 4px;
background: #38adad;
color: #fff;
}
.Article_cont h3 {
margin-top: 60px;
margin-bottom: 20px;
border-left: 4px solid #333;
padding: 10px 0 10px 15px;
font-size: 24px;
}
.Article_cont h4 {
margin: 50px 0 20px 0;
border-bottom: solid #333 2px;
padding-bottom: 10px;
font-size: 18px;
}
.Article_cont img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto 20px;
}
.Article_cont p {
margin: 30px 0 30px;
font-size: 16px;
line-height: 2;
}
.Article_cont a {
text-decoration: underline;
color: #488bce;
font-weight: bold;
}
.Article_cont .text-yellow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #ffff94));
background: linear-gradient(transparent 50%, #ffff94 50%);
font-weight: bold;
}
.Article_cont .text-blue {
color: #335acc;
font-weight: bold;
}
.Article_cont .text-green {
color: #38adad;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.Article_cont h1 {
margin: 0 0 24px 0;
border-radius: 3px;
font-size: 22px;
font-weight: bold;
}
.Article_cont h2 {
position: relative;
border: none;
font-size: 20px;
padding: 12px 15px;
margin-top: 70px;
margin-bottom: 30px;
}
.Article_cont h3 {
margin-top: 60px;
margin-bottom: 20px;
border-left: 4px solid #333;
padding: 10px 0 10px 15px;
font-size: 18px;
}
.Article_cont h4 {
font-size: 16px;
}
.Article_cont p {
margin: 30px 0 30px;
font-size: 14px;
line-height: 1.9;
}
}
.Article_cont .box-bg {
margin: 30px 0 30px;
padding: 16px 20px;
background-color: #EDF3F5;
border-radius: 4px;
font-size: 16px;
line-height: 1.9;
}
.Article_cont .box-bg p + p {
margin-top: 1em;
}
@media screen and (max-width: 767px) {
.Article_cont .box-bg {
margin: 30px 0;
padding: 12px 15px;
font-size: 14px;
line-height: 1.9;
}
}
.Article_cont .box-border {
margin: 30px 0 30px;
padding: 16px 20px;
border: solid 2px #6dc9c9;
background-color: #edffff;
border-radius: 4px;
font-size: 16px;
line-height: 1.9;
}
.Article_cont .box-border p + p {
margin-top: 1em;
}
@media screen and (max-width: 767px) {
.Article_cont .box-border {
padding: 12px 15px;
font-size: 14px;
}
}
.Article_cont .link-btn {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
}
.Article_cont .link-btn a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 360px;
margin: 30px 0;
padding: 20px 40px;
border-radius: 4px;
font-size: 18px;
color: #fff;
background-color: #488bce;
position: relative;
text-decoration: none;
font-weight: 400;
}
.Article_cont .link-btn a:before {
display: block;
position: absolute;
top: 0;
right: 24px;
bottom: 0;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: url();
content: '';
}
.Article_cont .link-btn a:after {
display: none;
}
@media screen and (max-width: 767px) {
.Article_cont .link-btn a {
min-width: 300px;
padding: 15px 50px;
font-size: 15px;
}
}
.Article_cont .list {
margin: 30px 0 30px;
padding: 20px 20px;
background-color: #edf3f5;
border-radius: 4px;
}
.Article_cont .list li {
margin: 0;
padding: 0 0 0 20px;
position: relative;
font-size: 16px;
}
.Article_cont .list li:before {
display: block;
position: absolute;
top: 10px;
left: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #121212;
content: '';
}
.Article_cont .list li + li {
margin-top: 8px;
}
@media screen and (max-width: 767px) {
.Article_cont .list {
margin: 15px 0 15px;
padding: 15px 15px;
}
.Article_cont .list li {
font-size: 14px;
}
.Article_cont .list li:before {
display: block;
position: absolute;
top: 8px;
left: 6px;
width: 5px;
height: 5px;
}
.Article_cont .list li + li {
margin-top: 5px;
}
} .Archive_ttl {
margin: -55px 0 60px 0;
text-align: center;
font-size: 30px;
}
.ArchiveList_item {
margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: solid 1px #aaa;
}
.ArchiveList_link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ArchiveList_thumb {
margin: 0 30px 0 0;
width: 300px;
}
.ArchiveList_thumb img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.ArchiveList_cont {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.ArchiveList_txt {
margin: 0 0 20px 0;
font-size: 16px;
}
.ArchiveList_more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 320px;
width: 100%;
height: 60px;
margin: 50px 0 0;
font-size: 20px;
border: solid 1px #222;
position: relative;
-webkit-transition: .3s;
transition: .3s;
}
@media screen and (max-width: 767px) {
.Archive_ttl {
margin: -30px 0 30px 0;
text-align: center;
font-size: 20px;
}
.ArchiveList_link {
display: block;
}
.ArchiveList_thumb {
margin: 0 0 15px 0;
width: auto;
}
.ArchiveList_thumb img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
}
.ArchiveList_cont {
display: block;
}
.ArchiveList_txt {
margin: 0 0 20px 0;
font-size: 14px;
}
.ArchiveList_more {
max-width: 320px;
width: 100%;
margin: 0 auto;
height: 50px;
font-size: 16px;
}
.ArchiveList_more:hover {
color: #222;
}
} .archiveCampaign-ttl {
margin: 50px 0 50px;
}
.archiveCampaign-sortTtl {
font-size: 20px;
text-align: center;
font-weight: bold;
}
.archiveCampaign-sortList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.archiveCampaign-sortList li {
padding: 0 20px;
}
.archiveCampaign-sortList a {
display: block;
text-decoration: underline;
}   .nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.nav-links > a, .nav-links > span:not(.dots) {
width: 40px;
line-height: 40px;
text-align: center;
}
.nav-links > a:not(.prev):not(.next), .nav-links > span:not(.dots) {
background-color: #4fbbbb;
color: #fff;
}
.nav-links > a:not(.prev):not(.next), .nav-links > span:not(.dots) {
width: 40px;
line-height: 40px;
text-align: center;
}
.nav-links > a:not(.prev):not(.next) {
background-color: #4fbbbb;
}
.nav-links > span.current {
background-color: #ccc;
} .single-blog .Article_thumb {
margin: 0 0 20px;
}
@media print, screen and (max-width:767px) {
.post-type-archive-blog .Article_ttl,
.tax-blog_store .Article_ttl,
.single-blog .Article_ttl {
font-size: 20px;
}
}
.single-blog .Article_cont h2 {
color: #fff;
padding: 10px 0 10px 22px;
font-weight: bold;
background-color: #38adad;
border-radius: 4px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
}
@media print, screen and (max-width:767px) {
.single-blog .Article_cont h2 {
font-size: 20px;
}
}
.single-blog .Article_cont h3 {
font-size: 20px;
font-weight: bold;
position: relative;
padding: 0 0 0 16px;
margin: 30px 0 20px;
border-left: 8px solid #38adad;
}
.single-blog .Article_cont .color-bg {
border: 3px solid #595959;
padding: 12px 20px;
border-radius: 10px;
}
.single-blog .Article_cont .color-bg p {
margin: 0;
}
.single-blog .Article_cont .color-blue {
color: #38adad;
}
.single-blog .Article_cont .color-red {
color: #e06666;
}
.single-blog .Article_cont .marker-bold {
background: linear-gradient(transparent 50%, #ffff7f 50%);
}
body.post-type-archive-blog .not-post,
body.tax-blog_store .not-post {
text-align: center;
}
.primary_header > .btn_lc .more:first-child a {
border: 1px solid #76b50f;
background: #76b50f;
}
.primary_header > .btn_lc .more:first-child a:hover {
opacity: 0.7;
}
.primary_header > .btn_lc .more:first-child .add_arrow:hover {
color: #fff;
}
.primary_header > .btn_lc .more:first-child .add_arrow:hover::after {
border-color: #fff;
}